feat: display badges for verified contracts

matter-labs · Nov 20, 2024 · c2e7ff3 · c2e7ff3
1 parent 75fcd21
commit c2e7ff3
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 5 deletions.
diff --git a/packages/app/src/components/Contract.vue b/packages/app/src/components/Contract.vue
@@ -7,6 +7,7 @@
     v-if="contract?.address && !pending"
     :title="contractName ?? t('contract.title')"
     :value="contractName ? undefined : contract?.address"
+    :is-verified="contract?.verificationInfo != null"
   />
   <Spinner v-else size="md" />
   <div class="tables-container">
@@ -78,6 +79,8 @@
 import { computed, type PropType } from "vue";
 import { useI18n } from "vue-i18n";
 
+import { ShieldCheckIcon } from "@heroicons/vue/solid";
+
 import SearchForm from "@/components/SearchForm.vue";
 import BalanceTable from "@/components/balances/Table.vue";
 import Breadcrumbs from "@/components/common/Breadcrumbs.vue";
@@ -118,7 +121,11 @@ const props = defineProps({
 const tabs = computed(() => [
   { title: t("tabs.transactions"), hash: "#transactions" },
   { title: t("tabs.transfers"), hash: "#transfers" },
-  { title: t("tabs.contract"), hash: "#contract" },
+  {
+    title: t("tabs.contract"),
+    hash: "#contract",
+    icon: props.contract?.verificationInfo ? ShieldCheckIcon : null,
+  },
   { title: t("tabs.events"), hash: "#events" },
 ]);
 const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {

diff --git a/packages/app/src/components/common/Tabs.vue b/packages/app/src/components/common/Tabs.vue
@@ -15,9 +15,13 @@
             v-else
             class="tab-btn"
             :class="{ active: currentTabHash === tab.hash && tabs.length > 1 }"
-            v-html="tab.title"
             @click="setTab(tab)"
-          ></button>
+          >
+            <span v-html="tab.title"></span>
+            <span v-if="tab.icon" class="tab-icon">
+              <component :is="tab.icon" />
+            </span>
+          </button>
         </li>
       </template>
     </ul>
@@ -35,9 +39,12 @@
 import { type PropType, ref, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import type { FunctionalComponent } from "vue";
+
 export type Tab = {
   title: string;
   hash: string | null;
+  icon?: FunctionalComponent | null;
 };
 
 const props = defineProps({
@@ -76,13 +83,16 @@ watchEffect(() => {
     @apply flex border-b md:flex-row;
   }
   .tab-btn {
-    @apply px-4 py-3.5 text-sm text-gray-400 outline-0 sm:text-base;
+    @apply px-4 py-3.5 text-sm text-gray-400 outline-0 sm:text-base flex;
   }
   .tab-content {
     @apply rounded-b-lg;
   }
   .active {
     @apply border-b-2 border-primary-600 font-bold text-primary-600;
   }
+  .tab-icon {
+    @apply ml-0.5 w-5 text-green-500;
+  }
 }
 </style>
diff --git a/packages/app/src/components/common/Title.vue b/packages/app/src/components/common/Title.vue
@@ -5,9 +5,16 @@
       <slot>{{ shortValue(value) }}</slot>
       <CopyButton :value="value" class="title-copy-button" />
     </div>
+    <Badge v-if="isVerified" color="dark-success" class="verified-badge">
+      {{ t("contract.verified") }}
+    </Badge>
   </h1>
 </template>
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+import Badge from "./Badge.vue";
+
 import CopyButton from "@/components/common/CopyButton.vue";
 
 import { shortValue } from "@/utils/formatters";
@@ -20,11 +27,16 @@ defineProps({
   value: {
     type: String,
   },
+  isVerified: {
+    type: Boolean,
+  },
 });
+
+const { t } = useI18n();
 </script>
 <style lang="scss">
 .title-container {
-  @apply flex flex-wrap break-all text-3xl sm:text-4xl;
+  @apply flex flex-wrap break-all text-3xl sm:text-4xl items-end;
   .title-block {
     @apply flex gap-4 self-center font-bold;
     .title-copy-button {
@@ -36,5 +48,8 @@ defineProps({
       }
     }
   }
+  .verified-badge {
+    @apply mb-1 ml-1;
+  }
 }
 </style>
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
@@ -326,6 +326,7 @@
         "infoTableError": "An Error Occurred",
         "balanceTableTitle": "Balances",
         "notFound": "Not Found",
+        "verified": "Verified",
         "transactionTable": {
             "error": "Something went wrong",
             "notFound": {

diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
@@ -188,6 +188,7 @@
         "infoTableError": "Виникла помилка",
         "balanceTableTitle": "Мої кошти",
         "notFound": "Не знайдено",
+        "verified": "перевірено",
         "transactionTable": {
             "error": "Щось пішло не так",
             "notFound": {