add nft module

src/@core/layouts/modules.js

@@ -25,6 +25,11 @@ export default () => ([
     title: 'dashboard.uptime',
     route: 'uptime',
   },
+  {
+    scope: 'normal',
+    title: 'NFT',
+    route: 'nftdenom',
+  },
   {
     scope: 'normal',
     title: 'dashboard.parameters',

src/libs/fetch.js

@@ -95,6 +95,28 @@ export default class ChainFetch {
     return this.get('/cosmos/slashing/v1beta1/signing_infos?pagination.limit=500', config)
   }
 
+  async getNFTsByOwner(address) {
+    return this.get(`/irismod/nft/nfts?owner=${address}`)
+  }
+
+  async getNFTDenom(denom_id) {
+    return this.get(`/irismod/nft/denoms/${denom_id}`)
+  }
+
+  async getWasmQuery(contract, query) {
+    const query_data = toBase64(Buffer.from(query))
+    console.log(contract, query_data)
+    return this.get(`/cosmwasm/wasm/v1/contract/${contract}/smart/${query_data}`)
+  }
+
+  async getNFTdetails(denom_id, token_id) {
+    return this.get(`/irismod/nft/nfts/${denom_id}/${token_id}`)
+  }
+
+  async getWasmNFTsByOwner(address) {
+    return this.get(`/irismod/nft/nfts?owner=${address}`)
+  }
+
   async getTxs(hash, config = null) {
     const conf = config || this.getSelectedConfig()
     const ver = conf.sdk_version || '0.41'

src/router/index.js

@@ -343,6 +343,20 @@ const router = new VueRouter({
         ],
       },
     },
+    {
+      path: '/:chain/nft/:denom',
+      name: 'nftdenom',
+      component: () => import('@/views/NFTDenom.vue'),
+      meta: {
+        pageTitle: 'NFT',
+        breadcrumb: [
+          {
+            text: 'NFT',
+            active: true,
+          },
+        ],
+      },
+    },
     // custom modules for specified chains
     // 1. cosmos
     {

src/views/NFTDenom.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <b-card title="Query NFT">
+      <b-form-group>
+        <b-form-input
+          v-if="isWasm"
+          v-model="contractId"
+          placeholder="Wasm Contract Id: e.g. stars1y26zydcynhdz3t93wzsx4ww9nh9fz9gup6s5k45jqn7nsl36kefsdhdnvv"
+        />
+        <b-form-input
+          v-model="tokenId"
+          placeholder="Token ID, e.g. mynft"
+        />
+      </b-form-group>
+      <b-button @click="fetchWasmNFT()">
+        Search
+      </b-button>
+    </b-card>
+    <b-card
+      v-if="data"
+      title="NFT Details"
+    >
+      <object-field-component :tablefield="data" />
+    </b-card>
+    <b-card v-else>
+      No NFT found!
+    </b-card>
+  </div>
+</template>
+
+<script>
+import {
+  BCard, BFormGroup, BFormInput, BButton,
+} from 'bootstrap-vue'
+import ObjectFieldComponent from './components/ObjectFieldComponent'
+
+export default {
+  components: {
+    BButton,
+    BCard,
+    BFormGroup,
+    BFormInput,
+    ObjectFieldComponent,
+  },
+  data() {
+    return {
+      data: {},
+      contractId: '',
+      tokenId: '',
+    }
+  },
+  computed: {
+    chainName() {
+      return this.$store.state.chains.selected.chain_name
+    },
+    isWasm() {
+      return ['juno', 'stargaze'].includes(this.chainName)
+    },
+  },
+  mounted() {
+    const { denom } = this.$route.params
+    if (denom && denom !== 'nft') {
+      this.$http.getNFTDenom(denom).then(res => {
+        this.data = res.denom
+      })
+    }
+  },
+  methods: {
+    fetchWasmNFT() {
+      if (this.isWasm) {
+        this.$http.getWasmQuery(this.contractId, `{"all_nft_info":{"token_id": "${this.tokenId}"}}`)
+          .then(res => {
+            this.data = res
+          })
+      } else {
+        this.$http.getNFTDenom(this.tokenId).then(res => {
+          this.data = res.denom
+        })
+      }
+    },
+  },
+}
+</script>

src/views/WalletAccountDetail.vue

@@ -253,6 +253,25 @@
         </b-card-body>
       </b-card>
 
+      <b-card title="NFTs">
+        <b-table
+          :items="nfts"
+          striped
+          hover
+          responsive="sm"
+          stacked="sm"
+        >
+          <template #cell(denom_id)="data">
+            <router-link :to="`../nft/${data.item.denom_id}`">
+              {{ data.item.denom_id }}
+            </router-link>
+          </template>
+          <template #cell(token_ids)="data">
+            <div>{{ data.item.token_ids.join(',') }}</div>
+          </template>
+        </b-table>
+      </b-card>
+
       <b-card title="Transactions">
         <b-table
           :items="txs"
@@ -483,8 +502,23 @@
         </div>
       </div>
     </div>
-  </div>
-</template>
+    <b-modal
+      id="bv-nft-viewer"
+      hide-footer
+      title="NFT Viewer"
+    >
+      <div class="d-block text-center">
+        <object-field-component tablefield="nft" />
+      </div>
+      <b-button
+        class="mt-3"
+        block
+        @click="$bvModal.hide('bv-nft-viewer')"
+      >
+        Close
+      </b-button>
+    </b-modal>
+  </div></template>
 
 <script>
 import { $themeColors } from '@themeConfig'
@@ -584,6 +618,8 @@ export default {
       operationModalType: '',
       error: null,
       names: [],
+      nfts: [],
+      nft: {},
     }
   },
   computed: {
@@ -794,6 +830,23 @@ export default {
       this.$http.getStakingUnbonding(this.address).then(res => {
         this.unbonding = res.unbonding_responses || res
       })
+      this.$http.getNFTsByOwner(this.address).then(res => {
+        this.nfts = res.owner.id_collections
+      })
+    },
+    showNft(denom, token) {
+      console.log(denom, token)
+      if (token) {
+        this.$http.getNFTdetails(denom, token).then(res => {
+          this.nft = res
+          this.$bvModal.show('bv-nft-viewer')
+        })
+      } else {
+        this.$http.getNFTDenom(denom).then(res => {
+          this.nft = res
+          this.$bvModal.show('bv-nft-viewer')
+        })
+      }
     },
     formatNumber(v) {
       return numberWithCommas(v)