fix

src/views/WalletAccountDetail.vue

@@ -133,7 +133,7 @@
             <feather-icon
               icon="LogInIcon"
               class="d-md-none"
-            /><small class="d-none d-md-block">Delegate-new</small>
+            /><small class="d-none d-md-block">Delegate1</small>
           </b-button>
           <b-button
             v-b-modal.delegate-window
@@ -157,6 +157,18 @@
               class="d-md-none"
             /><small class="d-none d-md-block"> Withdraw Rewards</small>
           </b-button>
+          <b-button
+            v-if="delegations"
+            v-b-modal.operation-modal
+            variant="primary"
+            size="sm"
+            @click="setOperationModalType('Withdraw')"
+          >
+            <feather-icon
+              icon="ShareIcon"
+              class="d-md-none"
+            /><small class="d-none d-md-block"> Withdraw Rewards1</small>
+          </b-button>
         </div>
       </b-card-header>
       <b-card-body class="pl-0 pr-0">
@@ -190,7 +202,7 @@
               <b-button
                 v-b-modal.operation-modal
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Redelegate'"
+                v-b-tooltip.hover.top="'Redelegate1'"
                 variant="outline-primary"
                 @click="selectValue(data.value,'Redelegate')"
               >
@@ -205,6 +217,15 @@
               >
                 <feather-icon icon="LogOutIcon" />
               </b-button>
+              <b-button
+                v-b-modal.operation-modal
+                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                v-b-tooltip.hover.top="'Unbond1'"
+                variant="outline-primary"
+                @click="selectValue(data.value,'Unbond')"
+              >
+                <feather-icon icon="LogOutIcon" />
+              </b-button>
             </b-button-group>
           </template>
         </b-table>

src/views/components/OperationModal/components/Delegate.vue

@@ -120,7 +120,7 @@ import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount,
+  abbrAddress, formatToken, formatTokenDenom, getLocalAccounts, getUnitAmount, extractAccountNumberAndSequence,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 
@@ -210,6 +210,10 @@ export default {
     },
   },
   mounted() {
+    this.$emit('update', {
+      modalTitle: 'Delegate Token',
+      historyName: 'delegate',
+    })
     this.loadBalance()
   },
   methods: {
@@ -241,9 +245,13 @@ export default {
             })
           }
         })
-        console.log('onChange----------->')
+        this.$http.getAuthAccount(this.selectedAddress).then(ret => {
-        // TODO: this.$emit()
+          const account = extractAccountNumberAndSequence(ret)
-        // this.$parent.getAuthAccount(this.selectedAddress)
+          this.$emit('update', {
+            accountNumber: account.accountNumber,
+            sequence: account.sequence,
+          })
+        })
       }
     },
     computeAccount() {

src/views/components/OperationModal/components/Redelegate.vue

@@ -118,7 +118,7 @@ import {
 import vSelect from 'vue-select'
 
 export default {
-  name: 'UnbondDialogue',
+  name: 'Redelegate',
   components: {
     BRow,
     BCol,
@@ -142,17 +142,13 @@ export default {
   data() {
     return {
       selectedAddress: this.address,
-      availableAddress: [],
       unbundValidators: [],
       validators: [],
       toValidator: null,
       token: '',
       amount: null,
-      chainId: '',
-      selectedChain: '',
       balance: [],
       delegations: [],
-      memo: '',
       feeDenom: '',
       error: null,
       sequence: 1,
@@ -198,6 +194,10 @@ export default {
     },
   },
   mounted() {
+    this.$emit('update', {
+      modalTitle: 'Redelegate Token',
+      historyName: 'redelegate',
+    })
     this.loadBalance()
   },
   methods: {
@@ -222,7 +222,9 @@ export default {
         this.delegations.forEach(x => {
           if (x.delegation.validator_address === this.validatorAddress) {
             this.token = x.balance.denom
-            this.feeDenom = x.balance.denom
+            this.$emit('update', {
+              feeDenom: x.balance.denom,
+            })
           }
         })
       })

src/views/components/OperationModal/components/Unbond.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Delegator"
+          label-for="Account"
+        >
+          <b-form-input
+            v-model="address"
+            readonly
+          />
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Validator"
+          label-for="validator"
+        >
+          <v-select
+            :value="validatorAddress"
+            :options="valOptions"
+            :reduce="val => val.value"
+            placeholder="Select a validator"
+            :disabled="true"
+          />
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Current Delegation"
+          label-for="Token"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Token"
+          >
+            <v-select
+              v-model="token"
+              :options="tokenOptions"
+              :reduce="token => token.value"
+            />
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Amount"
+          label-for="Amount"
+        >
+          <validation-provider
+            v-slot="{ errors }"
+            rules="required|regex:^([0-9\.]+)$"
+            name="amount"
+          >
+            <b-input-group>
+              <b-form-input
+                id="Amount"
+                v-model="amount"
+                :state="errors.length > 0 ? false:null"
+                placeholder="Input a number"
+                type="number"
+              />
+              <b-input-group-append is-text>
+                {{ printDenom() }}
+              </b-input-group-append>
+            </b-input-group>
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import { ValidationProvider } from 'vee-validate'
+import {
+  BRow, BCol, BInputGroup, BFormInput, BFormGroup, BInputGroupAppend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  formatToken, formatTokenDenom, getUnitAmount,
+} from '@/libs/utils'
+import vSelect from 'vue-select'
+
+export default {
+  name: 'UnbondDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BFormInput,
+    BFormGroup,
+    vSelect,
+    BInputGroupAppend,
+    ValidationProvider,
+
+  },
+  props: {
+    validatorAddress: {
+      type: String,
+      default: null,
+    },
+    address: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      validators: [],
+      selectedValidator: this.validatorAddress,
+      token: '',
+      amount: null,
+      balance: [],
+      delegations: [],
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    valOptions() {
+      return this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+    },
+    tokenOptions() {
+      if (!this.delegations) return []
+      return this.delegations.filter(x => x.delegation.validator_address === this.validatorAddress).map(x => ({ value: x.balance.denom, label: formatToken(x.balance) }))
+    },
+    msg() {
+      return [{
+        typeUrl: '/cosmos.staking.v1beta1.MsgUndelegate',
+        value: {
+          delegatorAddress: this.address,
+          validatorAddress: this.validatorAddress,
+          amount: {
+            amount: getUnitAmount(this.amount, this.token),
+            denom: this.token,
+          },
+        },
+      }]
+    },
+  },
+
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Unbond Token',
+      historyName: 'unbond',
+    })
+    this.loadBalance()
+  },
+
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
+    loadBalance() {
+      if (this.address) {
+        this.$http.getValidatorList().then(v => {
+          this.validators = v
+        })
+      }
+      this.$http.getBankBalances(this.address).then(res => {
+        if (res && res.length > 0) {
+          this.balance = res.reverse()
+        }
+      })
+      this.$http.getStakingDelegations(this.address).then(res => {
+        this.delegations = res.delegation_responses
+        this.delegations.forEach(x => {
+          if (x.delegation.validator_address === this.validatorAddress) {
+            this.token = x.balance.denom
+            this.$emit('update', {
+              feeDenom: x.balance.denom,
+            })
+          }
+        })
+      })
+    },
+
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>

src/views/components/OperationModal/components/Withdraw.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Sender"
+          label-for="Account"
+        >
+          <b-input-group class="mb-25">
+            <b-input-group-prepend is-text>
+              <b-avatar
+                :src="account?account.logo:''"
+                size="18"
+                variant="light-primary"
+                rounded
+              />
+            </b-input-group-prepend>
+            <b-form-input
+              :value="account?account.addr:address"
+              readonly
+            />
+          </b-input-group>
+        </b-form-group>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import {
+  BRow, BCol, BInputGroup, BFormInput, BAvatar, BFormGroup,
+  BInputGroupPrepend,
+} from 'bootstrap-vue'
+import {
+  required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
+} from '@validations'
+import {
+  getLocalAccounts, getLocalChains,
+} from '@/libs/utils'
+
+export default {
+  name: 'WithdrawDialogue',
+  components: {
+    BRow,
+    BCol,
+    BInputGroup,
+    BInputGroupPrepend,
+    BFormInput,
+    BAvatar,
+    BFormGroup,
+  },
+  props: {
+    address: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      account: [],
+      selectedChain: '',
+      balance: [],
+      delegations: [],
+      feeDenom: '',
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    msg() {
+      const txMsgs = []
+      this.delegations.forEach(i => {
+        txMsgs.push({
+          typeUrl: '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward',
+          value: {
+            delegatorAddress: this.address,
+            validatorAddress: i.delegation.validator_address,
+          },
+        })
+      })
+      return txMsgs
+    },
+  },
+  mounted() {
+    this.$emit('update', {
+      modalTitle: 'Withdraw Rewards',
+      historyName: 'withdraw',
+    })
+    this.loadBalance()
+  },
+
+  methods: {
+    loadBalance() {
+      this.account = this.computeAccount()
+      if (this.account && this.account.length > 0) this.address = this.account[0].addr
+      if (this.address) {
+        this.$http.getBankBalances(this.address).then(res => {
+          if (res && res.length > 0) {
+            this.balance = res.reverse()
+            const token = this.balance.find(i => !i.denom.startsWith('ibc'))
+            if (token) this.feeDenom = token.denom
+          }
+        })
+      }
+      this.$http.getStakingDelegations(this.address).then(res => {
+        this.delegations = res.delegation_responses
+      })
+    },
+    computeAccount() {
+      const accounts = getLocalAccounts()
+      const chains = getLocalChains()
+      if (accounts) {
+        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]
+            this.$emit('update', {
+              selectedChain: chains[addr.chain],
+            })
+            return addr
+          }
+        }
+      }
+      return null
+    },
+
+  },
+}
+</script>

src/views/components/OperationModal/index.vue

@@ -3,7 +3,7 @@
     id="operation-modal"
     centered
     size="md"
-    title="Delegate Token"
+    :title="modalTitle"
     ok-title="Send"
     hide-header-close
     scrollable
@@ -41,7 +41,8 @@
             :is="type"
             ref="component"
             :address="address"
-            :validator-address="selectedValidator"
+            :validator-address="validatorAddress"
+            @update="componentUpdate"
           />
           <b-row>
             <b-col>
@@ -151,6 +152,8 @@ import ToastificationContent from '@core/components/toastification/Toastificatio
 import WalletInputVue from '../WalletInput.vue'
 import Delegate from './components/Delegate.vue'
 import Redelegate from './components/Redelegate.vue'
+import Withdraw from './components/Withdraw.vue'
+import Unbond from './components/Unbond.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -178,6 +181,8 @@ export default {
     ToastificationContent,
     Delegate,
     Redelegate,
+    Withdraw,
+    Unbond,
   },
   directives: {
     Ripple,
@@ -198,8 +203,11 @@ export default {
   },
   data() {
     return {
+      modalTitle: '',
+      historyName: '',
       selectedAddress: this.address,
       selectedValidator: null,
+      selectedChain: null,
       token: '',
       chainId: '',
       balance: [],
@@ -244,7 +252,11 @@ export default {
           this.error = null
         }
       })
-      this.getAuthAccount()
+      this.$http.getAuthAccount(this.selectedAddress).then(ret => {
+        const account = extractAccountNumberAndSequence(ret)
+        this.accountNumber = account.accountNumber
+        this.sequence = account.sequence
+      })
       this.$http.getBankBalances(this.selectedAddress).then(res => {
         if (res && res.length > 0) {
           this.balance = res.reverse()
@@ -263,12 +275,10 @@ export default {
       this.fee = this.$store.state.chains.selected?.min_tx_fee || '1000'
       this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || ''
     },
-    getAuthAccount(address = this.selectedAddress) {
+    componentUpdate(obj) {
-      this.$http.getAuthAccount(address).then(ret => {
+      console.log(obj)
-        const account = extractAccountNumberAndSequence(ret)
+      Object.keys(obj).forEach(key => {
-        console.log(account)
+        this[key] = obj[key]
-        this.accountNumber = account.accountNumber
-        this.sequence = account.sequence
       })
     },
     handleOk(bvModalEvt) {
@@ -288,7 +298,7 @@ export default {
     },
     async sendTx() {
       const txMsgs = this.$refs.component.msg
-
+      console.log(txMsgs)
       if (txMsgs.length === 0) {
         this.error = 'No delegation found'
         return ''
@@ -323,10 +333,10 @@ export default {
         this.memo,
         signerData,
       ).then(bodyBytes => {
-        this.$http.broadcastTx(bodyBytes).then(res => {
+        this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
           setLocalTxHistory({
             chain: this.$store.state.chains.selected,
-            op: 'delegate',
+            op: this.historyName,
             hash: res.tx_response.txhash,
             time: new Date(),
           })