immutable · keithbro-imx · Aug 15, 2025 · Aug 15, 2025 · Aug 15, 2025 · Aug 15, 2025
@@ -1,5 +1,5 @@
 module.exports = {
-  "extends": ["../../../.eslintrc"],
+  "extends": ["../../../.eslintrc", 'plugin:react-hooks/recommended'],
   "ignorePatterns": ["jest.config.*", "rollup.config.*"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

@@ -103,8 +103,8 @@
     "typegen": "tsc --customConditions default --emitDeclarationOnly --outDir dist/types",
     "pack:root": "pnpm pack --pack-destination $(dirname $(pnpm root -w))",
     "build:local": "pnpm build && mkdir -p ../widgets-sample-app/public/lib/js && cp dist/browser/*.js ../widgets-sample-app/public/lib/js/",
-    "lint": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0",
-    "lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0 --fix",
+    "lint": "eslint ./src --ext .ts,.jsx,.tsx",
+    "lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --fix",
     "start": "NODE_ENV=development rollup --config rollup.config.js --watch",
     "test": "jest test --passWithNoTests",
     "test:watch": "jest test --passWithNoTests --watch",

@@ -50,6 +50,12 @@ export function NoTransactions(
         >
           {t('views.TRANSACTIONS.status.noTransactions.body')}
         </Body>
+        <Body
+          size="small"
+          sx={noTransactionsBodyStyle}
+        >
+          Can&apos;t find your pending withdrawal? Try connecting with your L1 wallet.
+        </Body>
         {isPassport && (
           <Body
             size="small"

@@ -91,7 +91,7 @@ export function TransactionItemWithdrawPending({
   };
 
   return (
-    <Box testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}`} sx={containerStyles}>
+    <Box testId={`transaction-item-${transaction.details.current_status.index}`} sx={containerStyles}>
       {requiresWithdrawalClaim && (
         <>
           <Box sx={actionsContainerStyles}>
@@ -107,7 +107,7 @@ export function TransactionItemWithdrawPending({
                 }}
               />
               <Body
-                testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-message`}
+                testId={`transaction-item-${transaction.details.current_status.index}-action-message`}
                 size="xSmall"
                 sx={{ color: 'base.color.text.body.secondary' }}
               >
@@ -116,7 +116,7 @@ export function TransactionItemWithdrawPending({
             </Box>
             {requiresWithdrawalClaim && withdrawalReadyToClaim && (
               <Button
-                testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-button`}
+                testId={`transaction-item-${transaction.details.current_status.index}-action-button`}
                 variant="primary"
                 size="small"
                 onClick={handleWithdrawalClaimClick}

@@ -5,16 +5,12 @@ import { Checkout } from '@imtbl/checkout-sdk';
 import {
   useCallback,
   useContext,
-  useEffect,
-  useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'ethers';
-import { AXELAR_SCAN_URL } from '../../lib';
-import { Transaction, TransactionStatus } from '../../lib/clients';
+import { Transaction } from '../../lib/clients';
 import { CryptoFiatContext } from '../../context/crypto-fiat-context/CryptoFiatContext';
 import { calculateCryptoToFiat, getTokenImageByAddress, isNativeToken } from '../../lib/utils';
-import { TransactionItem } from './TransactionItem';
 import { KnownNetworkMap } from './transactionsType';
 import { containerStyles, transactionsListStyle } from './TransactionListStyles';
 import { TransactionItemWithdrawPending } from './TransactionItemWithdrawPending';
@@ -40,23 +36,8 @@ export function TransactionList({
 }: TransactionListProps) {
   const { cryptoFiatState } = useContext(CryptoFiatContext);
   const { t } = useTranslation();
-  const [link, setLink] = useState('');
   const { environment } = checkout.config;
 
-  useEffect(() => {
-    if (!checkout) return;
-    setLink(AXELAR_SCAN_URL[checkout.config.environment]);
-  }, [checkout]);
-
-  const sortWithdrawalPendingFirst = useCallback((txnA, txnB) => {
-    if (
-      txnA.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING
-      && txnB.details.current_status.status !== TransactionStatus.WITHDRAWAL_PENDING) return -1;
-    if (txnA.details.current_status.status === txnB.details.current_status.status) return 0;
-
-    return 1;
-  }, []);
-
   const getTransactionItemIcon = useCallback((transaction) => {
     if (isNativeToken(transaction.details.from_token_address)) {
       // Map transaction chain slug to native symbol icon asset
@@ -76,34 +57,16 @@ export function TransactionList({
         sx={containerStyles}
       >
         {transactions
-          .sort(sortWithdrawalPendingFirst)
           .map((transaction) => {
-            const hash = transaction.blockchain_metadata.transaction_hash;
             const tokens = knownTokenMap[transaction.details.from_chain];
             const token = tokens[transaction.details.from_token_address.toLowerCase()];
             const amount = formatUnits(transaction.details.amount, token.decimals);
             const fiat = calculateCryptoToFiat(amount, token.symbol, cryptoFiatState.conversions);
 
-            if (transaction.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING) {
-              return (
-                <TransactionItemWithdrawPending
-                  key={hash}
-                  label={token.symbol}
-                  transaction={transaction}
-                  fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
-                  amount={amount}
-                  icon={getTransactionItemIcon(transaction)}
-                  defaultTokenImage={defaultTokenImage}
-                  environment={environment}
-                />
-              );
-            }
-
             return (
-              <TransactionItem
-                key={hash}
+              <TransactionItemWithdrawPending
+                key={transaction.details.current_status.index}
                 label={token.symbol}
-                details={{ text: t('views.TRANSACTIONS.status.inProgress.stepInfo'), link, hash }}
                 transaction={transaction}
                 fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                 amount={amount}