Update determine if init

cosmos · Sep 12, 2023 · ae50719 · ae50719
1 parent 9329646
commit ae50719
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 52 deletions.
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
@@ -5,7 +5,7 @@
     export let disabled: boolean = false;
 </script>
 
-<button disabled={loading || disabled} on:click={() => onClick()} class="frame-1-2 frame-1-4 button-send">
+<button disabled={loading || disabled} on:click={() => onClick()} class="frame-1-2 frame-1-4 button-send disabled:opacity-[0.40]">
     <div class="send-amount-1 inter-medium-white-12px">
         {#if loading}
           <div role="status">

diff --git a/packages/ui/src/routes/+layout.svelte b/packages/ui/src/routes/+layout.svelte
@@ -7,13 +7,43 @@
   import Alert from "../components/Alert.svelte";
 	import Menu from "../components/Menu.svelte";
 	import { updateDirectory } from "../store/directory";
-	import { CosmosSnap } from "@cosmsnap/snapper";
-	import { snapId } from "../utils/snap";
+	import { CosmosSnap, isSnapInitialized, isSnapInstalled } from "@cosmsnap/snapper";
+	import { isMetaMaskInstalled, snapId } from "../utils/snap";
+
+	$: if ($state.isMetaMaskInstalledValue && $state.isSnapInitValue && $state.isSnapInstalledValue) {
+
+		$state.connected = true;
+		goto("/balances");
+	}
+
+	const initializeData = async () => {
+    try {
+      $state.loading = true;
+      $state.isMetaMaskInstalledValue = isMetaMaskInstalled() ?? false;
+      if ($state.isMetaMaskInstalledValue) {
+        $state.loading = true;
+        $state.isSnapInstalledValue = await isSnapInstalled();
+        $state.loading = false;
+        if ($state.isSnapInstalledValue) {
+          $state.loading = true;
+          $state.isSnapInitValue = await isSnapInitialized();
+          $state.loading = false;
+        }
+      }
+      $state.loading = false;
+     } catch (err: any) {
+      $state.loading = false;
+      $state.alertText = `${err.message}`
+      $state.alertType = "danger"
+      $state.showAlert = true
+    }
+	};
 
   onMount(async () => {
     window.cosmos = new CosmosSnap();
     window.cosmos.changeSnapId(snapId);
     updateDirectory();
+    initializeData();
     if (!$state.connected) {
       goto("/");
     } else {

diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
@@ -1,66 +1,43 @@
 <script lang="ts">
-	import { afterUpdate } from 'svelte';
 	import MainTitle from '../components/MainTitle.svelte';
 	import Step from '../components/Step.svelte';
-	import { isMetaMaskInstalled, initSnap, isSnapInstalled, installSnap } from '../utils/snap';
+	import { initSnap, installSnap } from '../utils/snap';
 	import { state } from '../store/state';
 	import { goto } from '$app/navigation';
 	import { LOCAL_STORAGE_CHAINS } from '../utils/general';
 	import { chains } from '../store/chains';
 
-	let isMetaMaskInstalledValue = false;
-	let isSnapInstalledValue = false;
-	let isSnapInitValue = false;
-  let loading = false;
-
-	$: if (isMetaMaskInstalledValue && isSnapInitValue && isSnapInstalledValue) {
-
-		$state.connected = true;
-		goto("/balances");
-	}
-
-	const initializeData = async () => {
-    try {
-      loading = true;
-      isMetaMaskInstalledValue = isMetaMaskInstalled() ?? false;
-      isSnapInstalledValue = await isSnapInstalled() ?? false;
-      loading = false;
-     } catch (err: any) {
-      loading = false;
-      $state.alertText = `${err.message}`
-      $state.alertType = "danger"
-      $state.showAlert = true
-    }
-	};
-
 	const runInstallSnap = async () => {
     try {
-      loading = true;
+      $state.loading = true;
       await installSnap();
-      isSnapInstalledValue = true;
-      isSnapInitValue = false;
-      loading = false;
+      $state.isSnapInstalledValue = true;
+      $state.isSnapInitValue = false;
+      $state.loading = false;
     } catch (err: any) {
-      loading = false;
+      $state.loading = false;
       $state.alertText = `${err.message}`
       $state.alertType = "danger"
       $state.showAlert = true
     }
 	};
 
 	const initializeSnap = async () => {
-    loading = true;
+    $state.loading = true;
     try {
       const chainsFromInit = await initSnap();
       localStorage.setItem(LOCAL_STORAGE_CHAINS, JSON.stringify(chainsFromInit));
       chains.set(chainsFromInit);
-      isSnapInitValue = true;
+      $state.isSnapInitValue = true;
       $state.connected = true;
-      loading = false;
+      $state.alertText = `Generating keys. This may take a minute.`
+      $state.alertType = "warning"
+      $state.showAlert = true
+      $state.loading = false;
     } catch (err: any) {
-      loading = false;
+      $state.loading = false;
       if (err.message == "The Cosmos Snap has already been initialized.") {
-        isSnapInitValue = true;
+        $state.isSnapInitValue = true;
         $state.connected = true;
         goto("/balances")
       } else {
@@ -70,8 +47,6 @@
       }
     }
 	};
-
-	afterUpdate(initializeData);
 </script>
 
 <div class="x1-connect-metamask screen">
@@ -82,10 +57,10 @@
             <div>
               <div class="grid gap-4 grid-cols-1 sm:grid-cols-1 md:grid-cols-3 mb-8 group-24">
                   <Step
-                      bind:loading={loading}
-                      disabled = {isMetaMaskInstalledValue}
+                      bind:loading={$state.loading}
+                      disabled = {$state.isMetaMaskInstalledValue}
                       action={() => { window.open('https://metamask.io/download', '_blank') }}
-                      complete={isMetaMaskInstalledValue}
+                      complete={$state.isMetaMaskInstalledValue}
                       stepNumber="1"
                       stepTitle="Install Metamask"
                       stepImage="https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64863c03ac0993f6e77c817f/img/metamask-1.svg"
@@ -96,10 +71,10 @@
                   />
 
                   <Step
-                      bind:loading={loading}
-                      disabled={!isMetaMaskInstalledValue || isSnapInstalledValue}
+                      bind:loading={$state.loading}
+                      disabled={!$state.isMetaMaskInstalledValue || $state.isSnapInstalledValue}
                       action={runInstallSnap}
-                      complete={isSnapInstalledValue}
+                      complete={$state.isSnapInstalledValue}
                       stepNumber="2"
                       stepTitle="Install Cosmos Snap"
                       stepImage="https://anima-uploads.s3.amazonaws.com/projects/64863aebc1255e7dd4fb600b/releases/64863c03ac0993f6e77c817f/img/image-3@2x.png"
@@ -110,10 +85,10 @@
                   />
 
                   <Step 
-                      bind:loading={loading}
-                      disabled={!isMetaMaskInstalledValue || !isSnapInstalledValue || isSnapInitValue}
+                      bind:loading={$state.loading}
+                      disabled={!$state.isMetaMaskInstalledValue || !$state.isSnapInstalledValue || $state.isSnapInitValue}
                       action={async () => { await initializeSnap(); }}
-                      complete={isSnapInitValue}
+                      complete={$state.isSnapInitValue}
                       stepNumber="3"
                       stepTitle="Initiate Cosmos Snap"
                       stepImage="/cosmos-atom-logo.png"

diff --git a/packages/ui/src/store/state.js b/packages/ui/src/store/state.js
@@ -8,5 +8,9 @@ export const state = writable({
     confirmDeleteChainPopup: false,
     alertText: "",
     showAlert: false,
-    alertType: "success"
+    alertType: "success",
+    isMetaMaskInstalledValue: false,
+    isSnapInstalledValue: false,
+    isSnapInitValue: false,
+    loading: false
 });