From 89b3bd4b1248c529a34a48812319bbc94bad5e84 Mon Sep 17 00:00:00 2001 From: stanleyyuen <102275989+stanleyyconsensys@users.noreply.github.com> Date: Thu, 12 Dec 2024 11:24:16 +0800 Subject: [PATCH] chore: refine wallet ui for starkscan migration --- .../TransactionListItem.stories.tsx | 4 +- .../TransactionListItem.style.tsx | 25 ++++---- .../TransactionListItem/types.ts | 61 +++++++++---------- .../TransactionsList.stories.tsx | 18 +++--- .../SendSummaryModal.view.tsx | 6 +- .../wallet-ui/src/services/useStarkNetSnap.ts | 6 +- packages/wallet-ui/src/types/index.ts | 18 ++---- 7 files changed, 64 insertions(+), 74 deletions(-) diff --git a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.stories.tsx b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.stories.tsx index 5d97f5da..ab132ab4 100644 --- a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.stories.tsx +++ b/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', diff --git a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.style.tsx b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.style.tsx index e667e495..9291512a 100644 --- a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.style.tsx +++ b/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; } diff --git a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/types.ts b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/types.ts index 02227692..2cbfea46 100644 --- a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionListItem/types.ts +++ b/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); } diff --git a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionsList.stories.tsx b/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionsList.stories.tsx index 263f296f..cefb872c 100644 --- a/packages/wallet-ui/src/components/ui/molecule/TransactionsList/TransactionsList.stories.tsx +++ b/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', diff --git a/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx b/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx index 7423701e..95807fbf 100644 --- a/packages/wallet-ui/src/components/ui/organism/Header/SendSummaryModal/SendSummaryModal.view.tsx +++ b/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, diff --git a/packages/wallet-ui/src/services/useStarkNetSnap.ts b/packages/wallet-ui/src/services/useStarkNetSnap.ts index ef0a13a7..0370439b 100644 --- a/packages/wallet-ui/src/services/useStarkNetSnap.ts +++ b/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)); diff --git a/packages/wallet-ui/src/types/index.ts b/packages/wallet-ui/src/types/index.ts index 937e05ad..657538af 100644 --- a/packages/wallet-ui/src/types/index.ts +++ b/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',