From 728d8bf02d5d0fb30b12c8e0d0c7d52545ae1925 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 5 May 2023 09:06:18 +0800
Subject: [PATCH] feat: staking tabs

---
 src/modules/[chain]/block/[height].vue |   1 -
 src/modules/[chain]/staking/index.vue  | 329 ++++++++++++++-----------
 2 files changed, 185 insertions(+), 145 deletions(-)

diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index eac2db23..d15c3d7a 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@@ -6,7 +6,6 @@ import { computed } from '@vue/reactivity';
 import { onBeforeRouteUpdate } from 'vue-router';
 const props = defineProps(['height', 'chain']);
 
-const store = useBlockModule()
 const store = useBlockModule();
 store.fetchBlock(props.height);
 const tab = ref('summary');
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index 1f1177dc..2aa42c88 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -1,36 +1,36 @@
-<script lang=ts setup>
+<script lang="ts" setup>
 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 { consensusPubkeyToHexAddress } from '@/libs';
 import type { Key, Validator } from '@/types';
-const staking = useStakingStore()
-const format = useFormatter()
+const staking = useStakingStore();
+const format = useFormatter();
 
-const cache = JSON.parse(localStorage.getItem('avatars')||'{}')
-const avatars = ref( cache || {} )
-const latest = ref({} as Record<string, number>)
-const yesterday = ref({} as Record<string, number>)
-const tab = ref('active')
-const unbondList = ref([] as Validator[])
-const base = useBaseStore()
-onMounted(()=> {
-  fetchChange(0)
-  staking.fetchInacitveValdiators().then(x => {
-    unbondList.value = x 
-  })
-})
+const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
+const avatars = ref(cache || {});
+const latest = ref({} as Record<string, number>);
+const yesterday = ref({} as Record<string, number>);
+const tab = ref('active');
+const unbondList = ref([] as Validator[]);
+const base = useBaseStore();
+onMounted(() => {
+  fetchChange(0);
+  staking.fetchInacitveValdiators().then((x) => {
+    unbondList.value = x;
+  });
+});
 
 function fetchChange(offset: number) {
-  const base = useBaseStore()
-  const diff = 86400000 / base.blocktime
+  const base = useBaseStore();
+  const diff = 86400000 / base.blocktime;
   // base.fetchAbciInfo().then(h => {
   //   // console.log('block:', h)
   //   base.fetchValidatorByHeight(h.lastBlockHeight, offset).then(x => {
   //     x.validators.forEach(v => {
   //       if(v.pubkey) latest.value[pubkeyToAddress(v.pubkey.algorithm, v.pubkey.data)] = Number(v.votingPower)
-  //     })         
+  //     })
   //   })
   //   const height = Number(h.lastBlockHeight) - diff
   //   base.fetchValidatorByHeight(height > 0 ? height : 1, offset).then(old => {
@@ -44,128 +44,139 @@ 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]
+  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
-}
+  return n > 0 && o > 0 ? n - o : 0;
+};
 
 const change24Text = (key?: Key) => {
-  if(!key) return ''
-  const v = change24(key)
-  return v!==0 ? format.numberAndSign(v) : ''
-}
+  if (!key) return '';
+  const v = change24(key);
+  return v !== 0 ? format.numberAndSign(v) : '';
+};
 
 const change24Color = (key?: Key) => {
-  if(!key) return ''
-  const v = change24(key)
-  if(v > 0) return 'text-success'
-  if(v < 0) return 'text-error'
-}
+  if (!key) return '';
+  const v = change24(key);
+  if (v > 0) return 'text-success';
+  if (v < 0) return 'text-error';
+};
 
 const update = (m: DebuggerEvent) => {
-    if(m.key === 'validators') {
-        loadAvatars()
-    }
-}
+  if (m.key === 'validators') {
+    loadAvatars();
+  }
+};
 
 const list = computed(() => {
-  return tab.value === 'active' ? staking.validators: unbondList.value
+  return tab.value === 'active' ? staking.validators : unbondList.value;
   // return staking.validators
-})
+});
 
 const loadAvatars = () => {
-    // fetch avatar from keybase
-    let promise = Promise.resolve()
-    staking.validators.forEach(item => {
-        promise = promise.then(() => new Promise(resolve => {
-        const identity = item.description?.identity
-        if(identity && !avatars.value[identity]){
-            staking.keybase(identity).then(d => {
-                if (Array.isArray(d.them) && d.them.length > 0) {
-                    const uri = String(d.them[0]?.pictures?.primary?.url).replace("https://s3.amazonaws.com/keybase_processed_uploads/", "")
-                    if(uri) {
-                      avatars.value[identity] = uri
-                      localStorage.setItem('avatars', JSON.stringify(avatars.value))
-                    }
+  // fetch avatar from keybase
+  let promise = Promise.resolve();
+  staking.validators.forEach((item) => {
+    promise = promise.then(
+      () =>
+        new Promise((resolve) => {
+          const identity = item.description?.identity;
+          if (identity && !avatars.value[identity]) {
+            staking.keybase(identity).then((d) => {
+              if (Array.isArray(d.them) && d.them.length > 0) {
+                const uri = String(d.them[0]?.pictures?.primary?.url).replace(
+                  'https://s3.amazonaws.com/keybase_processed_uploads/',
+                  ''
+                );
+                if (uri) {
+                  avatars.value[identity] = uri;
+                  localStorage.setItem(
+                    'avatars',
+                    JSON.stringify(avatars.value)
+                  );
                 }
-                resolve()
-            })
-        }else{
-            resolve()
-        }
-        }))
-    })
-}
-
-staking.$subscribe((m, s)=> {
-    if (Array.isArray(m.events)) {
-        m.events.forEach(x => {
-            update(x)
+              }
+              resolve();
+            });
+          } else {
+            resolve();
+          }
         })
-    } else {
-        update(m.events)
-    }
-})
-const logo = (identity?: string) => {
-    if(!identity) return ''
-    const url = avatars.value[identity] || ''
-    return url.startsWith('http')? url: `https://s3.amazonaws.com/keybase_processed_uploads/${url}`
-}
-const rank = function(position: number) {
-    let sum = 0
-    for(let i = 0;i < position; i++) {
-      sum += Number(staking.validators[i]?.delegator_shares)
-    }
-    const percent = (sum / staking.totalPower)
+    );
+  });
+};
 
-    switch (true) {
-        case tab.value ==='active' && percent < 0.33: return 'error'
-        case tab.value ==='active' && percent < 0.67: return 'warning'
-        default: return 'primary'
-    }    
-}
+staking.$subscribe((m, s) => {
+  if (Array.isArray(m.events)) {
+    m.events.forEach((x) => {
+      update(x);
+    });
+  } else {
+    update(m.events);
+  }
+});
+const logo = (identity?: string) => {
+  if (!identity) return '';
+  const url = avatars.value[identity] || '';
+  return url.startsWith('http')
+    ? url
+    : `https://s3.amazonaws.com/keybase_processed_uploads/${url}`;
+};
+const rank = function (position: number) {
+  let sum = 0;
+  for (let i = 0; i < position; i++) {
+    sum += Number(staking.validators[i]?.delegator_shares);
+  }
+  const percent = sum / staking.totalPower;
+
+  switch (true) {
+    case tab.value === 'active' && percent < 0.33:
+      return 'error';
+    case tab.value === 'active' && percent < 0.67:
+      return 'warning';
+    default:
+      return 'primary';
+  }
+};
 </script>
 <template>
-    <div>
-        <VCard>
-            <VCardTitle class="d-flex justify-space-between">
-                <VBtnToggle v-model="tab" size="small" color="primary">
-                    <VBtn value="active" variant="outlined" >Active</VBtn>
-                    <VBtn value="inactive" variant="outlined">Inactive</VBtn>
-                </VBtnToggle>
-                <span class="mt-2">{{ list.length }}/{{ staking.params.max_validators }}</span>
-            </VCardTitle>
-        <VTable class="text-no-wrap table-header-bg rounded-0">
-            <thead>
+  <div class="flex items-center justify-between">
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a
+        class="tab text-gray-400"
+        :class="{ 'tab-active': tab === 'active' }"
+        @click="tab = 'active'"
+        >Active</a
+      >
+      <a
+        class="tab text-gray-400"
+        :class="{ 'tab-active': tab === 'inactive' }"
+        @click="tab = 'inactive'"
+        >Inactive</a
+      >
+    </div>
+
+    <div class="text-lg font-semibold">
+      {{ list.length }}/{{ staking.params.max_validators }}
+    </div>
+  </div>
+  <div>
+    <VCard>
+      <VTable class="text-no-wrap table-header-bg rounded-0">
+        <thead>
           <tr>
-            <th
-              scope="col"
-              style="width: 3rem;"
-            >#</th>
-            <th scope="col">
-              VALIDATOR
-            </th>
-            <th scope="col" class="text-right">
-              VOTING POWER
-            </th>
-            <th scope="col" class="text-right">
-              24h CHANGES
-            </th>
-            <th scope="col" class="text-right">
-              COMMISSION
-            </th>
-            <th scope="col">
-              ACTIONS
-            </th>
+            <th scope="col" style="width: 3rem">#</th>
+            <th scope="col">VALIDATOR</th>
+            <th scope="col" class="text-right">VOTING POWER</th>
+            <th scope="col" class="text-right">24h CHANGES</th>
+            <th scope="col" class="text-right">COMMISSION</th>
+            <th scope="col">ACTIONS</th>
           </tr>
         </thead>
         <tbody>
-            <tr
-            v-for="(v, i) in list"
-            :key="v.operator_address"
-          >
+          <tr v-for="(v, i) in list" :key="v.operator_address">
             <!-- 👉 rank -->
             <td>
               <VChip label :color="rank(i)">
@@ -175,7 +186,10 @@ const rank = function(position: number) {
 
             <!-- 👉 Validator -->
             <td>
-              <div class="d-flex align-center overflow-hidden" style="max-width: 400px;">
+              <div
+                class="d-flex align-center overflow-hidden"
+                style="max-width: 400px"
+              >
                 <VAvatar
                   variant="tonal"
                   class="me-3"
@@ -186,48 +200,75 @@ const rank = function(position: number) {
                 <div class="d-flex flex-column">
                   <h6 class="text-sm text-primary">
                     <RouterLink
-                      :to="{name: 'chain-staking-validator', params: {validator: v.operator_address}}"
+                      :to="{
+                        name: 'chain-staking-validator',
+                        params: { validator: v.operator_address },
+                      }"
                       class="font-weight-medium user-list-name"
                     >
                       {{ v.description?.moniker }}
                     </RouterLink>
-
                   </h6>
-                  <span class="text-xs">{{ v.description?.website || v.description?.identity || '-' }}</span>
+                  <span class="text-xs">{{
+                    v.description?.website || v.description?.identity || '-'
+                  }}</span>
                 </div>
               </div>
             </td>
 
             <!-- 👉 Voting Power -->
             <td class="text-right">
-                <div class="d-flex flex-column">
-                  <h6 class="text-sm font-weight-medium">
-                    {{ format.formatToken( {amount: parseInt(v.tokens).toString(), denom: staking.params.bond_denom }, true, "0,0") }}
-                  </h6>
-                  <span class="text-xs">{{ format.calculatePercent(v.delegator_shares, staking.totalPower) }}</span>
-                </div>
+              <div class="d-flex flex-column">
+                <h6 class="text-sm font-weight-medium">
+                  {{
+                    format.formatToken(
+                      {
+                        amount: parseInt(v.tokens).toString(),
+                        denom: staking.params.bond_denom,
+                      },
+                      true,
+                      '0,0'
+                    )
+                  }}
+                </h6>
+                <span class="text-xs">{{
+                  format.calculatePercent(
+                    v.delegator_shares,
+                    staking.totalPower
+                  )
+                }}</span>
+              </div>
             </td>
             <!-- 👉 24h Changes -->
-            <td class="text-right text-xs" :class="change24Color(v.consensus_pubkey)">
-              {{ change24Text(v.consensus_pubkey) }} <VChip label v-if="v.jailed" color="error">Jailed</VChip>
+            <td
+              class="text-right text-xs"
+              :class="change24Color(v.consensus_pubkey)"
+            >
+              {{ change24Text(v.consensus_pubkey) }}
+              <VChip label v-if="v.jailed" color="error">Jailed</VChip>
             </td>
             <!-- 👉 commission -->
-            <td  class="text-right">
-              {{ format.formatCommissionRate(v.commission?.commission_rates?.rate) }}
+            <td class="text-right">
+              {{
+                format.formatCommissionRate(
+                  v.commission?.commission_rates?.rate
+                )
+              }}
             </td>
             <!-- 👉 Action -->
             <td>
               {{ 2 }}
             </td>
-            </tr>
+          </tr>
         </tbody>
-        </VTable>
-        <VDivider/>
-        <VCardActions class="py-2">
-            <VChip label color="error">Top 33%</VChip> <VChip label color="warning" class="mx-2">Top 67%</VChip>
-        </VCardActions>
-        </VCard>
-    </div>
+      </VTable>
+      <VDivider />
+      <VCardActions class="py-2">
+        <VChip label color="error">Top 33%</VChip>
+        <VChip label color="warning" class="mx-2">Top 67%</VChip>
+      </VCardActions>
+    </VCard>
+  </div>
 </template>
 
 <route>
@@ -236,4 +277,4 @@ const rank = function(position: number) {
       i18n: 'staking'
     }
   }
-</route>
\ No newline at end of file
+</route>