From 0093928c163ee6eeec67f6052d5e84feff1cdc66 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Mon, 13 Dec 2021 17:15:36 +0800
Subject: [PATCH] optimize wallet menu

---
 src/layouts/components/Navbar.vue |  32 ++++---
 src/router/index.js               |  34 ++++++-
 src/views/WalletDelegations.vue   | 143 ++++++++++++++++++++++++++++++
 src/views/WalletHelping.vue       |  59 ++++++++++++
 4 files changed, 250 insertions(+), 18 deletions(-)
 create mode 100644 src/views/WalletDelegations.vue
 create mode 100644 src/views/WalletHelping.vue

diff --git a/src/layouts/components/Navbar.vue b/src/layouts/components/Navbar.vue
index 65fe9c7a..e0862722 100644
--- a/src/layouts/components/Navbar.vue
+++ b/src/layouts/components/Navbar.vue
@@ -62,16 +62,7 @@
       <dark-Toggler class="d-none d-lg-block" />
       <search-bar />
       <locale />
-      <b-button
-        v-ripple.400="'rgba(255, 255, 255, 0.15)'"
-        variant="primary"
-        class="btn-icon"
-        :to="{ name: 'accounts' }"
-      >
-        <feather-icon icon="KeyIcon" />
-        <span class="align-middle ml-25">{{ walletName }}</span>
-      </b-button>
-      <!-- <b-dropdown
+      <b-dropdown
         class="ml-1"
         variant="link"
         no-caret
@@ -85,11 +76,15 @@
             variant="primary"
             class="btn-icon"
           >
-            <feather-icon icon="UserIcon" />
+            <feather-icon icon="KeyIcon" />
+            {{ walletName }}
           </b-button>
         </template>
 
-        <b-dropdown-item :to="{ name: 'portfolio' }">
+        <b-dropdown-item
+          :to="{ name: 'portfolio' }"
+          class="d-none"
+        >
           <feather-icon
             icon="PieChartIcon"
             size="16"
@@ -105,22 +100,22 @@
           <span class="align-middle ml-50">Accounts</span>
         </b-dropdown-item>
 
-        <b-dropdown-item :to="{ name: 'addresses' }">
+        <b-dropdown-item :to="{ name: 'delegations' }">
           <feather-icon
             icon="BookOpenIcon"
             size="16"
           />
-          <span class="align-middle ml-50">Address Book</span>
+          <span class="align-middle ml-50">My Delegations</span>
         </b-dropdown-item>
 
-        <b-dropdown-item :to="{ name: 'setting' }">
+        <b-dropdown-item :to="`/${selected_chain.chain_name}/uptime/my`">
           <feather-icon
             icon="SettingsIcon"
             size="16"
           />
-          <span class="align-middle ml-50">Setting</span>
+          <span class="align-middle ml-50">My Validators</span>
         </b-dropdown-item>
-      </b-dropdown> -->
+      </b-dropdown>
     </b-navbar-nav>
   </div>
 </template>
@@ -128,6 +123,7 @@
 <script>
 import {
   BLink, BNavbarNav, BMedia, BMediaAside, BAvatar, BMediaBody, VBTooltip, BButton,
+  BDropdown, BDropdownItem,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import DarkToggler from '@core/layouts/components/app-navbar/components/DarkToggler.vue'
@@ -147,6 +143,8 @@ export default {
     BMediaAside,
     BMediaBody,
     BButton,
+    BDropdown,
+    BDropdownItem,
 
     // Navbar Components
     DarkToggler,
diff --git a/src/router/index.js b/src/router/index.js
index 5cce269c..d7dacacf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -97,6 +97,38 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/wallet/delegations',
+      name: 'delegations',
+      component: () => import('@/views/WalletDelegations.vue'),
+      meta: {
+        pageTitle: 'My Delegations',
+        breadcrumb: [
+          {
+            text: 'Wallet',
+          },
+          {
+            text: 'My Delegations',
+          },
+        ],
+      },
+    },
+    {
+      path: '/wallet/helping',
+      name: 'helping',
+      component: () => import('@/views/WalletHelping.vue'),
+      meta: {
+        pageTitle: 'Help Ping.pub',
+        breadcrumb: [
+          {
+            text: 'Wallet',
+          },
+          {
+            text: 'Help Ping.pub',
+          },
+        ],
+      },
+    },
     // chain modules
     {
       path: '/:chain/',
@@ -129,7 +161,7 @@ const router = new VueRouter({
     },
     {
       path: '/:chain/uptime/my',
-      name: 'uptime',
+      name: 'myuptime',
       component: () => import('@/views/UptimeMyValidators.vue'),
       meta: {
         pageTitle: 'Uptime',
diff --git a/src/views/WalletDelegations.vue b/src/views/WalletDelegations.vue
new file mode 100644
index 00000000..4caf9a8b
--- /dev/null
+++ b/src/views/WalletDelegations.vue
@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <b-card>
+      <b-table
+        :items="formatedDelegations(delegations)"
+        stacked="sm"
+      >
+
+        <template #cell(validator)="data">
+          <router-link :to="`/${data.item.validator.chain}/staking/${data.item.validator.validator}`">
+            <b-avatar
+              :src="data.item.validator.logo"
+              size="18"
+              variant="light-primary"
+              rounded=""
+            />
+            {{ data.item.validator.moniker }}
+          </router-link>
+        </template>
+        <template #cell(action)="data">
+          <!-- size -->
+          <b-button-group
+            size="sm"
+          >
+            <b-button
+              v-b-modal.delegate-window
+              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+              v-b-tooltip.hover.top="'Delegate'"
+              variant="outline-primary"
+              @click="selectValue(data.value)"
+            >
+              <feather-icon icon="LogInIcon" />
+            </b-button>
+            <b-button
+              v-b-modal.redelegate-window
+              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+              v-b-tooltip.hover.top="'Redelegate'"
+              variant="outline-primary"
+              @click="selectValue(data.value)"
+            >
+              <feather-icon icon="ShuffleIcon" />
+            </b-button>
+            <b-button
+              v-b-modal.unbond-window
+              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+              v-b-tooltip.hover.top="'Unbond'"
+              variant="outline-primary"
+              @click="selectValue(data.value)"
+            >
+              <feather-icon icon="LogOutIcon" />
+            </b-button>
+          </b-button-group>
+        </template>
+      </b-table>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import {
+  BButton, VBTooltip, BTable, BCard, BButtonGroup, BAvatar,
+} from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
+import {
+  formatToken, getCachedValidators, getLocalAccounts, getLocalChains,
+} from '@/libs/data'
+import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
+
+export default {
+  components: {
+    BAvatar,
+    BButton,
+    BButtonGroup,
+    BTable,
+    BCard,
+    FeatherIcon,
+  },
+  directives: {
+    'b-tooltip': VBTooltip,
+    Ripple,
+  },
+  data() {
+    return {
+      accounts: [],
+      delegations: [],
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    selectValue(v) {
+      return v
+    },
+    formatedDelegations(v) {
+      // console.log('v', v)
+      return v.map(x => ({
+        validator: {
+          logo: x.chain.logo,
+          validator: x.delegation.validator_address,
+          moniker: this.findMoniker(x.chain.chain_name, x.delegation.validator_address),
+          chain: x.chain.chain_name,
+        },
+        delegator: x.keyname,
+        delegation: formatToken(x.balance),
+        // action: '',
+      }))
+    },
+    findMoniker(chain, addr) {
+      const vals = JSON.parse(getCachedValidators(chain))
+      const val = vals.find(x => x.operator_address === addr)
+      if (val) {
+        return val.description.moniker
+      }
+      return addr
+    },
+    init() {
+      this.accounts = getLocalAccounts()
+      const chains = getLocalChains()
+      if (this.accounts) {
+        Object.keys(this.accounts).forEach(acc => {
+          this.accounts[acc].address.forEach(add => {
+            this.$http.getStakingDelegations(add.addr, chains[add.chain]).then(res => {
+              if (res.delegation_responses && res.delegation_responses.length > 0) {
+                const delegation = res.delegation_responses.map(x => {
+                  const x2 = x
+                  x2.keyname = acc
+                  x2.chain = chains[add.chain]
+                  return x2
+                })
+                this.delegations = this.delegations.concat(delegation)
+              }
+            }).catch(() => {})
+          })
+        })
+      }
+    },
+  },
+}
+</script>
diff --git a/src/views/WalletHelping.vue b/src/views/WalletHelping.vue
new file mode 100644
index 00000000..fe474a58
--- /dev/null
+++ b/src/views/WalletHelping.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <b-table
+      :items="deleTable"
+      stacked="sm"
+    >
+      <template #cell(action)="data">
+        <!-- size -->
+        <b-button-group
+          size="sm"
+        >
+          <b-button
+            v-b-modal.delegate-window
+            v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+            v-b-tooltip.hover.top="'Delegate'"
+            variant="outline-primary"
+            @click="selectValue(data.value)"
+          >
+            <feather-icon icon="LogInIcon" />
+          </b-button>
+          <b-button
+            v-b-modal.redelegate-window
+            v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+            v-b-tooltip.hover.top="'Redelegate'"
+            variant="outline-primary"
+            @click="selectValue(data.value)"
+          >
+            <feather-icon icon="ShuffleIcon" />
+          </b-button>
+          <b-button
+            v-b-modal.unbond-window
+            v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+            v-b-tooltip.hover.top="'Unbond'"
+            variant="outline-primary"
+            @click="selectValue(data.value)"
+          >
+            <feather-icon icon="LogOutIcon" />
+          </b-button>
+        </b-button-group>
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+import {
+  BButton, VBTooltip, BTable,
+} from 'bootstrap-vue'
+
+export default {
+  components: {
+    BButton,
+    BTable,
+  },
+  directives: {
+    'b-tooltip': VBTooltip,
+  },
+}
+</script>