feat: add runes fiat balance, closes #5300

package.json

@@ -138,7 +138,7 @@
     "@leather.io/constants": "0.8.1",
     "@leather.io/crypto": "1.0.3",
     "@leather.io/models": "0.10.1",
-    "@leather.io/query": "0.10.2",
+    "@leather.io/query": "0.11.1",
     "@leather.io/tokens": "0.6.1",
     "@leather.io/ui": "1.6.3",
     "@leather.io/utils": "0.10.1",

src/app/components/loaders/runes-loader.tsx

@@ -1,9 +1,11 @@
-import type { CryptoAssetBalance, RuneCryptoAssetInfo } from '@leather.io/models';
+import type { CryptoAssetBalance, MarketData, RuneCryptoAssetInfo } from '@leather.io/models';
 import { useRuneTokens } from '@leather.io/query';
 
 interface RunesLoaderProps {
   addresses: string[];
-  children(runes: { balance: CryptoAssetBalance; info: RuneCryptoAssetInfo }[]): React.ReactNode;
+  children(
+    runes: { balance: CryptoAssetBalance; info: RuneCryptoAssetInfo; marketData: MarketData }[]
+  ): React.ReactNode;
 }
 export function RunesLoader({ addresses, children }: RunesLoaderProps) {
   const { runes = [] } = useRuneTokens(addresses);

src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx

@@ -1,17 +1,20 @@
-import type { CryptoAssetBalance, RuneCryptoAssetInfo } from '@leather.io/models';
+import type { CryptoAssetBalance, MarketData, RuneCryptoAssetInfo } from '@leather.io/models';
 import { RunesAvatarIcon } from '@leather.io/ui';
 import { convertAmountToBaseUnit, createMoneyFromDecimal } from '@leather.io/utils';
 
+import { convertAssetBalanceToFiat } from '@app/common/asset-utils';
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
 
 interface RuneTokenAssetDetails {
   balance: CryptoAssetBalance;
   info: RuneCryptoAssetInfo;
+  marketData: MarketData;
 }
 
 interface RunesAssetListProps {
   runes: RuneTokenAssetDetails[];
 }
+
 export function RunesAssetList({ runes }: RunesAssetListProps) {
   return runes.map((rune, i) => (
     <CryptoAssetItemLayout
@@ -25,6 +28,10 @@ export function RunesAssetList({ runes }: RunesAssetListProps) {
       icon={<RunesAvatarIcon />}
       key={`${rune.info.symbol}${i}`}
       titleLeft={rune.info.spacedRuneName ?? rune.info.runeName}
+      fiatBalance={convertAssetBalanceToFiat({
+        balance: rune.balance.availableBalance,
+        marketData: rune.marketData,
+      })}
     />
   ));
 }