redelegate

src/views/WalletAccountDetail.vue

@@ -128,6 +128,7 @@
             variant="primary"
             size="sm"
             class="mr-25"
+            @click="setOperationModalType('Delegate')"
           >
             <feather-icon
               icon="LogInIcon"
@@ -186,6 +187,15 @@
               >
                 <feather-icon icon="ShuffleIcon" />
               </b-button>
+              <b-button
+                v-b-modal.operation-modal
+                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+                v-b-tooltip.hover.top="'Redelegate'"
+                variant="outline-primary"
+                @click="selectValue(data.value,'Redelegate')"
+              >
+                <feather-icon icon="ShuffleIcon" />
+              </b-button>
               <b-button
                 v-b-modal.unbond-window
                 v-ripple.400="'rgba(113, 102, 240, 0.15)'"
@@ -365,9 +375,9 @@
       :validator-address.sync="selectedValidator"
     />
     <operation-modal
-      type="Delegate"
+      :type="operationModalType"
       :address="address"
-      :validator-address.sync="selectedValidator"
+      :validator-address="selectedValidator"
     />
   </div>
 </template>
@@ -452,6 +462,7 @@ export default {
       unbonding: [],
       quotes: {},
       transactions: [],
+      operationModalType: '',
     }
   },
   computed: {
@@ -638,8 +649,12 @@ export default {
         this.transactions = res
       })
     },
-    selectValue(v) {
+    selectValue(v, type) {
       this.selectedValidator = v
+      this.setOperationModalType(type)
+    },
+    setOperationModalType(type) {
+      this.operationModalType = type
     },
     formatHash: abbrAddress,
     formatDenom(v) {

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

@@ -210,13 +210,20 @@ export default {
     },
   },
   mounted() {
-    console.log('mounted----------->')
     this.loadBalance()
   },
   methods: {
-    printDenom() {
-      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
+    loadBalance() {
+      this.account = this.computeAccount()
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getValidatorUnbondedList().then(v => {
+        this.unbundValidators = v
+      })
+      this.onChange()
     },
+
     onChange() {
       if (this.selectedAddress) {
         this.$http.getBankBalances(this.selectedAddress).then(res => {
@@ -234,7 +241,8 @@ export default {
             })
           }
         })
-        console.log(this.$parent)
+        console.log('onChange----------->')
+        // TODO: this.$emit()
         // this.$parent.getAuthAccount(this.selectedAddress)
       }
     },
@@ -254,17 +262,10 @@ export default {
       this.selectedValidator = this.validatorAddress
       return array
     },
-    loadBalance() {
-      this.account = this.computeAccount()
-      // if (this.account && this.account.length > 0) this.selectedAddress
-      this.$http.getValidatorList().then(v => {
-        this.validators = v
-      })
-      this.$http.getValidatorUnbondedList().then(v => {
-        this.unbundValidators = v
-      })
-      this.onChange()
+    printDenom() {
+      return formatTokenDenom(this.IBCDenom[this.token] || this.token)
     },
+
     format(v) {
       return formatToken(v, this.IBCDenom)
     },

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

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="Delegator"
+          label-for="Account"
+        >
+          <validation-provider
+            #default="{ errors }"
+            rules="required"
+            name="Delegator"
+          >
+            <b-form-input
+              v-model="address"
+              readonly
+            />
+            <small class="text-danger">{{ errors[0] }}</small>
+          </validation-provider>
+        </b-form-group>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-form-group
+          label="From 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="To Validator"
+          label-for="validator"
+        >
+          <v-select
+            v-model="toValidator"
+            :options="valOptions"
+            :reduce="val => val.value"
+            placeholder="Select a validator"
+          />
+        </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 {
+      selectedAddress: this.address,
+      availableAddress: [],
+      unbundValidators: [],
+      validators: [],
+      toValidator: null,
+      token: '',
+      amount: null,
+      chainId: '',
+      selectedChain: '',
+      balance: [],
+      delegations: [],
+      memo: '',
+      feeDenom: '',
+      error: null,
+      sequence: 1,
+      accountNumber: 0,
+      account: [],
+
+      required,
+      password,
+      email,
+      min,
+      integer,
+      url,
+      alpha,
+      between,
+      digits,
+      length,
+      alphaDash,
+    }
+  },
+  computed: {
+    valOptions() {
+      const vals = this.validators.map(x => ({ value: x.operator_address, label: `${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      const unbunded = this.unbundValidators.map(x => ({ value: x.operator_address, label: `* ${x.description.moniker} (${Number(x.commission.rate) * 100}%)` }))
+      return vals.concat(unbunded)
+    },
+    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.MsgBeginRedelegate',
+        value: {
+          delegatorAddress: this.address,
+          validatorSrcAddress: this.validatorAddress,
+          validatorDstAddress: this.toValidator,
+          amount: {
+            amount: getUnitAmount(this.amount, this.token),
+            denom: this.token,
+          },
+        },
+      }]
+    },
+  },
+  mounted() {
+    this.loadBalance()
+  },
+  methods: {
+    printDenom() {
+      return formatTokenDenom(this.token)
+    },
+    loadBalance() {
+      this.$http.getValidatorList().then(v => {
+        this.validators = v
+      })
+      this.$http.getValidatorUnbondedList().then(v => {
+        this.unbundValidators = 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
+        console.log(res)
+        this.delegations.forEach(x => {
+          if (x.delegation.validator_address === this.validatorAddress) {
+            this.token = x.balance.denom
+            this.feeDenom = x.balance.denom
+          }
+        })
+      })
+    },
+
+    format(v) {
+      return formatToken(v)
+    },
+
+  },
+}
+</script>
+<style lang="scss">
+@import '@core/scss/vue/libs/vue-select.scss';
+</style>

src/views/components/OperationModal/index.vue

@@ -41,7 +41,7 @@
             :is="type"
             ref="component"
             :address="address"
-            :validator-address.sync="selectedValidator"
+            :validator-address="selectedValidator"
           />
           <b-row>
             <b-col>
@@ -143,13 +143,14 @@ import {
   required, email, url, between, alpha, integer, password, min, digits, alphaDash, length,
 } from '@validations'
 import {
-  abbrAddress, extractAccountNumberAndSequence, getLocalAccounts, setLocalTxHistory, sign, timeIn,
+  extractAccountNumberAndSequence, setLocalTxHistory, sign, timeIn,
 } from '@/libs/utils'
 import vSelect from 'vue-select'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 
 import WalletInputVue from '../WalletInput.vue'
 import Delegate from './components/Delegate.vue'
+import Redelegate from './components/Redelegate.vue'
 
 export default {
   name: 'DelegateDialogue',
@@ -176,6 +177,7 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
     Delegate,
+    Redelegate,
   },
   directives: {
     Ripple,
@@ -197,26 +199,20 @@ export default {
   data() {
     return {
       selectedAddress: this.address,
-      availableAddress: [],
-      validators: [],
-      unbundValidators: [],
       selectedValidator: null,
       token: '',
-      amount: null,
       chainId: '',
-      selectedChain: '',
       balance: [],
-      delegations: [],
       IBCDenom: {},
-      memo: '',
-      fee: '900',
-      feeDenom: '',
-      wallet: 'ledgerUSB',
       error: null,
       sequence: 1,
       accountNumber: 0,
       advance: false,
+      fee: '900',
+      feeDenom: '',
+      wallet: 'ledgerUSB',
       gas: '200000',
+      memo: '',
 
       required,
       password,
@@ -237,35 +233,8 @@ export default {
       return this.balance.filter(item => !item.denom.startsWith('ibc'))
     },
   },
-  created() {
-    // console.log('address: ', this.address)
-  },
   methods: {
-    computeAccount() {
-      const accounts = getLocalAccounts()
-      const values = accounts ? Object.values(accounts) : []
-      let array = []
-      for (let i = 0; i < values.length; i += 1) {
-        const addrs = values[i].address.filter(x => x.chain === this.$route.params.chain)
-        if (addrs && addrs.length > 0) {
-          array = array.concat(addrs.map(x => ({ value: x.addr, label: values[i].name.concat(' - ', abbrAddress(x.addr)) })))
-          if (!this.selectedAddress) {
-            this.selectedAddress = addrs[0].addr
-          }
-        }
-      }
-      this.selectedValidator = this.validatorAddress
-      return array
-    },
     loadBalance() {
-      this.account = this.computeAccount()
-      // if (this.account && this.account.length > 0) this.selectedAddress
-      this.$http.getValidatorList().then(v => {
-        this.validators = v
-      })
-      this.$http.getValidatorUnbondedList().then(v => {
-        this.unbundValidators = v
-      })
       this.$http.getLatestBlock().then(ret => {
         this.chainId = ret.block.header.chain_id
         const notSynced = timeIn(ret.block.header.time, 10, 'm')
@@ -303,11 +272,7 @@ export default {
       })
     },
     handleOk(bvModalEvt) {
-      // console.log('send')
-      // Prevent modal from closing
       bvModalEvt.preventDefault()
-      // Trigger submit handler
-      // this.handleSubmit()
       this.$refs.simpleRules.validate().then(ok => {
         if (ok) {
           this.sendTx().then(ret => {
@@ -365,7 +330,7 @@ export default {
             hash: res.tx_response.txhash,
             time: new Date(),
           })
-          this.$bvModal.hide('delegate-window')
+          this.$bvModal.hide('operation-modal')
           this.$toast({
             component: ToastificationContent,
             props: {