NFT Gatekeeping:. A Step-by-Step Guide to Restricting… | by Harissatti

NFTs, or Non-Fungible Tokens, have taken the digital world by storm. In this guide, we’ll show you how to create a cool feature for your React application that checks if a user owns NFTs associated with a specific contract address. If they do, we’ll reveal a special message just for them.

NFTs represent ownership of one-of-a-kind digital assets, and their popularity continues to soar. But NFTs are not limited to digital art; they have the potential to revolutionize how we interact with content and services across a wide spectrum of industries.

Imagine having the ability to check whether a user owns specific NFTs associated with a particular contract address right within your React application. If they do, you can unveil special messages, features, or content exclusively for them. It’s a captivating way to engage users and reward NFT holders.

Endless Possibilities Across Industries:

1. Art Galleries:

• Idea: NFT owners could gain exclusive access to virtual art galleries showcasing their NFT artwork or collections, fostering a deeper connection with their creations.

2. Entertainment:

• Idea: Musicians and content creators can use NFT ownership to provide access to unreleased tracks, concert tickets, or behind-the-scenes content, creating a loyal fan base.

3. Gaming:

• Idea: In the gaming industry, NFTs can unlock special in-game items, characters, or levels for players who own specific NFTs, enhancing the gaming experience.

4. Education:

• Idea: Educational platforms could use NFT ownership to grant students access to premium courses or learning materials, enhancing the learning journey.

5. Ticketing and Events:

• Idea: NFTs can be used as digital tickets for events, with additional perks for holders, like backstage passes or meet-and-greets, transforming event experiences.

As you can see, the versatility of NFTs makes them applicable in numerous creative and business contexts, providing new opportunities for engagement, monetization, and community-building. In this guide, we’ll walk you through the steps to implement NFT checks and message reveals in your React application, but keep in mind that the possibilities are limitless. As the NFT ecosystem continues to evolve, innovative uses for this technology will likely emerge across various industries.

Setting Up Your Server First, let’s set up an Express server to handle the NFT checks. Don’t worry; it’s not as complicated as it sounds! Here’s what you need to do:

• Create a new Express project.
• Install some essential dependencies: express, web3, cors, and don’t forget your NFT contract’s ABI.json.

Create the NFT Check Route: Now, let’s create an API route that checks NFT ownership. This route will take an Ethereum address as input and return the NFT balance associated with that address. Here’s the code for the route:

// Example code for setting up the Express server
const express = require("express");
const { Web3 } = require("web3");
const ABI = require("./ABI.json");
const cors = require("cors");
const app=express();
app.use(cors());
app.use(express.json());
const web3=new Web3("https://sleek-late-pine.matic-testnet.discover.quiknode.pro/"YOU QUICKNODE api key"/")
const contractAddress="NFT Contract Address";
const contract=new web3.eth.Contract(ABI,contractAddress);
const fetchNFTs=async(account)=>{
try {
const balance=await contract.methods.balanceOf(account).call();
console.log(balance);
return{userNFTS: Number(balance)};
} catch (error) {   
console.log("error in fetching NFT :",error);
}
}
app.post("/member", async (req, res) => {
try {
// Get the Ethereum address from the request.
const account = req.body.from;
// Fetch the NFT balance for the given address.
const numNFTs = await fetchNFTs(account);
// Check if the user has NFTs.
if (numNFTs.userNFTS > 0) {
res.status(200).json({ status: 200, numNFTs });
} else {
res.status(400).json({ status: 400, message: "You have 0 NFTs." });
}
} catch (error) {
console.error(error);
res.status(500).json({ status: 500, message: "Internal Server Error" });
}
});

Our journey begins with a component called Wallet.js. This component is responsible for connecting a user’s wallet to the application. Let’s break down the code step by step:

const Wallet = () => {
const navigateto = useNavigate();
const connectWallet = async () => {
try {
if (window.ethereum) {
// Request accounts from the user's MetaMask wallet.
const accounts = await window.ethereum.request({
method: 'eth_requestAccounts'
});
// Navigate to the home page with the user's Ethereum address.
navigateto("/home", { state: { address: accounts[0] } });
console.log(accounts);
} else {
alert("Install MetaMask to use this feature.");
}
} catch (error) {
console.error(error);
}
}
return (
<button onClick={connectWallet}>Connect Wallet</button>
);
};

In this component, we use the useNavigate hook from the React Router library to handle navigation. When the “Connect Wallet” button is clicked, it triggers the connectWallet function. Inside this function:

• We check if the user has the MetaMask browser extension installed (window.ethereum).
• If MetaMask is detected, we request accounts from the user’s wallet, and upon success, we navigate to the home page, passing the user’s Ethereum address as state.

Next up, we have the Home.js component. This is where users can reveal exclusive content based on their NFT ownership. Here’s how it works:

const Home = () => {
const location = useLocation();
const navigateto = useNavigate();
const revealMsg = async () => {
try {
const account = location.state.address;
const res = await fetch(`http://localhost:3000/member`, {
method: "POST",
headers: {
"content-type": "application/json"
},
body: JSON.stringify({ from: account })
});
const data = await res.json();
if (data.status === 200) {
navigateto("/members");
} else {
window.alert(
"You currently do not hold any NFTs at the contract address (contract address)."
);
}
} catch (error) {
console.error(error);
}
}
return (
<>
<span className="beautiful-sentence">I have a secret message for holders of my NFT collection with <br></br>address (Contract Address)</span>
<br></br>
<br></br>
<button onClick={revealMsg}>Reveal Message</button>
</>
);
};

In this component:

• We use useLocation to access the user’s Ethereum address from the route state, which was passed when they connected their wallet.
• The revealMsg function sends a request to the server to check if the user owns NFTs associated with a specific contract address.
• If the user owns NFTs, they are navigated to the /members page where they can see the exclusive content.
• If the user doesn’t own any NFTs, they receive an alert message.

• The /members page, implemented in the Members.js component, is where users get to enjoy exclusive content. Here’s a simplified example:

import welcome from "../images/GM.png";
const Members = () => {
return (
<>
<p>Thank you for being a holder of my NFT collection, here's your message:</p>
<img src={welcome} alt="Welcome" />
</>
);
};
export default Members;

In this component, we’re displaying a thank-you message and an image as exclusive content for NFT holders.

To bring it all together, we have the main application in App.js. It sets up routing using the React Router library, directing users to the appropriate components based on the URL.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Wallet from "./components/Wallet";
import Home from "./components/Home";
import Members from './components/Member';
import './App.css';
function App() {
const router = createBrowserRouter([
{ path: '/', element: <Wallet /> },
{ path: '/home', element: <Home /> },
{ path: '/members', element: <Members /> }
]);
return (
<div id="root">
<RouterProvider router={router} />
</div>
);
}
export default App;

With this React application, you’ve embarked on a journey into the world of NFT-powered experiences. Users can connect their wallets, check NFT ownership, and unlock exclusive content, creating a dynamic and engaging user experience.

Remember, this is just the beginning. You can expand and customize these concepts to create even more exciting NFT-powered features in your applications. The possibilities are endless, and as the NFT ecosystem evolves, you can stay at the forefront of innovation.

Happy coding!

#NFTgating #NFT_access_control #NFT_Paywall