chore: update wallet-ui to match new getTransactions rpc format (#459)

* feat: add stark scan client * chore: add starkscan config * chore: lint * chore: add interface * chore: support multiple txn * chore: update starkscan * chore: update stark scan client * chore: update contract func name * chore: fix test * chore: update data client * chore: re-structure starkscan type * chore: add test coverage * chore: factory and config * chore: add backward compatibility for transactions type * chore: add comment * chore: lint * chore: resolve review comment * chore: change dataVersion to enum * chore: lint * chore: update test helper and refactor ContractAddressFilter * chore: lint * chore: add test for dataVersion filter * chore: update txn state mgr test * chore: update search condition * chore: update starkscan to handle missing selector_name * chore: apply starkscan for list transaction * chore: update list transactions handle * chore: resolve comment * chore: update wallet-ui to handle new starkNet_getTransactions * chore: rename type * chore: remove unecessary input param * chore: remove unecessary input param * chore: change explorer link to starkscan * chore: fix comments --------- Co-authored-by: stanleyyuen <[email protected]>
Consensys · Dec 11, 2024 · 789b8bd · 789b8bd
1 parent 6619c62
commit 789b8bd
Show file tree

Hide file tree

Showing 9 changed files with 280 additions and 159 deletions.
diff --git a/...mponents/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.stories.tsx b/...mponents/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { Transaction } from 'types';
+import { Transaction, TransactionStatus } from 'types';
 import { TransactionListItemView } from './TransactionListItem.view';
 
 export default {
@@ -12,18 +12,30 @@ const transaction: Transaction = {
   txnType: 'invoke',
   chainId: '0x534e5f5345504f4c4941',
   senderAddress:
-    '0x05ccc9fc2d7ce9e2b0f2cee1a4b898570bb4d03ba23ad6f72f0db971bd04552c',
+    '0x5ccc9fc2d7ce9e2b0f2cee1a4b898570bb4d03ba23ad6f72f0db971bd04552c',
   contractAddress:
     '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
-  contractFuncName: 'transfer',
-  contractCallData: [
-    '0x6b686ebe2cbd70b37b54df1b9889cc3095b55f386110843912efcaed416ff3f',
-    '0x0de0b6b3a7640000',
-  ],
-  timestamp: 1655705597,
-  status: 'Accepted on L1',
-  eventIds: ['245417_20_0'],
+  executionStatus: TransactionStatus.SUCCEEDED,
+  finalityStatus: TransactionStatus.RECEIVED,
   failureReason: '',
+  timestamp: 1655869759,
+  accountCalls: {
+    '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7': [
+      {
+        contract:
+          '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7',
+        contractFuncName: 'transfer',
+        contractCallData: [
+          '0x6b686ebe2cbd70b37b54df1b9889cc3095b55f386110843912efcaed416ff3f',
+          '0x0de0b6b3a7640000',
+        ],
+      },
+    ],
+  },
+  maxFee: null,
+  actualFee: null,
+  version: 1,
+  dataVersion: '2',
 };
 
 export const FullWidth = () => (

diff --git a/.../components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx b/.../components/ui/molecule/TransactionsList/TransactionListItem/TransactionListItem.view.tsx
@@ -21,7 +21,6 @@ import {
   getTxnFailureReason,
   getTxnName,
   getTxnStatus,
-  getTxnToFromLabel,
   getTxnValues,
 } from './types';
 import { getHumanReadableAmount, openExplorerTab } from 'utils/utils';
@@ -32,22 +31,25 @@ interface Props {
 
 export const TransactionListItemView = ({ transaction }: Props) => {
   const wallet = useAppSelector((state) => state.wallet);
+  const tokenAddress = wallet.erc20TokenBalanceSelected.address;
   const [currencySymbol, setCurrencySymbol] = useState('N/A');
   const [txnValue, setTxnValue] = useState('0');
   const [txnUsdValue, setTxnUsdValue] = useState('0.00');
 
   useEffect(() => {
     const fetchData = async () => {
+      // Find the matching token
       const foundToken = wallet.erc20TokenBalances.find((token) =>
         ethers.BigNumber.from(token.address).eq(
-          ethers.BigNumber.from(transaction.contractAddress),
+          ethers.BigNumber.from(tokenAddress),
         ),
       );
       if (foundToken) {
         const txnValues = getTxnValues(
           transaction,
           foundToken.decimals,
           foundToken.usdPrice,
+          tokenAddress,
         );
         setTxnValue(getHumanReadableAmount(foundToken, txnValues.txnValue));
         setTxnUsdValue(txnValues.txnUsdValue);
@@ -58,10 +60,10 @@ export const TransactionListItemView = ({ transaction }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const txnName = getTxnName(transaction);
+  const txnName = getTxnName(transaction, tokenAddress);
   const txnDate = getTxnDate(transaction);
   const txnStatus = getTxnStatus(transaction);
-  const txnToFromLabel = getTxnToFromLabel(transaction);
+  const txnToFromLabel = '';
   const txnFailureReason = getTxnFailureReason(transaction);
   return (
     <Wrapper

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
@@ -1,6 +1,9 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Transaction, TransactionStatus, VoyagerTransactionType } from 'types';
-import { shortenAddress } from 'utils/utils';
+import {
+  Transaction,
+  TransactionStatus,
+  StarkscanTransactionType,
+} from 'types';
 import { ethers } from 'ethers';
 
 export const getIcon = (transactionName: string): IconProp => {
@@ -17,23 +20,38 @@ export const getIcon = (transactionName: string): IconProp => {
   }
 };
 
-export const getTxnName = (transaction: Transaction): string => {
-  if (transaction.txnType.toLowerCase() === VoyagerTransactionType.INVOKE) {
-    if (transaction.contractFuncName.toLowerCase() === 'transfer') {
-      return 'Send';
-    } else if (transaction.contractFuncName.toLowerCase() === 'upgrade') {
-      return 'Upgrade Account';
-    }
-  } else if (
-    transaction.txnType.toLowerCase() === VoyagerTransactionType.DEPLOY
-  ) {
-    return 'Deploy';
-  } else if (
-    transaction.txnType.toLowerCase() === VoyagerTransactionType.DEPLOY_ACCOUNT
-  ) {
-    return 'Deploy Account';
+export const getTxnName = (
+  transaction: Transaction,
+  contractAddress: string,
+): string => {
+  switch (transaction.txnType) {
+    case StarkscanTransactionType.INVOKE:
+      if (
+        transaction.accountCalls &&
+        transaction.accountCalls[contractAddress]
+      ) {
+        if (
+          transaction.accountCalls[contractAddress].some(
+            (call) => call.contractFuncName === 'transfer',
+          )
+        ) {
+          return 'Send';
+        } else if (
+          transaction.accountCalls[contractAddress].some(
+            (call) => call.contractFuncName === 'upgrade',
+          )
+        ) {
+          return 'Upgrade Account';
+        }
+      }
+      return 'Contract Interaction';
+    case StarkscanTransactionType.DEPLOY:
+      return 'Depoly';
+    case StarkscanTransactionType.DEPLOY_ACCOUNT:
+      return 'Deploy Account';
+    default:
+      return 'Unknown';
   }
-  return 'Unknown';
 };
 
 export const getTxnDate = (transaction: Transaction): string => {
@@ -50,6 +68,9 @@ export const getTxnDate = (transaction: Transaction): string => {
 
 export const getTxnStatus = (transaction: Transaction): string => {
   let statusStr = [];
+  if (transaction.executionStatus) {
+    statusStr.push(formatStatus(transaction.executionStatus));
+  }
   if (transaction.finalityStatus === transaction.executionStatus) {
     return transaction.finalityStatus
       ? formatStatus(transaction.finalityStatus)
@@ -58,9 +79,6 @@ export const getTxnStatus = (transaction: Transaction): string => {
   if (transaction.finalityStatus) {
     statusStr.push(formatStatus(transaction.finalityStatus));
   }
-  if (transaction.executionStatus) {
-    statusStr.push(formatStatus(transaction.executionStatus));
-  }
   return statusStr.join(' / ');
 };
 
@@ -78,29 +96,6 @@ export const formatStatus = (status: string): string => {
     .join(' ');
 };
 
-export const getTxnToFromLabel = (transaction: Transaction): string => {
-  const txnName = getTxnName(transaction);
-  switch (txnName) {
-    case 'Send':
-      // TODO : This will not be needed after getTransactions revamp.
-      if (transaction.contractCallData.length === 3) {
-        return (
-          'To ' + shortenAddress(transaction.contractCallData[0].toString())
-        );
-      } else {
-        return (
-          'To ' + shortenAddress(transaction.contractCallData[4].toString())
-        );
-      }
-    case 'Receive':
-      return 'From ' + shortenAddress(transaction.senderAddress);
-    case 'Deploy':
-      return 'To ' + shortenAddress(transaction.contractAddress);
-    default:
-      return '';
-  }
-};
-
 export const getTxnFailureReason = (transaction: Transaction): string => {
   return transaction.executionStatus &&
     transaction.executionStatus.toLowerCase() ===
@@ -114,24 +109,25 @@ export const getTxnValues = (
   transaction: Transaction,
   decimals: number = 18,
   toUsdRate: number = 0,
+  tokenAddress: string,
 ) => {
   let txnValue = '0';
   let txnUsdValue = '0';
+  if (transaction.accountCalls && transaction.accountCalls[tokenAddress]) {
+    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)),
+      decimals,
+    ); // Start with BigInt(0) as the initial value
 
-  const txnName = getTxnName(transaction);
-  switch (txnName) {
-    case 'Send':
-    case 'Receive':
-      txnValue = ethers.utils.formatUnits(
-        transaction.contractCallData[
-          transaction.contractCallData.length - 2
-        ].toString(),
-        decimals,
-      );
-      txnUsdValue = (parseFloat(txnValue) * toUsdRate).toFixed(2);
-      break;
-    default:
-      break;
+    txnUsdValue = (parseFloat(txnValue) * toUsdRate).toFixed(2);
   }
 
   return { txnValue, txnUsdValue };