Merge branch 're-implement-operation-modal' of https://github.com/ping-pub/explorer into re-implement-operation-modal

src/libs/fetch.js

@@ -60,7 +60,7 @@ export default class ChainFetch {
     if (conf.chain_name === 'injective') {
       return ChainFetch.fetch('https://tm.injective.network', '/block').then(data => Block.create(commonProcess(data)))
     }
-    return this.get('/blocks/latest', config).then(data => Block.create(data))
+    return this.get(`/blocks/latest?${new Date().getTime()}`, config).then(data => Block.create(data))
   }
 
   async getBlockByHeight(height, config = null) {
@@ -386,6 +386,19 @@ export default class ChainFetch {
     return ChainFetch.fetchCoinMarketCap(`/quote/${symbol}`)
   }
 
+  // Simulate Execution of tx
+  async simulate(tx, config = null) {
+    return this.post('/cosmos/tx/v1beta1/simulate', tx, config).then(res => {
+      if (res.code && res.code !== 0) {
+        throw new Error(res.message)
+      }
+      if (res.tx_response && res.tx_response.code !== 0) {
+        throw new Error(res.tx_response.raw_log)
+      }
+      return res
+    })
+  }
+
   // Tx Submit
   async broadcastTx(bodyBytes, config = null) {
     const txString = toBase64(TxRaw.encode(bodyBytes).finish())

src/views/Governance.vue

@@ -157,40 +157,22 @@
             </router-link>
             <b-button
               v-if="p.status===1"
-              v-b-modal.deposit-window
+              v-b-modal.operation-modal
               variant="primary"
               class="btn float-right mg-2"
               @click="selectProposal('GovDeposit',p.id, p.title)"
             >
               {{ $t('btn_deposit') }}
             </b-button>
-            <b-button
-              v-if="p.status===1"
-              v-b-modal.operation-modal
-              variant="primary"
-              class="btn float-right mg-2"
-              @click="selectProposal('GovDeposit',p.id, p.title)"
-            >
-              {{ $t('btn_deposit') }}1
-            </b-button>
             <b-button
               v-if="p.status===2"
-              v-b-modal.vote-window
+              v-b-modal.operation-modal
               variant="primary"
               class="btn float-right mg-2"
               @click="selectProposal('Vote',p.id, p.title)"
             >
               {{ $t('btn_vote') }}
             </b-button>
-            <b-button
-              v-if="p.status===2"
-              v-b-modal.operation-modal
-              variant="primary"
-              class="btn float-right mg-2"
-              @click="selectProposal('Vote',p.id, p.title)"
-            >
-              {{ $t('btn_vote') }}1
-            </b-button>
           </b-card-footer>
         </b-card>
       </b-col>

src/views/Staking.vue

@@ -246,23 +246,6 @@ export default {
   },
   data() {
     return {
-      keys: [
-        'bitsongvaloper1jxv0u20scum4trha72c7ltfgfqef6nscl86wxa',
-        'akashvaloper1vgstlgtsx4w80gphwgre0fcvc04lcnaelukvll',
-        'certikvaloper1jxv0u20scum4trha72c7ltfgfqef6nsczkvcu7',
-        'cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu',
-        'iva16plp8cmfkjssp222taq6pv6mkm8c5pa9lcktta',
-        'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
-        'kavavaloper1xftqdxvq0xkv2mu8c5y0jrsc578tak4m9u0s44',
-        'kivaloper1jxv0u20scum4trha72c7ltfgfqef6nschqtan9',
-        'osmovaloper1jxv0u20scum4trha72c7ltfgfqef6nscqx0u46',
-        'persistencevaloper1jxv0u20scum4trha72c7ltfgfqef6nsc4zjpnj',
-        'starsvaloper1jxv0u20scum4trha72c7ltfgfqef6nscdghxyx',
-        'digvaloper1jxv0u20scum4trha72c7ltfgfqef6nsc4s577p',
-        'bcnavaloper1jxv0u20scum4trha72c7ltfgfqef6nsc384wxf',
-        'pbvaloper1jxv0u20scum4trha72c7ltfgfqef6nsc5nn6cf',
-        'rizonvaloper1jxv0u20scum4trha72c7ltfgfqef6nsczn2l68',
-      ],
       islive: true,
       validator_address: null,
       mintInflation: 0,
@@ -313,7 +296,7 @@ export default {
   },
   computed: {
     pingVals() {
-      return this.list.filter(x => this.keys.includes(x.operator_address))
+      return this.list.filter(x => x.description.identity === '6783E9F948541962')
     },
     list() {
       return this.validators.map(x => {

src/views/StakingRewardComponent.vue

@@ -75,21 +75,13 @@
       </div>
     </b-card-body>
     <b-card-body class="pt-0">
-      <b-button
-        v-b-modal.withdraw-commission-window
-        block
-        size="sm"
-        variant="primary"
-      >
-        Withdraw Commission
-      </b-button>
       <b-button
         v-b-modal.operation-modal
         block
         size="sm"
         variant="primary"
       >
-        Withdraw Commission1
+        Withdraw Commission
       </b-button>
     </b-card-body>
     <operation-withdraw-commission-component

src/views/WalletAccountDetail.vue

@@ -38,17 +38,6 @@
       <b-card-header class="pt-0 pl-0 pr-0">
         <b-card-title>Assets</b-card-title>
         <div>
-          <b-button
-            v-b-modal.transfer-window
-            variant="primary"
-            size="sm"
-            class="mr-25"
-          ><feather-icon
-             icon="SendIcon"
-             class="d-md-none"
-           />
-            <span class="d-none d-md-block">Transfer</span>
-          </b-button>
           <b-button
             v-b-modal.operation-modal
             variant="primary"
@@ -59,17 +48,7 @@
             <feather-icon
               icon="SendIcon"
               class="d-md-none"
-            /><small class="d-none d-md-block">Transfer1</small>
+            /><small class="d-none d-md-block">Transfer</small>
-          </b-button>
-          <b-button
-            v-b-modal.ibc-transfer-window
-            variant="danger"
-            size="sm"
-          ><feather-icon
-             icon="SendIcon"
-             class="d-md-none"
-           />
-            <span class="d-none d-md-block">IBC Transfer</span>
           </b-button>
           <b-button
             v-b-modal.operation-modal
@@ -80,7 +59,7 @@
              icon="SendIcon"
              class="d-md-none"
            />
-            <span class="d-none d-md-block">IBC Transfer1</span>
+            <span class="d-none d-md-block">IBC Transfer</span>
           </b-button>
         </div>
       </b-card-header>
@@ -152,34 +131,12 @@
             size="sm"
             class="mr-25"
             @click="setOperationModalType('Delegate')"
-          >
-            <feather-icon
-              icon="LogInIcon"
-              class="d-md-none"
-            /><small class="d-none d-md-block">Delegate1</small>
-          </b-button>
-          <b-button
-            v-b-modal.delegate-window
-            variant="primary"
-            size="sm"
-            class="mr-25"
           >
             <feather-icon
               icon="LogInIcon"
               class="d-md-none"
             /><small class="d-none d-md-block">Delegate</small>
           </b-button>
-          <b-button
-            v-if="delegations"
-            v-b-modal.withdraw-window
-            variant="primary"
-            size="sm"
-          >
-            <feather-icon
-              icon="ShareIcon"
-              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
@@ -190,7 +147,7 @@
             <feather-icon
               icon="ShareIcon"
               class="d-md-none"
-            /><small class="d-none d-md-block"> Withdraw Rewards1</small>
+            /><small class="d-none d-md-block"> Withdraw Rewards</small>
           </b-button>
         </div>
       </b-card-header>
@@ -205,45 +162,27 @@
               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.value)"
+                @click="selectValue(data.value,'Delegate')"
               >
                 <feather-icon icon="LogInIcon" />
               </b-button>
-              <b-button
-                v-b-modal.redelegate-window
-                v-ripple.400="'rgba(113, 102, 240, 0.15)'"
-                v-b-tooltip.hover.top="'Redelegate'"
-                variant="outline-primary"
-                @click="selectValue(data.value)"
-              >
-                <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="'Redelegate1'"
+                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)'"
-                v-b-tooltip.hover.top="'Unbond'"
-                variant="outline-primary"
-                @click="selectValue(data.value)"
-              >
-                <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'"
+                v-b-tooltip.hover.top="'Unbond'"
                 variant="outline-primary"
                 @click="selectValue(data.value,'Unbond')"
               >

src/views/components/OperationModal/TransactionResult.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="board">
+    <div
-      <div
+      v-if="false"
-        v-if="1"
+      class="board "
-        class="data"
+    >
-      >
+      <div class="data">
         <div class="board-row">
           <div class="key">
             AMOUNT
@@ -33,11 +33,23 @@
     </div>
 
     <p
-      v-if="1"
+      v-if="succeed"
-      class="result-text"
+      class="result-text mt-1 text-success"
     >
       Congratulations! Transfer completed successfully.
     </p>
+    <p
+      v-else-if="error"
+      class="result-text mt-1 text-danger"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-else
+      class="result-text mt-1 text-primary"
+    >
+      Processing...
+    </p>
 
     <div class="status">
       <!-- <b-progress
@@ -60,15 +72,16 @@
         />
       </b-progress>
       <div class="status-text">
-        <span>SUBMITED</span>
+        <span v-if="hash">SUBMITED</span>
-        <span>COMPLETED</span>
+        <span v-if="succeed">COMPLETED</span>
+        <span v-if="error">FAILED</span>
       </div>
     </div>
     <div class="link">
       <router-link
         to="/"
       >
-        View on explorer
+        View details
       </router-link>
     </div>
   </div>
@@ -82,9 +95,17 @@ export default {
     BProgress,
     BProgressBar,
   },
+  props: {
+    hash: {
+      type: String,
+      default: null,
+    },
+  },
   data() {
     return {
       isLoading: true,
+      succeed: false,
+      error: '',
     }
   },
   computed: {
@@ -92,7 +113,40 @@ export default {
       // success: [100, 0, 0]
       // fail: [50, 50, 0]
       // pending: [0, 0, 100]
-      return [0, 0, 100]
+      if (!this.hash) {
+        return [0, 0, 100]
+      }
+      if (this.succeed) {
+        return [100, 0, 0]
+      }
+      return [50, 0, 50]
+    },
+  },
+  mounted() {
+    this.timer = setInterval(this.trace, 6000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    trace() {
+      if (this.hash) {
+        this.error = null
+        this.$http.getTxs(this.hash).then(res => {
+          console.log('tx', res)
+          if (res.code === 0) {
+            this.succeed = true
+            clearInterval(this.timer)
+          } else if (res.code !== 3) { // code 3 is tx unconfirmed(not founded).
+            this.error = res.raw_log
+            console.log('error:', this.error)
+            clearInterval(this.timer)
+          }
+        }).catch(e => {
+          this.error = e
+          clearInterval(this.timer)
+        })
+      }
     },
   },
 }

src/views/components/OperationModal/index.vue

@@ -53,7 +53,20 @@
             @update="componentUpdate"
           />
           <b-row>
-            <b-col>
+            <b-col cols="12">
+              <b-form-group>
+                <b-form-checkbox
+                  v-model="advance"
+                  name="advance"
+                  value="true"
+                >
+                  <small>Advanced</small>
+                </b-form-checkbox>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-row v-if="advance">
+            <b-col cols="12">
               <b-form-group
                 label="Fee"
                 label-for="Fee"
@@ -78,19 +91,6 @@
                 </validation-provider>
               </b-form-group>
             </b-col>
-            <b-col cols="12">
-              <b-form-group>
-                <b-form-checkbox
-                  v-model="advance"
-                  name="advance"
-                  value="true"
-                >
-                  <small>Advanced</small>
-                </b-form-checkbox>
-              </b-form-group>
-            </b-col>
-          </b-row>
-          <b-row v-if="advance">
             <b-col cols="12">
               <b-form-group
                 label="Gas"
@@ -128,8 +128,7 @@
               </b-form-group>
             </b-col>
           </b-row>
-
+          <b-row v-if="advance">
-          <b-row>
             <b-col>
               <wallet-input-vue v-model="wallet" />
             </b-col>
@@ -138,10 +137,10 @@
         {{ error }}
       </validation-observer>
 
-      <TransactionResult v-else />
+      <TransactionResult
-      <b-button @click="showResult = !showResult">
+        v-else
-        toggle
+        :hash="txHash"
-      </b-button>
+      />
     </b-overlay>
   </b-modal>
 </template>
@@ -251,11 +250,12 @@ export default {
       fee: '900',
       feeDenom: '',
       wallet: 'ledgerUSB',
-      gas: '200000',
+      gas: '250000',
       memo: '',
       blockingMsg: this.address ? 'You are not the owner' : 'No available account found.',
       actionName: 'Send',
       showResult: false,
+      txHash: '',
 
       required,
       password,
@@ -282,6 +282,7 @@ export default {
     },
     isOwner() {
       if (this.accounts) {
+        this.updateWallet(this.accounts.device)
         if (this.accounts.address.findIndex(x => x.addr === this.selectedAddress) > -1) {
           return false
         }
@@ -323,10 +324,8 @@ export default {
       })
       this.fee = this.$store.state.chains.selected?.min_tx_fee || '1000'
       this.feeDenom = this.$store.state.chains.selected?.assets[0]?.base || ''
-      // this.$refs.component.loadData()
     },
     componentUpdate(obj) {
-      console.log(obj)
       Object.keys(obj).forEach(key => {
         this[key] = obj[key]
       })
@@ -345,10 +344,10 @@ export default {
     resetModal() {
       this.feeDenom = ''
       this.error = null
+      this.showResult = false
     },
     async sendTx() {
       const txMsgs = this.$refs.component.msg
-      console.log(txMsgs)
       if (txMsgs.length === 0) {
         this.error = 'No delegation found'
         return ''
@@ -383,22 +382,15 @@ export default {
         this.memo,
         signerData,
       ).then(bodyBytes => {
+        this.showResult = true
         this.$http.broadcastTx(bodyBytes, this.selectedChain).then(res => {
+          this.txHash = res.tx_response.txhash
           setLocalTxHistory({
             chain: this.$store.state.chains.selected,
             op: this.historyName,
             hash: res.tx_response.txhash,
             time: new Date(),
           })
-          this.$bvModal.hide('operation-modal')
-          this.$toast({
-            component: ToastificationContent,
-            props: {
-              title: 'Transaction sent!',
-              icon: 'EditIcon',
-              variant: 'success',
-            },
-          })
         }).catch(e => {
           console.log(e)
           this.error = e
@@ -410,6 +402,13 @@ export default {
       })
       return ''
     },
+    updateWallet(v) {
+      console.log('device', v)
+      if (v && v !== 'address') {
+        this.wallet = v
+      }
+      this.wallet = 'keplr'
+    },
   },
 }
 </script>