add query from ibc

src/views/NFTDenom.vue

@@ -2,12 +2,27 @@
   <div>
     <b-card title="Query NFT">
       <b-form-group>
+        <b-form-radio-group
+          v-if="isWasm"
+          v-model="keyType"
+          :aria-describedby="ariaDescribedby"
+          name="radio-sub-component"
+        >
+          <b-form-radio value="contract">
+            Search By Contract ID
+          </b-form-radio>
+          <b-form-radio value="ibc">
+            Search From IBC Path
+          </b-form-radio>
+        </b-form-radio-group>
         <b-form-input
           v-if="isWasm"
           v-model="contractId"
-          placeholder="Wasm Contract Id: e.g. stars1y26zydcynhdz3t93wzsx4ww9nh9fz9gup6s5k45jqn7nsl36kefsdhdnvv"
+          class="my-1"
+          :placeholder="`Wasm Contract Id: e.g. ${sample}`"
         />
         <b-form-input
+          v-if="!isWasm || keyType==='contract'"
           v-model="tokenId"
           placeholder="Token ID, e.g. mynft"
         />
@@ -30,13 +45,15 @@
 
 <script>
 import {
-  BCard, BFormGroup, BFormInput, BButton,
+  BCard, BFormGroup, BFormInput, BButton, BFormRadioGroup, BFormRadio,
 } from 'bootstrap-vue'
 import ObjectFieldComponent from './components/ObjectFieldComponent'
 
 export default {
   components: {
     BButton,
+    BFormRadio,
+    BFormRadioGroup,
     BCard,
     BFormGroup,
     BFormInput,
@@ -47,6 +64,7 @@ export default {
       data: {},
       contractId: '',
       tokenId: '',
+      keyType: 'contract',
     }
   },
   computed: {
@@ -56,6 +74,11 @@ export default {
     isWasm() {
       return ['juno', 'stargaze'].includes(this.chainName)
     },
+    sample() {
+      return this.keyType === 'contract'
+        ? 'stars1y26zydcynhdz3t93wzsx4ww9nh9fz9gup6s5k45jqn7nsl36kefsdhdnvv'
+        : 'wasm.stars1ve46fjrhcrum94c7d8yc2wsdz8cpuw73503e8qn9r44spr6dw0lsvmvtqh/channel-207/denom'
+    },
   },
   mounted() {
     const { denom } = this.$route.params
@@ -68,10 +91,26 @@ export default {
   methods: {
     fetchWasmNFT() {
       if (this.isWasm) {
-        this.$http.getWasmQuery(this.contractId, `{"all_nft_info":{"token_id": "${this.tokenId}"}}`)
-          .then(res => {
-            this.data = res
-          })
+        if (this.keyType === 'contract') {
+          this.$http.getWasmQuery(this.contractId, `{"all_nft_info":{"token_id": "${this.tokenId}"}}`)
+            .then(res => {
+              this.data = res.data
+            })
+        } else {
+          const keys = this.contractId.split('/')
+          if (keys.length === 3) {
+            const contractId = keys[0].replace('wasm.', '')
+            const query = `{"nft_contract": {"class_id" : "${this.contractId}"}}`
+            this.$http.getWasmQuery(contractId, query)
+              .then(contract => {
+                const tokenId = keys[2]
+                this.$http.getWasmQuery(contract.data, `{"all_nft_info":{"token_id": "${tokenId}"}}`)
+                  .then(res => {
+                    this.data = res.data
+                  })
+              })
+          }
+        }
       } else {
         this.$http.getNFTDenom(this.tokenId).then(res => {
           this.data = res.denom