GPT4 made me do it ...

How I used GPT4 to create a Web3 token-gate website with zero coding experience. So I made this Free Guide to Token-Gating Embeds and a free NFT Drop

Apr 18, 2023

Tomorrow I’m releasing a new Ai experimental Art NFT and wanted to create token-gated content for the website for an old-school Web3-based scavenge hunt. And remember, before you start reading, I have close to zero coding knowledge.

TL/DR - Over the weekend, I used GTP4 to Token-gate a website with zero, literally, coding knowledge. And any creator can easily use this to create content behind a wall on their websites.

First, I shared a model to train it. What I found that works best was CoinBase NFT token gating via token-gating embed. I went to the documentation and fed it all. Feel free to check it out; quite useful.

It would have worked just fine, I tested with @CreativeFriendz, and it worked beautifully, but ... CoinBase marketplace took a while to index my new collection contract, so I was faced with finding a custom alternative.

It works; it’s free and easy to implement via a few copy-paste codes on any website via HTML embed. It’s mind-blowing how this tool can revolutionize how each creative interest in any tech or code.

Ai generative 90s pixel art? I wanted to test out OpenSea contract deployment via their Seaport ERC721A smart contracts. So I created a free experimental art NFT Drop Mint. I’ll write about this full experience in my next post.

Check Out the FREE NFT Drop Page

Prerequisites

Familiarity with HTML, CSS, and JavaScript. I’m using WebFlow
An Ethereum wallet like MetaMask is installed on your browser.
A deployed NFT contract on Ethereum mainnet.
An IPFS account to store the ABI JSON file. (e.g Pinata)

Step 1: Add the Token-Gating Library

Add the Web3.js library to your website by inserting the following script tag into your HTML file header section:

<script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script>

Step 2: Obtain the ABI and Upload to IPFS

To obtain the ABI from your deployed smart contract and upload it to IPFS, follow these steps:

Go to your contract source code or deployment platform (e.g., Etherscan, Remix IDE, or Truffle). Locate the ABI section in the contract tab.
Copy the entire ABI JSON object, and paste it into a new file on your computer.
Save the file as ABI.json.
Upload the ABI.json file to IPFS using a service like Pinata (my favorite IPFS provided). After uploading, you'll receive a CID (Content Identifier) for the uploaded file.

Now you can proceed with Step 3 and use the CID and contract hash in your JavaScript code embed.

Step 3: Add the JavaScript Code

Copy and paste the provided JavaScript code into your HTML file. Make sure to replace the cid value in the fetchABI() function with the CID you get after uploading the ABI JSON file to IPFS. And update all the other values, including the page to redirect after validation and the message you want to give the users

I’ve pasted this into the <head> custom code embed section in WebFlow. It’s the same on Squarespace, Wix, or WordPress. Look for the <head> code injection section.

<!-- Token-Gating Web3 library -->
<script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script>

<!-- Token-Gating Script -->
<script type="text/javascript">
  let web3;
  let userAddress;

  async function fetchABI() {
    try {
      const ipfsGateway = "https://ipfs.io/ipfs/";
      const cid = "YOUR ABI.JSON CID GOES HERE"; // Replace this with the CID you get after uploading the ABI JSON file to IPFS.
      const response = await fetch(ipfsGateway + cid);
      const abi = await response.json();
      return abi;
    } catch (error) {
      console.error("Failed to fetch ABI", error);
      return [];
    }
  }

  async function connectWallet() {
    if (window.ethereum) {
      web3 = new Web3(window.ethereum);
      try {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        userAddress = accounts[0];
        checkNFTOwnership();
      } catch (error) {
        console.error("User denied account access");
      }
    } else {
      console.error("No Ethereum provider detected");
    }
  }

  async function checkNFTOwnership() {
    const collectionSmartContractAddress = 'YOUR CONTRACT ADDRESS';
    const nftContractABI = await fetchABI();
    
    const nftContract = new web3.eth.Contract(nftContractABI, collectionSmartContractAddress);
    const balance = await nftContract.methods.balanceOf(userAddress).call();

    if (balance > 0) {
      console.log("YOUR VERIFIED MESSAGE TO USER!");
      sessionStorage.setItem("nft_verified", "true");
      window.location.href = "THE URL WHERE THE USER WILL GO";
    } else {
      console.log("THE NON_VERIFIED MESSAGE TO USER.");
    }
  }

  window.onload = function() {
    connectWallet();
  };
</script>

Step 4: Insert HTML Code into the Body

Depending on your desired user experience, choose one of the following options and insert the corresponding HTML code into the body of your web page:

Option 1: Load on Page Load

Automatically call the connectWallet() function when the page loads:

<!-- Call connectWallet() immediately when the page loads -->
<script type="text/javascript">
  window.onload = function() {
    connectWallet();
  };
</script>

Option 2: Button Trigger

Allow users to trigger the manually connectWallet() function by clicking a button:

<!-- Connect wallet button -->
<button onclick="connectWallet()">Connect Metamask</button>

Choose either Option 1 or Option 2 and insert the corresponding HTML code snippet into the <body> section of your web page. This will either automatically start the wallet connection process when the page loads or allow users to initiate the process with a button click.

Step 5: Add Verification Check to Internal Pages

On each internal page that requires verification, add the following JavaScript code inside the <script> tag:

function verifyAccess() {
  if (sessionStorage.getItem("nft_verified") !== "true") {
    window.location.href = "YOUR URL GOES HERE"; // Replace with the URL of your token-gated homepage
  }
}

window.onload = function () {
  verifyAccess();
};

Step 6: Test Your Token-Gated Website

Open your website in a browser with MetaMask installed.
The website should automatically prompt you to connect your MetaMask wallet.
If the wallet contains the required NFT, the user will be granted access to the internal pages.

With these steps completed, you now have kind of a basic token-gated website that only allows access to users with the required NFT in their wallet. It’s not perfect. It works on Metamask only and is optimized for Desktops for now.

I’ll keep talking with GPT to help me improve the code.

Thank you for reading The Untitled Handbook. This post is public, so feel free to share it.

Disclaimer: This is a newsletter, and you can opt-out at any time; there’s a link below to unsubscribe automatically. All the opinions are my own and do not reflect the opinions and beliefs of my employers, affiliates, or business partners.

The Untitled Handbook