feat(site): handle metamask not being installed and prompt user to co…

…nnect to sepolia

site/src/app.d.ts

@@ -1,12 +1,18 @@
+import { ethers } from 'ethers';
+import { BrowserProvider, Eip1193Provider } from 'ethers/types/providers';
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface Platform {}
-  }
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+	interface Window {
+		ethereum: undefined | (Eip1193Provider & BrowserProvider);
+	}
 }
 
 export {};

site/src/global.d.ts

@@ -0,0 +1,12 @@
+import { ethers } from 'ethers';
+import { BrowserProvider, Eip1193Provider } from 'ethers/types/providers';
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	interface Window {
+		ethereum: undefined | (Eip1193Provider & BrowserProvider);
+	}
+}
+
+export {};

site/src/lib/DemoButton.svelte

@@ -0,0 +1,3 @@
+<button class="bg-red-500 px-4" on:click on:focus on:submit {...$$restProps}>
+	<slot />
+</button>

site/src/lib/ethersSetup.ts

@@ -0,0 +1,62 @@
+import { ethers } from 'ethers';
+import {
+	ethereumAddress,
+	ethersProvider,
+	ethersSigner,
+	connectedToSepolia
+} from './stores/wallets';
+import { get } from 'svelte/store';
+
+const SEPOLIA_CHAIN_ID = '0xaa36a7';
+
+export const updateConnectedToSeplia = async () => {
+	if (window.ethereum === undefined) {
+		console.error('trying to update connected to sepolia with no metamask installed');
+	}
+	const currentChainId = await window.ethereum.request({ method: 'eth_chainId' });
+	connectedToSepolia.set(currentChainId === SEPOLIA_CHAIN_ID);
+};
+
+export const connectToSepolia = async () => {
+	if (window.ethereum === undefined) {
+		console.error('trying to set up ethers while metamask is not installed');
+	}
+
+	const eProvider = new ethers.BrowserProvider(window.ethereum);
+
+	eProvider.on('network', (newNetwork, oldNetwork) => {
+		// When a Provider makes its initial connection, it emits a "network"
+		// event with a null oldNetwork along with the newNetwork. So, if the
+		// oldNetwork exists, it represents a changing network
+		console.log(newNetwork);
+		console.log(oldNetwork);
+		if (oldNetwork) {
+			window.location.reload();
+		}
+	});
+	ethersProvider.set(eProvider);
+
+	/// Requests the end user to switch to sepolia.
+	await window.ethereum.request({
+		method: 'wallet_switchEthereumChain',
+		params: [{ chainId: SEPOLIA_CHAIN_ID }]
+	});
+
+	updateConnectedToSeplia();
+	if (get(connectedToSepolia) == false) {
+		console.error('did not properly connect to sepolia');
+	}
+	console.log('connected to sepolia!');
+};
+
+export const ethersSetup = async () => {
+	const eProvider = new ethers.BrowserProvider(window.ethereum);
+	const allAccounts = await eProvider.listAccounts();
+	if (allAccounts.length === 0) {
+		alert('Please add an account to MetaMask to continue');
+	}
+	const eSigner = await eProvider.getSigner(0);
+	const eAddress = await eSigner.getAddress();
+	ethersSigner.set(eSigner);
+	ethereumAddress.set(eAddress);
+};

site/src/lib/stores/wallets.ts

@@ -17,7 +17,8 @@ export const ethersProvider: Writable<BrowserProvider | null> = writable(null);
 export const ethersSigner: Writable<JsonRpcSigner | null> = writable(null);
 export const ethereumAddress: Writable<string | null> = writable(null);
 export const cosmwasmClient: Writable<SigningCosmWasmClient | null> = writable(null);
-
 export const unionUnoBalance: Writable<Coin | null> = writable(null);
 export const ethereumEthBalance: Writable<bigint | null> = writable(null);
 export const ethereumUnoBalance: Writable<any | null> = writable(null);
+export const metamaskInstalled: Writable<boolean> = writable(false);
+export const connectedToSepolia: Writable<boolean> = writable(false);

site/src/lib/transferDemo.ts

@@ -17,7 +17,6 @@ import { get } from 'svelte/store';
 import { ethers } from 'ethers';
 import { GasPrice } from '@cosmjs/stargate';
 import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
-
 export const initClients = async (): Promise<void> => {
 	// Hack to import cosmjs
 	// @ts-ignore
@@ -150,45 +149,6 @@ export const updateUnionUnoBalance = async () => {
 	}
 	unionUnoBalance.set(await sgClient.getBalance(uAccount.address, 'muno'));
 };
-
-export const setupEthers = async () => {
-	console.log('connecting to ethereum');
-
-	const eProvider = new ethers.BrowserProvider(window.ethereum);
-
-	if (eProvider === null) {
-		console.error('qed eprovider');
-		return;
-	}
-
-	eProvider.on('network', (newNetwork, oldNetwork) => {
-		// When a Provider makes its initial connection, it emits a "network"
-		// event with a null oldNetwork along with the newNetwork. So, if the
-		// oldNetwork exists, it represents a changing network
-		console.log(newNetwork);
-		console.log(oldNetwork);
-		if (oldNetwork) {
-			window.location.reload();
-		}
-	});
-
-	/// Requests the end user to switch to sepolia.
-	await window.ethereum.request({
-		method: 'wallet_switchEthereumChain',
-		params: [{ chainId: '0xaa36a7' }]
-	});
-
-	ethersProvider.set(eProvider);
-	const allAccounts = await eProvider.listAccounts();
-	console.log('all acccounts', allAccounts);
-	const eSigner = await eProvider.getSigner(0);
-	ethersSigner.set(eSigner);
-	console.log('fetching ethereum balance');
-	const eAddress = await eSigner.getAddress();
-	console.log('ethereum address', eAddress);
-	ethereumAddress.set(eAddress);
-};
-
 export const updateEthereumEthBalance = async () => {
 	const eProvider = get(ethersProvider);
 	const address = get(ethereumAddress);

site/src/routes/blog/start-of-the-endgame/+page.md

@@ -9,25 +9,16 @@ published: true
 
 <script>
 	import TokenTransfer from '$lib/TokenTransfer.svelte';
-	// import Ethers from '$lib/Ethers.svelte';
-	import { browser } from '$app/environment';
-	import { initClients, startBalanceWorkers, setupEthers } from '$lib/transferDemo';
-	import { onMount } from 'svelte';
-
-	onMount(async () => {
-		if (browser) {
-			await setupEthers();
-			await initClients();
-			startBalanceWorkers();
-		}
-	})
+	import ConnectToMetamask from './ConnectToMetamask.svelte';
 </script>
 
-<!-- <Ethers/>!-->
 
-Galois and CometBLS have been live on our internal testnets for a while, but now we are ready to share a brief demo in anticipation of Cosmoverse. This is the **first, tangible implementation** of an effort that has been going on for the last few years by many different teams. We proudly present the first ICS20 transfers to Sepolia (Ethereum).
+In our inaugural post, we showcased the first IBC connection to Ethereum by showing two contracts playing [ping-pong](../the-journey-so-far/+page.md) through general message passing. Today we have something even more exciting: a first look at UCS-1, the hardened version of ICS-20 for asset transfers between EVM and Cosmos-SDK based chains.
+
+Union already has experimental support for [Metamask](https://metamask.io/) through [Leap Snaps](https://www.leapwallet.io/snaps). This allows us to handle the different account models while ensuring you only need one wallet installed.
+
+<ConnectToMetamask/>
 
-<TokenTransfer/>
 
 ## Next Steps
 

site/src/routes/blog/start-of-the-endgame/ConnectToMetamask.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { initClients, startBalanceWorkers } from '$lib/transferDemo';
+	import { onMount } from 'svelte';
+	import { metamaskInstalled, connectedToSepolia } from '$lib/stores/wallets';
+
+	import { ethersSetup, connectToSepolia, updateConnectedToSeplia } from '$lib/ethersSetup';
+
+	import DemoButton from '$lib/DemoButton.svelte';
+
+	onMount(async () => {
+
+		if (browser) {
+			const mmInstalled = window.ethereum !== undefined;
+			metamaskInstalled.set(mmInstalled); 
+			if (mmInstalled) {
+				updateConnectedToSeplia();
+			}
+		}
+	})
+</script>
+
+
+<div class="bg-black p-4 font-jetbrains rounded">
+	{#if !$metamaskInstalled}
+		Install MetaMask to continue 🦊
+	{:else}
+		<div>MetaMask is intalled ✅</div>
+		{#if $connectedToSepolia }
+			<div>Connected to Sepolia ✅</div>
+		{:else}
+			<DemoButton on:click={connectToSepolia}>Connect to Sepolia</DemoButton>
+		{/if}
+	{/if}
+</div>