436 feature complete type checks on token transactions

src/background/controller/wallet.ts

@@ -9,6 +9,7 @@ import { ethErrors } from 'eth-rpc-errors';
 import * as ethUtil from 'ethereumjs-util';
 import { getApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth/web-extension';
+import type { TokenInfo } from 'flow-native-token-registry';
 import { encode } from 'rlp';
 import web3, { TransactionError } from 'web3';
 
@@ -1935,11 +1936,11 @@ export class WalletController extends BaseController {
 
   transferFTToEvmV2 = async (
     vaultIdentifier: string,
-    amount = '1.0',
-    recipient
+    amount = '0.0',
+    recipient: string
   ): Promise<string> => {
     await this.getNetwork();
-    const formattedAmount = parseFloat(amount).toFixed(8);
+    const formattedAmount = new BN(amount).decimalPlaces(8, BN.ROUND_DOWN).toString();
 
     const script = await getScripts('bridge', 'bridgeTokensToEvmAddressV2');
 
@@ -1962,9 +1963,9 @@ export class WalletController extends BaseController {
 
   transferFTFromEvm = async (
     flowidentifier: string,
-    amount = '1.0',
+    amount: string,
     receiver: string,
-    tokenResult
+    tokenResult: TokenInfo
   ): Promise<string> => {
     await this.getNetwork();
     const amountStr = amount.toString();
@@ -2001,9 +2002,9 @@ export class WalletController extends BaseController {
     return txID;
   };
 
-  withdrawFlowEvm = async (amount = '1.0', address: string): Promise<string> => {
+  withdrawFlowEvm = async (amount = '0.0', address: string): Promise<string> => {
     await this.getNetwork();
-    const formattedAmount = parseFloat(amount).toFixed(8);
+    const formattedAmount = new BN(amount).decimalPlaces(8, BN.ROUND_DOWN).toString();
     const script = await getScripts('evm', 'withdrawCoa');
 
     const txID = await userWalletService.sendTransaction(script, [

src/ui/views/InnerRoute.tsx

@@ -9,6 +9,7 @@ import { useWallet } from 'ui/utils';
 import Deposit from '../views/Deposit';
 import Enable from '../views/Enable';
 import Send from '../views/Send';
+//Transaction TODO: this is not used anymore, should be removed
 import Swap from '../views/Swap';
 
 import Dashboard from './Dashboard';

src/ui/views/Send/SendAmount.tsx

@@ -52,7 +52,7 @@ const SendAmount = () => {
   const [coinList, setCoinList] = useState<CoinItem[]>([]);
   const [isConfirmationOpen, setConfirmationOpen] = useState(false);
   const [exceed, setExceed] = useState(false);
-  const [amount, setAmount] = useState<string | undefined>(undefined);
+  const [amount, setAmount] = useState<string>('0');
   const [secondAmount, setSecondAmount] = useState('0.0');
   const [validated, setValidated] = useState<any>(null);
   const [userInfo, setUser] = useState<Contact>(USER_CONTACT);

src/ui/views/Send/SendEth/EvmConfirmation.tsx → src/ui/views/Send/SendEth/EvmToEvmConfirmation.tsx

@@ -14,15 +14,15 @@ import IconNext from 'ui/FRWAssets/svg/next.svg';
 import { LLSpinner, LLProfile, FRWProfile } from 'ui/FRWComponent';
 import { useWallet } from 'ui/utils';
 
-interface ToEthConfirmationProps {
+interface EvmConfirmationProps {
   isConfirmationOpen: boolean;
   data: any;
   handleCloseIconClicked: () => void;
   handleCancelBtnClicked: () => void;
   handleAddBtnClicked: () => void;
 }
 
-const ToEthConfirmation = (props: ToEthConfirmationProps) => {
+const EvmToEvmConfirmation = (props: EvmConfirmationProps) => {
   const usewallet = useWallet();
   const history = useHistory();
   const [sending, setSending] = useState(false);
@@ -84,8 +84,8 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
   }, []);
 
   const transferToken = useCallback(async () => {
-    const amount = props.data.amount * 1e18;
     const network = await usewallet.getNetwork();
+    //Transaction TODO: tokeninfo getting directly from api using tokenSymbol, need to add filter on contractName and address
     const tokenResult = await usewallet.openapi.getTokenInfo(props.data.tokenSymbol, network);
 
     const amountStr = props.data.amount.toString();
@@ -375,4 +375,4 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
   );
 };
 
-export default ToEthConfirmation;
+export default EvmToEvmConfirmation;

src/ui/views/Send/SendEth/ToEthConfirmation.tsx → src/ui/views/Send/SendEth/FlowToEVMConfirmation.tsx

@@ -1,6 +1,7 @@
 import CloseIcon from '@mui/icons-material/Close';
 import InfoIcon from '@mui/icons-material/Info';
 import { Box, Typography, Drawer, Stack, Grid, CardMedia, IconButton, Button } from '@mui/material';
+import BN from 'bignumber.js';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -20,7 +21,7 @@ interface ToEthConfirmationProps {
   handleAddBtnClicked: () => void;
 }
 
-const ToEthConfirmation = (props: ToEthConfirmationProps) => {
+const FlowToEVMConfirmation = (props: ToEthConfirmationProps) => {
   const wallet = useWallet();
   const history = useHistory();
   const [sending, setSending] = useState(false);
@@ -79,7 +80,7 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
   }, []);
 
   const transferFlow = useCallback(async () => {
-    const amount = parseFloat(props.data.amount).toFixed(8);
+    const amount = new BN(props.data.amount).decimalPlaces(8, BN.ROUND_DOWN).toString();
 
     wallet
       .transferFlowEvm(props.data.contact.address, amount)
@@ -106,17 +107,10 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
   }, [history, props, wallet]);
 
   const transferFt = useCallback(async () => {
-    const amount = props.data.amount * 1e18;
     setSending(true);
-    // TB: I don't know why this is needed
-    const encodedData = props.data.erc20Contract.methods
-      .transfer(props.data.contact.address, amount)
-      .encodeABI();
+
     const tokenResult = await wallet.openapi.getTokenInfo(props.data.tokenSymbol);
-    // Note that gas is not used in this function
-    const gas = '1312d00';
-    const value = parseFloat(props.data.amount).toFixed(8);
-    const data = encodedData;
+    const value = new BN(props.data.amount).decimalPlaces(8, BN.ROUND_DOWN).toString();
 
     const address = tokenResult!.address.startsWith('0x')
       ? tokenResult!.address.slice(2)
@@ -389,4 +383,4 @@ const ToEthConfirmation = (props: ToEthConfirmationProps) => {
   );
 };
 
-export default ToEthConfirmation;
+export default FlowToEVMConfirmation;

src/ui/views/Send/SendEth/index.tsx

@@ -17,8 +17,9 @@ import { useWallet } from 'ui/utils';
 import CancelIcon from '../../../../components/iconfont/IconClose';
 import TransferAmount from '../TransferAmount';
 
-import EvmConfirmation from './EvmConfirmation';
-import ToEthConfirmation from './ToEthConfirmation';
+import EvmToEvmConfirmation from './EvmToEvmConfirmation';
+import FlowToEVMConfirmation from './FlowToEVMConfirmation';
+
 interface ContactState {
   contact: Contact;
 }
@@ -304,7 +305,7 @@ const SendEth = () => {
             </Button>
           </Box>
           {childType === 'evm' ? (
-            <EvmConfirmation
+            <EvmToEvmConfirmation
               isConfirmationOpen={isConfirmationOpen}
               data={{
                 contact: location.state.contact,
@@ -322,7 +323,7 @@ const SendEth = () => {
               }}
             />
           ) : (
-            <ToEthConfirmation
+            <FlowToEVMConfirmation
               isConfirmationOpen={isConfirmationOpen}
               data={{
                 contact: location.state.contact,

src/ui/views/Send/TransferConfirmation.tsx

@@ -1,6 +1,7 @@
 import CloseIcon from '@mui/icons-material/Close';
 import InfoIcon from '@mui/icons-material/Info';
 import { Box, Typography, Drawer, Stack, Grid, CardMedia, IconButton, Button } from '@mui/material';
+import BN from 'bignumber.js';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -55,6 +56,7 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
     '#41CC5D',
     '#41CC5D',
   ];
+
   const startCount = useCallback(() => {
     let count = 0;
     let intervalId;
@@ -82,17 +84,35 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
     setOccupied(false);
   }, []);
 
-  const transferToken = async () => {
-    // TODO: Replace it with real data
-    if (props.data.childType === 'evm') {
-      withDrawEvm();
-      return;
-    } else if (props.data.childType) {
-      sendFromChild();
-      return;
+  const runTransaction = async () => {
+    setSending(true);
+    try {
+      if (props.data.childType === 'evm') {
+        await handleEvmTransfer();
+      } else if (props.data.childType) {
+        await tokenFromChild();
+      } else {
+        await transferTokenOnCadence();
+      }
+    } catch {
+      setFailed(true);
+    } finally {
+      setSending(false);
     }
+  };
+
+  const handleEvmTransfer = async () => {
+    if (props.data.tokenSymbol.toLowerCase() === 'flow') {
+      await flowFromEvm();
+    } else {
+      await otherFTFromEvm();
+    }
+  };
+
+  const transferTokenOnCadence = async () => {
     setSending(true);
-    const amount = parseFloat(props.data.amount).toFixed(8);
+    const amount = new BN(props.data.amount).decimalPlaces(8, BN.ROUND_DOWN).toString();
+
     wallet
       .transferInboxTokens(props.data.tokenSymbol, props.data.contact.address, amount)
       .then(async (txID) => {
@@ -117,8 +137,9 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
       });
   };
 
-  const sendFromChild = async () => {
-    const amount = parseFloat(props.data.amount).toFixed(8);
+  const tokenFromChild = async () => {
+    const amount = new BN(props.data.amount).decimalPlaces(8, BN.ROUND_DOWN).toString();
+
     wallet
       .sendFTfromChild(
         props.data.userContact.address,
@@ -149,21 +170,9 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
       });
   };
 
-  const withDrawEvm = async () => {
-    console.log('transferToken ->', props.data);
-    setSending(true);
-    if (props.data.tokenSymbol.toLowerCase() === 'flow') {
-      transferFlow();
-    } else {
-      transferFt();
-    }
-  };
-
-  const transferFlow = async () => {
-    const amount = parseFloat(props.data.amount).toFixed(8);
-    // const txID = await wallet.transferTokens(props.data.tokenSymbol, props.data.contact.address, amount);
+  const flowFromEvm = async () => {
     wallet
-      .withdrawFlowEvm(amount, props.data.contact.address)
+      .withdrawFlowEvm(props.data.amount, props.data.contact.address)
       .then(async (txID) => {
         await wallet.setRecent(props.data.contact);
         wallet.listenTransaction(
@@ -185,7 +194,7 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
       });
   };
 
-  const transferFt = async () => {
+  const otherFTFromEvm = async () => {
     const tokenResult = await wallet.openapi.getEvmTokenInfo(props.data.tokenSymbol);
     console.log('tokenResult ', tokenResult, props.data.amount);
 
@@ -194,7 +203,7 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
         tokenResult!['flowIdentifier'],
         props.data.amount,
         props.data.contact.address,
-        tokenResult
+        tokenResult!
       )
       .then(async (txID) => {
         await wallet.setRecent(props.data.contact);
@@ -396,7 +405,7 @@ const TransferConfirmation = (props: TransferConfirmationProps) => {
       />
 
       <Button
-        onClick={transferToken}
+        onClick={runTransaction}
         disabled={sending || occupied}
         variant="contained"
         color="success"

src/ui/views/Send/index.tsx

@@ -521,7 +521,7 @@ const Send = () => {
                     isLoading={isLoading}
                     handleClick={(eachgroup) => {
                       const isEvmAddress = isValidEthereumAddress(eachgroup.address);
-
+                      //Transaction TODO: make these two routes and components structure match
                       const pathname = isEvmAddress
                         ? '/dashboard/wallet/sendeth'
                         : '/dashboard/wallet/sendAmount';