feat: add evm badge for evm-like contracts and transactions

matter-labs · Nov 29, 2024 · aa261ba · aa261ba
1 parent 5fc513a
commit aa261ba
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/packages/app/src/components/Contract.vue b/packages/app/src/components/Contract.vue
@@ -8,6 +8,7 @@
     :title="contractName ?? t('contract.title')"
     :value="contractName ? undefined : contract?.address"
     :is-verified="contract?.verificationInfo != null"
+    :is-evm-like="contract?.isEvmLike"
   />
   <Spinner v-else size="md" />
   <div class="tables-container">

diff --git a/packages/app/src/components/common/Title.vue b/packages/app/src/components/common/Title.vue
@@ -5,9 +5,14 @@
       <slot>{{ shortValue(value) }}</slot>
       <CopyButton :value="value" class="title-copy-button" />
     </div>
-    <Badge v-if="isVerified" color="dark-success" class="verified-badge" :tooltip="t('contract.verifiedTooltip')">
-      {{ t("contract.verified") }}
-    </Badge>
+    <div class="badge-container">
+      <Badge v-if="isVerified" color="dark-success" class="verified-badge" :tooltip="t('contract.verifiedTooltip')">
+        {{ t("contract.verified") }}
+      </Badge>
+      <Badge v-if="isEvmLike" color="primary" class="verified-badge" :tooltip="t('contract.evmTooltip')">
+        {{ t("contract.evm") }}
+      </Badge>
+    </div>
   </h1>
 </template>
 <script lang="ts" setup>
@@ -17,6 +22,8 @@ import Badge from "./Badge.vue";
 
 import CopyButton from "@/components/common/CopyButton.vue";
 
+import type { PropType } from "vue";
+
 import { shortValue } from "@/utils/formatters";
 
 defineProps({
@@ -30,6 +37,11 @@ defineProps({
   isVerified: {
     type: Boolean,
   },
+  isEvmLike: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: false,
+    required: false,
+  },
 });
 
 const { t } = useI18n();
@@ -48,8 +60,8 @@ const { t } = useI18n();
       }
     }
   }
-  .verified-badge {
-    @apply mb-1 ml-1;
+  .badge-container {
+    @apply flex flex-wrap break-all items-end gap-0 mb-1 ml-2;
   }
 }
 </style>
diff --git a/packages/app/src/composables/useAddress.ts b/packages/app/src/composables/useAddress.ts
@@ -76,6 +76,7 @@ export type Balances = Api.Response.Balances;
 export type Account = Api.Response.Account;
 export type Contract = Api.Response.Contract & {
   verificationInfo: null | ContractVerificationInfo;
+  isEvmLike?: boolean | null;
   proxyInfo: null | {
     implementation: {
       address: string;

diff --git a/packages/app/src/composables/useTransaction.ts b/packages/app/src/composables/useTransaction.ts
@@ -80,6 +80,7 @@ export type TransactionItem = {
   revertReason?: string | null;
   logs: TransactionLogEntry[];
   transfers: TokenTransfer[];
+  isEvmLike?: boolean | null;
 };
 
 export function getTransferNetworkOrigin(transfer: Api.Response.Transfer, sender: "from" | "to") {

diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
@@ -330,6 +330,8 @@
         "notFound": "Not Found",
         "verified": "Source Code",
         "verifiedTooltip": "The contract's source code has been verified to match its on-chain Bytecode. Source code verification does not imply the contract is safe to interact with.",
+        "evm": "evm",
+        "evmTooltip": "The contract is deployed via EVM.",
         "transactionTable": {
             "error": "Something went wrong",
             "notFound": {

diff --git a/packages/app/src/views/TransactionView.vue b/packages/app/src/views/TransactionView.vue
@@ -7,7 +7,12 @@
       <Breadcrumbs :items="breadcrumbItems" />
       <SearchForm class="search-form" />
     </div>
-    <Title :title="t('transactions.transaction')" :value="hash" class="transaction-title" />
+    <Title
+      :title="t('transactions.transaction')"
+      :value="hash"
+      class="transaction-title"
+      :is-evm-like="transaction?.isEvmLike"
+    />
     <Tabs class="transactions-info-tabs" v-if="transaction || isRequestPending" :tabs="tabs">
       <template #tab-1-content>
         <GeneralInfo