update tx boxes

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)
+        })
+      }
     },
   },
 }

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>