feat: rune balances

src/app/components/crypto-assets/bitcoin/runes-asset-list/runes-asset-item.layout.tsx

@@ -0,0 +1,39 @@
+import { styled } from 'leather-styles/jsx';
+
+import { createMoney } from '@shared/models/money.model';
+
+import { formatBalance } from '@app/common/format-balance';
+import type { RuneBalance } from '@app/query/bitcoin/bitcoin-client';
+import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Pressable } from '@app/ui/pressable/pressable';
+
+interface RunesAssetItemLayoutProps {
+  rune: RuneBalance;
+}
+export function RunesAssetItemLayout({ rune }: RunesAssetItemLayoutProps) {
+  const balance = createMoney(Number(rune.total_balance), rune.rune_name, 0).amount.toString();
+  const formattedBalance = formatBalance(balance);
+
+  return (
+    <Pressable my="space.02">
+      <ItemLayout
+        flagImg={<OrdinalAvatarIcon />}
+        titleLeft={rune.rune_name.toUpperCase()}
+        captionLeft="RUNE"
+        titleRight={
+          <BasicTooltip
+            asChild
+            label={formattedBalance.isAbbreviated ? balance : undefined}
+            side="left"
+          >
+            <styled.span data-testid={rune.rune_name} fontWeight={500} textStyle="label.02">
+              {formattedBalance.value}
+            </styled.span>
+          </BasicTooltip>
+        }
+      />
+    </Pressable>
+  );
+}

src/app/components/crypto-assets/bitcoin/runes-asset-list/runes-asset-list.tsx

@@ -0,0 +1,10 @@
+import type { RuneBalance } from '@app/query/bitcoin/bitcoin-client';
+
+import { RunesAssetItemLayout } from './runes-asset-item.layout';
+
+interface RunesAssetListProps {
+  runes: RuneBalance[];
+}
+export function RunesAssetList({ runes }: RunesAssetListProps) {
+  return runes.map(rune => <RunesAssetItemLayout key={rune.rune_id} rune={rune} />);
+}

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -7,8 +7,8 @@ import { StacksFungibleTokenAsset } from '@shared/models/crypto-asset.model';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { BitcoinNativeSegwitAccountLoader } from '@app/components/account/bitcoin-account-loader';
 import { BitcoinBalanceLoader } from '@app/components/balance/bitcoin-balance-loader';
-import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
+import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
 import { CryptoCurrencyAssetItemLayout } from '../crypto-currency-asset/crypto-currency-asset-item.layout';

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

@@ -0,0 +1,14 @@
+import type { RuneBalance } from '@app/query/bitcoin/bitcoin-client';
+import { useGetRunesWalletBalancesQuery } from '@app/query/bitcoin/runes/runes-wallet-balances.query';
+
+interface RunesLoaderProps {
+  address: string;
+  children(runes: RuneBalance[]): React.ReactNode;
+}
+export function RunesLoader({ address, children }: RunesLoaderProps) {
+  // TODO: Remove, only here for testing runes
+  address = 'tb1pd368q84tuark4naym2u5382p59jkd27nw5vu5s44uz8dwdlrcwhqzdl2l2';
+
+  const { data: runes = [] } = useGetRunesWalletBalancesQuery(address);
+  return children(runes);
+}

src/app/components/src20-tokens-loader.tsx → src/app/components/loaders/src20-tokens-loader.tsx

@@ -5,7 +5,6 @@ interface Src20TokensLoaderProps {
   address: string;
   children(src20Tokens: Src20Token[]): React.ReactNode;
 }
-
 export function Src20TokensLoader({ address, children }: Src20TokensLoaderProps) {
   const { data: src20Tokens = [] } = useSrc20TokensByAddress(address);
   return children(src20Tokens);

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

@@ -10,6 +10,7 @@ import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/cry
 import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
 import { useHasBitcoinLedgerKeychain } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { useCurrentAccountTaprootIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
@@ -24,6 +25,7 @@ import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token
 export function AssetsList() {
   const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain();
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
+  const { address: bitcoinAddressTaproot } = useCurrentAccountTaprootIndexZeroSigner();
   const network = useCurrentNetwork();
 
   const { btcAvailableAssetBalance, btcAvailableUsdBalance, isInitialLoading } =
@@ -74,7 +76,12 @@ export function AssetsList() {
       </CurrentStacksAccountLoader>
 
       {whenWallet({
-        software: <BitcoinFungibleTokenAssetList btcAddress={btcAddress} />,
+        software: (
+          <BitcoinFungibleTokenAssetList
+            btcAddress={btcAddress}
+            btcAddressTaproot={bitcoinAddressTaproot}
+          />
+        ),
         ledger: null,
       })}
 

src/app/features/asset-list/components/bitcoin-fungible-tokens-asset-list.tsx

@@ -1,12 +1,18 @@
-import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
+import { RunesAssetList } from '@app/components/crypto-assets/bitcoin/runes-asset-list/runes-asset-list';
 import { Src20TokenAssetList } from '@app/components/crypto-assets/bitcoin/src20-token-asset-list/src20-token-asset-list';
-import { Src20TokensLoader } from '@app/components/src20-tokens-loader';
+import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader';
+import { RunesLoader } from '@app/components/loaders/runes-loader';
+import { Src20TokensLoader } from '@app/components/loaders/src20-tokens-loader';
 
 interface BitcoinFungibleTokenAssetListProps {
   btcAddress: string;
+  btcAddressTaproot: string;
 }
-export function BitcoinFungibleTokenAssetList({ btcAddress }: BitcoinFungibleTokenAssetListProps) {
+export function BitcoinFungibleTokenAssetList({
+  btcAddress,
+  btcAddressTaproot,
+}: BitcoinFungibleTokenAssetListProps) {
   return (
     <>
       <Brc20TokensLoader>
@@ -15,6 +21,9 @@ export function BitcoinFungibleTokenAssetList({ btcAddress }: BitcoinFungibleTok
       <Src20TokensLoader address={btcAddress}>
         {src20Tokens => <Src20TokenAssetList src20Tokens={src20Tokens} />}
       </Src20TokensLoader>
+      <RunesLoader address={btcAddressTaproot}>
+        {runes => <RunesAssetList runes={runes} />}
+      </RunesLoader>
     </>
   );
 }

src/app/query/bitcoin/bitcoin-client.ts

@@ -100,13 +100,18 @@ interface BestinslotBrc20AddressBalanceResponse {
   data: Brc20TokenResponse[];
 }
 
-interface RunesWalletBalanceResponse {
+export interface RuneBalance {
   pkscript: string;
-  wallet_addr: string;
   rune_id: string;
-  total_balance: string;
   rune_name: string;
   spaced_rune_name: string;
+  total_balance: string;
+  wallet_addr: string;
+}
+
+interface RunesWalletBalancesResponse {
+  block_height: number;
+  data: RuneBalance[];
 }
 
 class BestinslotApi {
@@ -163,11 +168,11 @@ class BestinslotApi {
 
   /* RUNES ON TESTNET */
   async getRunesWalletBalances(address: string) {
-    const resp = await axios.get<RunesWalletBalanceResponse[]>(
+    const resp = await axios.get<RunesWalletBalancesResponse>(
       `${this.testnetUrl}/runes/wallet_balances?address=${address}`,
       { ...this.defaultOptions }
     );
-    return resp.data;
+    return resp.data.data;
   }
 }