From 8d5cdbf0f4eb41d082a6d1747ab394c96d144587 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Wed, 22 Dec 2021 15:43:07 +0800
Subject: [PATCH] add tx history and delegations

---
 src/libs/utils.js                             |  3 +-
 src/views/OperationDelegateComponent.vue      |  7 +-
 src/views/OperationGovDepositComponent.vue    |  7 +-
 src/views/OperationRedelegateComponent.vue    |  7 +-
 src/views/OperationTransfer2Component.vue     |  7 +-
 src/views/OperationTransferComponent.vue      |  7 +-
 src/views/OperationUnbondComponent.vue        |  7 +-
 src/views/OperationVoteComponent.vue          |  7 +-
 .../OperationWithdrawCommissionComponent.vue  |  7 +-
 src/views/OperationWithdrawComponent.vue      |  7 +-
 src/views/WalletDelegations.vue               | 48 +++++++++---
 src/views/WalletTransactions.vue              | 74 +++++++++----------
 12 files changed, 132 insertions(+), 56 deletions(-)

diff --git a/src/libs/utils.js b/src/libs/utils.js
index 2b99f584..8b2174b2 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -43,7 +43,8 @@ export function getLocalTxHistory() {
   return getLocalObject('txHistory')
 }
 
-export function setLocalTxHistory(newTx) {
+export function setLocalTxHistory(tx) {
+  const newTx = tx
   const txs = getLocalTxHistory()
   if (txs) {
     txs.push(newTx)
diff --git a/src/views/OperationDelegateComponent.vue b/src/views/OperationDelegateComponent.vue
index e888889b..9ced09e4 100644
--- a/src/views/OperationDelegateComponent.vue
+++ b/src/views/OperationDelegateComponent.vue
@@ -516,7 +516,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes).then(res => {
-          setLocalTxHistory({ op: 'delegate', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'delegate',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('delegate-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationGovDepositComponent.vue b/src/views/OperationGovDepositComponent.vue
index 185a05a3..4b362948 100644
--- a/src/views/OperationGovDepositComponent.vue
+++ b/src/views/OperationGovDepositComponent.vue
@@ -457,7 +457,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'deposit', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'deposit',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('deposit-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationRedelegateComponent.vue b/src/views/OperationRedelegateComponent.vue
index 9af95d53..276b812a 100644
--- a/src/views/OperationRedelegateComponent.vue
+++ b/src/views/OperationRedelegateComponent.vue
@@ -453,7 +453,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes).then(res => {
-          setLocalTxHistory({ op: 'redelegate', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'redelegate',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('redelegate-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationTransfer2Component.vue b/src/views/OperationTransfer2Component.vue
index 869f9d9e..b3e24fd9 100644
--- a/src/views/OperationTransfer2Component.vue
+++ b/src/views/OperationTransfer2Component.vue
@@ -552,7 +552,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'send', hash: res.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'transfer',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('ibc-transfer-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationTransferComponent.vue b/src/views/OperationTransferComponent.vue
index 2d18db8f..e3dd703a 100644
--- a/src/views/OperationTransferComponent.vue
+++ b/src/views/OperationTransferComponent.vue
@@ -455,7 +455,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'send', hash: res.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'send',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('transfer-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationUnbondComponent.vue b/src/views/OperationUnbondComponent.vue
index 6d401eb7..f2b8516c 100644
--- a/src/views/OperationUnbondComponent.vue
+++ b/src/views/OperationUnbondComponent.vue
@@ -431,7 +431,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'unbond', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'unbond',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('unbond-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationVoteComponent.vue b/src/views/OperationVoteComponent.vue
index d7c02f6f..22271c80 100644
--- a/src/views/OperationVoteComponent.vue
+++ b/src/views/OperationVoteComponent.vue
@@ -432,7 +432,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'vote', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'vote',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('vote-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationWithdrawCommissionComponent.vue b/src/views/OperationWithdrawCommissionComponent.vue
index bcf2ebc0..b35a3afc 100644
--- a/src/views/OperationWithdrawCommissionComponent.vue
+++ b/src/views/OperationWithdrawCommissionComponent.vue
@@ -338,7 +338,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'withdraw', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'withdraw',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('withdraw-commission-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/OperationWithdrawComponent.vue b/src/views/OperationWithdrawComponent.vue
index 54520141..61b4fd59 100644
--- a/src/views/OperationWithdrawComponent.vue
+++ b/src/views/OperationWithdrawComponent.vue
@@ -363,7 +363,12 @@ export default {
         signerData,
       ).then(bodyBytes => {
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
-          setLocalTxHistory({ op: 'withdraw', hash: res.tx_response.txhash, time: new Date() })
+          setLocalTxHistory({
+            chain: this.$store.state.chains.selected,
+            op: 'withdraw',
+            hash: res.tx_response.txhash,
+            time: new Date(),
+          })
           this.$bvModal.hide('withdraw-window')
           this.$toast({
             component: ToastificationContent,
diff --git a/src/views/WalletDelegations.vue b/src/views/WalletDelegations.vue
index e2dc3603..b2911619 100644
--- a/src/views/WalletDelegations.vue
+++ b/src/views/WalletDelegations.vue
@@ -9,9 +9,13 @@
         Connect Wallet
       </b-card>
     </router-link>
-    <b-card v-else>
+    <b-card
+      v-for="(items,k) in groupedDelegations"
+      :key="k"
+      :title="k"
+    >
       <b-table
-        :items="formatedDelegations"
+        :items="items"
         stacked="sm"
         :fields="fields"
       >
@@ -29,8 +33,7 @@
         </template>
         <template #cell(delegator)="data">
           <router-link :to="`/${data.item.validator.chain}/account/${data.item.delegator_address}`">
-            {{ data.value }}<br>
-            <small>{{ data.item.delegator_address }}</small>
+            Withdraw
           </router-link>
         </template>
         <template #cell(action)="data">
@@ -69,6 +72,8 @@
         </template>
       </b-table>
     </b-card>
+
+    <!--- not completed--->
     <operation-withdraw-component :address="address" />
     <operation-unbond-component
       :address="address"
@@ -126,11 +131,6 @@ export default {
           sortable: true,
           // sortByFormatted: true,
         },
-        {
-          key: 'delegator',
-          sortable: true,
-          // sortByFormatted: true,
-        },
         {
           key: 'delegation',
           sortable: true,
@@ -141,6 +141,12 @@ export default {
           sortable: true,
           // sortByFormatted: true,
         },
+        {
+          key: 'delegator',
+          label: '',
+          sortable: true,
+          // sortByFormatted: true,
+        },
       ],
       address: '',
       selectedValidator: '',
@@ -165,6 +171,30 @@ export default {
         // action: '',
       }))
     },
+    groupedDelegations() {
+      const group = {}
+      this.delegations.forEach(x => {
+        const d = {
+          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,
+          delegator_address: x.delegation.delegator_address,
+          delegation: formatToken(x.balance),
+          reward: this.findReward(x.delegation.delegator_address, x.delegation.validator_address),
+          // action: '',
+        }
+        if (group[x.keyname]) {
+          group[x.keyname].push(d)
+        } else {
+          group[x.keyname] = [d]
+        }
+      })
+      return group
+    },
   },
   created() {
     this.init()
diff --git a/src/views/WalletTransactions.vue b/src/views/WalletTransactions.vue
index 337f9ead..91ad76bf 100644
--- a/src/views/WalletTransactions.vue
+++ b/src/views/WalletTransactions.vue
@@ -1,62 +1,62 @@
 <template>
   <div>
     <b-table
-      :items="deleTable"
+      :items="history"
+      :fields="fields"
       stacked="sm"
     >
-      <template #cell(action)="data">
-        <!-- size -->
-        <b-button-group
+      <template #cell(chain)="data">
+        <b-avatar
           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>
+          :src="data.item.chain.logo"
+        /> {{ data.item.chain.chain_name }}
+      </template>
+      <template #cell(hash)="data">
+        <router-link :to="`/${data.item.chain.chain_name}/tx/${data.value}`">
+          {{ data.value }}
+        </router-link>
       </template>
     </b-table>
+    <div class="text-center">
+      <b-button @click="clear()">
+        Clear History
+      </b-button>
+    </div>
   </div>
 </template>
 
 <script>
 import {
-  BButton, VBTooltip, BTable,
+  VBTooltip, BTable, BAvatar, BButton,
 } from 'bootstrap-vue'
+import { getLocalTxHistory } from '@/libs/utils'
 
 export default {
   components: {
-    BButton,
-    BTable,
+    BTable, BAvatar, BButton,
   },
   directives: {
     'b-tooltip': VBTooltip,
   },
+  data() {
+    return {
+      fields: [
+        { key: 'chain', label: 'BLOCKCHAIN' },
+        { key: 'op', label: 'ACTION' },
+        { key: 'hash', label: 'TX HASH' },
+        { key: 'time', label: 'TIME' },
+      ],
+      history: [],
+    }
+  },
   created() {
-    
+    this.history = getLocalTxHistory()
+  },
+  methods: {
+    clear() {
+      this.history = []
+      localStorage.setItem('txHistory', [])
+    },
   },
 }
 </script>