wallet connection fixes

src/components/CopyButton.vue

@@ -7,7 +7,7 @@
                :icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"
                :text="showText?text:''"
         />
-        <slot/>
+        <slot>{{text}}</slot>
       </span>
     </template>
     <span>Copied!</span>

src/components/NeedsProvider.vue

@@ -10,20 +10,24 @@
       <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
     </p>
   </div>
+<!--
   <div v-if="walletOk && !providerOk">
     <p>
-      Please log in to your crypto wallet.
+      Please switch to a supported blockchain.
     </p>
-    <v-btn prepend-icon="mdi-power" text="Connect Wallet" @click="connectWallet"/>
+    <v-btn prepend-icon="mdi-power" text="Switch Blockchain" @click="switchChain(s.chainId)"/>
   </div>
-  <div v-if="walletOk && chainOk && !providerOk">
-<!-- todo Alpha Live
+-->
+  <div v-if="walletOk && !providerOk">
+    TODO
+<!--
+&lt;!&ndash; 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>
--->
+&ndash;&gt;
     <h2><v-icon icon="mdi-hand-wave" color="warning"/>&nbsp;Welcome to Dexorder Alpha!</h2>
     <p>
       This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
@@ -52,54 +56,42 @@
         Open Metamask again and select the "Dexorder Alpha" blockchain for use with this website.
       </li>
     </ol>
+-->
   </div>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
-import PhoneCard from "@/components/PhoneCard.vue";
-import {connectWallet} from "@/blockchain/wallet.js";
-import {computed, watch} from "vue";
-import Blockchain from "@/components/Blockchain.vue";
+import {switchChain, useWalletStore} from "@/blockchain/wallet.js";
+import {computed, ref, watchEffect} from "vue";
 
 const s = useStore()
+const ws = useWalletStore()
 const walletOk = typeof window.ethereum !== 'undefined'
-const providerOk = computed(()=>s.provider!==null)
-const chainOk = computed(()=>providerOk.value && s.helper!==null)
-const ok = computed(()=>walletOk && providerOk.value && chainOk.value)
+const providerOk = computed(()=>ws.chainId === s.chainId)
+const ok = computed(()=>walletOk && providerOk.value)
+const connecting = ref(false)
+
+watchEffect(()=>{
+  if( !providerOk.value && connecting.value ) {
+    try {
+      switchChain(s.chainId)
+    }
+    catch (e) {
+      console.log('switchChain failed', e)
+      if (e.code===-9999999) {
+        // todo
+        addTestnet()
+      }
+    }
+  }
+})
+
 function reload() {
   window.location.reload()
 }
 
-async function addChain() {
-  await window.ethereum.request({
-    "method": "wallet_addEthereumChain",
-    "params": [
-      {
-        "chainId": "0x539",
-        "chainName": "Dexorder Alpha Testnet",
-        "rpcUrls": ["https://rpc.alpha.dexorder.trade"],
-        "nativeCurrency": {
-          "name": "Test Ethereum",
-          "symbol": "TETH",
-          "decimals": 18
-        }
-      }
-    ]
-  });
-}
 
-watch([providerOk, chainOk], async () => {
-  console.log('checking chain')
-  if (walletOk && providerOk.value && !chainOk.value) {
-    console.log('switching chain')
-    const result = await window.ethereum.request({
-      "method": "wallet_switchEthereumChain",
-      "params": [{"chainId": '0x' + Object.keys(metadata)[0].toString(16)}]
-    });
-    console.log('chain switch result', result)
-  }
-})
 </script>
 
 <style scoped lang="scss">

src/components/NeedsSigner.vue

@@ -1,26 +1,94 @@
 <template>
-  <needs-provider>
-    <slot v-if="ok" v-bind="$props"/>
-    <div v-if="!ok">
-      <btn icon="mdi-wallet-outline" color="warning" variant="outlined" @click="connect" :disabled="disabled" text="Connect Wallet"/>
-    </div>
-  </needs-provider>
+  <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>
+    <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">
+      <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>
+    </v-card>
+  </div>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
 import NeedsProvider from "@/components/NeedsProvider.vue";
 import {computed, ref} from "vue";
-import {connectWallet} from "@/blockchain/wallet.js";
+import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
 import Btn from "@/components/Btn.vue";
+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 needsNetwork = ref(false)
 const disabled = ref(false)
 
 async function connect() {
   disabled.value = true
   try {
+    try {
+      await switchChain(s.chainId)
+    }
+    catch (e) {
+      if (e.code===4902) {
+        try {
+          await addTestnet()
+          needsNetwork.value = false
+        }
+        catch (e) {
+          needsNetwork.value = true
+          return
+        }
+      }
+      else
+        console.log('wallet connect failure',e)
+    }
     await connectWallet(s.chainId)
   }
   finally {
@@ -32,5 +100,10 @@ async function connect() {
 
 <style scoped lang="scss">
 @use "src/styles/vars" as *;
-
+#manualsetup td {
+  text-align: right;
+}
+#manualsetup tr td:last-child {
+  padding-left: 1em;
+}
 </style>

src/components/Status.vue

@@ -266,6 +266,7 @@ const orders = computed(()=>{
       st.token1 = o.tokenIn < o.tokenOut ? o.tokenOut : o.tokenIn
     }
   }
+  result.sort((a,b)=>b.start-a.start)
   console.log('orders', result)
   return result
 })