rollback account link style && improve search component code style

vechain · Dec 19, 2024 · 083a451 · 083a451
1 parent 517022e
commit 083a451
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 54 deletions.
diff --git a/src/components/AccountLink.vue b/src/components/AccountLink.vue
@@ -13,9 +13,11 @@
             v-if="noLink"
             class="text-monospace text-truncate"
         >
-            <template v-if="!!resolvedName">{{ resolvedName }}</template>
-            <template v-else-if="abbr">{{ address | abbr }}</template>
+            <template v-if="abbr">{{ address | abbr }}</template>
             <template v-else>{{ address | checksum }}</template>
+
+            <!-- display the resolved domain name in no link mode(only used in account summary page) -->
+            <span class="text-black-50 small" v-if="!!resolvedName"> {{ resolvedName }}</span>
         </span>
         <router-link
             class="text-monospace text-truncate"

diff --git a/src/resolver.ts b/src/resolver.ts
@@ -20,6 +20,25 @@ const getNamesJsonAbi = {
   "stateMutability": "view",
   "type": "function"
 }
+const getAddressesJsonAbi = {
+  "inputs": [
+    {
+      "internalType": "string[]",
+      "name": "names",
+      "type": "string[]"
+    }
+  ],
+  "name": "getAddresses",
+  "outputs": [
+    {
+      "internalType": "address[]",
+      "name": "addresses",
+      "type": "address[]"
+    }
+  ],
+  "stateMutability": "view",
+  "type": "function"
+}
 
 export const resolveDomainName = async (address: string, connex: Connex) => { 
     try {               
@@ -33,4 +52,19 @@ export const resolveDomainName = async (address: string, connex: Connex) => {
     } catch {
         return null
     }
-}
+}
+
+export const resolveAddressByName = async (name: string, connex: Connex) => { 
+    try {               
+        const { decoded: { addresses } }  = await connex.thor
+            .account(vet_domainResolver)
+            .method(getAddressesJsonAbi)
+            .cache([vet_domainResolver])
+            .call([name])
+
+        return addresses[0] || null
+    } catch {
+        return null
+    }
+}
+
diff --git a/src/views/Account.vue b/src/views/Account.vue
@@ -4,24 +4,16 @@
             <b-card-header class="border-bottom-0 pb-0">
                 <span class="h4 mr-3">Account</span>
                 <div class="d-flex">
-                    <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>
-
+                    <AccountLink
+                        no-link
+                        icon
+                        :address="address"
+                        style="min-width:0px"
+                    />
+                    <Copy
+                        :value="address|checksum"
+                        class="ml-1"
+                    />
                 </div>
             </b-card-header>
             <b-tabs

diff --git a/src/views/Search.vue b/src/views/Search.vue
@@ -17,6 +17,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { genesisIdToNetwork } from '../utils'
+import { resolveAddressByName } from '@/resolver'
 
 export default Vue.extend({
     data: () => {
@@ -68,20 +69,12 @@ export default Vue.extend({
                     }
                 }
             } else if (/\./.test(str) && genesisIdToNetwork(this.$connex.thor.genesis.id) === 'main') {
-                try {
-                    const { decoded: { addresses } }  = await this.$connex.thor
-                        .account(vetResolverUtilsAddress)
-                        .method(getAddressesJsonAbi)
-                        .call([str])
-
-                    if (!addresses[0] || addresses[0] === '0x0000000000000000000000000000000000000000') {
-                        throw new Error('Name not found')
-                    }
+                const address = await resolveAddressByName(str, this.$connex)
 
-                    return this.$router.replace({ name: 'account', params: { address: addresses[0] } })
-                } catch (err) {
-                    this.error = new Error('Name not found')
+                if (address && address !== '0x0000000000000000000000000000000000000000') {
+                    return this.$router.replace({ name: 'account', params: { address: address } })
                 }
+                this.error = new Error('Name not found')
             }
             if (!this.error) {
                 this.error = new Error(`No result for '${str}'`)
@@ -93,25 +86,4 @@ export default Vue.extend({
     }
 })
 
-const vetResolverUtilsAddress = '0xA11413086e163e41901bb81fdc5617c975Fa5a1A'
-const getAddressesJsonAbi = {
-  "inputs": [
-    {
-      "internalType": "string[]",
-      "name": "names",
-      "type": "string[]"
-    }
-  ],
-  "name": "getAddresses",
-  "outputs": [
-    {
-      "internalType": "address[]",
-      "name": "addresses",
-      "type": "address[]"
-    }
-  ],
-  "stateMutability": "view",
-  "type": "function"
-}
-
 </script>