Getting aliases from search service

src/api/search.js

@@ -66,10 +66,49 @@ export class SearchService {
         ).then(this.parseResponse)
     }
 
+    alias(network, address) {
+        return this.api.post(
+            `/v1/search`,  {
+                query: address,
+                size: 1,
+                filters: {
+                    search: {
+                        index: ["accounts"],
+                        network: [network]
+                    },
+                }
+            }
+
+        ).then(response => {
+            let data = this.parseResponse(response);
+            if (data.items && data.items.length > 0) {
+                let body = data.items[0].body;
+                return getAccountAlias(body);
+            }
+            return null;
+        })
+    }
+
     parseResponse(response) {
         if (response.status != 200) {
             throw new RequestFailedError(response);
         }
         return response.data;
     }
+}
+
+export function getAccountAlias(body) {
+    if (body.TzKT) {
+        return body.TzKT.Name;
+    }
+    if (body.TZIP) {
+        return body.TZIP.Name;
+    }
+    if (body.Profiles) {
+        return body.Profiles.Name;
+    }
+    if (body.Domains) {
+        return body.Domains.Name;
+    }
+    return null;
 }

src/components/Dialogs/AccountBox.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-dialog v-model="show" width="800">
+  <v-dialog v-model="show" width="800" @keydown.esc="show = false" ref="accountBox">
     <template v-slot:activator="{ on }">
-      <v-list-item v-on="on" class="link" :class="gutters ? '' : 'pa-0 ma-0'" selectable>
+      <v-list-item v-on="on" class="link" :class="gutters ? '' : 'pa-0 ma-0 mr-3'" selectable>
         <v-list-item-content>
           <v-list-item-subtitle v-if="title" :class="lowerTitle ? 'lower-overline' : 'overline'">
             <span>{{ title }}</span>
@@ -52,7 +52,6 @@ export default {
   props: {
     title: String,
     address: String,
-    alias: String,
     highlighted: Boolean,
     gutters: Boolean,
     network: String,
@@ -61,22 +60,18 @@ export default {
   components: {
     ValueInspector
   },
-  methods: {
-    handleKeyUp(e) {
-      if (e.key === "Escape"){
-        this.show = false;
-      }
-    },
-  },
-  mounted() {
-    document.addEventListener('keyup', this.handleKeyUp);
-  },
-  destroyed() {
-    document.removeEventListener('keyup', this.handleKeyUp);
-  },
   data: () => ({
-    show: false
-  })
+    show: false,
+    alias: null
+  }),
+  async mounted() {
+    this.alias = await this.getAlias(this.network, this.address);
+  },
+  updated() {
+      if (this.show) {
+          this.$refs.accountBox.show();
+      }
+  }
 }
 </script>
 

src/components/InternalOperation.vue

@@ -109,7 +109,6 @@
           v-if="data.source"
           :title="sourceHeader"
           :address="data.source"
-          :alias="data.source_alias"
           :highlighted="data.source == address"
           :network="data.network"
         />
@@ -118,7 +117,6 @@
         <AccountBox
           :title="destinationHeader"
           :address="data.destination"
-          :alias="data.destination_alias"
           :highlighted="data.destination == address"
           :network="data.network"
         />
@@ -135,7 +133,6 @@
           v-if="data.delegate"
           title="Delegate"
           :address="data.delegate"
-          :alias="data.delegate_alias"
           :highlighted="false"
           :network="data.network"
         />
@@ -153,7 +150,7 @@
     </v-row>
 
     <v-expand-transition>
-      <div v-show="showParams" class="px-4 pb-2">
+      <div v-if="showParams" class="px-4 pb-2">
         <v-row v-if="data.errors" no-gutters>
           <v-col>
             <OperationAlert :errors="data.errors" :operationId="data.id" :network="data.network"/>
@@ -257,18 +254,12 @@ export default {
   },
   computed: {
     source() {
-      if (this.data.source_alias) {
-        return this.data.source_alias;
-      }
       if (this.data.source) {
         return this.data.source;
       }
       return "unset";
     },
     destination() {
-      if (this.data.destination_alias) {
-        return this.data.destination_alias;
-      }
       if (this.data.destination) {
         return this.data.destination;
       }
@@ -411,7 +402,7 @@ export default {
   },
   watch: {
     showParams(newValue) {
-      if (newValue && this.diffs === null) {
+      if (newValue && this.diffs === null && !this.loadingDiffs) {
         this.getDiff();
       }
     }

src/components/SearchBox.vue

@@ -148,6 +148,7 @@
 <script>
 import { mapActions } from "vuex";
 import { isKT1Address, isOperationHash } from "@/utils/tz.js";
+import { getAccountAlias } from '@/api/search.js';
 import {
   getHistory,
   addHistoryItem,
@@ -358,19 +359,7 @@ export default {
       this.suggests = this.getHistoryItems(null);
     },
     getAccountName(body) {
-      if (body.TzKT !== undefined) {
-        return body.TzKT.Name;
-      }
-      if (body.TZIP !== undefined) {
-        return body.TZIP.Name;
-      }
-      if (body.Profiles !== undefined) {
-        return body.Profiles.Name;
-      }
-      if (body.Domains !== undefined) {
-        return body.Domains.Name;
-      }
-      return '';
+      return getAccountAlias(body);
     }
   },
   watch: {

src/components/Tables/RecentlyCalledContracts.vue

@@ -111,7 +111,15 @@ export default {
         .then((data) => {
           this.recentlyCalledContracts = this.pageable ? this.recentlyCalledContracts.concat(data) : data;
           this.loadingRecentlyCalledContractsStatus = DATA_LOADING_STATUSES.SUCCESS;
-        });
+          return data;
+        })
+        .then((data) => this.getAliases(data));
+    },
+    async getAliases(contracts) {
+      for (const idx in contracts) {
+        if (contracts[idx].alias) continue;        
+        contracts[idx].alias = await this.getAlias(this.network, contracts[idx].address);
+      }
     },
   },
   watch: {

src/main.js

@@ -18,6 +18,7 @@ import { BetterCallApi } from "@/api/bcd.js";
 import { TokenMetadataApi } from "@/api/token_metadata.js";
 import { NodeRPC } from "@/api/rpc.js";
 import { Bookmarks } from "@/utils/bookmarks.js";
+import { Aliases } from '@/utils/aliases.js';
 import { SearchService } from "@/api/search.js";
 import { MetadataAPI } from "@/api/metadata.js";
 
@@ -135,6 +136,7 @@ let config = {
 
 let api = new BetterCallApi(config.API_URI);
 let bookmarks = new Bookmarks();
+let aliases = new Aliases(100);
 let searchService = new SearchService(config.SEARCH_SERVICE_URI);
 let tokenMetadata = new TokenMetadataApi(config.TOKEN_METADATA_API);
 let metadataAPI = new MetadataAPI(config.METADATA_API_URI);
@@ -161,7 +163,20 @@ api.getConfig().then(response => {
 
   Vue.mixin({
     data() {
-      return { config, api, rpc, helpers, bookmarks, metadataAPI, tokenMetadata, searchService }
+      return { config, api, rpc, helpers, bookmarks, metadataAPI, tokenMetadata, searchService, aliases }
+    },
+    methods: {
+      getAlias(network, address) {
+        let alias = this.aliases.get(`${network}_${address}`);
+        if (alias !== undefined) return alias;
+
+        return this.searchService.alias(network, address)
+          .then(result => {
+            this.aliases.add(`${network}_${address}`, result);
+            return result;
+          })
+          .catch(err => console.log(err));
+      }
     }
   });
 

src/utils/aliases.js

@@ -0,0 +1,22 @@
+const aliasesKey = 'aliases';
+
+export class Aliases {
+    constructor(size) {
+        this.size = size;
+        this.aliases = JSON.parse(localStorage.getItem(aliasesKey)) || {};
+    }
+
+    add(key, alias) {
+        let keys = Object.keys(this.aliases);
+        if (keys.length === this.size) {
+            delete this.aliases[keys[0]]
+        }
+        this.aliases[key] = alias;
+        localStorage.setItem(aliasesKey, JSON.stringify(this.aliases));
+    }
+
+    get(key) {
+        return this.aliases[key];
+    }
+}
+

src/views/constant/Constant.vue

@@ -27,6 +27,7 @@ export default {
   props: {
     network: String,
     address: String,
+    alias: String
   },
   computed: {
     breadcrumbsItems() {
@@ -40,7 +41,7 @@ export default {
           text: toTitleCase(this.network),
         },
         {
-          text: this.contract && this.contract.alias ? this.contract.alias : shortcutOnly(this.address),
+          text: this.alias ? this.alias : shortcutOnly(this.address),
           to: `/${this.network}/${this.address}`,
           disabled: true,
         },

src/views/constant/ReferenceContract.vue

@@ -90,8 +90,15 @@ export default {
       this.contracts = await this.api.getConstantsByAddress(network, address, offset);
       this.isLastPage = this.contracts.length < this.itemsPerPage
 
+      await this.getAliases(network);
+
       this.loading = false;
     },
+    async getAliases(network) {
+      for (const idx in this.contracts) {
+        this.contracts[idx].alias = this.getAlias(network, this.contracts[idx].address);
+      }
+    },
     navigate(path) {
       this.$router.push(path);
     },

src/views/contract/Contract.vue

@@ -71,6 +71,7 @@
       <router-view
         :address="address"
         :network="network"
+        :alias="alias"
         :contract="contract"
         :tokensTotal="tokensTotal"
         :metadata="metadata"
@@ -80,7 +81,7 @@
         :off-chain-views="offChainViews"
       ></router-view>
 
-      <BookmarkDialog v-model="openBookMarkDialog" :alias="contract.alias || ``" @added="onBookmarkAdded"/>
+      <BookmarkDialog v-model="openBookMarkDialog" :alias="alias || ``" @added="onBookmarkAdded"/>
     </VContainer>
   </div>
 </template>
@@ -127,20 +128,10 @@ export default {
     offChainViews: [],
     offChainViewsLoadingStatus: DATA_LOADING_STATUSES.NOTHING,
     isBookmark: false,
-    openBookMarkDialog: false
+    openBookMarkDialog: false,
+    alias: undefined
   }),
   computed: {
-    alias() {
-      if (this.contract) {
-        if (this.contract.alias) {
-          return this.contract.alias;
-        } else if (this.metadata && this.metadata.name) {
-          return this.metadata.name;
-        }
-      }
-      return null;
-    },
-
     link() {
       let routeData = {};
       if (this.contract && this.contract.slug) {
@@ -179,7 +170,7 @@ export default {
           text: toTitleCase(this.network),
         },
         {
-          text: this.contract && this.contract.alias ? this.contract.alias : shortcutOnly(this.address),
+          text: this.alias ? this.alias : shortcutOnly(this.address),
           to: `/${this.network}/${this.address}`,
           disabled: false,
         },
@@ -256,10 +247,12 @@ export default {
     handleSearchBoxBlur() {
       this.isComboBoxExpanded = false;
     },
-    init() {
+    async init() {
       this.tokensTotal = 0;
       this.metadata = null;
       this.contract = {};
+
+      this.alias = await this.getAlias(this.network, this.address);
       if (this.isContract) {
         this.bookmarks.registerObserver(this.onBookmarkStateChanged);
         this.detectBookmark();
@@ -351,7 +344,7 @@ export default {
         this.bookmarks.remove(key);
       } else {
         this.openBookMarkDialog = !this.openBookMarkDialog;
-        this.name = this.contract.alias || "";
+        this.name = this.alias || "";
 
       }
     },
@@ -376,10 +369,10 @@ export default {
       this.bookmarks.add(key, {
         network: this.network,
         address: this.address,
-        alias: value || this.contract.alias,          
+        alias: value || this.alias,          
       })
       this.openBookMarkDialog = false;
-    }
+    },
   },
   watch: {
     address: {