diff --git a/src/components/TotalWalletValue.tsx b/src/components/TotalWalletValue.tsx index 43dbfbb..9e3edb2 100644 --- a/src/components/TotalWalletValue.tsx +++ b/src/components/TotalWalletValue.tsx @@ -1,5 +1,7 @@ import React from 'react' import { formatNumberAbbreviated } from '@/utils/formatting' +import useKaspa from '@/hooks/contexts/useKaspa' +import LoadingPlaceholder from '@/components/animations/LoadingPlaceholder' interface TotalValueProps { totalValue: number @@ -8,10 +10,18 @@ interface TotalValueProps { const TotalWalletValue: React.FC = ({ totalValue }) => { const formattedCurrencyValue = formatNumberAbbreviated(totalValue, true) + const { kaspa } = useKaspa() + return ( -

- {formattedCurrencyValue} -

+ <> +

+ {kaspa.balanceValid ? ( + <> {formattedCurrencyValue} + ) : ( + + )} +

+ ) } diff --git a/src/components/animations/LoadingPlaceholder.tsx b/src/components/animations/LoadingPlaceholder.tsx new file mode 100644 index 0000000..b667cb2 --- /dev/null +++ b/src/components/animations/LoadingPlaceholder.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const LoadingPlaceholder: React.FC<{ className: string }> = ({ className }) => ( +
+) + +export default LoadingPlaceholder \ No newline at end of file diff --git a/src/contexts/kaspa/KaspaContext.ts b/src/contexts/kaspa/KaspaContext.ts index 5284ea1..8ee264f 100644 --- a/src/contexts/kaspa/KaspaContext.ts +++ b/src/contexts/kaspa/KaspaContext.ts @@ -9,6 +9,7 @@ export const defaultState: IKaspa = { connected: false, addresses: [], balance: 0, + balanceValid: false, utxos: [], provider: '', } diff --git a/src/contexts/kaspa/KaspaProvider.tsx b/src/contexts/kaspa/KaspaProvider.tsx index 75dc559..a1fa4d4 100644 --- a/src/contexts/kaspa/KaspaProvider.tsx +++ b/src/contexts/kaspa/KaspaProvider.tsx @@ -117,6 +117,7 @@ export function KaspaProvider({ children }: { children: ReactNode }) { case 'account:balance': dispatch({ type: 'balance', payload: message.data }) dispatch({ type: 'utxos', payload: await request('account:utxos', []) }) + dispatch({ type: 'balanceValid', payload: true }) break case 'account:addresses': dispatch({ @@ -140,6 +141,8 @@ export function KaspaProvider({ children }: { children: ReactNode }) { dispatch({ type: 'connected', payload: connected }) const balance = await request('account:balance', []) dispatch({ type: 'balance', payload: balance }) + const balanceValid = await request('account:balanceValid', []) + dispatch({ type: 'balanceValid', payload: balanceValid }) const utxos = await request('account:utxos', []) dispatch({ type: 'utxos', payload: utxos }) const addresses = await request('account:addresses', []) diff --git a/src/contexts/kaspa/types.ts b/src/contexts/kaspa/types.ts index ec93e37..7e71dee 100644 --- a/src/contexts/kaspa/types.ts +++ b/src/contexts/kaspa/types.ts @@ -8,6 +8,7 @@ export interface IKaspa { connected: boolean addresses: string[] balance: number + balanceValid: boolean utxos: UTXO[] provider: string } diff --git a/src/pages/Wallet/CryptoList.tsx b/src/pages/Wallet/CryptoList.tsx index f08e7eb..4963610 100644 --- a/src/pages/Wallet/CryptoList.tsx +++ b/src/pages/Wallet/CryptoList.tsx @@ -7,6 +7,8 @@ import ErrorMessage from '@/components/messages/ErrorMessage' import { useLocation, useNavigate } from 'react-router-dom' import { usePrices } from '@/hooks/ghost/usePrice' import useVisibleTokens from '@/hooks/wallet/useVisibleTokens' +import useKaspa from '@/hooks/contexts/useKaspa' +import LoadingPlaceholder from '@/components/animations/LoadingPlaceholder' interface CryptoListProps { onTotalValueChange: (value: number) => void @@ -21,6 +23,7 @@ const CryptoList: React.FC = ({ onTotalValueChange }) => { const kasPrice = prices.data?.kaspa?.price ?? 0 const visibleTokens = useVisibleTokens(tokens) + const { kaspa } = useKaspa() useTotalValueCalculation(visibleTokens, kasPrice, onTotalValueChange) @@ -44,7 +47,11 @@ const CryptoList: React.FC = ({ onTotalValueChange }) => { onClick={() => handleTokenClick(token)} className="w-full text-left transition-colors hover:cursor-pointer rounded-lg" > - + {kaspa.balanceValid ? ( + + ) : ( + + )} ))} diff --git a/src/pages/Wallet/Mint/CreateMint/LoadingCreateMint.tsx b/src/pages/Wallet/Mint/CreateMint/LoadingCreateMint.tsx index cfbb913..2c6f8fd 100644 --- a/src/pages/Wallet/Mint/CreateMint/LoadingCreateMint.tsx +++ b/src/pages/Wallet/Mint/CreateMint/LoadingCreateMint.tsx @@ -1,8 +1,5 @@ import React from 'react' - -const LoadingPlaceholder: React.FC<{ className: string }> = ({ className }) => ( -
-) +import LoadingPlaceholder from '@/components/animations/LoadingPlaceholder' export default function LoadingCreateMint() { return ( diff --git a/src/wallet/Account.ts b/src/wallet/Account.ts index 25a0ead..74e725a 100644 --- a/src/wallet/Account.ts +++ b/src/wallet/Account.ts @@ -59,6 +59,10 @@ export default class Account extends EventEmitter { return Number(this.context.balance?.mature ?? 0) / 1e8 } + get balanceValid() { + return this.context.balance != undefined + } + get UTXOs() { const mapUTXO = (utxo: UtxoEntryReference, mature: boolean) => ({ amount: Number(utxo.amount) / 1e8, diff --git a/src/wallet/messaging/RequestMappings.ts b/src/wallet/messaging/RequestMappings.ts index 91bc2d0..db66339 100644 --- a/src/wallet/messaging/RequestMappings.ts +++ b/src/wallet/messaging/RequestMappings.ts @@ -18,6 +18,7 @@ export interface RequestMappings { 'node:submit': [string[]] 'account:addresses': [] 'account:balance': [] + 'account:balanceValid': [] 'account:utxos': [] 'account:estimateKaspaTransactionFee': [[string, string][], number, string] 'account:create': [[string, string][], number, string, CustomInput[]?] @@ -45,6 +46,7 @@ export interface EventMappings { 'node:connection': boolean 'node:network': string 'account:balance': number + 'account:balanceValid': boolean 'account:addresses': string[] 'provider:connection': string } diff --git a/src/wallet/messaging/ResponseMappings.ts b/src/wallet/messaging/ResponseMappings.ts index 769c8f7..d99ab9b 100644 --- a/src/wallet/messaging/ResponseMappings.ts +++ b/src/wallet/messaging/ResponseMappings.ts @@ -18,6 +18,7 @@ export interface ResponseMappings { 'node:submit': string[] 'account:addresses': string[] 'account:balance': number + 'account:balanceValid': boolean 'account:utxos': UTXO[] 'account:estimateKaspaTransactionFee': string 'account:create': [string[], string] diff --git a/src/wallet/messaging/Router.ts b/src/wallet/messaging/Router.ts index e52da00..f757856 100644 --- a/src/wallet/messaging/Router.ts +++ b/src/wallet/messaging/Router.ts @@ -38,6 +38,7 @@ export default class Router { 'node:submit': (transactions) => node.submit(transactions), 'account:addresses': () => account.addresses.receiveAddresses, 'account:balance': () => account.balance, + 'account:balanceValid': () => account.balanceValid, 'account:utxos': () => account.UTXOs, 'account:estimateKaspaTransactionFee': (outputs, feeRate, fee) => account.transactions.estimateKaspaTransactionFee(outputs, feeRate, fee),