Merge branch 'main' into fix(frontend)/do-not-show-token-logo-in-toke…

…n-transaction-page
dfinity · Nov 15, 2024 · 37844e9 · 37844e9
2 parents e22fd37 + 8c5a293
commit 37844e9
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 17 deletions.
diff --git a/src/frontend/src/btc/components/transactions/BtcTransaction.svelte b/src/frontend/src/btc/components/transactions/BtcTransaction.svelte
@@ -6,10 +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';
+	import type { Token } from '$lib/types/token';
 
 	export let transaction: BtcTransactionUi;
-	export let token: OptionToken = undefined;
+	export let token: Token;
 
 	let value: bigint | undefined;
 	let timestamp: bigint | undefined;

diff --git a/src/frontend/src/btc/components/transactions/BtcTransactions.svelte b/src/frontend/src/btc/components/transactions/BtcTransactions.svelte
@@ -11,9 +11,11 @@
 	import type { BtcTransactionUi } from '$btc/types/btc';
 	import TransactionsPlaceholder from '$lib/components/transactions/TransactionsPlaceholder.svelte';
 	import TransactionsSkeletons from '$lib/components/transactions/TransactionsSkeletons.svelte';
+	import { DEFAULT_BITCOIN_TOKEN } from '$lib/constants/tokens.constants';
 	import { SLIDE_DURATION } from '$lib/constants/transition.constants';
 	import { modalBtcTransaction } from '$lib/derived/modal.derived';
 	import { modalStore } from '$lib/stores/modal.store';
+	import { token } from '$lib/stores/token.store';
 
 	let selectedTransaction: BtcTransactionUi | undefined;
 	$: selectedTransaction = $modalBtcTransaction
@@ -26,7 +28,7 @@
 <TransactionsSkeletons loading={$btcTransactionsNotInitialized}>
 	{#each $sortedBtcTransactions as transaction (transaction.data.id)}
 		<div transition:slide={SLIDE_DURATION}>
-			<BtcTransaction transaction={transaction.data} />
+			<BtcTransaction transaction={transaction.data} token={$token ?? DEFAULT_BITCOIN_TOKEN} />
 		</div>
 	{/each}
 

diff --git a/src/frontend/src/env/tokens.btc.env.ts b/src/frontend/src/env/tokens.btc.env.ts
@@ -1,3 +1,4 @@
+import { BTC_MAINNET_ENABLED } from '$env/networks.btc.env';
 import { BTC_MAINNET_NETWORK, BTC_REGTEST_NETWORK, BTC_TESTNET_NETWORK } from '$env/networks.env';
 import bitcoin from '$icp/assets/bitcoin.svg';
 import bitcoinTestnet from '$icp/assets/bitcoin_testnet.svg';
@@ -51,3 +52,11 @@ export const BTC_REGTEST_TOKEN: Token = {
 	decimals: BTC_DECIMALS,
 	icon: bitcoinTestnet
 };
+
+// The following tokens are used as fallback for any Bitcoin token defined in the token store.
+// That means that the order of the tokens in the array is important, to have a correct fallback chain.
+export const SUPPORTED_BITCOIN_TOKENS: [...Token[], Token] = [
+	...(BTC_MAINNET_ENABLED ? [BTC_MAINNET_TOKEN] : []),
+	BTC_TESTNET_TOKEN,
+	BTC_REGTEST_TOKEN
+];
diff --git a/src/frontend/src/eth/components/transactions/EthTransaction.svelte b/src/frontend/src/eth/components/transactions/EthTransaction.svelte
@@ -7,13 +7,13 @@
 	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';
+	import type { Token } 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;
-	export let hideTokenLogo = false;
+	export let token: Token;
+  export let hideTokenLogo = false;
 
 	let value: BigNumber;
 	let timestamp: number | undefined;

diff --git a/src/frontend/src/eth/components/transactions/EthTransactions.svelte b/src/frontend/src/eth/components/transactions/EthTransactions.svelte
@@ -17,9 +17,9 @@
 	import { SLIDE_DURATION } from '$lib/constants/transition.constants';
 	import { ethAddress } from '$lib/derived/address.derived';
 	import { modalToken, modalEthTransaction } from '$lib/derived/modal.derived';
+	import { tokenWithFallback } 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 { OptionEthAddress } from '$lib/types/address';
 	import type { Transaction as TransactionType } from '$lib/types/transaction';
 
@@ -50,7 +50,7 @@
 	<EthTransactionsSkeletons>
 		{#each sortedTransactionsUi as transaction (transaction.hash)}
 			<div transition:slide={SLIDE_DURATION}>
-				<EthTransaction {transaction} token={$token} hideTokenLogo />
+				<EthTransaction {transaction} token={$tokenWithFallback} hideTokenLogo />
 			</div>
 		{/each}
 

diff --git a/src/frontend/src/icp/components/transactions/IcTransaction.svelte b/src/frontend/src/icp/components/transactions/IcTransaction.svelte
@@ -6,9 +6,11 @@
 	import Transaction from '$lib/components/transactions/Transaction.svelte';
 	import { NANO_SECONDS_IN_SECOND } from '$lib/constants/app.constants';
 	import { modalStore } from '$lib/stores/modal.store';
+	import type { Token } from '$lib/types/token';
 	import type { TransactionStatus } from '$lib/types/transaction';
 
 	export let transaction: IcTransactionUi;
+	export let token: Token;
 
 	let type: IcTransactionType;
 	let transactionTypeLabel: string | undefined;
@@ -46,6 +48,7 @@
 	{type}
 	{timestamp}
 	{status}
+	{token}
 >
 	<IcTransactionLabel label={transactionTypeLabel} fallback={type} />
 </Transaction>
diff --git a/src/frontend/src/icp/components/transactions/IcTransactions.svelte b/src/frontend/src/icp/components/transactions/IcTransactions.svelte
@@ -3,6 +3,7 @@
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import type { ComponentType } from 'svelte';
 	import { slide } from 'svelte/transition';
+	import { ICP_TOKEN } from '$env/tokens.env';
 	import Info from '$icp/components/info/Info.svelte';
 	import IcTokenModal from '$icp/components/tokens/IcTokenModal.svelte';
 	import IcNoIndexPlaceholder from '$icp/components/transactions/IcNoIndexPlaceholder.svelte';
@@ -117,7 +118,7 @@
 			<InfiniteScroll on:nnsIntersect={onIntersect} disabled={disableInfiniteScroll}>
 				{#each $icTransactions as transaction, index (`${transaction.data.id}-${index}`)}
 					<li in:slide={{ duration: transaction.data.status === 'pending' ? 250 : 0 }}>
-						<IcTransaction transaction={transaction.data} />
+						<IcTransaction transaction={transaction.data} token={$token ?? ICP_TOKEN} />
 					</li>
 				{/each}
 			</InfiniteScroll>

diff --git a/src/frontend/src/lib/components/hero/Balance.svelte b/src/frontend/src/lib/components/hero/Balance.svelte
@@ -16,7 +16,7 @@
 		class="inline-flex w-full flex-row justify-center gap-3 break-words text-4xl font-bold lg:text-5xl"
 	>
 		{#if nonNullish(token?.balance) && nonNullish(token?.symbol) && !token.balance.isZero()}
-			<span><Amount amount={token.balance} /> {token.symbol}</span>
+			<span><Amount amount={token.balance} decimals={token.decimals} /> {token.symbol}</span>
 		{:else}
 			<span class:animate-pulse={$loading}>0.00</span>
 		{/if}

diff --git 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 { OptionToken } from '$lib/types/token';
+	import type { Token } 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: OptionToken = undefined;
+	export let token: Token;
 
 	let icon: ComponentType;
 	$: icon = mapTransactionIcon({ type, status });
@@ -40,7 +40,7 @@
 
 		<svelte:fragment slot="amount">
 			{#if nonNullish(amount)}
-				<Amount {amount} />
+				<Amount {amount} decimals={token.decimals} />
 			{/if}
 		</svelte:fragment>
 

diff --git a/src/frontend/src/lib/components/ui/Amount.svelte b/src/frontend/src/lib/components/ui/Amount.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
 	import type { BigNumber } from '@ethersproject/bignumber';
 	import { EIGHT_DECIMALS } from '$lib/constants/app.constants';
-	import { tokenWithFallback } from '$lib/derived/token.derived';
 	import { formatToken } from '$lib/utils/format.utils';
 
 	export let amount: BigNumber;
+	export let decimals: number;
 
 	let detailedValue: string;
 	$: detailedValue = formatToken({
 		value: amount,
-		unitName: $tokenWithFallback.decimals,
-		displayDecimals: $tokenWithFallback.decimals
+		unitName: decimals,
+		displayDecimals: decimals
 	});
 
 	let displayValue: string;
 	$: displayValue = formatToken({
 		value: amount,
-		unitName: $tokenWithFallback.decimals,
+		unitName: decimals,
 		displayDecimals: EIGHT_DECIMALS
 	});
 </script>

diff --git a/src/frontend/src/lib/constants/tokens.constants.ts b/src/frontend/src/lib/constants/tokens.constants.ts
@@ -1,3 +1,6 @@
+import { SUPPORTED_BITCOIN_TOKENS } from '$env/tokens.btc.env';
 import { SUPPORTED_ETHEREUM_TOKENS } from '$env/tokens.env';
 
 export const [DEFAULT_ETHEREUM_TOKEN, _rest] = SUPPORTED_ETHEREUM_TOKENS;
+
+export const [DEFAULT_BITCOIN_TOKEN, _] = SUPPORTED_BITCOIN_TOKENS;