From a36dae45740d597b30e210d63744b14c247ae912 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Tue, 14 May 2024 15:46:05 +0100
Subject: [PATCH 01/16] chore: add defensive code and better analytics for
 broadcast errors, ref #5118

---
 package.json                                          |  2 +-
 pnpm-lock.yaml                                        |  8 ++++----
 .../ledger-sign-stacks-tx-container.tsx               | 11 ++++++++++-
 .../ordinal-inscription/send-inscription-review.tsx   |  1 +
 .../form/brc20/brc20-send-form-confirmation.tsx       |  4 ++++
 .../form/btc/btc-send-form-confirmation.tsx           |  3 +++
 src/app/query/stacks/bns/bns.utils.ts                 |  1 +
 .../blockchain/bitcoin/native-segwit-account.hooks.ts |  1 +
 8 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 95014c656b0..e3fc5941302 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/models": "0.4.4",
+    "@leather-wallet/models": "0.4.5",
     "@leather-wallet/tokens": "0.0.14",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0935a38655b..88e4c349e34 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ dependencies:
     specifier: 1.2.0
     version: 1.2.0
   '@leather-wallet/models':
-    specifier: 0.4.4
-    version: 0.4.4
+    specifier: 0.4.5
+    version: 0.4.5
   '@leather-wallet/tokens':
     specifier: 0.0.14
     version: 0.0.14
@@ -3702,8 +3702,8 @@ packages:
       bignumber.js: 9.1.2
     dev: true
 
-  /@leather-wallet/models@0.4.4:
-    resolution: {integrity: sha512-dqUTUR0EMM9WFwkeWRahlpixK+Ct2vEpDBhQdvO83tK4GhC/JlopI9hmpaSKyX9+35Ts2LpgycUiCh59kmZbMA==}
+  /@leather-wallet/models@0.4.5:
+    resolution: {integrity: sha512-H0NhxYy1C2Byrj1wswL9Zf6bWOejvgVuwgVDT6xh7zqvoPotiAtrfEe3hiBdSeUtUsTh70ha1ZMuGwf/rph67w==}
     dependencies:
       bignumber.js: 9.1.2
     dev: false
diff --git a/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx b/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx
index f0b1d9cb664..101426eb52b 100644
--- a/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx
+++ b/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx
@@ -7,6 +7,7 @@ import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
 import { delay, isError } from '@shared/utils';
+import { analytics } from '@shared/utils/analytics';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { appEvents } from '@app/common/publish-subscribe';
@@ -129,7 +130,15 @@ function LedgerSignStacksTxContainer() {
           signedTx,
         });
       } catch (e) {
-        ledgerNavigate.toBroadcastErrorStep(isError(e) ? e.message : 'Unknown error');
+        const error = isError(e) ? e.message : 'Unknown error';
+        void analytics.track('ledger_transaction_publish_error', {
+          error: {
+            message: error,
+            error: e,
+          },
+        });
+
+        ledgerNavigate.toBroadcastErrorStep(error);
         return;
       }
     },
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
index 2ecddb2c72c..b0530db592e 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -64,6 +64,7 @@ export function SendInscriptionReview() {
         });
       },
       onError(e) {
+        void analytics.track('ordinalbroadcast__error', { error: e });
         navigate(`/${RouteUrls.SendOrdinalInscription}/${RouteUrls.SendOrdinalInscriptionError}`, {
           state: {
             error: e,
diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx
index d6d176f3e5b..f589aa22c57 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx
@@ -98,6 +98,10 @@ export function Brc20SendFormConfirmation() {
         });
       },
       onError(e) {
+        void analytics.track('broadcast_brc20_error', {
+          error: e,
+        });
+
         nav.toErrorPage(e);
       },
     });
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
index 00b9fb55e04..b8fe3651a00 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
@@ -138,6 +138,9 @@ export function BtcSendFormConfirmation() {
         );
       },
       onError(e) {
+        void analytics.track('broadcast_btc_error', {
+          error: e,
+        });
         nav.toErrorPage(e);
       },
     });
diff --git a/src/app/query/stacks/bns/bns.utils.ts b/src/app/query/stacks/bns/bns.utils.ts
index 046818ba1a4..19705a42f8d 100644
--- a/src/app/query/stacks/bns/bns.utils.ts
+++ b/src/app/query/stacks/bns/bns.utils.ts
@@ -140,6 +140,7 @@ export async function fetchNamesForAddress({
 export async function fetchNameOwner(client: StacksClient, name: string, isTestnet: boolean) {
   const fetchFromApi = async () => {
     const res = await client.namesApi.getNameInfo({ name });
+    if (isUndefined(res.address)) return null;
     if (!isString(res.address) || res.address.length === 0) return null;
     return res.address;
   };
diff --git a/src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts b/src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts
index f0a0aa63e9e..a5c8a799841 100644
--- a/src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts
+++ b/src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts
@@ -122,6 +122,7 @@ export function useCurrentAccountNativeSegwitAddressIndexZero() {
  */
 export function useNativeSegwitAccountIndexAddressIndexZero(accountIndex: number) {
   const signer = useNativeSegwitSigner(accountIndex)?.(0);
+  // could it be this?
   return signer?.payment.address as string;
 }
 

From 9699d761064bfaa451b30ffbcee68e15272bac2a Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Fri, 12 Apr 2024 11:30:40 +0200
Subject: [PATCH 02/16] fix: tsconfig update for tokens pkg

---
 package.json        | 2 +-
 pnpm-lock.yaml      | 8 ++++----
 theme/typography.ts | 4 ++--
 tsconfig.json       | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index e3fc5941302..047ee00a27d 100644
--- a/package.json
+++ b/package.json
@@ -136,7 +136,7 @@
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
     "@leather-wallet/models": "0.4.5",
-    "@leather-wallet/tokens": "0.0.14",
+    "@leather-wallet/tokens": "0.0.15",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88e4c349e34..6f92a7ee96f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,8 +33,8 @@ dependencies:
     specifier: 0.4.5
     version: 0.4.5
   '@leather-wallet/tokens':
-    specifier: 0.0.14
-    version: 0.0.14
+    specifier: 0.0.15
+    version: 0.0.15
   '@ledgerhq/hw-transport-webusb':
     specifier: 6.27.19
     version: 6.27.19
@@ -3724,8 +3724,8 @@ packages:
       '@leather-wallet/models': 0.4.0
     dev: true
 
-  /@leather-wallet/tokens@0.0.14:
-    resolution: {integrity: sha512-xCg+aIcn8DexmQhfvxYM85IGP2Q1JNfUBq80ZwV4horKw18MxxTdX5FeEthTrO8quRZu7up+IW6m/l3wElnDsA==}
+  /@leather-wallet/tokens@0.0.15:
+    resolution: {integrity: sha512-/jG36yCB8YRtyn1/sUgSeFwQjHhf6OfT0vsf384kbIXCzuaGhJpNl7GN0qWQkrxOKB5ahVuvqRwqaKFgwg1lUg==}
     dev: false
 
   /@ledgerhq/devices@8.2.0:
diff --git a/theme/typography.ts b/theme/typography.ts
index 48dc8bd6db5..6f378cd773f 100644
--- a/theme/typography.ts
+++ b/theme/typography.ts
@@ -1,5 +1,5 @@
-import { getExtensionTextVariants } from '@leather-wallet/tokens';
+import { getWebTextVariants } from '@leather-wallet/tokens';
 import { defineTextStyles } from '@pandacss/dev';
 
 // ts-unused-exports:disable-next-line
-export const textStyles = defineTextStyles({ ...getExtensionTextVariants() });
+export const textStyles = defineTextStyles({ ...getWebTextVariants() });
diff --git a/tsconfig.json b/tsconfig.json
index d1cbb016b94..f466731b2ba 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "Bundler",
     "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "react-jsx",
     "sourceMap": true,

From c5e04c144789d94bcdabcea767fa63ce09f98da8 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Mon, 20 May 2024 09:07:08 +0200
Subject: [PATCH 03/16] fix: investigate stx fee issues

---
 .../common/validation/forms/amount-validators.ts    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/common/validation/forms/amount-validators.ts b/src/app/common/validation/forms/amount-validators.ts
index 248031d0df2..fbb58e2e08e 100644
--- a/src/app/common/validation/forms/amount-validators.ts
+++ b/src/app/common/validation/forms/amount-validators.ts
@@ -3,6 +3,7 @@ import * as yup from 'yup';
 
 import { Money } from '@shared/models/money.model';
 import { isNumber } from '@shared/utils';
+import { analytics } from '@shared/utils/analytics';
 
 import { countDecimals } from '@app/common/math/helpers';
 import {
@@ -90,8 +91,16 @@ export function stxAvailableBalanceValidator(availableBalance: Money) {
         microStxToStx(sum.amount).toString()
       ),
       test(value: unknown) {
-        const fee = stxToMicroStx(this.parent.fee);
-        if (!availableBalance || !isNumber(value)) return false;
+        const fee = new BigNumber(stxToMicroStx(this.parent.fee));
+        if (!fee.isFinite()) {
+          void analytics.track('unable_to_read_fee_in_stx_validator');
+          return this.createError({ message: 'Unable to read current fee' });
+        }
+        if (!isNumber(value)) return false;
+        if (!availableBalance) {
+          void analytics.track('unable_to_read_available_balance_in_stx_validator');
+          return this.createError({ message: 'Available balance unknown' });
+        }
         const availableBalanceLessFee = availableBalance.amount.minus(fee);
         return availableBalanceLessFee.isGreaterThanOrEqualTo(stxToMicroStx(value));
       },

From 3a42fc9848c124e37035ce8d3a41b82eac998450 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 17 May 2024 16:09:16 +0100
Subject: [PATCH 04/16] fix: fix padding on back button, ref
 leather-wallet/issues#25

---
 .../pages/send/ordinal-inscription/send-inscription-review.tsx  | 2 +-
 src/app/ui/components/containers/headers/header.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
index b0530db592e..049ce3c4b63 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -64,7 +64,7 @@ export function SendInscriptionReview() {
         });
       },
       onError(e) {
-        void analytics.track('ordinalbroadcast__error', { error: e });
+        void analytics.track('broadcast_ordinal_error', { error: e });
         navigate(`/${RouteUrls.SendOrdinalInscription}/${RouteUrls.SendOrdinalInscriptionError}`, {
           state: {
             error: e,
diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
index 8aadac76bdd..f2852122deb 100644
--- a/src/app/ui/components/containers/headers/header.tsx
+++ b/src/app/ui/components/containers/headers/header.tsx
@@ -40,7 +40,7 @@ export function Header({
       justifyContent="center"
       margin={{ base: 0, md: 'auto' }}
       p={variant === 'bigTitle' ? 'space.05' : 'space.04'}
-      paddingLeft={variant === 'onboarding' ? 0 : undefined}
+      paddingLeft={{ base: undefined, sm: variant === 'onboarding' ? 0 : undefined }}
       bg="transparent"
       maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
       width="100%"

From 2db97bd23547985a94d03104836c00b7bda562dc Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Mon, 20 May 2024 20:20:45 +0400
Subject: [PATCH 05/16] feat: remove increase fee summary page, closes #5305

---
 .../hooks/use-submit-stx-transaction.ts       |  3 +-
 .../components/increase-fee-actions.tsx       |  8 +++--
 .../hooks/use-btc-increase-fee.ts             |  3 +-
 .../increase-btc-fee-dialog.tsx               |  8 +++--
 .../increase-fee-sent-dialog.tsx              | 30 -------------------
 .../increase-stx-fee-dialog.tsx               |  5 +++-
 .../use-stacks-broadcast-transaction.tsx      | 21 ++++++++++++-
 .../stacks/stacks-send-form-confirmation.tsx  |  8 ++---
 .../swap/hooks/use-stacks-broadcast-swap.tsx  |  1 +
 .../transaction-request.tsx                   |  2 +-
 src/app/routes/app-routes.tsx                 |  2 --
 src/shared/route-urls.ts                      |  1 -
 12 files changed, 43 insertions(+), 49 deletions(-)
 delete mode 100644 src/app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog.tsx

diff --git a/src/app/common/hooks/use-submit-stx-transaction.ts b/src/app/common/hooks/use-submit-stx-transaction.ts
index d58997dcec5..9b070c2cafd 100644
--- a/src/app/common/hooks/use-submit-stx-transaction.ts
+++ b/src/app/common/hooks/use-submit-stx-transaction.ts
@@ -52,8 +52,7 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
               rawTx: bytesToHex(transaction.serialize()),
               txId: safelyFormatHexTxid(response.txid),
             });
-            await delay(500);
-            toast.success('Transaction submitted!');
+
             await delay(500);
 
             void analytics.track('broadcast_transaction', { symbol: 'stx' });
diff --git a/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx b/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
index 170855c8486..e9bd5aa9bfe 100644
--- a/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
+++ b/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
@@ -5,11 +5,12 @@ import { useWalletType } from '@app/common/use-wallet-type';
 import { Button } from '@app/ui/components/button/button';
 
 interface IncreaseFeeActionsProps {
-  isDisabled: boolean;
+  isDisabled?: boolean;
+  isBroadcasting?: boolean;
   onCancel(): void;
 }
 export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
-  const { onCancel, isDisabled } = props;
+  const { onCancel, isDisabled, isBroadcasting } = props;
 
   const { handleSubmit } = useFormikContext();
   const { isLoading } = useLoading(LoadingKeys.INCREASE_FEE_DRAWER);
@@ -25,9 +26,10 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
       <Button
         type="submit"
         onClick={handleSubmit as any}
-        aria-busy={isLoading}
+        aria-busy={isLoading || isBroadcasting}
         borderRadius="sm"
         aria-disabled={isDisabled}
+        disabled={isDisabled}
         flexGrow={1}
       >
         {actionText}
diff --git a/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts b/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts
index aeff83fddac..a2df7a106db 100644
--- a/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts
+++ b/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts
@@ -107,7 +107,8 @@ export function useBtcIncreaseFee(btcTx: BitcoinTx) {
     await broadcastTx({
       tx: tx.hex,
       async onSuccess(txid) {
-        navigate(RouteUrls.IncreaseFeeSent);
+        toast.success('Fee increased successfully');
+        navigate(RouteUrls.Activity);
         void analytics.track('increase_fee_transaction', {
           symbol: 'btc',
           txid,
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
index e40c3d891be..674651b3ba7 100644
--- a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
+++ b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -14,7 +14,6 @@ import { btcToSat } from '@app/common/money/unit-conversion';
 import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils';
 import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input';
 import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item';
-import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
@@ -72,7 +71,11 @@ export function IncreaseBtcFeeDialog() {
             header={<DialogHeader title="Increase fee" />}
             footer={
               <Footer flexDirection="row">
-                <IncreaseFeeActions isDisabled={false} onCancel={() => navigate(RouteUrls.Home)} />
+                <IncreaseFeeActions
+                  isDisabled={isBroadcasting}
+                  isBroadcasting={isBroadcasting}
+                  onCancel={() => navigate(RouteUrls.Home)}
+                />
               </Footer>
             }
           >
@@ -90,7 +93,6 @@ export function IncreaseBtcFeeDialog() {
                 </Caption>
                 <Stack gap="space.06">
                   {btcTx && <BitcoinTransactionItem transaction={btcTx} />}
-                  {isBroadcasting && <LoadingSpinner />}
                   <Stack gap="space.04">
                     <Stack gap="space.01">
                       <BitcoinCustomFeeInput
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog.tsx
deleted file mode 100644
index 9be82e867c9..00000000000
--- a/src/app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-
-import { Flex } from 'leather-styles/jsx';
-
-import { RouteUrls } from '@shared/route-urls';
-
-import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
-import { CheckmarkIcon } from '@app/ui/icons/checkmark-icon';
-
-export function IncreaseFeeSentDialog() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const isShowing = location.pathname === RouteUrls.IncreaseFeeSent;
-
-  return (
-    <>
-      <Dialog
-        isShowing={isShowing}
-        onClose={() => navigate(RouteUrls.Home)}
-        header={<DialogHeader title="Confirmed" />}
-      >
-        <Flex justifyContent="center" pb="space.06" px="space.05">
-          <CheckmarkIcon mt="2px" width="lg" />
-        </Flex>
-      </Dialog>
-      <Outlet />
-    </>
-  );
-}
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx
index c99d1693426..d82b0de1742 100644
--- a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx
+++ b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx
@@ -45,7 +45,10 @@ export function IncreaseStxFeeDialog() {
   const availableUnlockedBalance = useCurrentStxAvailableUnlockedBalance();
   const submittedTransactionsActions = useSubmittedTransactionsActions();
   const rawTx = useRawDeserializedTxState();
-  const { stacksBroadcastTransaction } = useStacksBroadcastTransaction('STX');
+  const { stacksBroadcastTransaction } = useStacksBroadcastTransaction({
+    token: 'STX',
+    isIncreaseFeeTransaction: true,
+  });
 
   const fee = Number(rawTx?.auth.spendingCondition?.fee);
 
diff --git a/src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx b/src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx
index b3683f029b5..954c1de9b58 100644
--- a/src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx
+++ b/src/app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction.tsx
@@ -23,7 +23,17 @@ async function simulateShortDelayToAvoidUndefinedTabId() {
   await delay(1000);
 }
 
-export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?: number) {
+interface UseStacksBroadcastTransactionArgs {
+  token: CryptoCurrencies;
+  decimals?: number;
+  isIncreaseFeeTransaction?: boolean;
+}
+
+export function useStacksBroadcastTransaction({
+  token,
+  decimals,
+  isIncreaseFeeTransaction,
+}: UseStacksBroadcastTransactionArgs) {
   const signStacksTransaction = useSignStacksTransaction();
   const [isBroadcasting, setIsBroadcasting] = useState(false);
   const { tabId } = useDefaultRequestParams();
@@ -49,6 +59,11 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
         });
       }
       if (txId) {
+        if (isIncreaseFeeTransaction) {
+          navigate(RouteUrls.Activity);
+          return;
+        }
+
         navigate(
           RouteUrls.SentStxTxSummary.replace(':symbol', token.toLowerCase()).replace(
             ':txId',
@@ -79,6 +94,9 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
             },
             onSuccess(txId) {
               handlePreviewSuccess(signedTx, txId);
+              if (isIncreaseFeeTransaction) {
+                toast.success('Fee increased successfully');
+              }
             },
             replaceByFee: false,
           })(signedTx);
@@ -117,5 +135,6 @@ export function useStacksBroadcastTransaction(token: CryptoCurrencies, decimals?
     toast,
     broadcastTransactionFn,
     signStacksTransaction,
+    isIncreaseFeeTransaction,
   ]);
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx
index 8e0c9367c0f..682d3bd2102 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx
@@ -25,10 +25,10 @@ export function StacksSendFormConfirmation() {
   const { tx, decimals, showFeeChangeWarning } = useStacksSendFormConfirmationState();
   const { symbol = 'STX' } = useParams();
 
-  const { stacksBroadcastTransaction, isBroadcasting } = useStacksBroadcastTransaction(
-    symbol.toUpperCase() as CryptoCurrencies,
-    decimals
-  );
+  const { stacksBroadcastTransaction, isBroadcasting } = useStacksBroadcastTransaction({
+    token: symbol.toUpperCase() as CryptoCurrencies,
+    decimals,
+  });
 
   const stacksDeserializedTransaction = deserializeTransaction(tx);
 
diff --git a/src/app/pages/swap/hooks/use-stacks-broadcast-swap.tsx b/src/app/pages/swap/hooks/use-stacks-broadcast-swap.tsx
index 0a4cd1ec6e4..fd5551f718f 100644
--- a/src/app/pages/swap/hooks/use-stacks-broadcast-swap.tsx
+++ b/src/app/pages/swap/hooks/use-stacks-broadcast-swap.tsx
@@ -35,6 +35,7 @@ export function useStacksBroadcastSwap() {
             navigate(RouteUrls.TransactionBroadcastError, { state: { message } });
           },
           onSuccess() {
+            toast.success('Transaction submitted!');
             setIsIdle();
             navigate(RouteUrls.Activity);
           },
diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx
index 356818bec10..e8f173ffbe0 100644
--- a/src/app/pages/transaction-request/transaction-request.tsx
+++ b/src/app/pages/transaction-request/transaction-request.tsx
@@ -50,7 +50,7 @@ function TransactionRequestBase() {
   const availableUnlockedBalance = useCurrentStxAvailableUnlockedBalance();
   const { data: nextNonce } = useNextNonce();
   const navigate = useNavigate();
-  const { stacksBroadcastTransaction } = useStacksBroadcastTransaction('STX');
+  const { stacksBroadcastTransaction } = useStacksBroadcastTransaction({ token: 'STX' });
 
   useOnMount(() => void analytics.track('view_transaction_signing'));
 
diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx
index 564cba2a437..4f480f21479 100644
--- a/src/app/routes/app-routes.tsx
+++ b/src/app/routes/app-routes.tsx
@@ -16,7 +16,6 @@ import { AddNetwork } from '@app/features/add-network/add-network';
 import { Container } from '@app/features/container/container';
 import { EditNonceDialog } from '@app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog';
 import { IncreaseBtcFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog';
-import { IncreaseFeeSentDialog } from '@app/features/dialogs/increase-fee-dialog/increase-fee-sent-dialog';
 import { IncreaseStxFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog';
 import { leatherIntroDialogRoutes } from '@app/features/dialogs/leather-intro-dialog/leather-intro-dialog';
 import { ledgerBitcoinTxSigningRoutes } from '@app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container';
@@ -103,7 +102,6 @@ function useAppRoutes() {
         <Route path={RouteUrls.IncreaseBtcFee} element={<IncreaseBtcFeeDialog />}>
           {ledgerBitcoinTxSigningRoutes}
         </Route>
-        <Route path={RouteUrls.IncreaseFeeSent} element={<IncreaseFeeSentDialog />} />
 
         {ledgerStacksTxSigningRoutes}
 
diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts
index 23c2f69f5de..293f0a6e1de 100644
--- a/src/shared/route-urls.ts
+++ b/src/shared/route-urls.ts
@@ -27,7 +27,6 @@ export enum RouteUrls {
   FundChooseCurrency = '/fund-choose-currency',
   IncreaseStxFee = '/increase-fee/stx',
   IncreaseBtcFee = '/increase-fee/btc',
-  IncreaseFeeSent = '/increase-fee/sent',
   Send = '/send-transaction',
   ViewSecretKey = '/view-secret-key',
 

From caa4c88ae8fc5f1e71a7090c34565d3e93598c32 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Mon, 20 May 2024 12:26:32 -0500
Subject: [PATCH 06/16] fix: missing token color

---
 src/app/features/hiro-messages/in-app-messages.tsx     |  2 +-
 src/app/ui/components/callout/callout.tsx              |  2 +-
 src/app/ui/components/input/input.tsx                  |  2 +-
 .../ui/components/skeleton-loader/skeleton-loader.tsx  |  2 +-
 src/app/ui/components/typography/caption.tsx           |  2 +-
 src/app/ui/components/typography/title.tsx             |  2 +-
 src/app/ui/pressable/pressable.tsx                     |  6 +++---
 theme/recipes/button-recipe.ts                         |  8 ++++----
 theme/recipes/link-recipe.ts                           | 10 +++++-----
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/features/hiro-messages/in-app-messages.tsx b/src/app/features/hiro-messages/in-app-messages.tsx
index e3c41207dda..6d9035b9587 100644
--- a/src/app/features/hiro-messages/in-app-messages.tsx
+++ b/src/app/features/hiro-messages/in-app-messages.tsx
@@ -30,7 +30,7 @@ export function InAppMessages(props: FlexProps) {
   }
 
   return (
-    <Flex bg="ink.non-interactive" {...props}>
+    <Flex bg="ink.text-non-interactive" {...props}>
       <HiroMessageItem onDismiss={messageId => dismissMessage(messageId)} {...firstMessage} />
     </Flex>
   );
diff --git a/src/app/ui/components/callout/callout.tsx b/src/app/ui/components/callout/callout.tsx
index 778485ff083..cae69725065 100644
--- a/src/app/ui/components/callout/callout.tsx
+++ b/src/app/ui/components/callout/callout.tsx
@@ -15,7 +15,7 @@ const calloutRecipe = cva({
   variants: {
     variant: {
       default: {
-        bg: 'ink.non-interactive',
+        bg: 'ink.text-non-interactive',
       },
       error: {
         bg: 'red.background-secondary',
diff --git a/src/app/ui/components/input/input.tsx b/src/app/ui/components/input/input.tsx
index 2ed6bc93ba1..be42369c74d 100644
--- a/src/app/ui/components/input/input.tsx
+++ b/src/app/ui/components/input/input.tsx
@@ -80,7 +80,7 @@ const input = sva({
       borderColor: 'ink.border-transparent',
       _disabled: {
         bg: 'ink.component-background-default',
-        borderColor: 'ink.non-interactive',
+        borderColor: 'ink.text-non-interactive',
         cursor: 'not-allowed',
       },
       _focus: { ring: 'none' },
diff --git a/src/app/ui/components/skeleton-loader/skeleton-loader.tsx b/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
index 940a5065727..3d4475d6165 100644
--- a/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
+++ b/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
@@ -20,7 +20,7 @@ export function SkeletonLoader({
       <Box
         width={width}
         height={height}
-        bgColor="ink.non-interactive"
+        bgColor="ink.text-non-interactive"
         data-state="loading"
         borderRadius="sm"
         className={shimmerStyles}
diff --git a/src/app/ui/components/typography/caption.tsx b/src/app/ui/components/typography/caption.tsx
index 86953e043c0..2598059242a 100644
--- a/src/app/ui/components/typography/caption.tsx
+++ b/src/app/ui/components/typography/caption.tsx
@@ -5,7 +5,7 @@ import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 export const Caption = forwardRef<HTMLSpanElement, HTMLStyledProps<'span'>>(
   ({ children, ...props }, ref) => (
     <styled.span
-      _disabled={{ color: 'ink.non-interactive' }}
+      _disabled={{ color: 'ink.text-non-interactive' }}
       color="ink.text-subdued"
       ref={ref}
       textStyle="caption.01"
diff --git a/src/app/ui/components/typography/title.tsx b/src/app/ui/components/typography/title.tsx
index a6c9a944fa1..b776bf3cd3a 100644
--- a/src/app/ui/components/typography/title.tsx
+++ b/src/app/ui/components/typography/title.tsx
@@ -5,7 +5,7 @@ import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 export const Title = forwardRef<HTMLSpanElement, HTMLStyledProps<'span'>>(
   ({ children, ...props }, ref) => (
     <styled.span
-      _disabled={{ color: 'ink.non-interactive' }}
+      _disabled={{ color: 'ink.text-non-interactive' }}
       color="ink.text-primary"
       display="block"
       ref={ref}
diff --git a/src/app/ui/pressable/pressable.tsx b/src/app/ui/pressable/pressable.tsx
index ef581e892ad..0477173164d 100644
--- a/src/app/ui/pressable/pressable.tsx
+++ b/src/app/ui/pressable/pressable.tsx
@@ -54,7 +54,7 @@ export const pressableStyles = css.raw({
     _active: { bg: 'unset' },
     _focus: { border: 'unset' },
     _hover: { bg: 'unset' },
-    color: 'ink.non-interactive',
+    color: 'ink.text-non-interactive',
     cursor: 'not-allowed',
   },
 
@@ -77,12 +77,12 @@ const pressableRecipe = cva({
 });
 
 export const pressableCaptionStyles = css({
-  _groupDisabled: { color: 'ink.non-interactive' },
+  _groupDisabled: { color: 'ink.text-non-interactive' },
   color: 'ink.text-subdued',
 });
 
 export const pressableChevronStyles = css({
-  _groupDisabled: { color: 'ink.non-interactive' },
+  _groupDisabled: { color: 'ink.text-non-interactive' },
   color: 'ink.action-primary-default',
 });
 
diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts
index 38d2c37f809..4b7026ffd84 100644
--- a/theme/recipes/button-recipe.ts
+++ b/theme/recipes/button-recipe.ts
@@ -53,7 +53,7 @@ export const buttonRecipe = defineRecipe({
         _disabled: {
           _hover: { bg: 'ink.background-secondary' },
           bg: 'ink.background-secondary',
-          color: 'ink.non-interactive',
+          color: 'ink.text-non-interactive',
           cursor: 'not-allowed',
         },
         _focus: {
@@ -75,8 +75,8 @@ export const buttonRecipe = defineRecipe({
         },
         _disabled: {
           _hover: { bg: 'unset' },
-          border: '1px solid {colors.ink.non-interactive}',
-          color: 'ink.non-interactive',
+          border: '1px solid {colors.ink.text-non-interactive}',
+          color: 'ink.text-non-interactive',
           cursor: 'not-allowed',
         },
         _focus: {
@@ -97,7 +97,7 @@ export const buttonRecipe = defineRecipe({
         },
         _disabled: {
           _hover: { bg: 'unset' },
-          color: 'ink.non-interactive',
+          color: 'ink.text-non-interactive',
           cursor: 'not-allowed',
         },
         _focus: {
diff --git a/theme/recipes/link-recipe.ts b/theme/recipes/link-recipe.ts
index ff259791e2b..98ba39c26c5 100644
--- a/theme/recipes/link-recipe.ts
+++ b/theme/recipes/link-recipe.ts
@@ -31,7 +31,7 @@ export const linkRecipe = defineRecipe({
       underlined: {
         _before: {
           content: '""',
-          background: 'ink.non-interactive',
+          background: 'ink.text-non-interactive',
           bottom: '-2px',
           height: '2px',
           left: 0,
@@ -129,14 +129,14 @@ export const linkRecipe = defineRecipe({
       css: {
         _before: {
           content: '""',
-          background: 'ink.non-interactive',
+          background: 'ink.text-non-interactive',
           bottom: '-2px',
           height: '2px',
           left: 0,
           position: 'absolute',
           right: 0,
         },
-        color: 'ink.non-interactive',
+        color: 'ink.text-non-interactive',
         cursor: 'not-allowed',
       },
       disabled: true,
@@ -146,7 +146,7 @@ export const linkRecipe = defineRecipe({
       css: {
         _before: {
           content: '""',
-          background: 'ink.non-interactive',
+          background: 'ink.text-non-interactive',
           bottom: '-2px',
           height: '2px',
           left: 0,
@@ -154,7 +154,7 @@ export const linkRecipe = defineRecipe({
           right: 0,
           visibility: 'visible',
         },
-        color: 'ink.non-interactive',
+        color: 'ink.text-non-interactive',
         cursor: 'not-allowed',
       },
       disabled: true,

From 9b77421b2c920dd75de57323ceb5a4af09428df7 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Mon, 20 May 2024 10:40:06 +0200
Subject: [PATCH 07/16] fix: stamp error reporting

---
 .../features/collectibles/components/bitcoin/stamps.tsx   | 8 +-------
 src/app/query/bitcoin/stamps/stamps-by-address.query.ts   | 4 ++--
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/app/features/collectibles/components/bitcoin/stamps.tsx b/src/app/features/collectibles/components/bitcoin/stamps.tsx
index 542e6953392..4b062dc1e20 100644
--- a/src/app/features/collectibles/components/bitcoin/stamps.tsx
+++ b/src/app/features/collectibles/components/bitcoin/stamps.tsx
@@ -23,11 +23,5 @@ export function Stamps() {
 
   if (!stamps.length) return null;
 
-  return (
-    <>
-      {stamps.map(s => (
-        <Stamp bitcoinStamp={s} key={s.tx_hash} />
-      ))}
-    </>
-  );
+  return stamps.map(s => <Stamp bitcoinStamp={s} key={s.tx_hash} />);
 }
diff --git a/src/app/query/bitcoin/stamps/stamps-by-address.query.ts b/src/app/query/bitcoin/stamps/stamps-by-address.query.ts
index 94677b0154f..9c9dced493b 100644
--- a/src/app/query/bitcoin/stamps/stamps-by-address.query.ts
+++ b/src/app/query/bitcoin/stamps/stamps-by-address.query.ts
@@ -29,7 +29,7 @@ const stampSchema = z.object({
   creator_name: z.string().optional().nullable(),
   stamp_gen: z.string().optional(),
   stamp_hash: z.string().optional(),
-  is_btc_stamp: z.number().optional(),
+  is_btc_stamp: z.number().nullable().optional(),
   is_reissue: z.number().optional(),
   file_hash: z.string().optional(),
 });
@@ -80,7 +80,7 @@ async function fetchStampsByAddress(address: string): Promise<StampsByAddressQue
   try {
     return stampsByAdressSchema.parse(resp.data);
   } catch (e) {
-    if (e instanceof ZodError) void analytics.track('schema_fail', e);
+    if (e instanceof ZodError) void analytics.track('schema_fail', { ...e });
     throw e;
   }
 }

From a827b4033c80b95ecd1235c1a42b29e6acbd1760 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Wed, 15 May 2024 20:07:49 -0500
Subject: [PATCH 08/16] refactor: remove combined asset model, closes #48

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |   8 +-
 .../hooks/balance/use-total-balance.tsx       |   9 +-
 src/app/components/balance/btc-balance.tsx    |   8 +-
 .../hooks/use-bitcoin-custom-fee.tsx          |  10 +-
 .../use-bitcoin-fees-list.ts                  |  10 +-
 .../crypto-asset-item.layout.tsx              |  89 +++++-----
 .../crypto-asset-item.layout.utils.ts         |   5 +-
 .../loaders/brc20-tokens-loader.tsx           |  16 +-
 .../components/loaders/btc-balance-loader.tsx |  12 ++
 .../loaders/btc-crypto-asset-loader.tsx       |  11 --
 src/app/components/loaders/runes-loader.tsx   |   7 +-
 .../loaders/sip10-tokens-loader.tsx           |  15 ++
 .../loaders/src20-tokens-loader.tsx           |  10 +-
 .../components/loaders/stx-balance-loader.tsx |  15 ++
 .../loaders/stx-crypto-asset-loader.tsx       |  11 --
 .../loaders/stx20-tokens-loader.tsx           |  10 +-
 .../connect-ledger-asset-button.tsx           |   1 +
 .../connect-ledger-asset-item-fallback.tsx    |  37 +++++
 src/app/features/asset-list/asset-list.tsx    | 117 ++++++++------
 .../brc20-token-asset-list.tsx                |  46 ++++--
 .../btc-crypto-asset-item-fallback.tsx        |  23 ---
 .../btc-crypto-asset-item.tsx                 |  33 ++--
 .../runes-asset-item.layout.tsx               |  39 -----
 .../runes-asset-list/runes-asset-list.tsx     |  20 ++-
 .../src20-token-asset-item.layout.tsx         |  39 -----
 .../src20-token-asset-list.tsx                |  16 +-
 .../sip10-token-asset-item.tsx                |  49 +++---
 .../sip10-token-asset-item.utils.ts           |  34 ----
 .../sip10-token-asset-list-unsupported.tsx    |  32 ++--
 .../sip10-token-asset-list.tsx                |  38 +++--
 .../stx-crypto-asset-item-fallback.tsx        |  23 ---
 .../stx-crypto-asset-item.stories.tsx         |  36 +----
 .../stx-crypto-asset-item.tsx                 |  46 +++---
 .../stx20-token-asset-item.layout.tsx         |  37 -----
 .../stx20-token-asset-list.tsx                |  20 ++-
 .../bitcoin-choose-fee/bitcoin-choose-fee.tsx |   6 +-
 .../hooks/use-validate-bitcoin-spend.ts       |  10 +-
 .../hooks/use-btc-increase-fee.ts             |   4 +-
 .../increase-btc-fee-dialog.tsx               |   6 +-
 .../pending-brc-20-transfers.tsx              |   6 +-
 .../bitcoin-contract-request-actions.tsx      |   4 +-
 .../choose-asset-to-fund.tsx                  |  38 ++---
 src/app/pages/home/components/send-button.tsx |  13 +-
 .../choose-crypto-asset.tsx                   |  28 +---
 .../form/btc/btc-send-form.tsx                |  15 +-
 .../form/btc/use-btc-send-form.tsx            |   7 +-
 .../sip10/sip10-token-send-form-container.tsx |  16 +-
 .../form/sip10/sip10-token-send-form.tsx      |  34 +++-
 .../form/sip10/use-sip10-send-form.tsx        |  28 ++--
 .../btc-balance-native-segwit.hooks.ts        |  39 +++--
 .../bitcoin/balance/btc-balance.hooks.ts      |  39 -----
 src/app/query/bitcoin/bitcoin-client.ts       |   6 -
 .../bitcoin/btc/btc-crypto-asset.hooks.ts     |  48 ------
 .../ordinals/brc20/brc20-tokens.hooks.ts      |  75 +++++----
 .../bitcoin/runes/runes-ticker-info.query.ts  |  20 ++-
 src/app/query/bitcoin/runes/runes.hooks.ts    |  40 ++---
 src/app/query/bitcoin/runes/runes.utils.ts    |  29 ++++
 .../bitcoin/stamps/stamps-by-address.hooks.ts |  33 +++-
 .../query/common/alex-sdk/alex-sdk.hooks.ts   |  15 +-
 src/app/query/common/models.ts                |   6 +
 src/app/query/models/crypto-asset.model.ts    |  59 -------
 src/app/query/query-config.ts                 |  12 +-
 .../query/stacks/sip10/sip10-tokens.hooks.ts  | 152 +++++++-----------
 .../query/stacks/sip10/sip10-tokens.spec.ts   |   2 +-
 .../query/stacks/sip10/sip10-tokens.utils.ts  |  47 +++++-
 src/app/query/stacks/stacks-client.ts         |   7 -
 .../stacks/stx/stx-crypto-asset.hooks.ts      |  58 -------
 .../query/stacks/stx20/stx20-tokens.hooks.ts  |  20 ++-
 .../fungible-token-metadata.hooks.ts          |  12 --
 .../fungible-token-metadata.query.ts          |  69 ++++++--
 .../transactions/token-transfer.hooks.ts      |  21 +--
 .../bullet-separator/bullet-separator.tsx     |   2 +-
 src/app/ui/pressable/pressable.stories.tsx    |  10 +-
 tests/page-object-models/home.page.ts         |   2 +-
 tests/specs/send/send-btc.spec.ts             |   3 +-
 tests/specs/send/send-stx.spec.ts             |   2 +-
 77 files changed, 903 insertions(+), 1074 deletions(-)
 create mode 100644 src/app/components/loaders/btc-balance-loader.tsx
 delete mode 100644 src/app/components/loaders/btc-crypto-asset-loader.tsx
 create mode 100644 src/app/components/loaders/sip10-tokens-loader.tsx
 create mode 100644 src/app/components/loaders/stx-balance-loader.tsx
 delete mode 100644 src/app/components/loaders/stx-crypto-asset-loader.tsx
 rename src/app/features/asset-list/{components => _components}/connect-ledger-asset-button.tsx (99%)
 create mode 100644 src/app/features/asset-list/_components/connect-ledger-asset-item-fallback.tsx
 delete mode 100644 src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item-fallback.tsx
 delete mode 100644 src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-item.layout.tsx
 delete mode 100644 src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-item.layout.tsx
 delete mode 100644 src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.utils.ts
 delete mode 100644 src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item-fallback.tsx
 delete mode 100644 src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-item.layout.tsx
 delete mode 100644 src/app/query/bitcoin/balance/btc-balance.hooks.ts
 delete mode 100644 src/app/query/bitcoin/btc/btc-crypto-asset.hooks.ts
 create mode 100644 src/app/query/bitcoin/runes/runes.utils.ts
 create mode 100644 src/app/query/common/models.ts
 delete mode 100644 src/app/query/models/crypto-asset.model.ts
 delete mode 100644 src/app/query/stacks/stx/stx-crypto-asset.hooks.ts
 delete mode 100644 src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.hooks.ts

diff --git a/package.json b/package.json
index 047ee00a27d..dfb58cb1641 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/models": "0.4.5",
+    "@leather-wallet/models": "0.6.1",
     "@leather-wallet/tokens": "0.0.15",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f92a7ee96f..96bc1bd5907 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ dependencies:
     specifier: 1.2.0
     version: 1.2.0
   '@leather-wallet/models':
-    specifier: 0.4.5
-    version: 0.4.5
+    specifier: 0.6.1
+    version: 0.6.1
   '@leather-wallet/tokens':
     specifier: 0.0.15
     version: 0.0.15
@@ -3702,8 +3702,8 @@ packages:
       bignumber.js: 9.1.2
     dev: true
 
-  /@leather-wallet/models@0.4.5:
-    resolution: {integrity: sha512-H0NhxYy1C2Byrj1wswL9Zf6bWOejvgVuwgVDT6xh7zqvoPotiAtrfEe3hiBdSeUtUsTh70ha1ZMuGwf/rph67w==}
+  /@leather-wallet/models@0.6.1:
+    resolution: {integrity: sha512-PVbsCypJaVY7W6pOqDfFlZuvx8pZhpBo+8mMo2wddDNSnSGoIhxQtZVTzZPHTb4d++UWPuxrDx0WVcu7G2Y9gA==}
     dependencies:
       bignumber.js: 9.1.2
     dev: false
diff --git a/src/app/common/hooks/balance/use-total-balance.tsx b/src/app/common/hooks/balance/use-total-balance.tsx
index 2126e3046a0..60031645bf9 100644
--- a/src/app/common/hooks/balance/use-total-balance.tsx
+++ b/src/app/common/hooks/balance/use-total-balance.tsx
@@ -28,7 +28,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
 
   // get btc balance
   const {
-    btcCryptoAssetBalance,
+    balance: btcBalance,
     isLoading: isLoadingBtcBalance,
     isFetching: isFetchingBtcBalance,
     isInitialLoading: isInititalLoadingBtcBalance,
@@ -37,10 +37,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   return useMemo(() => {
     // calculate total balance
     const stxUsdAmount = baseCurrencyAmountInQuote(stxBalance, stxMarketData);
-    const btcUsdAmount = baseCurrencyAmountInQuote(
-      btcCryptoAssetBalance.availableBalance,
-      btcMarketData
-    );
+    const btcUsdAmount = baseCurrencyAmountInQuote(btcBalance.availableBalance, btcMarketData);
 
     const totalBalance = { ...stxUsdAmount, amount: stxUsdAmount.amount.plus(btcUsdAmount.amount) };
     return {
@@ -56,7 +53,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   }, [
     stxBalance,
     stxMarketData,
-    btcCryptoAssetBalance.availableBalance,
+    btcBalance.availableBalance,
     btcMarketData,
     isLoading,
     isLoadingBtcBalance,
diff --git a/src/app/components/balance/btc-balance.tsx b/src/app/components/balance/btc-balance.tsx
index a35c5af4ec3..f6fad708482 100644
--- a/src/app/components/balance/btc-balance.tsx
+++ b/src/app/components/balance/btc-balance.tsx
@@ -2,15 +2,15 @@ import { formatMoney } from '@app/common/money/format-money';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
-import { BtcCryptoAssetLoader } from '../loaders/btc-crypto-asset-loader';
+import { BtcBalanceLoader } from '../loaders/btc-balance-loader';
 
 export function BtcBalance() {
   return (
     <BitcoinNativeSegwitAccountLoader current>
       {signer => (
-        <BtcCryptoAssetLoader address={signer.address}>
-          {asset => <Caption>{formatMoney(asset.balance.availableBalance)}</Caption>}
-        </BtcCryptoAssetLoader>
+        <BtcBalanceLoader address={signer.address}>
+          {balance => <Caption>{formatMoney(balance.availableBalance)}</Caption>}
+        </BtcBalanceLoader>
       )}
     </BitcoinNativeSegwitAccountLoader>
   );
diff --git a/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx
index 8555cf70fa7..3bcf528f288 100644
--- a/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx
+++ b/src/app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee.tsx
@@ -10,7 +10,7 @@ import {
   determineUtxosForSpendAll,
 } from '@app/common/transactions/bitcoin/coinselect/local-coin-selection';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
-import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
 
 export const MAX_FEE_RATE_MULTIPLIER = 50;
@@ -22,7 +22,7 @@ interface UseBitcoinCustomFeeArgs {
 }
 
 export function useBitcoinCustomFee({ amount, isSendingMax, recipients }: UseBitcoinCustomFeeArgs) {
-  const { balance } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
   const { data: utxos = [] } = useCurrentNativeSegwitUtxos();
   const btcMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
 
@@ -30,7 +30,9 @@ export function useBitcoinCustomFee({ amount, isSendingMax, recipients }: UseBit
     (feeRate: number) => {
       if (!feeRate || !utxos.length) return { fee: 0, fiatFeeValue: '' };
 
-      const satAmount = isSendingMax ? balance.amount.toNumber() : amount.amount.toNumber();
+      const satAmount = isSendingMax
+        ? balance.availableBalance.amount.toNumber()
+        : amount.amount.toNumber();
 
       const determineUtxosArgs = {
         amount: satAmount,
@@ -49,6 +51,6 @@ export function useBitcoinCustomFee({ amount, isSendingMax, recipients }: UseBit
         )}`,
       };
     },
-    [utxos, isSendingMax, balance.amount, amount.amount, recipients, btcMarketData]
+    [utxos, isSendingMax, balance.availableBalance.amount, amount.amount, recipients, btcMarketData]
   );
 }
diff --git a/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts b/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts
index 672fb10ee7f..3cd9b45741e 100644
--- a/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts
+++ b/src/app/components/bitcoin-fees-list/use-bitcoin-fees-list.ts
@@ -10,7 +10,7 @@ import {
   determineUtxosForSpend,
   determineUtxosForSpendAll,
 } from '@app/common/transactions/bitcoin/coinselect/local-coin-selection';
-import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { UtxoResponseItem } from '@app/query/bitcoin/bitcoin-client';
 import { useAverageBitcoinFeeRates } from '@app/query/bitcoin/fees/fee-estimates.hooks';
 import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
@@ -43,7 +43,7 @@ export function useBitcoinFeesList({
   recipient,
   utxos,
 }: UseBitcoinFeesListArgs) {
-  const { balance } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
   const btcMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
   const { data: feeRates, isLoading } = useAverageBitcoinFeeRates();
 
@@ -57,7 +57,9 @@ export function useBitcoinFeesList({
     if (!feeRates || !utxos.length) return [];
 
     const determineUtxosDefaultArgs = {
-      recipients: [{ address: recipient, amount: isSendingMax ? balance : amount }],
+      recipients: [
+        { address: recipient, amount: isSendingMax ? balance.availableBalance : amount },
+      ],
       utxos,
     };
 
@@ -116,7 +118,7 @@ export function useBitcoinFeesList({
     }
 
     return feesArr;
-  }, [feeRates, utxos, isSendingMax, balance, amount, recipient, btcMarketData]);
+  }, [feeRates, utxos, recipient, isSendingMax, balance.availableBalance, amount, btcMarketData]);
 
   return {
     feesList,
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
index efe8e0bd245..a422d15b714 100644
--- 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,7 @@
-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';
@@ -14,73 +12,66 @@ import { Pressable } from '@app/ui/pressable/pressable';
 import { parseCryptoAssetBalance } from './crypto-asset-item.layout.utils';
 
 interface CryptoAssetItemLayoutProps {
-  additionalBalanceInfo?: ReactNode;
-  additionalBalanceInfoAsFiat?: ReactNode;
-  asset: AccountCryptoAssetWithDetails;
-  caption?: string;
+  balance: CryptoAssetBalance;
+  captionLeft: string;
+  captionRightBulletInfo?: React.ReactNode;
+  contractId?: string;
   fiatBalance?: string;
   icon: React.ReactNode;
   isLoading?: boolean;
-  name: string;
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
-  rightElement?: React.ReactNode;
+  onSelectAsset?(symbol: string, contractId?: string): void;
+  titleLeft: string;
+  titleRightBulletInfo?: React.ReactNode;
 }
 export function CryptoAssetItemLayout({
-  additionalBalanceInfo,
-  additionalBalanceInfoAsFiat,
-  asset,
-  caption,
+  balance,
+  captionLeft,
+  captionRightBulletInfo,
+  contractId,
   fiatBalance,
   icon,
   isLoading = false,
-  name,
-  onClick,
-  rightElement,
+  onSelectAsset,
+  titleLeft,
+  titleRightBulletInfo,
 }: CryptoAssetItemLayoutProps) {
-  const { dataTestId, formattedBalance } = parseCryptoAssetBalance(asset.balance);
-  const { availableBalance } = asset.balance;
-  const title = spamFilter(name);
+  const { availableBalance, dataTestId, formattedBalance } = parseCryptoAssetBalance(balance);
 
   const titleRight = (
     <SkeletonLoader width="126px" isLoading={isLoading}>
-      {rightElement ? (
-        rightElement
-      ) : (
-        <BasicTooltip
-          asChild
-          label={formattedBalance.isAbbreviated ? availableBalance.amount.toString() : undefined}
-          side="left"
-        >
-          <styled.span data-testid={title} textStyle="label.02">
-            {formattedBalance.value} {additionalBalanceInfo}
-          </styled.span>
-        </BasicTooltip>
-      )}
+      <BasicTooltip
+        asChild
+        label={formattedBalance.isAbbreviated ? availableBalance.amount.toString() : undefined}
+        side="left"
+      >
+        <Flex alignItems="center" gap="space.02" textStyle="label.02">
+          <BulletSeparator>
+            <styled.span>{formattedBalance.value}</styled.span>
+            {titleRightBulletInfo}
+          </BulletSeparator>
+        </Flex>
+      </BasicTooltip>
     </SkeletonLoader>
   );
 
   const captionRight = (
     <SkeletonLoader width="78px" isLoading={isLoading}>
-      {!rightElement && (
-        <Caption>
-          <Flex alignItems="center" gap="space.02" color="inherit">
-            <BulletSeparator>
-              <Caption>{availableBalance.amount.toNumber() > 0 ? fiatBalance : null}</Caption>
-              {additionalBalanceInfoAsFiat}
-            </BulletSeparator>
-          </Flex>
-        </Caption>
-      )}
+      <Flex alignItems="center" color="ink.text-subdued" gap="space.02">
+        <BulletSeparator>
+          <Caption>{availableBalance.amount.toNumber() > 0 ? fiatBalance : null}</Caption>
+          {captionRightBulletInfo}
+        </BulletSeparator>
+      </Flex>
     </SkeletonLoader>
   );
 
-  const isInteractive = !!onClick;
+  const isInteractive = !!onSelectAsset;
 
   const content = (
     <ItemLayout
       flagImg={icon}
-      titleLeft={title}
-      captionLeft={caption ?? availableBalance.symbol}
+      titleLeft={spamFilter(titleLeft)}
+      captionLeft={captionLeft}
       titleRight={titleRight}
       captionRight={captionRight}
     />
@@ -88,7 +79,11 @@ export function CryptoAssetItemLayout({
 
   if (isInteractive)
     return (
-      <Pressable data-testid={dataTestId} onClick={() => onClick(asset)} my="space.02">
+      <Pressable
+        data-testid={dataTestId}
+        onClick={() => onSelectAsset(availableBalance.symbol, contractId)}
+        my="space.02"
+      >
         {content}
       </Pressable>
     );
diff --git a/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts b/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts
index 6cc1c622b67..2b5ef2cd0c2 100644
--- a/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts
+++ b/src/app/components/crypto-asset-item/crypto-asset-item.layout.utils.ts
@@ -2,12 +2,12 @@ import type { CryptoAssetBalance } from '@leather-wallet/models';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
 
 import { formatBalance } from '@app/common/format-balance';
-import { ftDecimals } from '@app/common/stacks-utils';
+import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 
 export function parseCryptoAssetBalance(balance: CryptoAssetBalance) {
   const { availableBalance } = balance;
 
-  const amount = ftDecimals(availableBalance.amount, availableBalance.decimals);
+  const amount = formatMoneyWithoutSymbol(availableBalance);
   const dataTestId = CryptoAssetSelectors.CryptoAssetListItem.replace(
     '{symbol}',
     availableBalance.symbol.toLowerCase()
@@ -15,6 +15,7 @@ export function parseCryptoAssetBalance(balance: CryptoAssetBalance) {
   const formattedBalance = formatBalance(amount);
 
   return {
+    availableBalance,
     dataTestId,
     formattedBalance,
   };
diff --git a/src/app/components/loaders/brc20-tokens-loader.tsx b/src/app/components/loaders/brc20-tokens-loader.tsx
index b7f152d2e61..405740da048 100644
--- 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: {
+      balance: CryptoAssetBalance;
+      info: Brc20CryptoAssetInfo;
+      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-balance-loader.tsx b/src/app/components/loaders/btc-balance-loader.tsx
new file mode 100644
index 00000000000..a5b3a4e86a8
--- /dev/null
+++ b/src/app/components/loaders/btc-balance-loader.tsx
@@ -0,0 +1,12 @@
+import type { BtcCryptoAssetBalance } from '@leather-wallet/models';
+
+import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+
+interface BtcBalanceLoaderProps {
+  address: string;
+  children(balance: BtcCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode;
+}
+export function BtcBalanceLoader({ address, children }: BtcBalanceLoaderProps) {
+  const { balance, isInitialLoading } = useBtcCryptoAssetBalanceNativeSegwit(address);
+  return children(balance, isInitialLoading);
+}
diff --git a/src/app/components/loaders/btc-crypto-asset-loader.tsx b/src/app/components/loaders/btc-crypto-asset-loader.tsx
deleted file mode 100644
index 3ed06ddb8bf..00000000000
--- a/src/app/components/loaders/btc-crypto-asset-loader.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useBtcAccountCryptoAssetWithDetails } from '@app/query/bitcoin/btc/btc-crypto-asset.hooks';
-import type { BtcAccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-
-interface BtcCryptoAssetLoaderProps {
-  address: string;
-  children(asset: BtcAccountCryptoAssetWithDetails, isInitialLoading: boolean): React.ReactNode;
-}
-export function BtcCryptoAssetLoader({ address, children }: BtcCryptoAssetLoaderProps) {
-  const { asset, isInitialLoading } = useBtcAccountCryptoAssetWithDetails(address);
-  return children(asset, isInitialLoading);
-}
diff --git a/src/app/components/loaders/runes-loader.tsx b/src/app/components/loaders/runes-loader.tsx
index ee78d0287e8..9b4eb8ae036 100644
--- a/src/app/components/loaders/runes-loader.tsx
+++ b/src/app/components/loaders/runes-loader.tsx
@@ -1,11 +1,12 @@
-import type { RuneToken } from '@app/query/bitcoin/bitcoin-client';
+import type { CryptoAssetBalance, RuneCryptoAssetInfo } from '@leather-wallet/models';
+
 import { useRuneTokens } from '@app/query/bitcoin/runes/runes.hooks';
 
 interface RunesLoaderProps {
   addresses: string[];
-  children(runes: RuneToken[]): React.ReactNode;
+  children(runes: { balance: CryptoAssetBalance; info: RuneCryptoAssetInfo }[]): React.ReactNode;
 }
 export function RunesLoader({ addresses, children }: RunesLoaderProps) {
-  const runes = useRuneTokens(addresses);
+  const { runes = [] } = useRuneTokens(addresses);
   return children(runes);
 }
diff --git a/src/app/components/loaders/sip10-tokens-loader.tsx b/src/app/components/loaders/sip10-tokens-loader.tsx
new file mode 100644
index 00000000000..e547e4b751c
--- /dev/null
+++ b/src/app/components/loaders/sip10-tokens-loader.tsx
@@ -0,0 +1,15 @@
+import {
+  type Sip10TokenAssetDetails,
+  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(isLoading: boolean, tokens: Sip10TokenAssetDetails[]): React.ReactNode;
+}
+export function Sip10TokensLoader({ address, filter, children }: Sip10TokensLoaderProps) {
+  const { isInitialLoading, tokens = [] } = useFilteredSip10Tokens({ address, filter });
+  return children(isInitialLoading, tokens);
+}
diff --git a/src/app/components/loaders/src20-tokens-loader.tsx b/src/app/components/loaders/src20-tokens-loader.tsx
index 1ce829f6beb..47f568f0089 100644
--- a/src/app/components/loaders/src20-tokens-loader.tsx
+++ b/src/app/components/loaders/src20-tokens-loader.tsx
@@ -1,9 +1,15 @@
+import type { CryptoAssetBalance, Src20CryptoAssetInfo } from '@leather-wallet/models';
+
 import { useSrc20TokensByAddress } from '@app/query/bitcoin/stamps/stamps-by-address.hooks';
-import type { Src20Token } from '@app/query/bitcoin/stamps/stamps-by-address.query';
+
+export interface Src20TokenAssetDetails {
+  balance: CryptoAssetBalance;
+  info: Src20CryptoAssetInfo;
+}
 
 interface Src20TokensLoaderProps {
   address: string;
-  children(tokens: Src20Token[]): React.ReactNode;
+  children(tokens: Src20TokenAssetDetails[]): React.ReactNode;
 }
 export function Src20TokensLoader({ address, children }: Src20TokensLoaderProps) {
   const { data: tokens = [] } = useSrc20TokensByAddress(address);
diff --git a/src/app/components/loaders/stx-balance-loader.tsx b/src/app/components/loaders/stx-balance-loader.tsx
new file mode 100644
index 00000000000..a132572c385
--- /dev/null
+++ b/src/app/components/loaders/stx-balance-loader.tsx
@@ -0,0 +1,15 @@
+import type { StxCryptoAssetBalance } from '@leather-wallet/models';
+
+import { isFetchedWithSuccess } from '@app/query/query-config';
+import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
+
+interface StxBalanceLoaderProps {
+  address: string;
+  children(balance: StxCryptoAssetBalance, isInitialLoading: boolean): React.ReactNode;
+}
+export function StxBalanceLoader({ address, children }: StxBalanceLoaderProps) {
+  const result = useStxCryptoAssetBalance(address);
+  if (!isFetchedWithSuccess(result)) return null;
+  const { data: balance, isInitialLoading } = result;
+  return children(balance, isInitialLoading);
+}
diff --git a/src/app/components/loaders/stx-crypto-asset-loader.tsx b/src/app/components/loaders/stx-crypto-asset-loader.tsx
deleted file mode 100644
index 72824eb4770..00000000000
--- a/src/app/components/loaders/stx-crypto-asset-loader.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { StxAccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-import { useStxAccountCryptoAssetWithDetails } from '@app/query/stacks/stx/stx-crypto-asset.hooks';
-
-interface StxCryptoAssetLoaderProps {
-  address: string;
-  children(asset: StxAccountCryptoAssetWithDetails, isInitialLoading: boolean): React.ReactNode;
-}
-export function StxCryptoAssetLoader({ address, children }: StxCryptoAssetLoaderProps) {
-  const { asset, isInitialLoading } = useStxAccountCryptoAssetWithDetails(address);
-  return children(asset, isInitialLoading);
-}
diff --git a/src/app/components/loaders/stx20-tokens-loader.tsx b/src/app/components/loaders/stx20-tokens-loader.tsx
index 986d214f6e6..796f649320d 100644
--- a/src/app/components/loaders/stx20-tokens-loader.tsx
+++ b/src/app/components/loaders/stx20-tokens-loader.tsx
@@ -1,9 +1,15 @@
-import type { Stx20Token } from '@app/query/stacks/stacks-client';
+import type { CryptoAssetBalance, Stx20CryptoAssetInfo } from '@leather-wallet/models';
+
 import { useStx20Tokens } from '@app/query/stacks/stx20/stx20-tokens.hooks';
 
 interface Stx20TokensLoaderProps {
   address: string;
-  children(tokens: Stx20Token[]): React.ReactNode;
+  children(
+    tokens: {
+      balance: CryptoAssetBalance;
+      info: Stx20CryptoAssetInfo;
+    }[]
+  ): React.ReactNode;
 }
 export function Stx20TokensLoader({ address, children }: Stx20TokensLoaderProps) {
   const { data: tokens = [] } = useStx20Tokens(address);
diff --git a/src/app/features/asset-list/components/connect-ledger-asset-button.tsx b/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx
similarity index 99%
rename from src/app/features/asset-list/components/connect-ledger-asset-button.tsx
rename to src/app/features/asset-list/_components/connect-ledger-asset-button.tsx
index 9e596ba057a..81a4dc28b97 100644
--- a/src/app/features/asset-list/components/connect-ledger-asset-button.tsx
+++ b/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx
@@ -25,6 +25,7 @@ export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) {
       },
     });
   };
+
   return (
     <Button
       display="flex"
diff --git a/src/app/features/asset-list/_components/connect-ledger-asset-item-fallback.tsx b/src/app/features/asset-list/_components/connect-ledger-asset-item-fallback.tsx
new file mode 100644
index 00000000000..4037d0300db
--- /dev/null
+++ b/src/app/features/asset-list/_components/connect-ledger-asset-item-fallback.tsx
@@ -0,0 +1,37 @@
+import type React from 'react';
+
+import type { Blockchains, Currencies } from '@leather-wallet/models';
+
+import { capitalize } from '@app/common/utils';
+import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
+import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
+import { Pressable } from '@app/ui/pressable/pressable';
+
+import type { AssetListVariant } from '../asset-list';
+import { ConnectLedgerButton } from './connect-ledger-asset-button';
+
+interface ConnectLedgerAssetItemFallbackProps {
+  chain: Blockchains;
+  icon: React.ReactNode;
+  symbol: Currencies;
+  variant: AssetListVariant;
+}
+export function ConnectLedgerAssetItemFallback({
+  chain,
+  icon,
+  symbol,
+  variant,
+}: ConnectLedgerAssetItemFallbackProps) {
+  const checkBlockchainAvailable = useCheckLedgerBlockchainAvailable();
+  if (variant === 'interactive' && !checkBlockchainAvailable(chain)) return null;
+  return (
+    <Pressable my="space.02">
+      <ItemLayout
+        flagImg={icon}
+        captionLeft={symbol}
+        titleLeft={capitalize(chain)}
+        titleRight={<ConnectLedgerButton chain={chain} />}
+      />
+    </Pressable>
+  );
+}
diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx
index 6a1a32c4699..ff8c8b188e5 100644
--- a/src/app/features/asset-list/asset-list.tsx
+++ b/src/app/features/asset-list/asset-list.tsx
@@ -7,33 +7,34 @@ import {
   BitcoinTaprootAccountLoader,
 } from '@app/components/loaders/bitcoin-account-loader';
 import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader';
-import { BtcCryptoAssetLoader } from '@app/components/loaders/btc-crypto-asset-loader';
+import { BtcBalanceLoader } from '@app/components/loaders/btc-balance-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';
-import { StxCryptoAssetLoader } from '@app/components/loaders/stx-crypto-asset-loader';
+import { StxBalanceLoader } from '@app/components/loaders/stx-balance-loader';
 import { Brc20TokenAssetList } from '@app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
 import { RunesAssetList } from '@app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list';
 import { Src20TokenAssetList } from '@app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list';
 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 { useCurrentNetwork } from '@app/store/networks/networks.selectors';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 
+import { ConnectLedgerAssetItemFallback } from './_components/connect-ledger-asset-item-fallback';
 import { BtcCryptoAssetItem } from './bitcoin/btc-crypto-asset-item/btc-crypto-asset-item';
-import { BtcCryptoAssetItemFallback } from './bitcoin/btc-crypto-asset-item/btc-crypto-asset-item-fallback';
 import { Sip10TokenAssetList } from './stacks/sip10-token-asset-list/sip10-token-asset-list';
 import { Sip10TokenAssetListUnsupported } from './stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported';
 
 export type AssetListVariant = 'interactive' | 'read-only';
 
 interface AssetListProps {
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
+  onSelectAsset?(symbol: string, contractId?: string): void;
   variant?: AssetListVariant;
 }
-export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
+export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListProps) {
   const network = useCurrentNetwork();
   const { whenWallet } = useWalletType();
 
@@ -41,41 +42,29 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
 
   return (
     <Stack>
-      {whenWallet({
-        software: (
-          <BitcoinNativeSegwitAccountLoader current>
-            {nativeSegwitAccount => (
-              <BtcCryptoAssetLoader address={nativeSegwitAccount.address}>
-                {(asset, isInitialLoading) => (
-                  <BtcCryptoAssetItem
-                    asset={asset}
-                    isLoading={isInitialLoading}
-                    onClick={onClick}
-                  />
-                )}
-              </BtcCryptoAssetLoader>
-            )}
-          </BitcoinNativeSegwitAccountLoader>
-        ),
-        ledger: (
-          <BitcoinNativeSegwitAccountLoader
-            current
-            fallback={<BtcCryptoAssetItemFallback variant={variant} />}
-          >
-            {nativeSegwitAccount => (
-              <BtcCryptoAssetLoader address={nativeSegwitAccount.address}>
-                {(asset, isInitialLoading) => (
-                  <BtcCryptoAssetItem
-                    asset={asset}
-                    isLoading={isInitialLoading}
-                    onClick={onClick}
-                  />
-                )}
-              </BtcCryptoAssetLoader>
+      <BitcoinNativeSegwitAccountLoader
+        current
+        fallback={
+          <ConnectLedgerAssetItemFallback
+            chain="bitcoin"
+            icon={<BtcAvatarIcon />}
+            symbol="BTC"
+            variant={variant}
+          />
+        }
+      >
+        {nativeSegwitAccount => (
+          <BtcBalanceLoader address={nativeSegwitAccount.address}>
+            {(balance, isInitialLoading) => (
+              <BtcCryptoAssetItem
+                balance={balance}
+                isLoading={isInitialLoading}
+                onSelectAsset={onSelectAsset}
+              />
             )}
-          </BitcoinNativeSegwitAccountLoader>
-        ),
-      })}
+          </BtcBalanceLoader>
+        )}
+      </BitcoinNativeSegwitAccountLoader>
 
       {/* Temporary duplication during Ledger Bitcoin feature dev */}
       {isReadOnly &&
@@ -85,15 +74,39 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
           ledger: null,
         })}
 
-      <CurrentStacksAccountLoader fallback={<StxCryptoAssetItemFallback variant={variant} />}>
+      <CurrentStacksAccountLoader
+        fallback={
+          <ConnectLedgerAssetItemFallback
+            chain="stacks"
+            icon={<StxAvatarIcon />}
+            symbol="STX"
+            variant={variant}
+          />
+        }
+      >
         {account => (
           <>
-            <StxCryptoAssetLoader address={account.address}>
-              {(asset, isInitialLoading) => (
-                <StxCryptoAssetItem asset={asset} isLoading={isInitialLoading} onClick={onClick} />
+            <StxBalanceLoader address={account.address}>
+              {(balance, isInitialLoading) => (
+                <StxCryptoAssetItem
+                  balance={balance}
+                  isLoading={isInitialLoading}
+                  onSelectAsset={onSelectAsset}
+                />
               )}
-            </StxCryptoAssetLoader>
-            <Sip10TokenAssetList address={account.address} onClick={onClick} />
+            </StxBalanceLoader>
+            <Sip10TokensLoader
+              address={account.address}
+              filter={variant === 'interactive' ? 'all' : 'supported'}
+            >
+              {(isInitialLoading, tokens) => (
+                <Sip10TokenAssetList
+                  isLoading={isInitialLoading}
+                  tokens={tokens}
+                  onSelectAsset={onSelectAsset}
+                />
+              )}
+            </Sip10TokensLoader>
             {isReadOnly && (
               <Stx20TokensLoader address={account.address}>
                 {tokens => <Stx20TokenAssetList tokens={tokens} />}
@@ -111,7 +124,7 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
                 {whenWallet({
                   software: (
                     <Brc20TokensLoader>
-                      {tokens => <Brc20TokenAssetList assets={tokens} variant={variant} />}
+                      {tokens => <Brc20TokenAssetList tokens={tokens} variant={variant} />}
                     </Brc20TokensLoader>
                   ),
                   ledger: null,
@@ -134,7 +147,13 @@ export function AssetList({ onClick, variant = 'read-only' }: AssetListProps) {
 
       {isReadOnly && (
         <CurrentStacksAccountLoader>
-          {account => <Sip10TokenAssetListUnsupported address={account.address} />}
+          {account => (
+            <Sip10TokensLoader address={account.address} filter="unsupported">
+              {(isInitialLoading, tokens) => (
+                <Sip10TokenAssetListUnsupported isLoading={isInitialLoading} 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
index 875048d35af..56aaf127505 100644
--- 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
@@ -1,45 +1,59 @@
 import { useNavigate } from 'react-router-dom';
 
+import type { Brc20CryptoAssetInfo, CryptoAssetBalance, MarketData } from '@leather-wallet/models';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
 import { Stack } from 'leather-styles/jsx';
 
 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 { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
-import type { Brc20AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
 
+interface Brc20TokenAssetDetails {
+  balance: CryptoAssetBalance;
+  holderAddress: string;
+  info: Brc20CryptoAssetInfo;
+  marketData: MarketData;
+}
+
 interface Brc20TokenAssetListProps {
-  assets: Brc20AccountCryptoAssetWithDetails[];
+  tokens: Brc20TokenAssetDetails[];
   variant?: AssetListVariant;
 }
-export function Brc20TokenAssetList({ assets, variant }: Brc20TokenAssetListProps) {
+export function Brc20TokenAssetList({ tokens, variant }: Brc20TokenAssetListProps) {
   const navigate = useNavigate();
-  const { balance, isInitialLoading } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance, isInitialLoading } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
 
-  const hasPositiveBtcBalanceForFees = variant === 'interactive' && balance.amount.isGreaterThan(0);
+  const hasPositiveBtcBalanceForFees =
+    variant === 'interactive' && balance.availableBalance.amount.isGreaterThan(0);
 
-  function navigateToBrc20SendForm(asset: Brc20AccountCryptoAssetWithDetails) {
-    const { balance, holderAddress, info, marketData } = asset;
+  function navigateToBrc20SendForm(token: Brc20TokenAssetDetails) {
+    const { balance, holderAddress, info, marketData } = token;
     navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', info.symbol), {
-      state: { balance: balance.availableBalance, holderAddress, marketData, ticker: info.symbol },
+      state: {
+        balance: balance.availableBalance,
+        holderAddress,
+        marketData,
+        ticker: info.symbol,
+      },
     });
   }
 
   return (
     <Stack data-testid={CryptoAssetSelectors.CryptoAssetList}>
-      {assets.map(asset => (
+      {tokens.map(token => (
         <CryptoAssetItemLayout
-          asset={asset}
-          caption={capitalize(asset.info.name)}
+          balance={token.balance}
+          captionLeft={token.info.name.toUpperCase()}
           icon={<Brc20AvatarIcon />}
           isLoading={isInitialLoading}
-          key={asset.info.symbol}
-          name={asset.info.symbol}
-          onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(asset) : undefined}
+          key={token.info.symbol}
+          onSelectAsset={
+            hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : undefined
+          }
+          titleLeft={token.info.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
deleted file mode 100644
index f7e7c71e797..00000000000
--- a/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item-fallback.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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';
-
-import type { AssetListVariant } from '../../asset-list';
-import { ConnectLedgerButton } from '../../components/connect-ledger-asset-button';
-
-interface StxCryptoAssetItemFallbackProps {
-  variant: AssetListVariant;
-}
-export function BtcCryptoAssetItemFallback({ variant }: StxCryptoAssetItemFallbackProps) {
-  const checkBlockchainAvailable = useCheckLedgerBlockchainAvailable();
-  if (variant === 'interactive' && !checkBlockchainAvailable('bitcoin')) return null;
-  return (
-    <CryptoAssetItemLayout
-      asset={btcCryptoAssetPlaceholder}
-      icon={<BtcAvatarIcon />}
-      name={btcCryptoAssetPlaceholder.info.name}
-      rightElement={<ConnectLedgerButton chain={btcCryptoAssetPlaceholder.chain} />}
-    />
-  );
-}
diff --git a/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx b/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
index 1128f53945e..c3b2e25dc60 100644
--- a/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
+++ b/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
@@ -1,40 +1,31 @@
+import type { BtcCryptoAssetBalance } from '@leather-wallet/models';
+
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
 import { i18nFormatCurrency } from '@app/common/money/format-money';
-import { capitalize } from '@app/common/utils';
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
 import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
-import type {
-  AccountCryptoAssetWithDetails,
-  BtcAccountCryptoAssetWithDetails,
-} from '@app/query/models/crypto-asset.model';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
 interface BtcCryptoAssetItemProps {
-  asset: BtcAccountCryptoAssetWithDetails;
+  balance: BtcCryptoAssetBalance;
   isLoading: boolean;
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
-  rightElement?: React.ReactNode;
+  onSelectAsset?(symbol: string): void;
 }
-export function BtcCryptoAssetItem({
-  asset,
-  isLoading,
-  onClick,
-  rightElement,
-}: BtcCryptoAssetItemProps) {
+export function BtcCryptoAssetItem({ balance, isLoading, onSelectAsset }: BtcCryptoAssetItemProps) {
   const marketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
-  const availableBalanceAsFiat = i18nFormatCurrency(
-    baseCurrencyAmountInQuote(asset.balance.availableBalance, marketData)
+  const fiatAvailableBalance = i18nFormatCurrency(
+    baseCurrencyAmountInQuote(balance.availableBalance, marketData)
   );
 
   return (
     <CryptoAssetItemLayout
-      asset={asset}
-      fiatBalance={availableBalanceAsFiat}
+      balance={balance}
+      captionLeft="BTC"
+      fiatBalance={fiatAvailableBalance}
       icon={<BtcAvatarIcon />}
       isLoading={isLoading}
-      name={capitalize(asset.info.name)}
-      onClick={onClick}
-      rightElement={rightElement}
+      onSelectAsset={onSelectAsset}
+      titleLeft="Bitcoin"
     />
   );
 }
diff --git a/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-item.layout.tsx b/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-item.layout.tsx
deleted file mode 100644
index 09780d9adf4..00000000000
--- a/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-item.layout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { styled } from 'leather-styles/jsx';
-
-import { formatBalance } from '@app/common/format-balance';
-import { convertAmountToBaseUnit } from '@app/common/money/calculate-money';
-import type { RuneToken } from '@app/query/bitcoin/bitcoin-client';
-import { RunesAvatarIcon } from '@app/ui/components/avatar/runes-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: RuneToken;
-}
-export function RunesAssetItemLayout({ rune }: RunesAssetItemLayoutProps) {
-  const { balance, tokenData } = rune;
-  const balanceAsString = convertAmountToBaseUnit(balance).toString();
-  const formattedBalance = formatBalance(balanceAsString);
-
-  return (
-    <Pressable my="space.02">
-      <ItemLayout
-        flagImg={<RunesAvatarIcon />}
-        titleLeft={tokenData.spaced_rune_name ?? tokenData.rune_name}
-        captionLeft="Runes"
-        titleRight={
-          <BasicTooltip
-            asChild
-            label={formattedBalance.isAbbreviated ? balanceAsString : undefined}
-            side="left"
-          >
-            <styled.span data-testid={tokenData.rune_name} fontWeight={500} textStyle="label.02">
-              {formattedBalance.value} {tokenData.symbol}
-            </styled.span>
-          </BasicTooltip>
-        }
-      />
-    </Pressable>
-  );
-}
diff --git a/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx b/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx
index d89fb52692d..f585ff622cf 100644
--- a/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx
+++ b/src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx
@@ -1,12 +1,24 @@
-import type { RuneToken } from '@app/query/bitcoin/bitcoin-client';
+import type { CryptoAssetBalance, RuneCryptoAssetInfo } from '@leather-wallet/models';
 
-import { RunesAssetItemLayout } from './runes-asset-item.layout';
+import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
+import { RunesAvatarIcon } from '@app/ui/components/avatar/runes-avatar-icon';
+
+interface RuneTokenAssetDetails {
+  balance: CryptoAssetBalance;
+  info: RuneCryptoAssetInfo;
+}
 
 interface RunesAssetListProps {
-  runes: RuneToken[];
+  runes: RuneTokenAssetDetails[];
 }
 export function RunesAssetList({ runes }: RunesAssetListProps) {
   return runes.map((rune, i) => (
-    <RunesAssetItemLayout key={`${rune.tokenData.rune_id}${i}`} rune={rune} />
+    <CryptoAssetItemLayout
+      balance={rune.balance}
+      captionLeft="Runes"
+      icon={<RunesAvatarIcon />}
+      key={`${rune.info.symbol}${i}`}
+      titleLeft={rune.info.spacedRuneName ?? rune.info.runeName}
+    />
   ));
 }
diff --git a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-item.layout.tsx b/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-item.layout.tsx
deleted file mode 100644
index e2e669f1e92..00000000000
--- a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-item.layout.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { styled } from 'leather-styles/jsx';
-
-import { createMoney } from '@shared/models/money.model';
-
-import { formatBalance } from '@app/common/format-balance';
-import type { Src20Token } from '@app/query/bitcoin/stamps/stamps-by-address.query';
-import { Src20AvatarIcon } from '@app/ui/components/avatar/src20-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 Src20TokenAssetItemLayoutProps {
-  token: Src20Token;
-}
-export function Src20TokenAssetItemLayout({ token }: Src20TokenAssetItemLayoutProps) {
-  const balance = createMoney(Number(token.amt), token.tick, 0).amount.toString();
-  const formattedBalance = formatBalance(balance);
-
-  return (
-    <Pressable my="space.02">
-      <ItemLayout
-        flagImg={<Src20AvatarIcon />}
-        titleLeft={token.tick.toUpperCase()}
-        captionLeft="SRC-20"
-        titleRight={
-          <BasicTooltip
-            asChild
-            label={formattedBalance.isAbbreviated ? balance : undefined}
-            side="left"
-          >
-            <styled.span data-testid={token.tick} fontWeight={500} textStyle="label.02">
-              {formattedBalance.value}
-            </styled.span>
-          </BasicTooltip>
-        }
-      />
-    </Pressable>
-  );
-}
diff --git a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx b/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
index 706537735a8..fcdac2a8c5e 100644
--- a/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
+++ b/src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx
@@ -1,12 +1,18 @@
-import type { Src20Token } from '@app/query/bitcoin/stamps/stamps-by-address.query';
-
-import { Src20TokenAssetItemLayout } from './src20-token-asset-item.layout';
+import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
+import type { Src20TokenAssetDetails } from '@app/components/loaders/src20-tokens-loader';
+import { Src20AvatarIcon } from '@app/ui/components/avatar/src20-avatar-icon';
 
 interface Src20TokenAssetListProps {
-  tokens: Src20Token[];
+  tokens: Src20TokenAssetDetails[];
 }
 export function Src20TokenAssetList({ tokens }: Src20TokenAssetListProps) {
   return tokens.map((token, i) => (
-    <Src20TokenAssetItemLayout key={`${token.id}${i}`} token={token} />
+    <CryptoAssetItemLayout
+      balance={token.balance}
+      captionLeft={token.info.name.toUpperCase()}
+      key={`${token.info.id}${i}`}
+      icon={<Src20AvatarIcon />}
+      titleLeft={token.info.symbol.toUpperCase()}
+    />
   ));
 }
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx
index e7b421e56ac..01713734ad6 100644
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx
+++ b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx
@@ -1,36 +1,49 @@
+import type { CryptoAssetBalance, MarketData, Sip10CryptoAssetInfo } from '@leather-wallet/models';
+
+import { convertAssetBalanceToFiat } from '@app/common/asset-utils';
+import { getSafeImageCanonicalUri } from '@app/common/stacks-utils';
+import { spamFilter } from '@app/common/utils/spam-filter';
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
 import { StacksAssetAvatar } from '@app/components/stacks-asset-avatar';
-import type {
-  AccountCryptoAssetWithDetails,
-  Sip10AccountCryptoAssetWithDetails,
-} from '@app/query/models/crypto-asset.model';
-
-import { parseSip10TokenCryptoAssetBalance } from './sip10-token-asset-item.utils';
 
 interface Sip10TokenAssetItemProps {
-  asset: Sip10AccountCryptoAssetWithDetails;
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
+  balance: CryptoAssetBalance;
+  info: Sip10CryptoAssetInfo;
+  isLoading: boolean;
+  marketData: MarketData;
+  onSelectAsset?(symbol: string, contractId?: string): void;
 }
-export function Sip10TokenAssetItem({ asset, onClick }: Sip10TokenAssetItemProps) {
-  const { avatar, fiatBalance, imageCanonicalUri, title } =
-    parseSip10TokenCryptoAssetBalance(asset);
+export function Sip10TokenAssetItem({
+  balance,
+  info,
+  isLoading,
+  marketData,
+  onSelectAsset,
+}: Sip10TokenAssetItemProps) {
+  const name = spamFilter(info.name);
+  const fiatBalance = convertAssetBalanceToFiat({
+    balance: balance.availableBalance,
+    marketData,
+  });
 
   return (
     <CryptoAssetItemLayout
-      asset={asset}
+      balance={balance}
       fiatBalance={fiatBalance}
-      caption={asset.info.symbol}
+      captionLeft={info.symbol}
+      contractId={info.contractId}
       icon={
         <StacksAssetAvatar
           color="white"
-          gradientString={avatar}
-          imageCanonicalUri={imageCanonicalUri}
+          gradientString={info.contractId}
+          imageCanonicalUri={getSafeImageCanonicalUri(info.imageCanonicalUri, name)}
         >
-          {title[0]}
+          {name[0]}
         </StacksAssetAvatar>
       }
-      name={asset.info.name}
-      onClick={onClick}
+      isLoading={isLoading}
+      onSelectAsset={onSelectAsset}
+      titleLeft={name}
     />
   );
 }
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.utils.ts b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.utils.ts
deleted file mode 100644
index e1b09175109..00000000000
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.utils.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
-
-import { convertAssetBalanceToFiat } from '@app/common/asset-utils';
-import { formatBalance } from '@app/common/format-balance';
-import { ftDecimals, getSafeImageCanonicalUri } from '@app/common/stacks-utils';
-import { spamFilter } from '@app/common/utils/spam-filter';
-import type { Sip10AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-
-export function parseSip10TokenCryptoAssetBalance(asset: Sip10AccountCryptoAssetWithDetails) {
-  const { balance, info } = asset;
-  const { contractId, decimals, imageCanonicalUri, name, symbol } = info;
-
-  const amount = ftDecimals(balance.availableBalance.amount, decimals);
-  const avatar = contractId;
-  const dataTestId =
-    symbol && CryptoAssetSelectors.CryptoAssetListItem.replace('{symbol}', symbol.toLowerCase());
-  const formattedBalance = formatBalance(amount);
-  const safeImageCanonicalUri = getSafeImageCanonicalUri(imageCanonicalUri, name);
-  const title = spamFilter(name);
-  const fiatBalance = convertAssetBalanceToFiat({
-    ...asset,
-    balance: asset.balance.availableBalance,
-  });
-
-  return {
-    amount,
-    avatar,
-    fiatBalance,
-    dataTestId,
-    formattedBalance,
-    imageCanonicalUri: safeImageCanonicalUri,
-    title,
-  };
-}
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx
index 72b52332198..db02882b6fd 100644
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx
+++ b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx
@@ -2,25 +2,30 @@ import { useState } from 'react';
 
 import { Stack, styled } from 'leather-styles/jsx';
 
-import { useFilteredSip10AccountCryptoAssetsWithDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
+import { useAlexCurrencyPriceAsMarketData } from '@app/query/common/alex-sdk/alex-sdk.hooks';
+import type { Sip10TokenAssetDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
 import { Accordion } from '@app/ui/components/accordion/accordion';
 
 import { Sip10TokenAssetItem } from './sip10-token-asset-item';
 
 const accordionValue = 'accordion-unsupported-token-asset-list';
 
-export function Sip10TokenAssetListUnsupported({ address }: { address: string }) {
+interface Sip10TokenAssetListUnsupportedProps {
+  isLoading: boolean;
+  tokens: Sip10TokenAssetDetails[];
+}
+export function Sip10TokenAssetListUnsupported({
+  isLoading,
+  tokens,
+}: Sip10TokenAssetListUnsupportedProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const assets = useFilteredSip10AccountCryptoAssetsWithDetails({
-    address,
-    filter: 'unsupported',
-  });
+  const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
 
   function onValueChange(value: string) {
     setIsOpen(value === accordionValue);
   }
 
-  if (!assets.length) return null;
+  if (!tokens.length) return null;
 
   return (
     <Accordion.Root onValueChange={onValueChange} type="single" collapsible>
@@ -30,8 +35,17 @@ export function Sip10TokenAssetListUnsupported({ address }: { address: string })
         </Accordion.Trigger>
         <Accordion.Content>
           <Stack>
-            {assets.map(asset => (
-              <Sip10TokenAssetItem asset={asset} key={asset.info.contractId} />
+            {tokens.map(token => (
+              <Sip10TokenAssetItem
+                balance={token.balance}
+                key={token.info.name}
+                info={token.info}
+                isLoading={isLoading}
+                marketData={priceAsMarketData(
+                  token.info.contractId,
+                  token.balance.availableBalance.symbol
+                )}
+              />
             ))}
           </Stack>
         </Accordion.Content>
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx
index 28e2b49c71e..ab2f490bdc4 100644
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx
+++ b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx
@@ -1,28 +1,38 @@
 import { Stack } from 'leather-styles/jsx';
 
-import { isDefined } from '@shared/utils';
-
-import type { AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-import { useFilteredSip10AccountCryptoAssetsWithDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
+import { useAlexCurrencyPriceAsMarketData } from '@app/query/common/alex-sdk/alex-sdk.hooks';
+import type { Sip10TokenAssetDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
 
 import { Sip10TokenAssetItem } from './sip10-token-asset-item';
 
 interface Sip10TokenAssetListProps {
-  address: string;
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
+  isLoading: boolean;
+  tokens: Sip10TokenAssetDetails[];
+  onSelectAsset?(symbol: string, contractId?: string): void;
 }
-export function Sip10TokenAssetList({ address, onClick }: Sip10TokenAssetListProps) {
-  const assets = useFilteredSip10AccountCryptoAssetsWithDetails({
-    address,
-    filter: isDefined(onClick) ? 'all' : 'supported',
-  });
+export function Sip10TokenAssetList({
+  isLoading,
+  tokens,
+  onSelectAsset,
+}: Sip10TokenAssetListProps) {
+  const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
 
-  if (!assets.length) return null;
+  if (!tokens.length) return null;
 
   return (
     <Stack>
-      {assets.map(asset => (
-        <Sip10TokenAssetItem asset={asset} key={asset.info.contractId} onClick={onClick} />
+      {tokens.map(token => (
+        <Sip10TokenAssetItem
+          balance={token.balance}
+          key={token.info.name}
+          info={token.info}
+          isLoading={isLoading}
+          marketData={priceAsMarketData(
+            token.info.contractId,
+            token.balance.availableBalance.symbol
+          )}
+          onSelectAsset={onSelectAsset}
+        />
       ))}
     </Stack>
   );
diff --git a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item-fallback.tsx b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item-fallback.tsx
deleted file mode 100644
index 1eb4c256dcd..00000000000
--- a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item-fallback.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
-import { stxCryptoAssetPlaceholder } from '@app/query/stacks/stx/stx-crypto-asset.hooks';
-import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
-import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
-
-import type { AssetListVariant } from '../../asset-list';
-import { ConnectLedgerButton } from '../../components/connect-ledger-asset-button';
-
-interface StxCryptoAssetItemFallbackProps {
-  variant: AssetListVariant;
-}
-export function StxCryptoAssetItemFallback({ variant }: StxCryptoAssetItemFallbackProps) {
-  const checkBlockchainAvailable = useCheckLedgerBlockchainAvailable();
-  if (variant === 'interactive' && !checkBlockchainAvailable('stacks')) return null;
-  return (
-    <CryptoAssetItemLayout
-      asset={stxCryptoAssetPlaceholder}
-      icon={<StxAvatarIcon />}
-      name={stxCryptoAssetPlaceholder.info.name}
-      rightElement={<ConnectLedgerButton chain={stxCryptoAssetPlaceholder.chain} />}
-    />
-  );
-}
diff --git a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.stories.tsx b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.stories.tsx
index 7fe04fcfecb..5db83074eea 100644
--- a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.stories.tsx
+++ b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.stories.tsx
@@ -42,40 +42,20 @@ const stxCryptoAssetBalance = {
 
 export const StxCryptoAssetItem: Story = {
   args: {
-    asset: {
-      info: {
-        decimals: 6,
-        hasMemo: true,
-        name: 'stacks',
-        symbol: 'STX',
-      },
-      balance: {
-        ...stxCryptoAssetBalance,
-        lockedBalance: { amount: new BigNumber(0), decimals: 6, symbol },
-      },
-      chain: 'stacks',
-      marketData: null,
-      type: 'stx',
+    balance: {
+      ...stxCryptoAssetBalance,
+      lockedBalance: { amount: new BigNumber(0), decimals: 6, symbol },
     },
+    isLoading: false,
   },
 };
 
 export const StxCryptoAssetItemWithLockedBalance: Story = {
   args: {
-    asset: {
-      info: {
-        decimals: 6,
-        hasMemo: true,
-        name: 'stacks',
-        symbol: 'STX',
-      },
-      balance: {
-        ...stxCryptoAssetBalance,
-        lockedBalance: { amount: new BigNumber(1000000000), decimals: 6, symbol },
-      },
-      chain: 'stacks',
-      marketData: null,
-      type: 'stx',
+    balance: {
+      ...stxCryptoAssetBalance,
+      lockedBalance: { amount: new BigNumber(1000000000), decimals: 6, symbol },
     },
+    isLoading: false,
   },
 };
diff --git a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
index 55092bab5f1..1473ad0cf0d 100644
--- a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
+++ b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
@@ -1,54 +1,46 @@
+import type { StxCryptoAssetBalance } from '@leather-wallet/models';
 import { styled } from 'leather-styles/jsx';
 
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
-import { i18nFormatCurrency } from '@app/common/money/format-money';
-import { ftDecimals } from '@app/common/stacks-utils';
-import { capitalize } from '@app/common/utils';
+import { formatMoneyWithoutSymbol, i18nFormatCurrency } from '@app/common/money/format-money';
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
 import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
-import type {
-  AccountCryptoAssetWithDetails,
-  StxAccountCryptoAssetWithDetails,
-} from '@app/query/models/crypto-asset.model';
 import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
-import { BulletOperator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { Caption } from '@app/ui/components/typography/caption';
 
 interface StxCryptoAssetItemProps {
-  asset: StxAccountCryptoAssetWithDetails;
+  balance: StxCryptoAssetBalance;
   isLoading: boolean;
-  onClick?(asset: AccountCryptoAssetWithDetails): void;
+  onSelectAsset?(symbol: string): void;
 }
-export function StxCryptoAssetItem({ asset, isLoading, onClick }: StxCryptoAssetItemProps) {
+export function StxCryptoAssetItem({ balance, isLoading, onSelectAsset }: StxCryptoAssetItemProps) {
   const marketData = useCryptoCurrencyMarketDataMeanAverage('STX');
 
-  const { availableBalance, lockedBalance } = asset.balance;
-  const showAdditionalInfo = lockedBalance.amount.isGreaterThan(0);
+  const { availableBalance, lockedBalance } = balance;
+  const showLockedBalance = lockedBalance.amount.isGreaterThan(0);
 
-  const lockedBalanceAsFiat = i18nFormatCurrency(
+  const fiatLockedBalance = i18nFormatCurrency(
     baseCurrencyAmountInQuote(lockedBalance, marketData)
   );
-  const availableBalanceAsFiat = i18nFormatCurrency(
+  const fiatAvailableBalance = i18nFormatCurrency(
     baseCurrencyAmountInQuote(availableBalance, marketData)
   );
-  const additionalBalanceInfo = (
-    <styled.span>
-      <BulletOperator ml="space.01" mr="space.02" />
-      {ftDecimals(lockedBalance.amount, lockedBalance.decimals)} locked
-    </styled.span>
+  const titleRightBulletInfo = (
+    <styled.span>{formatMoneyWithoutSymbol(lockedBalance)} locked</styled.span>
   );
-  const additionalBalanceInfoAsFiat = <Caption>{lockedBalanceAsFiat} locked</Caption>;
+  const captionRightBulletInfo = <Caption>{fiatLockedBalance} locked</Caption>;
 
   return (
     <CryptoAssetItemLayout
-      additionalBalanceInfo={showAdditionalInfo && additionalBalanceInfo}
-      additionalBalanceInfoAsFiat={showAdditionalInfo && additionalBalanceInfoAsFiat}
-      asset={asset}
-      fiatBalance={availableBalanceAsFiat}
+      balance={balance}
+      captionLeft="STX"
+      captionRightBulletInfo={showLockedBalance && captionRightBulletInfo}
+      fiatBalance={fiatAvailableBalance}
       icon={<StxAvatarIcon />}
       isLoading={isLoading}
-      name={capitalize(asset.info.name)}
-      onClick={onClick}
+      onSelectAsset={onSelectAsset}
+      titleLeft="Stacks"
+      titleRightBulletInfo={showLockedBalance && titleRightBulletInfo}
     />
   );
 }
diff --git a/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-item.layout.tsx b/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-item.layout.tsx
deleted file mode 100644
index 6cc4b7d2f1d..00000000000
--- a/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-item.layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { styled } from 'leather-styles/jsx';
-
-import { formatBalance } from '@app/common/format-balance';
-import type { Stx20Token } from '@app/query/stacks/stacks-client';
-import { Stx20AvatarIcon } from '@app/ui/components/avatar/stx20-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 Stx20TokenAssetItemLayoutProps {
-  token: Stx20Token;
-}
-export function Stx20TokenAssetItemLayout({ token }: Stx20TokenAssetItemLayoutProps) {
-  const balanceAsString = token.balance.amount.toString();
-  const formattedBalance = formatBalance(balanceAsString);
-
-  return (
-    <Pressable my="space.02">
-      <ItemLayout
-        flagImg={<Stx20AvatarIcon />}
-        titleLeft={token.tokenData.ticker}
-        captionLeft="STX-20"
-        titleRight={
-          <BasicTooltip
-            asChild
-            label={formattedBalance.isAbbreviated ? balanceAsString : undefined}
-            side="left"
-          >
-            <styled.span data-testid={token.tokenData.ticker} fontWeight={500} textStyle="label.02">
-              {formattedBalance.value}
-            </styled.span>
-          </BasicTooltip>
-        }
-      />
-    </Pressable>
-  );
-}
diff --git a/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list.tsx b/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list.tsx
index 18462051c5c..144ffc8f068 100644
--- a/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list.tsx
+++ b/src/app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list.tsx
@@ -1,12 +1,24 @@
-import type { Stx20Token } from '@app/query/stacks/stacks-client';
+import type { CryptoAssetBalance, Stx20CryptoAssetInfo } from '@leather-wallet/models';
 
-import { Stx20TokenAssetItemLayout } from './stx20-token-asset-item.layout';
+import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
+import { Stx20AvatarIcon } from '@app/ui/components/avatar/stx20-avatar-icon';
+
+interface Stx20TokenAssetDetails {
+  balance: CryptoAssetBalance;
+  info: Stx20CryptoAssetInfo;
+}
 
 interface Stx20TokenAssetListProps {
-  tokens: Stx20Token[];
+  tokens: Stx20TokenAssetDetails[];
 }
 export function Stx20TokenAssetList({ tokens }: Stx20TokenAssetListProps) {
   return tokens.map((token, i) => (
-    <Stx20TokenAssetItemLayout key={`${token.tokenData.ticker}${i}`} token={token} />
+    <CryptoAssetItemLayout
+      balance={token.balance}
+      captionLeft={token.info.name.toUpperCase()}
+      icon={<Stx20AvatarIcon />}
+      key={`${token.info.symbol}${i}`}
+      titleLeft={token.info.symbol}
+    />
   ));
 }
diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
index ca8d932c055..e0e2eecaa42 100644
--- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
+++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
@@ -10,7 +10,7 @@ import { formatMoney } from '@app/common/money/format-money';
 import { BitcoinCustomFee } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee';
 import { MAX_FEE_RATE_MULTIPLIER } from '@app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee';
 import { OnChooseFeeArgs } from '@app/components/bitcoin-fees-list/bitcoin-fees-list';
-import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
 
 import { BitcoinChooseFeeLayout } from './components/bitcoin-choose-fee.layout';
@@ -47,7 +47,7 @@ export function BitcoinChooseFee({
   maxRecommendedFeeRate = 0,
   ...rest
 }: BitcoinChooseFeeProps) {
-  const { balance } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
   const hasAmount = amount.amount.isGreaterThan(0);
   const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate);
 
@@ -86,7 +86,7 @@ export function BitcoinChooseFee({
           feesList={feesList}
         />
         <Box mt="space.05" width="100%">
-          <AvailableBalance balance={formatMoney(balance)} />
+          <AvailableBalance balance={formatMoney(balance.availableBalance)} />
         </Box>
       </Stack>
     </BitcoinChooseFeeLayout>
diff --git a/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts b/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts
index 01a3764ae79..5a5c22ab7c7 100644
--- a/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts
+++ b/src/app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend.ts
@@ -3,18 +3,18 @@ import { useState } from 'react';
 import { Money, createMoney } from '@shared/models/money.model';
 
 import { subtractMoney, sumMoney } from '@app/common/money/calculate-money';
-import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 
 export function useValidateBitcoinSpend(amount?: Money, isSendingMax?: boolean) {
   const [showInsufficientBalanceError, setShowInsufficientBalanceError] = useState(false);
-  const { balance } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
 
   return {
     showInsufficientBalanceError,
     onValidateBitcoinFeeSpend(feeValue: number) {
       const feeAsMoney = createMoney(feeValue, 'BTC');
 
-      if (feeAsMoney.amount.isGreaterThan(balance.amount)) {
+      if (feeAsMoney.amount.isGreaterThan(balance.availableBalance.amount)) {
         setShowInsufficientBalanceError(true);
         return false;
       }
@@ -28,10 +28,10 @@ export function useValidateBitcoinSpend(amount?: Money, isSendingMax?: boolean)
       }
 
       const totalSpend = isSendingMax
-        ? subtractMoney(balance, feeAsMoney)
+        ? subtractMoney(balance.availableBalance, feeAsMoney)
         : sumMoney([amount, feeAsMoney]);
 
-      if (totalSpend.amount.isGreaterThan(balance.amount)) {
+      if (totalSpend.amount.isGreaterThan(balance.availableBalance.amount)) {
         setShowInsufficientBalanceError(true);
         return false;
       }
diff --git a/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts b/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts
index a2df7a106db..1505ee9f863 100644
--- a/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts
+++ b/src/app/features/dialogs/increase-fee-dialog/hooks/use-btc-increase-fee.ts
@@ -51,7 +51,7 @@ export function useBtcIncreaseFee(btcTx: BitcoinTx) {
     [btcTx.vin.length, btcTx.vout.length, recipient]
   );
 
-  const { btcCryptoAssetBalance } = useBtcCryptoAssetBalanceNativeSegwit(currentBitcoinAddress);
+  const { balance } = useBtcCryptoAssetBalanceNativeSegwit(currentBitcoinAddress);
   const sendingAmount = getBitcoinTxValue(currentBitcoinAddress, btcTx);
   const { feesList } = useBitcoinFeesList({
     amount: createMoney(btcToSat(sendingAmount), 'BTC'),
@@ -164,7 +164,7 @@ export function useBtcIncreaseFee(btcTx: BitcoinTx) {
           }
 
           // check if fee is higher than the available balance
-          return bnValue.isLessThanOrEqualTo(btcCryptoAssetBalance.availableBalance.amount);
+          return bnValue.isLessThanOrEqualTo(balance.availableBalance.amount);
         },
       }),
   });
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
index 674651b3ba7..01fd1678cec 100644
--- a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
+++ b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -33,11 +33,11 @@ export function IncreaseBtcFeeDialog() {
   const btcTx = tx;
   const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
   const currentBitcoinAddress = nativeSegwitSigner.address;
-  const { btcCryptoAssetBalance } = useBtcCryptoAssetBalanceNativeSegwit(currentBitcoinAddress);
+  const { balance } = useBtcCryptoAssetBalanceNativeSegwit(currentBitcoinAddress);
   const { isBroadcasting, sizeInfo, onSubmit, validationSchema, recipient } =
     useBtcIncreaseFee(btcTx);
 
-  const balance = formatMoney(btcCryptoAssetBalance.availableBalance);
+  const btcBalance = formatMoney(balance.availableBalance);
 
   const recipients = [
     {
@@ -106,7 +106,7 @@ export function IncreaseBtcFeeDialog() {
                       />
                     </Stack>
 
-                    {btcCryptoAssetBalance && <Caption>Balance: {balance}</Caption>}
+                    {balance && <Caption>Balance: {btcBalance}</Caption>}
                   </Stack>
                 </Stack>
               </Suspense>
diff --git a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
index dc344607006..7602638ec3c 100644
--- a/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
+++ b/src/app/features/pending-brc-20-transfers/pending-brc-20-transfers.tsx
@@ -8,7 +8,7 @@ import { noop } from '@shared/utils';
 import { usePressable } from '@app/components/item-hover';
 import { StatusPending } from '@app/components/status-pending';
 import { StatusReady } from '@app/components/status-ready';
-import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useCheckOrderStatuses } from '@app/query/bitcoin/ordinals/brc20/use-check-order-status';
 import { fetchInscripionById } from '@app/query/bitcoin/ordinals/inscription-by-id.query';
 import { convertInscriptionToSupportedInscriptionType } from '@app/query/bitcoin/ordinals/inscription.hooks';
@@ -90,9 +90,9 @@ function PendingBrcTransfer({ order }: PendingBrcTransferProps) {
   const [component, bind] = usePressable(order.status === 'ready');
   const navigate = useNavigate();
   const ordinalsbotClient = useOrdinalsbotClient();
-  const { balance } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
 
-  const hasPositiveBtcBalanceForFees = balance.amount.isGreaterThan(0);
+  const hasPositiveBtcBalanceForFees = balance.availableBalance.amount.isGreaterThan(0);
 
   return (
     <Box
diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx
index 40affce4377..99fd5b8de0a 100644
--- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx
+++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx
@@ -17,8 +17,8 @@ export function BitcoinContractRequestActions({
   onRejectBitcoinContractOffer,
   onAcceptBitcoinContractOffer,
 }: BitcoinContractRequestActionsProps) {
-  const { btcCryptoAssetBalance } = useBtcCryptoAssetBalanceNativeSegwit(bitcoinAddress);
-  const canAccept = btcCryptoAssetBalance.availableBalance.amount.isGreaterThan(requiredAmount);
+  const { balance } = useBtcCryptoAssetBalanceNativeSegwit(bitcoinAddress);
+  const canAccept = balance.availableBalance.amount.isGreaterThan(requiredAmount);
 
   return (
     <>
diff --git a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx
index 58eb7a9cb2b..89df7aa848e 100644
--- a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx
+++ b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx
@@ -5,15 +5,12 @@ import { Stack, styled } from 'leather-styles/jsx';
 
 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 { BitcoinNativeSegwitAccountLoader } from '@app/components/loaders/bitcoin-account-loader';
-import { BtcCryptoAssetLoader } from '@app/components/loaders/btc-crypto-asset-loader';
+import { BtcBalanceLoader } from '@app/components/loaders/btc-balance-loader';
 import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
-import { StxCryptoAssetLoader } from '@app/components/loaders/stx-crypto-asset-loader';
+import { StxBalanceLoader } from '@app/components/loaders/stx-balance-loader';
+import { BtcCryptoAssetItem } from '@app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item';
 import { StxCryptoAssetItem } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item';
-import type { AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { Card } from '@app/ui/layout/card/card';
 import { Page } from '@app/ui/layout/page/page.layout';
 
@@ -21,8 +18,7 @@ export function ChooseCryptoAssetToFund() {
   const navigate = useNavigate();
 
   const navigateToFund = useCallback(
-    (asset: AccountCryptoAssetWithDetails) =>
-      navigate(RouteUrls.Fund.replace(':currency', asset.info.symbol)),
+    (symbol: string) => navigate(RouteUrls.Fund.replace(':currency', symbol)),
     [navigate]
   );
 
@@ -39,31 +35,29 @@ export function ChooseCryptoAssetToFund() {
           <Stack pb="space.04" px="space.05">
             <BitcoinNativeSegwitAccountLoader current>
               {signer => (
-                <BtcCryptoAssetLoader address={signer.address}>
-                  {(asset, isLoading) => (
-                    <CryptoAssetItemLayout
-                      asset={asset}
-                      icon={<BtcAvatarIcon />}
-                      isLoading={isLoading}
-                      name={capitalize(asset.info.name)}
-                      onClick={() => navigateToFund(asset)}
+                <BtcBalanceLoader address={signer.address}>
+                  {(balance, isInitialLoading) => (
+                    <BtcCryptoAssetItem
+                      balance={balance}
+                      isLoading={isInitialLoading}
+                      onSelectAsset={() => navigateToFund('BTC')}
                     />
                   )}
-                </BtcCryptoAssetLoader>
+                </BtcBalanceLoader>
               )}
             </BitcoinNativeSegwitAccountLoader>
 
             <CurrentStacksAccountLoader>
               {account => (
-                <StxCryptoAssetLoader address={account.address}>
-                  {(asset, isInitialLoading) => (
+                <StxBalanceLoader address={account.address}>
+                  {(balance, isInitialLoading) => (
                     <StxCryptoAssetItem
-                      asset={asset}
+                      balance={balance}
                       isLoading={isInitialLoading}
-                      onClick={() => navigateToFund(asset)}
+                      onSelectAsset={() => navigateToFund('STX')}
                     />
                   )}
-                </StxCryptoAssetLoader>
+                </StxBalanceLoader>
               )}
             </CurrentStacksAccountLoader>
           </Stack>
diff --git a/src/app/pages/home/components/send-button.tsx b/src/app/pages/home/components/send-button.tsx
index 33da083cc91..80a4b4930b0 100644
--- a/src/app/pages/home/components/send-button.tsx
+++ b/src/app/pages/home/components/send-button.tsx
@@ -10,7 +10,7 @@ import { whenPageMode } from '@app/common/utils';
 import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab';
 import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useStxCryptoAssetBalance } from '@app/query/stacks/balance/account-balance.hooks';
-import { useTransferableSip10CryptoAssetsWithDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
+import { useTransferableSip10Tokens } from '@app/query/stacks/sip10/sip10-tokens.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSignerNullable } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { IconButton } from '@app/ui/components/icon-button/icon-button';
@@ -19,14 +19,13 @@ import { SendIcon } from '@app/ui/icons';
 function SendButtonSuspense() {
   const navigate = useNavigate();
   const { whenWallet } = useWalletType();
-  const address = useCurrentStacksAccountAddress();
   const btcAddress = useCurrentAccountNativeSegwitIndexZeroSignerNullable()?.address;
-  const { btcCryptoAssetBalance } = useBtcCryptoAssetBalanceNativeSegwit(btcAddress ?? '');
-  const { data: stxCryptoAssetBalance } = useStxCryptoAssetBalance(address);
-  const stacksFtAssets = useTransferableSip10CryptoAssetsWithDetails(address);
+  const { balance: btcBalance } = useBtcCryptoAssetBalanceNativeSegwit(btcAddress ?? '');
+  const stxAddress = useCurrentStacksAccountAddress();
+  const { data: stxBalance } = useStxCryptoAssetBalance(stxAddress);
+  const stacksFtAssets = useTransferableSip10Tokens(stxAddress);
 
-  const isDisabled =
-    !btcCryptoAssetBalance && !stxCryptoAssetBalance && stacksFtAssets?.length === 0;
+  const isDisabled = !btcBalance && !stxBalance && stacksFtAssets?.length === 0;
 
   return (
     <IconButton
diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
index 2cb7f107d19..3942c3452c1 100644
--- a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
+++ b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
@@ -5,35 +5,19 @@ import { Box, styled } from 'leather-styles/jsx';
 import { RouteUrls } from '@shared/route-urls';
 
 import { AssetList } from '@app/features/asset-list/asset-list';
-import { useToast } from '@app/features/toasts/use-toast';
 import { useConfigBitcoinSendEnabled } from '@app/query/common/remote-config/remote-config.query';
-import type { AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-import { getSip10InfoFromAsset } from '@app/query/stacks/sip10/sip10-tokens.hooks';
 import { Card } from '@app/ui/layout/card/card';
-import { getAssetStringParts } from '@app/ui/utils/get-asset-string-parts';
 
 export function ChooseCryptoAsset() {
   const navigate = useNavigate();
   const isBitcoinSendEnabled = useConfigBitcoinSendEnabled();
-  const toast = useToast();
 
-  function navigateToSendForm(asset: AccountCryptoAssetWithDetails) {
-    switch (asset.type) {
-      case 'btc':
-        if (!isBitcoinSendEnabled) return navigate(RouteUrls.SendBtcDisabled);
-        return navigate(`${RouteUrls.SendCryptoAsset}/${asset.info.symbol.toLowerCase()}`);
-      case 'sip-10':
-        const info = getSip10InfoFromAsset(asset);
-        if (info) {
-          const { assetName } = getAssetStringParts(info.contractId);
-          const symbol = !info.symbol ? assetName : info.symbol.toLowerCase();
-          return navigate(`${RouteUrls.SendCryptoAsset}/${symbol}/${info.contractId}`);
-        }
-        toast.error('No contract id');
-        return navigate('..');
-      default:
-        return navigate(`${RouteUrls.SendCryptoAsset}/${asset.info.symbol.toLowerCase()}`);
+  function navigateToSendForm(symbol: string, contractId?: string) {
+    if (symbol === 'BTC' && !isBitcoinSendEnabled) return navigate(RouteUrls.SendBtcDisabled);
+    if (contractId) {
+      return navigate(`${RouteUrls.SendCryptoAsset}/${symbol.toLowerCase()}/${contractId}`);
     }
+    return navigate(`${RouteUrls.SendCryptoAsset}/${symbol.toLowerCase()}`);
   }
 
   return (
@@ -45,7 +29,7 @@ export function ChooseCryptoAsset() {
       }
     >
       <Box pb="space.04" px="space.05">
-        <AssetList onClick={navigateToSendForm} variant="interactive" />
+        <AssetList onSelectAsset={navigateToSendForm} variant="interactive" />
       </Box>
     </Card>
   );
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
index 57eec8dabd2..298774c3371 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -1,17 +1,15 @@
 import { Outlet } from 'react-router-dom';
 
+import type { CryptoCurrencies } from '@leather-wallet/models';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { Form, Formik } from 'formik';
 import { Box } from 'leather-styles/jsx';
 
 import { HIGH_FEE_WARNING_LEARN_MORE_URL_BTC } from '@shared/constants';
-import { CryptoCurrencies } from '@shared/models/currencies.model';
 
 import { formatMoney } from '@app/common/money/format-money';
 import { HighFeeDialog } from '@app/features/dialogs/high-fee-dialog/high-fee-dialog';
-import { useBtcAccountCryptoAssetWithDetails } from '@app/query/bitcoin/btc/btc-crypto-asset.hooks';
 import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
-import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { Button } from '@app/ui/components/button/button';
 import { Callout } from '@app/ui/components/callout/callout';
@@ -34,13 +32,10 @@ const symbol: CryptoCurrencies = 'BTC';
 
 export function BtcSendForm() {
   const routeState = useSendFormRouteState();
-  const btcMarketData = useCryptoCurrencyMarketDataMeanAverage(symbol);
-
-  const { address } = useCurrentAccountNativeSegwitIndexZeroSigner();
-  const { asset } = useBtcAccountCryptoAssetWithDetails(address);
-  const { balance, info } = asset;
+  const marketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
 
   const {
+    balance,
     calcMaxSpend,
     chooseTransactionFee,
     currentNetwork,
@@ -101,10 +96,10 @@ export function BtcSendForm() {
                     onSetIsSendingMax={onSetIsSendingMax}
                     isSendingMax={isSendingMax}
                     switchableAmount={
-                      <SendFiatValue marketData={btcMarketData} assetSymbol={symbol} />
+                      <SendFiatValue marketData={marketData} assetSymbol={symbol} />
                     }
                   />
-                  <SelectedAssetField icon={<BtcAvatarIcon />} name={info.name} symbol={symbol} />
+                  <SelectedAssetField icon={<BtcAvatarIcon />} name="Bitcoin" symbol={symbol} />
                   <TransferRecipientField />
                   {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && (
                     <Callout variant="warning" title="Funds have no value" mt="space.04">
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
index 9ee3743d782..7513f71abed 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
@@ -24,7 +24,7 @@ import {
 } from '@app/common/validation/forms/currency-validators';
 import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
-import { useCurrentBtcAvailableBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
+import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
@@ -37,7 +37,7 @@ export function useBtcSendForm() {
   const currentNetwork = useCurrentNetwork();
   const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
   const { data: utxos = [], refetch } = useCurrentNativeSegwitUtxos();
-  const { balance } = useCurrentBtcAvailableBalanceNativeSegwit();
+  const { balance } = useCurrentBtcCryptoAssetBalanceNativeSegwit();
   const sendFormNavigate = useSendFormNavigate();
   const calcMaxSpend = useCalculateMaxBitcoinSpend();
   const { onFormStateChange } = useUpdatePersistedSendFormValues();
@@ -46,6 +46,7 @@ export function useBtcSendForm() {
   useOnMount(() => refetch());
 
   return {
+    balance,
     calcMaxSpend,
     currentNetwork,
     formRef,
@@ -59,7 +60,7 @@ export function useBtcSendForm() {
       amount: yup
         .number()
         .concat(btcMinimumSpendValidator())
-        .concat(btcAmountPrecisionValidator(formatPrecisionError(balance)))
+        .concat(btcAmountPrecisionValidator(formatPrecisionError(balance.availableBalance)))
         .concat(currencyAmountValidator())
         .concat(
           btcInsufficientBalanceValidator({
diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx
index fbee8ba9b37..657596792cc 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form-container.tsx
@@ -1,5 +1,6 @@
+import type { CryptoAssetBalance, MarketData, Sip10CryptoAssetInfo } from '@leather-wallet/models';
+
 import { StacksAssetAvatar } from '@app/components/stacks-asset-avatar';
-import type { Sip10AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
 import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 
 import { AmountField } from '../../components/amount-field';
@@ -10,9 +11,15 @@ import { StacksCommonSendForm } from '../stacks/stacks-common-send-form';
 import { useSip10SendForm } from './use-sip10-send-form';
 
 interface Sip10TokenSendFormContainerProps {
-  asset: Sip10AccountCryptoAssetWithDetails;
+  info: Sip10CryptoAssetInfo;
+  balance: CryptoAssetBalance;
+  marketData: MarketData;
 }
-export function Sip10TokenSendFormContainer({ asset }: Sip10TokenSendFormContainerProps) {
+export function Sip10TokenSendFormContainer({
+  info,
+  balance,
+  marketData,
+}: Sip10TokenSendFormContainerProps) {
   const {
     availableTokenBalance,
     initialValues,
@@ -21,10 +28,9 @@ export function Sip10TokenSendFormContainer({ asset }: Sip10TokenSendFormContain
     stacksFtFees: fees,
     validationSchema,
     avatar,
-    marketData,
     decimals,
     symbol,
-  } = useSip10SendForm({ asset });
+  } = useSip10SendForm({ info, balance });
 
   const amountField = (
     <AmountField
diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx
index 47c3b6ec5c2..34fdd76a48b 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx
@@ -1,33 +1,51 @@
 import { Navigate, useParams } from 'react-router-dom';
 
+import type { CryptoAssetBalance, MarketData, Sip10CryptoAssetInfo } from '@leather-wallet/models';
+
 import { RouteUrls } from '@shared/route-urls';
 
 import { useToast } from '@app/features/toasts/use-toast';
-import type { Sip10AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
-import { useSip10CryptoAssetWithDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
+import { useAlexCurrencyPriceAsMarketData } from '@app/query/common/alex-sdk/alex-sdk.hooks';
+import { useSip10Token } from '@app/query/stacks/sip10/sip10-tokens.hooks';
 
 import { Sip10TokenSendFormContainer } from './sip10-token-send-form-container';
 
 interface Sip10TokenSendFormLoaderProps {
-  children(data: { asset: Sip10AccountCryptoAssetWithDetails }): React.ReactNode;
+  children(token: {
+    balance: CryptoAssetBalance;
+    info: Sip10CryptoAssetInfo;
+    marketData: MarketData;
+  }): React.ReactNode;
 }
 function Sip10TokenSendFormLoader({ children }: Sip10TokenSendFormLoaderProps) {
   const { contractId } = useParams();
-  const asset = useSip10CryptoAssetWithDetails(contractId ?? '');
+  const token = useSip10Token(contractId ?? '');
+  const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
   const toast = useToast();
 
-  if (!asset) {
-    toast.error('Asset not found');
+  if (!contractId) return;
+
+  if (!token) {
+    toast.error('Token not found');
     return <Navigate to={RouteUrls.SendCryptoAsset} />;
   }
 
-  return children({ asset });
+  return children({
+    ...token,
+    marketData: priceAsMarketData(token.info.contractId, token.balance.availableBalance.symbol),
+  });
 }
 
 export function Sip10TokenSendForm() {
   return (
     <Sip10TokenSendFormLoader>
-      {({ asset }) => <Sip10TokenSendFormContainer asset={asset} />}
+      {token => (
+        <Sip10TokenSendFormContainer
+          balance={token.balance}
+          info={token.info}
+          marketData={token.marketData}
+        />
+      )}
     </Sip10TokenSendFormLoader>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx
index 41c3b66c600..4176cbfc2d7 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 
+import type { CryptoAssetBalance, Sip10CryptoAssetInfo } from '@leather-wallet/models';
 import { FormikHelpers } from 'formik';
 import * as yup from 'yup';
 
@@ -9,7 +10,6 @@ import { StacksSendFormValues } from '@shared/models/form.model';
 import { convertAmountToBaseUnit } from '@app/common/money/calculate-money';
 import { getSafeImageCanonicalUri } from '@app/common/stacks-utils';
 import { stacksFungibleTokenAmountValidator } from '@app/common/validation/forms/amount-validators';
-import type { Sip10AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
 import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks';
 import {
   useFtTokenTransferUnsignedTx,
@@ -20,31 +20,32 @@ import { useSendFormNavigate } from '../../hooks/use-send-form-navigate';
 import { useStacksCommonSendForm } from '../stacks/use-stacks-common-send-form';
 
 interface UseSip10SendFormArgs {
-  asset: Sip10AccountCryptoAssetWithDetails;
+  balance: CryptoAssetBalance;
+  info: Sip10CryptoAssetInfo;
 }
-export function useSip10SendForm({ asset }: UseSip10SendFormArgs) {
-  const generateTx = useGenerateFtTokenTransferUnsignedTx(asset.info);
+export function useSip10SendForm({ balance, info }: UseSip10SendFormArgs) {
+  const generateTx = useGenerateFtTokenTransferUnsignedTx(info);
 
   const sendFormNavigate = useSendFormNavigate();
 
-  const unsignedTx = useFtTokenTransferUnsignedTx(asset.info);
+  const unsignedTx = useFtTokenTransferUnsignedTx(info);
   const { data: stacksFtFees } = useCalculateStacksTxFees(unsignedTx);
 
-  const availableTokenBalance = asset.balance.availableBalance;
+  const availableTokenBalance = balance.availableBalance;
   const sendMaxBalance = useMemo(
     () => convertAmountToBaseUnit(availableTokenBalance),
     [availableTokenBalance]
   );
 
   const { initialValues, checkFormValidation, recipient, memo, nonce } = useStacksCommonSendForm({
-    symbol: asset.info.symbol,
+    symbol: info.symbol,
     availableTokenBalance,
   });
 
   function createFtAvatar() {
     return {
-      avatar: asset.info.contractId,
-      imageCanonicalUri: getSafeImageCanonicalUri(asset.info.imageCanonicalUri, asset.info.name),
+      avatar: info.contractId,
+      imageCanonicalUri: getSafeImageCanonicalUri(info.imageCanonicalUri, info.name),
     };
   }
 
@@ -53,9 +54,8 @@ export function useSip10SendForm({ asset }: UseSip10SendFormArgs) {
     initialValues,
     sendMaxBalance,
     stacksFtFees,
-    symbol: asset.info.symbol,
-    decimals: asset.info.decimals,
-    marketData: asset.marketData,
+    symbol: info.symbol,
+    decimals: info.decimals,
     avatar: createFtAvatar(),
     validationSchema: yup.object({
       amount: stacksFungibleTokenAmountValidator(availableTokenBalance),
@@ -75,8 +75,8 @@ export function useSip10SendForm({ asset }: UseSip10SendFormArgs) {
       if (!tx) return logger.error('Attempted to generate unsigned tx, but tx is undefined');
 
       sendFormNavigate.toConfirmAndSignStacksSip10Transaction({
-        decimals: asset.info.decimals,
-        name: asset.info.name,
+        decimals: info.decimals,
+        name: info.name,
         tx,
       });
     },
diff --git a/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts b/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts
index 84f43815ec3..e962da88c77 100644
--- a/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts
+++ b/src/app/query/bitcoin/balance/btc-balance-native-segwit.hooks.ts
@@ -1,37 +1,58 @@
 import { useMemo } from 'react';
 
 import type { BtcCryptoAssetBalance, Money } from '@leather-wallet/models';
+import BigNumber from 'bignumber.js';
 
 import { createMoney } from '@shared/models/money.model';
+import { isUndefined } from '@shared/utils';
 
+import { sumNumbers } from '@app/common/math/helpers';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
-import { useGetBitcoinBalanceByAddress } from './btc-balance.hooks';
+import { useNativeSegwitUtxosByAddress } from '../address/utxos-by-address.hooks';
+import { useRunesEnabled } from '../runes/runes.hooks';
 
 function createBtcCryptoAssetBalance(balance: Money): BtcCryptoAssetBalance {
   return {
     availableBalance: balance,
-    // TODO: Asset refactor: can we determine these here or are they nec?
+    // TODO: Can we determine these here or are they nec?
     protectedBalance: createMoney(0, 'BTC'),
     uneconomicalBalance: createMoney(0, 'BTC'),
   };
 }
 
-// Balance is derived from a single query in address reuse mode
 export function useBtcCryptoAssetBalanceNativeSegwit(address: string) {
-  const { balance, isInitialLoading, isLoading, isFetching } =
-    useGetBitcoinBalanceByAddress(address);
-  const btcCryptoAssetBalance = useMemo(() => createBtcCryptoAssetBalance(balance), [balance]);
+  const runesEnabled = useRunesEnabled();
+
+  const {
+    data: utxos,
+    isInitialLoading,
+    isLoading,
+    isFetching,
+  } = useNativeSegwitUtxosByAddress({
+    address,
+    filterInscriptionUtxos: true,
+    filterPendingTxsUtxos: true,
+    filterRunesUtxos: runesEnabled,
+  });
+
+  const balance = useMemo(() => {
+    if (isUndefined(utxos))
+      return createBtcCryptoAssetBalance(createMoney(new BigNumber(0), 'BTC'));
+    return createBtcCryptoAssetBalance(
+      createMoney(sumNumbers(utxos.map(utxo => utxo.value)), 'BTC')
+    );
+  }, [utxos]);
 
   return {
-    btcCryptoAssetBalance,
+    balance,
     isInitialLoading,
     isLoading,
     isFetching,
   };
 }
 
-export function useCurrentBtcAvailableBalanceNativeSegwit() {
+export function useCurrentBtcCryptoAssetBalanceNativeSegwit() {
   const nativeSegwitSigner = useCurrentAccountNativeSegwitIndexZeroSigner();
-  return useGetBitcoinBalanceByAddress(nativeSegwitSigner.address);
+  return useBtcCryptoAssetBalanceNativeSegwit(nativeSegwitSigner.address);
 }
diff --git a/src/app/query/bitcoin/balance/btc-balance.hooks.ts b/src/app/query/bitcoin/balance/btc-balance.hooks.ts
deleted file mode 100644
index d7b5f85a609..00000000000
--- a/src/app/query/bitcoin/balance/btc-balance.hooks.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useMemo } from 'react';
-
-import BigNumber from 'bignumber.js';
-
-import { createMoney } from '@shared/models/money.model';
-import { isUndefined } from '@shared/utils';
-
-import { sumNumbers } from '@app/common/math/helpers';
-
-import { useNativeSegwitUtxosByAddress } from '../address/utxos-by-address.hooks';
-import { useRunesEnabled } from '../runes/runes.hooks';
-
-export function useGetBitcoinBalanceByAddress(address: string) {
-  const runesEnabled = useRunesEnabled();
-
-  const {
-    data: utxos,
-    isInitialLoading,
-    isLoading,
-    isFetching,
-  } = useNativeSegwitUtxosByAddress({
-    address,
-    filterInscriptionUtxos: true,
-    filterPendingTxsUtxos: true,
-    filterRunesUtxos: runesEnabled,
-  });
-
-  const balance = useMemo(() => {
-    if (isUndefined(utxos)) return createMoney(new BigNumber(0), 'BTC');
-    return createMoney(sumNumbers(utxos.map(utxo => utxo.value)), 'BTC');
-  }, [utxos]);
-
-  return {
-    balance,
-    isInitialLoading,
-    isLoading,
-    isFetching,
-  };
-}
diff --git a/src/app/query/bitcoin/bitcoin-client.ts b/src/app/query/bitcoin/bitcoin-client.ts
index 8b9f127bed5..eb6d74d3cb1 100644
--- a/src/app/query/bitcoin/bitcoin-client.ts
+++ b/src/app/query/bitcoin/bitcoin-client.ts
@@ -6,7 +6,6 @@ import {
   BESTINSLOT_API_BASE_URL_TESTNET,
   type BitcoinNetworkModes,
 } from '@shared/constants';
-import type { Money } from '@shared/models/money.model';
 import type { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
 import { getBlockstreamRatelimiter } from './blockstream-rate-limiter';
@@ -142,11 +141,6 @@ interface RunesTickerInfoResponse {
   data: RuneTickerInfo;
 }
 
-export interface RuneToken {
-  balance: Money;
-  tokenData: RuneBalance & RuneTickerInfo;
-}
-
 export interface RunesOutputsByAddress {
   pkscript: string;
   wallet_addr: string;
diff --git a/src/app/query/bitcoin/btc/btc-crypto-asset.hooks.ts b/src/app/query/bitcoin/btc/btc-crypto-asset.hooks.ts
deleted file mode 100644
index 52cc752989d..00000000000
--- a/src/app/query/bitcoin/btc/btc-crypto-asset.hooks.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { BtcCryptoAssetInfo } from '@leather-wallet/models';
-
-import { BTC_DECIMALS } from '@shared/constants';
-import { createMoney } from '@shared/models/money.model';
-
-import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
-import { createAccountCryptoAssetWithDetailsFactory } from '@app/query/models/crypto-asset.model';
-
-import type { BtcAccountCryptoAssetWithDetails } from '../../models/crypto-asset.model';
-import { useBtcCryptoAssetBalanceNativeSegwit } from '../balance/btc-balance-native-segwit.hooks';
-
-const btcCryptoAssetInfo: BtcCryptoAssetInfo = {
-  decimals: BTC_DECIMALS,
-  hasMemo: false,
-  name: 'bitcoin',
-  symbol: 'BTC',
-};
-
-const btcCryptoAssetBalancePlaceholder = {
-  availableBalance: createMoney(0, 'BTC'),
-  protectedBalance: createMoney(0, 'BTC'),
-  uneconomicalBalance: createMoney(0, 'BTC'),
-};
-
-export const btcCryptoAssetPlaceholder =
-  createAccountCryptoAssetWithDetailsFactory<BtcAccountCryptoAssetWithDetails>({
-    balance: btcCryptoAssetBalancePlaceholder,
-    chain: 'bitcoin',
-    info: btcCryptoAssetInfo,
-    marketData: null,
-    type: 'btc',
-  });
-
-export function useBtcAccountCryptoAssetWithDetails(address: string) {
-  const { btcCryptoAssetBalance, isInitialLoading } = useBtcCryptoAssetBalanceNativeSegwit(address);
-  const marketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
-
-  return {
-    asset: createAccountCryptoAssetWithDetailsFactory<BtcAccountCryptoAssetWithDetails>({
-      balance: btcCryptoAssetBalance,
-      chain: 'bitcoin',
-      info: btcCryptoAssetInfo,
-      marketData,
-      type: 'btc',
-    }),
-    isInitialLoading,
-  };
-}
diff --git a/src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts b/src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts
index d0dff8e26b9..ba39c62dd25 100644
--- a/src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts
+++ b/src/app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks.ts
@@ -1,3 +1,4 @@
+import type { Brc20CryptoAssetInfo } from '@leather-wallet/models';
 import BigNumber from 'bignumber.js';
 
 import { createMarketData, createMarketPair } from '@shared/models/market.model';
@@ -6,11 +7,9 @@ import { createMoney } from '@shared/models/money.model';
 import { unitToFractionalUnit } from '@app/common/money/unit-conversion';
 import { useGetBrc20TokensQuery } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 import { useCalculateBitcoinFiatValue } from '@app/query/common/market-data/market-data.hooks';
+import { createCryptoAssetBalance } from '@app/query/common/models';
 import { useConfigOrdinalsbot } from '@app/query/common/remote-config/remote-config.query';
-import {
-  type Brc20AccountCryptoAssetWithDetails,
-  createAccountCryptoAssetWithDetailsFactory,
-} from '@app/query/models/crypto-asset.model';
+import { isFetchedWithSuccess } from '@app/query/query-config';
 import { useAppDispatch } from '@app/store';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
@@ -88,44 +87,44 @@ export function useBrc20Transfers(holderAddress: string) {
   };
 }
 
-export function useBrc20AccountCryptoAssetsWithDetails() {
+function createBrc20CryptoAssetInfo(decimals: number, ticker: string): Brc20CryptoAssetInfo {
+  return {
+    decimals,
+    hasMemo: false,
+    name: 'brc-20',
+    symbol: ticker,
+  };
+}
+
+export function useBrc20Tokens() {
   const calculateBitcoinFiatValue = useCalculateBitcoinFiatValue();
-  const { data: allBrc20TokensResponse } = useGetBrc20TokensQuery();
+  const result = useGetBrc20TokensQuery();
+
+  if (!isFetchedWithSuccess(result)) return [];
 
-  const tokens = allBrc20TokensResponse?.pages
+  const tokens = result.data.pages
     .flatMap(page => page.brc20Tokens)
     .filter(token => token.length > 0)
     .flatMap(token => token);
 
-  return (
-    tokens?.map(token => {
-      const priceAsFiat = calculateBitcoinFiatValue(
-        createMoney(new BigNumber(token.balance.min_listed_unit_price ?? 0), 'BTC')
-      );
-      return createAccountCryptoAssetWithDetailsFactory<Brc20AccountCryptoAssetWithDetails>({
-        balance: {
-          availableBalance: createMoney(
-            unitToFractionalUnit(token.info.decimals)(new BigNumber(token.balance.overall_balance)),
-            token.balance.ticker,
-            token.info.decimals
-          ),
-        },
-        chain: 'bitcoin',
-        holderAddress: token.holderAddress,
-        info: {
-          decimals: token.info.decimals,
-          hasMemo: false,
-          name: 'brc-20',
-          symbol: token.info.ticker,
-        },
-        marketData: token.balance.min_listed_unit_price
-          ? createMarketData(
-              createMarketPair(token.balance.ticker, 'USD'),
-              createMoney(priceAsFiat.amount, 'USD')
-            )
-          : null,
-        type: 'brc-20',
-      });
-    }) ?? []
-  );
+  return tokens.map(token => {
+    const fiatPrice = calculateBitcoinFiatValue(
+      createMoney(new BigNumber(token.balance.min_listed_unit_price ?? 0), 'BTC')
+    );
+    return {
+      balance: createCryptoAssetBalance(
+        createMoney(
+          unitToFractionalUnit(token.info.decimals)(new BigNumber(token.balance.overall_balance)),
+          token.balance.ticker,
+          token.info.decimals
+        )
+      ),
+      info: createBrc20CryptoAssetInfo(token.info.decimals, token.balance.ticker),
+      holderAddress: token.holderAddress,
+      marketData: createMarketData(
+        createMarketPair(token.balance.ticker, 'USD'),
+        createMoney(fiatPrice.amount, 'USD')
+      ),
+    };
+  });
 }
diff --git a/src/app/query/bitcoin/runes/runes-ticker-info.query.ts b/src/app/query/bitcoin/runes/runes-ticker-info.query.ts
index ed9d2804d5e..25096223f0b 100644
--- a/src/app/query/bitcoin/runes/runes-ticker-info.query.ts
+++ b/src/app/query/bitcoin/runes/runes-ticker-info.query.ts
@@ -1,25 +1,31 @@
-import { type UseQueryResult, useQueries } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 
 import { useConfigRunesEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { useBitcoinClient } from '@app/store/common/api-clients.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
-import type { RuneTickerInfo } from '../bitcoin-client';
+import type { RuneBalance, RuneTickerInfo } from '../bitcoin-client';
+import { createRuneCryptoAssetDetails } from './runes.utils';
 
 const queryOptions = { staleTime: 5 * 60 * 1000 };
 
-export function useGetRunesTickerInfoQuery(runeNames: string[]): UseQueryResult<RuneTickerInfo>[] {
+export function useGetRunesTickerInfoQuery(runesBalances: RuneBalance[]) {
   const client = useBitcoinClient();
   const network = useCurrentNetwork();
   const runesEnabled = useConfigRunesEnabled();
 
   return useQueries({
-    queries: runeNames.map(runeName => {
+    queries: runesBalances.map(runeBalance => {
       return {
-        enabled: !!runeName && (network.chain.bitcoin.bitcoinNetwork === 'testnet' || runesEnabled),
-        queryKey: ['runes-ticker-info', runeName],
+        enabled:
+          !runeBalance && (network.chain.bitcoin.bitcoinNetwork === 'testnet' || runesEnabled),
+        queryKey: ['runes-ticker-info', runeBalance.rune_name],
         queryFn: () =>
-          client.bestinSlotApi.getRunesTickerInfo(runeName, network.chain.bitcoin.bitcoinNetwork),
+          client.bestinSlotApi.getRunesTickerInfo(
+            runeBalance.rune_name,
+            network.chain.bitcoin.bitcoinNetwork
+          ),
+        select: (resp: RuneTickerInfo) => createRuneCryptoAssetDetails(runeBalance, resp),
         ...queryOptions,
       };
     }),
diff --git a/src/app/query/bitcoin/runes/runes.hooks.ts b/src/app/query/bitcoin/runes/runes.hooks.ts
index 68ae4966d9e..2a6f88ecff7 100644
--- a/src/app/query/bitcoin/runes/runes.hooks.ts
+++ b/src/app/query/bitcoin/runes/runes.hooks.ts
@@ -1,31 +1,14 @@
-import { createMoney } from '@shared/models/money.model';
+import { useMemo } from 'react';
+
 import { isDefined } from '@shared/utils';
 
 import { useConfigRunesEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
-import type { RuneBalance, RuneTickerInfo, RuneToken } from '../bitcoin-client';
 import { useGetRunesOutputsByAddressQuery } from './runes-outputs-by-address.query';
 import { useGetRunesTickerInfoQuery } from './runes-ticker-info.query';
 import { useGetRunesWalletBalancesByAddressesQuery } from './runes-wallet-balances.query';
 
-const defaultRunesSymbol = '¤';
-
-function makeRuneToken(runeBalance: RuneBalance, tickerInfo: RuneTickerInfo): RuneToken {
-  return {
-    balance: createMoney(
-      Number(runeBalance.total_balance),
-      tickerInfo.rune_name,
-      tickerInfo.decimals
-    ),
-    tokenData: {
-      ...runeBalance,
-      ...tickerInfo,
-      symbol: tickerInfo.symbol ?? defaultRunesSymbol,
-    },
-  };
-}
-
 export function useRunesEnabled() {
   const runesEnabled = useConfigRunesEnabled();
   const network = useCurrentNetwork();
@@ -38,17 +21,16 @@ export function useRuneTokens(addresses: string[]) {
     .flatMap(query => query.data)
     .filter(isDefined);
 
-  const runesTickerInfo = useGetRunesTickerInfoQuery(runesBalances.map(r => r.rune_name))
-    .flatMap(query => query.data)
-    .filter(isDefined);
+  const results = useGetRunesTickerInfoQuery(runesBalances);
 
-  return runesBalances
-    .map(r => {
-      const tickerInfo = runesTickerInfo.find(t => t.rune_name === r.rune_name);
-      if (!tickerInfo) return;
-      return makeRuneToken(r, tickerInfo);
-    })
-    .filter(isDefined);
+  return useMemo(() => {
+    // We can potentially use the 'combine' option in react-query v5 to replace this?
+    // https://tanstack.com/query/latest/docs/framework/react/reference/useQueries#combine
+    const isInitialLoading = results.some(query => query.isInitialLoading);
+    const runes = results.map(query => query.data).filter(isDefined);
+
+    return { isInitialLoading, runes };
+  }, [results]);
 }
 
 export function useRunesOutputsByAddress(address: string) {
diff --git a/src/app/query/bitcoin/runes/runes.utils.ts b/src/app/query/bitcoin/runes/runes.utils.ts
new file mode 100644
index 00000000000..7849c3bd300
--- /dev/null
+++ b/src/app/query/bitcoin/runes/runes.utils.ts
@@ -0,0 +1,29 @@
+import type { RuneCryptoAssetInfo } from '@leather-wallet/models';
+
+import { createMoney } from '@shared/models/money.model';
+
+import { createCryptoAssetBalance } from '@app/query/common/models';
+
+import type { RuneBalance, RuneTickerInfo } from '../bitcoin-client';
+
+const defaultRunesSymbol = '¤';
+
+function createRuneCryptoAssetInfo(tickerInfo: RuneTickerInfo): RuneCryptoAssetInfo {
+  return {
+    decimals: tickerInfo.decimals,
+    hasMemo: false,
+    name: 'rune',
+    runeName: tickerInfo.rune_name,
+    spacedRuneName: tickerInfo.spaced_rune_name,
+    symbol: tickerInfo.symbol ?? defaultRunesSymbol,
+  };
+}
+
+export function createRuneCryptoAssetDetails(runeBalance: RuneBalance, tickerInfo: RuneTickerInfo) {
+  return {
+    balance: createCryptoAssetBalance(
+      createMoney(Number(runeBalance.total_balance), tickerInfo.rune_name, tickerInfo.decimals)
+    ),
+    info: createRuneCryptoAssetInfo(tickerInfo),
+  };
+}
diff --git a/src/app/query/bitcoin/stamps/stamps-by-address.hooks.ts b/src/app/query/bitcoin/stamps/stamps-by-address.hooks.ts
index 1eeb7efca3b..aec9723c0d0 100644
--- a/src/app/query/bitcoin/stamps/stamps-by-address.hooks.ts
+++ b/src/app/query/bitcoin/stamps/stamps-by-address.hooks.ts
@@ -1,17 +1,36 @@
-import { useStampsByAddressQuery } from './stamps-by-address.query';
+import type { Src20CryptoAssetInfo } from '@leather-wallet/models';
+import BigNumber from 'bignumber.js';
+
+import { createMoney } from '@shared/models/money.model';
+
+import { createCryptoAssetBalance } from '@app/query/common/models';
+
+import { type Src20Token, useStampsByAddressQuery } from './stamps-by-address.query';
 
 export function useStampsByAddress(address: string) {
   return useStampsByAddressQuery(address, {
-    select(data) {
-      return data.data?.stamps;
-    },
+    select: resp => resp.data?.stamps,
   });
 }
 
+function createSrc20CryptoAssetInfo(src20: Src20Token): Src20CryptoAssetInfo {
+  return {
+    decimals: 0,
+    hasMemo: false,
+    id: src20.id ?? '',
+    name: 'src-20',
+    symbol: src20.tick,
+  };
+}
+
 export function useSrc20TokensByAddress(address: string) {
   return useStampsByAddressQuery(address, {
-    select(data) {
-      return data.data?.src20;
-    },
+    select: resp =>
+      resp.data.src20.map(token => ({
+        balance: createCryptoAssetBalance(
+          createMoney(new BigNumber(token.amt ?? 0), token.tick, 0)
+        ),
+        info: createSrc20CryptoAssetInfo(token),
+      })),
   });
 }
diff --git a/src/app/query/common/alex-sdk/alex-sdk.hooks.ts b/src/app/query/common/alex-sdk/alex-sdk.hooks.ts
index 6d3b95fcb92..d9c1f3ca3f4 100644
--- a/src/app/query/common/alex-sdk/alex-sdk.hooks.ts
+++ b/src/app/query/common/alex-sdk/alex-sdk.hooks.ts
@@ -12,7 +12,7 @@ import { sortAssetsByName } from '@app/common/asset-utils';
 import { convertAmountToFractionalUnit } from '@app/common/money/calculate-money';
 import { pullContractIdFromIdentity } from '@app/common/utils';
 import { useCurrentStxAvailableUnlockedBalance } from '@app/query/stacks/balance/account-balance.hooks';
-import { useTransferableSip10CryptoAssetsWithDetails } from '@app/query/stacks/sip10/sip10-tokens.hooks';
+import { useTransferableSip10Tokens } from '@app/query/stacks/sip10/sip10-tokens.hooks';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { getAvatarFallback } from '@app/ui/components/avatar/avatar';
 
@@ -38,11 +38,12 @@ export function useAlexCurrencyPriceAsMarketData() {
   const { data: prices } = useAlexSdkLatestPricesQuery();
 
   return useCallback(
-    (principal: string, symbol?: string) => {
+    (principal: string, symbol: string) => {
       const tokenInfo = supportedCurrencies
         .filter(isDefined)
         .find(token => pullContractIdFromIdentity(token.contractAddress) === principal);
-      if (!symbol || !prices || !tokenInfo) return null;
+      if (!prices || !tokenInfo)
+        return createMarketData(createMarketPair(symbol, 'USD'), createMoney(0, 'USD'));
       const currency = tokenInfo.id as Currency;
       const price = convertAmountToFractionalUnit(new BigNumber(prices[currency] ?? 0), 2);
       return createMarketData(createMarketPair(symbol, 'USD'), createMoney(price, 'USD'));
@@ -56,7 +57,7 @@ function useCreateSwapAsset() {
   const { data: prices } = useAlexSdkLatestPricesQuery();
   const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
   const availableUnlockedBalance = useCurrentStxAvailableUnlockedBalance();
-  const assets = useTransferableSip10CryptoAssetsWithDetails(address);
+  const sip10Tokens = useTransferableSip10Tokens(address);
 
   return useCallback(
     (tokenInfo?: TokenInfo): SwapAsset | undefined => {
@@ -68,8 +69,8 @@ function useCreateSwapAsset() {
 
       const currency = tokenInfo.id as Currency;
       const principal = pullContractIdFromIdentity(tokenInfo.contractAddress);
-      const availableBalance = assets.find(a => a.info.contractId === principal)?.balance
-        .availableBalance;
+      const availableBalance = sip10Tokens.find(token => token.info.contractId === principal)
+        ?.balance.availableBalance;
 
       const swapAsset = {
         currency,
@@ -96,7 +97,7 @@ function useCreateSwapAsset() {
           : priceAsMarketData(principal, tokenInfo.name),
       };
     },
-    [assets, availableUnlockedBalance, priceAsMarketData, prices]
+    [availableUnlockedBalance, priceAsMarketData, prices, sip10Tokens]
   );
 }
 
diff --git a/src/app/query/common/models.ts b/src/app/query/common/models.ts
new file mode 100644
index 00000000000..1a0b1224404
--- /dev/null
+++ b/src/app/query/common/models.ts
@@ -0,0 +1,6 @@
+import type { BaseCryptoAssetBalance, Money } from '@leather-wallet/models';
+
+// TODO: Move to models pkg
+export function createCryptoAssetBalance(balance: Money): BaseCryptoAssetBalance {
+  return { availableBalance: balance };
+}
diff --git a/src/app/query/models/crypto-asset.model.ts b/src/app/query/models/crypto-asset.model.ts
deleted file mode 100644
index ac2ecaa1389..00000000000
--- a/src/app/query/models/crypto-asset.model.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type {
-  BaseCryptoAssetInfo,
-  Blockchains,
-  Brc20CryptoAssetInfo,
-  BtcCryptoAssetBalance,
-  BtcCryptoAssetInfo,
-  CryptoAssetBalance,
-  CryptoAssetType,
-  MarketData,
-  Sip10CryptoAssetInfo,
-  StxCryptoAssetBalance,
-  StxCryptoAssetInfo,
-} from '@leather-wallet/models';
-
-interface AccountCryptoAssetDetails {
-  balance: CryptoAssetBalance;
-  chain: Blockchains;
-  info: BaseCryptoAssetInfo;
-  marketData: MarketData | null;
-  type: CryptoAssetType;
-}
-
-export function createAccountCryptoAssetWithDetailsFactory<T extends AccountCryptoAssetDetails>(
-  args: T
-): T {
-  const { balance, chain, info, marketData, type } = args;
-  return {
-    balance,
-    chain,
-    info,
-    marketData,
-    type,
-  } as T;
-}
-
-export interface BtcAccountCryptoAssetWithDetails extends AccountCryptoAssetDetails {
-  balance: BtcCryptoAssetBalance;
-  info: BtcCryptoAssetInfo;
-}
-
-export interface StxAccountCryptoAssetWithDetails extends AccountCryptoAssetDetails {
-  balance: StxCryptoAssetBalance;
-  info: StxCryptoAssetInfo;
-}
-
-export interface Brc20AccountCryptoAssetWithDetails extends AccountCryptoAssetDetails {
-  holderAddress: string;
-  info: Brc20CryptoAssetInfo;
-}
-
-export interface Sip10AccountCryptoAssetWithDetails extends AccountCryptoAssetDetails {
-  info: Sip10CryptoAssetInfo;
-}
-
-export type AccountCryptoAssetWithDetails =
-  | BtcAccountCryptoAssetWithDetails
-  | StxAccountCryptoAssetWithDetails
-  | Brc20AccountCryptoAssetWithDetails
-  | Sip10AccountCryptoAssetWithDetails;
diff --git a/src/app/query/query-config.ts b/src/app/query/query-config.ts
index a5ede1495ab..ec1998617d7 100644
--- a/src/app/query/query-config.ts
+++ b/src/app/query/query-config.ts
@@ -1,4 +1,8 @@
-import { UseQueryOptions } from '@tanstack/react-query';
+import {
+  type QueryObserverSuccessResult,
+  UseQueryOptions,
+  type UseQueryResult,
+} from '@tanstack/react-query';
 
 type AllowedReactQueryConfigOptions = keyof Pick<
   UseQueryOptions,
@@ -9,3 +13,9 @@ export type AppUseQueryConfig<QueryFnData, Response> = Pick<
   UseQueryOptions<QueryFnData, unknown, Response>,
   AllowedReactQueryConfigOptions
 >;
+
+export function isFetchedWithSuccess<TData, TError = unknown>(
+  query: UseQueryResult<TData, TError>
+): query is QueryObserverSuccessResult<TData, TError> {
+  return !query.isError && !query.isLoading && query.data !== undefined;
+}
diff --git a/src/app/query/stacks/sip10/sip10-tokens.hooks.ts b/src/app/query/stacks/sip10/sip10-tokens.hooks.ts
index d50030f12e1..64f21e13b4a 100644
--- a/src/app/query/stacks/sip10/sip10-tokens.hooks.ts
+++ b/src/app/query/stacks/sip10/sip10-tokens.hooks.ts
@@ -1,124 +1,94 @@
 import { useMemo } from 'react';
 
-import type { FtMetadataResponse } from '@hirosystems/token-metadata-api-client';
-import type { Sip10CryptoAssetInfo } from '@leather-wallet/models';
-import BigNumber from 'bignumber.js';
+import type { BaseCryptoAssetBalance, Sip10CryptoAssetInfo } from '@leather-wallet/models';
 
-import { createMoney } from '@shared/models/money.model';
 import { isDefined, isUndefined } from '@shared/utils';
 
-import { getTicker, pullContractIdFromIdentity } from '@app/common/utils';
-import {
-  useAlexCurrencyPriceAsMarketData,
-  useAlexSwappableAssets,
-} from '@app/query/common/alex-sdk/alex-sdk.hooks';
-import {
-  type AccountCryptoAssetWithDetails,
-  type Sip10AccountCryptoAssetWithDetails,
-  createAccountCryptoAssetWithDetailsFactory,
-} from '@app/query/models/crypto-asset.model';
+import { useAlexSwappableAssets } from '@app/query/common/alex-sdk/alex-sdk.hooks';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { getAssetStringParts } from '@app/ui/utils/get-asset-string-parts';
 
 import { useStacksAccountBalanceFungibleTokens } from '../balance/account-balance.hooks';
-import { useStacksAccountFungibleTokenMetadata } from '../token-metadata/fungible-tokens/fungible-token-metadata.hooks';
-import { isFtAsset } from '../token-metadata/token-metadata.utils';
 import {
-  type Sip10CryptoAssetFilter,
-  filterSip10AccountCryptoAssetsWithDetails,
-} from './sip10-tokens.utils';
+  useGetFungibleTokensBalanceMetadataQuery,
+  useGetFungibleTokensMetadataQuery,
+} from '../token-metadata/fungible-tokens/fungible-token-metadata.query';
+import { type Sip10CryptoAssetFilter, filterSip10Tokens } from './sip10-tokens.utils';
 
-export function isTransferableSip10Token(asset: Partial<FtMetadataResponse>) {
-  return !isUndefined(asset.decimals) && !isUndefined(asset.name) && !isUndefined(asset.symbol);
+function useSip10TokensCryptoAssetBalance(address: string) {
+  const { data: tokens = {} } = useStacksAccountBalanceFungibleTokens(address);
+  return useGetFungibleTokensBalanceMetadataQuery(tokens);
 }
 
-export function getSip10InfoFromAsset(asset: AccountCryptoAssetWithDetails) {
-  if ('contractId' in asset.info) return asset.info;
-  return;
+function useSip10TokensCryptoAssetInfo(address: string) {
+  const { data: tokens = {} } = useStacksAccountBalanceFungibleTokens(address);
+  return useGetFungibleTokensMetadataQuery(Object.keys(tokens));
 }
 
-function createSip10CryptoAssetInfo(
-  contractId: string,
-  key: string,
-  token: FtMetadataResponse
-): Sip10CryptoAssetInfo {
-  const { assetName, contractName } = getAssetStringParts(key);
-  const name = token.name ? token.name : assetName;
-
-  return {
-    canTransfer: isTransferableSip10Token(token),
-    contractId,
-    contractName,
-    decimals: token.decimals ?? 0,
-    hasMemo: isTransferableSip10Token(token),
-    imageCanonicalUri: token.image_canonical_uri ?? '',
-    name,
-    symbol: token.symbol ?? getTicker(name),
-  };
+export interface Sip10TokenAssetDetails {
+  balance: BaseCryptoAssetBalance;
+  info: Sip10CryptoAssetInfo;
 }
 
-function useSip10AccountCryptoAssetsWithDetails(address: string) {
-  const { data: tokens = {} } = useStacksAccountBalanceFungibleTokens(address);
-  const tokenMetadata = useStacksAccountFungibleTokenMetadata(tokens);
-  const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
+function useSip10Tokens(address: string): {
+  isInitialLoading: boolean;
+  tokens: Sip10TokenAssetDetails[];
+} {
+  const balancesResults = useSip10TokensCryptoAssetBalance(address);
+  const infoResults = useSip10TokensCryptoAssetInfo(address);
 
-  return useMemo(
-    () =>
-      Object.entries(tokens)
-        .map(([key, value], i) => {
-          const token = tokenMetadata[i].data;
-          if (!(token && isFtAsset(token))) return;
-          const contractId = pullContractIdFromIdentity(key);
+  return useMemo(() => {
+    // We can potentially use the 'combine' option in react-query v5 to replace this?
+    // https://tanstack.com/query/latest/docs/framework/react/reference/useQueries#combine
+    const isInitialLoading =
+      balancesResults.some(query => query.isInitialLoading) ||
+      infoResults.some(query => query.isInitialLoading);
+    const tokenBalances = balancesResults
+      .map(query => query.data)
+      .filter(isDefined)
+      .filter(token => token.balance.availableBalance.amount.isGreaterThan(0));
+    const tokenInfo = infoResults.map(query => query.data).filter(isDefined);
+    const tokens = tokenInfo.map(info => {
+      const tokenBalance = tokenBalances.find(
+        balance => balance.contractId === info.contractId
+      )?.balance;
+      if (isUndefined(tokenBalance)) return;
+      return {
+        balance: tokenBalance,
+        info,
+      };
+    });
 
-          return createAccountCryptoAssetWithDetailsFactory<Sip10AccountCryptoAssetWithDetails>({
-            balance: {
-              availableBalance: createMoney(
-                new BigNumber(value.balance),
-                token.symbol ?? getTicker(token.name ?? ''),
-                token.decimals ?? 0
-              ),
-            },
-            chain: 'stacks',
-            info: createSip10CryptoAssetInfo(contractId, key, token),
-            marketData: priceAsMarketData(contractId, token.symbol),
-            type: 'sip-10',
-          });
-        })
-        .filter(isDefined)
-        .filter(asset => asset.balance.availableBalance.amount.isGreaterThan(0)),
-    [priceAsMarketData, tokenMetadata, tokens]
-  );
+    return {
+      isInitialLoading,
+      tokens: tokens.filter(isDefined),
+    };
+  }, [balancesResults, infoResults]);
 }
 
-export function useSip10CryptoAssetWithDetails(contractId: string) {
+export function useSip10Token(contractId: string) {
   const address = useCurrentStacksAccountAddress();
-  const assets = useSip10AccountCryptoAssetsWithDetails(address);
+  const { tokens = [] } = useSip10Tokens(address);
   return useMemo(
-    () => assets.find(asset => asset.info.contractId === contractId),
-    [assets, contractId]
+    () => tokens.find(token => token.info.contractId === contractId),
+    [contractId, tokens]
   );
 }
 
-interface UseFilteredSip10AccountCryptoAssetsWithDetailsArgs {
+interface UseSip10TokensArgs {
   address: string;
   filter?: Sip10CryptoAssetFilter;
 }
-export function useFilteredSip10AccountCryptoAssetsWithDetails({
-  address,
-  filter = 'all',
-}: UseFilteredSip10AccountCryptoAssetsWithDetailsArgs) {
-  const assets = useSip10AccountCryptoAssetsWithDetails(address);
+export function useFilteredSip10Tokens({ address, filter = 'all' }: UseSip10TokensArgs) {
+  const { isInitialLoading, tokens = [] } = useSip10Tokens(address);
   const { data: swapAssets = [] } = useAlexSwappableAssets();
-
-  return useMemo(
-    () => filterSip10AccountCryptoAssetsWithDetails(assets, swapAssets, filter),
-    [assets, swapAssets, filter]
+  const filteredTokens = useMemo(
+    () => filterSip10Tokens(swapAssets, tokens, filter),
+    [swapAssets, tokens, filter]
   );
+  return { isInitialLoading, tokens: filteredTokens };
 }
 
-export function useTransferableSip10CryptoAssetsWithDetails(
-  address: string
-): Sip10AccountCryptoAssetWithDetails[] {
-  const assets = useSip10AccountCryptoAssetsWithDetails(address);
-  return useMemo(() => assets.filter(asset => asset.info.canTransfer), [assets]);
+export function useTransferableSip10Tokens(address: string) {
+  const { tokens = [] } = useSip10Tokens(address);
+  return useMemo(() => tokens.filter(token => token.info.canTransfer), [tokens]);
 }
diff --git a/src/app/query/stacks/sip10/sip10-tokens.spec.ts b/src/app/query/stacks/sip10/sip10-tokens.spec.ts
index 6e92dd062b2..e62c56ecff6 100644
--- a/src/app/query/stacks/sip10/sip10-tokens.spec.ts
+++ b/src/app/query/stacks/sip10/sip10-tokens.spec.ts
@@ -1,6 +1,6 @@
 import type { FtMetadataResponse } from '@hirosystems/token-metadata-api-client';
 
-import { isTransferableSip10Token } from './sip10-tokens.hooks';
+import { isTransferableSip10Token } from './sip10-tokens.utils';
 
 describe(isTransferableSip10Token.name, () => {
   test('assets with a name, symbol and decimals are allowed to be transferred', () => {
diff --git a/src/app/query/stacks/sip10/sip10-tokens.utils.ts b/src/app/query/stacks/sip10/sip10-tokens.utils.ts
index 015f5154f60..96058a1fb18 100644
--- a/src/app/query/stacks/sip10/sip10-tokens.utils.ts
+++ b/src/app/query/stacks/sip10/sip10-tokens.utils.ts
@@ -1,22 +1,53 @@
+import type { FtMetadataResponse } from '@hirosystems/token-metadata-api-client';
+import type { CryptoAssetBalance, Sip10CryptoAssetInfo } from '@leather-wallet/models';
+
+import { isUndefined } from '@shared/utils';
+
+import { getTicker } from '@app/common/utils';
 import type { SwapAsset } from '@app/query/common/alex-sdk/alex-sdk.hooks';
-import type { Sip10AccountCryptoAssetWithDetails } from '@app/query/models/crypto-asset.model';
 import { getAssetStringParts } from '@app/ui/utils/get-asset-string-parts';
 
+export function isTransferableSip10Token(token: Partial<FtMetadataResponse>) {
+  return !isUndefined(token.decimals) && !isUndefined(token.name) && !isUndefined(token.symbol);
+}
+
+export function createSip10CryptoAssetInfo(
+  contractId: string,
+  key: string,
+  ftAsset: FtMetadataResponse
+): Sip10CryptoAssetInfo {
+  const { assetName, contractName } = getAssetStringParts(key);
+  const name = ftAsset.name ? ftAsset.name : assetName;
+
+  return {
+    canTransfer: isTransferableSip10Token(ftAsset),
+    contractId,
+    contractName,
+    decimals: ftAsset.decimals ?? 0,
+    hasMemo: isTransferableSip10Token(ftAsset),
+    imageCanonicalUri: ftAsset.image_canonical_uri ?? '',
+    name,
+    symbol: ftAsset.symbol ?? getTicker(name),
+  };
+}
+
 export type Sip10CryptoAssetFilter = 'all' | 'supported' | 'unsupported';
 
-export function filterSip10AccountCryptoAssetsWithDetails(
-  assets: Sip10AccountCryptoAssetWithDetails[],
+export function filterSip10Tokens(
   swapAssets: SwapAsset[],
+  tokens: {
+    balance: CryptoAssetBalance;
+    info: Sip10CryptoAssetInfo;
+  }[],
   filter: Sip10CryptoAssetFilter
 ) {
-  return assets.filter(asset => {
-    const { address: contractAddress } = getAssetStringParts(asset.info.contractId);
+  return tokens.filter(token => {
     if (filter === 'supported') {
-      return swapAssets.some(swapAsset => swapAsset.principal.includes(contractAddress));
+      return swapAssets.some(swapAsset => swapAsset.principal === token.info.contractId);
     }
     if (filter === 'unsupported') {
-      return !swapAssets.some(swapAsset => swapAsset.principal.includes(contractAddress));
+      return !swapAssets.some(swapAsset => swapAsset.principal === token.info.contractId);
     }
-    return assets;
+    return true;
   });
 }
diff --git a/src/app/query/stacks/stacks-client.ts b/src/app/query/stacks/stacks-client.ts
index a06231c957f..802a6d2ce3f 100644
--- a/src/app/query/stacks/stacks-client.ts
+++ b/src/app/query/stacks/stacks-client.ts
@@ -18,7 +18,6 @@ import {
 import axios from 'axios';
 
 import { STX20_API_BASE_URL_MAINNET } from '@shared/constants';
-import type { Money } from '@shared/models/money.model';
 
 export interface Stx20Balance {
   ticker: string;
@@ -31,12 +30,6 @@ interface Stx20BalanceResponse {
   balances: Stx20Balance[];
 }
 
-export interface Stx20Token {
-  balance: Money;
-  marketData: null;
-  tokenData: Stx20Balance;
-}
-
 class Stx20Api {
   url = STX20_API_BASE_URL_MAINNET;
 
diff --git a/src/app/query/stacks/stx/stx-crypto-asset.hooks.ts b/src/app/query/stacks/stx/stx-crypto-asset.hooks.ts
deleted file mode 100644
index 6c89c853988..00000000000
--- a/src/app/query/stacks/stx/stx-crypto-asset.hooks.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { StxCryptoAssetInfo } from '@leather-wallet/models';
-
-import { STX_DECIMALS } from '@shared/constants';
-import { createMoney } from '@shared/models/money.model';
-import { isUndefined } from '@shared/utils';
-
-import { useCryptoCurrencyMarketDataMeanAverage } from '@app/query/common/market-data/market-data.hooks';
-import {
-  type StxAccountCryptoAssetWithDetails,
-  createAccountCryptoAssetWithDetailsFactory,
-} from '@app/query/models/crypto-asset.model';
-
-import { useStxCryptoAssetBalance } from '../balance/account-balance.hooks';
-
-const stxCryptoAssetInfo: StxCryptoAssetInfo = {
-  decimals: STX_DECIMALS,
-  hasMemo: true,
-  name: 'stacks',
-  symbol: 'STX',
-};
-
-const stxCryptoAssetBalancePlaceholder = {
-  availableBalance: createMoney(0, 'STX'),
-  availableUnlockedBalance: createMoney(0, 'STX'),
-  inboundBalance: createMoney(0, 'STX'),
-  lockedBalance: createMoney(0, 'STX'),
-  outboundBalance: createMoney(0, 'STX'),
-  pendingBalance: createMoney(0, 'STX'),
-  totalBalance: createMoney(0, 'STX'),
-  unlockedBalance: createMoney(0, 'STX'),
-};
-
-export const stxCryptoAssetPlaceholder =
-  createAccountCryptoAssetWithDetailsFactory<StxAccountCryptoAssetWithDetails>({
-    balance: stxCryptoAssetBalancePlaceholder,
-    chain: 'stacks',
-    info: stxCryptoAssetInfo,
-    marketData: null,
-    type: 'stx',
-  });
-
-export function useStxAccountCryptoAssetWithDetails(address: string) {
-  const { data: balance, isInitialLoading } = useStxCryptoAssetBalance(address);
-  const marketData = useCryptoCurrencyMarketDataMeanAverage('STX');
-
-  if (isUndefined(balance)) return { asset: stxCryptoAssetPlaceholder, isInitialLoading };
-
-  return {
-    asset: createAccountCryptoAssetWithDetailsFactory<StxAccountCryptoAssetWithDetails>({
-      balance,
-      chain: 'stacks',
-      info: stxCryptoAssetInfo,
-      marketData,
-      type: 'stx',
-    }),
-    isInitialLoading,
-  };
-}
diff --git a/src/app/query/stacks/stx20/stx20-tokens.hooks.ts b/src/app/query/stacks/stx20/stx20-tokens.hooks.ts
index ce3231a5b8b..7f054caabb5 100644
--- a/src/app/query/stacks/stx20/stx20-tokens.hooks.ts
+++ b/src/app/query/stacks/stx20/stx20-tokens.hooks.ts
@@ -1,20 +1,28 @@
+import type { Stx20CryptoAssetInfo } from '@leather-wallet/models';
 import BigNumber from 'bignumber.js';
 
 import { createMoney } from '@shared/models/money.model';
 
-import type { Stx20Balance, Stx20Token } from '../stacks-client';
+import { createCryptoAssetBalance } from '@app/query/common/models';
+
+import type { Stx20Balance } from '../stacks-client';
 import { useStx20BalancesQuery } from './stx20-tokens.query';
 
-function createStx20Token(token: Stx20Balance): Stx20Token {
+function createStx20CryptoAssetInfo(stx20Balance: Stx20Balance): Stx20CryptoAssetInfo {
   return {
-    balance: createMoney(new BigNumber(token.balance), token.ticker, 0),
-    marketData: null,
-    tokenData: token,
+    name: 'stx-20',
+    symbol: stx20Balance.ticker,
   };
 }
 
 export function useStx20Tokens(address: string) {
   return useStx20BalancesQuery(address, {
-    select: resp => resp.map(balance => createStx20Token(balance)),
+    select: resp =>
+      resp.map(stx20Balance => ({
+        balance: createCryptoAssetBalance(
+          createMoney(new BigNumber(stx20Balance.balance), stx20Balance.ticker, 0)
+        ),
+        info: createStx20CryptoAssetInfo(stx20Balance),
+      })),
   });
 }
diff --git a/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.hooks.ts b/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.hooks.ts
deleted file mode 100644
index ee8966d866c..00000000000
--- a/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.hooks.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { AddressBalanceResponse } from '@shared/models/account.model';
-
-import { pullContractIdFromIdentity } from '@app/common/utils';
-
-import { useGetFungibleTokenMetadataListQuery } from './fungible-token-metadata.query';
-
-export function useStacksAccountFungibleTokenMetadata(
-  tokens: AddressBalanceResponse['fungible_tokens']
-) {
-  const tokenContractIds = Object.keys(tokens).map(key => pullContractIdFromIdentity(key));
-  return useGetFungibleTokenMetadataListQuery(tokenContractIds);
-}
diff --git a/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.query.ts b/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.query.ts
index 8bdaa6e8b7a..eaa4855f5d4 100644
--- a/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.query.ts
+++ b/src/app/query/stacks/token-metadata/fungible-tokens/fungible-token-metadata.query.ts
@@ -1,12 +1,19 @@
-import { UseQueryResult, useQueries, useQuery } from '@tanstack/react-query';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import BigNumber from 'bignumber.js';
 import PQueue from 'p-queue';
 
+import type { AddressBalanceResponse } from '@shared/models/account.model';
+import { createMoney } from '@shared/models/money.model';
+
+import { getTicker, pullContractIdFromIdentity } from '@app/common/utils';
+import { createCryptoAssetBalance } from '@app/query/common/models';
 import { useStacksClient } from '@app/store/common/api-clients.hooks';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
 import { useHiroApiRateLimiter } from '../../hiro-rate-limiter';
+import { createSip10CryptoAssetInfo } from '../../sip10/sip10-tokens.utils';
 import type { StacksClient } from '../../stacks-client';
-import { FtAssetResponse } from '../token-metadata.utils';
+import { FtAssetResponse, isFtAsset } from '../token-metadata.utils';
 
 const staleTime = 12 * 60 * 60 * 1000;
 
@@ -25,13 +32,11 @@ function fetchFungibleTokenMetadata(client: StacksClient, limiter: PQueue) {
   return (principal: string) => async () => {
     return limiter.add(() => client.tokensApi.getFtMetadata(principal), {
       throwOnTimeout: true,
-    });
+    }) as unknown as FtAssetResponse;
   };
 }
 
-export function useGetFungibleTokenMetadataQuery(
-  principal: string
-): UseQueryResult<FtAssetResponse> {
+export function useGetFungibleTokenMetadataQuery(principal: string) {
   const client = useStacksClient();
   const network = useCurrentNetworkState();
   const limiter = useHiroApiRateLimiter();
@@ -43,18 +48,54 @@ export function useGetFungibleTokenMetadataQuery(
   });
 }
 
-export function useGetFungibleTokenMetadataListQuery(
-  principals: string[]
-): UseQueryResult<FtAssetResponse>[] {
+export function useGetFungibleTokensBalanceMetadataQuery(
+  ftBalances: AddressBalanceResponse['fungible_tokens']
+) {
+  const client = useStacksClient();
+  const network = useCurrentNetworkState();
+  const limiter = useHiroApiRateLimiter();
+
+  return useQueries({
+    queries: Object.entries(ftBalances).map(([key, value]) => {
+      const contractId = pullContractIdFromIdentity(key);
+      return {
+        enabled: !!contractId,
+        queryKey: ['get-ft-metadata', contractId, network.chain.stacks.url],
+        queryFn: fetchFungibleTokenMetadata(client, limiter)(contractId),
+        select: (resp: FtAssetResponse) => {
+          if (!(resp && isFtAsset(resp))) return;
+          const symbol = resp.symbol ?? getTicker(resp.name ?? '');
+          return {
+            contractId,
+            balance: createCryptoAssetBalance(
+              createMoney(new BigNumber(value.balance), symbol, resp.decimals ?? 0)
+            ),
+          };
+        },
+        ...queryOptions,
+      };
+    }),
+  });
+}
+
+export function useGetFungibleTokensMetadataQuery(keys: string[]) {
   const client = useStacksClient();
   const network = useCurrentNetworkState();
   const limiter = useHiroApiRateLimiter();
 
   return useQueries({
-    queries: principals.map(principal => ({
-      queryKey: ['get-ft-metadata', principal, network.chain.stacks.url],
-      queryFn: fetchFungibleTokenMetadata(client, limiter)(principal),
-      ...queryOptions,
-    })),
+    queries: keys.map(key => {
+      const contractId = pullContractIdFromIdentity(key);
+      return {
+        enabled: !!contractId,
+        queryKey: ['get-ft-metadata', contractId, network.chain.stacks.url],
+        queryFn: fetchFungibleTokenMetadata(client, limiter)(contractId),
+        select: (resp: FtAssetResponse) => {
+          if (!(resp && isFtAsset(resp))) return;
+          return createSip10CryptoAssetInfo(contractId, key, resp);
+        },
+        ...queryOptions,
+      };
+    }),
   });
 }
diff --git a/src/app/store/transactions/token-transfer.hooks.ts b/src/app/store/transactions/token-transfer.hooks.ts
index e60c6138d6b..9eff1ed34c6 100644
--- a/src/app/store/transactions/token-transfer.hooks.ts
+++ b/src/app/store/transactions/token-transfer.hooks.ts
@@ -79,7 +79,7 @@ export function useStxTokenTransferUnsignedTxState(values?: StacksSendFormValues
   return tx.result;
 }
 
-export function useGenerateFtTokenTransferUnsignedTx(assetInfo: Sip10CryptoAssetInfo) {
+export function useGenerateFtTokenTransferUnsignedTx(info: Sip10CryptoAssetInfo) {
   const { data: nextNonce } = useNextNonce();
   const account = useCurrentStacksAccount();
   const network = useCurrentStacksNetworkState();
@@ -99,12 +99,12 @@ export function useGenerateFtTokenTransferUnsignedTx(assetInfo: Sip10CryptoAsset
           ? someCV(bufferCVFromString(values.memo || ''))
           : noneCV();
 
-      const amountAsFractionalUnit = ftUnshiftDecimals(amount, assetInfo.decimals || 0);
+      const amountAsFractionalUnit = ftUnshiftDecimals(amount, info.decimals || 0);
       const {
         address: contractAddress,
         contractName,
         assetName,
-      } = getAssetStringParts(assetInfo.contractId);
+      } = getAssetStringParts(info.contractId);
 
       const postConditionOptions = {
         amount: amountAsFractionalUnit,
@@ -123,7 +123,7 @@ export function useGenerateFtTokenTransferUnsignedTx(assetInfo: Sip10CryptoAsset
         standardPrincipalCVFromAddress(recipient),
       ];
 
-      if (assetInfo.hasMemo) {
+      if (info.hasMemo) {
         functionArgs.push(memo);
       }
 
@@ -146,20 +146,13 @@ export function useGenerateFtTokenTransferUnsignedTx(assetInfo: Sip10CryptoAsset
 
       return generateUnsignedTransaction(options);
     },
-    [
-      account,
-      assetInfo.contractId,
-      assetInfo.decimals,
-      assetInfo.hasMemo,
-      network,
-      nextNonce?.nonce,
-    ]
+    [account, info.contractId, info.decimals, info.hasMemo, network, nextNonce?.nonce]
   );
 }
 
-export function useFtTokenTransferUnsignedTx(assetInfo: Sip10CryptoAssetInfo) {
+export function useFtTokenTransferUnsignedTx(info: Sip10CryptoAssetInfo) {
   const account = useCurrentStacksAccount();
-  const generateTx = useGenerateFtTokenTransferUnsignedTx(assetInfo);
+  const generateTx = useGenerateFtTokenTransferUnsignedTx(info);
 
   const tx = useAsync(async () => generateTx(), [account]);
   return tx.result;
diff --git a/src/app/ui/components/bullet-separator/bullet-separator.tsx b/src/app/ui/components/bullet-separator/bullet-separator.tsx
index a403ed1e79e..87e214737ea 100644
--- a/src/app/ui/components/bullet-separator/bullet-separator.tsx
+++ b/src/app/ui/components/bullet-separator/bullet-separator.tsx
@@ -2,7 +2,7 @@ import { cloneElement, isValidElement } from 'react';
 
 import { Circle, CircleProps } from 'leather-styles/jsx';
 
-export function BulletOperator(props: CircleProps) {
+function BulletOperator(props: CircleProps) {
   return (
     <Circle
       display="inline-block"
diff --git a/src/app/ui/pressable/pressable.stories.tsx b/src/app/ui/pressable/pressable.stories.tsx
index c9381210117..5648364486c 100644
--- a/src/app/ui/pressable/pressable.stories.tsx
+++ b/src/app/ui/pressable/pressable.stories.tsx
@@ -22,7 +22,7 @@ const meta: Meta<typeof Component> = {
 export default meta;
 type Story = StoryObj<typeof Component>;
 
-function ExampleInteractiveItemContent() {
+function ExamplePressableContent() {
   return (
     <ItemLayout
       showChevron
@@ -40,13 +40,13 @@ export const Pressable: Story = {
     docs: {
       description: {
         story:
-          '`InteractiveItem` has its hover state applied with a before pseudo element, so the content aligns independently from its hover state background.',
+          '`Pressable` has its hover state applied with a before pseudo element, so the content aligns independently from its hover state background.',
       },
     },
   },
   args: {
     onClick: () => {},
-    children: <ExampleInteractiveItemContent />,
+    children: <ExamplePressableContent />,
   },
 };
 
@@ -105,7 +105,7 @@ export const AlignmentExample: Story = {
   ],
   args: {
     onClick: () => {},
-    children: <ExampleInteractiveItemContent />,
+    children: <ExamplePressableContent />,
   },
 };
 
@@ -127,6 +127,6 @@ export const WithPadding: Story = {
   ],
   args: {
     onClick: () => {},
-    children: <ExampleInteractiveItemContent />,
+    children: <ExamplePressableContent />,
   },
 };
diff --git a/tests/page-object-models/home.page.ts b/tests/page-object-models/home.page.ts
index 8854dac5bc7..587d29a556d 100644
--- a/tests/page-object-models/home.page.ts
+++ b/tests/page-object-models/home.page.ts
@@ -96,7 +96,7 @@ export class HomePage {
     return displayerAddress.replaceAll('\n', '');
   }
 
-  async selectTestNet() {
+  async selectTestnet() {
     await this.page.getByTestId(SettingsSelectors.SettingsMenuBtn).click();
     await this.page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
     await this.page
diff --git a/tests/specs/send/send-btc.spec.ts b/tests/specs/send/send-btc.spec.ts
index 4e40a7371b4..b40a4b91631 100644
--- a/tests/specs/send/send-btc.spec.ts
+++ b/tests/specs/send/send-btc.spec.ts
@@ -12,7 +12,7 @@ test.describe('send btc', () => {
   test.beforeEach(async ({ extensionId, globalPage, homePage, onboardingPage, sendPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
     await onboardingPage.signInWithTestAccount(extensionId);
-    await homePage.selectTestNet();
+    await homePage.selectTestnet();
     await homePage.sendButton.click();
     await sendPage.selectBtcAndGoToSendForm();
     await sendPage.waitForSendPageReady();
@@ -29,6 +29,7 @@ test.describe('send btc', () => {
       const details = await sendPage.confirmationDetails.allInnerTexts();
       test.expect(details).toBeTruthy();
     });
+
     test('that recipient input is trimmed correctly', async ({ sendPage }) => {
       await sendPage.amountInput.fill('0.00006');
       await sendPage.recipientInput.fill(' ' + TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS + ' ');
diff --git a/tests/specs/send/send-stx.spec.ts b/tests/specs/send/send-stx.spec.ts
index 4a019d31904..df68f306bad 100644
--- a/tests/specs/send/send-stx.spec.ts
+++ b/tests/specs/send/send-stx.spec.ts
@@ -18,7 +18,7 @@ test.describe('send stx: tests on testnet', () => {
   test.beforeEach(async ({ extensionId, globalPage, homePage, onboardingPage, sendPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
     await onboardingPage.signInWithTestAccount(extensionId);
-    await homePage.selectTestNet();
+    await homePage.selectTestnet();
     await homePage.sendButton.click();
     await sendPage.selectStxAndGoToSendForm();
   });

From 0c6c4d17f2dc12ac1c84a644f9a2586e3f44dded Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Tue, 21 May 2024 18:09:22 +0400
Subject: [PATCH 09/16] fix: regtest address generation, closes #5401

---
 .../features/add-network/add-network-form.tsx | 107 +++++++++++-------
 .../features/add-network/use-add-network.tsx  |  11 +-
 src/app/ui/components/select/select.tsx       |   7 +-
 3 files changed, 79 insertions(+), 46 deletions(-)

diff --git a/src/app/features/add-network/add-network-form.tsx b/src/app/features/add-network/add-network-form.tsx
index 88c9066961e..350ff8fd540 100644
--- a/src/app/features/add-network/add-network-form.tsx
+++ b/src/app/features/add-network/add-network-form.tsx
@@ -1,20 +1,44 @@
 import { useCallback, useEffect } from 'react';
 
-import { SelectContent, SelectItem, SelectRoot, SelectTrigger } from '@radix-ui/themes';
 import { NetworkSelectors } from '@tests/selectors/network.selectors';
 import { useFormikContext } from 'formik';
-import { css } from 'leather-styles/css';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import type { BitcoinNetworkModes } from '@shared/constants';
 
 import { Input } from '@app/ui/components/input/input';
+import { Select } from '@app/ui/components/select/select';
+import { SelectItemLayout } from '@app/ui/components/select/select-item.layout';
 import { Title } from '@app/ui/components/typography/title';
+import { CheckmarkIcon, ChevronDownIcon } from '@app/ui/icons';
+
+import { type AddNetworkFormValues } from './use-add-network';
 
-import { type AddNetworkFormValues, useAddNetwork } from './use-add-network';
+const networks: {
+  label: string;
+  value: BitcoinNetworkModes;
+}[] = [
+  {
+    label: 'Mainnet',
+    value: 'mainnet',
+  },
+  {
+    label: 'Testnet',
+    value: 'testnet',
+  },
+  {
+    label: 'Signet',
+    value: 'signet',
+  },
+  {
+    label: 'Regtest',
+    value: 'regtest',
+  },
+];
 
 export function AddNetworkForm() {
   const { handleChange, setFieldValue, values } = useFormikContext<AddNetworkFormValues>();
 
-  const { bitcoinApi, handleApiChange } = useAddNetwork();
-
   const setStacksUrl = useCallback(
     (value: string) => {
       void setFieldValue('stacksUrl', value);
@@ -30,7 +54,7 @@ export function AddNetworkForm() {
   );
 
   useEffect(() => {
-    switch (bitcoinApi) {
+    switch (values.bitcoinNetwork) {
       case 'mainnet':
         setStacksUrl('https://api.hiro.so');
         setBitcoinUrl('https://blockstream.info/api');
@@ -48,7 +72,7 @@ export function AddNetworkForm() {
         setBitcoinUrl('https://mempool.space/testnet/api');
         break;
     }
-  }, [bitcoinApi, setStacksUrl, setBitcoinUrl]);
+  }, [setStacksUrl, setBitcoinUrl, values.bitcoinNetwork]);
 
   return (
     <>
@@ -64,38 +88,43 @@ export function AddNetworkForm() {
         />
       </Input.Root>
       <Title>Bitcoin API</Title>
-      {/* TODO: Replace with new Select */}
-      <SelectRoot onValueChange={handleApiChange} defaultValue="mainnet">
-        <SelectTrigger
-          className={css({
-            backgroundColor: 'ink.background-primary',
-            borderRadius: 'sm',
-            border: '1px solid ink.border-primary',
-          })}
-        ></SelectTrigger>
-        <SelectContent
-          className={css({
-            backgroundColor: 'ink.background-primary',
-            borderRadius: 'sm',
-            border: '1px solid ink.border-primary',
-            dropShadow: 'lg',
-            height: 'fit-content',
-          })}
-        >
-          <SelectItem key="mainnet" value="mainnet">
-            Mainnet
-          </SelectItem>
-          <SelectItem key="testnet" value="testnet">
-            Testnet
-          </SelectItem>
-          <SelectItem key="signet" value="signet">
-            Signet
-          </SelectItem>
-          <SelectItem key="regtest" value="regtest">
-            Regtest
-          </SelectItem>
-        </SelectContent>
-      </SelectRoot>
+
+      <Select.Root
+        defaultValue={networks[0].value}
+        onValueChange={value => {
+          void setFieldValue('bitcoinApi', value);
+        }}
+      >
+        <Select.Trigger>
+          <Select.Value />
+          <Select.Icon>
+            <ChevronDownIcon variant="small" />
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content align="start" position="popper" sideOffset={8}>
+            <Select.Viewport>
+              {networks.map(item => (
+                <Select.Item key={item.label} value={item.value}>
+                  <SelectItemLayout
+                    contentLeft={
+                      <HStack display="flex" gap="space.02" width="100%">
+                        <Select.ItemText>
+                          <styled.span textStyle="label.02">{item.label}</styled.span>
+                        </Select.ItemText>
+                        <Select.ItemIndicator>
+                          <CheckmarkIcon variant="small" />
+                        </Select.ItemIndicator>
+                      </HStack>
+                    }
+                  />
+                </Select.Item>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+
       <Title>Stacks API URL</Title>
       <Input.Root>
         <Input.Label>Name</Input.Label>
diff --git a/src/app/features/add-network/use-add-network.tsx b/src/app/features/add-network/use-add-network.tsx
index 52b62371df9..e1c8c7d445b 100644
--- a/src/app/features/add-network/use-add-network.tsx
+++ b/src/app/features/add-network/use-add-network.tsx
@@ -27,6 +27,7 @@ export interface AddNetworkFormValues {
   name: string;
   stacksUrl: string;
   bitcoinUrl: string;
+  bitcoinNetwork: BitcoinNetworkModes;
 }
 
 const initialFormValues: AddNetworkFormValues = {
@@ -34,10 +35,10 @@ const initialFormValues: AddNetworkFormValues = {
   name: '',
   stacksUrl: '',
   bitcoinUrl: '',
+  bitcoinNetwork: 'mainnet',
 };
 
 export function useAddNetwork() {
-  const [bitcoinApi, setBitcoinApi] = useState<BitcoinNetworkModes>('mainnet');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const navigate = useNavigate();
@@ -45,13 +46,11 @@ export function useAddNetwork() {
   const networksActions = useNetworksActions();
 
   return {
-    bitcoinApi,
-    handleApiChange: (value: BitcoinNetworkModes) => setBitcoinApi(value),
     error,
     initialFormValues,
     loading,
     onSubmit: async (values: AddNetworkFormValues) => {
-      const { name, stacksUrl, bitcoinUrl, key } = values;
+      const { name, stacksUrl, bitcoinUrl, key, bitcoinNetwork } = values;
 
       if (!name) {
         setError('Enter a name');
@@ -123,7 +122,7 @@ export function useAddNetwork() {
           chainId: parentChainId, // Used for differentiating control flow in the wallet
           subnetChainId: chainId, // Used for signing transactions (via the network object, not to be confused with the NetworkConfigurations)
           url: stacksPath,
-          bitcoinNetwork: bitcoinApi,
+          bitcoinNetwork,
           bitcoinUrl: bitcoinPath,
         });
         navigate(RouteUrls.Home);
@@ -133,7 +132,7 @@ export function useAddNetwork() {
           name: name,
           chainId: chainId,
           url: stacksPath,
-          bitcoinNetwork: bitcoinApi,
+          bitcoinNetwork,
           bitcoinUrl: bitcoinPath,
         });
         navigate(RouteUrls.Home);
diff --git a/src/app/ui/components/select/select.tsx b/src/app/ui/components/select/select.tsx
index 28671f15d1d..f2dd4297482 100644
--- a/src/app/ui/components/select/select.tsx
+++ b/src/app/ui/components/select/select.tsx
@@ -2,6 +2,7 @@ import { ReactNode, forwardRef } from 'react';
 
 import * as RadixSelect from '@radix-ui/react-select';
 import { css } from 'leather-styles/css';
+import { styled } from 'leather-styles/jsx';
 
 import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
 
@@ -73,8 +74,12 @@ const Label: typeof RadixSelect.Label = forwardRef((props, ref) => (
   <RadixSelect.Label className={selectLabelStyles} ref={ref} {...props} />
 ));
 
+const selectItemStyles = css({ p: 'space.03' });
+
 const Item: typeof RadixSelect.Item = forwardRef((props, ref) => (
-  <RadixSelect.Item className={css(pressableBaseStyles, pressableStyles)} ref={ref} {...props} />
+  <styled.div className={selectItemStyles}>
+    <RadixSelect.Item className={css(pressableBaseStyles, pressableStyles)} ref={ref} {...props} />
+  </styled.div>
 ));
 
 const selectSeparatorStyles = css({

From d5ddd6e60395aae0ed9feeff7325b799f8c258db Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Wed, 22 May 2024 09:18:55 +0200
Subject: [PATCH 10/16] test: add fee mocks

---
 package.json                                 |  2 +-
 src/app/query/stacks/fees/fee.query.mocks.ts | 33 ++++++++++++++++++++
 tests/mocks/mock-apis.ts                     |  7 +++--
 tests/page-object-models/global.page.ts      |  8 -----
 tests/specs/send/send-stx.spec.ts            |  1 +
 5 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 src/app/query/stacks/fees/fee.query.mocks.ts

diff --git a/package.json b/package.json
index dfb58cb1641..069689cfa6f 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "lint:prettier": "prettier --check \"{src,tests}/**/*.{ts,tsx}\" \"*.{js,json}\"",
     "lint:prettier:fix": "prettier --write \"{src,tests}/**/*.{ts,tsx}\" *.js",
-    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=icons --ignoreFiles=leather-styles --ignoreFiles=tests --excludePathsFromReport=.*stories",
+    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=icons --ignoreFiles=leather-styles --ignoreFiles=mocks --ignoreFiles=tests --excludePathsFromReport=.*stories",
     "lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json",
     "lint:deps": "dependency-cruise  --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"",
     "prod:ext": "pnpm build",
diff --git a/src/app/query/stacks/fees/fee.query.mocks.ts b/src/app/query/stacks/fees/fee.query.mocks.ts
new file mode 100644
index 00000000000..bf6dc7d99a9
--- /dev/null
+++ b/src/app/query/stacks/fees/fee.query.mocks.ts
@@ -0,0 +1,33 @@
+import type { Page } from '@playwright/test';
+
+export async function mockStacksFeeRequests(page: Page) {
+  await page.route('*/**/v2/fees/transaction', route =>
+    route.fulfill({
+      json: {
+        estimated_cost: {
+          write_length: 0,
+          write_count: 0,
+          read_length: 0,
+          read_count: 0,
+          runtime: 0,
+        },
+        estimated_cost_scalar: 6,
+        estimations: [
+          {
+            fee_rate: 35.99908181950457,
+            fee: 215,
+          },
+          {
+            fee_rate: 382.0532104229179,
+            fee: 2292,
+          },
+          {
+            fee_rate: 65987.51710815083,
+            fee: 395925,
+          },
+        ],
+        cost_scalar_change_by_byte: 0.00476837158203125,
+      },
+    })
+  );
+}
diff --git a/tests/mocks/mock-apis.ts b/tests/mocks/mock-apis.ts
index 71104118a75..5682b8d397d 100644
--- a/tests/mocks/mock-apis.ts
+++ b/tests/mocks/mock-apis.ts
@@ -1,7 +1,10 @@
 import { Page } from '@playwright/test';
 import { json } from '@tests/utils';
 
-export const setupMockApis = async (page: Page) => {
+import { mockStacksFeeRequests } from '@app/query/stacks/fees/fee.query.mocks';
+
+export async function setupMockApis(page: Page) {
   await page.route(/chrome-extension/, route => route.continue());
   await page.route(/github/, route => route.fulfill(json({})));
-};
+  await mockStacksFeeRequests(page);
+}
diff --git a/tests/page-object-models/global.page.ts b/tests/page-object-models/global.page.ts
index 0dbdc1a4675..e519f018bd4 100644
--- a/tests/page-object-models/global.page.ts
+++ b/tests/page-object-models/global.page.ts
@@ -17,14 +17,6 @@ export class GlobalPage {
     await setupMockApis(this.page);
     await this.page.waitForTimeout(600);
     await this.gotoNakedRoot(extensionId);
-    // I've no idea why this delay is needed. Was required when switching to MV3. Without it,
-    // this error is thrown. Let's try removing with later versions of Playwright.
-    //
-    // Error: page.goto: Navigation failed because page was closed!
-    // =========================== logs ===========================
-    // navigating to "chrome-extension://bcokkkbghbnpbjpkoifjakaofdjfgeaj/index.html", waiting until "load"
-    // ============================================================
-    // await this.page.goto(`chrome-extension://${extensionId}/index.html`);
   }
 
   async setupAndUseMockedApiCalls(extensionId: string) {
diff --git a/tests/specs/send/send-stx.spec.ts b/tests/specs/send/send-stx.spec.ts
index df68f306bad..0a63ac834a9 100644
--- a/tests/specs/send/send-stx.spec.ts
+++ b/tests/specs/send/send-stx.spec.ts
@@ -17,6 +17,7 @@ const amount = '0.000001';
 test.describe('send stx: tests on testnet', () => {
   test.beforeEach(async ({ extensionId, globalPage, homePage, onboardingPage, sendPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
+
     await onboardingPage.signInWithTestAccount(extensionId);
     await homePage.selectTestnet();
     await homePage.sendButton.click();

From 378eebb58741fa036440ced439d81a599dab5175 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Wed, 22 May 2024 12:03:13 +0200
Subject: [PATCH 11/16] test: mock network switching, closes
 leather-wallet/issues#59

---
 src/app/features/settings/network/network.tsx | 1 +
 tests/mocks/mock-apis.ts                      | 2 ++
 tests/page-object-models/home.page.ts         | 5 +----
 tests/page-object-models/onboarding.page.ts   | 4 +++-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx
index 97a99fd7670..ed48f2409bc 100644
--- a/src/app/features/settings/network/network.tsx
+++ b/src/app/features/settings/network/network.tsx
@@ -26,6 +26,7 @@ export function NetworkDialog({ onClose }: NetworkDialogProps) {
   const analytics = useAnalytics();
   const networksActions = useNetworksActions();
   const currentNetwork = useCurrentNetworkState();
+
   function addNetwork() {
     void analytics.track('add_network');
     navigate(RouteUrls.AddNetwork);
diff --git a/tests/mocks/mock-apis.ts b/tests/mocks/mock-apis.ts
index 5682b8d397d..5732c55f76c 100644
--- a/tests/mocks/mock-apis.ts
+++ b/tests/mocks/mock-apis.ts
@@ -6,5 +6,7 @@ import { mockStacksFeeRequests } from '@app/query/stacks/fees/fee.query.mocks';
 export async function setupMockApis(page: Page) {
   await page.route(/chrome-extension/, route => route.continue());
   await page.route(/github/, route => route.fulfill(json({})));
+  await page.route('https://api.hiro.so/', route => route.fulfill());
+  await page.route('https://api.testnet.hiro.so/', route => route.fulfill());
   await mockStacksFeeRequests(page);
 }
diff --git a/tests/page-object-models/home.page.ts b/tests/page-object-models/home.page.ts
index 587d29a556d..8165fb176d3 100644
--- a/tests/page-object-models/home.page.ts
+++ b/tests/page-object-models/home.page.ts
@@ -99,13 +99,10 @@ export class HomePage {
   async selectTestnet() {
     await this.page.getByTestId(SettingsSelectors.SettingsMenuBtn).click();
     await this.page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
+    await this.page.getByTestId(NetworkSelectors.NetworkListActiveNetwork).isVisible();
     await this.page
       .getByTestId(WalletDefaultNetworkConfigurationIds.testnet)
       .click({ force: true });
-    await this.page.getByTestId(NetworkSelectors.NetworkListActiveNetwork).isVisible();
-
-    await this.page.waitForTimeout(1000);
-    await this.page.getByTestId(WalletDefaultNetworkConfigurationIds.testnet).click();
   }
 
   async clickActivityTab() {
diff --git a/tests/page-object-models/onboarding.page.ts b/tests/page-object-models/onboarding.page.ts
index 9f47fbe13e1..1ca0a355422 100644
--- a/tests/page-object-models/onboarding.page.ts
+++ b/tests/page-object-models/onboarding.page.ts
@@ -287,7 +287,9 @@ export class OnboardingPage {
         async walletState => await chrome.storage.local.set({ 'persist:root': walletState }),
         testSoftwareAccountDefaultWalletState
       );
-      await this.page.goto(`chrome-extension://${id}/index.html`);
+      await this.page.goto(`chrome-extension://${id}/index.html`, {
+        waitUntil: 'networkidle',
+      });
     }
     await test.expect(this.page.getByText('Enter your password')).toBeVisible();
     await this.page.getByRole('textbox').fill(TEST_PASSWORD);

From d5bf289548a60c767e354119455df4b68a45eb23 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Wed, 22 May 2024 12:59:14 +0200
Subject: [PATCH 12/16] test: disable fullyParallel

---
 playwright.config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index f576628892c..ff26ce80a28 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -8,7 +8,10 @@ export default defineConfig({
   testDir: './tests',
   timeout: 30 * 1000,
   expect: { timeout: 5000 },
-  fullyParallel: true,
+  // Extensions live cross-worker meaning `chrome.storage` is shared. Disabling
+  // `fullyParallel` means fewer tests run at the same time, but ensures a
+  // truely new context is used each time
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,

From 9c448027df45455113b2daa840a92224c8dc8f6b Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Wed, 22 May 2024 13:10:33 +0200
Subject: [PATCH 13/16] ci: 10 workers for tests

---
 .github/workflows/playwright.yml      | 4 ++--
 tests/page-object-models/home.page.ts | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index b940780c63c..f44a057ae6e 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -24,8 +24,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
 
     steps:
       - uses: actions/checkout@v4
diff --git a/tests/page-object-models/home.page.ts b/tests/page-object-models/home.page.ts
index 8165fb176d3..14153d64e92 100644
--- a/tests/page-object-models/home.page.ts
+++ b/tests/page-object-models/home.page.ts
@@ -100,9 +100,7 @@ export class HomePage {
     await this.page.getByTestId(SettingsSelectors.SettingsMenuBtn).click();
     await this.page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
     await this.page.getByTestId(NetworkSelectors.NetworkListActiveNetwork).isVisible();
-    await this.page
-      .getByTestId(WalletDefaultNetworkConfigurationIds.testnet)
-      .click({ force: true });
+    await this.page.getByTestId(WalletDefaultNetworkConfigurationIds.testnet).click();
   }
 
   async clickActivityTab() {

From 920b722bcad286f9971f3bda52ebfc9e781b1f99 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Wed, 22 May 2024 13:23:20 +0200
Subject: [PATCH 14/16] test: without npx install

---
 .github/workflows/playwright.yml | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index f44a057ae6e..7af12cc6c08 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -91,12 +91,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Set up pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
       - name: Download blob reports from GitHub Actions Artifacts
         uses: actions/download-artifact@v3
         with:

From 4f56ce0763570e4412408fc8d478e0af58e16635 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Mon, 20 May 2024 10:11:54 +0200
Subject: [PATCH 15/16] test: upgrade playwright

---
 package.json   |  2 +-
 pnpm-lock.yaml | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 069689cfa6f..a1f80b9ebc3 100644
--- a/package.json
+++ b/package.json
@@ -257,7 +257,7 @@
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.32.0",
-    "@playwright/test": "1.42.1",
+    "@playwright/test": "1.44.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@redux-devtools/cli": "4.0.0",
     "@redux-devtools/remote": "0.9.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96bc1bd5907..c95535a658a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -392,8 +392,8 @@ devDependencies:
     specifier: 0.32.0
     version: 0.32.0(jsdom@22.1.0)(typescript@5.4.4)
   '@playwright/test':
-    specifier: 1.42.1
-    version: 1.42.1
+    specifier: 1.44.0
+    version: 1.44.0
   '@pmmmwh/react-refresh-webpack-plugin':
     specifier: 0.5.11
     version: 0.5.11(@types/webpack@5.28.5)(react-refresh@0.14.0)(webpack-dev-server@4.15.1)(webpack-hot-middleware@2.26.1)(webpack@5.91.0)
@@ -4183,12 +4183,12 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: true
 
-  /@playwright/test@1.42.1:
-    resolution: {integrity: sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==}
+  /@playwright/test@1.44.0:
+    resolution: {integrity: sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      playwright: 1.42.1
+      playwright: 1.44.0
     dev: true
 
   /@pmmmwh/react-refresh-webpack-plugin@0.5.11(@types/webpack@5.28.5)(react-refresh@0.14.0)(webpack-dev-server@4.15.1)(webpack-hot-middleware@2.26.1)(webpack@5.91.0):
@@ -19935,18 +19935,18 @@ packages:
       find-up: 3.0.0
     dev: true
 
-  /playwright-core@1.42.1:
-    resolution: {integrity: sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==}
+  /playwright-core@1.44.0:
+    resolution: {integrity: sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==}
     engines: {node: '>=16'}
     hasBin: true
     dev: true
 
-  /playwright@1.42.1:
-    resolution: {integrity: sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==}
+  /playwright@1.44.0:
+    resolution: {integrity: sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      playwright-core: 1.42.1
+      playwright-core: 1.44.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true

From 5903a7bd35d85328920085fbad0c7196ced39780 Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Wed, 22 May 2024 16:21:40 +0400
Subject: [PATCH 16/16] fix: sip10 token send form fees bug

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |   8 +-
 .../validation/forms/amount-validators.ts     |   4 +-
 .../sip10-token-asset-item.tsx                |   2 +-
 .../sip10-token-asset-list-unsupported.tsx    |   2 +-
 .../sip10-token-asset-list.tsx                |   2 +-
 .../form/sip10/sip10-token-send-form.tsx      |   6 +-
 .../form/sip10/use-sip10-send-form.tsx        |   4 +-
 src/app/query/stacks/fees/fees.query.ts       |   1 +
 .../query/stacks/sip10/sip10-tokens.utils.ts  |  10 +-
 .../transactions/token-transfer.hooks.ts      | 123 ++++++++++--------
 11 files changed, 90 insertions(+), 74 deletions(-)

diff --git a/package.json b/package.json
index a1f80b9ebc3..0605759e6c7 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/models": "0.6.1",
+    "@leather-wallet/models": "0.6.3",
     "@leather-wallet/tokens": "0.0.15",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c95535a658a..cdfb539aa40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ dependencies:
     specifier: 1.2.0
     version: 1.2.0
   '@leather-wallet/models':
-    specifier: 0.6.1
-    version: 0.6.1
+    specifier: 0.6.3
+    version: 0.6.3
   '@leather-wallet/tokens':
     specifier: 0.0.15
     version: 0.0.15
@@ -3702,8 +3702,8 @@ packages:
       bignumber.js: 9.1.2
     dev: true
 
-  /@leather-wallet/models@0.6.1:
-    resolution: {integrity: sha512-PVbsCypJaVY7W6pOqDfFlZuvx8pZhpBo+8mMo2wddDNSnSGoIhxQtZVTzZPHTb4d++UWPuxrDx0WVcu7G2Y9gA==}
+  /@leather-wallet/models@0.6.3:
+    resolution: {integrity: sha512-Q8GIE4sH6yg57LtF28Ya/bDAueQdf++M0yAMMJKSJSW4Ue62HNcX2s60RdxAE/mlKQHZKK8JL9y2jwXKVNlJXA==}
     dependencies:
       bignumber.js: 9.1.2
     dev: false
diff --git a/src/app/common/validation/forms/amount-validators.ts b/src/app/common/validation/forms/amount-validators.ts
index fbb58e2e08e..c062a47cac6 100644
--- a/src/app/common/validation/forms/amount-validators.ts
+++ b/src/app/common/validation/forms/amount-validators.ts
@@ -6,6 +6,7 @@ import { isNumber } from '@shared/utils';
 import { analytics } from '@shared/utils/analytics';
 
 import { countDecimals } from '@app/common/math/helpers';
+import { convertAmountToBaseUnit } from '@app/common/money/calculate-money';
 import {
   btcToSat,
   microStxToStx,
@@ -109,6 +110,7 @@ export function stxAvailableBalanceValidator(availableBalance: Money) {
 
 export function stacksFungibleTokenAmountValidator(balance: Money) {
   const { amount, decimals } = balance;
+
   return amountValidator()
     .test((value, context) => {
       if (!isNumber(value)) return false;
@@ -125,7 +127,7 @@ export function stacksFungibleTokenAmountValidator(balance: Money) {
       message: formatInsufficientBalanceError(balance, sum => microStxToStx(sum.amount).toString()),
       test(value) {
         if (!isNumber(value) || !amount) return false;
-        return new BigNumber(value).isLessThanOrEqualTo(amount);
+        return new BigNumber(value).isLessThanOrEqualTo(convertAmountToBaseUnit(amount, decimals));
       },
     });
 }
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx
index 01713734ad6..d587a6af6a7 100644
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx
+++ b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx
@@ -20,7 +20,7 @@ export function Sip10TokenAssetItem({
   marketData,
   onSelectAsset,
 }: Sip10TokenAssetItemProps) {
-  const name = spamFilter(info.name);
+  const name = spamFilter(info.tokenName);
   const fiatBalance = convertAssetBalanceToFiat({
     balance: balance.availableBalance,
     marketData,
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx
index db02882b6fd..a059c6fcac4 100644
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx
+++ b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list-unsupported.tsx
@@ -38,7 +38,7 @@ export function Sip10TokenAssetListUnsupported({
             {tokens.map(token => (
               <Sip10TokenAssetItem
                 balance={token.balance}
-                key={token.info.name}
+                key={token.info.tokenName}
                 info={token.info}
                 isLoading={isLoading}
                 marketData={priceAsMarketData(
diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx
index ab2f490bdc4..93c0d9c0dfd 100644
--- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx
+++ b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx
@@ -24,7 +24,7 @@ export function Sip10TokenAssetList({
       {tokens.map(token => (
         <Sip10TokenAssetItem
           balance={token.balance}
-          key={token.info.name}
+          key={token.info.tokenName}
           info={token.info}
           isLoading={isLoading}
           marketData={priceAsMarketData(
diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx
index 34fdd76a48b..4cf413e2691 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx
@@ -1,4 +1,4 @@
-import { Navigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import type { CryptoAssetBalance, MarketData, Sip10CryptoAssetInfo } from '@leather-wallet/models';
 
@@ -22,12 +22,14 @@ function Sip10TokenSendFormLoader({ children }: Sip10TokenSendFormLoaderProps) {
   const token = useSip10Token(contractId ?? '');
   const priceAsMarketData = useAlexCurrencyPriceAsMarketData();
   const toast = useToast();
+  const navigate = useNavigate();
 
   if (!contractId) return;
 
   if (!token) {
     toast.error('Token not found');
-    return <Navigate to={RouteUrls.SendCryptoAsset} />;
+    navigate(RouteUrls.SendCryptoAsset);
+    return;
   }
 
   return children({
diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx
index 4176cbfc2d7..7e85fa20b25 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/use-sip10-send-form.tsx
@@ -45,7 +45,7 @@ export function useSip10SendForm({ balance, info }: UseSip10SendFormArgs) {
   function createFtAvatar() {
     return {
       avatar: info.contractId,
-      imageCanonicalUri: getSafeImageCanonicalUri(info.imageCanonicalUri, info.name),
+      imageCanonicalUri: getSafeImageCanonicalUri(info.imageCanonicalUri, info.tokenName),
     };
   }
 
@@ -76,7 +76,7 @@ export function useSip10SendForm({ balance, info }: UseSip10SendFormArgs) {
 
       sendFormNavigate.toConfirmAndSignStacksSip10Transaction({
         decimals: info.decimals,
-        name: info.name,
+        name: info.tokenName,
         tx,
       });
     },
diff --git a/src/app/query/stacks/fees/fees.query.ts b/src/app/query/stacks/fees/fees.query.ts
index 6ede33dfddc..1db27ff4a52 100644
--- a/src/app/query/stacks/fees/fees.query.ts
+++ b/src/app/query/stacks/fees/fees.query.ts
@@ -23,6 +23,7 @@ function fetchTransactionFeeEstimation(currentNetwork: any, limiter: PQueue) {
           }
         ),
       {
+        priority: 2,
         throwOnTimeout: true,
       }
     );
diff --git a/src/app/query/stacks/sip10/sip10-tokens.utils.ts b/src/app/query/stacks/sip10/sip10-tokens.utils.ts
index 96058a1fb18..f77ec6f9df6 100644
--- a/src/app/query/stacks/sip10/sip10-tokens.utils.ts
+++ b/src/app/query/stacks/sip10/sip10-tokens.utils.ts
@@ -16,18 +16,20 @@ export function createSip10CryptoAssetInfo(
   key: string,
   ftAsset: FtMetadataResponse
 ): Sip10CryptoAssetInfo {
-  const { assetName, contractName } = getAssetStringParts(key);
-  const name = ftAsset.name ? ftAsset.name : assetName;
+  const { assetName, contractName, address } = getAssetStringParts(key);
+  const tokenName = ftAsset.name ? ftAsset.name : assetName;
 
   return {
     canTransfer: isTransferableSip10Token(ftAsset),
+    contractAddress: address,
+    contractAssetName: assetName,
     contractId,
     contractName,
     decimals: ftAsset.decimals ?? 0,
     hasMemo: isTransferableSip10Token(ftAsset),
     imageCanonicalUri: ftAsset.image_canonical_uri ?? '',
-    name,
-    symbol: ftAsset.symbol ?? getTicker(name),
+    tokenName,
+    symbol: ftAsset.symbol ?? getTicker(tokenName),
   };
 }
 
diff --git a/src/app/store/transactions/token-transfer.hooks.ts b/src/app/store/transactions/token-transfer.hooks.ts
index 9eff1ed34c6..c88cc12bcb1 100644
--- a/src/app/store/transactions/token-transfer.hooks.ts
+++ b/src/app/store/transactions/token-transfer.hooks.ts
@@ -17,6 +17,7 @@ import {
   uintCV,
 } from '@stacks/transactions';
 
+import { logger } from '@shared/logger';
 import type { StacksSendFormValues, StacksTransactionFormValues } from '@shared/models/form.model';
 
 import { stxToMicroStx } from '@app/common/money/unit-conversion';
@@ -28,7 +29,6 @@ import {
 import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks';
 import { useCurrentStacksNetworkState } from '@app/store/networks/networks.hooks';
 import { makePostCondition } from '@app/store/transactions/transaction.hooks';
-import { getAssetStringParts } from '@app/ui/utils/get-asset-string-parts';
 
 import { useCurrentStacksAccount } from '../accounts/blockchain/stacks/stacks-account.hooks';
 
@@ -83,70 +83,79 @@ export function useGenerateFtTokenTransferUnsignedTx(info: Sip10CryptoAssetInfo)
   const { data: nextNonce } = useNextNonce();
   const account = useCurrentStacksAccount();
   const network = useCurrentStacksNetworkState();
+  const { contractName, contractAddress, contractAssetName } = info;
 
   return useCallback(
     async (values?: StacksSendFormValues | StacksTransactionFormValues) => {
-      if (!account) return;
-
-      const functionName = 'transfer';
-      const recipient =
-        values && 'recipient' in values
-          ? createAddress(values.recipient || '')
-          : createEmptyAddress();
-      const amount = values && 'amount' in values ? values.amount : 0;
-      const memo =
-        values && 'memo' in values && values.memo !== ''
-          ? someCV(bufferCVFromString(values.memo || ''))
-          : noneCV();
-
-      const amountAsFractionalUnit = ftUnshiftDecimals(amount, info.decimals || 0);
-      const {
-        address: contractAddress,
-        contractName,
-        assetName,
-      } = getAssetStringParts(info.contractId);
-
-      const postConditionOptions = {
-        amount: amountAsFractionalUnit,
-        contractAddress,
-        contractAssetName: assetName,
-        contractName,
-        stxAddress: account.address,
-      };
-
-      const postConditions = [makePostCondition(postConditionOptions)];
-
-      // (transfer (uint principal principal) (response bool uint))
-      const functionArgs: ClarityValue[] = [
-        uintCV(amountAsFractionalUnit),
-        standardPrincipalCVFromAddress(createAddress(account.address)),
-        standardPrincipalCVFromAddress(recipient),
-      ];
-
-      if (info.hasMemo) {
-        functionArgs.push(memo);
-      }
-
-      const options = {
-        txData: {
-          txType: TransactionTypes.ContractCall,
+      try {
+        if (!account) return;
+
+        const functionName = 'transfer';
+        const recipient =
+          values && 'recipient' in values
+            ? createAddress(values.recipient || '')
+            : createEmptyAddress();
+        const amount = values && 'amount' in values ? values.amount : 0;
+        const memo =
+          values && 'memo' in values && values.memo !== ''
+            ? someCV(bufferCVFromString(values.memo || ''))
+            : noneCV();
+
+        const amountAsFractionalUnit = ftUnshiftDecimals(amount, info.decimals || 0);
+        const postConditionOptions = {
+          amount: amountAsFractionalUnit,
           contractAddress,
+          contractAssetName,
           contractName,
-          functionName,
-          functionArgs: functionArgs.map(serializeCV).map(arg => bytesToHex(arg)),
-          postConditions,
-          postConditionMode: PostConditionMode.Deny,
-          network,
+          stxAddress: account.address,
+        };
+
+        const postConditions = [makePostCondition(postConditionOptions)];
+
+        // (transfer (uint principal principal) (response bool uint))
+        const functionArgs: ClarityValue[] = [
+          uintCV(amountAsFractionalUnit),
+          standardPrincipalCVFromAddress(createAddress(account.address)),
+          standardPrincipalCVFromAddress(recipient),
+        ];
+
+        if (info.hasMemo) {
+          functionArgs.push(memo);
+        }
+
+        const options = {
+          txData: {
+            txType: TransactionTypes.ContractCall,
+            contractAddress,
+            contractName,
+            functionName,
+            functionArgs: functionArgs.map(serializeCV).map(arg => bytesToHex(arg)),
+            postConditions,
+            postConditionMode: PostConditionMode.Deny,
+            network,
+            publicKey: account.stxPublicKey,
+          },
+          fee: stxToMicroStx(values?.fee || 0).toNumber(),
           publicKey: account.stxPublicKey,
-        },
-        fee: stxToMicroStx(values?.fee || 0).toNumber(),
-        publicKey: account.stxPublicKey,
-        nonce: Number(values?.nonce) ?? nextNonce?.nonce,
-      } as const;
+          nonce: Number(values?.nonce) ?? nextNonce?.nonce,
+        } as const;
 
-      return generateUnsignedTransaction(options);
+        return generateUnsignedTransaction(options);
+      } catch (error) {
+        logger.error('Failed to generate unsigned transaction', error);
+        return;
+      }
     },
-    [account, info.contractId, info.decimals, info.hasMemo, network, nextNonce?.nonce]
+    [
+      account,
+      info.decimals,
+      info.hasMemo,
+      network,
+      nextNonce?.nonce,
+      contractName,
+      contractAssetName,
+      contractAddress,
+    ]
   );
 }