Implements loading indicator when Kaspa's balance is undefined

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<TotalValueProps> = ({ totalValue }) => {
   const formattedCurrencyValue = formatNumberAbbreviated(totalValue, true)
 
+  const { kaspa } = useKaspa()
+
   return (
-    <h1 className="text-primarytext font-rubik text-center flex-grow text-4xl py-4">
-      {formattedCurrencyValue}
-    </h1>
+    <>
+      <h1 className="text-primarytext text-center w-2/3 font-rubik flex-grow text-4xl py-4 flex justify-center">
+        {kaspa.balanceValid ? (
+          <> {formattedCurrencyValue} </>
+        ) : (
+          <LoadingPlaceholder className="flex-grow font-rubik py-4 h-10 max-h-10 w-2/3" />
+        )}
+      </h1>
+    </>
   )
 }
 

src/components/animations/LoadingPlaceholder.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const LoadingPlaceholder: React.FC<{ className: string }> = ({ className }) => (
+  <div className={`bg-muted animate-pulse ${className}`} />
+)
+
+export default LoadingPlaceholder

src/contexts/kaspa/KaspaContext.ts

@@ -9,6 +9,7 @@ export const defaultState: IKaspa = {
   connected: false,
   addresses: [],
   balance: 0,
+  balanceValid: false,
   utxos: [],
   provider: '',
 }

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', [])

src/contexts/kaspa/types.ts

@@ -8,6 +8,7 @@ export interface IKaspa {
   connected: boolean
   addresses: string[]
   balance: number
+  balanceValid: boolean
   utxos: UTXO[]
   provider: string
 }

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<CryptoListProps> = ({ 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<CryptoListProps> = ({ onTotalValueChange }) => {
               onClick={() => handleTokenClick(token)}
               className="w-full text-left transition-colors hover:cursor-pointer rounded-lg"
             >
-              <CryptoListItem token={token} />
+              {kaspa.balanceValid ? (
+                <CryptoListItem token={token} />
+              ) : (
+                <LoadingPlaceholder className="flex-grow w-full h-20 p-3 rounded-lg" />
+              )}
             </li>
           ))}
         </ul>

src/pages/Wallet/Mint/CreateMint/LoadingCreateMint.tsx

@@ -1,8 +1,5 @@
 import React from 'react'
-
-const LoadingPlaceholder: React.FC<{ className: string }> = ({ className }) => (
-  <div className={`bg-muted animate-pulse ${className}`} />
-)
+import LoadingPlaceholder from '@/components/animations/LoadingPlaceholder'
 
 export default function LoadingCreateMint() {
   return (

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,

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
 }

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]

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),