From 6373336d6e8cd6628b3f1b37e5dfb9197a706b15 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Mon, 6 Sep 2021 15:30:17 +0800
Subject: [PATCH] improve UX

---
 src/libs/fetch.js                             |   7 +-
 src/views/GovernanceProposalView.vue          |   2 +-
 src/views/OperationDelegateComponent.vue      |   1 +
 src/views/OperationRedelegateComponent.vue    |   1 +
 src/views/OperationTransferComponent.vue      |   1 +
 src/views/OperationUnbondComponent.vue        |   1 +
 .../OperationWithdrawCommissionComponent.vue  | 379 ++++++++++++++++++
 src/views/OperationWithdrawComponent.vue      |   2 +
 src/views/StakingRewardComponent.vue          |  62 +--
 src/views/StakingValidator.vue                |   6 +-
 10 files changed, 415 insertions(+), 47 deletions(-)
 create mode 100644 src/views/OperationWithdrawCommissionComponent.vue

diff --git a/src/libs/fetch.js b/src/libs/fetch.js
index 2b3c9d34..768c99bf 100644
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -169,8 +169,11 @@ const chainAPI = class ChainFetch {
     })
   }
 
-  async getGovernanceVotes(pid) {
-    return this.get(`/gov/proposals/${pid}/votes`).then(data => commonProcess(data).map(d => new Votes().init(d)))
+  async getGovernanceVotes(pid, offset = 0, limit = 50) {
+    if (compareVersions(this.config.sdk_version, '0.40') < 0) {
+      return this.get(`/gov/proposals/${pid}/votes`).then(data => commonProcess(data).map(d => new Votes().init(d)))
+    }
+    return this.get(`/cosmos/gov/v1beta1/proposals/${pid}/votes?pagination.offset=${offset}&pagination.limit=${limit}`).then(data => data.votes.map(d => new Votes().init(d)))
   }
 
   async getGovernanceList() {
diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 3c1a8d61..476bf4c3 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -109,7 +109,7 @@
       </b-card-footer>
     </b-card>
     <operation-vote-component
-      :proposal-id="proposal.id"
+      :proposal-id="Number(proposal.id)"
       :title="proposal.title"
     />
     <b-card no-body>
diff --git a/src/views/OperationDelegateComponent.vue b/src/views/OperationDelegateComponent.vue
index f329e00b..93b72259 100644
--- a/src/views/OperationDelegateComponent.vue
+++ b/src/views/OperationDelegateComponent.vue
@@ -7,6 +7,7 @@
       title="Delegate Token"
       hide-header-close
       scrollable
+      :ok-disabled="!selectedAddress"
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
diff --git a/src/views/OperationRedelegateComponent.vue b/src/views/OperationRedelegateComponent.vue
index 01ca70fa..d2897ce8 100644
--- a/src/views/OperationRedelegateComponent.vue
+++ b/src/views/OperationRedelegateComponent.vue
@@ -7,6 +7,7 @@
       title="Redelegate Token"
       hide-header-close
       scrollable
+      :ok-disabled="!selectedAddress"
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
diff --git a/src/views/OperationTransferComponent.vue b/src/views/OperationTransferComponent.vue
index 57668fbd..b08269da 100644
--- a/src/views/OperationTransferComponent.vue
+++ b/src/views/OperationTransferComponent.vue
@@ -7,6 +7,7 @@
       title="Transfer Tokens"
       hide-header-close
       scrollable
+      :ok-disabled="!address"
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
diff --git a/src/views/OperationUnbondComponent.vue b/src/views/OperationUnbondComponent.vue
index 8f5816a1..c1a4e681 100644
--- a/src/views/OperationUnbondComponent.vue
+++ b/src/views/OperationUnbondComponent.vue
@@ -7,6 +7,7 @@
       title="Unbond Token"
       hide-header-close
       scrollable
+      :ok-disabled="!selectedAddress"
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
diff --git a/src/views/OperationWithdrawCommissionComponent.vue b/src/views/OperationWithdrawCommissionComponent.vue
new file mode 100644
index 00000000..e59b2bb4
--- /dev/null
+++ b/src/views/OperationWithdrawCommissionComponent.vue
@@ -0,0 +1,379 @@
+<template>
+  <div>
+    <b-modal
+      id="withdraw-commission-window"
+      centered
+      size="md"
+      title="Withdraw Commission"
+      hide-header-close
+      scrollable
+
+      :ok-disabled="!address"
+      @hidden="resetModal"
+      @ok="handleOk"
+      @show="loadBalance"
+    >
+      <validation-observer ref="simpleRules">
+        <b-form>
+          <b-row>
+            <b-col v-if="account">
+              <b-form-group
+                label="Sender"
+                label-for="Account"
+              >
+                <b-input-group class="mb-25">
+                  <b-input-group-prepend is-text>
+                    <b-avatar
+                      :src="account.logo"
+                      size="18"
+                      variant="light-primary"
+                      rounded
+                    />
+                  </b-input-group-prepend>
+                  <b-form-input
+                    :value="account.addr"
+                    readonly
+                  />
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Fee"
+                label-for="Fee"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required"
+                  name="fee"
+                >
+                  <b-input-group>
+                    <b-form-input v-model="fee" />
+                    <b-form-select
+                      v-model="feeDenom"
+                    >
+                      <b-form-select-option
+                        v-for="item in feeDenoms"
+                        :key="item.denom"
+                        :value="item.denom"
+                      >
+                        {{ item.denom }}
+                      </b-form-select-option>
+                    </b-form-select>
+                  </b-input-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Memo"
+                label-for="Memo"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  name="memo"
+                >
+                  <b-form-input
+                    id="Memo"
+                    v-model="memo"
+                    max="2"
+                  />
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+
+          <b-row>
+            <b-col>
+              <b-form-group
+                label="Wallet"
+                label-for="wallet"
+              >
+                <validation-provider
+                  v-slot="{ errors }"
+                  rules="required"
+                  name="wallet"
+                >
+                  <b-form-radio-group
+                    v-model="wallet"
+                    stacked
+                    class="demo-inline-spacing"
+                  >
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="keplr"
+                      class="mb-1 mt-1"
+                    >
+                      Keplr
+                    </b-form-radio>
+                    <!-- <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="ledgerUSB"
+                      class="mb-1 mt-1"
+                      disabled
+                    >
+                      Ledger (USB)
+                    </b-form-radio>
+                    <b-form-radio
+                      v-model="wallet"
+                      name="wallet"
+                      value="ledgerBle"
+                      class="mb-1 mt-1"
+                      disabled
+                    >
+                      Ledger (Bluetooth)
+                    </b-form-radio> -->
+                  </b-form-radio-group>
+                  <small class="text-danger">{{ errors[0] }}</small>
+                </validation-provider>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </b-form>
+      </validation-observer>
+      <small class="text-danger">{{ error }}</small>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider, ValidationObserver } from 'vee-validate'
+import {
+  BModal, BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup, BFormSelect, BFormSelectOption,
+  BForm, BFormRadioGroup, BFormRadio, BInputGroupPrepend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, getLocalAccounts, getLocalChains, setLocalTxHistory, sign, timeIn,
+} from '@/libs/data'
+import chainAPI from '@/libs/fetch'
+import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+
+export default {
+  name: 'WithdrawCommissionDialogue',
+  components: {
+    BModal,
+    BRow,
+    BCol,
+    BForm,
+    BInputGroup,
+    BInputGroupPrepend,
+    BFormInput,
+    BAvatar,
+    BFormGroup,
+    BFormSelect,
+    BFormSelectOption,
+    BFormRadioGroup,
+    BFormRadio,
+
+    ValidationProvider,
+    ValidationObserver,
+    // eslint-disable-next-line vue/no-unused-components
+    ToastificationContent,
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+    validatorAddress: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      chainId: '',
+      account: [],
+      selectedChain: '',
+      balance: [],
+      delegations: [],
+      memo: '',
+      fee: 800,
+      feeDenom: '',
+      wallet: 'keplr',
+      error: null,
+      sequence: 1,
+      accountNumber: 0,
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    feeDenoms() {
+      return this.balance.filter(item => !item.denom.startsWith('ibc'))
+    },
+  },
+  created() {
+    // console.log('address: ', this.address)
+  },
+  methods: {
+    computeAccount() {
+      const accounts = getLocalAccounts()
+      const chains = getLocalChains()
+      const values = Object.values(accounts)
+      for (let i = 0; i < values.length; i += 1) {
+        const addr = values[i].address.find(x => x.addr === this.address)
+        if (addr) {
+          this.selectedChain = chains[addr.chain]
+          return addr
+        }
+      }
+      this.error = 'You are not the owner of this validator'
+      return null
+    },
+    loadBalance() {
+      this.account = this.computeAccount()
+      if (this.account && this.account.length > 0) this.address = this.account[0].addr
+      if (this.address) {
+        chainAPI.getBankBalance(this.selectedChain.api, this.address).then(res => {
+          if (res && res.length > 0) {
+            this.balance = res
+            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
+            if (token) this.feeDenom = token.denom
+          }
+        })
+        this.$http.getLatestBlock(this.selectedChain).then(ret => {
+          this.chainId = ret.block.header.chain_id
+          const notSynced = timeIn(ret.block.header.time, 10, 'm')
+          if (notSynced) {
+            this.error = 'Client is not synced or blockchain is halted'
+          }
+        })
+        this.$http.getAuthAccount(this.address, this.selectedChain).then(ret => {
+          if (ret.value.base_vesting_account) {
+            this.accountNumber = ret.value.base_vesting_account.base_account.account_number
+            this.sequence = ret.value.base_vesting_account.base_account.sequence
+            if (!this.sequence) this.sequence = 0
+          } else {
+            this.accountNumber = ret.value.account_number
+            this.sequence = ret.value.sequence ? ret.value.sequence : 0
+          }
+        })
+      }
+      this.$http.getStakingDelegations(this.address).then(res => {
+        this.delegations = res.delegation_responses
+      })
+    },
+    handleOk(bvModalEvt) {
+      // console.log('send')
+      // Prevent modal from closing
+      bvModalEvt.preventDefault()
+      // Trigger submit handler
+      // this.handleSubmit()
+      this.sendTx().then(ret => {
+        // console.log(ret)
+        this.error = ret
+      })
+    },
+    resetModal() {
+      this.feeDenom = ''
+      this.error = null
+    },
+    format(v) {
+      return formatToken(v)
+    },
+    async sendTx() {
+      const txMsgs = [
+        {
+          typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+          value: {
+            delegatorAddress: this.address,
+            validatorAddress: this.validatorAddress,
+          },
+        }, {
+          typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission',
+          value: {
+            validatorAddress: this.validatorAddress,
+          },
+        },
+      ]
+      // this.delegations.forEach(i => {
+      //   if ()
+      //   txMsgs.push({
+      //     typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+      //     value: {
+      //       delegatorAddress: this.address,
+      //       validatorAddress: i.delegation.validator_address,
+      //     },
+      //   })
+      // })
+
+      if (txMsgs.length === 0) {
+        this.error = 'No delegation found'
+        return ''
+      }
+      if (!this.accountNumber) {
+        this.error = 'Account number should not be empty!'
+        return ''
+      }
+
+      const txFee = {
+        amount: [
+          {
+            amount: this.fee,
+            denom: this.feeDenom,
+          },
+        ],
+        gas: '200000',
+      }
+
+      const signerData = {
+        accountNumber: this.accountNumber,
+        sequence: this.sequence,
+        chainId: this.chainId,
+      }
+
+      sign(
+        this.wallet,
+        this.chainId,
+        this.address,
+        txMsgs,
+        txFee,
+        this.memo,
+        signerData,
+      ).then(bodyBytes => {
+        this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
+          setLocalTxHistory({ op: 'withdraw', hash: res.tx_response.txhash, time: new Date() })
+          this.$bvModal.hide('withdraw-commission-window')
+          this.$toast({
+            component: ToastificationContent,
+            props: {
+              title: 'Transaction sent!',
+              icon: 'EditIcon',
+              variant: 'success',
+            },
+          })
+        }).catch(e => {
+          this.error = e
+        })
+      }).catch(e => {
+        this.error = e
+      })
+      // Send tokens
+      // return client.sendTokens(this.address, this.recipient, sendCoins, this.memo)
+      return ''
+    },
+  },
+}
+</script>
diff --git a/src/views/OperationWithdrawComponent.vue b/src/views/OperationWithdrawComponent.vue
index cabebec8..83fc8b67 100644
--- a/src/views/OperationWithdrawComponent.vue
+++ b/src/views/OperationWithdrawComponent.vue
@@ -7,6 +7,8 @@
       title="Withdraw Rewards"
       hide-header-close
       scrollable
+
+      :ok-disabled="!address"
       @hidden="resetModal"
       @ok="handleOk"
       @show="loadBalance"
diff --git a/src/views/StakingRewardComponent.vue b/src/views/StakingRewardComponent.vue
index cb27face..ad085254 100644
--- a/src/views/StakingRewardComponent.vue
+++ b/src/views/StakingRewardComponent.vue
@@ -6,13 +6,17 @@
     <b-card-header>
       <b-card-title>Outstanding Rewards</b-card-title>
       <feather-icon
+        v-b-modal.withdraw-commission-window
         icon="MoreVerticalIcon"
         size="18"
         class="cursor-pointer"
       />
     </b-card-header>
 
-    <b-card-body>
+    <b-card-body
+      class="overflow-auto"
+      style="max-height:220px;"
+    >
       <div
         v-for="d in data.self_bond_rewards"
         :key="d.amount"
@@ -71,6 +75,10 @@
         </small>
       </div>
     </b-card-body>
+    <operation-withdraw-commission-component
+      :validator-address="validator"
+      :address="address"
+    />
   </b-card>
 </template>
 
@@ -78,6 +86,7 @@
 import {
   BCard, BCardHeader, BCardTitle, BCardBody, BMediaBody, BMedia, BMediaAside, BAvatar,
 } from 'bootstrap-vue'
+import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
 
 export default {
   components: {
@@ -89,57 +98,24 @@ export default {
     BMedia,
     BMediaAside,
     BAvatar,
+    OperationWithdrawCommissionComponent,
   },
   props: {
     data: {
       type: Object,
       required: true,
     },
+    validator: {
+      type: String,
+      required: true,
+    },
+    address: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
-      transactionData: [
-        {
-          mode: 'Wallet',
-          types: 'Starbucks',
-          avatar: 'PocketIcon',
-          avatarVariant: 'light-primary',
-          payment: '-$74',
-          deduction: true,
-        },
-        {
-          mode: 'Bank Transfer',
-          types: 'Add Money',
-          avatar: 'CheckIcon',
-          avatarVariant: 'light-success',
-          payment: '+$480',
-          deduction: false,
-        },
-        {
-          mode: 'Paypal',
-          types: 'Add Money',
-          avatar: 'DollarSignIcon',
-          avatarVariant: 'light-danger',
-          payment: '+$480',
-          deduction: false,
-        },
-        {
-          mode: 'Mastercard',
-          types: 'Ordered Food',
-          avatar: 'CreditCardIcon',
-          avatarVariant: 'light-warning',
-          payment: '-$23',
-          deduction: true,
-        },
-        {
-          mode: 'Transfer',
-          types: 'Refund',
-          avatar: 'TrendingUpIcon',
-          avatarVariant: 'light-info',
-          payment: '+$98',
-          deduction: false,
-        },
-      ],
     }
   },
   methods: {
diff --git a/src/views/StakingValidator.vue b/src/views/StakingValidator.vue
index 4b028589..d1c53f28 100644
--- a/src/views/StakingValidator.vue
+++ b/src/views/StakingValidator.vue
@@ -227,7 +227,11 @@
           lg="4"
           md="12"
         >
-          <staking-reward-component :data="distribution" />
+          <staking-reward-component
+            :data="distribution"
+            :validator="validator.operator_address"
+            :address="accountAddress"
+          />
         </b-col>
         <b-col
           lg="4"