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

apps/apps-backend/src/constants.ts

@@ -1,6 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { FiatTokenName } from '@iota/core/enums/fiatTokenName.enums';
+
 export const tokenPriceKey = (coinName: string) => `tokenPrice${coinName}`;
 export const TOKEN_PRICE_CURRENCY = 'usd';
-export const TOKEN_PRICE_COINS = ['iota'];
+export const TOKEN_PRICE_COINS = [FiatTokenName.Iota];

apps/apps-backend/src/prices/prices.controller.ts

@@ -5,6 +5,7 @@ import { Controller, Get, Inject, Param } from '@nestjs/common';
 import { Cache, CACHE_MANAGER } from '@nestjs/cache-manager';
 import { CoinGeckoService } from '../coingecko/coingecko.service';
 import { TOKEN_PRICE_COINS, tokenPriceKey } from '../constants';
+import { FiatTokenName } from '@iota/core/enums/fiatTokenName.enums';
 
 const ONE_HOUR_IN_MS = 1000 * 60 * 60;
 
@@ -16,9 +17,7 @@ export class PricesController {
     ) {}
 
     @Get('cetus/:coin')
-    async getTokenPrice(@Param('coin') coin: string) {
-        coin = coin.toLowerCase();
-
+    async getTokenPrice(@Param('coin') coin: FiatTokenName) {
         if (!TOKEN_PRICE_COINS.includes(coin)) {
             throw new Error('Invalid coin');
         }

apps/core/src/enums/fiatTokenName.enums.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum FiatTokenName {
+    Iota = 'iota',
+}

apps/core/src/enums/index.ts

@@ -4,3 +4,4 @@
 export * from './theme.enums';
 export * from './explorerLinkType.enums';
 export * from './features.enums';
+export * from './fiatTokenName.enums';

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/useTokenPrice.ts

@@ -7,22 +7,23 @@ import BigNumber from 'bignumber.js';
 
 import { useAppsBackend } from './useAppsBackend';
 import { useCoinMetadata } from './useFormatCoin';
+import { FiatTokenName } from '../enums';
 
 type TokenPriceResponse = { price: string | null };
 
-export function useTokenPrice(coinType: string) {
+export function useTokenPrice(tokenName: FiatTokenName) {
     const { request } = useAppsBackend();
     return useQuery({
-        queryKey: ['apps-backend', 'token-price', coinType],
-        queryFn: () => request<TokenPriceResponse>(`cetus/${coinType}`),
+        queryKey: ['apps-backend', 'token-price', tokenName],
+        queryFn: () => request<TokenPriceResponse>(`cetus/${tokenName}`),
 
         // These values are set to one minute to prevent displaying stale data, as token prices can change frequently.
         staleTime: 60 * 1000,
         gcTime: 60 * 1000,
     });
 }
 
-export function useBalanceInUSD(coinType: string, balance: bigint | string | number) {
+export function useBalanceInUSD(coinType: FiatTokenName, balance: bigint | string | number) {
     const { data: coinMetadata } = useCoinMetadata(coinType);
     const { data: tokenPrice } = useTokenPrice(coinType);
     if (!tokenPrice || !coinMetadata || !tokenPrice.price) return null;

apps/core/src/hooks/useTotalFiatBalance.ts

@@ -0,0 +1,33 @@
+// 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';
+import { FiatTokenName } from '../enums';
+
+export function useTotalFiatBalance(): string {
+    const { data: { price } = {} } = useTokenPrice(FiatTokenName.Iota);
+    const address = useCurrentAccount()?.address;
+
+    if (!address) {
+        return '';
+    }
+
+    const { data: coinBalance } = useBalance(address);
+    const totalBalance = Number(coinBalance?.totalBalance || 0);
+    const queryResult = useCoinMetadata(IOTA_TYPE_ARG);
+    const iotaToFiat = totalBalance && price ? totalBalance * Number(price || 0) : 0;
+    const formatted = formatBalance(iotaToFiat, queryResult.data?.decimals || 0, CoinFormat.FULL);
+    return price ? `${coinToFiat(formatted, price)}` : '';
+}
+
+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,28 @@ 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>
+                            {fiatBalance && (
+                                <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}