Build Your Own NFT Wallet Gallery with near.social and indexer.xyz
In the rapidly evolving world of blockchain and NFTs, having a personalized wallet gallery to showcase your NFT collection is not only a convenience but also a statement. In this tutorial, we'll guide you through creating a visually appealing and functional NFT Wallet Gallery using the power of near.social and indexer.xyz. By the end of this tutorial, you'll have a solid foundation to build upon and customize as you please, while also contributing to the growing NFT ecosystem.
Introduction
near.social is a decentralized platform for creating React applications that leverage the power of blockchain. It enables developers to create applications that are censorship-resistant, secure, and decentralized.
indexer.xyz is a powerful API that provides access to a wide range of NFT metadata from various blockchains, making it easy for developers to create NFT-focused applications.
By combining the capabilities of near.social and indexer.xyz, we'll build an NFT Wallet Gallery that showcases your NFTs based on your wallet address. And the best part? The code is open-source, so you can easily fork it, make updates, and create your own unique NFT Wallet Gallery.
🔗 Source Code Here
Prerequisites
Before we dive into the code, make sure you have the following:
- A basic understanding of JavaScript and React.
- Familiarity with the Fetch API for making HTTP requests.
- A code editor of your choice.
Building the NFT Wallet Gallery
The NFT Wallet Gallery we'll create consists of several key components:
- An input field for the wallet address.
- A button to fetch NFT data based on the wallet address.
- A responsive grid displaying NFT cards, each containing an image, name, rank, token ID, and collection.
- Links to the respective NFTs on the TradePort platform.
Step 1: Set Up the Application
First, let's set up a new React application on near.social. Head over to near.social and follow the steps to create a new application.
Once your application is set up, you'll have a basic near.social app to start building your NFT Wallet Gallery.
Step 2: Initialize State
In your application's main component, initialize the state to hold the wallet address and NFT data:
initState({
walletAddress: "",
nftData: [],
});
Step 3: Fetch NFT Data
Now, let's create a function that fetches NFT data from indexer.xyz based on the wallet address:
const fetchData = async () => {
// ...
};
Inside this function, use the Fetch API to make a POST request to the indexer.xyz GraphQL endpoint:
const response = await fetch("https://byz-multi-chain-01.hasura.app/v1/graphql", {
// ...
});
Be sure to include the necessary headers and the GraphQL query in the request body:
headers: {
"x-api-key": "ChRbeKE.c94220449dbb45973a67a614b1f590be",
"Content-Type": "application/json",
"Hasura-Client-Name": "near-social",
},
body: JSON.stringify({
query: `
query MyQuery {
near {
nft_meta(where: {nft_state: {owner: {_eq: "${state.walletAddress}"}}}) {
// ...
}
}
}`,
}),
After fetching the data, update the state with the NFT data
const data = await response.json();
const nftData = data.data.near.nft_meta;
State.update({ nftData: nftData });
All together now!
const fetchData = () => {
State.update({ nftData: [] });
let data = fetch("https://byz-multi-chain-01.hasura.app/v1/graphql", {
method: "POST",
headers: {
"x-api-key": "ChRbeKE.c94220449dbb45973a67a614b1f590be",
"Content-Type": "application/json",
"Hasura-Client-Name": "near-social",
},
body: JSON.stringify({
query: `
query MyQuery {
near {
nft_meta(where: {nft_state: {owner: {_eq: "${state.walletAddress}"}}}) {
image
name
token_id
collection {
slug
}
rarity
ranking
}
}
}`,
}),
});
if (data) {
const nftData = data.body.data.near.nft_meta;
State.update({ nftData });
}
};Step 4: Update Wallet Address
Create a function to update the wallet address in the state when the user inputs a new value:
const updateWalletAddress = (e) => {
State.update({ walletAddress: e.target.value });
};Step 5: Display NFT Cards
Now that we have the NFT data, let's create a responsive grid to display NFT cards. Each card will contain the NFT image, name, rank, token ID, and collection.
First, create a function that returns the appropriate color based on the rarity of the NFT:
const getRarityColor = (rarity) => {
// ...
};
Next, create the JSX for the NFT Wallet Gallery. This includes the input field for the wallet address, the fetch button, and the grid containing the NFT cards:
return (
<div
style={{
fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
maxWidth: "1200px",
margin: "0 auto",
padding: "20px",
}}
>
<a href="https://indexer.xyz/" target="_blank" rel="noopener noreferrer">
<img
src="https://indexer.xyz/indexer-logo-black.svg"
alt="Indexer.xyz logo"
style={{ height: "1.5em", verticalAlign: "middle" }}
/>
</a>
<h1 style={{ fontSize: "48px", fontWeight: "bold", marginBottom: "20px" }}>
NFT Wallet Gallery
</h1>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: "30px",
flexWrap: "wrap",
}}
>
<label
htmlFor="walletAddressInput"
style={{ fontSize: "16px", marginRight: "10px" }}
>
Enter Wallet Address:
</label>
<input
type="text"
id="walletAddressInput"
value={state.walletAddress}
onChange={updateWalletAddress}
style={{
border: "1px solid #ccc",
borderRadius: "5px",
padding: "5px 10px",
margin: "0 10px 10px 0",
flexGrow: 1,
}}
/>
<button
onClick={fetchData}
style={{
backgroundColor: "#0070c9",
border: "none",
borderRadius: "5px",
color: "#fff",
cursor: "pointer",
padding: "5px 10px",
marginLeft: "10px",
}}
>
Fetch NFTs
</button>
</div>
{state.nftData.length > 0 && (
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "20px",
justifyContent: "center",
marginTop: "20px",
}}
>
{state.nftData.map((nft) => (
<a
href={`https://www.tradeport.xyz/near/collection/${nft.collection.slug}/${nft.token_id}`}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: "none", color: "inherit" }}
>
<div
style={{
backgroundColor: "#f0f0f0",
borderRadius: "10px",
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
padding: "20px",
width: "200px",
textAlign: "center",
}}
>
<img
src={nft.image}
alt={nft.name}
style={{
width: "100%",
height: "auto",
borderRadius: "5px",
objectFit: "cover",
marginBottom: "15px",
}}
/>
<h3 style={{ fontSize: "18px", margin: "0 0 10px" }}>
{nft.name}
</h3>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: "5px",
}}
>
<span
style={{
backgroundColor: "#3f51b5",
borderRadius: "20px",
color: "#fff",
display: "inline-block",
fontSize: "12px",
fontWeight: "bold",
padding: "3px 8px",
}}
>
Rank: {Math.round(nft.ranking)}
</span>
</div>
<p style={{ fontSize: "14px", marginBottom: "5px" }}>
Token ID: {nft.token_id}
</p>
<p style={{ fontSize: "14px" }}>
Collection: {nft.collection.slug}
</p>
</div>
</a>
))}
</div>
)}
</div>
);
Conclusion
Congratulations! You have successfully built an NFT Wallet Gallery using near.social and indexer.xyz. The combination of near.social's decentralized React platform and indexer.xyz's powerful API makes it easy to create unique, decentralized, and responsive NFT applications.
We encourage you to fork the code, make updates, and create your own unique NFT Wallet Gallery. The possibilities are endless when you combine the power of near.social and indexer.xyz. Share your creations and contribute to the growing NFT ecosystem. Happy coding!
