leather-io · fbwoolf · May 16, 2024
diff --git a/src/app/components/balance/btc-balance.tsx b/src/app/components/balance/btc-balance.tsx
@@ -9,7 +9,7 @@ export function BtcBalance() {
     <BitcoinNativeSegwitAccountLoader current>
       {signer => (
         <BtcCryptoAssetLoader address={signer.address}>
-          {asset => <Caption>{formatMoney(asset.balance.availableBalance)}</Caption>}
+          {token => <Caption>{formatMoney(token.balance.availableBalance)}</Caption>}
         </BtcCryptoAssetLoader>
       )}
     </BitcoinNativeSegwitAccountLoader>

diff --git a/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx b/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx
@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 
+import type { CryptoAssetBalance } from '@leather-wallet/models';
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { spamFilter } from '@app/common/utils/spam-filter';
-import type { AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
 import { SkeletonLoader } from '@app/ui/components/skeleton-loader/skeleton-loader';
@@ -16,29 +16,33 @@ import { parseCryptoAssetBalance } from './crypto-asset-item.layout.utils';
 interface CryptoAssetItemLayoutProps {
   additionalBalanceInfo?: ReactNode;
   additionalBalanceInfoAsFiat?: ReactNode;
-  asset: AccountCryptoAssetWithDetails;
+  balance: CryptoAssetBalance;
   caption?: string;
+  contractId?: string;
   fiatBalance?: string;
   icon: React.ReactNode;
   isLoading?: boolean;
   name: string;
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
+  onClick?(symbol: string, contractId?: string): void;
   rightElement?: React.ReactNode;
+  symbol: string;
 }
 export function CryptoAssetItemLayout({
   additionalBalanceInfo,
   additionalBalanceInfoAsFiat,
-  asset,
+  balance,
   caption,
+  contractId,
   fiatBalance,
   icon,
   isLoading = false,
   name,
   onClick,
   rightElement,
+  symbol,
 }: CryptoAssetItemLayoutProps) {
-  const { dataTestId, formattedBalance } = parseCryptoAssetBalance(asset.balance);
-  const { availableBalance } = asset.balance;
+  const { dataTestId, formattedBalance } = parseCryptoAssetBalance(balance);
+  const { availableBalance } = balance;
   const title = spamFilter(name);
 
   const titleRight = (
@@ -88,7 +92,7 @@ export function CryptoAssetItemLayout({
 
   if (isInteractive)
     return (
-      <Pressable data-testid={dataTestId} onClick={() => onClick(asset)} my="space.02">
+      <Pressable data-testid={dataTestId} onClick={() => onClick(symbol, contractId)} my="space.02">
         {content}
       </Pressable>
     );

diff --git a/src/app/components/loaders/brc20-tokens-loader.tsx b/src/app/components/loaders/brc20-tokens-loader.tsx
@@ -1,10 +1,18 @@
-import { useBrc20AccountCryptoAssetsWithDetails } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks';
-import type { Brc20AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
+import type { Brc20CryptoAssetInfo, CryptoAssetBalance, MarketData } from '@leather-wallet/models';
+
+import { useBrc20Tokens } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks';
 
 interface Brc20TokensLoaderProps {
-  children(tokens: Brc20AccountCryptoAssetWithDetails[]): React.ReactNode;
+  children(
+    tokens: {
+      assetInfo: Brc20CryptoAssetInfo;
+      balance: CryptoAssetBalance;
+      holderAddress: string;
+      marketData: MarketData;
+    }[]
+  ): React.ReactNode;
 }
 export function Brc20TokensLoader({ children }: Brc20TokensLoaderProps) {
-  const tokens = useBrc20AccountCryptoAssetsWithDetails();
+  const tokens = useBrc20Tokens();
   return children(tokens);
 }
diff --git a/src/app/components/loaders/btc-crypto-asset-loader.tsx b/src/app/components/loaders/btc-crypto-asset-loader.tsx
@@ -1,11 +1,30 @@
-import { useBtcAccountCryptoAssetWithDetails } from '@app/query/bitcoin/btc/btc-crypto-asset.hooks';
-import type { BtcAccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
+import type { BtcCryptoAssetInfo, CryptoAssetBalance, MarketData } from '@leather-wallet/models';
+
+import { BTC_DECIMALS } from '@shared/constants';
+
+import { useGetBitcoinBalanceByAddress } from '@app/query/bitcoin/balance/btc-balance.hooks';
+import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
+import { createCryptoAssetBalance } from '@app/query/common/models';
+
+const btcCryptoAssetInfo: BtcCryptoAssetInfo = {
+  decimals: BTC_DECIMALS,
+  hasMemo: false,
+  name: 'bitcoin',
+  symbol: 'BTC',
+};
 
 interface BtcCryptoAssetLoaderProps {
   address: string;
-  children(asset: BtcAccountCryptoAssetWithDetails, isInitialLoading: boolean): React.ReactNode;
+  children(
+    token: { assetInfo: BtcCryptoAssetInfo; balance: CryptoAssetBalance; marketData: MarketData },
+    isInitialLoading: boolean
+  ): React.ReactNode;
 }
 export function BtcCryptoAssetLoader({ address, children }: BtcCryptoAssetLoaderProps) {
-  const { asset, isInitialLoading } = useBtcAccountCryptoAssetWithDetails(address);
-  return children(asset, isInitialLoading);
+  const marketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
+  const { balance, isInitialLoading } = useGetBitcoinBalanceByAddress(address);
+  return children(
+    { assetInfo: btcCryptoAssetInfo, balance: createCryptoAssetBalance(balance), marketData },
+    isInitialLoading
+  );
 }
diff --git a/src/app/components/loaders/sip10-tokens-loader.tsx b/src/app/components/loaders/sip10-tokens-loader.tsx
@@ -0,0 +1,20 @@
+import type { CryptoAssetBalance, MarketData, Sip10CryptoAssetInfo } from '@leather-wallet/models';
+
+import { useFilteredSip10Tokens } from '@app/query/stacks/sip10/sip10-tokens.hooks';
+import type { Sip10CryptoAssetFilter } from '@app/query/stacks/sip10/sip10-tokens.utils';
+
+interface Sip10TokensLoaderProps {
+  address: string;
+  filter: Sip10CryptoAssetFilter;
+  children(
+    tokens: {
+      assetInfo: Sip10CryptoAssetInfo;
+      balance: CryptoAssetBalance;
+      marketData: MarketData;
+    }[]
+  ): React.ReactNode;
+}
+export function Sip10TokensLoader({ address, filter, children }: Sip10TokensLoaderProps) {
+  const tokens = useFilteredSip10Tokens({ address, filter });
+  return children(tokens);
+}
diff --git a/src/app/components/loaders/stx-crypto-asset-loader.tsx b/src/app/components/loaders/stx-crypto-asset-loader.tsx
@@ -1,11 +1,35 @@
-import type { StxAccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-import { useStxAccountCryptoAssetWithDetails } from '@app/query/stacks/stx/stx-crypto-asset.hooks';
+import type { MarketData, StxCryptoAssetBalance, StxCryptoAssetInfo } from '@leather-wallet/models';
+
+import { STX_DECIMALS } from '@shared/constants';
+
+import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
+import { isFetchedWithSuccess } from '@app/query/query-config';
+import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
+
+const stxCryptoAssetInfo: StxCryptoAssetInfo = {
+  decimals: STX_DECIMALS,
+  hasMemo: true,
+  name: 'stacks',
+  symbol: 'STX',
+};
 
 interface StxCryptoAssetLoaderProps {
   address: string;
-  children(asset: StxAccountCryptoAssetWithDetails, isInitialLoading: boolean): React.ReactNode;
+  children(
+    token: {
+      assetInfo: StxCryptoAssetInfo;
+      balance: StxCryptoAssetBalance;
+      marketData: MarketData;
+    },
+    isInitialLoading: boolean
+  ): React.ReactNode;
 }
 export function StxCryptoAssetLoader({ address, children }: StxCryptoAssetLoaderProps) {
-  const { asset, isInitialLoading } = useStxAccountCryptoAssetWithDetails(address);
-  return children(asset, isInitialLoading);
+  const marketData = useCryptoCurrencyMarketDataMeanAverage('STX');
+  const query = useStxCryptoAssetBalance(address);
+  if (!isFetchedWithSuccess(query)) return;
+  return children(
+    { assetInfo: stxCryptoAssetInfo, balance: query.data, marketData },
+    query.isInitialLoading
+  );
 }
diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx
@@ -1,3 +1,4 @@
+import type { CryptoAssetBalance, MarketData } from '@leather-wallet/models';
 import { Stack } from 'leather-styles/jsx';
 
 import { useWalletType } from '@app/common/use-wallet-type';
@@ -9,6 +10,7 @@ import {
 import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader';
 import { BtcCryptoAssetLoader } from '@app/components/loaders/btc-crypto-asset-loader';
 import { RunesLoader } from '@app/components/loaders/runes-loader';
+import { Sip10TokensLoader } from '@app/components/loaders/sip10-tokens-loader';
 import { Src20TokensLoader } from '@app/components/loaders/src20-tokens-loader';
 import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
 import { Stx20TokensLoader } from '@app/components/loaders/stx20-tokens-loader';
@@ -19,7 +21,7 @@ import { Src20TokenAssetList } from '@app/features/asset-list/bitcoin/src20-toke
 import { Stx20TokenAssetList } from '@app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list';
 import { StxCryptoAssetItem } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item';
 import { StxCryptoAssetItemFallback } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item-fallback';
-import type { AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
+import type { CryptoAssetInfo } from '@app/query/common/models';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
 import { BtcCryptoAssetItem } from './bitcoin/btc-crypto-asset-item/btc-crypto-asset-item';
@@ -28,9 +30,14 @@ import { Sip10TokenAssetList } from './stacks/sip10-token-asset-list/sip10-token
 import { Sip10TokenAssetListUnsupported } from './stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported';
 
 export type AssetListVariant = 'interactive' | 'read-only';
+export interface AssetItem {
+  assetInfo: CryptoAssetInfo;
+  balance: CryptoAssetBalance;
+  marketData: MarketData;
+}
 
 interface AssetListProps {
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
+  onClick?(symbol: string, contractId?: string): void;
   variant?: AssetListVariant;
 }
 export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
@@ -46,11 +53,11 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
           <BitcoinNativeSegwitAccountLoader current>
             {nativeSegwitAccount => (
               <BtcCryptoAssetLoader address={nativeSegwitAccount.address}>
-                {(asset, isInitialLoading) => (
+                {(token, isInitialLoading) => (
                   <BtcCryptoAssetItem
-                    asset={asset}
                     isLoading={isInitialLoading}
                     onClick={onClick}
+                    token={token}
                   />
                 )}
               </BtcCryptoAssetLoader>
@@ -64,11 +71,11 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
           >
             {nativeSegwitAccount => (
               <BtcCryptoAssetLoader address={nativeSegwitAccount.address}>
-                {(asset, isInitialLoading) => (
+                {(token, isInitialLoading) => (
                   <BtcCryptoAssetItem
-                    asset={asset}
                     isLoading={isInitialLoading}
                     onClick={onClick}
+                    token={token}
                   />
                 )}
               </BtcCryptoAssetLoader>
@@ -89,11 +96,16 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
         {account => (
           <>
             <StxCryptoAssetLoader address={account.address}>
-              {(asset, isInitialLoading) => (
-                <StxCryptoAssetItem asset={asset} isLoading={isInitialLoading} onClick={onClick} />
+              {(token, isInitialLoading) => (
+                <StxCryptoAssetItem isLoading={isInitialLoading} onClick={onClick} token={token} />
               )}
             </StxCryptoAssetLoader>
-            <Sip10TokenAssetList address={account.address} onClick={onClick} />
+            <Sip10TokensLoader
+              address={account.address}
+              filter={variant === 'interactive' ? 'all' : 'supported'}
+            >
+              {tokens => <Sip10TokenAssetList tokens={tokens} onClick={onClick} />}
+            </Sip10TokensLoader>
             {isReadOnly && (
               <Stx20TokensLoader address={account.address}>
                 {tokens => <Stx20TokenAssetList tokens={tokens} />}
@@ -109,7 +121,7 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
             {taprootAccount => (
               <>
                 <Brc20TokensLoader>
-                  {tokens => <Brc20TokenAssetList assets={tokens} variant={variant} />}
+                  {tokens => <Brc20TokenAssetList tokens={tokens} variant={variant} />}
                 </Brc20TokensLoader>
                 {isReadOnly && (
                   <>
@@ -129,7 +141,11 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
 
       {isReadOnly && (
         <CurrentStacksAccountLoader>
-          {account => <Sip10TokenAssetListUnsupported address={account.address} />}
+          {account => (
+            <Sip10TokensLoader address={account.address} filter="unsupported">
+              {tokens => <Sip10TokenAssetListUnsupported tokens={tokens} />}
+            </Sip10TokensLoader>
+          )}
         </CurrentStacksAccountLoader>
       )}
     </Stack>

diff --git a/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
@@ -7,39 +7,48 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { capitalize } from '@app/common/utils';
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
-import type { AssetListVariant } from '@app/features/asset-list/asset-list';
+import type { AssetItem, AssetListVariant } from '@app/features/asset-list/asset-list';
 import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
-import type { Brc20AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
 import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
 
+interface Brc20AssetItem extends AssetItem {
+  holderAddress: string;
+}
+
 interface Brc20TokenAssetListProps {
-  assets: Brc20AccountCryptoAssetWithDetails[];
+  tokens: Brc20AssetItem[];
   variant?: AssetListVariant;
 }
-export function Brc20TokenAssetList({ assets, variant }: Brc20TokenAssetListProps) {
+export function Brc20TokenAssetList({ tokens, variant }: Brc20TokenAssetListProps) {
   const navigate = useNavigate();
   const { balance, isInitialLoading } = useCurrentBtcAvailableBalanceNativeSegwit();
 
   const hasPositiveBtcBalanceForFees = variant === 'interactive' && balance.amount.isGreaterThan(0);
 
-  function navigateToBrc20SendForm(asset: Brc20AccountCryptoAssetWithDetails) {
-    const { balance, holderAddress, info, marketData } = asset;
-    navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', info.symbol), {
-      state: { balance: balance.availableBalance, holderAddress, marketData, ticker: info.symbol },
+  function navigateToBrc20SendForm(token: Brc20AssetItem) {
+    const { balance, holderAddress, assetInfo, marketData } = token;
+    navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', assetInfo.symbol), {
+      state: {
+        balance: balance.availableBalance,
+        holderAddress,
+        marketData,
+        ticker: assetInfo.symbol,
+      },
     });
   }
 
   return (
     <Stack data-testid={CryptoAssetSelectors.CryptoAssetList}>
-      {assets.map(asset => (
+      {tokens.map(token => (
         <CryptoAssetItemLayout
-          asset={asset}
-          caption={capitalize(asset.info.name)}
+          balance={token.balance}
+          caption={capitalize(token.assetInfo.name)}
           icon={<Brc20AvatarIcon />}
           isLoading={isInitialLoading}
-          key={asset.info.symbol}
-          name={asset.info.symbol}
-          onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(asset) : undefined}
+          key={token.assetInfo.symbol}
+          name={token.assetInfo.name}
+          onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : undefined}
+          symbol={token.assetInfo.symbol}
         />
       ))}
     </Stack>

diff --git a/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item-fallback.tsx b/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item-fallback.tsx
@@ -1,5 +1,6 @@
+import { createMoney } from '@shared/models/money.model';
+
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
-import { btcCryptoAssetPlaceholder } from '@app/query/bitcoin/btc/btc-crypto-asset.hooks';
 import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
@@ -14,10 +15,11 @@ export function BtcCryptoAssetItemFallback({ variant }: StxCryptoAssetItemFallba
   if (variant === 'interactive' && !checkBlockchainAvailable('bitcoin')) return null;
   return (
     <CryptoAssetItemLayout
-      asset={btcCryptoAssetPlaceholder}
+      balance={{ availableBalance: createMoney(0, 'BTC') }}
       icon={<BtcAvatarIcon />}
-      name={btcCryptoAssetPlaceholder.info.name}
-      rightElement={<ConnectLedgerButton chain={btcCryptoAssetPlaceholder.chain} />}
+      name="bitcoin"
+      rightElement={<ConnectLedgerButton chain="bitcoin" />}
+      symbol="BTC"
     />
   );
 }