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

2022-04-04 17:30:58 +08:00 · 2022-04-04 17:30:58 +08:00 · f61783e686
commit f61783e686
parent 20f787e1b8 4864ccf37f
7 changed files with 122 additions and 160 deletions
--- a/src/libs/fetch.js
+++ b/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())
--- a/src/views/Governance.vue
+++ b/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>
--- a/src/views/Staking.vue
+++ b/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 => {
--- a/src/views/StakingRewardComponent.vue
+++ b/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
--- a/src/views/WalletAccountDetail.vue
+++ b/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>
-          </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>
+            /><small class="d-none d-md-block">Transfer</small>
          </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')"
              >
--- a/src/views/components/OperationModal/TransactionResult.vue
+++ b/src/views/components/OperationModal/TransactionResult.vue
@ -1,10 +1,10 @@
 <template>
  <div>
-    <div class="board">
-      <div
-        v-if="1"
-        class="data"
-      >
+    <div
+      v-if="false"
+      class="board "
+    >
+      <div class="data">
        <div class="board-row">
          <div class="key">
            AMOUNT
@ -33,11 +33,23 @@
    </div>

    <p
-      v-if="1"
-      class="result-text"
+      v-if="succeed"
+      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>COMPLETED</span>
+        <span v-if="hash">SUBMITED</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)
+        })
+      }
    },
  },
 }
--- a/src/views/components/OperationModal/index.vue
+++ b/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>
+          <b-row v-if="advance">
            <b-col>
              <wallet-input-vue v-model="wallet" />
            </b-col>
@ -138,10 +137,10 @@
        {{ error }}
      </validation-observer>

-      <TransactionResult v-else />
-      <b-button @click="showResult = !showResult">
-        toggle
-      </b-button>
+      <TransactionResult
+        v-else
+        :hash="txHash"
+      />
    </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>