Display unstoppable grants category in staking v2 (#1173)

* Display unstoppable grants category * Small styling fix * Name tag ellipsis
AstarNetwork · Feb 8, 2024 · c4a209a · c4a209a
1 parent 1d62c2b
commit c4a209a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/dapp-staking/StakingTop.vue b/src/components/dapp-staking/StakingTop.vue
@@ -23,6 +23,7 @@
       <dapp-list category="Tooling" />
       <dapp-list category="Utility" />
       <dapp-list category="Others" />
+      <dapp-list category="unstoppable-grants" />
     </div>
 
     <Teleport to="#staking-top-bg">

diff --git a/src/components/dapp-staking/my-staking/DappList.vue b/src/components/dapp-staking/my-staking/DappList.vue
@@ -2,9 +2,9 @@
   <div v-if="dapps && dapps.length > 0" class="wrapper">
     <div class="divider" />
     <div class="wrapper--header">
-      <div class="txt--header">{{ category }}</div>
+      <div class="txt--header">{{ categoryName }}</div>
     </div>
-    <card-list :category="category" :dapps="dapps" />
+    <card-list :category="categoryName" :dapps="dapps" />
   </div>
 </template>
 <script lang="ts">
@@ -27,8 +27,14 @@ export default defineComponent({
       return dappsArray.filter((it: DappCombinedInfo) => it.dapp);
     });
 
+    const categoryName = computed<string>(() => {
+      const name = props.category.replace(/-/g, ' ');
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    });
+
     return {
       dapps,
+      categoryName,
     };
   },
 });

diff --git a/src/components/dapp-staking/my-staking/components/CardList.vue b/src/components/dapp-staking/my-staking/components/CardList.vue
@@ -183,7 +183,7 @@ export default defineComponent({
     }
 
     .badge--tag {
-      width: 54px;
+      width: 64px;
       height: 18px;
       padding: 2px 8px;
       background: $navy-3;
@@ -196,6 +196,8 @@ export default defineComponent({
       color: #fff;
       margin-top: 16px;
       margin-bottom: 16px;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     .divider {