Enhance account modal with EVM support and improve logout functionality

products/governance-snapshot/README.md

@@ -70,6 +70,17 @@ When confirmed, the application ([src/store/modules/app.ts](src/store/modules/ap
 3.  **Authorize**: The address owner calculates the vote intention locally and cryptographically signs it using their private key (managed by the wallet software).
 4.  **Submit**: The signed intent is relayed to a centralized hub for aggregation.
 
+## Wallet Connectivity
+
+The portal supports two wallet types, both of which require **mainnet**. Testnet is not supported and no fix is planned, as this portal is scheduled for deprecation.
+
+| Wallet | Connector ID | Notes |
+|--------|-------------|-------|
+| ZilPay | `zlp` | Native Zilliqa wallet; displays bech32 address; links to the configured network explorer |
+| EVM Wallet (e.g. MetaMask) | `evm` | MetaMask-compatible; displays `0x`-prefixed address; links to [zilliqa.blockscout.com](https://zilliqa.blockscout.com) (mainnet only — hardcoded) |
+
+The EVM wallet block-explorer link is hardcoded to `https://zilliqa.blockscout.com`, so it will always point to mainnet regardless of the connected network. This is a known limitation that will not be addressed before deprecation.
+
 ## Development
 
 

products/governance-snapshot/src/components/Modal/Account.vue

@@ -1,6 +1,6 @@
 <template>
   <UiModal :open="open" @close="$emit('close')">
-    <div v-if="!web3.account.bech32 || step === 'connect'">
+    <div v-if="!web3.account.bech32">
       <h3 class="m-4 mb-0 text-center">Connect wallet</h3>
       <div class="m-4 mb-5">
         <a
@@ -33,7 +33,7 @@
       <h3 class="m-4 mb-0 text-center">Account</h3>
       <div v-if="$auth.isAuthenticated" class="m-4">
         <a
-          :href="_explorer(web3.network.name, web3.account.bech32)"
+          :href="accountExplorerUrl"
           target="_blank"
           class="mb-2 d-block"
         >
@@ -43,17 +43,15 @@
               size="16"
               class="mr-2 ml-n1"
             />
-            <span v-if="web3.name" v-text="_shorten(web3.name)" />
-            <span v-else v-text="_shorten(web3.account.bech32)" />
+            <span v-text="_shorten(accountDisplayAddress)" />
             <Icon name="external-link" class="ml-1" />
           </UiButton>
         </a>
         <UiButton
-          v-show="!web3"
-          @click="step = 'connect'"
-          class="button-outline width-full mb-2"
+          @click="handleLogout"
+          class="button-outline width-full text-red mb-2"
         >
-          Connect wallet
+          Disconnect
         </UiButton>
       </div>
     </div>
@@ -65,14 +63,18 @@ import { mapActions } from 'vuex';
 
 export default {
   props: ['open'],
-  data() {
-    return {
-      step: null
-    };
-  },
-  watch: {
-    open() {
-      this.step = null;
+  computed: {
+    accountDisplayAddress() {
+      if (this.web3.isEVM) {
+        return '0x' + this.web3.account.base16;
+      }
+      return this.web3.account.bech32;
+    },
+    accountExplorerUrl() {
+      if (this.web3.isEVM) {
+        return `https://zilliqa.blockscout.com/address/0x${this.web3.account.base16}`;
+      }
+      return this._explorer(this.web3.network.name, this.web3.account.bech32);
     }
   },
   methods: {

products/governance-snapshot/src/store/modules/web3.ts

@@ -19,13 +19,15 @@ const state = {
     bech32: ''
   },
   name: null,
-  network: config.networks['mainnet']
+  network: config.networks['mainnet'],
+  isEVM: false
 };
 
 const mutations = {
   LOGOUT(_state) {
-    Vue.set(_state, 'account', null);
+    Vue.set(_state, 'account', { base16: '', bech32: '' });
     Vue.set(_state, 'name', null);
+    Vue.set(_state, 'isEVM', false);
     console.debug('LOGOUT');
   },
   LOAD_PROVIDER_REQUEST() {
@@ -38,7 +40,7 @@ const mutations = {
     console.debug('LOAD_PROVIDER_SUCCESS');
   },
   LOAD_PROVIDER_FAILURE(_state, payload) {
-    Vue.set(_state, 'account', null);
+    Vue.set(_state, 'account', { base16: '', bech32: '' });
     console.debug('LOAD_PROVIDER_FAILURE', payload);
   },
   HANDLE_CHAIN_CHANGED(_state, net) {
@@ -57,6 +59,9 @@ const mutations = {
   HANDLE_ACCOUNTS_CHANGED(_state, payload) {
     Vue.set(_state, 'account', payload);
     console.debug('HANDLE_ACCOUNTS_CHANGED', payload);
+  },
+  SET_IS_EVM(_state, value: boolean) {
+    Vue.set(_state, 'isEVM', value);
   }
 };
 
@@ -70,9 +75,14 @@ const actions = {
       await dispatch('loadProvider');
     }
   },
-  logout: async ({ commit }) => {
-    Vue.prototype.$auth.logout();
-    commit('LOGOUT');
+  logout: async ({ commit, dispatch }) => {
+    try {
+      await Vue.prototype.$auth.logout();
+    } catch (e) {
+      dispatch('notify', ['red', 'Logout failed. Please try again.']);
+    } finally {
+      commit('LOGOUT');
+    }
   },
   loadProvider: async ({ commit }) => {
     commit('LOAD_PROVIDER_REQUEST');
@@ -82,7 +92,8 @@ const actions = {
         const base16 = auth.provider.address.slice(2).toLowerCase();
         const bech32 = toBech32Address('0x' + base16);
         commit('HANDLE_CHAIN_CHANGED', 'mainnet');
-        commit('LOAD_PROVIDER_SUCCESS', { account: { base16, bech32 }, name: bech32 });
+        commit('SET_IS_EVM', true);
+        commit('LOAD_PROVIDER_SUCCESS', { account: { base16, bech32 }, name: '0x' + base16 });
 
         // Subscribe to future account changes (e.g. user switches wallet in MetaMask)
         window['ethereum'].on('accountsChanged', (accounts: string[]) => {