From 52bcb61299f72080bdd33e9994bda5f641f28246 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Thu, 11 May 2023 00:52:52 +0800
Subject: [PATCH] feat: staking ui retactor

---
 src/components/icons/IconWeb.vue            |  1 +
 src/modules/[chain]/staking/[validator].vue | 77 +++++++++++++--------
 src/modules/[chain]/staking/index.vue       | 44 ++++++++----
 3 files changed, 78 insertions(+), 44 deletions(-)
 create mode 100644 src/components/icons/IconWeb.vue

diff --git a/src/components/icons/IconWeb.vue b/src/components/icons/IconWeb.vue
new file mode 100644
index 00000000..5e0cd0ca
--- /dev/null
+++ b/src/components/icons/IconWeb.vue
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" tag="i" class="v-icon notranslate v-theme--light v-icon--size-default iconify iconify--mdi" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2c0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2c0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2c0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2c0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"></path></svg>
\ No newline at end of file
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index d90a9823..179ab2a4 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -7,6 +7,7 @@ import {
   useStakingStore,
 } from '@/stores';
 import { onMounted, computed, ref } from 'vue';
+import { Icon } from '@iconify/vue';
 import ValidatorCommissionRate from '@/components/ValidatorCommissionRate.vue';
 import {
   consensusPubkeyToHexAddress,
@@ -132,31 +133,49 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <VCard class="card-box">
-      <VCardItem>
-        <VRow>
-          <VCol cols="12" md="6">
-            <div class="d-flex pl-2">
-              <VAvatar
+    <div style="border-width:1px" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500">
+      <div class="flex flex-col lg:flex-row">
+        <div class="flex-1">
+          <div class="flex">
+            <!-- avator -->
+            <!-- <VAvatar
                 icon="mdi-help-circle-outline"
                 :image="avatars[identity]"
                 size="90"
                 rounded
                 variant="outlined"
                 color="secondary"
-              />
-              <div class="mx-2">
-                <h4>{{ v.description?.moniker }}</h4>
-                <div class="text-sm mb-2">
-                  {{ v.description?.identity || '-' }}
-                </div>
-                <VBtn>Delegate</VBtn>
+              /> -->
+            <div
+              class="avatar mr-4 relative w-24 rounded-lg overflow-hidden"
+            >
+              <div
+                class="w-24 rounded-lg  absolute opacity-10"
+              ></div>
+              <div class="w-24 rounded-lg">
+                <img
+                  v-if="avatars[identity] !== 'undefined'"
+                  :src="`https://s3.amazonaws.com/keybase_processed_uploads/${avatars[identity]}`"
+                  class="object-contain"
+                />
+                <Icon
+                  v-else
+                  class="text-4xl"
+                  :icon="`mdi-help-circle-outline`"
+                />
               </div>
             </div>
-            <VSpacer />
-            <VCardText>
-              <p class="text-md">About Us</p>
-              <VList class="card-list">
+            <div class="mx-2">
+              <h4>{{ v.description?.moniker }}</h4>
+              <div class="text-sm mb-2">
+                {{ v.description?.identity || '-' }}
+              </div>
+              <button class="btn btn-primary btn-sm w-full">Delegate</button>
+            </div>
+          </div>
+          <div class="m-4 text-sm">
+            <p class="text-md">About Us</p>
+            <VList class="card-list">
                 <VListItem prepend-icon="mdi-web">
                   <span>Website: </span
                   ><span> {{ v.description?.website || '-' }}</span>
@@ -166,9 +185,8 @@ onMounted(() => {
                   ><span> {{ v.description?.security_contact }}</span>
                 </VListItem>
               </VList>
-
-              <p class="text-md mt-3">Validator Status</p>
-              <VList class="card-list">
+            <p class="text-md mt-3">Validator Status</p>
+            <VList class="card-list">
                 <VListItem prepend-icon="mdi-shield-account-outline">
                   <span>Status: </span
                   ><span>
@@ -179,10 +197,10 @@ onMounted(() => {
                   <span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
                 </VListItem>
               </VList>
-            </VCardText>
-          </VCol>
-          <VCol cols="12" md="6">
-            <div class="d-flex flex-column py-3 justify-space-between">
+          </div>
+        </div>
+        <div class="flex-1">
+          <div class="d-flex flex-column py-3 justify-space-between">
               <div class="d-flex">
                 <VAvatar
                   color="secondary"
@@ -272,12 +290,11 @@ onMounted(() => {
                 </div>
               </div>
             </div>
-          </VCol>
-        </VRow>
-        <VDivider />
-        <VCardText>{{ v.description?.details }}</VCardText>
-      </VCardItem>
-    </VCard>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="text-sm px-4">{{ v.description?.details }}</div>
+    </div>
 
     <VRow class="mt-3">
       <VCol md="4" sm="12" class="h-100">
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index ce1fd79d..c6c30b32 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -3,7 +3,7 @@ import { useBaseStore, useFormatter, useStakingStore } from '@/stores';
 import { toBase64, toHex } from '@cosmjs/encoding';
 import { computed } from '@vue/reactivity';
 import { onMounted, ref, type DebuggerEvent } from 'vue';
-import { consensusPubkeyToHexAddress } from '@/libs';
+import { Icon } from '@iconify/vue';
 import type { Key, Validator } from '@/types';
 const staking = useStakingStore();
 const format = useFormatter();
@@ -43,11 +43,9 @@ function fetchChange(offset: number) {
 }
 
 const change24 = (key: Key) => {
-  // console.log('hex key:', consensusPubkeyToHexAddress(key))
   const txt = key.key;
   const n: number = latest.value[txt];
   const o: number = yesterday.value[txt];
-  // console.log( txt, n, o)
   return n > 0 && o > 0 ? n - o : 0;
 };
 
@@ -181,24 +179,35 @@ const rank = function (position: number) {
           <tr v-for="(v, i) in list" :key="v.operator_address">
             <!-- 👉 rank -->
             <td>
-              <VChip label :color="rank(i)">
+              <div 
+                class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
+                :class="`text-${rank(i)}`"
+              >
+                <span 
+                  class="inset-x-0 inset-y-0 opacity-10 absolute"
+                  :class="`bg-${rank(i)}`"
+                ></span>
                 {{ i + 1 }}
-              </VChip>
+              </div>
             </td>
-
             <!-- 👉 Validator -->
             <td>
               <div
                 class="d-flex align-center overflow-hidden"
                 style="max-width: 400px"
               >
-                <VAvatar
-                  variant="tonal"
-                  class="me-3"
-                  size="34"
-                  icon="mdi-help-circle-outline"
-                  :image="logo(v.description?.identity)"
-                />
+                <div class="avatar mr-4 relative w-9 rounded-full overflow-hidden">
+                  <div class="w-9 rounded-full bg-gray-400 absolute opacity-10"></div>
+                  <div class="w-9 rounded-full">
+                     <img 
+                      v-if="logo(v.description?.identity) !== ''" 
+                      :src="logo(v.description?.identity)" 
+                      class="object-contain"
+                    />
+                    <Icon v-else class="text-4xl" :icon="`mdi-help-circle-outline`"/>
+                  </div>
+                </div>
+               
                 <div class="d-flex flex-column">
                   <h6 class="text-sm text-primary">
                     <RouterLink
@@ -247,7 +256,14 @@ const rank = function (position: number) {
               :class="change24Color(v.consensus_pubkey)"
             >
               {{ change24Text(v.consensus_pubkey) }}
-              <VChip label v-if="v.jailed" color="error">Jailed</VChip>
+              <div v-if="v.jailed"
+                class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-error"
+              >
+                <span 
+                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
+                ></span>
+                Jailed
+              </div>
             </td>
             <!-- 👉 commission -->
             <td class="text-right">