- Select Resource
+
+ Select Resource
+
You'll need to specify the resource your custom domain will
be associated with. This could either be a website, an instance or
diff --git a/src/components/common/NewEntityTab/cmp.tsx b/src/components/common/NewEntityTab/cmp.tsx
index ce51a3b9f..c9749c761 100644
--- a/src/components/common/NewEntityTab/cmp.tsx
+++ b/src/components/common/NewEntityTab/cmp.tsx
@@ -14,6 +14,7 @@ export default function NewEntityTab(props: NewEntityTabProps) {
{
id: 'function',
name: 'Function',
+ disabled: true,
},
{
id: 'instance',
@@ -28,6 +29,7 @@ export default function NewEntityTab(props: NewEntityTabProps) {
id: 'confidential',
name: 'TEE Instance',
label: { label: 'BETA', position: 'top' },
+ disabled: true,
},
]}
tw="overflow-hidden"
diff --git a/src/components/common/NodeDetailLockSwitch/styles.tsx b/src/components/common/NodeDetailLockSwitch/styles.tsx
index b78ee3127..343cac7f1 100644
--- a/src/components/common/NodeDetailLockSwitch/styles.tsx
+++ b/src/components/common/NodeDetailLockSwitch/styles.tsx
@@ -8,8 +8,7 @@ export const StyledSwitch = styled(Switch)`
background-position: 50%;
&::after {
- background-image:
- url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC41Ij4KPHBhdGggZD0iTTUuNDc4NTIgNC42ODc1VjZIOS44NTM1MlY0LjY4NzVDOS44NTM1MiAzLjQ4NDM4IDguODY5MTQgMi41IDcuNjY2MDIgMi41QzYuNDM1NTUgMi41IDUuNDc4NTIgMy40ODQzOCA1LjQ3ODUyIDQuNjg3NVpNMy43Mjg1MiA2VjQuNjg3NUMzLjcyODUyIDIuNTI3MzQgNS40Nzg1MiAwLjc1IDcuNjY2MDIgMC43NUM5LjgyNjE3IDAuNzUgMTEuNjAzNSAyLjUyNzM0IDExLjYwMzUgNC42ODc1VjZIMTMuNzkxVjE0Ljc1SDEuNTQxMDJWNkgzLjcyODUyWiIgZmlsbD0iIzE0MTMyNyIvPgo8L2c+Cjwvc3ZnPgo='),
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC41Ij4KPHBhdGggZD0iTTUuNDc4NTIgNC42ODc1VjZIOS44NTM1MlY0LjY4NzVDOS44NTM1MiAzLjQ4NDM4IDguODY5MTQgMi41IDcuNjY2MDIgMi41QzYuNDM1NTUgMi41IDUuNDc4NTIgMy40ODQzOCA1LjQ3ODUyIDQuNjg3NVpNMy43Mjg1MiA2VjQuNjg3NUMzLjcyODUyIDIuNTI3MzQgNS40Nzg1MiAwLjc1IDcuNjY2MDIgMC43NUM5LjgyNjE3IDAuNzUgMTEuNjAzNSAyLjUyNzM0IDExLjYwMzUgNC42ODc1VjZIMTMuNzkxVjE0Ljc1SDEuNTQxMDJWNkgzLjcyODUyWiIgZmlsbD0iIzE0MTMyNyIvPgo8L2c+Cjwvc3ZnPgo='),
linear-gradient(90deg, #00d1ff 0%, #0054ff 100%);
background-repeat: no-repeat;
background-position: 50%;
diff --git a/src/components/common/Portal/cmp.tsx b/src/components/common/Portal/cmp.tsx
new file mode 100644
index 000000000..6772c9b34
--- /dev/null
+++ b/src/components/common/Portal/cmp.tsx
@@ -0,0 +1,22 @@
+import { memo, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { PortalProps } from './types'
+
+export const Portal = ({ children, containerRef }: PortalProps) => {
+ const [SSR, setSSR] = useState(true)
+ const container = containerRef?.current
+
+ const shouldRender = container || !SSR
+
+ useEffect(() => {
+ if (container) return
+ setSSR(false)
+ }, [container])
+
+ return shouldRender
+ ? createPortal(children, container || window.document.body)
+ : null
+}
+Portal.displayName = 'Portal'
+
+export default memo(Portal) as typeof Portal
diff --git a/src/components/common/Portal/index.tsx b/src/components/common/Portal/index.tsx
new file mode 100644
index 000000000..028ff6b97
--- /dev/null
+++ b/src/components/common/Portal/index.tsx
@@ -0,0 +1,2 @@
+export { default as Portal } from './cmp'
+export type { PortalProps } from './types'
diff --git a/src/components/common/Portal/types.ts b/src/components/common/Portal/types.ts
new file mode 100644
index 000000000..8aa90c9bd
--- /dev/null
+++ b/src/components/common/Portal/types.ts
@@ -0,0 +1,6 @@
+import { ReactNode, RefObject } from 'react'
+
+export type PortalProps = {
+ containerRef?: RefObject
+ children: ReactNode
+}
diff --git a/src/components/common/Price/cmp.tsx b/src/components/common/Price/cmp.tsx
index 8a4573fa8..904b20dcd 100644
--- a/src/components/common/Price/cmp.tsx
+++ b/src/components/common/Price/cmp.tsx
@@ -3,17 +3,30 @@ import { StyledPrice } from './styles'
import { PriceProps } from './types'
import { Logo } from '@aleph-front/core'
import { humanReadableCurrency } from '@/helpers/utils'
+import Skeleton from '@/components/common/Skeleton'
export const Price = ({
value,
+ type = 'token',
duration,
iconSize = '0.75em',
+ loading = false,
...rest
}: PriceProps) => {
+ if (loading) {
+ return (
+
+
+
+ )
+ }
+
return (
{humanReadableCurrency(value)}
-
+ {type === 'token' && (
+
+ )}
{duration && / {duration}}
)
diff --git a/src/components/common/Price/types.ts b/src/components/common/Price/types.ts
index 4c47eb3c6..316230a28 100644
--- a/src/components/common/Price/types.ts
+++ b/src/components/common/Price/types.ts
@@ -1,8 +1,12 @@
import { StreamDurationUnit } from '@/hooks/form/useSelectStreamDuration'
import { HTMLAttributes } from 'react'
+export type PriceType = 'token' | 'credit'
+
export type PriceProps = HTMLAttributes & {
value: number | undefined
+ type?: PriceType
duration?: StreamDurationUnit
iconSize?: string
+ loading?: boolean
}
diff --git a/src/components/common/ResponsiveTooltip/cmp.tsx b/src/components/common/ResponsiveTooltip/cmp.tsx
deleted file mode 100644
index 0f6f253c6..000000000
--- a/src/components/common/ResponsiveTooltip/cmp.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { memo } from 'react'
-import { Tooltip, TooltipProps, useResponsiveMax } from '@aleph-front/core'
-import tw from 'twin.macro'
-
-export const ResponsiveTooltip = ({
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- forwardedAs,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- as,
- ...rest
-}: TooltipProps) => {
- const isMobile = useResponsiveMax('md')
- const css = isMobile
- ? tw`!fixed !left-0 !top-0 !transform-none m-6 !z-20 !w-[calc(100% - 3rem)] !h-[calc(100% - 3rem)] !max-w-full`
- : ''
-
- return
-}
-ResponsiveTooltip.displayName = 'ResponsiveTooltip'
-
-export default memo(ResponsiveTooltip) as typeof ResponsiveTooltip
diff --git a/src/components/common/ResponsiveTooltip/styles.ts b/src/components/common/ResponsiveTooltip/styles.ts
deleted file mode 100644
index 07ff26f9f..000000000
--- a/src/components/common/ResponsiveTooltip/styles.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Tooltip } from '@aleph-front/core'
-import styled from 'styled-components'
-import tw from 'twin.macro'
-
-export type StyledResponsiveTooltipProps = {
- $isMobile: boolean
-}
-
-export const StyledResponsiveTooltip = styled(
- Tooltip,
-).attrs(({ $isMobile, ...tooltipProps }) => {
- const css = $isMobile
- ? tw`!absolute !top-0 !left-0 !transform-none !z-50 !w-[calc(100% - 3rem)] !h-[calc(100% - 3rem)] !max-w-full !m-48`
- : ''
-
- return {
- ...tooltipProps,
- css,
- }
-})``
diff --git a/src/components/common/SidePanel/cmp.tsx b/src/components/common/SidePanel/cmp.tsx
index 07e037ad3..a54d2c5c8 100644
--- a/src/components/common/SidePanel/cmp.tsx
+++ b/src/components/common/SidePanel/cmp.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback, MouseEvent } from 'react'
import {
StyledBackdrop,
StyledContent,
@@ -7,6 +7,9 @@ import {
StyledSidePanel,
} from './styles'
import { SidePanelProps } from './types'
+import { useTransition } from '@aleph-front/core'
+import { useTheme } from 'styled-components'
+import { Portal } from '../Portal'
export const SidePanel = ({
children,
@@ -18,34 +21,53 @@ export const SidePanel = ({
width,
mobileHeight,
}: SidePanelProps) => {
+ const theme = useTheme()
+
+ const handlePanelClick = useCallback((e: MouseEvent) => {
+ e.stopPropagation()
+ }, [])
+
+ const { shouldMount, stage: $stage } = useTransition(
+ isOpen,
+ theme.transition.duration.normal,
+ )
+
+ const open = $stage === 'enter'
+
return (
<>
-
-
- {/* Side Panel Header */}
-
-
- {title}
-
-
-
- {children}
- {footer && }
-
- {footer && (
- <>
- {footer}
- >
+
+ {shouldMount && (
+
+
+ {/* Side Panel Header */}
+
+
+ {title}
+
+
+
+ {children}
+ {footer && }
+
+ {footer && (
+ <>
+ {footer}
+ >
+ )}
+
+
)}
-
+
>
)
}
diff --git a/src/components/common/SidePanel/styles.tsx b/src/components/common/SidePanel/styles.tsx
index 6aad3eaa2..d9a58917a 100644
--- a/src/components/common/SidePanel/styles.tsx
+++ b/src/components/common/SidePanel/styles.tsx
@@ -9,20 +9,13 @@ export const StyledBackdrop = styled.div`
left: 0;
width: 100vw;
height: 100vh;
- background: rgba(0, 0, 0, 0.5);
+ z-index: ${20 + $order};
- transition:
- opacity ${theme.transition.duration.normal}ms ease-in-out,
- visibility ${theme.transition.duration.normal}ms ease-in-out;
- opacity: 0;
- visibility: hidden;
- z-index: ${28 + $order}; /* just below the side panel */
-
- ${$isOpen &&
- css`
- opacity: 1;
- visibility: visible;
- `}
+ background-color: ${$isOpen ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0)'};
+ visibility: ${$isOpen ? 'inherit' : 'hidden'};
+ transition-property: background-color, visibility;
+ transition-duration: ${theme.transition.duration.normal}ms;
+ transition-timing-function: ${theme.transition.timing};
`}
`
@@ -88,7 +81,6 @@ export const StyledSidePanel = styled.div`
/* For sliding effect on desktop */
transform: translateX(100%);
transition: transform ${theme.transition.duration.normal}ms ease-in-out;
- z-index: ${29 + $order * 2}; /* above the backdrop */
${$isOpen
? css`
diff --git a/src/components/common/Skeleton/cmp.tsx b/src/components/common/Skeleton/cmp.tsx
index b8bcf39db..5d5600e06 100644
--- a/src/components/common/Skeleton/cmp.tsx
+++ b/src/components/common/Skeleton/cmp.tsx
@@ -2,8 +2,12 @@ import React, { memo } from 'react'
import { StyledSkeleton } from './styles'
import { SkeletonProps } from './types'
-export const Skeleton = ({ width, height = '1.1em' }: SkeletonProps) => {
- return
+export const Skeleton = ({
+ width,
+ height = '1.1em',
+ color = 'purple3',
+}: SkeletonProps) => {
+ return
}
Skeleton.displayName = 'Skeleton'
diff --git a/src/components/common/Skeleton/styles.tsx b/src/components/common/Skeleton/styles.tsx
index 678093078..00118e572 100644
--- a/src/components/common/Skeleton/styles.tsx
+++ b/src/components/common/Skeleton/styles.tsx
@@ -5,8 +5,8 @@ import { StyledSkeletonProps } from './types'
export const StyledSkeleton = styled.div`
${tw`animate-pulse rounded-md`}
- ${({ theme, $width, $height }) => css`
- background: ${theme.color.purple3};
+ ${({ theme, $width, $height, $color }) => css`
+ background-color: ${theme.color[$color] || $color};
width: ${$width};
height: ${$height};
`}
diff --git a/src/components/common/Skeleton/types.tsx b/src/components/common/Skeleton/types.tsx
index d73c643a1..d2ac3d6af 100644
--- a/src/components/common/Skeleton/types.tsx
+++ b/src/components/common/Skeleton/types.tsx
@@ -1,9 +1,11 @@
export type SkeletonProps = {
width: string
height?: string
+ color?: string
}
export type StyledSkeletonProps = {
$width?: string
$height?: string
+ $color: string
}
diff --git a/src/components/common/ToggleDashboard/cmp.tsx b/src/components/common/ToggleDashboard/cmp.tsx
index fbda95468..7020553b3 100644
--- a/src/components/common/ToggleDashboard/cmp.tsx
+++ b/src/components/common/ToggleDashboard/cmp.tsx
@@ -1,20 +1,41 @@
-import { ReactNode, memo, useCallback, useRef, useState } from 'react'
+import {
+ Dispatch,
+ ReactNode,
+ SetStateAction,
+ memo,
+ useCallback,
+ useRef,
+} from 'react'
import tw from 'twin.macro'
import { Button, Icon, useTransition, useBounds } from '@aleph-front/core'
import { StyledButtonsContainer, StyledToggleContainer } from './styles'
export type ToggleDashboardProps = {
+ open: boolean
+ setOpen: Dispatch>
+
buttons?: ReactNode
+ toggleButton?: { children: ReactNode; disabled?: boolean }
children?: ReactNode
}
export const ToggleDashboard = ({
buttons,
children,
+ open,
+ setOpen,
+ toggleButton = {
+ children: (
+ <>
+
+ open dashboard
+ >
+ ),
+ disabled: false,
+ },
...rest
}: ToggleDashboardProps) => {
- const [open, setOpen] = useState(true)
- const handleToogle = useCallback(() => setOpen((prev) => !prev), [])
+ const handleToogle = useCallback(() => setOpen((prev) => !prev), [setOpen])
const ref = useRef(null)
@@ -57,9 +78,9 @@ export const ToggleDashboard = ({
size="md"
onClick={handleToogle}
tw="gap-2.5"
+ disabled={toggleButton.disabled}
>
-
- open dashboard
+ {toggleButton.children}
)}
diff --git a/src/components/common/entityData/EntityCustomDomains/cmp.tsx b/src/components/common/entityData/EntityCustomDomains/cmp.tsx
index 98af389fd..4390a689e 100644
--- a/src/components/common/entityData/EntityCustomDomains/cmp.tsx
+++ b/src/components/common/entityData/EntityCustomDomains/cmp.tsx
@@ -1,11 +1,16 @@
import React, { memo, useRef } from 'react'
-import { Icon, NoisyContainer, ObjectImg, Spinner } from '@aleph-front/core'
+import {
+ Icon,
+ NoisyContainer,
+ ObjectImg,
+ Spinner,
+ Tooltip,
+} from '@aleph-front/core'
import Skeleton from '../../Skeleton'
import { DisabledText, Text } from '@/components/pages/console/common'
import RelatedEntityCard from '../RelatedEntityCard'
import { EntityCustomDomainsProps } from './types'
import { EntityType, EntityTypeObject } from '@/helpers/constants'
-import ResponsiveTooltip from '../../ResponsiveTooltip'
import InfoTitle from '../InfoTitle'
import FunctionalButton from '../../FunctionalButton'
@@ -45,7 +50,7 @@ const DomainCard = ({
-
) : (
- (comment ?? ellipseText(runtimeVolumeId, 6, 12))
+ comment ?? ellipseText(runtimeVolumeId, 6, 12)
)}
diff --git a/src/components/common/entityData/EntityPayment/cmp.tsx b/src/components/common/entityData/EntityPayment/cmp.tsx
index 338fa37f0..74da686c3 100644
--- a/src/components/common/entityData/EntityPayment/cmp.tsx
+++ b/src/components/common/entityData/EntityPayment/cmp.tsx
@@ -15,6 +15,7 @@ import InfoTitle from '../InfoTitle'
const PaymentCard = ({ paymentData }: { paymentData: PaymentData }) => {
const {
isStream,
+ isCredit,
totalSpent,
formattedBlockchain,
formattedFlowRate,
@@ -36,7 +37,9 @@ const PaymentCard = ({ paymentData }: { paymentData: PaymentData }) => {
tw="flex items-center gap-1 px-3 py-1"
>
- ALEPH
+
+ {isCredit ? 'CREDITS' : 'ALEPH'}
+
{totalSpent ? totalSpent : }
@@ -50,6 +53,8 @@ const PaymentCard = ({ paymentData }: { paymentData: PaymentData }) => {
{loading ? (
+ ) : isCredit ? (
+ 'Credit'
) : isStream ? (
'Stream'
) : (
@@ -96,29 +101,29 @@ const PaymentCard = ({ paymentData }: { paymentData: PaymentData }) => {
- {isStream && (
- <>
-
- FLOW RATE
-
- {formattedFlowRate ? (
- formattedFlowRate
- ) : (
-
- )}
-
-
-
- TIME ELAPSED
-
- {formattedDuration ? (
- formattedDuration
- ) : (
-
- )}
-
-
- >
+ {(isStream || isCredit) && (
+
+ FLOW RATE
+
+ {formattedFlowRate ? (
+ formattedFlowRate
+ ) : (
+
+ )}
+
+
+ )}
+ {(isStream || isCredit) && (
+
+ TIME ELAPSED
+
+ {formattedDuration ? (
+ formattedDuration
+ ) : (
+
+ )}
+
+
)}
diff --git a/src/components/common/entityData/EntityPayment/hook.ts b/src/components/common/entityData/EntityPayment/hook.ts
index f32bfbe07..0048a67c5 100644
--- a/src/components/common/entityData/EntityPayment/hook.ts
+++ b/src/components/common/entityData/EntityPayment/hook.ts
@@ -3,7 +3,8 @@ import { PaymentType } from '@aleph-sdk/message'
import { PaymentData, StreamPaymentData, UseEntityPaymentReturn } from './types'
import { blockchains } from '@/domain/connect'
import { communityWalletAddress } from '@/helpers/constants'
-import { useCopyToClipboardAndNotify } from '@aleph-front/core'
+import { useCopyToClipboardAndNotify, useLocalRequest } from '@aleph-front/core'
+import { getApiServer } from '@/helpers/server'
// Helper to convert seconds into days, hours, minutes, and seconds
function getTimeComponents(totalSeconds: number) {
@@ -30,6 +31,7 @@ export function useFormatPayment(
startTime,
blockchain,
loading = false,
+ itemHash,
} = paymentData
// Get stream-specific data if this is a stream payment
@@ -45,17 +47,79 @@ export function useFormatPayment(
[paymentType],
)
- // Format total spent amount using the time components for PAYG type
- const totalSpent = useMemo(() => {
+ // Determine if payment is pay-as-you-go
+ const isCredit = useMemo(
+ () => paymentType === PaymentType.credit,
+ [paymentType],
+ )
+
+ // Fetch consumed credits for credit payment type using useLocalRequest
+ const {
+ data: consumedCreditsData,
+ loading: creditsLoading,
+ error: creditsError,
+ } = useLocalRequest<{ item_hash: string; consumed_credits: number }>({
+ doRequest: async () => {
+ if (!itemHash) throw new Error('No item hash provided')
+
+ const apiServer = getApiServer()
+ const response = await fetch(
+ `${apiServer}/api/v0/messages/${itemHash}/consumed_credits`,
+ )
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+
+ return response.json()
+ },
+ onSuccess: () => null,
+ onError: () => null,
+ flushData: false,
+ triggerOnMount: isCredit && !!itemHash,
+ triggerDeps: [isCredit, itemHash],
+ })
+
+ const consumedCredits = consumedCreditsData?.consumed_credits
+
+ // Calculate fallback totalSpent using original logic
+ const fallbackTotalSpent = useMemo(() => {
if (!cost) return
- if (!isStream) return cost.toString()
+ if (!isStream && !isCredit) return cost.toString()
if (!runningTime) return
// Use only the remainder (hours, minutes, seconds) from runningTime
const { days, hours, minutes } = getTimeComponents(runningTime)
const runningTimeInHours = days * 24 + hours + minutes / 60
- return (cost * runningTimeInHours).toFixed(6)
- }, [cost, isStream, runningTime])
+
+ return Math.round(cost * runningTimeInHours)
+ }, [cost, isStream, isCredit, runningTime])
+
+ // Format total spent amount - use consumed credits for credit type, fallback to calculation
+ const totalSpent = useMemo(() => {
+ // For credit payment type, try to use consumed credits from API
+ if (isCredit) {
+ // If we have consumed credits data, use it
+ if (consumedCredits !== undefined) {
+ return consumedCredits
+ }
+ // If API request failed or is loading, use fallback calculation
+ if (creditsError || creditsLoading) {
+ return fallbackTotalSpent
+ }
+ // If no data and no error/loading, return undefined
+ return undefined
+ }
+
+ // For non-credit types, use fallback calculation
+ return fallbackTotalSpent
+ }, [
+ isCredit,
+ consumedCredits,
+ creditsError,
+ creditsLoading,
+ fallbackTotalSpent,
+ ])
// Format blockchain name
const formattedBlockchain = useMemo(() => {
@@ -65,12 +129,13 @@ export function useFormatPayment(
// Format flow rate to show daily cost
const formattedFlowRate = useMemo(() => {
- if (!isStream) return
+ if (!isStream && !isCredit) return
if (!cost) return
- const dailyRate = cost * 24
- return `~${dailyRate.toFixed(4)}/day`
- }, [cost, isStream])
+ const dailyRate = Math.round(cost * 24)
+
+ return `~${dailyRate}/day`
+ }, [cost, isCredit, isStream])
// Format start date
const formattedStartDate = useMemo(() => {
@@ -118,12 +183,13 @@ export function useFormatPayment(
return {
isStream,
+ isCredit,
totalSpent,
formattedBlockchain,
formattedFlowRate,
formattedStartDate,
formattedDuration,
- loading,
+ loading: loading || (isCredit && creditsLoading && !creditsError),
receiverAddress: receiver,
receiverType,
handleCopyReceiverAddress,
diff --git a/src/components/common/entityData/EntityPayment/types.ts b/src/components/common/entityData/EntityPayment/types.ts
index a6edeb29c..c31fee577 100644
--- a/src/components/common/entityData/EntityPayment/types.ts
+++ b/src/components/common/entityData/EntityPayment/types.ts
@@ -9,6 +9,7 @@ export interface BasePaymentData {
startTime?: number // timestamp in milliseconds
blockchain?: Blockchain
loading?: boolean
+ itemHash?: string // Hash of the entity for API calls
}
// Holding payment data (standard payment)
@@ -16,6 +17,11 @@ export interface HoldingPaymentData extends BasePaymentData {
paymentType: PaymentType.hold
}
+// Credit payment data (credit payment)
+export interface CreditPaymentData extends BasePaymentData {
+ paymentType: PaymentType.credit
+}
+
// Stream payment data (pay-as-you-go)
export interface StreamPaymentData extends BasePaymentData {
paymentType: PaymentType.superfluid
@@ -23,7 +29,10 @@ export interface StreamPaymentData extends BasePaymentData {
}
// Union type for all payment data types
-export type PaymentData = HoldingPaymentData | StreamPaymentData
+export type PaymentData =
+ | HoldingPaymentData
+ | CreditPaymentData
+ | StreamPaymentData
// Props for the EntityPayment component - just an array of payment data
export interface EntityPaymentProps {
@@ -33,7 +42,8 @@ export interface EntityPaymentProps {
// Formatted data returned by the hook for display
export interface FormattedPaymentData {
isStream: boolean
- totalSpent?: string
+ isCredit: boolean
+ totalSpent?: string | number
formattedBlockchain?: string
formattedFlowRate?: string
formattedStartDate?: string
diff --git a/src/components/common/entityData/EntityStatus/cmp.tsx b/src/components/common/entityData/EntityStatus/cmp.tsx
index 190ccc89e..df540e64e 100644
--- a/src/components/common/entityData/EntityStatus/cmp.tsx
+++ b/src/components/common/entityData/EntityStatus/cmp.tsx
@@ -7,8 +7,14 @@ import {
} from './types'
import { RotatingLines } from 'react-loader-spinner'
-const EntityStatusV2 = ({ theme, calculatedStatus }: EntityStatusPropsV2) => {
+const EntityStatusV2 = ({
+ theme,
+ calculatedStatus,
+ cannotStart,
+}: EntityStatusPropsV2) => {
const labelVariant = useMemo(() => {
+ if (cannotStart) return 'error'
+
switch (calculatedStatus) {
case 'not-allocated':
return 'warning'
@@ -21,9 +27,11 @@ const EntityStatusV2 = ({ theme, calculatedStatus }: EntityStatusPropsV2) => {
case 'preparing':
return 'warning'
}
- }, [calculatedStatus])
+ }, [calculatedStatus, cannotStart])
const text = useMemo(() => {
+ if (cannotStart) return 'STOPPED'
+
switch (calculatedStatus) {
case 'not-allocated':
return 'NOT ALLLOCATED'
@@ -36,9 +44,11 @@ const EntityStatusV2 = ({ theme, calculatedStatus }: EntityStatusPropsV2) => {
case 'preparing':
return 'PREPARING'
}
- }, [calculatedStatus])
+ }, [calculatedStatus, cannotStart])
const showSpinner = useMemo(() => {
+ if (cannotStart) return false
+
switch (calculatedStatus) {
case 'not-allocated':
return false
@@ -51,7 +61,7 @@ const EntityStatusV2 = ({ theme, calculatedStatus }: EntityStatusPropsV2) => {
case 'preparing':
return true
}
- }, [calculatedStatus])
+ }, [calculatedStatus, cannotStart])
return (