From 0e062df351d9b6401930ff0261ff32efe29f4156 Mon Sep 17 00:00:00 2001
From: donne <503124742@qq.com>
Date: Mon, 4 Apr 2022 20:22:59 +0800
Subject: [PATCH] replace all operation modal

---
 src/@core/layouts/components/Coffee.vue       |  5 ---
 src/views/Governance.vue                      | 12 ------
 src/views/GovernanceProposalView.vue          | 29 +++++++------
 src/views/Staking.vue                         | 13 +++---
 src/views/StakingRewardComponent.vue          | 11 ++---
 src/views/StakingValidator.vue                | 11 +++--
 src/views/WalletAccountDetail.vue             | 27 ------------
 src/views/WalletAccounts.vue                  | 24 +++++------
 src/views/WalletDelegations.vue               | 42 +++++++------------
 .../OperationModal/TransactionResult.vue      |  1 +
 .../OperationModal/components/Delegate.vue    |  2 +-
 src/views/components/OperationModal/index.vue |  6 ++-
 12 files changed, 67 insertions(+), 116 deletions(-)

diff --git a/src/@core/layouts/components/Coffee.vue b/src/@core/layouts/components/Coffee.vue
index c03800f5..09835bb9 100644
--- a/src/@core/layouts/components/Coffee.vue
+++ b/src/@core/layouts/components/Coffee.vue
@@ -21,9 +21,6 @@
         </b-input-group>
       </b-col>
     </b-row>
-    <operation-transfer-component
-      :recipient-address.sync="selectedAddress"
-    />
   </div>
 </template>
 
@@ -36,7 +33,6 @@ import Ripple from 'vue-ripple-directive'
 import {
   addressEnCode, addressDecode,
 } from '@/libs/utils'
-import OperationTransferComponent from '@/views/OperationTransferComponent.vue'
 
 export default {
   name: 'AppFooter',
@@ -47,7 +43,6 @@ export default {
     BFormInput,
     BInputGroupPrepend,
     BInputGroup,
-    OperationTransferComponent,
   },
   directives: {
     Ripple,
diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index cc58556a..945b0c59 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -177,14 +177,6 @@
         </b-card>
       </b-col>
     </b-row>
-    <operation-vote-component
-      :proposal-id="selectedProposalId"
-      :title="selectedTitle"
-    />
-    <operation-gov-deposit-component
-      :proposal-id="selectedProposalId"
-      :title="selectedTitle"
-    />
     <operation-modal
       :type="operationModalType"
       :proposal-id="selectedProposalId"
@@ -202,8 +194,6 @@ import { Proposal } from '@/libs/data'
 import { percent, tokenFormatter } from '@/libs/utils'
 import dayjs from 'dayjs'
 import OperationModal from '@/views/components/OperationModal/index.vue'
-import OperationVoteComponent from './OperationVoteComponent.vue'
-import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
 
 export default {
   components: {
@@ -218,8 +208,6 @@ export default {
     BCardBody,
     BRow,
     BCol,
-    OperationVoteComponent,
-    OperationGovDepositComponent,
     OperationModal,
   },
   directives: {
diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 47083020..bc66b81e 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -109,10 +109,11 @@
           </b-button>
         </router-link>
         <b-button
-          v-b-modal.vote-window
+          v-b-modal.operation-modal
           :disabled="proposal.status!=2"
           variant="primary"
           class="btn float-right mg-2"
+          @click="openModal('Vote')"
         >
           {{ $t('btn_vote') }}
         </b-button>
@@ -232,30 +233,29 @@
           </b-button>
         </router-link>
         <b-button
-          v-b-modal.deposit-window
+          v-b-modal.operation-modal
           :disabled="proposal.status!=1"
           variant="primary"
           class="btn float-right mg-2"
+          @click="openModal('GovDeposit')"
         >
           {{ $t('btn_deposit') }}
         </b-button>
         <b-button
-          v-b-modal.vote-window
+          v-b-modal.operation-modal
           :disabled="proposal.status!=2"
           variant="primary"
           class="btn float-right mg-2 mr-1"
+          @click="openModal('Vote')"
         >
           {{ $t('btn_vote') }}
         </b-button>
       </b-card-footer>
     </b-card>
-    <operation-vote-component
+    <operation-modal
+      :type="operationModalType"
       :proposal-id="Number(proposal.id)"
-      :title="proposal.title"
-    />
-    <operation-gov-deposit-component
-      :proposal-id="Number(proposal.id)"
-      :title="proposal.title"
+      :proposal-title="proposal.title"
     />
   </section>
 </template>
@@ -273,9 +273,9 @@ import {
 } from '@/libs/utils'
 import { Proposal, Proposer } from '@/libs/data'
 import dayjs from 'dayjs'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
-import OperationVoteComponent from './OperationVoteComponent.vue'
-import OperationGovDepositComponent from './OperationGovDepositComponent.vue'
+
 // import { formatToken } from '@/libs/data/data'
 
 export default {
@@ -295,9 +295,8 @@ export default {
     BTooltip,
     BBadge,
     ObjectFieldComponent,
-    OperationVoteComponent,
-    OperationGovDepositComponent,
     FlipCountdown,
+    OperationModal,
   },
   data() {
     return {
@@ -307,6 +306,7 @@ export default {
       proposer: new Proposer(),
       deposits: [],
       votes: [],
+      operationModalType: '',
       votes_fields: [
         {
           key: 'voter',
@@ -411,6 +411,9 @@ export default {
     formatAddress(v) {
       return getStakingValidatorByAccount(this.$http.config.chain_name, v)
     },
+    openModal(type) {
+      this.operationModalType = type
+    },
   },
 }
 </script>
diff --git a/src/views/Staking.vue b/src/views/Staking.vue
index 257b899f..48da7904 100644
--- a/src/views/Staking.vue
+++ b/src/views/Staking.vue
@@ -78,7 +78,7 @@
         </template>
         <template #cell(operation)="data">
           <b-button
-            v-b-modal.delegate-window
+            v-b-modal.operation-modal
             :name="data.item.operator_address"
             variant="primary"
             size="sm"
@@ -186,7 +186,7 @@
           </template>
           <template #cell(operation)="data">
             <b-button
-              v-b-modal.delegate-window
+              v-b-modal.operation-modal
               :name="data.item.operator_address"
               variant="primary"
               size="sm"
@@ -210,7 +210,10 @@
         </small>
       </template>
     </b-card>
-    <operation-delegate-component :validator-address="validator_address" />
+    <operation-modal
+      type="Delegate"
+      :validator-address="validator_address"
+    />
   </div>
 </template>
 
@@ -222,9 +225,9 @@ import {
   percent, StakingParameters, formatToken,
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 // import { toHex } from '@cosmjs/encoding'
 // import fetch from 'node-fetch'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
 
 export default {
   components: {
@@ -237,9 +240,9 @@ export default {
     BCardTitle,
     BCardBody,
     BButton,
-    OperationDelegateComponent,
     BFormRadioGroup,
     BFormGroup,
+    OperationModal,
   },
   directives: {
     'b-tooltip': VBTooltip,
diff --git a/src/views/StakingRewardComponent.vue b/src/views/StakingRewardComponent.vue
index 0d79d94f..e90bba72 100644
--- a/src/views/StakingRewardComponent.vue
+++ b/src/views/StakingRewardComponent.vue
@@ -6,7 +6,7 @@
     <b-card-header>
       <b-card-title>Outstanding Rewards</b-card-title>
       <feather-icon
-        v-b-modal.operation-modal
+        v-b-modal.WithdrawCommission
         icon="MoreVerticalIcon"
         size="18"
         class="cursor-pointer"
@@ -76,7 +76,7 @@
     </b-card-body>
     <b-card-body class="pt-0">
       <b-button
-        v-b-modal.operation-modal
+        v-b-modal.WithdrawCommission
         block
         size="sm"
         variant="primary"
@@ -84,12 +84,9 @@
         Withdraw Commission
       </b-button>
     </b-card-body>
-    <operation-withdraw-commission-component
-      :validator-address="validator"
-      :address="address"
-    />
     <operation-modal
       type="WithdrawCommission"
+      modal-id="WithdrawCommission"
       :address="address"
       :validator-address="validator"
     />
@@ -104,7 +101,6 @@ import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
 import { formatToken, numberWithCommas } from '@/libs/utils'
 import OperationModal from '@/views/components/OperationModal/index.vue'
-import OperationWithdrawCommissionComponent from './OperationWithdrawCommissionComponent.vue'
 
 export default {
   components: {
@@ -117,7 +113,6 @@ export default {
     BMedia,
     BMediaAside,
     BAvatar,
-    OperationWithdrawCommissionComponent,
     OperationModal,
   },
   props: {
diff --git a/src/views/StakingValidator.vue b/src/views/StakingValidator.vue
index db29c7f7..fe08d8c6 100644
--- a/src/views/StakingValidator.vue
+++ b/src/views/StakingValidator.vue
@@ -25,7 +25,7 @@
               </div>
               <div class="d-flex flex-wrap">
                 <b-button
-                  v-b-modal.delegate-window
+                  v-b-modal.operation-modal
                   variant="primary"
                   class="mr-25 mb-25"
                 >
@@ -268,7 +268,10 @@
         </b-col>
       </b-row>
     </template>
-    <operation-delegate-component :validator-address="validator.operator_address" />
+    <operation-modal
+      type="Delegate"
+      :validator-address="validator.operator_address"
+    />
   </div>
 </template>
 
@@ -281,10 +284,10 @@ import {
   percent, formatToken, StakingParameters, Validator, operatorAddressToAccount, consensusPubkeyToHexAddress, toDay, abbrMessage, abbrAddress,
 } from '@/libs/utils'
 import { keybase } from '@/libs/fetch'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import StakingAddressComponent from './StakingAddressComponent.vue'
 import StakingCommissionComponent from './StakingCommissionComponent.vue'
 import StakingRewardComponent from './StakingRewardComponent.vue'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
 
 export default {
   components: {
@@ -300,7 +303,7 @@ export default {
     StakingAddressComponent,
     StakingCommissionComponent,
     StakingRewardComponent,
-    OperationDelegateComponent,
+    OperationModal,
   },
   directives: {
     'b-modal': VBModal,
diff --git a/src/views/WalletAccountDetail.vue b/src/views/WalletAccountDetail.vue
index dfef61fc..dd39c2af 100644
--- a/src/views/WalletAccountDetail.vue
+++ b/src/views/WalletAccountDetail.vue
@@ -342,21 +342,6 @@
       <vue-qr :text="address" />
     </b-popover>
 
-    <operation-transfer-component :address="address" />
-    <operation-transfer-2-component :address="address" />
-    <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"
-    />
     <operation-modal
       :type="operationModalType"
       :address="address"
@@ -384,12 +369,6 @@ import { sha256 } from '@cosmjs/crypto'
 import { toHex } from '@cosmjs/encoding'
 import OperationModal from '@/views/components/OperationModal/index.vue'
 import ObjectFieldComponent from './ObjectFieldComponent.vue'
-import OperationTransferComponent from './OperationTransferComponent.vue'
-import OperationWithdrawComponent from './OperationWithdrawComponent.vue'
-import OperationUnbondComponent from './OperationUnbondComponent.vue'
-import OperationDelegateComponent from './OperationDelegateComponent.vue'
-import OperationRedelegateComponent from './OperationRedelegateComponent.vue'
-import OperationTransfer2Component from './OperationTransfer2Component.vue'
 import ChartComponentDoughnut from './ChartComponentDoughnut.vue'
 
 export default {
@@ -415,12 +394,6 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
     ObjectFieldComponent,
-    OperationTransferComponent,
-    OperationWithdrawComponent,
-    OperationDelegateComponent,
-    OperationRedelegateComponent,
-    OperationUnbondComponent,
-    OperationTransfer2Component,
     ChartComponentDoughnut,
     OperationModal,
   },
diff --git a/src/views/WalletAccounts.vue b/src/views/WalletAccounts.vue
index c3977ada..8bd37b63 100644
--- a/src/views/WalletAccounts.vue
+++ b/src/views/WalletAccounts.vue
@@ -153,15 +153,15 @@
                   />
                   <b-dropdown-item
                     v-if="balances[acc.addr]"
-                    v-b-modal.transfer-window
-                    @click="transfer(acc.addr)"
+                    v-b-modal.operation-modal
+                    @click="transfer('Transfer',acc.addr)"
                   >
                     <feather-icon icon="SendIcon" /> Transfer
                   </b-dropdown-item>
                   <b-dropdown-item
                     v-if="balances[acc.addr]"
-                    v-b-modal.ibc-transfer-window
-                    @click="transfer(acc.addr)"
+                    v-b-modal.operation-modal
+                    @click="transfer('IBCTransfer',acc.addr)"
                   >
                     <feather-icon icon="SendIcon" /> IBC Transfer
                   </b-dropdown-item>
@@ -265,10 +265,10 @@
         Connect Wallet
       </b-card>
     </router-link>
-    <operation-transfer-component
-      :address.sync="selectedAddress"
+    <operation-modal
+      :type="operationModalType"
+      :address="selectedAddress"
     />
-    <operation-transfer-2-component :address="selectedAddress" />
   </div>
 </template>
 
@@ -287,8 +287,7 @@ import {
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
 import AppCollapse from '@core/components/app-collapse/AppCollapse.vue'
 import AppCollapseItem from '@core/components/app-collapse/AppCollapseItem.vue'
-import OperationTransferComponent from './OperationTransferComponent.vue'
-import OperationTransfer2Component from './OperationTransfer2Component.vue'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 import ChartComponentDoughnut from './ChartComponentDoughnut.vue'
 import EchartScatter from './components/charts/EchartScatter.vue'
 
@@ -309,14 +308,13 @@ export default {
     // eslint-disable-next-line vue/no-unused-components
     VBTooltip,
     FeatherIcon,
-    OperationTransferComponent,
     // eslint-disable-next-line vue/no-unused-components
     ToastificationContent,
-    OperationTransfer2Component,
     ChartComponentDoughnut,
     AppCollapse,
     AppCollapseItem,
     EchartScatter,
+    OperationModal,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -335,6 +333,7 @@ export default {
       delegations: {},
       ibcDenom: {},
       quotes: {},
+      operationModalType: '',
       options: {
         maintainAspectRatio: false,
         legend: {
@@ -533,7 +532,8 @@ export default {
       this.currency2 = c
       this.currency = getUserCurrencySign()
     },
-    transfer(addr) {
+    transfer(type, addr) {
+      this.operationModalType = type
       this.selectedAddress = addr
     },
     completeAdd() {
diff --git a/src/views/WalletDelegations.vue b/src/views/WalletDelegations.vue
index b2911619..f446ad33 100644
--- a/src/views/WalletDelegations.vue
+++ b/src/views/WalletDelegations.vue
@@ -42,29 +42,29 @@
             size="sm"
           >
             <b-button
-              v-b-modal.delegate-window
+              v-b-modal.operation-modal
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Delegate'"
               variant="outline-primary"
-              @click="selectValue(data.item)"
+              @click="selectValue('Delegate',data.item)"
             >
               <feather-icon icon="LogInIcon" />
             </b-button>
             <b-button
-              v-b-modal.redelegate-window
+              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.item)"
+              @click="selectValue('Redelegate',data.item)"
             >
               <feather-icon icon="ShuffleIcon" />
             </b-button>
             <b-button
-              v-b-modal.unbond-window
+              v-b-modal.operation-modal
               v-ripple.400="'rgba(113, 102, 240, 0.15)'"
               v-b-tooltip.hover.top="'Unbond'"
               variant="outline-primary"
-              @click="selectValue(data.item)"
+              @click="selectValue('Unbond',data.item)"
             >
               <feather-icon icon="LogOutIcon" />
             </b-button>
@@ -74,18 +74,10 @@
     </b-card>
 
     <!--- not completed--->
-    <operation-withdraw-component :address="address" />
-    <operation-unbond-component
+    <operation-modal
+      :type="operationModalType"
       :address="address"
-      :validator-address.sync="selectedValidator"
-    />
-    <operation-delegate-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
-    />
-    <operation-redelegate-component
-      :address="address"
-      :validator-address.sync="selectedValidator"
+      :validator-address="selectedValidator"
     />
   </div>
 </template>
@@ -99,11 +91,7 @@ import {
   formatToken, getCachedValidators, getLocalAccounts, getLocalChains, tokenFormatter,
 } from '@/libs/utils'
 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'
+import OperationModal from '@/views/components/OperationModal/index.vue'
 
 export default {
   components: {
@@ -113,11 +101,7 @@ export default {
     BTable,
     BCard,
     FeatherIcon,
-
-    OperationWithdrawComponent,
-    OperationDelegateComponent,
-    OperationRedelegateComponent,
-    OperationUnbondComponent,
+    OperationModal,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -153,6 +137,7 @@ export default {
       accounts: [],
       delegations: [],
       rewards: {},
+      operationModalType: '',
     }
   },
   computed: {
@@ -200,7 +185,8 @@ export default {
     this.init()
   },
   methods: {
-    selectValue(v) {
+    selectValue(type, v) {
+      this.operationModalType = type
       this.address = v.delegator_address
       this.selectedValidator = v.validator.validator
       return v
diff --git a/src/views/components/OperationModal/TransactionResult.vue b/src/views/components/OperationModal/TransactionResult.vue
index b3499815..31fb8266 100644
--- a/src/views/components/OperationModal/TransactionResult.vue
+++ b/src/views/components/OperationModal/TransactionResult.vue
@@ -137,6 +137,7 @@ export default {
           if (res.code === 0) {
             this.succeed = true
             clearInterval(this.timer)
+            window.location.reload()
           } else if (res.code !== 3) { // code 3 is tx unconfirmed(not founded).
             this.error = res.raw_log
             console.log('error:', this.error)
diff --git a/src/views/components/OperationModal/components/Delegate.vue b/src/views/components/OperationModal/components/Delegate.vue
index bc4138c2..f806d552 100644
--- a/src/views/components/OperationModal/components/Delegate.vue
+++ b/src/views/components/OperationModal/components/Delegate.vue
@@ -151,7 +151,7 @@ export default {
       availableAddress: [],
       validators: [],
       unbundValidators: [],
-      selectedValidator: null,
+      selectedValidator: this.validatorAddress,
       token: '',
       amount: null,
       selectedChain: '',
diff --git a/src/views/components/OperationModal/index.vue b/src/views/components/OperationModal/index.vue
index 28805e26..279d860a 100644
--- a/src/views/components/OperationModal/index.vue
+++ b/src/views/components/OperationModal/index.vue
@@ -1,6 +1,6 @@
 <template>
   <b-modal
-    id="operation-modal"
+    :id="modalId"
     centered
     size="md"
     :title="modalTitle"
@@ -216,6 +216,10 @@ export default {
       type: String,
       default: '',
     },
+    modalId: {
+      type: String,
+      default: 'operation-modal',
+    },
     validatorAddress: {
       type: String,
       default: null,