feat(mobile): clean-er code

pete-watters · pete-watters · commit 1eed7e63e893 · 2025-07-17T14:26:01.000+01:00
diff --git a/apps/mobile/src/app/account/[accountId]/activity.tsx b/apps/mobile/src/app/account/[accountId]/activity.tsx
@@ -43,7 +43,7 @@ export default function AccountActivityScreen() {
                 })}
               </Screen.Title>
             }
-            data={activity.value as OnChainActivity[]} // TODO: Unclear why was this cast. Needs clearing up.
+            data={activity.value.filter(activity => activity && 'asset' in activity)}
             renderItem={({ item }) => <ActivityListItem activity={item} />}
             keyExtractor={(_, index) => `activity.${index}`}
             ListEmptyComponent={<ActivityEmpty />}
diff --git a/apps/mobile/src/app/activity/index.tsx b/apps/mobile/src/app/activity/index.tsx
@@ -22,7 +22,7 @@ export default function ActivityScreen() {
           <Screen.List
             refreshControl={<RefreshControl />}
             ListHeaderComponent={<Screen.Title>{pageTitle}</Screen.Title>}
-            data={activity.value as OnChainActivity[]} // TODO: Unclear why was this cast. Needs clearing up.
+            data={activity.value.filter(activity => activity && 'asset' in activity)}
             renderItem={({ item }) => <ActivityListItem activity={item} />}
             keyExtractor={(_, index) => `activity.${index}`}
             ListEmptyComponent={<ActivityEmpty />}
diff --git a/apps/mobile/src/features/balances/balances.tsx b/apps/mobile/src/features/balances/balances.tsx
@@ -7,7 +7,7 @@ import {
 import { RunesBalance, RunesBalanceByAccount } from '@/features/balances/bitcoin/runes-balance';
 import { Sip10Balance, Sip10BalanceByAccount } from '@/features/balances/stacks/sip10-balance';
 import { StacksBalance, StacksBalanceByAccount } from '@/features/balances/stacks/stacks-balance';
-import { useRunesFlag } from '@/features/feature-flags';
+import { useRunesFlag, useTokenDetailsFlag } from '@/features/feature-flags';
 import { TokenSheet, TokenSheetData } from '@/features/token/token-sheet';
 import { ViewMode } from '@/shared/types';
 
@@ -28,6 +28,7 @@ export interface OnOpenTokenProps {
 export function AllAccountBalances({ mode }: BalanceViewProps) {
   const [sheetData, setSheetData] = useState<TokenSheetData | null>(null);
   const runesFlag = useRunesFlag();
+  const tokenDetailsFlag = useTokenDetailsFlag();
 
   const tokenSheetRef = useRef<SheetRef>(null);
 
@@ -37,25 +38,14 @@ export function AllAccountBalances({ mode }: BalanceViewProps) {
     tokenSheetRef.current?.present();
   }
 
+  const onPressToken = tokenDetailsFlag ? onOpenToken : undefined;
+
   return (
     <>
       <Box flex={1} height="100%">
-        <BitcoinBalance
-          onPress={({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) =>
-            onOpenToken({ asset, availableBalance, quoteBalance })
-          }
-        />
-        <StacksBalance
-          onPress={({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) =>
-            onOpenToken({ asset, availableBalance, quoteBalance })
-          }
-        />
-        <Sip10Balance
-          mode={mode}
-          onPress={({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) =>
-            onOpenToken({ asset, availableBalance, quoteBalance })
-          }
-        />
+        <BitcoinBalance onPress={onPressToken} />
+        <StacksBalance onPress={onPressToken} />
+        <Sip10Balance mode={mode} onPress={onPressToken} />
         {runesFlag && <RunesBalance mode={mode} />}
       </Box>
       <TokenSheet data={sheetData} sheetRef={tokenSheetRef} />
@@ -68,40 +58,35 @@ export function AccountBalances({ mode, fingerprint, accountIndex }: AccountId &
   const runesFlag = useRunesFlag();
 
   const tokenSheetRef = useRef<SheetRef>(null);
+  const tokenDetailsFlag = useTokenDetailsFlag();
 
   function onOpenToken(data: TokenSheetData) {
     setSheetData(data);
-    console.log('onOpenToken', data);
     // analytics.track('token_sheet_opened', { source: 'action_bar' });
     tokenSheetRef.current?.present();
   }
 
-  // > FIXME LEA-3015: investigate passing the balance data needed from BitcoinBalanceByAccount etc.
+  const onPressToken = tokenDetailsFlag ? onOpenToken : undefined;
 
   return (
     <>
       <Box>
         <BitcoinBalanceByAccount
-          onPress={({ asset, availableBalance, quoteBalance }) =>
-            onOpenToken({
-              asset,
-              accountIndex,
-              fingerprint,
-              availableBalance,
-              quoteBalance,
-            })
-          }
+          onPress={onPressToken}
           fingerprint={fingerprint}
           accountIndex={accountIndex}
         />
         <StacksBalanceByAccount
-          onPress={({ asset, availableBalance, quoteBalance }) =>
-            onOpenToken({ asset, accountIndex, fingerprint, availableBalance, quoteBalance })
-          }
+          onPress={onPressToken}
+          fingerprint={fingerprint}
+          accountIndex={accountIndex}
+        />
+        <Sip10BalanceByAccount
+          mode={mode}
           fingerprint={fingerprint}
           accountIndex={accountIndex}
+          onPress={onPressToken}
         />
-        <Sip10BalanceByAccount mode={mode} fingerprint={fingerprint} accountIndex={accountIndex} />
         {runesFlag && (
           <RunesBalanceByAccount
             mode={mode}
diff --git a/apps/mobile/src/features/feature-flags/index.ts b/apps/mobile/src/features/feature-flags/index.ts
@@ -75,3 +75,7 @@ export function useDappSuggestions() {
 export function useSendPasteButton() {
   return useBoolVariation('send_paste_button', false);
 }
+
+export function useTokenDetailsFlag() {
+  return useBoolVariation('token_details', true);
+}
diff --git a/apps/mobile/src/features/token/components/token-activity.tsx b/apps/mobile/src/features/token/components/token-activity.tsx
@@ -19,13 +19,16 @@ interface TokenActivityProps {
   fingerprint?: string;
 }
 
-const filterByTicker = (activity: OnChainActivity, ticker: string) =>
-  'asset' in activity && 'symbol' in activity.asset && activity.asset.symbol === ticker;
-
-const filterByAccount = (activity: OnChainActivity, accountIndex: number, fingerprint: string) =>
-  'account' in activity &&
-  activity.account.accountIndex === accountIndex &&
-  activity.account.fingerprint === fingerprint;
+function filterByTicker(activity: OnChainActivity, ticker: string) {
+  return 'asset' in activity && 'symbol' in activity.asset && activity.asset.symbol === ticker;
+}
+function filterByAccount(activity: OnChainActivity, accountIndex: number, fingerprint: string) {
+  return (
+    'account' in activity &&
+    activity.account.accountIndex === accountIndex &&
+    activity.account.fingerprint === fingerprint
+  );
+}
 
 export function TokenActivity({
   ListHeader,
@@ -53,17 +56,15 @@ export function TokenActivity({
           <Screen.List
             refreshControl={<RefreshControl progressViewOffset={scrollViewAdjustmentOffset} />}
             style={{ marginTop: -scrollViewAdjustmentOffset }}
-            data={
-              activity.value
-                .filter((activity): activity is OnChainActivity => activity && 'asset' in activity)
-                .filter(activity => filterByTicker(activity, ticker))
-                .filter(activity => {
-                  if (isDefined(accountIndex) && isDefined(fingerprint)) {
-                    return filterByAccount(activity, accountIndex, fingerprint);
-                  }
-                  return true;
-                }) as OnChainActivity[]
-            } // TODO: Unclear why was this cast. Needs clearing up.
+            data={activity.value
+              .filter(activity => activity && 'asset' in activity)
+              .filter(activity => filterByTicker(activity, ticker))
+              .filter(activity => {
+                if (isDefined(accountIndex) && isDefined(fingerprint)) {
+                  return filterByAccount(activity, accountIndex, fingerprint);
+                }
+                return true;
+              })}
             renderItem={({ item }) => <ActivityListItem activity={item} />}
             keyExtractor={(_, index) => `activity.${index}`}
             ListHeaderComponent={() => ListHeader}
diff --git a/apps/mobile/src/features/token/token-sheet.tsx b/apps/mobile/src/features/token/token-sheet.tsx
@@ -5,7 +5,6 @@ import { analytics } from '@/utils/analytics';
 
 import { FungibleCryptoAsset, Money } from '@leather.io/models';
 import { SheetRef, useHaptics } from '@leather.io/ui/native';
-import { createMoney } from '@leather.io/utils';
 
 import { Token } from './token';
 
diff --git a/apps/mobile/src/features/token/token.tsx b/apps/mobile/src/features/token/token.tsx
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 
+import { useTokenDetailsFlag } from '@/features/feature-flags';
 import { TokenIcon } from '@/features/token/components/token-icon';
 import {
   useAssetDescriptionQuery,
@@ -17,6 +18,53 @@ import { TokenActivity } from './components/token-activity';
 import { TokenDetails } from './components/token-details';
 import { TokenSheet, TokenSheetData } from './token-sheet';
 
+function AccountDetails({
+  accountIndex,
+  fingerprint,
+  asset,
+  availableBalance,
+  quoteBalance,
+}: TokenProps) {
+  const tokenDetailsFlag = useTokenDetailsFlag();
+
+  const tokenSheetRef = useRef<SheetRef>(null);
+  const [sheetData, setSheetData] = useState<TokenSheetData | null>(null);
+
+  function onOpenToken(data: TokenSheetData) {
+    setSheetData(data);
+    // analytics.track('token_sheet_opened', { source: 'action_bar' });
+    tokenSheetRef.current?.present();
+  }
+
+  return (
+    <>
+      {accountIndex !== undefined ? (
+        <AccountAddressList
+          tokenId={asset.symbol}
+          accountIndex={accountIndex}
+          fingerprint={fingerprint ?? ''}
+        />
+      ) : (
+        <AccountList
+          tokenId={asset.symbol}
+          selectAccount={({ accountIndex, fingerprint }) =>
+            tokenDetailsFlag
+              ? onOpenToken({
+                  asset,
+                  accountIndex,
+                  fingerprint,
+                  availableBalance,
+                  quoteBalance,
+                })
+              : undefined
+          }
+        />
+      )}
+      <TokenSheet data={sheetData} sheetRef={tokenSheetRef} />
+    </>
+  );
+}
+
 interface TokenProps {
   asset: FungibleCryptoAsset;
   accountIndex?: number;
@@ -31,63 +79,37 @@ export function Token({
   availableBalance,
   quoteBalance,
 }: TokenProps) {
-  const [sheetData, setSheetData] = useState<TokenSheetData | null>(null);
-
   const marketData = useMarketDataQuery(asset);
   const price = marketData.data?.price;
   const { data: assetDescription } = useAssetDescriptionQuery(asset);
   const { data: assetPriceChange } = useAssetPriceChangeQuery(asset);
-  const tokenSheetRef = useRef<SheetRef>(null);
-
-  function onOpenToken(data: TokenSheetData) {
-    setSheetData(data);
-    // analytics.track('token_sheet_opened', { source: 'action_bar' });
-    tokenSheetRef.current?.present();
-  }
 
   return (
-    <>
-      <TokenActivity
-        ticker={asset.symbol}
-        accountIndex={accountIndex}
-        fingerprint={fingerprint}
-        // TokenDetails is Activity ListHeader to avoid nested scrolling errors
-        ListHeader={
-          <TokenDetails
-            accountDetails={
-              accountIndex !== undefined ? (
-                <AccountAddressList
-                  tokenId={asset.symbol}
-                  accountIndex={accountIndex}
-                  fingerprint={fingerprint ?? ''}
-                />
-              ) : (
-                <AccountList
-                  tokenId={asset.symbol}
-                  selectAccount={({ accountIndex, fingerprint }) =>
-                    onOpenToken({
-                      asset,
-                      accountIndex,
-                      fingerprint,
-                      availableBalance,
-                      quoteBalance,
-                    })
-                  }
-                />
-              )
-            }
-            availableBalance={availableBalance ?? createMoney(0, 'BTC')}
-            assetDescription={assetDescription?.description ?? ''}
-            price={price ?? createMoney(0, 'USD')}
-            changePercent={assetPriceChange?.changePercent ?? 0}
-            quoteBalance={quoteBalance ?? createMoney(0, 'USD')}
-            icon={<TokenIcon ticker={asset.symbol} asset={asset} />}
-            asset={asset}
-          />
-        }
-      />
-
-      <TokenSheet data={sheetData} sheetRef={tokenSheetRef} />
-    </>
+    <TokenActivity
+      ticker={asset.symbol}
+      accountIndex={accountIndex}
+      fingerprint={fingerprint}
+      // TokenDetails is Activity ListHeader to avoid nested scrolling errors
+      ListHeader={
+        <TokenDetails
+          accountDetails={
+            <AccountDetails
+              accountIndex={accountIndex}
+              fingerprint={fingerprint}
+              asset={asset}
+              availableBalance={availableBalance}
+              quoteBalance={quoteBalance}
+            />
+          }
+          availableBalance={availableBalance ?? createMoney(0, 'BTC')}
+          assetDescription={assetDescription?.description ?? ''}
+          price={price ?? createMoney(0, 'USD')}
+          changePercent={assetPriceChange?.changePercent ?? 0}
+          quoteBalance={quoteBalance ?? createMoney(0, 'USD')}
+          icon={<TokenIcon ticker={asset.symbol} asset={asset} />}
+          asset={asset}
+        />
+      }
+    />
   );
 }

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export default function AccountActivityScreen() {`
`43`	`43`	`})}`
`44`	`44`	`</Screen.Title>`
`45`	`45`	`}`
`46`		`- data={activity.value as OnChainActivity[]} // TODO: Unclear why was this cast. Needs clearing up.`
	`46`	`+ data={activity.value.filter(activity => activity && 'asset' in activity)}`
`47`	`47`	`renderItem={({ item }) => <ActivityListItem activity={item} />}`
`48`	`48`	keyExtractor={(_, index) => `activity.${index}`}
`49`	`49`	`ListEmptyComponent={<ActivityEmpty />}`
Original file line number	Diff line number	Diff line change
`@@ -75,3 +75,7 @@ export function useDappSuggestions() {`
`75`	`75`	`export function useSendPasteButton() {`
`76`	`76`	`return useBoolVariation('send_paste_button', false);`
`77`	`77`	`}`
	`78`	`+`
	`79`	`+export function useTokenDetailsFlag() {`
	`80`	`+ return useBoolVariation('token_details', true);`
	`81`	`+}`