feat(site): track sepolia UNO (#835)

site/src/lib/constants.ts

@@ -14,3 +14,5 @@ export const UCS01_SEPOLIA_SOURCE_CHANNEL = "channel-0";
 export const UCS01_SEPOLIA_PORT_ID = "ucs01-relay";
 
 export const UNION_RPC_URL = "wss://rpc.wakey.uno";
+
+export const AMOUNT_TO_SEND_TO_UNION = 1000;

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);
+  }
+};

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);

site/src/lib/transferFromSepolia.ts

@@ -18,6 +18,7 @@ import {
   IBC_CONTRACT_ABI,
   UCS01_SEPOLIA_SOURCE_CHANNEL,
   UCS01_SEPOLIA_PORT_ID,
+  AMOUNT_TO_SEND_TO_UNION,
 } from "./constants";
 
 export const approveUnoTransferToUnion = async () => {
@@ -30,7 +31,7 @@ export const approveUnoTransferToUnion = async () => {
     eSigner
   );
 
-  const tx = await contract.approve(UCS01_EVM_ADDRESS, 100000);
+  const tx = await contract.approve(UCS01_EVM_ADDRESS, AMOUNT_TO_SEND_TO_UNION);
   await tx.wait();
 };
 
@@ -76,7 +77,7 @@ export const sendUnoToUnion = async () => {
     UCS01_SEPOLIA_PORT_ID,
     UCS01_SEPOLIA_SOURCE_CHANNEL,
     uAccount.address,
-    [[MUNO_ERC20_ADDRESS, 1000]],
+    [[MUNO_ERC20_ADDRESS, AMOUNT_TO_SEND_TO_UNION]],
     3,
     800000000
   );

site/src/routes/blog/ics20-transfers-to-ethereum/+page.md

@@ -4,7 +4,7 @@ slug: ics20-transfers-to-ethereum
 date: "2023-10-04"
 author: "@union_build"
 preview: "Today we present a first look at UCS-01, a superset ICS-20 for asset transfers between EVM and Cosmos-SDK-based chains."
-published: false
+published: true
 ---
 
 <script>
@@ -29,11 +29,11 @@ After installing and configuring Metamask to Sepolia and Union Testnet, you shou
 
 <AddressesAndBalances/>
 
-Claim $UNO from the Union faucet for bridging usage. If you opt-in to share your address, you will be tracked as an early contributor.
+Claim UNO from the Union faucet for bridging usage. If you opt-in to share your address, you will be tracked as an early contributor.
 
 <FaucetButton/>
 
-IBC transfers from `union-testnet-3` to `sepolia` are just contract interactions, which need to be sent to either Sepolia or Union, depending on the transfer direction. We start by sending $UNO to Sepolia (Ethereum Testnet), and then back again. This showcase uses a single-threaded relayer with simple nonce management.
+IBC transfers from `union-testnet-3` to `sepolia` are just contract interactions, which need to be sent to either Sepolia or Union, depending on the transfer direction. We start by sending UNO to Sepolia (Ethereum Testnet), and then back again. This showcase uses a single-threaded relayer with simple nonce management.
 
 IBC is as fast as the underlying chains. When you do Tendermint to Tendermint transactions, IBC is quite fast because the finality time is 6 seconds. However, when connecting to Sepolia, which has a similar configuration to Ethereum Mainnet, it takes a while for blocks to finalize. We need to await finalization to avoid double-spending.
 
@@ -51,11 +51,11 @@ When the transaction is received, the funds are locked in a vault, ensuring the
 
 On our testnet, `Galois` is running on relatively simple infrastructure. This means proof generation is relatively slow. Proof generation becomes close to instant on 128-core machines. On mainnet, relayers with fast proving speeds will outcompete slow relayers and generate significantly more fees. This market dynamic optimizes our infrastructure.
 
-On Sepolia, the zero-knowledge proof is verified inside the IBC contract stack. This verification is necessary to update the Union Light client. After successful verification, an ERC-20 token representing $UNO is transferred to your wallet.
+On Sepolia, the zero-knowledge proof is verified inside the IBC contract stack. This verification is necessary to update the Union Light client. After successful verification, an ERC-20 token representing UNO is transferred to your wallet.
 
 <TransferUnoToEthereumStatus/>
 
-To transfer the $UNO back, we need to obtain some Sepolia ETH for gas fees. Copy your address below, and enter it on the Sepolia Faucet page.
+To transfer the UNO back, we need to obtain some SepoliaETH for gas fees. Copy your address below, and enter it on the Sepolia Faucet page.
 
 <SepoliaFaucetButton/>
 
@@ -65,7 +65,7 @@ For the transfer back we need to wait for the acknowledgement of the initial tra
 
 <!-- Acknowledgement Element -->
 
-Once you have received Sepolia Eth, initiate the transfer to Union. This will either burn or lock your tokens in the Sepolia vault, depending on the sovereign home of the asset. Once Sepolia finalizes, the funds are sent to Union.
+Once you have received SepoliaETH, initiate the transfer to Union. This will either burn or lock your tokens in the Sepolia vault, depending on the sovereign home of the asset. Once Sepolia finalizes, the funds are sent to Union.
 
 <SendUnoToUnionButton/>
 
@@ -87,7 +87,7 @@ The signing committee constructs a BLS signature, used to prove the finalization
 
 <SendUnoToUnionStatus/>
 
-You will at some point lose the $UNO obtained through this faucet, as we migrate to newer versions of the testnet. If you opted in for early contribution, your participation in this demo is registered for later incentivization.
+You will at some point lose the UNO obtained through this faucet, as we migrate to newer versions of the testnet. If you opted in for early contribution, your participation in this demo is registered for later incentivization.
 
 ## Future Improvements
 

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,20 @@
 						<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 text-sm">
+									Optional:
+									 <button
+										class="px-2 py-1 border-[1px] text-sm border-accent text-accent font-jetbrains"
+										on:click={addUnoErc}
+									>
+										Track UNO on Sepolia in Metamask 💸
+									</button>
+				        </div>
+			        {:else}
+					   <div>✅ Tracking UNO on Sepolia</div>
+					{/if}
 				{/if}
 			{/if}
 		{/if}

site/src/routes/blog/ics20-transfers-to-ethereum/SendUnoToUnionButton.svelte

@@ -41,11 +41,11 @@
 	{:else}
 		{#if $sendingUnoToUnion === 'sending'}
 			<div class="flex gap-4 h-[48px] items-center">
-				<div>Sending UNO to Union</div>
+				<div>Sending 0.001 UNO to Union</div>
 				<PulseSpinner/>
 			</div>
 		{:else if $sendingUnoToUnion === 'start'}
-			<DemoButton on:click={clickHandler}>Send UNO to Union</DemoButton>
+			<DemoButton on:click={clickHandler}>Send 0.001 UNO to Union</DemoButton>
 		{:else if $sendingUnoToUnion === 'done'} 
 			<div class="flex gap-4 h-[48px] items-center">
 				<div>✅ Received UNO on Union, new balance is <span class="text-accent">{toFixedUno(BigInt($unionUnoBalance.amount))}</span> UNO</div> 

site/src/routes/blog/ics20-transfers-to-ethereum/SendUnoToUnionStatus.svelte

@@ -11,7 +11,7 @@
 <TerminalContainer>
 	{#if $sendingUnoToUnion === 'sending'}
 		<div class="flex gap-4 h-[48px] items-center">
-			<div>Sending UNO to Union</div>
+			<div>Sending 0.001 UNO to Union</div>
 			<PulseSpinner/>
 		</div>
 	{:else if $sendingUnoToUnion === 'start'}

site/src/routes/blog/ics20-transfers-to-ethereum/TransferUnoToEthereum.svelte

@@ -45,11 +45,11 @@
 	{:else}
 		{#if $sendingUnoToEthereum === 'sending'}
 			<div class="flex gap-4 h-[48px] items-center">
-				<div>Sending UNO to Ethereum</div>
+				<div>Sending 0.001 UNO to Ethereum</div>
 				<PulseSpinner/>
 			</div>
 		{:else if $sendingUnoToEthereum === 'start'}
-			<DemoButton on:click={clickHandler}>Send UNO to Ethereum</DemoButton>
+			<DemoButton on:click={clickHandler}>Send 0.001 UNO to Ethereum</DemoButton>
 		{:else if $sendingUnoToEthereum === 'done'} 
 			<div class="flex gap-4 h-[48px] items-center">
 				<div>✅ Received UNO on Sepolia, new balance is <span class="text-accent">{toFixedUno($ethereumUnoBalance)}</span> UNO</div> 

site/src/routes/blog/ics20-transfers-to-ethereum/TransferUnoToEthereumStatus.svelte

@@ -10,7 +10,7 @@
 <TerminalContainer>
 		{#if $sendingUnoToEthereum === 'sending'}
 			<div class="flex gap-4 h-[48px] items-center">
-				<div>Sending UNO to Ethereum</div>
+				<div>Sending 0.001 UNO to Ethereum</div>
 				<PulseSpinner/>
 			</div>
 		{:else if $sendingUnoToEthereum === 'start'}