From e2a4c6fce7a845a1bd29a73bb2b9cef982653cf3 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Tue, 26 Sep 2023 06:35:25 +0200
Subject: [PATCH] feat(frontend): add a link to learn more about ERC20 ICP on
 Ethereum (#383)

---
 .env.example                                  |  3 +-
 .../src/lib/components/core/Erc20Icp.svelte   | 29 +++++++++++++++++++
 .../src/lib/components/hero/Hero.svelte       |  6 ++++
 .../src/lib/constants/erc20-icp.constants.ts  |  2 ++
 src/frontend/src/routes/(app)/+layout.svelte  |  3 ++
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/lib/components/core/Erc20Icp.svelte

diff --git a/.env.example b/.env.example
index 8b81e83c1b..00cd11277d 100644
--- a/.env.example
+++ b/.env.example
@@ -16,4 +16,5 @@ VITE_OISY_URL=https://oisy.com
 VITE_OISY_ICON=https://oisy.com/favicons/icon-512x512.png
 VITE_OISY_REPO_URL=https://github.com/dfinity/oisy-wallet
 VITE_AIRDROP=false
-VITE_ERC20_ICP_SYMBOL=ckICP
\ No newline at end of file
+VITE_ERC20_ICP_SYMBOL=ckICP
+VITE_ERC20_ICP_REPO_URL=https://github.com/dfinity/erc20-icp
\ No newline at end of file
diff --git a/src/frontend/src/lib/components/core/Erc20Icp.svelte b/src/frontend/src/lib/components/core/Erc20Icp.svelte
new file mode 100644
index 0000000000..b05a4555ca
--- /dev/null
+++ b/src/frontend/src/lib/components/core/Erc20Icp.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ERC20_ICP_REPO_URL } from '$lib/constants/erc20-icp.constants';
+	import { IconInfo } from '@dfinity/gix-components';
+</script>
+
+<a
+	href={ERC20_ICP_REPO_URL}
+	rel="external noopener noreferrer"
+	target="_blank"
+	class="no-underline inline-block text-center pt-1 pb-3 font-bold text-xs md:text-base"
+>
+	<IconInfo />
+	<span class="pl-1">Learn more about ERC20 ICP on Ethereum.</span>
+</a>
+
+<style lang="scss">
+  a {
+    color: var(--alpha-color, var(--color-misty-rose));
+    margin: 0 auto;
+
+    :global(svg) {
+      vertical-align: bottom;
+
+      @include media.min-width(medium) {
+        vertical-align: sub;
+      }
+    }
+  }
+</style>
diff --git a/src/frontend/src/lib/components/hero/Hero.svelte b/src/frontend/src/lib/components/hero/Hero.svelte
index c8e7ab3a7f..b6d14c6fc4 100644
--- a/src/frontend/src/lib/components/hero/Hero.svelte
+++ b/src/frontend/src/lib/components/hero/Hero.svelte
@@ -8,10 +8,12 @@
 	import Logo from '$lib/components/ui/Logo.svelte';
 	import { token } from '$lib/derived/token.derived';
 	import Balance from '$lib/components/hero/Balance.svelte';
+	import Erc20Icp from '$lib/components/core/Erc20Icp.svelte';
 
 	export let summary = false;
 	export let actions = true;
 	export let send = false;
+	export let erc20IcpLink = false;
 
 	let displayTokenSymbol = false;
 	$: displayTokenSymbol = summary && $erc20TokensInitialized;
@@ -42,6 +44,10 @@
 				<Actions {send} />
 			</div>
 		{/if}
+
+		{#if erc20IcpLink}
+			<Erc20Icp />
+		{/if}
 	</article>
 </div>
 
diff --git a/src/frontend/src/lib/constants/erc20-icp.constants.ts b/src/frontend/src/lib/constants/erc20-icp.constants.ts
index 75cb4e2807..a9f27b09e9 100644
--- a/src/frontend/src/lib/constants/erc20-icp.constants.ts
+++ b/src/frontend/src/lib/constants/erc20-icp.constants.ts
@@ -8,3 +8,5 @@ const ERC20_ICP_BURN_API = 'function burnToAccountId(uint256 _amount, bytes32 _t
 export const ERC20_ICP_ABI = [...ERC20_ABI, ERC20_ICP_BURN_API];
 
 export const ERC20_ICP_SYMBOL = import.meta.env.VITE_ERC20_ICP_SYMBOL;
+
+export const ERC20_ICP_REPO_URL = import.meta.env.VITE_ERC20_ICP_REPO_URL;
diff --git a/src/frontend/src/routes/(app)/+layout.svelte b/src/frontend/src/routes/(app)/+layout.svelte
index 4157ae5060..bb7329a233 100644
--- a/src/frontend/src/routes/(app)/+layout.svelte
+++ b/src/frontend/src/routes/(app)/+layout.svelte
@@ -6,6 +6,8 @@
 	import AirdropButton from '$lib/components/airdrop/AirdropButton.svelte';
 	import { airdropAvailable } from '$lib/derived/airdrop.derived';
 	import AirdropWorker from '$lib/components/airdrop/AirdropWorker.svelte';
+	import { isErc20Icp } from '$lib/utils/token.utils';
+	import { token } from '$lib/derived/token.derived';
 
 	let route: 'transactions' | 'tokens' | 'settings' = 'tokens';
 	$: route = isRouteSettings($page)
@@ -19,6 +21,7 @@
 	summary={route === 'transactions'}
 	send={route === 'transactions'}
 	actions={route !== 'settings'}
+	erc20IcpLink={isErc20Icp($token)}
 />
 
 <main>