From 8a7e6aadab22cfb9aee22dec545401a4579160af Mon Sep 17 00:00:00 2001
From: Artem <aopoltorzhicky@gmail.com>
Date: Tue, 17 Nov 2020 22:06:57 +0300
Subject: [PATCH] Feature: domains

---
 src/api/bcd.js                           |  32 +++++
 src/components/SearchBox.vue             |  14 +++
 src/router/index.js                      |   7 ++
 src/views/contract/SideBar.vue           |  22 +++-
 src/views/extended_search/ResultItem.vue |  10 ++
 src/views/stats/DomainsTab.vue           | 153 +++++++++++++++++++++++
 src/views/stats/Stats.vue                |   3 +
 7 files changed, 240 insertions(+), 1 deletion(-)
 create mode 100644 src/views/stats/DomainsTab.vue

diff --git a/src/api/bcd.js b/src/api/bcd.js
index 57a320e3..d98c8cf6 100644
--- a/src/api/bcd.js
+++ b/src/api/bcd.js
@@ -759,6 +759,38 @@ export class BetterCallApi {
       })
   }
 
+  listDomains(network, offset = 0, size = 10) {
+    let params = {}
+    if (size > 0) {
+      params['size'] = size
+    }
+    if (offset > 0) {
+      params['offset'] = offset
+    }
+    return getCancellable(this.api, `/domains/${network}`, {
+      params: params
+    })
+      .then((res) => {
+        if (res.status != 200) {
+          throw new RequestFailedError(res);
+        }
+        return res.data
+      })
+  }
+
+  resolveDomain(network, address) {
+    return getCancellable(this.api, `/domains/${network}/resolve?address=${address}`, {})
+      .then((res) => {
+        if (res.status == 204) {
+          return {}
+        }
+        if (res.status != 200) {
+          throw new RequestFailedError(res);
+        }
+        return res.data
+      })
+  }
+
   getTokenVolumeSeries(network, period, contract, addresses, token_id) {
     let params = [];
     params.push(`contract=${contract}`)
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index 0f8d72e7..f1932131 100644
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@@ -34,6 +34,7 @@
           >mdi-circle-multiple-outline</v-icon
         >
         <v-icon v-else-if="item.type == 'recent'">mdi-history</v-icon>
+        <v-icon v-else-if="item.type == 'tezos_domain'">mdi-web</v-icon>
       </v-list-item-avatar>
       <v-list-item-content>
         <v-list-item-title>
@@ -73,6 +74,9 @@
             <span class="text--secondary" style="font-size: 20px">→</span>
             <span>{{ item.body.symbol }}</span>
           </template>
+          <template v-else-if="item.type == 'tezos_domain'">
+            <span class="text--secondary">{{ item.body.name }}</span>
+          </template>
           <template v-if="item.type == 'subscription'">
             <span class="text--secondary">{{ item.body.alias }}</span>
           </template>
@@ -238,6 +242,16 @@ export default {
           this.model = null;
         });
         this.$router.push({ path: `/${network}/${value}/tokens` });
+      } else if (
+        [this.model.type, this.model.body.recent_type].includes(
+          "tezos_domain"
+        ) &&
+        checkAddress(value)
+      ) {
+        this.$nextTick(() => {
+          this.model = null;
+        });
+        this.$router.push({ path: `/${network}/${value}` });
       } else if (this.model.type == "recent") {
         this.$router.push({ name: "search", query: { text: value } });
       }
diff --git a/src/router/index.js b/src/router/index.js
index 09c6549a..d212df3f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,7 @@ import ExtendedSearch from '@/views/extended_search/ExtendedSearch.vue'
 import Stats from '@/views/stats/Stats.vue'
 import NetworkTab from '@/views/stats/NetworkTab.vue'
 import TokensTab from '@/views/stats/TokensTab.vue'
+import DomainsTab from '@/views/stats/DomainsTab.vue'
 
 import Diff from '@/views/diff/Diff.vue'
 
@@ -129,6 +130,12 @@ const router = new Router({
           name: 'stats_fa20',
           component: TokensTab,
           props: true
+        },
+        {
+          path: 'domains',
+          name: 'domains',
+          component: DomainsTab,
+          props: true
         }
       ]
     },
diff --git a/src/views/contract/SideBar.vue b/src/views/contract/SideBar.vue
index c6f8333d..daf26385 100644
--- a/src/views/contract/SideBar.vue
+++ b/src/views/contract/SideBar.vue
@@ -173,6 +173,16 @@
                   </v-list-item-title>
                 </v-list-item-content>
               </v-list-item>
+              <v-list-item v-if="domain">
+                <v-list-item-content>
+                  <v-list-item-subtitle class="overline"
+                    >Domain</v-list-item-subtitle
+                  >
+                  <v-list-item-title class="body-2">
+                    <span>{{ domain }}</span>
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
               <AccountBox
                 v-if="contract.manager"
                 title="Deployed by"
@@ -409,9 +419,13 @@ export default {
     sameLoading: false,
     showWatchSettings: false,
     showVerifyDialog: false,
+    domain: undefined,
   }),
   created() {
-    if (this.isContract) this.requestSameSimilar();
+    if (this.isContract) {
+      this.requestSameSimilar();
+    }
+    this.resolveDomain();
   },
   computed: {
     standard() {
@@ -537,6 +551,12 @@ export default {
     onVerifyClick() {
       this.showVerifyDialog = !this.showVerifyDialog;
     },
+    resolveDomain() {
+      this.api.resolveDomain(this.network, this.address).then((res) => {
+        if (!res && res.name && res.name !== "") return;
+        this.domain = res.name;
+      });
+    },
   },
   watch: {
     address: "requestSameSimilar",
diff --git a/src/views/extended_search/ResultItem.vue b/src/views/extended_search/ResultItem.vue
index 157fb00a..13c14237 100644
--- a/src/views/extended_search/ResultItem.vue
+++ b/src/views/extended_search/ResultItem.vue
@@ -56,6 +56,13 @@
                 <span v-html="highlight(item.body.name)" class="alias"></span>
               </router-link>
             </template>
+            <template v-if="item.type == 'tezos_domain'">
+              <router-link class="serp-link" target="_blank" :to="`/${item.body.network}/${item.value}`">
+                <span v-html="highlight(item.body.name)" class="alias"></span>
+                <span class="text--secondary" style="font-size: 20px;"> → </span>
+                <span class="hash">{{ item.body.address }}</span>
+              </router-link>
+            </template>
           </v-list-item-title>
 
           <v-list-item-subtitle>
@@ -93,6 +100,9 @@
             <span v-else-if="item.type === 'metadata'">
               <span>metadata</span>
             </span>
+            <span v-else-if="item.type === 'tezos_domain'">
+              <span>domain</span>
+            </span>
           </v-list-item-action-text>
         </v-list-item-action>
       </v-list-item>
diff --git a/src/views/stats/DomainsTab.vue b/src/views/stats/DomainsTab.vue
new file mode 100644
index 00000000..69eb585c
--- /dev/null
+++ b/src/views/stats/DomainsTab.vue
@@ -0,0 +1,153 @@
+<template>
+  <v-container fluid class="pa-8 canvas fill-canvas">
+    <v-skeleton-loader :loading="loading" type="table">
+      <v-data-table
+        :items="viewedDomains"
+        :headers="headers"
+        class="ba-1 avg-gas-consumption"
+        hide-default-footer
+      >
+        <template v-slot:item="{ item }">
+          <tr>
+            <td>
+              <span class="text--secondary">{{ item.name }}</span>
+            </td>
+            <td>
+              <v-btn
+                class="text--secondary hash"
+                :to="`/${network}/${item.address}`"
+                style="text-transform: none"
+                target="_blank"
+                text
+              >
+                <span v-html="helpers.shortcut(item.address)"></span>
+              </v-btn>
+            </td>
+            <td>
+              <span
+                class="text--secondary"
+                v-if="item.expiration !== '0001-01-01T00:00:00Z'"
+                >{{ item.expiration | formatShortTime }}</span
+              >
+            </td>
+            <td>
+              <span
+                class="text--secondary"
+                >{{ item.timestamp | fromNow }}</span
+              >
+            </td>
+          </tr>
+        </template>
+        <template v-slot:footer>
+          <v-toolbar flat>
+            <v-spacer></v-spacer>
+            <span class="caption grey--text mr-4"
+              >{{ page * page_size }} - {{ endSlice }} of {{ total }}</span
+            >
+            <v-btn icon @click="left" :disabled="page == 0">
+              <v-icon>mdi-chevron-left</v-icon>
+            </v-btn>
+            <v-btn icon @click="right" :disabled="endSlice == total">
+              <v-icon>mdi-chevron-right</v-icon>
+            </v-btn>
+          </v-toolbar>
+        </template>
+      </v-data-table>
+    </v-skeleton-loader>
+  </v-container>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+const PAGE_SIZE = 10;
+
+export default {
+  name: "DomainTab",
+  props: {
+    network: String,
+  },
+  computed: {
+    page_size() {
+      return PAGE_SIZE;
+    },
+    endSlice() {
+      return Math.min(this.domains.length, (this.page + 1) * PAGE_SIZE);
+    },
+    viewedDomains() {
+      return this.domains.slice(
+        this.page * PAGE_SIZE,
+        (this.page + 1) * PAGE_SIZE
+      );
+    },
+    headers() {
+      return [
+        {
+          text: "Name",
+          sortable: false,
+        },
+        {
+          text: "Address",
+          class: "pl-8",
+          sortable: false,
+        },
+        {
+          text: "Expiration",
+          sortable: false,
+        },
+        {
+          text: "Last update",
+          sortable: false,
+        },
+      ];
+    },
+  },
+  data: () => {
+    return {
+      loading: true,
+      domains: [],
+      page: 0,
+      total: 0,
+    };
+  },
+  mounted() {
+    this.getDomains(this.network);
+  },
+  methods: {
+    ...mapActions(["showError"]),
+    getDomains(network) {
+      this.loading = true;
+
+      this.api
+        .listDomains(network, this.domains.length, PAGE_SIZE)
+        .then((res) => {
+          if (!res) return;
+          this.total = res.total;
+          this.domains.push(...res.domains);
+        })
+        .catch((err) => {
+          console.log(err);
+          this.showError(err);
+        })
+        .finally(() => (this.loading = false));
+    },
+    left() {
+      if (this.page > 0) this.page--;
+    },
+    right() {
+      this.page++;
+      if (this.domains.length == this.page * PAGE_SIZE) {
+        this.getDomains(this.network);
+      }
+    },
+  },
+  watch: {
+    network: function (newValue) {
+      this.domains = [];
+      this.page = 0;
+      this.total = 0;
+      this.getDomains(newValue);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/stats/Stats.vue b/src/views/stats/Stats.vue
index 22dbac13..1ccf8152 100644
--- a/src/views/stats/Stats.vue
+++ b/src/views/stats/Stats.vue
@@ -16,6 +16,9 @@
         <v-tab :to="{name: 'stats_general'}" replace>
           <v-icon left small>mdi-align-vertical-bottom</v-icon>&nbsp;General
         </v-tab>
+        <v-tab :to="{name: 'domains'}" replace>
+          <v-icon left small>mdi-web</v-icon>&nbsp;Domains
+        </v-tab>
         <v-tab :to="{name: 'stats_fa12'}" replace>
           <v-icon left small>mdi-bank-outline</v-icon>&nbsp;FA1.2
         </v-tab>