update my delegations

src/libs/fetch.js

@@ -276,7 +276,7 @@ export default class ChainFetch {
     if (compareVersions(config ? config.sdk_version : this.config.sdk_version, '0.40') < 0) {
       return this.get(`/distribution/delegators/${address}/rewards`, config).then(data => commonProcess(data))
     }
-    return this.get(`/cosmos/distribution/v1beta1/delegators/${address}/rewards`).then(data => commonProcess(data))
+    return this.get(`/cosmos/distribution/v1beta1/delegators/${address}/rewards`, config).then(data => commonProcess(data))
   }
 
   async getStakingValidators(address) {

src/views/OperationDelegateComponent.vue

@@ -19,7 +19,7 @@
       >
         <template #overlay>
           <div class="text-center">
-            <b-icon
+            <b-avatar
               icon="stopwatch"
               font-scale="3"
               animation="cylon"
@@ -277,9 +277,10 @@
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate'
 import {
-  BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
+  BAvatar, BModal, BRow, BCol, BInputGroup, BFormInput, BFormGroup, BFormSelect, BFormSelectOption,
   BForm, BFormRadioGroup, BFormRadio, BButton, BInputGroupAppend, BFormCheckbox, BOverlay,
 } from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
 import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
@@ -292,6 +293,7 @@ import ToastificationContent from '@core/components/toastification/Toastificatio
 export default {
   name: 'DelegateDialogue',
   components: {
+    BAvatar,
     BModal,
     BRow,
     BCol,
@@ -314,6 +316,9 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
   },
+  directives: {
+    Ripple,
+  },
   props: {
     validatorAddress: {
       type: String,
@@ -527,8 +532,6 @@ export default {
       }).catch(e => {
         this.error = e
       })
-      // Send tokens
-      // return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
       return ''
     },
   },

src/views/WalletAccountDetail.vue

@@ -501,24 +501,12 @@ export default {
         }))
       }
       if (this.unbonding) {
-        // total = total.concat(this.unbonding.map(x => {
-        //   const xh = x.entries[0]
-        //   xh.type = 'unbonding'
-        //   xh.color = 'text-warning'
-        //   xh.icon = 'TrendingUpIcon'
-        //   return xh
-        // }))
         let tmp1 = 0
         this.unbonding.forEach(x => {
           x.entries.forEach(e => {
             tmp1 += Number(e.balance)
           })
         })
-        // this.redelegations.forEach(x => {
-        //   x.entries.forEach(e => {
-        //     tmp1 += Number(e.balance)
-        //   })
-        // })
         const unbonding = this.formatCurrency(tmp1, stakingDenom)
         sumCurrency += unbonding
         sum += tmp1
@@ -620,19 +608,12 @@ export default {
     this.$http.getStakingDelegations(this.address).then(res => {
       this.delegations = res.delegation_responses || res
     })
-    // this.$http.getStakingRedelegations(this.address).then(res => {
-    //   this.redelegations = res.redelegation_responses || res
-    // })
     this.$http.getStakingUnbonding(this.address).then(res => {
       this.unbonding = res.unbonding_responses || res
     })
     this.$http.getTxsBySender(this.address).then(res => {
       this.transactions = res
     })
-
-    // this.$http.getStakingValidators(this.address).then(res => {
-    //   console.log(res)
-    // })
   },
   methods: {
     pageload(v) {

src/views/WalletDelegations.vue

@@ -1,9 +1,19 @@
 <template>
   <div>
-    <b-card>
+    <router-link
+      v-if="delegations.length === 0"
+      to="/wallet/import"
+    >
+      <b-card class="addzone text-center">
+        <feather-icon icon="PlusIcon" />
+        Connect Wallet
+      </b-card>
+    </router-link>
+    <b-card v-else>
       <b-table
-        :items="formatedDelegations(delegations)"
+        :items="formatedDelegations"
         stacked="sm"
+        :fields="fields"
       >
 
         <template #cell(validator)="data">
@@ -17,6 +27,12 @@
             {{ data.item.validator.moniker }}
           </router-link>
         </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>
+          </router-link>
+        </template>
         <template #cell(action)="data">
           <!-- size -->
           <b-button-group
@@ -27,7 +43,7 @@
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Delegate'"
               variant="outline-primary"
-              @click="selectValue(data.value)"
+              @click="selectValue(data.item)"
             >
               <feather-icon icon="LogInIcon" />
             </b-button>
@@ -36,7 +52,7 @@
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Redelegate'"
               variant="outline-primary"
-              @click="selectValue(data.value)"
+              @click="selectValue(data.item)"
             >
               <feather-icon icon="ShuffleIcon" />
             </b-button>
@@ -45,7 +61,7 @@
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Unbond'"
               variant="outline-primary"
-              @click="selectValue(data.value)"
+              @click="selectValue(data.item)"
             >
               <feather-icon icon="LogOutIcon" />
             </b-button>
@@ -53,6 +69,19 @@
         </template>
       </b-table>
     </b-card>
+    <operation-withdraw-component :address="address" />
+    <operation-unbond-component
+      :address="address"
+      :validator-address.sync="selectedValidator"
+    />
+    <operation-delegate-component
+      :address="address"
+      :validator-address.sync="selectedValidator"
+    />
+    <operation-redelegate-component
+      :address="address"
+      :validator-address.sync="selectedValidator"
+    />
   </div>
 </template>
 
@@ -62,10 +91,15 @@ import {
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
 import {
-  formatToken, getCachedValidators, getLocalAccounts, getLocalChains,
+  formatToken, getCachedValidators, getLocalAccounts, getLocalChains, tokenFormatter,
 } from '@/libs/data'
 import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
 
+import OperationWithdrawComponent from './OperationWithdrawComponent.vue'
+import OperationUnbondComponent from './OperationUnbondComponent.vue'
+import OperationDelegateComponent from './OperationDelegateComponent.vue'
+import OperationRedelegateComponent from './OperationRedelegateComponent.vue'
+
 export default {
   components: {
     BAvatar,
@@ -74,6 +108,11 @@ export default {
     BTable,
     BCard,
     FeatherIcon,
+
+    OperationWithdrawComponent,
+    OperationDelegateComponent,
+    OperationRedelegateComponent,
+    OperationUnbondComponent,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -81,23 +120,38 @@ export default {
   },
   data() {
     return {
+      fields: [
+        {
+          key: 'validator',
+          sortable: true,
+          // sortByFormatted: true,
+        },
+        {
+          key: 'delegator',
+          sortable: true,
+          // sortByFormatted: true,
+        },
+        {
+          key: 'delegation',
+          sortable: true,
+          // sortByFormatted: true,
+        },
+        {
+          key: 'reward',
+          sortable: true,
+          // sortByFormatted: true,
+        },
+      ],
+      address: '',
+      selectedValidator: '',
       accounts: [],
       delegations: [],
+      rewards: {},
     }
   },
   computed: {
-
+    formatedDelegations() {
-  },
+      return this.delegations.map(x => ({
-  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,
@@ -105,10 +159,23 @@ export default {
           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: '',
       }))
     },
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    selectValue(v) {
+      this.address = v.delegator_address
+      this.selectedValidator = v.validator.validator
+      console.log(v, this.address, this.selectedValidator)
+      return v
+    },
     findMoniker(chain, addr) {
       const vals = JSON.parse(getCachedValidators(chain))
       const val = vals.find(x => x.operator_address === addr)
@@ -117,18 +184,30 @@ export default {
       }
       return addr
     },
+    findReward(delegator, validator) {
+      const reward = this.rewards[delegator]?.rewards.find(x => x.validator_address === validator) || null
+      console.log(reward, delegator, validator)
+      if (reward) {
+        return tokenFormatter(reward.reward)
+      }
+      return '-'
+    },
     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 => {
+            const chain = chains[add.chain]
+            this.$http.getStakingReward(add.addr, chain).then(res => {
+              this.rewards[add.addr] = res
+            })
+            this.$http.getStakingDelegations(add.addr, 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]
+                  x2.chain = chain
                   return x2
                 })
                 this.delegations = this.delegations.concat(delegation)
@@ -141,3 +220,17 @@ export default {
   },
 }
 </script>
+
+<style lang="css">
+.addzone {
+    border: 2px dashed #ced4da;
+    background: #fff;
+    border-radius: 6px;
+    cursor: pointer;
+    box-shadow: none;
+}
+.addzone :hover {
+    border: 2px dashed #7367F0;
+}
+
+</style>