separb beta

src/components/NeedsSigner.vue

@@ -1,17 +1,18 @@
 <template>
-  <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
-  <v-card v-if="!loggedIn" rounded="0">
+  <slot v-if="status===Status.OK" v-bind="$props"/>
+  <v-card v-if="status!==Status.OK" rounded="0">
     <v-card-title>
 <!--      <v-icon icon="mdi-hand-wave" color="grey"/>-->
       Welcome to Dexorder Beta!
     </v-card-title>
     <v-card-text>
-      This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
+      This beta test uses mock coins on the Arbitrum Sepolia testnet.
     </v-card-text>
     <v-card-text>
-      Play with the order builder by clicking on the <logo class="logo-small"/> logo or on the <v-icon icon="mdi-chart-timeline-variant"/> button.
+      Play with the order builder without an account by clicking on the <logo class="logo-small"/> logo or on
+      the <v-icon icon="mdi-chart-timeline-variant"/> button.
     </v-card-text>
-    <div v-if="!pluginOk">
+    <div v-if="status===Status.NEEDS_PLUGIN">
       <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
@@ -22,65 +23,44 @@
       </v-card-actions>
     </div>
 
-    <v-card-actions>
+    <div v-if="status===Status.NEEDS_NETWORK">
+      <v-card-text>
+        Please connect your wallet to the Arbitrum-Sepolia test network to continue.
+      </v-card-text>
+    </div>
+
+    <v-card-actions v-if="status>Status.NEEDS_PLUGIN">
       <btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
            @click="connect" :disabled="disabled" text="Connect Wallet"/>
     </v-card-actions>
-    <div v-if="needsNetwork">
-      <v-card-text>
-        <table id="manualsetup">
-          <thead>
-          <tr><th colspan="4">Manual Setup</th></tr>
-          </thead>
-          <tbody>
-          <tr><td><b>Network Name:</b></td><td><copy-button text="Dexorder Alpha Testnet"/></td></tr>
-          <tr><td><b>New RPC URL:</b></td><td><copy-button text="https://rpc.alpha.dexorder.trade"/></td></tr>
-          <tr><td><b>Chain ID:</b></td><td><copy-button text="1337"/></td></tr>
-          <tr><td><b>Currency Symbol:</b></td><td><copy-button text="TETH"/></td></tr>
-          </tbody>
-        </table>
-<!--
-        <ul class="ml-6">
-          <li> Dexorder Alpha Testnet</li>
-          <li><b>New RPC URL:</b> </li>
-          <li><b>Chain ID:</b> 1337</li>
-          <li><b>Currency Symbol:</b> TETH</li>
-        </ul>
-        <ol class="ml-6">
-          <li>Open Metamask</li>
-          <li>Click in the upper-left to choose a Network</li>
-          <li>Click the "Add Network" button</li>
-          <li>Choose "Add a Network Manually"</li>
-          <li>Enter the following information:
-          </li>
-          <li>
-            Save the private test network
-          </li>
-          <li>
-            Open Metamask again and select the "Dexorder Alpha" blockchain for use with this website.
-          </li>
-        </ol>
--->
-      </v-card-text>
-    </div>
+
   </v-card>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
 import {computed, ref} from "vue";
-import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
+import {connectWallet, switchChain} from "@/blockchain/wallet.js";
 import Btn from "@/components/Btn.vue";
 import CopyButton from "@/components/CopyButton.vue";
 import Logo from "@/components/Logo.vue";
 
 const s = useStore()
-const ws = useWalletStore()
-const pluginOk = window.ethereum !== undefined
-const loggedIn = computed(()=>s.account!==null)
-const needsNetwork = ref(false)
 const disabled = ref(false)
 
+const Status = {
+  NEEDS_PLUGIN: -3,
+  NEEDS_NETWORK: -2,
+  NEEDS_ACCOUNT: -1,
+  OK: 0,
+}
+
+const pluginOk = window.ethereum !== undefined
+const status = computed(() =>
+    !pluginOk ? Status.NEEDS_PLUGIN :
+    !s.chainInfo ? Status.NEEDS_NETWORK :
+    !s.account ? Status.NEEDS_ACCOUNT : Status.OK)
+
 function reload() {
   window.location.reload()
 }
@@ -92,17 +72,7 @@ async function connect() {
       await switchChain(s.chainId)
     }
     catch (e) {
-      if (e.code===4902) {
-        try {
-          await addTestnet()
-          needsNetwork.value = false
-        }
-        catch (e) {
-          needsNetwork.value = true
-          return
-        }
-      }
-      else if (e.code===4001) {
+      if (e.code===4001) {
         // explicit user rejection
         return
       }