fix: On testnet some tokens have no name at all and clicking on their…

… copy button looks broken (#570)
aeternity · Nov 15, 2023 · cdc1c16 · cdc1c16
1 parent 1b29ddf
commit cdc1c16
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/src/components/CopyChip.vue b/src/components/CopyChip.vue
@@ -1,21 +1,20 @@
 <template>
-  <div class="copy-chip">
-    <app-chip
-      ref="container"
-      size="sm"
-      :variant="!isCopyAnimationActive ? 'dark' : 'success'">
-      <div class="copy-chip__text">
-        {{ textToDisplay }}
-      </div>
+  <app-chip
+    ref="container"
+    class="copy-chip"
+    size="sm"
+    :variant="!isCopyAnimationActive ? 'dark' : 'success'">
+    <div class="copy-chip__text">
+      {{ textToDisplay }}
+    </div>
 
-      <copy-button
-        v-show="!isCopyAnimationActive"
-        :clipboard-text="clipboardText || label"
-        variant="light"
-        @copy:started="activateCopyAnimation"
-        @copy:ended="deactivateCopyAnimation"/>
-    </app-chip>
-  </div>
+    <copy-button
+      v-show="!isCopyAnimationActive"
+      :clipboard-text="clipboardText || label"
+      variant="light"
+      @copy:started="activateCopyAnimation"
+      @copy:ended="deactivateCopyAnimation"/>
+  </app-chip>
 </template>
 
 <script setup>

diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
@@ -4,10 +4,12 @@
       DETAILS
     </template>
     <template #header>
-      <token-symbol-icon
-        :contract-id="tokenDetails.contractId"
-        class="token-details-panel__icon"/>
-      <copy-chip :label="tokenDetails.symbol"/>
+      <div class="token-details-panel__token">
+        <token-symbol-icon
+          :contract-id="tokenDetails.contractId"
+          class="token-details-panel__icon"/>
+        <copy-chip :label="tokenDetails.symbol"/>
+      </div>
     </template>
 
     <table>
@@ -226,12 +228,19 @@ const marketCap = computed(() =>
   }
 
   &__icon {
+    margin-right: var(--space-1);
     width: 28px;
     height: 28px;
     @media (--desktop) {
       width: 24px;
       height: 24px;
     }
   }
+
+  &__token {
+    display: flex;
+    align-items: center;
+
+  }
 }
 </style>