From a5accb7049ec4b42b12212acdfb51639e7b59b3c Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Fri, 12 Apr 2024 12:16:11 -0400
Subject: [PATCH] detect missing wallet plugin

---
 src/components/NeedsSigner.vue | 59 ++++++++++++++++++++++------------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/components/NeedsSigner.vue b/src/components/NeedsSigner.vue
index 144023e..6a1d6c2 100644
--- a/src/components/NeedsSigner.vue
+++ b/src/components/NeedsSigner.vue
@@ -1,20 +1,26 @@
 <template>
-  <slot v-if="ok" v-bind="$props"/>
-  <div v-if="!ok">
-    <v-card-title><v-icon icon="mdi-hand-wave" color="grey"/>&nbsp;Welcome to Dexorder Alpha!</v-card-title>
+  <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
+  <v-card v-if="!loggedIn" rounded="0">
+    <v-card-title>
+      <v-icon icon="mdi-hand-wave" color="grey"/>&nbsp;Welcome to Dexorder Alpha!
+    </v-card-title>
     <v-card-text>
       This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
     </v-card-text>
-    <btn icon="mdi-wallet-outline" color="warning" variant="outlined" @click="connect" :disabled="disabled"
-         text="Connect Wallet"/>
-    <!-- todo Alpha Live
-    <v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title>
-    <v-card-text>
-      Dexorder works only with <blockchain chain-id="42161"/>. Please switch to the
-      <blockchain chain-id="42161"/> blockchain in your wallet.
-    </v-card-text>
--->
-    <v-card v-if="needsNetwork" rounded="0">
+    <div v-if="!pluginOk">
+      <v-card-text>
+        A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
+        required to use Dexorder. Please install a crypto wallet into your browser to experience the power of
+        Dexorder.
+      </v-card-text>
+      <v-card-actions>
+        <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
+      </v-card-actions>
+    </div>
+
+    <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
+         @click="connect" :disabled="disabled" text="Connect Wallet"/>
+    <div v-if="needsNetwork">
       <v-card-text>
         <table id="manualsetup">
           <thead>
@@ -50,13 +56,12 @@
         </ol>
 -->
       </v-card-text>
-    </v-card>
-  </div>
+    </div>
+  </v-card>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
-import NeedsProvider from "@/components/NeedsProvider.vue";
 import {computed, ref} from "vue";
 import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
 import Btn from "@/components/Btn.vue";
@@ -64,11 +69,15 @@ import CopyButton from "@/components/CopyButton.vue";
 
 const s = useStore()
 const ws = useWalletStore()
-const providerOk = computed(()=>s.chainId===ws.chainId)
-const ok = computed(()=>s.account!==null)
+const pluginOk = window.ethereum !== undefined
+const loggedIn = computed(()=>s.account!==null)
 const needsNetwork = ref(false)
 const disabled = ref(false)
 
+function reload() {
+  window.location.reload()
+}
+
 async function connect() {
   disabled.value = true
   try {
@@ -86,10 +95,20 @@ async function connect() {
           return
         }
       }
+      else if (e.code===4001) {
+        // explicit user rejection
+        return
+      }
       else
-        console.log('wallet connect failure',e)
+        console.log('switchChain() failure',e)
+    }
+    try {
+      await connectWallet(s.chainId)
+    }
+    catch (e) {
+      if (e.code!==4001)
+        console.log('connectWallet() failed', e)
     }
-    await connectWallet(s.chainId)
   }
   finally {
     disabled.value = false