feat(mobile): implement token details, ref LEA-3015

Author: pete-watters

apps/mobile/src/app/account/[accountId]/activity.tsx

@@ -8,7 +8,6 @@ import { deserializeAccountId } from '@/store/accounts/accounts';
 import { i18n } from '@lingui/core';
 import { useLocalSearchParams } from 'expo-router';
 
-import { OnChainActivity } from '@leather.io/models';
 import { Text } from '@leather.io/ui/native';
 
 export default function AccountActivityScreen() {
@@ -43,7 +42,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 />}

apps/mobile/src/app/activity/index.tsx

@@ -6,7 +6,6 @@ import { RefreshControl, useRefreshHandler } from '@/features/refresh-control/re
 import { useTotalActivity } from '@/queries/activity/account-activity.query';
 import { t } from '@lingui/macro';
 
-import { OnChainActivity } from '@leather.io/models';
 import { Text } from '@leather.io/ui/native';
 
 export default function ActivityScreen() {
@@ -22,7 +21,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 />}

apps/mobile/src/components/summary-table.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+
+import { Box, HasChildren, Text } from '@leather.io/ui/native';
+
+export function SummaryTableRoot({ children }: HasChildren) {
+  return <Box>{children}</Box>;
+}
+
+function SummaryTableLabel({ children }: HasChildren) {
+  return (
+    <Box flex={1}>
+      <Text variant="label02" color="ink.text-subdued">
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+function SummaryTableValue({ children }: HasChildren) {
+  return (
+    <Box flex={1} alignItems="flex-end">
+      <Text variant="label02">{children}</Text>
+    </Box>
+  );
+}
+
+interface SummaryTableItem {
+  label: string;
+  value: ReactNode;
+}
+
+export function SummaryTableItem({ label, value }: SummaryTableItem) {
+  return (
+    <Box flexDirection="row" py="2">
+      <SummaryTableLabel>{label}</SummaryTableLabel>
+      <SummaryTableValue>{value}</SummaryTableValue>
+    </Box>
+  );
+}
+
+export const SummaryTable = {
+  Root: SummaryTableRoot,
+  Item: SummaryTableItem,
+  Value: SummaryTableValue,
+  Label: SummaryTableLabel,
+};

apps/mobile/src/features/account/account-list/account-list-item.tsx

@@ -7,7 +7,8 @@ interface AccountListItemProps extends PressableProps {
   icon: React.ReactNode;
   iconTestID?: string;
   testID?: string;
-  walletName?: string;
+  walletName?: React.ReactNode;
+  chevron?: React.ReactNode;
 }
 export function AccountListItem({
   accountName,
@@ -18,19 +19,23 @@ export function AccountListItem({
   onPress,
   testID,
   walletName,
+  chevron,
   ...rest
 }: AccountListItemProps) {
   return (
     <Cell.Root pressable={true} disabled={!onPress} onPress={onPress} testID={testID} {...rest}>
       <Cell.Icon testID={iconTestID}>{icon}</Cell.Icon>
       <Cell.Content>
-        <Cell.Label variant="primary">{accountName}</Cell.Label>
+        <Cell.Label variant="primary" numberOfLines={1} ellipsizeMode="tail">
+          {accountName}
+        </Cell.Label>
         <Cell.Label variant="secondary">{walletName}</Cell.Label>
       </Cell.Content>
       <Cell.Aside>
         <Cell.Label variant="primary">{balance}</Cell.Label>
         <Cell.Label variant="secondary">{address}</Cell.Label>
       </Cell.Aside>
+      {chevron && <Cell.Icon>{chevron}</Cell.Icon>}
     </Cell.Root>
   );
 }

apps/mobile/src/features/account/account-selector/account-selector-sheet-header.tsx

@@ -16,7 +16,7 @@ import {
 interface AccountSelectorHeaderProps {
   sheetRef: RefObject<SheetRef | null>;
 }
-// TODO: refactor HeaderLayout so that we can use it here
+
 export function AccountSelectorHeader({ sheetRef }: AccountSelectorHeaderProps) {
   return (
     <Box alignItems="center" flexDirection="row" justifyContent="space-between" py="5">

apps/mobile/src/features/account/components/account-avatar.tsx

@@ -70,7 +70,7 @@ export function AccountAvatar(props: AccountAvatarProps) {
       alignItems="center"
       {...props}
     >
-      {Icon && <Icon />}
+      {Icon && <Icon {...props} />}
     </SquircleBox>
   );
 }

apps/mobile/src/features/account/components/account-card.tsx

@@ -3,7 +3,7 @@ import { ComponentType, ReactNode } from 'react';
 import { Card } from '@/components/card';
 import { Loading } from '@/components/loading/loading';
 import { AccountAvatar } from '@/features/account/components/account-avatar';
-import { AppIcons } from '@/features/accounts/components/app-icons';
+import { AppIcons } from '@/features/account/components/app-icons';
 import { AccountIcon } from '@/store/accounts/utils';
 
 import { Box, HasChildren, PressableProps, Text } from '@leather.io/ui/native';

…atures/accounts/components/app-icons.tsx …eatures/account/components/app-icons.tsxapps/mobile/src/features/accounts/components/app-icons.tsx renamed to apps/mobile/src/features/account/components/app-icons.tsx apps/mobile/src/features/accounts/components/app-icons.tsx renamed to apps/mobile/src/features/account/components/app-icons.tsx

@@ -1,42 +1,101 @@
+import { useRef, useState } from 'react';
+
 import {
   BitcoinBalance,
   BitcoinBalanceByAccount,
 } from '@/features/balances/bitcoin/bitcoin-balance';
 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';
 
-import { AccountId } from '@leather.io/models';
-import { Box } from '@leather.io/ui/native';
+import { AccountId, FungibleCryptoAsset, Money } from '@leather.io/models';
+import { Box, SheetRef } from '@leather.io/ui/native';
 
 export interface BalanceViewProps {
   mode: ViewMode;
+  onPress?: ({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) => void;
+}
+
+export interface OnOpenTokenProps {
+  asset: FungibleCryptoAsset;
+  availableBalance: Money;
+  quoteBalance: Money;
 }
 
 export function AllAccountBalances({ mode }: BalanceViewProps) {
+  const [sheetData, setSheetData] = useState<TokenSheetData | null>(null);
   const runesFlag = useRunesFlag();
+  const tokenDetailsFlag = useTokenDetailsFlag();
+
+  const tokenSheetRef = useRef<SheetRef>(null);
+
+  function onOpenToken({ asset, availableBalance, quoteBalance }: OnOpenTokenProps) {
+    setSheetData({ asset, availableBalance, quoteBalance });
+    // analytics.track('token_sheet_opened', { source: 'action_bar' });
+    tokenSheetRef.current?.present();
+  }
+
+  const onPressToken = tokenDetailsFlag ? onOpenToken : undefined;
+
   return (
-    <Box flex={1} height="100%">
-      <BitcoinBalance />
-      <StacksBalance />
-      <Sip10Balance mode={mode} />
-      {runesFlag && <RunesBalance mode={mode} />}
-    </Box>
+    <>
+      <Box flex={1} height="100%">
+        <BitcoinBalance onPress={onPressToken} />
+        <StacksBalance onPress={onPressToken} />
+        <Sip10Balance mode={mode} onPress={onPressToken} />
+        {runesFlag && <RunesBalance mode={mode} />}
+      </Box>
+      <TokenSheet data={sheetData} sheetRef={tokenSheetRef} />
+    </>
   );
 }
 
 export function AccountBalances({ mode, fingerprint, accountIndex }: AccountId & BalanceViewProps) {
+  const [sheetData, setSheetData] = useState<TokenSheetData | null>(null);
   const runesFlag = useRunesFlag();
+
+  const tokenSheetRef = useRef<SheetRef>(null);
+  const tokenDetailsFlag = useTokenDetailsFlag();
+
+  function onOpenToken(data: TokenSheetData) {
+    setSheetData(data);
+    // analytics.track('token_sheet_opened', { source: 'action_bar' });
+    tokenSheetRef.current?.present();
+  }
+
+  const onPressToken = tokenDetailsFlag ? onOpenToken : undefined;
+
   return (
-    <Box>
-      <BitcoinBalanceByAccount fingerprint={fingerprint} accountIndex={accountIndex} />
-      <StacksBalanceByAccount fingerprint={fingerprint} accountIndex={accountIndex} />
-      <Sip10BalanceByAccount mode={mode} fingerprint={fingerprint} accountIndex={accountIndex} />
-      {runesFlag && (
-        <RunesBalanceByAccount mode={mode} fingerprint={fingerprint} accountIndex={accountIndex} />
-      )}
-    </Box>
+    <>
+      <Box>
+        <BitcoinBalanceByAccount
+          onPress={onPressToken}
+          fingerprint={fingerprint}
+          accountIndex={accountIndex}
+        />
+        <StacksBalanceByAccount
+          onPress={onPressToken}
+          fingerprint={fingerprint}
+          accountIndex={accountIndex}
+        />
+        <Sip10BalanceByAccount
+          mode={mode}
+          fingerprint={fingerprint}
+          accountIndex={accountIndex}
+          onPress={onPressToken}
+        />
+        {runesFlag && (
+          <RunesBalanceByAccount
+            mode={mode}
+            fingerprint={fingerprint}
+            accountIndex={accountIndex}
+          />
+        )}
+      </Box>
+      <TokenSheet data={sheetData} sheetRef={tokenSheetRef} />
+    </>
   );
 }