Merge pull request #577 from enkryptcom/feat/add-24hr-ticker

feat: add asset headers
enkryptcom · Jan 9, 2025 · 82e7958 · 82e7958
2 parents c630149 + 6a8dcf4
commit 82e7958
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less
@@ -5,10 +5,12 @@
 @secondaryLabel: #5f6368;
 @tertiaryLabel: rgba(0, 0, 0, 0.38);
 @black: #000000;
+@black06: rgba(0, 0, 0, 0.6);
 @black07: rgba(0, 0, 0, 0.7);
 @black007: rgba(0, 0, 0, 0.07);
 @black004: rgba(0, 0, 0, 0.04);
 @white: #ffffff;
+@grayPrimary: rgba(95, 99, 104, 1);
 @gray01: rgba(95, 99, 104, 0.1);
 @gray02: rgba(95, 99, 104, 0.2);
 @white07: rgba(255, 255, 255, 0.7);

diff --git a/packages/extension/src/ui/action/views/asset-detail-view/index.vue b/packages/extension/src/ui/action/views/asset-detail-view/index.vue
@@ -39,6 +39,7 @@
             <sparkline-down v-if="token.priceChangePercentage < 0" />
 
             {{ token.priceChangePercentage.toFixed(2) }}%
+            <span class="asset-detail-view__last-24">Last 24h</span>
           </p>
         </div>
       </div>
@@ -156,6 +157,14 @@ const close = () => {
   height: auto;
   box-sizing: border-box;
 
+  &__last-24 {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: @grayPrimary;
+  }
+
   &__wrap {
     background: @white;
     box-shadow:

diff --git a/packages/extension/src/ui/action/views/network-assets/index.vue b/packages/extension/src/ui/action/views/network-assets/index.vue
@@ -14,6 +14,11 @@
           />
 
           <network-activity-action v-bind="$attrs" />
+          <div v-if="!isLoading" class="network-assets__headers">
+            <div>TOKEN</div>
+            <div>LAST 24HR</div>
+            <div>VALUE</div>
+          </div>
           <network-assets-item
             v-for="(item, index) in assets"
             :key="index"
@@ -176,6 +181,28 @@ const addCustomAsset = (asset: AssetsType) => {
   height: 100%;
   box-sizing: border-box;
 
+  &__headers {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 350px;
+    height: 21px;
+    padding: 0 20px 0 65px;
+    margin: 12px 12px 0;
+    font-size: 10px;
+    color: @black06;
+    font-weight: 500;
+    line-height: 11px;
+
+    div {
+      text-align: left;
+    }
+
+    div:nth-child(2) {
+      width: 65px;
+    }
+  }
+
   &__scroll-area {
     position: relative;
     margin: auto;