Make UI more informative when metamask is not connected.

Author: mathijs81

web/public/mm-logo.svg

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div v-if="status.initializing" class="text-center">Connecting...</div>
+    <div v-else-if="!status.connected" class="d-flex flex-column align-items-center">
+      <img src="/mm-logo.svg" class="p-2" />
+      <p class="pt-2 mb-0">You need to connect your Metamask wallet to continue.</p>
+      <a class="btn btn-link mb-5" target="_blank" href="https://metamask.io/download.html"
+        >Get metamask</a
+      >
+
+      <button type="button" class="btn btn-primary mb-2" @click="connect">Connect now</button>
+      <p v-if="status.lastErrorMessage" class="mb-2 alert alert-warning">
+        {{ status.lastErrorMessage }}
+      </p>
+    </div>
+    <span v-else> Connected to {{ status.account }} </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { web3Service } from '@/web3/web3Service';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const status = web3Service.status();
+    const connect = () => {
+      web3Service.init();
+    };
+    return {
+      status,
+      connect,
+    };
+  },
+});
+</script>

web/src/components/Web3Info.vue

@@ -29,12 +29,13 @@
     </div>
     <OrderPlanDialog v-model:visible="orderDialogVisible" :orderPlan="orderPlan" />
   </div>
-  <div v-else>Loading...</div>
+  <Web3Info v-else />
 </template>
 
 <script lang="ts">
 import OrderPlanDialog from '@/components/OrderPlanDialog.vue';
 import SliderPanel from '@/components/SliderPanel.vue';
+import Web3Info from '@/components/Web3Info.vue';
 import { defaultOrderPlanner, PlannedOrder } from '@/orderplan/orderplan';
 import { calcSliderChangeResult } from '@/util/sliderUtil';
 import { fetchTokens } from '@/util/tokenlist';
@@ -141,7 +142,7 @@ export default defineComponent({
       noFunds,
     };
   },
-  components: { SliderPanel, OrderPlanDialog },
+  components: { SliderPanel, OrderPlanDialog, Web3Info },
   methods: {},
 });
 </script>

web/src/views/WalletAccount.vue

@@ -31,12 +31,16 @@ async function getProvider(): Promise<ExternalProvider> {
     await provider.request!({ method: 'eth_requestAccounts' });
   } catch (err) {
     console.log(err);
+    if (err.message && err.message.includes('rejected')) {
+      throw err;
+    }
     // Try ethereum.enable as fallback
     try {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (provider as unknown as any).enable();
+      await (provider as unknown as any).enable();
     } catch (err) {
       console.log("enable also didn't work", err);
+      throw err;
     }
   }
   return provider;
@@ -45,6 +49,8 @@ async function getProvider(): Promise<ExternalProvider> {
 export interface Web3Status {
   initializing: boolean;
   connected?: boolean;
+  providerPresent: boolean;
+  lastErrorMessage?: string;
   network?: string;
   chainId?: number;
   address?: string;
@@ -57,6 +63,7 @@ class Web3Service {
   private signer?: Signer;
   private state: Web3Status = reactive({
     initializing: true,
+    providerPresent: false,
   }) as Web3Status;
   private copy = readonly(this.state);
   private intervalHandler?: number;
@@ -91,6 +98,7 @@ class Web3Service {
 
   private async updateData() {
     if (this.provider !== undefined) {
+      this.state.providerPresent = true;
       try {
         await this.provider.getBlock('latest');
       } catch (err) {
@@ -114,6 +122,7 @@ class Web3Service {
         this.state.balance = utils.formatEther(await this.provider.getBalance(accounts[0]));
       }
     } else {
+      this.state.providerPresent = false;
       console.log('no web3');
     }
   }
@@ -122,6 +131,7 @@ class Web3Service {
     if (!this.state.connected) {
       this.state.initializing = true;
     }
+    this.state.lastErrorMessage = undefined;
     return getProvider()
       .then(async (externalProvider) => {
         this.externalProvider = externalProvider;
@@ -131,10 +141,11 @@ class Web3Service {
         if (this.intervalHandler === undefined) {
           this.intervalHandler = window.setInterval(() => this.updateData(), 2000);
         }
-        this.updateData();
+        await this.updateData();
       })
       .catch((error) => {
         console.log(error);
+        this.state.lastErrorMessage = error.message;
         if (errorCallback) {
           errorCallback(error.message);
         }