Skip to content

Commit cce02d6

Browse files
keithbro-imxkeithbro-imx
authored
fix(checkout-widgets): Fetch pending withdrawals from the bridge contract (#2680)
1 parent 6fbd145 commit cce02d6

15 files changed

Lines changed: 69 additions & 506 deletions

File tree

‎packages/checkout/widgets-lib/.eslintrc.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
2-
"extends": ["../../../.eslintrc"],
2+
"extends": ["../../../.eslintrc", 'plugin:react-hooks/recommended'],
33
"ignorePatterns": ["jest.config.*", "rollup.config.*"],
44
"parser": "@typescript-eslint/parser",
55
"parserOptions": {

‎packages/checkout/widgets-lib/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@
103103
"typegen": "tsc --customConditions default --emitDeclarationOnly --outDir dist/types",
104104
"pack:root": "pnpm pack --pack-destination $(dirname $(pnpm root -w))",
105105
"build:local": "pnpm build && mkdir -p ../widgets-sample-app/public/lib/js && cp dist/browser/*.js ../widgets-sample-app/public/lib/js/",
106-
"lint": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0",
107-
"lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0 --fix",
106+
"lint": "eslint ./src --ext .ts,.jsx,.tsx",
107+
"lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --fix",
108108
"start": "NODE_ENV=development rollup --config rollup.config.js --watch",
109109
"test": "jest test --passWithNoTests",
110110
"test:watch": "jest test --passWithNoTests --watch",

‎packages/checkout/widgets-lib/src/components/Transactions/NoTransactions.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ export function NoTransactions(
5050
>
5151
{t('views.TRANSACTIONS.status.noTransactions.body')}
5252
</Body>
53+
<Body
54+
size="small"
55+
sx={noTransactionsBodyStyle}
56+
>
57+
Can&apos;t find your pending withdrawal? Try connecting with your L1 wallet.
58+
</Body>
5359
{isPassport && (
5460
<Body
5561
size="small"

‎packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx‎

Lines changed: 0 additions & 137 deletions
This file was deleted.

‎packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export function TransactionItemWithdrawPending({
9191
};
9292

9393
return (
94-
<Box testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}`} sx={containerStyles}>
94+
<Box testId={`transaction-item-${transaction.details.current_status.index}`} sx={containerStyles}>
9595
{requiresWithdrawalClaim && (
9696
<>
9797
<Box sx={actionsContainerStyles}>
@@ -107,7 +107,7 @@ export function TransactionItemWithdrawPending({
107107
}}
108108
/>
109109
<Body
110-
testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-message`}
110+
testId={`transaction-item-${transaction.details.current_status.index}-action-message`}
111111
size="xSmall"
112112
sx={{ color: 'base.color.text.body.secondary' }}
113113
>
@@ -116,7 +116,7 @@ export function TransactionItemWithdrawPending({
116116
</Box>
117117
{requiresWithdrawalClaim && withdrawalReadyToClaim && (
118118
<Button
119-
testId={`transaction-item-${transaction.blockchain_metadata.transaction_hash}-action-button`}
119+
testId={`transaction-item-${transaction.details.current_status.index}-action-button`}
120120
variant="primary"
121121
size="small"
122122
onClick={handleWithdrawalClaimClick}

‎packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx‎

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,12 @@ import { Checkout } from '@imtbl/checkout-sdk';
55
import {
66
useCallback,
77
useContext,
8-
useEffect,
9-
useState,
108
} from 'react';
119
import { useTranslation } from 'react-i18next';
1210
import { formatUnits } from 'ethers';
13-
import { AXELAR_SCAN_URL } from '../../lib';
14-
import { Transaction, TransactionStatus } from '../../lib/clients';
11+
import { Transaction } from '../../lib/clients';
1512
import { CryptoFiatContext } from '../../context/crypto-fiat-context/CryptoFiatContext';
1613
import { calculateCryptoToFiat, getTokenImageByAddress, isNativeToken } from '../../lib/utils';
17-
import { TransactionItem } from './TransactionItem';
1814
import { KnownNetworkMap } from './transactionsType';
1915
import { containerStyles, transactionsListStyle } from './TransactionListStyles';
2016
import { TransactionItemWithdrawPending } from './TransactionItemWithdrawPending';
@@ -40,23 +36,8 @@ export function TransactionList({
4036
}: TransactionListProps) {
4137
const { cryptoFiatState } = useContext(CryptoFiatContext);
4238
const { t } = useTranslation();
43-
const [link, setLink] = useState('');
4439
const { environment } = checkout.config;
4540

46-
useEffect(() => {
47-
if (!checkout) return;
48-
setLink(AXELAR_SCAN_URL[checkout.config.environment]);
49-
}, [checkout]);
50-
51-
const sortWithdrawalPendingFirst = useCallback((txnA, txnB) => {
52-
if (
53-
txnA.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING
54-
&& txnB.details.current_status.status !== TransactionStatus.WITHDRAWAL_PENDING) return -1;
55-
if (txnA.details.current_status.status === txnB.details.current_status.status) return 0;
56-
57-
return 1;
58-
}, []);
59-
6041
const getTransactionItemIcon = useCallback((transaction) => {
6142
if (isNativeToken(transaction.details.from_token_address)) {
6243
// Map transaction chain slug to native symbol icon asset
@@ -76,34 +57,16 @@ export function TransactionList({
7657
sx={containerStyles}
7758
>
7859
{transactions
79-
.sort(sortWithdrawalPendingFirst)
8060
.map((transaction) => {
81-
const hash = transaction.blockchain_metadata.transaction_hash;
8261
const tokens = knownTokenMap[transaction.details.from_chain];
8362
const token = tokens[transaction.details.from_token_address.toLowerCase()];
8463
const amount = formatUnits(transaction.details.amount, token.decimals);
8564
const fiat = calculateCryptoToFiat(amount, token.symbol, cryptoFiatState.conversions);
8665

87-
if (transaction.details.current_status.status === TransactionStatus.WITHDRAWAL_PENDING) {
88-
return (
89-
<TransactionItemWithdrawPending
90-
key={hash}
91-
label={token.symbol}
92-
transaction={transaction}
93-
fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
94-
amount={amount}
95-
icon={getTransactionItemIcon(transaction)}
96-
defaultTokenImage={defaultTokenImage}
97-
environment={environment}
98-
/>
99-
);
100-
}
101-
10266
return (
103-
<TransactionItem
104-
key={hash}
67+
<TransactionItemWithdrawPending
68+
key={transaction.details.current_status.index}
10569
label={token.symbol}
106-
details={{ text: t('views.TRANSACTIONS.status.inProgress.stepInfo'), link, hash }}
10770
transaction={transaction}
10871
fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
10972
amount={amount}

0 commit comments

Comments
 (0)