Add support for ERC721 tokens in TokenGate (#223)

* Add support for ERC721 tokens in TokenGate

* Create changeset

Author: Dhaiwat10

.changeset/shy-trees-rest.md

@@ -0,0 +1,6 @@
+---
+'@web3-ui/core': minor
+'@web3-ui/hooks': patch
+---
+
+The TokenGate component in the core package now supports ERC721 tokens. The hooks package now also exports the ERC721 ABI

packages/core/README.md

@@ -72,7 +72,7 @@ import { ConnectWallet } from '@web3-ui/core';
 
 ### TokenGate
 
-`TokenGate` lets you conditionally render some content depending on whether the current connected user has enough amount of a specific token. The component only supports ERC20 tokens at the moment but support for other standards is coming soon.
+`TokenGate` lets you conditionally render some content depending on whether the current connected user has enough amount of a specific token. The component only supports ERC20 and ERC721 (NFTs) tokens at the moment but support for other standards is coming soon.
 
 #### Usage
 
@@ -85,6 +85,7 @@ import { TokenGate } from '@web3-ui/core';
   deniedContent={
     <p>This message will show up if the user doesn't have enough tokens.</p>
   }
+  tokenType="ERC721" // optional, defaults to ERC20
 >
   <h1>This message will be visible if the user has enough tokens.</h1>
 </TokenGate>;

packages/core/src/components/TokenGate/TokenGate.stories.tsx

@@ -1,5 +1,6 @@
 import { Container, Heading } from '@chakra-ui/react';
 import { NETWORKS } from '@web3-ui/hooks';
+import { ethers } from 'ethers';
 import React from 'react';
 import { ConnectWallet, Provider } from '..';
 import { TokenGate } from './TokenGate';
@@ -11,8 +12,8 @@ export default {
     Story => {
       return (
         <Provider
-          network={NETWORKS.rinkeby}
-          rpcUrl="https://rinkeby.infura.io/v3/21bc321f21a54c528dc084f5ed7f8df7"
+          network={NETWORKS.mainnet}
+          rpcUrl="https://mainnet.infura.io/v3/21bc321f21a54c528dc084f5ed7f8df7"
         >
           <ConnectWallet />
           <Story />
@@ -22,22 +23,41 @@ export default {
   ]
 };
 
-export const Default = () => {
+export const ERC20 = () => {
   return (
     <TokenGate
-      tokenContractAddress="0x08149745590e9025b52b6801e9dd3E752e60F3A2"
+      tokenContractAddress="0x6B175474E89094C44Da98b954EedeAC495271d0F"
       deniedContent={
         <Container mt={10}>
-          <Heading>You don't own enough $dUSDT</Heading>
+          <Heading>You don't own enough $DAI</Heading>
         </Container>
       }
+      requiredQuantity={+ethers.utils.parseEther('0.1')}
     >
       <Container mt={10}>
         <Heading>
           {' '}
-          You are a fellow $dUSDT holder. Welcome to the club! 🥳
+          You are a fellow $DAI holder. Welcome to the club! 🥳
         </Heading>
       </Container>
     </TokenGate>
   );
 };
+
+export const ERC721 = () => {
+  return (
+    <TokenGate
+      tokenContractAddress="0x25ed58c027921e14d86380ea2646e3a1b5c55a8b"
+      deniedContent={
+        <Container mt={10}>
+          <Heading>You don't own a Developer DAO genesis NFT.</Heading>
+        </Container>
+      }
+      requiredQuantity={1}
+    >
+      <Container mt={10}>
+        <Heading> You are a fellow D_D member. Welcome to the club! 🥳</Heading>
+      </Container>
+    </TokenGate>
+  );
+};

packages/core/src/components/TokenGate/TokenGate.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { TokenGate as PrivTokenGate } from '@web3-ui/components';
 import { useReadOnlyContract, useWallet } from '@web3-ui/hooks';
-import { ERC20ABI } from '@web3-ui/hooks/src/constants';
+import { ERC20ABI, ERC721ABI } from '@web3-ui/hooks/src/constants';
 import { BigNumber, ethers } from 'ethers';
 
 export interface TokenGateProps {
@@ -21,6 +21,10 @@ export interface TokenGateProps {
    * Optional message that is displayed if access denied i.e. the user does not hold enough tokens. Default=null
    */
   deniedContent?: React.ReactNode;
+  /**
+   * The token type. ERC20 and ERC721 are supported. Default=ERC20
+   */
+  tokenType?: 'ERC20' | 'ERC721';
 }
 
 /**
@@ -30,13 +34,15 @@ export const TokenGate = ({
   children,
   tokenContractAddress,
   requiredQuantity = +ethers.utils.parseEther('1'),
-  deniedContent = null
+  deniedContent = null,
+  tokenType = 'ERC20'
 }: TokenGateProps) => {
+  const contractAbi = tokenType === 'ERC20' ? ERC20ABI : ERC721ABI;
   const { connection } = useWallet();
   const { userAddress } = connection;
   const [tokenContract, isReady] = useReadOnlyContract(
     tokenContractAddress,
-    ERC20ABI
+    contractAbi
   );
   const [balance, setBalance] = useState<BigNumber>();