diff --git a/src/components/common/entityData/EntityPayment/hook.ts b/src/components/common/entityData/EntityPayment/hook.ts index 4f153fb7..ec517944 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/base' 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 @@ -51,8 +53,37 @@ export function useFormatPayment( [paymentType], ) - // Format total spent amount using the time components for PAYG type - const totalSpent = useMemo(() => { + // 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 && !isCredit) return cost.toString() if (!runningTime) return @@ -64,6 +95,32 @@ export function useFormatPayment( 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(() => { if (!blockchain) return @@ -132,7 +189,7 @@ export function useFormatPayment( 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 dd38a8ab..c31fee57 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) diff --git a/src/components/pages/console/function/ManageFunction/hook.ts b/src/components/pages/console/function/ManageFunction/hook.ts index ce5674a4..67edeed3 100644 --- a/src/components/pages/console/function/ManageFunction/hook.ts +++ b/src/components/pages/console/function/ManageFunction/hook.ts @@ -194,6 +194,7 @@ export function useManageFunction(): ManageFunction { startTime: program.time, blockchain: program.payment.chain, loading, + itemHash: program.id, } as HoldingPaymentData, ] case PaymentType.credit: @@ -205,6 +206,7 @@ export function useManageFunction(): ManageFunction { startTime: program.time, blockchain: program.payment.chain, loading, + itemHash: program.id, } as CreditPaymentData, ] default: @@ -216,10 +218,11 @@ export function useManageFunction(): ManageFunction { startTime: program?.time, blockchain: program?.payment?.chain, loading: true, + itemHash: program?.id, } as HoldingPaymentData, ] } - }, [cost, program?.payment, runningTime, program?.time, loading]) + }, [cost, program?.payment, program?.id, runningTime, program?.time, loading]) const handleDownload = useCallback(async () => { if (!programManager) throw Err.ConnectYourWallet diff --git a/src/hooks/common/useEntity/useManageInstanceEntity.ts b/src/hooks/common/useEntity/useManageInstanceEntity.ts index c3c53b6d..535e7afa 100644 --- a/src/hooks/common/useEntity/useManageInstanceEntity.ts +++ b/src/hooks/common/useEntity/useManageInstanceEntity.ts @@ -201,6 +201,7 @@ export function useManageInstanceEntity< startTime: entity.time, blockchain: entity.payment.chain, loading: loadingPaymentData, + itemHash: entity.id, } as HoldingPaymentData, ] case PaymentType.superfluid: @@ -215,6 +216,7 @@ export function useManageInstanceEntity< blockchain: entity?.payment?.chain, loading: false, receiver: stream.receiver, + itemHash: entity.id, }) as StreamPaymentData, ) } @@ -227,6 +229,7 @@ export function useManageInstanceEntity< startTime: entity.time, blockchain: entity.payment.chain, loading: loadingPaymentData, + itemHash: entity.id, } as CreditPaymentData, ] default: @@ -240,6 +243,7 @@ export function useManageInstanceEntity< }, [ cost, entity?.payment, + entity?.id, runningTime, entity?.time, streamDetails?.streams,