feat(wallet/wallet-dashboard): show fiat balance

apps/core/src/hooks/index.ts

@@ -42,6 +42,7 @@ export * from './useTransactionData';
 export * from './useGetStakingValidatorDetails';
 export * from './useCursorPagination';
 export * from './useTheme';
+export * from './useTotalFiatBalance';
 export * from './useNFTBasicData';
 export * from './useOwnedNFT';
 export * from './useNftDetails';

apps/core/src/hooks/useTotalFiatBalance.ts

@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { useBalance } from './useBalance';
+import { useTokenPrice } from './useTokenPrice';
+import { CoinFormat, formatBalance, useCoinMetadata } from './useFormatCoin';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+
+export function useTotalFiatBalance() {
+    const { data: { price } = {} } = useTokenPrice('iota');
+    const address = useCurrentAccount()?.address;
+    const { data: coinBalance } = useBalance(address!);
+    const totalBalance = Number(coinBalance?.totalBalance);
+    const queryResult = useCoinMetadata(IOTA_TYPE_ARG);
+    const iotaToFiat = totalBalance && price ? Number(totalBalance) * Number(price) : 0;
+    const formatted = formatBalance(iotaToFiat, queryResult.data?.decimals ?? 0, CoinFormat.FULL);
+    return price ? `${coinToFiat(formatted, price)}` : null;
+}
+
+function coinToFiat(coinBalance: string, coinPrice: string): string {
+    const totalBalanceInUsd = Number(coinBalance) * Number(coinPrice);
+    return Number(totalBalanceInUsd).toLocaleString('en', {
+        style: 'currency',
+        currency: 'USD',
+    });
+}

apps/wallet-dashboard/components/account-balance/AccountBalance.tsx

@@ -3,7 +3,7 @@
 
 import { useCurrentAccount, useIotaClientContext } from '@iota/dapp-kit';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { useBalance, useFormatCoin } from '@iota/core';
+import { useBalance, useFormatCoin, useTotalFiatBalance } from '@iota/core';
 import { Address, Button, ButtonSize, ButtonType, Panel } from '@iota/apps-ui-kit';
 import { getNetwork } from '@iota/iota-sdk/client';
 import { ReceiveFundsDialog, SendTokenDialog } from '../dialogs';
@@ -14,6 +14,7 @@ export function AccountBalance() {
     const account = useCurrentAccount();
     const address = account?.address;
     const [isReceiveDialogOpen, setIsReceiveDialogOpen] = useState(false);
+    const fiatBalance = useTotalFiatBalance();
     const { network } = useIotaClientContext();
     const { explorer } = getNetwork(network);
     const { data: coinBalance, isPending } = useBalance(address!);
@@ -41,19 +42,26 @@ export function AccountBalance() {
                     <p>Loading...</p>
                 ) : (
                     <div className="flex h-full flex-col items-center justify-center gap-y-lg p-lg">
-                        {address && (
-                            <Address
-                                text={formattedAddress}
-                                isCopyable
-                                copyText={address}
-                                isExternal
-                                externalLink={explorerLink}
-                                onCopySuccess={handleOnCopySuccess}
-                            />
-                        )}
-                        <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
-                            {formatted} {symbol}
-                        </span>
+                        <div className="flex flex-col items-center gap-y-xs">
+                            {address && (
+                                <div className="-mr-lg">
+                                    <Address
+                                        text={formattedAddress}
+                                        isCopyable
+                                        copyText={address}
+                                        isExternal
+                                        externalLink={explorerLink}
+                                        onCopySuccess={handleOnCopySuccess}
+                                    />
+                                </div>
+                            )}
+                            <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
+                                {formatted} {symbol}
+                            </span>
+                            <span className="text-body-md text-neutral-10 dark:text-neutral-92">
+                                {fiatBalance}
+                            </span>
+                        </div>
                         <div className="flex w-full max-w-56 gap-xs">
                             <Button
                                 onClick={openSendTokenDialog}