feat(HW-664): Open Send screen on tap asset on Tokens screen

src/components/account-info/account-info.tsx

@@ -27,17 +27,18 @@ enum TabNames {
 
 export type AccountInfoProps = {
   wallet: Wallet;
-  onPressInfo: () => void;
-  onSend: () => void;
-  onReceive: () => void;
-  onPressTxRow: (tx: IndexerTransaction) => void;
   available: Balance;
   locked: Balance;
   staked: Balance;
   total: Balance;
   vested: Balance;
   unlock: Date;
   tokens: Record<HaqqEthereumAddress, IToken[]>;
+  onPressInfo: () => void;
+  onSend: () => void;
+  onReceive: () => void;
+  onPressTxRow: (tx: IndexerTransaction) => void;
+  onPressToken?: (wallet: Wallet, token: IToken) => void;
 };
 
 const TAB_INDEX_MAP = {
@@ -55,11 +56,12 @@ export const AccountInfo = observer(
     total,
     unlock,
     vested,
+    tokens,
     onPressInfo,
     onSend,
     onReceive,
     onPressTxRow,
-    tokens,
+    onPressToken,
   }: AccountInfoProps) => {
     const [activeTab, setActiveTab] = useState(TabNames.tokens);
 
@@ -133,6 +135,7 @@ export const AccountInfo = observer(
               <TokenViewer
                 wallet={wallet}
                 data={tokens}
+                onPressToken={onPressToken}
                 style={styles.nftViewerContainer}
               />
             </>

src/components/total-value-info/total-value-info.tsx

@@ -10,6 +10,7 @@ import {Feature, isFeatureEnabled} from '@app/helpers/is-feature-enabled';
 import {useShowNft} from '@app/hooks/nft';
 import {I18N} from '@app/i18n';
 import {Transaction} from '@app/models/transaction';
+import {Wallet} from '@app/models/wallet';
 import {BalanceData, HaqqEthereumAddress, IToken} from '@app/types';
 
 import {TotalValueInfoHeader} from './total-value-info-header';
@@ -37,6 +38,7 @@ export type TotalValueInfoProps = {
   initialTab?: TotalValueTabNames;
   onPressTxRow: (tx: Transaction) => void;
   onPressInfo: () => void;
+  onPressToken?: (wallet: Wallet, token: IToken) => void;
 };
 
 export const TotalValueInfo = observer(
@@ -47,6 +49,7 @@ export const TotalValueInfo = observer(
     initialTab = TotalValueTabNames.tokens,
     onPressTxRow,
     onPressInfo,
+    onPressToken,
   }: TotalValueInfoProps) => {
     const showNft = useShowNft();
     const initialTabName = useMemo(() => {
@@ -128,7 +131,11 @@ export const TotalValueInfo = observer(
           {activeTab === TotalValueTabNames.tokens && (
             <>
               <Spacer height={4} />
-              <TokenViewer data={tokens} style={styles.nftViewerContainer} />
+              <TokenViewer
+                data={tokens}
+                style={styles.nftViewerContainer}
+                onPressToken={onPressToken}
+              />
             </>
           )}
         </First>

src/route-types.ts

@@ -538,8 +538,9 @@ export enum TransactionStackRoutes {
 export type TransactionStackParamList = HomeFeedStackParamList & {
   [TransactionStackRoutes.TransactionAddress]: {
     from: string;
-    to?: string;
-    nft?: NftItem;
+    to?: string | undefined;
+    nft?: NftItem | undefined;
+    token?: IToken | undefined;
   };
   [TransactionStackRoutes.TransactionSum]: {
     from: string;

src/screens/HomeStack/HomeFeedStack/account-info.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo} from 'react';
 
+import {toJS} from 'mobx';
 import {observer} from 'mobx-react';
 
 import {AccountInfo} from '@app/components/account-info';
@@ -9,12 +10,18 @@ import {useTypedNavigation, useTypedRoute} from '@app/hooks';
 import {useWallet} from '@app/hooks/use-wallet';
 import {useWalletsBalance} from '@app/hooks/use-wallets-balance';
 import {Token} from '@app/models/tokens';
-import {HomeStackParamList, HomeStackRoutes} from '@app/route-types';
-import {IndexerTransaction, ModalType} from '@app/types';
+import {Wallet} from '@app/models/wallet';
+import {
+  HomeStackParamList,
+  HomeStackRoutes,
+  TransactionStackParamList,
+  TransactionStackRoutes,
+} from '@app/route-types';
+import {IToken, IndexerTransaction, ModalType} from '@app/types';
 
 export const AccountInfoScreen = observer(() => {
   const route = useTypedRoute<
-    HomeStackParamList,
+    HomeStackParamList & TransactionStackParamList,
     HomeStackRoutes.AccountInfo
   >();
   const navigation = useTypedNavigation<HomeStackParamList>();
@@ -51,6 +58,20 @@ export const AccountInfoScreen = observer(() => {
     [],
   );
 
+  const onPressToken = useCallback(
+    (w: Wallet, token: IToken) => {
+      navigation.navigate(HomeStackRoutes.Transaction, {
+        // @ts-ignore
+        screen: TransactionStackRoutes.TransactionAddress,
+        params: {
+          token: toJS(token),
+          from: w.address!,
+        },
+      });
+    },
+    [navigation],
+  );
+
   if (!wallet) {
     return <Loading />;
   }
@@ -62,6 +83,7 @@ export const AccountInfoScreen = observer(() => {
       onReceive={onReceive}
       onSend={onSend}
       onPressTxRow={onPressTxRow}
+      onPressToken={onPressToken}
       available={available}
       locked={locked}
       staked={staked}

src/screens/HomeStack/TransactionStack/transaction-address.tsx

@@ -88,16 +88,22 @@ export const TransactionAddressScreen = observer(() => {
     async (result: string) => {
       try {
         setLoading(true);
-        const nft = route.params.nft;
+        const {nft, token} = route.params || {};
         if (nft) {
-          navigation.navigate(
+          return navigation.navigate(
             TransactionStackRoutes.TransactionNftConfirmation,
             {
               from: AddressUtils.toEth(route.params.from),
               to: AddressUtils.toEth(result),
               nft,
             },
           );
+        } else if (token) {
+          return navigation.navigate(TransactionStackRoutes.TransactionSum, {
+            from: AddressUtils.toEth(route.params.from),
+            to: AddressUtils.toEth(result),
+            token,
+          });
         } else {
           if (!Token.tokens?.[AddressUtils.toEth(route.params.from)]) {
             const hide = showModal(ModalType.loading, {

src/screens/total-value-info.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useEffect, useMemo} from 'react';
 
+import {toJS} from 'mobx';
 import {observer} from 'mobx-react';
 
 import {TotalValueInfo} from '@app/components/total-value-info';
@@ -12,8 +13,12 @@ import {I18N, getText} from '@app/i18n';
 import {Token} from '@app/models/tokens';
 import {Transaction} from '@app/models/transaction';
 import {Wallet} from '@app/models/wallet';
-import {HomeStackParamList, HomeStackRoutes} from '@app/route-types';
-import {ModalType} from '@app/types';
+import {
+  HomeStackParamList,
+  HomeStackRoutes,
+  TransactionStackRoutes,
+} from '@app/route-types';
+import {IToken, ModalType} from '@app/types';
 import {calculateBalances} from '@app/utils';
 
 export const TotalValueInfoScreen = observer(() => {
@@ -51,6 +56,20 @@ export const TotalValueInfoScreen = observer(() => {
     [],
   );
 
+  const onPressToken = useCallback(
+    (w: Wallet, token: IToken) => {
+      navigation.navigate(HomeStackRoutes.Transaction, {
+        // @ts-ignore
+        screen: TransactionStackRoutes.TransactionAddress,
+        params: {
+          token: toJS(token),
+          from: w.address!,
+        },
+      });
+    },
+    [navigation],
+  );
+
   if (!wallets?.length) {
     return <Loading />;
   }
@@ -59,10 +78,11 @@ export const TotalValueInfoScreen = observer(() => {
     <TotalValueInfo
       balance={calculatedBalance}
       addressList={addressList}
-      onPressInfo={onPressInfo}
-      onPressTxRow={onPressTxRow}
       tokens={Token.tokens}
       initialTab={route?.params?.tab}
+      onPressInfo={onPressInfo}
+      onPressTxRow={onPressTxRow}
+      onPressToken={onPressToken}
     />
   );
 });