refactor: rename BalanceList to AssetList

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

@@ -1,66 +1,25 @@
 import { Outlet } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 
-import { Box, Stack, Text } from '@stacks/ui';
+import { Box, Stack } from '@stacks/ui';
 import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors';
 
 import { LEDGER_BITCOIN_ENABLED } from '@shared/environment';
 
 import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
-import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
-import { ftDecimals } from '@app/common/stacks-utils';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
-import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { BtcIcon } from '@app/components/icons/btc-icon';
 import { CurrentStacksAccountLoader } from '@app/components/stacks-account-loader';
-import { Caption } from '@app/components/typography';
-import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 
 import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
 import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';
-import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token-asset-list';
+import { StacksBalanceItem } from './components/stacks-balance-item';
 
-interface StacksBalanceViewerProps {
-  account: StacksAccount;
-}
-
-function StacksBalanceViewer({ account }: StacksBalanceViewerProps) {
-  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(
-    account.address
-  );
-
-  const { stxEffectiveBalance, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance } =
-    useStxBalance();
-
-  const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
-    <Text>({ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked)</Text>
-  ) : undefined;
-
-  const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
-    <Caption ml="4px">({stxUsdLockedBalance} locked)</Caption>
-  ) : undefined;
-
-  return (
-    <>
-      <CryptoCurrencyAssetItem
-        assetBalance={stxEffectiveBalance}
-        usdBalance={stxEffectiveUsdBalance}
-        address={account.address}
-        additionalBalanceInfo={stxAdditionalBalanceInfo}
-        additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
-        icon={<StxAvatar />}
-      />
-      <StacksFungibleTokenAssetList assetBalances={stacksFtAssetBalances} />
-    </>
-  );
-}
-
-export function BalancesList() {
+export function AssetsList() {
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
 
   const { btcAvailableAssetBalance, btcAvailableUsdBalance } = useBtcAssetBalance(btcAddress);
@@ -93,7 +52,7 @@ export function BalancesList() {
       })}
 
       <CurrentStacksAccountLoader>
-        {account => <StacksBalanceViewer account={account} />}
+        {account => <StacksBalanceItem account={account} />}
       </CurrentStacksAccountLoader>
 
       {whenWallet({
@@ -104,9 +63,11 @@ export function BalancesList() {
         ),
         ledger: null,
       })}
+
       <PendingBrc20TransferList />
 
       <Collectibles />
+
       <Outlet />
     </Stack>
   );

src/app/features/asset-list/components/stacks-balance-item.tsx

@@ -0,0 +1,45 @@
+import { Text } from '@stacks/ui';
+
+import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
+import { ftDecimals } from '@app/common/stacks-utils';
+import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
+import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
+import { Caption } from '@app/components/typography';
+import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
+import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
+
+import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list';
+
+interface StacksBalanceItemProps {
+  account: StacksAccount;
+}
+export function StacksBalanceItem({ account }: StacksBalanceItemProps) {
+  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(
+    account.address
+  );
+
+  const { stxEffectiveBalance, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance } =
+    useStxBalance();
+
+  const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <Text>({ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked)</Text>
+  ) : undefined;
+
+  const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <Caption ml="4px">({stxUsdLockedBalance} locked)</Caption>
+  ) : undefined;
+
+  return (
+    <>
+      <CryptoCurrencyAssetItem
+        assetBalance={stxEffectiveBalance}
+        usdBalance={stxEffectiveUsdBalance}
+        address={account.address}
+        additionalBalanceInfo={stxAdditionalBalanceInfo}
+        additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
+        icon={<StxAvatar />}
+      />
+      <StacksFungibleTokenAssetList assetBalances={stacksFtAssetBalances} />
+    </>
+  );
+}

src/app/routes/app-routes.tsx

@@ -12,7 +12,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { BroadcastErrorDrawer } from '@app/components/broadcast-error-drawer/broadcast-error-drawer';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { ActivityList } from '@app/features/activity-list/activity-list';
-import { BalancesList } from '@app/features/balances-list/balances-list';
+import { AssetsList } from '@app/features/asset-list/asset-list';
 import { Container } from '@app/features/container/container';
 import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer';
 import { IncreaseBtcFeeDrawer } from '@app/features/increase-fee-drawer/increase-btc-fee-drawer';
@@ -186,7 +186,7 @@ function useAppRoutes() {
             </AccountGate>
           }
         >
-          <Route index element={<BalancesList />} />
+          <Route index element={<AssetsList />} />
           <Route path={RouteUrls.Activity} element={<ActivityList />} />
 
           {requestBitcoinKeysRoutes}