feat: display erc20 symbol in convert text (dfinity#1226)

src/frontend/src/icp-eth/components/core/CkEthereumPendingTransactionsListener.svelte

@@ -61,7 +61,7 @@
 		loadBalance = $balance;
 
 		await loadCkEthereumPendingTransactions({
-			tokenId: $tokenId,
+			token: $token as IcToken,
 			lastObservedBlockNumber,
 			identity: $authStore.identity,
 			toAddress,

src/frontend/src/icp-eth/services/eth.services.ts

@@ -14,7 +14,6 @@ import { toastsError } from '$lib/stores/toasts.store';
 import type { ETH_ADDRESS } from '$lib/types/address';
 import type { OptionIdentity } from '$lib/types/identity';
 import type { NetworkId } from '$lib/types/network';
-import type { TokenId } from '$lib/types/token';
 import { emit } from '$lib/utils/events.utils';
 import { replacePlaceholders } from '$lib/utils/i18n.utils';
 import { encodePrincipalToEthAddress } from '@dfinity/cketh';
@@ -28,7 +27,7 @@ export const loadCkEthereumPendingTransactions = async ({
 	...rest
 }: {
 	toAddress: ETH_ADDRESS;
-	tokenId: TokenId;
+	token: IcToken;
 	lastObservedBlockNumber: bigint;
 	identity: OptionIdentity;
 } & IcCkTwinToken) => {
@@ -54,7 +53,7 @@ const loadCkETHPendingTransactions = async ({
 	...rest
 }: {
 	toAddress: ETH_ADDRESS;
-	tokenId: TokenId;
+	token: IcToken;
 	lastObservedBlockNumber: bigint;
 	identity: OptionIdentity;
 } & IcCkTwinToken) => {
@@ -80,7 +79,7 @@ const loadCkErc20PendingTransactions = async ({
 	toAddress: ETH_ADDRESS;
 	lastObservedBlockNumber: bigint;
 	identity: OptionIdentity;
-	tokenId: TokenId;
+	token: IcToken;
 } & IcCkTwinToken) => {
 	const logsTopics = (to: ETH_ADDRESS): (string | null)[] => [
 		RECEIVED_ERC20_EVENT_SIGNATURE,
@@ -103,13 +102,13 @@ const loadPendingTransactions = async ({
 	identity,
 	twinToken,
 	logsTopics,
-	tokenId
+	token
 }: {
 	toAddress: ETH_ADDRESS;
 	lastObservedBlockNumber: bigint;
 	identity: OptionIdentity;
 	logsTopics: (to: ETH_ADDRESS) => (string | null)[];
-	tokenId: TokenId;
+	token: IcToken;
 } & IcCkTwinToken) => {
 	if (isNullish(identity)) {
 		await nullishSignOut();
@@ -133,6 +132,8 @@ const loadPendingTransactions = async ({
 			topics: logsTopics(encodePrincipalToEthAddress(identity.getPrincipal()))
 		});
 
+		const { id: tokenId } = token;
+
 		// There are no pending ETH -> ckETH or Erc20 -> ckErc20, therefore we reset the store.
 		// This can be useful if there was a previous pending transactions displayed and the transaction has now been processed.
 		if (pendingLogs.length === 0) {
@@ -149,7 +150,7 @@ const loadPendingTransactions = async ({
 		icPendingTransactionsStore.set({
 			tokenId,
 			data: pendingTransactions.filter(nonNullish).map((transaction) => ({
-				data: mapCkEthereumPendingTransaction({ transaction, twinToken }),
+				data: mapCkEthereumPendingTransaction({ transaction, twinToken, token }),
 				certified: false
 			}))
 		});
@@ -182,7 +183,7 @@ const loadPendingTransactions = async ({
 
 export const loadPendingCkEthereumTransaction = async ({
 	hash,
-	token: { id: tokenId },
+	token,
 	twinToken,
 	networkId
 }: {
@@ -211,12 +212,15 @@ export const loadPendingCkEthereumTransaction = async ({
 			return;
 		}
 
+		const { id: tokenId } = token;
+
 		icPendingTransactionsStore.prepend({
 			tokenId,
 			transaction: {
 				data: mapCkEthereumPendingTransaction({
 					transaction,
-					twinToken
+					twinToken,
+					token
 				}),
 				certified: false
 			}

src/frontend/src/icp-eth/utils/cketh-transactions.utils.ts

@@ -1,23 +1,42 @@
 import type { EthereumNetwork } from '$eth/types/network';
-import type { IcCkTwinToken, IcTransactionUi } from '$icp/types/ic';
+import type { IcCkTwinToken, IcToken, IcTransactionUi } from '$icp/types/ic';
+import { i18n } from '$lib/stores/i18n.store';
 import type { Transaction } from '$lib/types/transaction';
+import { replacePlaceholders } from '$lib/utils/i18n.utils';
+import { get } from 'svelte/store';
 
 export const mapCkEthereumPendingTransaction = ({
 	transaction: { hash, from, to, value },
-	twinToken
+	twinToken,
+	token
 }: {
 	transaction: Transaction;
+	token: IcToken;
 } & IcCkTwinToken): IcTransactionUi => {
 	const explorerUrl = (twinToken.network as EthereumNetwork).explorerUrl;
 
+	const { symbol: twinTokenSymbol } = twinToken;
+	const { symbol } = token;
+
+	const {
+		receive: {
+			ethereum: {
+				text: { converting }
+			}
+		}
+	} = get(i18n);
+
 	return {
 		id: `${hash}`,
 		incoming: false,
 		type: 'burn',
 		status: 'pending',
 		from,
 		to,
-		typeLabel: 'Converting ETH to ckETH',
+		typeLabel: replacePlaceholders(converting, {
+			$token: twinTokenSymbol,
+			$ckToken: symbol
+		}),
 		value: value.toBigInt(),
 		fromExplorerUrl: `${explorerUrl}/address/${from}`,
 		toExplorerUrl: `${explorerUrl}/address/${to}`,

src/frontend/src/icp/derived/cketh-transactions.derived.ts

@@ -2,7 +2,7 @@ import {
 	icPendingTransactionsStore,
 	type IcPendingTransactionsData
 } from '$icp/stores/ic-pending-transactions.store';
-import {isTokenCkErc20Ledger, isTokenCkEthLedger} from '$icp/utils/ic-send.utils';
+import { isTokenCkErc20Ledger, isTokenCkEthLedger } from '$icp/utils/ic-send.utils';
 import { token } from '$lib/derived/token.derived';
 import { derived, type Readable } from 'svelte/store';
 

src/frontend/src/lib/i18n/en.json

@@ -145,6 +145,7 @@
 		"ethereum": {
 			"text": {
 				"checking_status": "Checking $token status...",
+				"converting": "Converting $token to $ckToken",
 				"from_network": "Receive from $network Network",
 				"eth_to_cketh_description": "Converting $token into $ckToken requires a call to a smart contract on $network and passing your IC principal as argument – $oisy_name simplifies this procedure by enabling you to perform the conversion directly within the wallet.",
 				"learn_how_to_convert": "Learn how to convert $token to $ckToken",

src/frontend/src/lib/types/i18n.d.ts

@@ -128,6 +128,7 @@ interface I18nReceive {
 	ethereum: {
 		text: {
 			checking_status: string;
+			converting: string;
 			from_network: string;
 			eth_to_cketh_description: string;
 			learn_how_to_convert: string;