2

Does anyone know of or is willing to share their code on how to obtain all NFTs on a tz.. wallet (mainnet) and display them?

I can't find a single working example, I can find lots of applications of past which no longer work and documentation on api's and libraries long gone but nothing that actually works. Typescript client side.

I am a full stack dev but I'm not that clued up on blockchain work.

Thanks

1
  • kukai, temple, Airgap and Umami are all open source wallets on Tezos that display NFTs. They are all on github / gitlab
    – Simon McLoughlin
    Apr 16, 2023 at 17:21

1 Answer 1

2

Here is a very simple example of fetching and displaying account's NFTs with Vue.js. It's not production-ready, but just for demonstration purposes.

https://jsbin.com/faqupezoga/1/edit?html,output. Specify your address in the input and it will show your NFTs. Click "Load more" to load more NFTs.

<html>
<div id="app">
    <span>Enter your address: </span>
    <input v-model="address">

    <h4>NFTs of<br>{{ address }}</h4>

    <div v-for="nft in nfts" :key="nft.id">
        <h3>{{ nft.balance }} x {{ nft.name }}</h3>
        <a :href="nft.artifactUri" target="_blank">
            <img height="200" :src="nft.displayUri" />
        </a>
    </div>

    <button type="button" @click="fetch" style="margin-top:2rem">
        Load more
    </button>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
    const App = {
        data: () => ({
            address: 'tz1fRdhaTLTVfvftwY2RvSNuKnCbHLXT85Wu',
            nfts: [],
        }),
        async mounted() {
            // initial fetch
            await this.fetch();
        },
        watch: {
            address() {
                // if account has been changed, reset and refetch NFTs for the new one
                this.nfts = [];
                this.fetch();
            },
        },
        methods: {
            async fetch() {
                // fetch NFTs from TzKT API
                const res = await fetch(`https://api.tzkt.io/v1/tokens/balances`
                    + `?account=${this.address}&balance.ne=0&token.metadata.displayUri.null=false&offset=${this.nfts.length}&limit=2`
                    + `&select=id,balance,token.metadata.name as name,token.metadata.displayUri as displayUri,token.metadata.artifactUri as artifactUri`);
                // process IPFS links
                const items = (await res.json()).map(x => ({
                    ...x,
                    displayUri: this.ipfsLink(x.displayUri),
                    artifactUri: this.ipfsLink(x.artifactUri),
                }));
                // save the NFTs
                this.nfts = this.nfts.concat(items);
            },
            ipfsLink(uri) {
                return uri.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/');
            },
        },
    };
    Vue.createApp(App).mount('#app');
</script>
</html>
1
  • 1
    Thanks, that helped greatly. :)
    – Darcey
    Apr 17, 2023 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.