wallet flow; new faucet; placing chart orders works!

src/components/NeedsProvider.vue

@@ -1,24 +1,22 @@
 <template>
   <slot v-if="ok"/>
-  <phone-card v-if="!walletOk">
-    <v-card-title>Install Wallet</v-card-title>
-    <v-card-text>
+  <div v-if="!walletOk">
+    <h2>Install Wallet</h2>
+    <p>
       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>
+    </p>
+    <p>
       <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
-    </v-card-actions>
-  </phone-card>
-  <phone-card v-if="walletOk && !providerOk">
-    <v-card-text>
+    </p>
+  </div>
+  <div v-if="walletOk && !providerOk">
+    <p>
       Please log in to your crypto wallet.
-    </v-card-text>
-    <v-card-actions v-if="walletOk && !providerOk">
-      <v-btn prepend-icon="mdi-power" text="Connect Wallet" @click="connectWallet"/>
-    </v-card-actions>
-  </phone-card>
-  <phone-card v-if="walletOk && providerOk && !chainOk">
+    </p>
+    <v-btn prepend-icon="mdi-power" text="Connect Wallet" @click="connectWallet"/>
+  </div>
+  <div v-if="walletOk && chainOk && !providerOk">
 <!-- todo Alpha Live
     <v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title>
     <v-card-text>
@@ -26,40 +24,42 @@
       <blockchain chain-id="42161"/> blockchain in your wallet.
     </v-card-text>
 -->
-    <v-card-title><v-icon icon="mdi-hand-wave" color="warning"/>&nbsp;Welcome to Dexorder Alpha!</v-card-title>
-    <v-card-text>
-      This alpha test runs on a private blockchain, which you need to set up.
-    </v-card-text>
-    <v-card-item>
-      <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:
-          <ul>
-            <li>Name: Dexorder Alpha</li>
-            <li>New RPC URL: https://rpc.alpha.dexorder.trade</li>
-            <li>Chain ID: 1337</li>
-            <li>Currency Symbol: TETH</li>
-          </ul>
-        </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-item>
-  </phone-card>
+    <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.
+    </p>
+    <p>
+      <v-btn variant="tonal" @click="addChain">Setup Dexorder Testnet</v-btn>
+    </p>
+    <p>Manual Setup:</p>
+    <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:
+        <ul>
+          <li>Name: Dexorder Alpha Testnet</li>
+          <li>New RPC URL: https://rpc.alpha.dexorder.trade</li>
+          <li>Chain ID: 1337</li>
+          <li>Currency Symbol: TETH</li>
+        </ul>
+      </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>
+  </div>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
 import PhoneCard from "@/components/PhoneCard.vue";
 import {connectWallet} from "@/blockchain/wallet.js";
-import {computed} from "vue";
+import {computed, watch} from "vue";
 import Blockchain from "@/components/Blockchain.vue";
 
 const s = useStore()
@@ -67,11 +67,42 @@ const walletOk = typeof window.ethereum !== 'undefined'
 const providerOk = computed(()=>s.provider!==null)
 const chainOk = computed(()=>providerOk.value && s.helper!==null)
 const ok = computed(()=>{
+  console.log('recompute provider ok')
   return walletOk && providerOk.value && chainOk.value
 })
 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">