leather-io · pete-watters · Dec 5, 2025 · Dec 15, 2025 · Dec 16, 2025 · Dec 16, 2025
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -11,6 +11,12 @@
 - Use object method shorthand syntax in objects and interfaces.
   constants.ts files.
 - Prefer constants over magic numbers or strings.
+- Always use `function` declarations for components, never const + arrow component definitions.
+
+## Imports
+
+- Never duplicate imports from the same module; consolidate named imports into a single statement.
+ - When adding a new import from a module that is already imported, always merge it into the existing import statement instead of creating a new one.
 
 ## Naming
 
@@ -43,6 +49,13 @@
   ComponentNameProps.
 - Destructure props directly in the signature: `function Component({ propA, propB }: ComponentProps)`
 
+## React hooks
+
+- Always follow the Rules of Hooks: call React hooks (including custom hooks like `useUserSettings`) only at the top level of React function components or other hooks.
+- Never call hooks conditionally, inside loops, inside nested functions, or after early returns that would change the order of hook calls between renders.
+- If you need conditional behavior, call the hook unconditionally and branch on its returned values, or extract the conditional logic into a separate component or custom hook.
+ - Avoid `useMemo` and `useCallback` unless they provide a clear, measurable benefit (e.g., preventing an expensive computation on every render or avoiding re-renders of heavy child components). Favor simple code over premature memoization.
+
 ## File naming
 
 - Use snake case file names
@@ -53,6 +66,11 @@
   - Required by file-based router
 - use \*.spec.ts(x) for tests
 
+## Architecture
+
+- When generating new UI, use a container/presentational (dumb) component pattern with separate layout components for view-only concerns.
+- Keep file names and folder structure consistent across platforms (web, extension, mobile) for equivalent features and components.
+
 ## Use Remeda for functional utilities
 
 Prefer [Remeda](https://remedajs.com) when working with non-trivial data transformations that benefit from strong typing, immutability, and composability.

diff --git a/apps/extension/src/app/components/collectibles/collectible-text.layout.tsx b/apps/extension/src/app/components/collectibles/collectible-text.layout.tsx
@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
 interface CollectibleTextLayoutProps {
   children: string;
@@ -25,7 +25,9 @@ export function CollectibleTextLayout({ children }: CollectibleTextLayoutProps)
       textAlign="left"
       width="100%"
     >
-      <pre>{DOMPurify.sanitize(children)}</pre>
+      <styled.pre fontFamily="mono" fontSize="sm">
+        {DOMPurify.sanitize(children)}
+      </styled.pre>
     </Box>
   );
 }
diff --git a/apps/extension/src/app/components/inscription-preview-card/components/inscription-text.tsx b/apps/extension/src/app/components/inscription-preview-card/components/inscription-text.tsx
@@ -1,5 +1,5 @@
 import DOMPurify from 'dompurify';
-import { Box } from 'leather-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
 import { parseJson } from '@app/components/json';
 import { LoadingSpinner } from '@app/components/loading-spinner';
@@ -28,14 +28,15 @@ export function InscriptionText(props: InscriptionTextProps) {
       }}
       color="white"
       fontSize="9px"
+      fontFamily="mono"
       height="100%"
       p="space.03"
       position="relative"
       overflow="hidden"
       textAlign="left"
       width="100%"
     >
-      <pre>{DOMPurify.sanitize(parseJson(query.data))}</pre>
+      <styled.pre>{DOMPurify.sanitize(parseJson(query.data))}</styled.pre>
     </Box>
   );
 }
diff --git a/apps/extension/src/app/features/activity-list/activity-list.tsx b/apps/extension/src/app/features/activity-list/activity-list.tsx
@@ -1,16 +1,37 @@
-import { useCallback } from 'react';
+import { useEffect } from 'react';
 import { Outlet } from 'react-router';
 import { Virtuoso } from 'react-virtuoso';
 
 import { type ActivityView } from '@leather.io/features';
 
 import { formatCurrency } from '@app/common/currency-formatter';
+import { SbtcDepositTransactionItem } from '@app/components/sbtc-deposit-status-item/sbtc-deposit-status-item';
+import { useUserSettings } from '@app/hooks/use-user-settings';
 import { useActivity } from '@app/query/activity/activity.query';
+import { useSbtcPendingDeposits } from '@app/query/sbtc/sbtc-deposits.query';
+import { useStacksPendingTransactions } from '@app/query/stacks/mempool/mempool.hooks';
 import { useAccountAddresses } from '@app/services/accounts/use-account-addresses';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
+import { useUpdateSubmittedTransactions } from '@app/store/submitted-transactions/submitted-transactions.hooks';
+import { useSubmittedTransactions } from '@app/store/submitted-transactions/submitted-transactions.selectors';
 
 import { ActivityItem } from './components/activity-item';
 import { ActivityListLayout } from './components/activity-list.layout';
+import { createSubmittedActivityViews } from './submitted-activity-view';
+
+type ActivityListRow =
+  | ActivityView
+  | {
+      key: string;
+      kind: 'sbtc-deposit';
+      deposit: import('@app/query/sbtc/sbtc-deposits.query').SbtcDeposit;
+    };
+
+function isSbtcDepositRow(
+  item: ActivityListRow
+): item is Extract<ActivityListRow, { kind: 'sbtc-deposit' }> {
+  return (item as any).kind === 'sbtc-deposit';
+}
 
 /*
  * Infinite scroll support is built into this component via the onLoadMore prop,
@@ -24,20 +45,61 @@ import { ActivityListLayout } from './components/activity-list.layout';
 export function ActivityList() {
   const accountIndex = useCurrentAccountIndex();
   const accountAddresses = useAccountAddresses(accountIndex);
+  const { network } = useUserSettings();
   const activityQuery = useActivity(accountAddresses);
+  const submittedTransactions = useSubmittedTransactions();
+  const updateSubmittedTransactions = useUpdateSubmittedTransactions();
+
+  const stacksAddress = accountAddresses.stacks?.stxAddress ?? '';
+  const { transactions: stacksPendingTransactions } = useStacksPendingTransactions(stacksAddress);
+
+  const { pendingSbtcDeposits } = useSbtcPendingDeposits(stacksAddress);
 
-  const activity = activityQuery.data ?? [];
+  useEffect(() => {
+    if (!stacksAddress) return;
+    updateSubmittedTransactions(stacksPendingTransactions);
+  }, [stacksAddress, stacksPendingTransactions, updateSubmittedTransactions]);
+
+  const historicalActivity = activityQuery.data ?? [];
+  const submittedActivity = createSubmittedActivityViews({ submittedTransactions, network });
+  const sbtcPendingActivity: ActivityListRow[] = pendingSbtcDeposits.map(deposit => ({
+    key: `sbtc-deposit-${deposit.bitcoinTxid}-${deposit.bitcoinTxOutputIndex}`,
+    kind: 'sbtc-deposit',
+    deposit,
+  }));
+  const activity: ActivityListRow[] = [
+    ...submittedActivity,
+    ...sbtcPendingActivity,
+    ...historicalActivity,
+  ];
+
+  const hasActivity = activity.length > 0;
   const isLoading = activityQuery.isLoading;
 
-  const itemContent = useCallback(
-    (_: number, item: ActivityView) => <ActivityItem item={item} formatCurrency={formatCurrency} />,
-    []
-  );
+  function itemContent(_: number, item: ActivityListRow) {
+    if (isSbtcDepositRow(item)) {
+      return <SbtcDepositTransactionItem deposit={item.deposit} />;
+    }
+    return <ActivityItem item={item} formatCurrency={formatCurrency} />;
+  }
+
+  function computeItemKey(_: number, item: ActivityListRow) {
+    return item.key;
+  }
 
-  const computeItemKey = useCallback((_: number, item: ActivityView) => item.key, []);
+  if (activityQuery.isError) {
+    return (
+      <ActivityListLayout isLoading={false} hasActivity>
+        <div style={{ padding: '16px', textAlign: 'center' }}>
+          Unable to load activity. Please try again later.
+        </div>
+        <Outlet />
+      </ActivityListLayout>
+    );
+  }
 
   return (
-    <ActivityListLayout isLoading={isLoading} hasActivity={activity.length > 0}>
+    <ActivityListLayout isLoading={isLoading} hasActivity={hasActivity}>
       <Virtuoso
         style={{ height: '100%' }}
         data={activity}

diff --git a/apps/extension/src/app/features/activity-list/submitted-activity-view.ts b/apps/extension/src/app/features/activity-list/submitted-activity-view.ts
@@ -0,0 +1,70 @@
+import { PayloadType, deserializeTransaction } from '@stacks/transactions';
+
+import { type ActivityView, getStacksExplorerLink } from '@leather.io/features';
+import type { NetworkConfiguration } from '@leather.io/models';
+
+import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid';
+import type { SubmittedTransaction } from '@app/store/submitted-transactions/submitted-transactions.slice';
+
+interface CreateSubmittedActivityViewsArgs {
+  submittedTransactions: SubmittedTransaction[];
+  network: NetworkConfiguration;
+}
+
+export function createSubmittedActivityViews({
+  submittedTransactions,
+  network,
+}: CreateSubmittedActivityViewsArgs): ActivityView[] {
+  return submittedTransactions
+    .map(submittedTx => {
+      const tx = deserializeTransaction(submittedTx.rawTx);
+      const txid = safelyFormatHexTxid(submittedTx.txid);
+      const activityLink = getStacksExplorerLink({
+        mode: network.chain.bitcoin.mode,
+        type: 'txid',
+        value: txid,
+        searchParams: undefined,
+        isNakamoto: false,
+      });
+
+      const baseView: Omit<ActivityView, 'title' | 'caption'> = {
+        key: `submitted-${txid}`,
+        asset: undefined,
+        fromAsset: undefined,
+        toAsset: undefined,
+        activityLink,
+        balances: {},
+        activityAvatar: 'fallback',
+        statusIndicator: 'pending',
+        statusLabel: 'Submitted',
+      };
+
+      switch (tx.payload.payloadType) {
+        case PayloadType.TokenTransfer:
+          return {
+            ...baseView,
+            title: 'Stacks',
+            caption: 'Submitted',
+          };
+        case PayloadType.ContractCall:
+          return {
+            ...baseView,
+            title: tx.payload.functionName.content,
+            caption: 'Submitted',
+          };
+        case PayloadType.SmartContract:
+          return {
+            ...baseView,
+            title: tx.payload.contractName.content,
+            caption: 'Submitted',
+          };
+        default:
+          return {
+            ...baseView,
+            title: 'Submitted transaction',
+            caption: 'Submitted',
+          };
+      }
+    })
+    .filter(view => view !== null);
+}
diff --git a/apps/extension/src/app/features/asset-list/asset-list.tsx b/apps/extension/src/app/features/asset-list/asset-list.tsx
@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 
 import { Stack } from 'leather-styles/jsx';
 
+import type { TokenDetailsProps } from '@leather.io/features';
 import { BtcAvatarIcon, StxAvatarIcon } from '@leather.io/ui';
 
 import { Brc20TokensLoader } from '@app/components/loaders/brc20-tokens-loader';
@@ -37,11 +38,13 @@ interface AssetListProps {
   assetRightElementVariant?: AssetRightElementVariant;
   showUnmanageableTokens?: boolean;
   onSelectAsset?(symbol: string, contractId?: string): void;
+  onOpenToken?(tokenDetails: TokenDetailsProps): void;
   setHasManageableTokens?: Dispatch<SetStateAction<boolean>>;
 }
 
 export function AssetList({
   onSelectAsset,
+  onOpenToken,
   variant = 'read-only',
   assetRightElementVariant = 'balance',
   showUnmanageableTokens = true,
@@ -67,6 +70,7 @@ export function AssetList({
                 balance={balance}
                 isLoading={isLoading}
                 onSelectAsset={onSelectAsset}
+                onOpenToken={onOpenToken}
                 isLoadingAdditionalData={isLoadingAdditionalData}
               />
             )}
@@ -91,6 +95,7 @@ export function AssetList({
                 isLoading={isLoading}
                 isPrivate={isPrivate}
                 onSelectAsset={onSelectAsset}
+                onOpenToken={onOpenToken}
               />
             )}
           </StxAssetItemBalanceLoader>
@@ -124,6 +129,7 @@ export function AssetList({
             accountIndex={currentAccountIndex}
             assetFilter={filter}
             onSelectAsset={onSelectAsset}
+            onOpenToken={onOpenToken}
             assetRightElementVariant={assetRightElementVariant}
             setHasManageableTokens={setHasManageableTokens}
           />
@@ -169,6 +175,7 @@ export function AssetList({
             accountIndex={currentAccountIndex}
             filter={filter}
             assetRightElementVariant={assetRightElementVariant}
+            onOpenToken={onOpenToken}
             setHasManageableTokens={setHasManageableTokens}
           />
         </>

diff --git a/...nsion/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx b/...nsion/src/app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item.tsx
@@ -1,5 +1,8 @@
+import { btcAsset } from '@leather.io/constants';
+import type { TokenDetailsProps } from '@leather.io/features';
 import type { AccountQuotedBtcBalance } from '@leather.io/services';
 import { BtcAvatarIcon } from '@leather.io/ui';
+import { getAssetId, serializeAssetId } from '@leather.io/utils';
 
 import { formatCurrency } from '@app/common/currency-formatter';
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
@@ -10,15 +13,29 @@ interface BtcCryptoAssetItemProps {
   isLoading: boolean;
   isLoadingAdditionalData?: boolean;
   onSelectAsset?(symbol: string): void;
+  onOpenToken?(details: TokenDetailsProps): void;
 }
 export function BtcCryptoAssetItem({
   balance,
   isLoading,
   onSelectAsset,
+  onOpenToken,
   isLoadingAdditionalData,
 }: BtcCryptoAssetItemProps) {
   const isPrivate = useIsPrivateMode();
 
+  function handleSelectAsset(symbol: string) {
+    if (onOpenToken) {
+      onOpenToken({
+        assetId: serializeAssetId(getAssetId(btcAsset)),
+      });
+      return;
+    }
+    onSelectAsset?.(symbol);
+  }
+
+  const onSelectAssetProp = onOpenToken || onSelectAsset ? handleSelectAsset : undefined;
+
   return (
     <CryptoAssetItemLayout
       availableBalance={balance.btc.totalBalance}
@@ -28,7 +45,7 @@ export function BtcCryptoAssetItem({
       isLoading={isLoading}
       isLoadingAdditionalData={isLoadingAdditionalData}
       isPrivate={isPrivate}
-      onSelectAsset={onSelectAsset}
+      onSelectAsset={onSelectAssetProp}
       titleLeft="Bitcoin"
       dataTestId="BTC"
     />