make vet.domain resolver work

src/components/AccountLink.vue

@@ -13,17 +13,18 @@
             v-if="noLink"
             class="text-monospace text-truncate"
         >
-            <template v-if="abbr">{{ address | abbr }}</template>
+            <template v-if="!!resolvedName">{{ resolvedName }}</template>
+            <template v-else-if="abbr">{{ address | abbr }}</template>
             <template v-else>{{ address | checksum }}</template>
-            <template v-if="vetName"> ({{ vetName }})</template>
         </span>
         <router-link
             class="text-monospace text-truncate"
             v-else
             :to="{ name: 'account', params: { address: address, net: $net } }"
         >
-            <template v-if="abbr">{{ (vetName || address) | abbr }}</template>
-            <template v-else>{{ (vetName || address | checksum) }}</template>
+            <template v-if="resolvedName">{{ resolvedName }}</template>
+            <template v-else-if="abbr">{{ address | abbr }}</template>
+            <template v-else>{{ address | checksum }}</template>
         </router-link>
     </div>
     <span
@@ -35,6 +36,7 @@
 import Vue from "vue"
 import { address } from "thor-devkit"
 import { genesisIdToNetwork } from '../utils'
+import { resolveDomainName } from '../resolver'
 
 export default Vue.extend({
     props: {
@@ -44,20 +46,11 @@ export default Vue.extend({
         noLink: Boolean
     },
     asyncComputed: {
-        async vetName(): Promise<string | null> {
+        async resolvedName(): Promise<string | null> {
             if (genesisIdToNetwork(this.$connex.thor.genesis.id) !== 'main') {
                 return null
             }
-            try {               
-                const { decoded: { names } }  = await this.$connex.thor
-                    .account(vetResolverUtilsAddress)
-                    .method(getNamesJsonAbi)
-                    .call([this.address])
-
-                return names[0] || null
-            } catch {
-                return null
-            }
+            return resolveDomainName(this.address, this.$connex)
         }
     },
     computed: {
@@ -67,25 +60,4 @@ export default Vue.extend({
     }
 })
 
-const vetResolverUtilsAddress = '0xA11413086e163e41901bb81fdc5617c975Fa5a1A'
-const getNamesJsonAbi = {
-  "inputs": [
-    {
-      "internalType": "address[]",
-      "name": "addresses",
-      "type": "address[]"
-    }
-  ],
-  "name": "getNames",
-  "outputs": [
-    {
-      "internalType": "string[]",
-      "name": "names",
-      "type": "string[]"
-    }
-  ],
-  "stateMutability": "view",
-  "type": "function"
-}
-
 </script>

src/resolver.ts

@@ -0,0 +1,36 @@
+
+// vet.domain resolver
+const vet_domainResolver = '0xA11413086e163e41901bb81fdc5617c975Fa5a1A'
+const getNamesJsonAbi = {
+  "inputs": [
+    {
+      "internalType": "address[]",
+      "name": "addresses",
+      "type": "address[]"
+    }
+  ],
+  "name": "getNames",
+  "outputs": [
+    {
+      "internalType": "string[]",
+      "name": "names",
+      "type": "string[]"
+    }
+  ],
+  "stateMutability": "view",
+  "type": "function"
+}
+
+export const resolveDomainName = async (address: string, connex: Connex) => { 
+    try {               
+        const { decoded: { names } }  = await connex.thor
+            .account(vet_domainResolver)
+            .method(getNamesJsonAbi)
+            .cache([address, vet_domainResolver])
+            .call([address])
+
+        return names[0] || null
+    } catch {
+        return null
+    }
+}

src/views/Account.vue

@@ -4,16 +4,24 @@
             <b-card-header class="border-bottom-0 pb-0">
                 <span class="h4 mr-3">Account</span>
                 <div class="d-flex">
-                    <AccountLink
-                        no-link
-                        icon
-                        :address="address"
-                        style="min-width:0px"
-                    />
-                    <Copy
-                        :value="address|checksum"
-                        class="ml-2"
-                    />
+                    <div class="d-inline-flex align-items-center mw-100 mt-1">
+                        <Ident
+                            class="mr-2 flex-shrink-0"
+                            :value="address"
+                            style="width: 3.64em; height: 2.6em; border-radius: 0.2em"
+                        />
+                        <div class="d-flex flex-column">
+                            <div>
+                                <span class="text-monospace text-truncate">{{ address|checksum }}</span>
+                                <Copy
+                                    :value="address|checksum"
+                                    class="ml-2"
+                                />
+                            </div>
+                            <span v-if="resolvedName" class="text-monospace text-truncate text-black-50" style="font-size: 75%;">{{ resolvedName }}</span>
+                        </div> 
+                    </div>
+
                 </div>
             </b-card-header>
             <b-tabs
@@ -46,6 +54,8 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import { resolveDomainName } from '@/resolver';
+import { genesisIdToNetwork } from '@/utils';
 
 export default Vue.extend({
     data: () => {
@@ -69,6 +79,14 @@ export default Vue.extend({
         if (this.tab < 0) {
             this.tab = 0
         }
-    }
+    },
+    asyncComputed: {
+        async resolvedName(): Promise<string | null> {
+            if (genesisIdToNetwork(this.$connex.thor.genesis.id) !== 'main') {
+                return null
+            }
+            return resolveDomainName(this.address, this.$connex)
+        }
+    },
 })
 </script>