chore: refine Wallet UI for StarkScan migration

packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { Transaction, TransactionStatus } from 'types';
+import { ContractFuncName, Transaction, TransactionStatus } from 'types';
 import { TransactionListItemView } from './TransactionListItem.view';
 
 export default {
@@ -24,7 +24,7 @@ const transaction: Transaction = {
       {
         contract:
           '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-        contractFuncName: 'transfer',
+        contractFuncName: ContractFuncName.Transfer,
         contractCallData: [
           '0x6b686ebe2cbd70b37b54df1b9889cc3095b55f386110843912efcaed416ff3f',
           '0x0de0b6b3a7640000',

packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.style.tsx

@@ -1,31 +1,32 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styled from 'styled-components';
-import { TransactionStatusOptions } from 'types';
 import { theme } from 'theme/default';
 import { RoundedIcon } from 'components/ui/atom/RoundedIcon';
+import {
+  TransactionExecutionStatus,
+  TransactionFinalityStatus,
+} from 'starknet';
 
 interface ISpan {
-  status?: TransactionStatusOptions | string;
+  status?: string;
 }
 
 interface IIconeStyled {
   transactionname?: string;
 }
 
-const getStatusColor = (status?: TransactionStatusOptions | string) => {
+const getStatusColor = (status?: string) => {
   switch (status) {
-    case 'ACCEPTED ON L1':
-    case 'ACCEPTED ON L2':
-    case 'SUCCEEDED':
+    case TransactionFinalityStatus.ACCEPTED_ON_L1:
+    case TransactionFinalityStatus.ACCEPTED_ON_L2:
+    case TransactionExecutionStatus.SUCCEEDED:
       return theme.palette.success.dark;
-    case 'RECEIVED':
+    case TransactionFinalityStatus.RECEIVED:
       return theme.palette.info.main;
-    case 'REJECTED':
-    case 'NOT RECEIVED':
-    case 'REVERTED':
+    case TransactionFinalityStatus.NOT_RECEIVED:
+    case TransactionExecutionStatus.REJECTED:
+    case TransactionExecutionStatus.REVERTED:
       return theme.palette.error.main;
-    case 'PENDING':
-      return theme.palette.warning.main;
     default:
       return theme.palette.grey.grey1;
   }

packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/types.ts

@@ -1,9 +1,6 @@
+import { TransactionType } from 'starknet';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import {
-  Transaction,
-  TransactionStatus,
-  StarkscanTransactionType,
-} from 'types';
+import { ContractFuncName, Transaction, TransactionStatus } from 'types';
 import { ethers } from 'ethers';
 
 export const getIcon = (transactionName: string): IconProp => {
@@ -25,29 +22,24 @@ export const getTxnName = (
   contractAddress: string,
 ): string => {
   switch (transaction.txnType) {
-    case StarkscanTransactionType.INVOKE:
+    case TransactionType.INVOKE:
       if (
         transaction.accountCalls &&
-        transaction.accountCalls[contractAddress]
+        transaction.accountCalls[contractAddress] !== undefined
       ) {
-        if (
-          transaction.accountCalls[contractAddress].some(
-            (call) => call.contractFuncName === 'transfer',
-          )
-        ) {
-          return 'Send';
-        } else if (
-          transaction.accountCalls[contractAddress].some(
-            (call) => call.contractFuncName === 'upgrade',
-          )
-        ) {
-          return 'Upgrade Account';
+        for (const call of transaction.accountCalls[contractAddress]) {
+          if (call.contractFuncName === ContractFuncName.Transfer) {
+            return 'Receive';
+          }
+          if (call.contractFuncName === ContractFuncName.Upgrade) {
+            return 'Upgrade Account';
+          }
         }
       }
       return 'Contract Interaction';
-    case StarkscanTransactionType.DEPLOY:
+    case TransactionType.DEPLOY:
       return 'Depoly';
-    case StarkscanTransactionType.DEPLOY_ACCOUNT:
+    case TransactionType.DEPLOY_ACCOUNT:
       return 'Deploy Account';
     default:
       return 'Unknown';
@@ -113,19 +105,24 @@ export const getTxnValues = (
 ) => {
   let txnValue = '0';
   let txnUsdValue = '0';
-  if (transaction.accountCalls && transaction.accountCalls[tokenAddress]) {
+  if (
+    transaction.accountCalls &&
+    transaction.accountCalls[tokenAddress] !== undefined
+  ) {
     txnValue = ethers.utils.formatUnits(
-      transaction.accountCalls[tokenAddress]
-        .filter((call) => call.contractFuncName === 'transfer') // Filter for "transfer" calls
-        .reduce((acc, call) => {
-          // Extract the BigInt value from contractCallData
-          const value = BigInt(
-            call.contractCallData[call.contractCallData.length - 2].toString(),
-          );
-          return acc + value; // Sum the BigInt values
-        }, BigInt(0)),
+      // A transaction can have multiple contract calls with the same tokenAddress.
+      // Hence, it is necessary to sum the amount of all contract calls with the same tokenAddress.
+      transaction.accountCalls[tokenAddress].reduce((acc, call) => {
+        // When the contract function is `transfer`,
+        // there is a amount representing the transfer value of that contract call.
+        if (call.contractFuncName === ContractFuncName.Transfer) {
+          const value = BigInt(call.amount || '0');
+          acc += value;
+        }
+        return acc;
+      }, BigInt(0)),
       decimals,
-    ); // Start with BigInt(0) as the initial value
+    );
 
     txnUsdValue = (parseFloat(txnValue) * toUsdRate).toFixed(2);
   }

packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionsList.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { Transaction, TransactionStatus } from 'types';
+import { ContractFuncName, Transaction, TransactionStatus } from 'types';
 import { TransactionsListView } from './TransactionsList.view';
 
 export default {
@@ -26,7 +26,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x6b686ebe2cbd70b37b54df1b9889cc3095b55f386110843912efcaed416ff3f',
             '0x0de0b6b3a7640000',
@@ -57,7 +57,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x6b686ebe2cbd70b37b54df1b9889cc3095b55f386110843912efcaed416ff3f',
             '0x0de0b6b3a7640000',
@@ -89,7 +89,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x6b686ebe2cbd70b37b54df1b9889cc3095b55f386110843912efcaed416ff3f',
             '0x0de0b6b3a7640000',
@@ -120,7 +120,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x14361d05e560796ad3152e083b609f5205f3bd76039327326746ba7f769a666',
             '0x0de0b6b3a7640000',
@@ -151,7 +151,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x14361d05e560796ad3152e083b609f5205f3bd76039327326746ba7f769a666',
             '0x0de0b6b3a7640000',
@@ -182,7 +182,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x14361d05e560796ad3152e083b609f5205f3bd76039327326746ba7f769a666',
             '0x1bc16d674ec80000',
@@ -212,7 +212,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x256d8f49882cc9366037415f48fa9fd2b5b7344ded7573ebfcef7c90e3e6b75',
             '0x0de0b6b3a7640000',
@@ -243,7 +243,7 @@ const transactions: Transaction[] = [
         {
           contract:
             '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-          contractFuncName: 'transfer',
+          contractFuncName: ContractFuncName.Transfer,
           contractCallData: [
             '0x256d8f49882cc9366037415f48fa9fd2b5b7344ded7573ebfcef7c90e3e6b75',
             '0x3782dace9d900000',

packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx

@@ -32,7 +32,7 @@ import { useStarkNetSnap } from 'services';
 import { ethers } from 'ethers';
 import Toastr from 'toastr2';
 import { constants } from 'starknet';
-import { FeeToken, FeeTokenUnit } from 'types';
+import { ContractFuncName, FeeToken, FeeTokenUnit } from 'types';
 
 interface Props {
   address: string;
@@ -90,7 +90,7 @@ export const SendSummaryModalView = ({
         const callData = address + ',' + amountBN.toString() + ',0';
         estimateFees(
           wallet.erc20TokenBalanceSelected.address,
-          'transfer',
+          ContractFuncName.Transfer,
           callData,
           wallet.accounts[0] as unknown as string,
           chainId,
@@ -183,7 +183,7 @@ export const SendSummaryModalView = ({
       const callData = address + ',' + amountBN.toString() + ',0';
       sendTransaction(
         wallet.erc20TokenBalanceSelected.address,
-        'transfer',
+        ContractFuncName.Transfer,
         callData,
         wallet.accounts[0] as unknown as string,
         gasFees.suggestedMaxFee,

packages/wallet-ui/src/services/useStarkNetSnap.ts

@@ -23,7 +23,7 @@ import {
   getTokenBalanceWithDetails,
 } from '../utils/utils';
 import { setWalletConnection } from '../slices/walletSlice';
-import { Network, StarkscanTransactionType } from '../types';
+import { Network } from '../types';
 import { Account } from '../types';
 import { Erc20TokenBalance, Erc20Token } from '../types';
 import { disableLoading, enableLoadingWithMessage } from '../slices/UISlice';
@@ -586,8 +586,8 @@ export const useStarkNetSnap = () => {
       //Set the deploy transaction
       const deployTransaction = storedTxns.find(
         (txn: Transaction) =>
-          txn.txnType.toLowerCase() === StarkscanTransactionType.DEPLOY ||
-          txn.txnType.toLowerCase() === StarkscanTransactionType.DEPLOY_ACCOUNT,
+          txn.txnType === TransactionType.DEPLOY ||
+          txn.txnType === TransactionType.DEPLOY_ACCOUNT,
       );
       dispatch(setTransactionDeploy(deployTransaction));
 

packages/wallet-ui/src/types/index.ts

@@ -51,19 +51,6 @@ export interface Erc20TokenBalance extends Erc20Token {
   amount: BigNumber;
   usdPrice?: number;
 }
-export type TransactionStatusOptions =
-  | 'Received'
-  | 'Pending'
-  | 'Accepted on L2'
-  | 'Accepted on L1'
-  | 'Rejected'
-  | 'Not Received';
-
-export enum StarkscanTransactionType {
-  DEPLOY = 'DEPLOY',
-  DEPLOY_ACCOUNT = 'DEPLOY_ACCOUNT',
-  INVOKE = 'INVOKE_FUNCTION',
-}
 
 export enum TransactionStatus { // for retrieving txn from Starknet feeder gateway
   NOT_RECEIVED = 'NOT_RECEIVED',
@@ -75,6 +62,11 @@ export enum TransactionStatus { // for retrieving txn from Starknet feeder gatew
   SUCCEEDED = 'SUCCEEDED',
 }
 
+export enum ContractFuncName {
+  Upgrade = 'upgrade',
+  Transfer = 'transfer',
+}
+
 export enum BalanceType {
   Spendable = 'spendable',
   Total = 'total',