feat(frontend): change order of receive addresses according to testin…

…g-feedback, add text for eth
dfinity · Oct 25, 2024 · ed45dfc · ed45dfc
1 parent afc0c56
commit ed45dfc
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 44 deletions.
diff --git a/src/frontend/src/lib/components/receive/ReceiveAddresses.svelte b/src/frontend/src/lib/components/receive/ReceiveAddresses.svelte
@@ -10,10 +10,10 @@
 	import Hr from '$lib/components/ui/Hr.svelte';
 	import { LOCAL } from '$lib/constants/app.constants';
 	import {
-		RECEIVE_TOKENS_MODAL_ICRC_SECTION,
-		RECEIVE_TOKENS_MODAL_ICP_SECTION,
+		RECEIVE_TOKENS_MODAL_BTC_SECTION,
 		RECEIVE_TOKENS_MODAL_ETH_SECTION,
-		RECEIVE_TOKENS_MODAL_BTC_SECTION
+		RECEIVE_TOKENS_MODAL_ICP_SECTION,
+		RECEIVE_TOKENS_MODAL_ICRC_SECTION
 	} from '$lib/constants/test-ids.constants';
 	import {
 		btcAddressMainnet,
@@ -32,47 +32,6 @@
 </script>
 
 <ContentWithToolbar>
-	<ReceiveAddressWithLogo
-		on:click={() =>
-			displayQRCode({
-				address: $icrcAccountIdentifierText ?? '',
-				addressLabel: $i18n.receive.icp.text.principal,
-				addressToken: ICP_TOKEN
-			})}
-		address={$icrcAccountIdentifierText ?? ''}
-		token={ICP_TOKEN}
-		qrCodeAriaLabel={$i18n.receive.icp.text.display_internet_computer_principal_qr}
-		copyAriaLabel={$i18n.receive.icp.text.internet_computer_principal_copied}
-		testId={RECEIVE_TOKENS_MODAL_ICRC_SECTION}
-	>
-		{$i18n.receive.icp.text.principal}
-
-		<span slot="notes" class="text-secondary text-sm"
-			>{$i18n.receive.icp.text.use_for_icrc_deposit}</span
-		>
-	</ReceiveAddressWithLogo>
-
-	<ReceiveAddressWithLogo
-		on:click={() =>
-			displayQRCode({
-				address: $icpAccountIdentifierText ?? '',
-				addressLabel: $i18n.receive.icp.text.icp_account,
-				addressToken: ICP_TOKEN
-			})}
-		address={$icpAccountIdentifierText ?? ''}
-		token={ICP_TOKEN}
-		qrCodeAriaLabel={$i18n.receive.icp.text.display_icp_account_qr}
-		copyAriaLabel={$i18n.receive.icp.text.icp_account_copied}
-		testId={RECEIVE_TOKENS_MODAL_ICP_SECTION}
-		invisibleLogo
-	>
-		{$i18n.receive.icp.text.icp_account}
-
-		<span slot="notes" class="text-secondary text-sm"
-			>{$i18n.receive.icp.text.use_for_icp_deposit}</span
-		>
-	</ReceiveAddressWithLogo>
-
 	{#if NETWORK_BITCOIN_ENABLED}
 		<div class="mb-6">
 			<Hr />
@@ -148,6 +107,55 @@
 		testId={RECEIVE_TOKENS_MODAL_ETH_SECTION}
 	>
 		{$i18n.receive.ethereum.text.ethereum}
+
+		<span slot="notes" class="text-secondary text-sm"
+			>{$i18n.receive.icp.text.your_private_eth_address}</span
+		>
+	</ReceiveAddressWithLogo>
+
+	<div class="mb-6">
+		<Hr />
+	</div>
+
+	<ReceiveAddressWithLogo
+		on:click={() =>
+			displayQRCode({
+				address: $icrcAccountIdentifierText ?? '',
+				addressLabel: $i18n.receive.icp.text.principal,
+				addressToken: ICP_TOKEN
+			})}
+		address={$icrcAccountIdentifierText ?? ''}
+		token={ICP_TOKEN}
+		qrCodeAriaLabel={$i18n.receive.icp.text.display_internet_computer_principal_qr}
+		copyAriaLabel={$i18n.receive.icp.text.internet_computer_principal_copied}
+		testId={RECEIVE_TOKENS_MODAL_ICRC_SECTION}
+	>
+		{$i18n.receive.icp.text.principal}
+
+		<span slot="notes" class="text-secondary text-sm"
+			>{$i18n.receive.icp.text.use_for_icrc_deposit}</span
+		>
+	</ReceiveAddressWithLogo>
+
+	<ReceiveAddressWithLogo
+		on:click={() =>
+			displayQRCode({
+				address: $icpAccountIdentifierText ?? '',
+				addressLabel: $i18n.receive.icp.text.icp_account,
+				addressToken: ICP_TOKEN
+			})}
+		address={$icpAccountIdentifierText ?? ''}
+		token={ICP_TOKEN}
+		qrCodeAriaLabel={$i18n.receive.icp.text.display_icp_account_qr}
+		copyAriaLabel={$i18n.receive.icp.text.icp_account_copied}
+		testId={RECEIVE_TOKENS_MODAL_ICP_SECTION}
+		invisibleLogo
+	>
+		{$i18n.receive.icp.text.icp_account}
+
+		<span slot="notes" class="text-secondary text-sm"
+			>{$i18n.receive.icp.text.use_for_icp_deposit}</span
+		>
 	</ReceiveAddressWithLogo>
 
 	<ButtonDone on:click={modalStore.close} slot="toolbar" />

diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -230,6 +230,7 @@
 				"use_for_all_tokens": "Use for all tokens when receiving from wallets, users, or other apps that support this address format.",
 				"use_for_icrc_deposit": "Use for receiving ICRC-1 tokens in the ICP network, such as SNS, ck tokens, etc.",
 				"use_for_icp_deposit": "Use for ICP deposits from exchanges or other wallets that only support Account IDs.",
+				"your_private_eth_address": "Your private address for all ERC20 tokens.",
 				"display_account_id_qr": "Display ICP Account ID as a QR code",
 				"account_id_copied": "ICP Account ID copied to clipboard.",
 				"principal": "ICP Principal",

diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -201,6 +201,7 @@ interface I18nReceive {
 			use_for_all_tokens: string;
 			use_for_icrc_deposit: string;
 			use_for_icp_deposit: string;
+			your_private_eth_address: string;
 			display_account_id_qr: string;
 			account_id_copied: string;
 			principal: string;