From 22c0653650a84615e049c0d6ec61f21e45637797 Mon Sep 17 00:00:00 2001 From: Antonio Ventilii Date: Fri, 15 Nov 2024 08:36:44 +0100 Subject: [PATCH] feat(frontend): add token prop to transaction card components (#3570) # Motivation After PR #3537 , we can provide the token to the Transaction card components, to show the Token logo in the unified transaction list. # Changes - Make prop `token` for `EthTransaction` and adapt the usage, removing the derived store and providing the input from its parents, like `EthTransactions`. - Map `token` for all the UI transactions. - Adapt `AllTransactionsList`. # Tests Test adapted and here results. ![Screenshot 2024-11-14 at 18 09 30](https://github.com/user-attachments/assets/5e3f3e14-d44b-48f8-8997-8121a08253a1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> --- .../components/transactions/BtcTransaction.svelte | 3 +++ .../components/transactions/EthTransaction.svelte | 15 ++++++++------- .../transactions/EthTransactions.svelte | 3 ++- .../transactions/AllTransactionsList.svelte | 2 +- .../components/transactions/Transaction.svelte | 4 ++-- src/frontend/src/lib/types/transaction.ts | 2 ++ src/frontend/src/lib/utils/transactions.utils.ts | 9 ++++++++- .../tests/lib/utils/transactions.utils.spec.ts | 4 ++++ 8 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/btc/components/transactions/BtcTransaction.svelte b/src/frontend/src/btc/components/transactions/BtcTransaction.svelte index 629b3abc63..25d5cc62f2 100644 --- a/src/frontend/src/btc/components/transactions/BtcTransaction.svelte +++ b/src/frontend/src/btc/components/transactions/BtcTransaction.svelte @@ -6,8 +6,10 @@ import Transaction from '$lib/components/transactions/Transaction.svelte'; import { i18n } from '$lib/stores/i18n.store'; import { modalStore } from '$lib/stores/modal.store'; + import type { OptionToken } from '$lib/types/token'; export let transaction: BtcTransactionUi; + export let token: OptionToken = undefined; let value: bigint | undefined; let timestamp: bigint | undefined; @@ -26,6 +28,7 @@ {type} timestamp={Number(timestamp)} {status} + {token} > {label} diff --git a/src/frontend/src/eth/components/transactions/EthTransaction.svelte b/src/frontend/src/eth/components/transactions/EthTransaction.svelte index 7cea37bab3..21d562a2ad 100644 --- a/src/frontend/src/eth/components/transactions/EthTransaction.svelte +++ b/src/frontend/src/eth/components/transactions/EthTransaction.svelte @@ -5,14 +5,14 @@ import { isSupportedEthToken } from '$eth/utils/eth.utils'; import { isTransactionPending } from '$eth/utils/transactions.utils'; import Transaction from '$lib/components/transactions/Transaction.svelte'; - import { tokenSymbol } from '$lib/derived/token.derived'; import { i18n } from '$lib/stores/i18n.store'; import { modalStore } from '$lib/stores/modal.store'; - import { token } from '$lib/stores/token.store'; + import type { OptionToken } from '$lib/types/token'; import type { TransactionStatus } from '$lib/types/transaction'; import { replacePlaceholders } from '$lib/utils/i18n.utils'; export let transaction: EthTransactionUi; + export let token: OptionToken = undefined; let value: BigNumber; let timestamp: number | undefined; @@ -28,10 +28,10 @@ $: ({ value, timestamp, displayTimestamp, uiType: type } = transaction); let ckTokenSymbol: string; - $: ckTokenSymbol = isSupportedEthToken($token) - ? $token.twinTokenSymbol + $: ckTokenSymbol = isSupportedEthToken(token) + ? token.twinTokenSymbol : // TODO: $token could be undefined, that's why we cast as `Erc20Token | undefined`; adjust the cast once we're sure that $token is never undefined - (($token as Erc20Token | undefined)?.twinTokenSymbol ?? ''); + ((token as Erc20Token | undefined)?.twinTokenSymbol ?? ''); let label: string; $: label = @@ -41,7 +41,7 @@ ? $i18n.transaction.label.converting_ck_token : $i18n.transaction.label.ck_token_converted, { - $twinToken: $tokenSymbol ?? '', + $twinToken: token?.symbol ?? '', $ckToken: ckTokenSymbol } ) @@ -51,7 +51,7 @@ ? $i18n.transaction.label.converting_twin_token : $i18n.transaction.label.ck_token_sent, { - $twinToken: $tokenSymbol ?? '', + $twinToken: token?.symbol ?? '', $ckToken: ckTokenSymbol } ) @@ -72,6 +72,7 @@ {type} timestamp={transactionDate} {status} + {token} > {label} diff --git a/src/frontend/src/eth/components/transactions/EthTransactions.svelte b/src/frontend/src/eth/components/transactions/EthTransactions.svelte index c1b376af2d..05b45ba2ee 100644 --- a/src/frontend/src/eth/components/transactions/EthTransactions.svelte +++ b/src/frontend/src/eth/components/transactions/EthTransactions.svelte @@ -19,6 +19,7 @@ import { modalToken, modalEthTransaction } from '$lib/derived/modal.derived'; import { i18n } from '$lib/stores/i18n.store'; import { modalStore } from '$lib/stores/modal.store'; + import { token } from '$lib/stores/token.store'; import type { OptionEthAddress } from '$lib/types/address'; import type { Transaction as TransactionType } from '$lib/types/transaction'; @@ -49,7 +50,7 @@ {#each sortedTransactionsUi as transaction (transaction.hash)}
- +
{/each} diff --git a/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte b/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte index 6e1d41a545..8fd32bfea8 100644 --- a/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte +++ b/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte @@ -30,7 +30,7 @@ {#if nonNullish(sortedTransactions) && sortedTransactions.length > 0} {#each transactions as transaction, index (`${transaction.id}-${index}`)}
- +
{/each} {/if} diff --git a/src/frontend/src/lib/components/transactions/Transaction.svelte b/src/frontend/src/lib/components/transactions/Transaction.svelte index 3fb101bce7..e03941c713 100644 --- a/src/frontend/src/lib/components/transactions/Transaction.svelte +++ b/src/frontend/src/lib/components/transactions/Transaction.svelte @@ -7,7 +7,7 @@ import Amount from '$lib/components/ui/Amount.svelte'; import Card from '$lib/components/ui/Card.svelte'; import RoundedIcon from '$lib/components/ui/RoundedIcon.svelte'; - import type { Token } from '$lib/types/token'; + import type { OptionToken } from '$lib/types/token'; import type { TransactionStatus, TransactionType } from '$lib/types/transaction'; import { formatSecondsToDate } from '$lib/utils/format.utils.js'; import { mapTransactionIcon } from '$lib/utils/transaction.utils'; @@ -17,7 +17,7 @@ export let status: TransactionStatus; export let timestamp: number | undefined; export let styleClass: string | undefined = undefined; - export let token: Token | undefined = undefined; + export let token: OptionToken = undefined; let icon: ComponentType; $: icon = mapTransactionIcon({ type, status }); diff --git a/src/frontend/src/lib/types/transaction.ts b/src/frontend/src/lib/types/transaction.ts index 4b393ef2ba..c96c6bd621 100644 --- a/src/frontend/src/lib/types/transaction.ts +++ b/src/frontend/src/lib/types/transaction.ts @@ -5,6 +5,7 @@ import type { TransactionStatusSchema, TransactionTypeSchema } from '$lib/schema/transaction.schema'; +import type { Token } from '$lib/types/token'; import type { TransactionResponse } from '@ethersproject/abstract-provider'; import type { BigNumber } from '@ethersproject/bignumber'; import type { FeeData } from '@ethersproject/providers'; @@ -36,5 +37,6 @@ export type TransactionUiCommon = Pick((acc, { id: tokenId, network: { id: networkId } }) => { + return tokens.reduce((acc, token) => { + const { + id: tokenId, + network: { id: networkId } + } = token; + if (isNetworkIdBTCMainnet(networkId)) { if (isNullish($btcTransactions)) { return acc; @@ -63,6 +68,7 @@ export const mapAllTransactionsUi = ({ ...acc, ...($btcTransactions[tokenId] ?? []).map(({ data: transaction }) => ({ ...transaction, + token, component: BtcTransaction })) ]; @@ -82,6 +88,7 @@ export const mapAllTransactionsUi = ({ : ckEthMinterInfoAddressesMainnet, $ethAddress: $ethAddress }), + token, component: EthTransaction })) ]; diff --git a/src/frontend/src/tests/lib/utils/transactions.utils.spec.ts b/src/frontend/src/tests/lib/utils/transactions.utils.spec.ts index 773258996a..af9ae46c0f 100644 --- a/src/frontend/src/tests/lib/utils/transactions.utils.spec.ts +++ b/src/frontend/src/tests/lib/utils/transactions.utils.spec.ts @@ -57,6 +57,7 @@ describe('transactions.utils', () => { const expectedBtcMainnetTransactions: AllTransactionsUi = [ ...mockBtcMainnetTransactions.map((transaction) => ({ ...transaction, + token: BTC_MAINNET_TOKEN, component: BtcTransaction })) ]; @@ -68,6 +69,7 @@ describe('transactions.utils', () => { ...transaction, id: transaction.hash, uiType, + token: ETHEREUM_TOKEN, component: EthTransaction })) ]; @@ -77,6 +79,7 @@ describe('transactions.utils', () => { ...transaction, id: transaction.hash, uiType, + token: SEPOLIA_TOKEN, component: EthTransaction })) ]; @@ -86,6 +89,7 @@ describe('transactions.utils', () => { ...transaction, id: transaction.hash, uiType, + token: PEPE_TOKEN, component: EthTransaction })) ];