feat: enable sip10 and brc20 top tokens to display sBTC by default (#831

)

* feat: enable sip10 and brc20 top tokens

* test: fix token management smoketest

* chore: remove unused export

* chore: use core release v34.0.0 and update test comment

package.json

@@ -45,7 +45,7 @@
     "@sats-connect/core": "0.4.3",
     "@scure/base": "^1.1.9",
     "@scure/btc-signer": "1.2.1",
-    "@secretkeylabs/xverse-core": "^33.0.1",
+    "@secretkeylabs/xverse-core": "34.0.0",
     "@stacks/connect": "7.4.1",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
     "@stacks/transactions": "6.16.1",

src/app/components/transactions/transactionAmount.tsx

@@ -39,7 +39,7 @@ export default function TransactionAmount({
   protocol,
   tokenSymbol,
 }: Props): JSX.Element | null {
-  const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();
+  const { data: sip10CoinsList = [] } = useVisibleSip10FungibleTokens();
   const { balanceHidden } = useWalletSelector();
 
   if (currency === 'STX' || (currency === 'FT' && protocol === 'stacks')) {

src/app/components/transactions/transactionTitle.tsx

@@ -28,7 +28,7 @@ type Props = {
 
 export default function TransactionTitle({ transaction }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
-  const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();
+  const { data: sip10CoinsList = [] } = useVisibleSip10FungibleTokens();
 
   const getTokenTransferTitle = (
     tx: StxTransactionData | BtcTransactionData | Brc20HistoryTransactionData,

src/app/components/transactions/txTransfers.tsx

@@ -63,7 +63,7 @@ export default function TxTransfers(props: TxTransfersProps) {
   const { transaction, coin, txFilter } = props;
   const { balanceHidden } = useWalletSelector();
   const selectedAccount = useSelectedAccount();
-  const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();
+  const { data: sip10CoinsList = [] } = useVisibleSip10FungibleTokens();
   const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
 
   function formatAddress(addr: string): string {

src/app/hooks/queries/ordinals/useGetBrc20FungibleTokens.ts

@@ -2,14 +2,15 @@ import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
 import {
   getBrc20Tokens,
-  getFungibleTokenStates,
   getOrdinalsFtBalance,
   type Brc20Token,
   type FungibleToken,
   type FungibleTokenWithStates,
   type SettingsNetwork,
 } from '@secretkeylabs/xverse-core';
 import { useQuery } from '@tanstack/react-query';
+import { selectWithDerivedState } from '@utils/tokens';
+import useGetTopTokens from '../useGetTopTokens';
 
 const brc20TokenToFungibleToken = (coin: Brc20Token): FungibleToken => ({
   name: coin.name,
@@ -60,30 +61,22 @@ export const useGetBrc20FungibleTokens = (select?: (data: FungibleTokenWithState
   const { ordinalsAddress } = useSelectedAccount();
   const { brc20ManageTokens, fiatCurrency, network, spamTokens, showSpamTokens } =
     useWalletSelector();
+  const { data: topTokensData } = useGetTopTokens();
 
   const queryFn = fetchBrc20FungibleTokens(ordinalsAddress, fiatCurrency, network);
-  const selectWithDerivedState = (data: FungibleToken[]) => {
-    const withDerivedState = data.map(
-      (ft: FungibleToken) =>
-        ({
-          ...ft,
-          ...getFungibleTokenStates({
-            fungibleToken: ft,
-            manageTokens: brc20ManageTokens,
-            spamTokens,
-            showSpamTokens,
-          }),
-        } as FungibleTokenWithStates),
-    );
-    return select ? select(withDerivedState) : withDerivedState;
-  };
 
   return useQuery({
     queryKey: ['brc20-fungible-tokens', ordinalsAddress, network.type, fiatCurrency],
     queryFn,
     enabled: Boolean(network && ordinalsAddress),
     keepPreviousData: true,
-    select: selectWithDerivedState,
+    select: selectWithDerivedState({
+      manageTokens: brc20ManageTokens,
+      spamTokens,
+      showSpamTokens,
+      topTokensData: topTokensData?.['brc-20'],
+      select,
+    }),
   });
 };
 

src/app/hooks/queries/runes/useRuneFungibleTokensQuery.ts

@@ -1,12 +1,9 @@
 import useRunesApi from '@hooks/apiClients/useRunesApi';
 import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
-import {
-  getFungibleTokenStates,
-  type FungibleToken,
-  type FungibleTokenWithStates,
-} from '@secretkeylabs/xverse-core';
+import { type FungibleToken, type FungibleTokenWithStates } from '@secretkeylabs/xverse-core';
 import { useQuery } from '@tanstack/react-query';
+import { selectWithDerivedState } from '@utils/tokens';
 import useGetTopTokens from '../useGetTopTokens';
 
 export const fetchRuneBalances =
@@ -48,45 +45,18 @@ export const useRuneFungibleTokensQuery = (
   const { data: topTokensData } = useGetTopTokens();
 
   const queryFn = fetchRuneBalances(runesApi, ordinalsAddress, fiatCurrency);
-  const selectWithDerivedState = (data: FungibleToken[]) => {
-    const topTokens = { ...topTokensData?.runes };
-    const tokensWithDerivedState = data.map((ft: FungibleToken) => {
-      let token = ft;
-      if (topTokens[token.principal]) {
-        delete topTokens[token.principal];
-        token = { ...token, isTopToken: true };
-      }
-      return {
-        ...token,
-        ...getFungibleTokenStates({
-          fungibleToken: token,
-          manageTokens: runesManageTokens,
-          spamTokens,
-          showSpamTokens,
-        }),
-      } as FungibleTokenWithStates;
-    });
-    const topTokensWithDerivedState = Object.values(topTokens).map((ft) => {
-      const token = { ...ft, isTopToken: true };
-      return {
-        ...token,
-        ...getFungibleTokenStates({
-          fungibleToken: token,
-          manageTokens: runesManageTokens,
-          spamTokens,
-          showSpamTokens,
-        }),
-      };
-    });
-    const withDerivedState = tokensWithDerivedState.concat(topTokensWithDerivedState);
-    return select ? select(withDerivedState) : withDerivedState;
-  };
 
   return useQuery({
     queryKey: ['get-rune-fungible-tokens', network.type, ordinalsAddress, fiatCurrency],
     queryFn,
     enabled: Boolean(network && ordinalsAddress),
-    select: selectWithDerivedState,
+    select: selectWithDerivedState({
+      manageTokens: runesManageTokens,
+      spamTokens,
+      showSpamTokens,
+      topTokensData: topTokensData?.runes,
+      select,
+    }),
     refetchOnWindowFocus: !!backgroundRefetch,
     refetchOnReconnect: !!backgroundRefetch,
     keepPreviousData: true,

src/app/hooks/queries/stx/useGetSip10FungibleTokens.ts

@@ -4,13 +4,14 @@ import useWalletSelector from '@hooks/useWalletSelector';
 import {
   StacksNetwork,
   getFtData,
-  getFungibleTokenStates,
   getXverseApiClient,
   type FungibleToken,
   type FungibleTokenWithStates,
   type SettingsNetwork,
 } from '@secretkeylabs/xverse-core';
 import { useQuery } from '@tanstack/react-query';
+import { selectWithDerivedState } from '@utils/tokens';
+import useGetTopTokens from '../useGetTopTokens';
 
 export const fetchSip10FungibleTokens =
   (
@@ -45,35 +46,27 @@ export const useGetSip10FungibleTokens = (select?: (data: FungibleTokenWithState
   const { sip10ManageTokens, fiatCurrency, network, spamTokens, showSpamTokens } =
     useWalletSelector();
   const currentNetworkInstance = useNetworkSelector();
+  const { data: topTokensData } = useGetTopTokens();
 
   const queryFn = fetchSip10FungibleTokens(
     stxAddress,
     fiatCurrency,
     network,
     currentNetworkInstance,
   );
-  const selectWithDerivedState = (data: FungibleToken[]) => {
-    const withDerivedState = data.map(
-      (ft: FungibleToken) =>
-        ({
-          ...ft,
-          ...getFungibleTokenStates({
-            fungibleToken: ft,
-            manageTokens: sip10ManageTokens,
-            spamTokens,
-            showSpamTokens,
-          }),
-        } as FungibleTokenWithStates),
-    );
-    return select ? select(withDerivedState) : withDerivedState;
-  };
 
   return useQuery({
     queryKey: ['sip10-fungible-tokens', network.type, stxAddress, fiatCurrency],
     queryFn,
     enabled: Boolean(network && stxAddress),
     keepPreviousData: true,
-    select: selectWithDerivedState,
+    select: selectWithDerivedState({
+      manageTokens: sip10ManageTokens,
+      spamTokens,
+      showSpamTokens,
+      topTokensData: topTokensData?.stacks,
+      select,
+    }),
   });
 };
 

src/app/screens/home/balanceCard/index.tsx

@@ -106,9 +106,9 @@ function BalanceCard({ isLoading, isRefetching }: Props) {
   const { setAccountBalance } = useAccountBalance();
   // TODO: refactor this into a hook
   const oldTotalBalance = accountBalances[getAccountBalanceKey(selectedAccount)];
-  const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();
-  const { data: brc20CoinsList } = useVisibleBrc20FungibleTokens();
-  const { data: runesCoinList } = useVisibleRuneFungibleTokens();
+  const { data: sip10CoinsList = [] } = useVisibleSip10FungibleTokens();
+  const { data: brc20CoinsList = [] } = useVisibleBrc20FungibleTokens();
+  const { data: runesCoinList = [] } = useVisibleRuneFungibleTokens();
   const { toggleBalanceView, balanceDisplayState } = useToggleBalanceView();
 
   const balance = calculateTotalBalance({