Tech Stack

In this case, I used React JS, react-query, wagmi.sh to connect the wallet, and Tatum’s API key. You can find the code in my GitHub repository.

Goals we want to achieve

In this case, we’ll show the NFTs of a specific collection that an address hold. We’ll need to do three consecutive API calls using Tatum to get it done.

• Get the total token balance.

• Filter by collection (contract).

• Get the metadata.

• Show the NFTs.

Let’s begin

First of all, you need to connect your wallet, I’m using wagmi.sh which is a powerful open-source library for React, I’ll teach you how to use it in another post, meanwhile you can try using the official docs on their site.

Once you have your wallet connected, you need to get the balance of the tokens you hold and filter the result to get the data you need directly from the call.

To make this first call, you can use this Tatum’s endpoint, as you can see in the code below.

const fetchBalance = async () => {
        const res = await fetch(`https://api-eu1.tatum.io/v3/multitoken/address/balance/${chain}/${address}`, {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                "x-api-key": process.env.REACT_APP_TATUM
                }
            }
        )
        try {
            const result = await res.json();
            const resultFiltered = result.find(element => element?.contractAddress?.toLowerCase() === nftContract.toLowerCase());
            const resultBalances = resultFiltered.balances.map(ids => ids.tokenId)
            return resultBalances;
        } catch (error) {
            console.log(error);
        }
};

//First call
const { data: balance } = useQuery({ queryKey: ['nfts'], queryFn: fetchBalance});

After that, you’ll get a list of the tokens you hold, something like [0, 1, 20, 400, 123]. I recommend you use ReactQueryDevtools to see the data you’re fetching directly in your browser.

Once you have the balance and you’ve filtered it by collection (contract), you want to make a second and dependent query, to get the metadata of every token you find in the previous call. To do that, you can use this Tatum’s endpoint, as you can see below.

const fetchMetadata = async (ids) => {
        const res = await fetch(`https://api-eu1.tatum.io/v3/multitoken/metadata/${chain}/${nftContract}/${ids}`,    {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                "x-api-key": process.env.REACT_APP_TATUM
                }
            }
        )
        try {
            const result = await res.json();
            return result;
        } catch (error) {
            console.log(error);
        }
};

//Second call
const { data: tokenId } = useQuery({ queryKey: ['tokenId'], queryFn: () => Promise.all(balance.map(ids => fetchMetadata(ids))), enabled: !!balance });

The last call is very similar to the second one, another dependent query, but, this time, you need to resolve the IPFS CID you got in the previous one to see the entire metadata information, and finally, show it to the user.

In this case, I decided to add a proxy to resolve the CID, but you can find a ton of ways to do the same thing, some of them could be better than the one I’m using, feel free to contribute to the code, I’d be very grateful.

const fetchIPFS = async (ids) => {
        let url = "";
        if (ids.data.includes("ipfs://")) {
            url = ids.data.replace("ipfs://", "https://nftstorage.link/ipfs/");
        }
        const res = await fetch(`${url}`, {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                }
            }
        )
        try {
            const result = await res.json();
            return result;
        } catch (error) {
            console.log(error);
        }
};

//Third call
const { data: ipfs } = useQuery({ queryKey: ['ipfs'], queryFn: () => Promise.all(tokenId.map(ids => fetchIPFS(ids))), enabled: !!tokenId });

Now, just build a Card component (or reuse one from a library like TailwindCSS or MUI) is pending, I let it to your imagination. I hope it’ll be helpful in your journey. Happy code!

But you know, we know, there was an Ivy League School, a heritage, a mother, a father’s loan, blood diamonds… We did see some of them in our hard night shift at Moondance Diner.

And, the next day, in the morning, we coded, designed, dreamed, did the math, and the moon is smiling at us.

This time isn’t about them, this time is about us, the people, we who dream while we are working, at Moondance Diner.

2020 was a new all-time high in the eBooks market. eBooks sales in the U.S. alone reached  $1.1 billion, up by 18.4% compared to the previous year. According to statista.com, revenue in the eBooks segment is expected to show an annual growth rate of 2.35% up to 2026.

Apart from the financial data, a lot of us have enjoyed reading some of the most beautiful stories out there. Everything! from a great variety of authors and categories to novels, finance, and politics. Some of those stories have even changed us forever.

Despite the good taste we could have from eBooks, especially from Kindle, some things are just missing. For example, what happens when you want to share your most recent reading with a friend? What if you want to resell your oldest ones? Have you tried to download your eBooks to read them using another reader? These problems and others have been ringing in my mind.

When I went down the rabbit hole, I found in web3 the answer for many of those problems, problems that I also have. Since then, I stopped buying eBooks because it doesn’t make sense to me anymore. That’s when bookverse was born.

Bookverse is a project that wants to scale eBooks to a new level, integrating the web3 advantages to it. The possibilities are just limited by our imagination, but I’d like to share some of them:

For users:

• You’ll be able to resell your eBooks or share them for free with other users.

• You could get limited, collectable and rare editions of your favourite books.

• You could get an autographed book from your favourite author, backed by blockchain technology.

• Your favourite book could be your key to DeFi, using your book as collateral.

For authors and creators:

• You’ll get a considerable major income for any book you sell.

• You’ll get a benefit for any book that is resold, forever, backed by public and audited smart contracts.

• You’ll be able to shorten the distance between you and your community.

• You’ll be able to launch rare or special editions of your books in seconds.

• New ways to fund your incoming launches, even before they are written.

If you want to know more, visit our site bookversexyz.com, and we’ll be grateful if you leave your email there to be part of the community.

http://bookversexyz.com/