diff --git a/src/frontend/src/btc/components/transactions/BtcTransaction.svelte b/src/frontend/src/btc/components/transactions/BtcTransaction.svelte index 629b3abc63..1d52d6d37c 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 { Token } from '$lib/types/token'; export let transaction: BtcTransactionUi; + export let token: Token | undefined = 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..efa9729737 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 { TransactionStatus } from '$lib/types/transaction'; import { replacePlaceholders } from '$lib/utils/i18n.utils'; + import type { Token } from '$lib/types/token'; export let transaction: EthTransactionUi; + export let token: Token | undefined = 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..7e092f7985 100644 --- a/src/frontend/src/eth/components/transactions/EthTransactions.svelte +++ b/src/frontend/src/eth/components/transactions/EthTransactions.svelte @@ -21,6 +21,7 @@ import { modalStore } from '$lib/stores/modal.store'; import type { OptionEthAddress } from '$lib/types/address'; import type { Transaction as TransactionType } from '$lib/types/transaction'; + import { token } from '$lib/stores/token.store'; let ckMinterInfoAddresses: OptionEthAddress[] = []; $: ckMinterInfoAddresses = toCkMinterInfoAddresses({ @@ -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 dbd8a16bb0..3a3276873e 100644 --- a/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte +++ b/src/frontend/src/lib/components/transactions/AllTransactionsList.svelte @@ -23,7 +23,7 @@ {#if nonNullish(transactions) && transactions.length > 0} {#each transactions as transaction, index (`${transaction.id}-${index}`)}
- +
{/each} {/if} 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 })) ];