From a30eb2aa6b1ff9476d24d56f5b6ff351b37193fb Mon Sep 17 00:00:00 2001
From: karel <k.l.kubat@gmail.com>
Date: Thu, 19 Oct 2023 23:17:11 +0100
Subject: [PATCH] feat(site): track sepolia UNO

---
 site/src/lib/ethersSetup.ts                   | 25 +++++++++++++++++++
 site/src/lib/stores/wallets.ts                |  1 +
 .../ConnectToMetamask.svelte                  | 13 +++++++---
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/site/src/lib/ethersSetup.ts b/site/src/lib/ethersSetup.ts
index 3f2eac25a1..01e0c16a4c 100644
--- a/site/src/lib/ethersSetup.ts
+++ b/site/src/lib/ethersSetup.ts
@@ -6,8 +6,10 @@ import {
   connectedToSepolia,
   snapInstalled,
   connectedToUnion,
+  sepUNOAdded,
 } from "./stores/wallets";
 import { get } from "svelte/store";
+import { MUNO_ERC20_ADDRESS } from "$lib/constants";
 
 const SEPOLIA_CHAIN_ID = "0xaa36a7";
 
@@ -119,3 +121,26 @@ export const updateConnectedToUnion = async () => {
     connectedToUnion.set(false);
   }
 };
+
+export const addUnoErc = async () => {
+  try {
+    const wasAdded = await window.ethereum.request({
+      method: "wallet_watchAsset",
+      params: {
+        type: "ERC20",
+        options: {
+          address: MUNO_ERC20_ADDRESS, // The address of the token.
+          symbol: "UNO", // A ticker symbol or shorthand, up to 5 characters.
+          decimals: 6, // The number of decimals in the token.
+          image: "https://union.build/logo.svg", // A string URL of the token logo.
+        },
+      },
+    });
+
+    if (wasAdded) {
+      sepUNOAdded.set(true);
+    }
+  } catch {
+    sepUNOAdded.set(false);
+  }
+};
diff --git a/site/src/lib/stores/wallets.ts b/site/src/lib/stores/wallets.ts
index b589ab5c25..6043207332 100644
--- a/site/src/lib/stores/wallets.ts
+++ b/site/src/lib/stores/wallets.ts
@@ -33,3 +33,4 @@ export const metamaskInstalled: Writable<boolean> = writable(false);
 export const connectedToSepolia: Writable<boolean> = writable(false);
 export const snapInstalled: Writable<boolean> = writable(false);
 export const connectedToUnion: Writable<boolean> = writable(false);
+export const sepUNOAdded: Writable<boolean> = writable(false);
diff --git a/site/src/routes/blog/ics20-transfers-to-ethereum/ConnectToMetamask.svelte b/site/src/routes/blog/ics20-transfers-to-ethereum/ConnectToMetamask.svelte
index a619311b19..1a0a8cc2ec 100644
--- a/site/src/routes/blog/ics20-transfers-to-ethereum/ConnectToMetamask.svelte
+++ b/site/src/routes/blog/ics20-transfers-to-ethereum/ConnectToMetamask.svelte
@@ -2,8 +2,8 @@
 	import { browser } from '$app/environment';
 	import { initClients, startBalanceWorkers } from '$lib/transferDemo';
 	import { onMount } from 'svelte';
-	import { metamaskInstalled, connectedToSepolia, connectedToUnion, snapInstalled } from '$lib/stores/wallets';
-	import { ethersSetup, connectToSepolia, updateConnectedToSepolia, connectLeapSnap, updateSnapInstalled, updateConnectedToUnion, connectToUnion } from '$lib/ethersSetup';
+	import { metamaskInstalled, connectedToSepolia, connectedToUnion, snapInstalled, sepUNOAdded } from '$lib/stores/wallets';
+	import { ethersSetup, connectToSepolia, updateConnectedToSepolia, connectLeapSnap, updateSnapInstalled, updateConnectedToUnion, connectToUnion, addUnoErc } from '$lib/ethersSetup';
 
 	import TerminalContainer from '$lib/TerminalContainer.svelte';
 	import DemoButton from '$lib/DemoButton.svelte';
@@ -61,7 +61,14 @@
 						<DemoButton on:click={connectToUnion}>Connect to Union in Leap 🚀</DemoButton>
 					</div>
 				{:else}
-					<div>✅ Connected to Union Testnet</div> 
+				    <div>✅ Connected to Union Testnet</div> 
+			        {#if !$sepUNOAdded}
+				        <div class="mt-4">
+					        <DemoButton on:click={addUnoErc}>Add UNO (ERC-20) 💸</DemoButton>
+				        </div>
+			        {:else}
+					   <div>✅ Tracking UNO (Sepolia) </div>
+					{/if}
 				{/if}
 			{/if}
 		{/if}