From d148bbe3b1a5b011dbf488235faf3e5cf0470502 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 16 May 2023 00:19:50 +0800
Subject: [PATCH] feat: Dashboard Delegations List

---
 package.json                            |  2 +-
 src/layouts/components/NavBarWallet.vue | 35 +++++++-------
 src/modules/[chain]/index.vue           | 61 ++++++++++++++++++++++---
 yarn.lock                               |  8 ++--
 4 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 98bcf29e..c1abf18a 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "md-editor-v3": "^2.8.1",
     "numeral": "^2.0.6",
     "osmojs": "^14.0.0-rc.0",
-    "ping-widget": "^0.0.7",
+    "ping-widget": "^0.0.8",
     "pinia": "^2.0.28",
     "postcss": "^8.4.23",
     "prismjs": "^1.29.0",
diff --git a/src/layouts/components/NavBarWallet.vue b/src/layouts/components/NavBarWallet.vue
index f8f4f882..ead33231 100644
--- a/src/layouts/components/NavBarWallet.vue
+++ b/src/layouts/components/NavBarWallet.vue
@@ -1,29 +1,30 @@
 <script setup lang="ts">
 import { useWalletStore } from '@/stores';
-import {ref, computed} from 'vue'
+import { ref, computed } from 'vue';
 const walletStore = useWalletStore();
 walletStore.$subscribe((m, s) => {
   console.log(m, s);
 });
-let showCopyToast = ref(0)
-async function copyAdress(address: string){
+let showCopyToast = ref(0);
+async function copyAdress(address: string) {
   try {
     await navigator.clipboard.writeText(address);
-    showCopyToast.value = 1
-    setTimeout(()=>{
-      showCopyToast.value = 0
-    },1000)
-    /* Resolved - 文本被成功复制到剪贴板 */
+    showCopyToast.value = 1;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
   } catch (err) {
-    showCopyToast.value = 2
-    setTimeout(()=>{
-      showCopyToast.value = 0
-    },1000)
+    showCopyToast.value = 2;
+    setTimeout(() => {
+      showCopyToast.value = 0;
+    }, 1000);
   }
 }
-const tipMsg = computed(()=> {
-  return showCopyToast.value === 2 ? {class: 'error', msg: 'Copy Error!'}: {class: 'success', msg: 'Copy Success!'}
-})
+const tipMsg = computed(() => {
+  return showCopyToast.value === 2
+    ? { class: 'error', msg: 'Copy Error!' }
+    : { class: 'success', msg: 'Copy Success!' };
+});
 </script>
 
 <template>
@@ -68,14 +69,14 @@ const tipMsg = computed(()=> {
         >
       </div>
     </div>
-    <div class="toast" v-show="showCopyToast===1">
+    <div class="toast" v-show="showCopyToast === 1">
       <div class="alert alert-success">
         <div class="text-sm">
           <span>{{ tipMsg.msg }}</span>
         </div>
       </div>
     </div>
-    <div class="toast" v-show="showCopyToast===2">
+    <div class="toast" v-show="showCopyToast === 2">
       <div class="alert alert-error">
         <div class="text-sm">
           <span>{{ tipMsg.msg }}</span>
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index f4b2efbe..817b8630 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -8,6 +8,7 @@ import {
   useFormatter,
   useTxDialog,
   useWalletStore,
+  useStakingStore,
 } from '@/stores';
 import { onMounted, ref } from 'vue';
 import { useIndexModule } from './indexStore';
@@ -21,6 +22,7 @@ const store = useIndexModule();
 const walletStore = useWalletStore();
 const format = useFormatter();
 const dialog = useTxDialog();
+const stakingStore = useStakingStore();
 
 const coinInfo = computed(() => {
   return store.coinInfo;
@@ -230,7 +232,7 @@ const color = computed(() => {
     </div>
 
     <div class="bg-base-100 rounded mt-4 shadow">
-      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         Active Proposals
       </div>
       <div class="px-4 pb-4">
@@ -242,7 +244,7 @@ const color = computed(() => {
     </div>
 
     <div class="bg-base-100 rounded mt-4 shadow">
-      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-secondary">
+      <div class="px-4 pt-4 pb-2 text-lg font-semibold text-main">
         {{ walletStore.currentAddress || 'Not Connected' }}
         <span
           v-if="walletStore.currentAddress"
@@ -293,13 +295,58 @@ const color = computed(() => {
         </div>
       </div>
 
-      <div>
-        <div v-for="v in walletStore.delegations">
-          {{ v }}
-        </div>
+      <div class="px-4 pb-4">
+        <table class="table table-compact w-full table-zebra">
+          <thead>
+            <tr>
+              <th>Validator</th>
+              <th>Delegations</th>
+              <th>Rewards</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in walletStore.delegations" :key="index">
+              <td>
+                {{
+                  format.validatorFromBech32(
+                    item?.delegation?.validator_address
+                  )
+                }}
+              </td>
+              <td>{{ format.formatToken(item?.balance) }}</td>
+              <td>
+                {{
+                  format.formatToken({
+                    denom: item?.balance?.denom,
+                    amount: item?.delegation?.shares,
+                  })
+                }}
+              </td>
+              <td>
+                <div>
+                  <button
+                    class="btn btn-xs btn-primary btn-ghost text-primary rounded-sm mr-2"
+                  >
+                    Delegate
+                  </button>
+                  <button
+                    class="btn btn-xs btn-primary btn-ghost text-primary rounded-sm"
+                  >
+                    Withdraw Rewards
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
 
-      <div></div>
+      <div class="grid grid-cols-3 gap-4 px-4 pb-6 mt-4">
+        <button class="btn btn-success text-white">Send</button>
+        <button class="btn btn-info text-white">Receive</button>
+        <button class="btn btn-primary text-white">Convert</button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 5df86641..02bbe551 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6736,10 +6736,10 @@ pify@^3.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
   integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
 
-ping-widget@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.7.tgz#441fdc03d1447a24bffb8233a2f55e734948820b"
-  integrity sha512-LbMBnXZUxh0goJXSyGHkM1kzdShmlHq5836QNGbIZFS6oSoCbKyYtbhVhR0l7BuqHpiYYpXbnUM+SN60yqOHVQ==
+ping-widget@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.8.tgz#378ef1f3ac59645921a98920ebe83cc74c42e6db"
+  integrity sha512-NAFB6n+jJhjk4Xp8LCtRFzPOZdkKhecAKFg0Rimi0yilXL6EBRWJB+09zH89sjHcnUyhW6B2vSg42DpT8n3Rpw==
   dependencies:
     "@cosmjs/amino" "^0.30.1"
     "@cosmjs/ledger-amino" "^0.30.1"