From 4ebc325b887875e0854a40757cf4d05f72155c20 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 13:07:23 +0800
Subject: [PATCH] feat: staking

---
 src/modules/[chain]/staking/[validator].vue | 260 ++++++++++----------
 src/modules/[chain]/staking/index.vue       |  26 +-
 2 files changed, 152 insertions(+), 134 deletions(-)

diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 4322d181..167ca903 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -135,29 +135,19 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <div style="border-width:1px" class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500">
+    <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="avatar mr-4 relative w-24 rounded-lg overflow-hidden"
-            >
-              <div
-                class="w-24 rounded-lg  absolute opacity-10"
-              ></div>
+            <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]}`"
+                  v-lazy="`https://s3.amazonaws.com/keybase_processed_uploads/${avatars[identity]}`"
                   class="object-contain"
                 />
                 <Icon
@@ -172,126 +162,133 @@ onMounted(() => {
               <div class="text-sm mb-2">
                 {{ v.description?.identity || '-' }}
               </div>
-              <label for="delegate" class="btn btn-primary btn-sm w-full" @click="dialog.open('delegate', {validator_address: v.operator_address})">Delegate</label>
+              <label
+                for="delegate"
+                class="btn btn-primary btn-sm w-full"
+                @click="
+                  dialog.open('delegate', {
+                    validator_address: v.operator_address,
+                  })
+                "
+                >Delegate</label
+              >
             </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>
-                </VListItem>
-                <VListItem prepend-icon="mdi-email-outline">
-                  <span>Contact: </span
-                  ><span> {{ v.description?.security_contact }}</span>
-                </VListItem>
-              </VList>
+              <VListItem prepend-icon="mdi-web">
+                <span>Website: </span
+                ><span> {{ v.description?.website || '-' }}</span>
+              </VListItem>
+              <VListItem prepend-icon="mdi-email-outline">
+                <span>Contact: </span
+                ><span> {{ v.description?.security_contact }}</span>
+              </VListItem>
+            </VList>
             <p class="text-md mt-3">Validator Status</p>
             <VList class="card-list">
-                <VListItem prepend-icon="mdi-shield-account-outline">
-                  <span>Status: </span
-                  ><span>
-                    {{ String(v.status).replace('BOND_STATUS_', '') }}
-                  </span>
-                </VListItem>
-                <VListItem prepend-icon="mdi-shield-alert-outline">
-                  <span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
-                </VListItem>
-              </VList>
+              <VListItem prepend-icon="mdi-shield-account-outline">
+                <span>Status: </span
+                ><span>
+                  {{ String(v.status).replace('BOND_STATUS_', '') }}
+                </span>
+              </VListItem>
+              <VListItem prepend-icon="mdi-shield-alert-outline">
+                <span>Jailed: </span><span> {{ v.jailed || '-' }} </span>
+              </VListItem>
+            </VList>
           </div>
         </div>
         <div class="flex-1">
           <div class="d-flex flex-column py-3 justify-space-between">
-              <div class="d-flex">
-                <VAvatar
-                  color="secondary"
-                  rounded
-                  variant="outlined"
-                  icon="mdi-coin"
-                ></VAvatar>
-                <div class="ml-3 d-flex flex-column justify-center">
-                  <h4>
-                    {{
-                      format.formatToken2({
-                        amount: v.tokens,
-                        denom: staking.params.bond_denom,
-                      })
-                    }}
-                  </h4>
-                  <span class="text-sm">Total Bonded Tokens</span>
-                </div>
-              </div>
-              <div class="d-flex">
-                <VAvatar
-                  color="secondary"
-                  rounded
-                  variant="outlined"
-                  icon="mdi-percent"
-                ></VAvatar>
-                <div class="ml-3 d-flex flex-column justify-center">
-                  <h4>
-                    {{ format.formatToken(selfBonded.balance) }} ({{
-                      selfRate
-                    }})
-                  </h4>
-                  <span class="text-sm">Self Bonded</span>
-                </div>
-              </div>
-
-              <div class="d-flex">
-                <VAvatar
-                  color="secondary"
-                  rounded
-                  variant="outlined"
-                  icon="mdi-account-tie"
-                ></VAvatar>
-                <div class="ml-3 d-flex flex-column justify-center">
-                  <h4>
-                    {{ v.min_self_delegation }} {{ staking.params.bond_denom }}
-                  </h4>
-                  <span class="text-sm">Min Self Delegation:</span>
-                </div>
-              </div>
-              <div class="d-flex">
-                <VAvatar
-                  color="secondary"
-                  rounded
-                  variant="outlined"
-                  icon="mdi-finance"
-                ></VAvatar>
-                <div class="ml-3 d-flex flex-column justify-center">
-                  <h4>{{ apr }}</h4>
-                  <span class="text-sm">Annual Profit</span>
-                </div>
-              </div>
-
-              <div class="d-flex">
-                <VAvatar
-                  color="secondary"
-                  rounded
-                  variant="outlined"
-                  icon="mdi-stairs-up"
-                ></VAvatar>
-                <div class="ml-3 d-flex flex-column justify-center">
-                  <h4>{{ v.unbonding_height }}</h4>
-                  <span class="text-sm">Unbonding Height</span>
-                </div>
-              </div>
-
-              <div class="d-flex">
-                <VAvatar
-                  color="secondary"
-                  rounded
-                  variant="outlined"
-                  icon="mdi-clock"
-                ></VAvatar>
-                <div class="ml-3 d-flex flex-column justify-center">
-                  <h4>{{ format.toDay(v.unbonding_time, 'from') }}</h4>
-                  <span class="text-sm">Unbonding Time</span>
-                </div>
+            <div class="d-flex">
+              <VAvatar
+                color="secondary"
+                rounded
+                variant="outlined"
+                icon="mdi-coin"
+              ></VAvatar>
+              <div class="ml-3 d-flex flex-column justify-center">
+                <h4>
+                  {{
+                    format.formatToken2({
+                      amount: v.tokens,
+                      denom: staking.params.bond_denom,
+                    })
+                  }}
+                </h4>
+                <span class="text-sm">Total Bonded Tokens</span>
               </div>
             </div>
+            <div class="d-flex">
+              <VAvatar
+                color="secondary"
+                rounded
+                variant="outlined"
+                icon="mdi-percent"
+              ></VAvatar>
+              <div class="ml-3 d-flex flex-column justify-center">
+                <h4>
+                  {{ format.formatToken(selfBonded.balance) }} ({{ selfRate }})
+                </h4>
+                <span class="text-sm">Self Bonded</span>
+              </div>
+            </div>
+
+            <div class="d-flex">
+              <VAvatar
+                color="secondary"
+                rounded
+                variant="outlined"
+                icon="mdi-account-tie"
+              ></VAvatar>
+              <div class="ml-3 d-flex flex-column justify-center">
+                <h4>
+                  {{ v.min_self_delegation }} {{ staking.params.bond_denom }}
+                </h4>
+                <span class="text-sm">Min Self Delegation:</span>
+              </div>
+            </div>
+            <div class="d-flex">
+              <VAvatar
+                color="secondary"
+                rounded
+                variant="outlined"
+                icon="mdi-finance"
+              ></VAvatar>
+              <div class="ml-3 d-flex flex-column justify-center">
+                <h4>{{ apr }}</h4>
+                <span class="text-sm">Annual Profit</span>
+              </div>
+            </div>
+
+            <div class="d-flex">
+              <VAvatar
+                color="secondary"
+                rounded
+                variant="outlined"
+                icon="mdi-stairs-up"
+              ></VAvatar>
+              <div class="ml-3 d-flex flex-column justify-center">
+                <h4>{{ v.unbonding_height }}</h4>
+                <span class="text-sm">Unbonding Height</span>
+              </div>
+            </div>
+
+            <div class="d-flex">
+              <VAvatar
+                color="secondary"
+                rounded
+                variant="outlined"
+                icon="mdi-clock"
+              ></VAvatar>
+              <div class="ml-3 d-flex flex-column justify-center">
+                <h4>{{ format.toDay(v.unbonding_time, 'from') }}</h4>
+                <span class="text-sm">Unbonding Time</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div class="divider"></div>
@@ -309,9 +306,7 @@ onMounted(() => {
           <VCardTitle>Commissions & Rewards</VCardTitle>
           <VCardItem class="pt-0 pb-0">
             <div class="overflow-auto" style="max-height: 280px">
-              <VCardSubtitle>
-                Commissions
-              </VCardSubtitle>
+              <VCardSubtitle> Commissions </VCardSubtitle>
               <VDivider class="mb-2"></VDivider>
               <VChip
                 v-for="(i, k) in commission"
@@ -336,7 +331,16 @@ onMounted(() => {
                 {{ format.formatToken2(i) }}
               </VChip>
             </div>
-            <label for="withdraw_commission" class="btn btn-primary mt-2 w-full btn-sm" @click="dialog.open('withdraw_commission', {validator_address: v.operator_address})">Withdraw</label>
+            <label
+              for="withdraw_commission"
+              class="btn btn-primary mt-2 w-full btn-sm"
+              @click="
+                dialog.open('withdraw_commission', {
+                  validator_address: v.operator_address,
+                })
+              "
+              >Withdraw</label
+            >
           </VCardItem>
         </VCard>
       </VCol>
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index 0c63c985..1fb44894 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { useBaseStore, useFormatter, useStakingStore, useTxDialog } from '@/stores';
+import {
+  useBaseStore,
+  useFormatter,
+  useStakingStore,
+  useTxDialog,
+} from '@/stores';
 import { computed } from '@vue/reactivity';
 import { onMounted, ref, type DebuggerEvent } from 'vue';
 import { Icon } from '@iconify/vue';
@@ -7,7 +12,7 @@ import type { Key, Validator } from '@/types';
 
 const staking = useStakingStore();
 const format = useFormatter();
-const dialog = useTxDialog()
+const dialog = useTxDialog();
 
 const cache = JSON.parse(localStorage.getItem('avatars') || '{}');
 const avatars = ref(cache || {});
@@ -218,7 +223,7 @@ const rank = function (position: number) {
               <!-- 👉 Validator -->
               <td>
                 <div
-                  class="d-flex align-center overflow-hidden"
+                  class="flex items-center overflow-hidden"
                   style="max-width: 400px"
                 >
                   <div
@@ -241,7 +246,7 @@ const rank = function (position: number) {
                     </div>
                   </div>
 
-                  <div class="d-flex flex-column">
+                  <div class="flex flex-col">
                     <h6 class="text-sm text-primary">
                       <RouterLink
                         :to="{
@@ -262,7 +267,7 @@ const rank = function (position: number) {
 
               <!-- 👉 Voting Power -->
               <td class="text-right">
-                <div class="d-flex flex-column">
+                <div class="flex flex-col">
                   <h6 class="text-sm font-weight-medium">
                     {{
                       format.formatToken(
@@ -309,7 +314,16 @@ const rank = function (position: number) {
               </td>
               <!-- 👉 Action -->
               <td>
-                <label for="delegate" class="btn btn-xs bg-primary" @click="dialog.open('delegate', {validator_address: v.operator_address})">Delegate</label>
+                <label
+                  for="delegate"
+                  class="btn btn-xs bg-primary"
+                  @click="
+                    dialog.open('delegate', {
+                      validator_address: v.operator_address,
+                    })
+                  "
+                  >Delegate</label
+                >
               </td>
             </tr>
           </tbody>