feat: display token names (#118)

matter-labs · Aug 22, 2023 · b931e3f · b931e3f
1 parent fad0b7c
commit b931e3f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/components/token/TokenBalance.vue b/components/token/TokenBalance.vue
@@ -1,6 +1,7 @@
 <template>
   <TokenLine
     :symbol="symbol"
+    :name="name"
     :address="address"
     :decimals="decimals"
     :icon-url="iconUrl"
@@ -56,6 +57,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  name: {
+    type: String,
+  },
   address: {
     type: String,
     required: true,

diff --git a/components/token/TokenLine.vue b/components/token/TokenLine.vue
@@ -5,7 +5,14 @@
     </template>
     <template #default>
       <CommonButtonLineBodyInfo class="text-left">
-        <template #label>{{ symbol }}</template>
+        <template #label>
+          <div class="flex flex-wrap items-center gap-1.5">
+            <span>{{ symbol }}</span>
+            <div v-if="name" class="truncate text-xs text-gray-secondary dark:text-neutral-400">
+              {{ name }}
+            </div>
+          </div>
+        </template>
         <template #underline>
           <span class="hidden xs:block" :title="address">{{ shortenAddress(address, 5) }}</span>
           <span class="xs:hidden" :title="address">{{ shortenAddress(address, 2) }}</span>
@@ -32,6 +39,9 @@ defineProps({
     type: String,
     required: true,
   },
+  name: {
+    type: String,
+  },
   address: {
     type: String,
     required: true,

diff --git a/utils/zksync/era/token-library.ts b/utils/zksync/era/token-library.ts
@@ -10,6 +10,7 @@ export const getTokensByNetworkId = async (networkId: number) => {
       l1Address: checksumAddress(token.l1Address),
       address: l2Address,
       symbol: token.symbol,
+      name: token.name,
       decimals: token.decimals,
       iconUrl: token.imageUrl,
       enabledForFees: l2Address === ETH_L2_ADDRESS,