customize network call the node api

src/components/Contract.vue

@@ -18,7 +18,7 @@
                     <p class="is-family-monospace has-text-weight-semibold display-6" v-else>
                         <a
                             target="_blank"
-                            :href="`${$explorer}accounts/${item.address}`"
+                            :href="`${$explorerAccount}${item.address}`"
                         >{{item.address | toChecksumAddress}}</a>
                     </p>
                 </div>

src/components/EventShowCard.vue

@@ -18,7 +18,7 @@
                         #Block
                         <a
                             target="_blank"
-                            :href="`${$explorer}blocks/${item.meta.blockID}`"
+                            :href="`${$explorerBlock}${item.meta.blockID}`"
                         >{{item.meta.blockNumber}}</a>
                     </span>
                     <span
@@ -30,7 +30,7 @@
                     <a
                         class="is-family-monospace display-6 has-text-weight-semibold"
                         target="_blank"
-                        :href="`${$explorer}txs/${item.meta.txID}`"
+                        :href="`${$explorerTx}${item.meta.txID}`"
                     >{{item.meta.txID | addr}}</a>
                 </div>
             </div>
@@ -63,7 +63,7 @@
                                     v-if="props.row.type === 'address'"
                                     target="_blank"
                                     class="has-text-weight-semibold is-family-monospace display-6"
-                                    :href="`${$explorer}accounts/${props.row.value}`"
+                                    :href="`${$explorerAccount}${props.row.value}`"
                                 >{{ props.row.value | toChecksumAddress}}</a>
                                 <span
                                     v-else

src/main.ts

@@ -16,7 +16,9 @@ import Connex from '@vechain/connex'
 declare module 'vue/types/vue' {
   interface Vue {
     $connex: Connex
-    $explorer: string
+    $explorerAccount: string
+    $explorerBlock: string
+    $explorerTx: string
   }
 }
 
@@ -36,34 +38,56 @@ Vue.use(VueAnalytics, {
 
 Vue.config.productionTip = false
 
+
+function setExplorerUrl(path: string) {
+  const temp = path ? (path + '/') : path
+  Vue.prototype.$explorerAccount = `https://insight.vecha.in/#/${temp}accounts/`
+  Vue.prototype.$explorerBlock = `https://insight.vecha.in/#/${temp}blocks/`
+  Vue.prototype.$explorerTx = `https://insight.vecha.in/#/${temp}txs/`
+}
+
 if (window.connex) {
     // sync1
     Vue.prototype.$connex = new Connex({
       network: window.connex.thor.genesis,
       node: '',
       noV1Compat: false
     })
-
-    Vue.prototype.$explorer='https://insight.vecha.in/#/'
+    setExplorerUrl('')
 } else {
   // Default is main net for sync2
   const net = localStorage.getItem('last-net') || 'main'
-  Vue.prototype.$explorer=`https://insight.vecha.in/#/${net === 'custom' ? '' : net}/`
-  if (net === 'test') {
-    Vue.prototype.$connex = new Connex({
-      network: 'test',
-      node: 'https://sync-testnet.veblocks.net'
-    })
-  } else if (net === 'main') {
-    Vue.prototype.$connex = new Connex({
-      network: 'main',
-      node: 'https://sync-mainnet.veblocks.net'
-    })
-  } else if (net === 'custom') {
+
+  if (['test', 'main'].includes(net)) {
+    setExplorerUrl(net)
+    if (net === 'test') {
+      Vue.prototype.$connex = new Connex({
+        network: 'test',
+        node: 'https://sync-testnet.veblocks.net'
+      })
+    } else {
+      Vue.prototype.$connex = new Connex({
+        network: 'main',
+        node: 'https://sync-mainnet.veblocks.net'
+      })
+    }
+  } else {
     const node = localStorage.getItem('custom-node')
-    const network = JSON.parse(localStorage.getItem('custom-network') || '') // genesis block json string
+    const network = JSON.parse(localStorage.getItem('custom-network') || '') as Connex.Thor.Block // genesis block
 
     if (node && network) {
+      if (network.id === '0x000000000b2bce3c70bc649a02749e8687721b09ed2e15997f466536b20bb127') {
+        // test
+        setExplorerUrl('test')
+      } else if (network.id === '0x00000000851caf3cfdb6e899cf5958bfb1ac3413d346d43539627e6be7ec1b4a') {
+        // main
+        setExplorerUrl('main')
+      } else {
+        const host = node.endsWith('/') ? node : (node + '/')
+        Vue.prototype.$explorerAccount = `${host}accounts/`
+        Vue.prototype.$explorerBlock = `${host}blocks/`
+        Vue.prototype.$explorerTx = `${host}transactions/`
+      }
       Vue.prototype.$connex = new Connex({
         network,
         node

src/views/ContractDetail.vue

@@ -220,7 +220,7 @@ export default class ContractDetail extends Mixins(PrototypeAbi) {
     }
     toExplorer() {
             window.open(
-                `${this.$explorer}accounts/${this.contract!.address}`,
+                `${this.$explorerAccount}${this.contract!.address}`,
                 '_blank'
             )
     }

src/views/DeployContract.vue

@@ -69,7 +69,7 @@ export default class DeployContract extends Vue {
                     .sign('tx', [{ value: this.haxValue || 0, data: this.code, to: null }])
                     .comment('Inspector deploy contract')
                     .request()
-                window.open(`${this.$explorer}txs/${resp.txid}`)
+                window.open(`${this.$explorerTx}${resp.txid}`)
             } catch (error: any) {
                 this.$buefy.toast.open({
                     type: 'is-danger',