Add TokenGate to core (#214)

* Add `TokenGate` to `core`

* Add changeset

* Add `ethers` to peer dependenices for the core package

Author: Dhaiwat10

.changeset/clean-lobsters-kiss.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/core': minor
+---
+
+The core package now has a TokenGate that lets you conditionally render some content depending on whether a user owns some amount of a token or not.

packages/core/README.md

@@ -33,6 +33,7 @@ This is the list of components the package currently provides:
 
 - [Provider](#provider)
 - [ConnectWallet](#connectwallet)
+- [TokenGate](#tokengate)
 
 ---
 
@@ -48,7 +49,7 @@ See [Getting Started](#getting-started) for an example.
 
 ### ConnectWallet
 
-The `ConnectWallet` is a `Button` based component with the following behaviour:
+`ConnectWallet` is a `Button` based component with the following behaviour:
 
 When wallet is connected,
 
@@ -69,6 +70,28 @@ 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.
+
+#### Usage
+
+```tsx
+import { TokenGate } from '@web3-ui/core';
+
+<TokenGate
+  tokenContractAddress="0x08149745590e9025b52b6801e9dd3E752e60F3A2"
+  requiredQuantity={+ethers.utils.parseEther('1')} // the component expects the amount in wei.
+  deniedContent={
+    <p>This message will show up if the user doesn't have enough tokens.</p>
+  }
+>
+  <h1>This message will be visible if the user has enough tokens.</h1>
+</TokenGate>;
+```
+
+---
+
 ## Hooks
 
 This package exports all the hooks provided by the [`@web3-ui/hooks` package](https://npmjs.com/package/@web3-ui/hooks).

packages/core/package.json

@@ -46,7 +46,8 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "ethers": "^5.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.7",
@@ -59,7 +60,6 @@
     "@web3-ui/hooks": "^0.8.0",
     "babel-loader": "^8.2.1",
     "classnames": "^2.2.6",
-    "ethers": "^5.5.1",
     "identity-obj-proxy": "^3.0.0",
     "prettier": "^2.2.0",
     "react": "^17.0.2",

packages/core/src/components/Provider/Provider.tsx

@@ -2,10 +2,18 @@ import React from 'react';
 import { Provider as HooksProvider } from '@web3-ui/hooks';
 import { Provider as ComponentsProvider } from '@web3-ui/components';
 
-export const Provider = ({ network, children }) => {
+interface ProviderProps {
+  children: React.ReactNode;
+  network: number;
+  rpcUrl?: string;
+}
+
+export const Provider = ({ network, children, rpcUrl }: ProviderProps) => {
   return (
     <ComponentsProvider>
-      <HooksProvider network={network}>{children}</HooksProvider>
+      <HooksProvider network={network} rpcUrl={rpcUrl}>
+        {children}
+      </HooksProvider>
     </ComponentsProvider>
   );
 };

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

@@ -0,0 +1,43 @@
+import { Button } from '@chakra-ui/react';
+import { NETWORKS, useWallet } from '@web3-ui/hooks';
+import React from 'react';
+import { ConnectWallet, Provider } from '..';
+import { TokenGate } from './TokenGate';
+
+export default {
+  component: TokenGate,
+  title: 'Core/TokenGate',
+  decorators: [
+    Story => {
+      return (
+        <Provider
+          network={NETWORKS.rinkeby}
+          rpcUrl="https://rinkeby.infura.io/v3/21bc321f21a54c528dc084f5ed7f8df7"
+        >
+          <ConnectWallet />
+          <Story />
+        </Provider>
+      );
+    }
+  ]
+};
+
+export const Default = () => {
+  const { correctNetwork, switchToCorrectNetwork } = useWallet();
+
+  return (
+    <>
+      {!correctNetwork && (
+        <Button onClick={switchToCorrectNetwork}>
+          Switch to correct network
+        </Button>
+      )}
+      <TokenGate
+        tokenContractAddress="0x08149745590e9025b52b6801e9dd3E752e60F3A2"
+        deniedContent={<p>You don't have enough dUSDT</p>}
+      >
+        <div>You have more than 1 dUSDT.</div>
+      </TokenGate>
+    </>
+  );
+};

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

@@ -0,0 +1,67 @@
+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 { BigNumber, ethers } from 'ethers';
+
+export interface TokenGateProps {
+  /**
+   * The content that will be displayed if the user holds the required number of tokens.
+   */
+  children: React.ReactNode;
+  /**
+   * The contract address of the token you want to gate your content using.
+   */
+  tokenContractAddress: string;
+  /**
+   * The token quantity required to access child component in wei. Default=1 ether.
+   */
+  requiredQuantity?: number;
+  /**
+   * Optional message that is displayed if access denied i.e. the user does not hold enough tokens. Default=null
+   */
+  deniedContent?: React.ReactNode;
+}
+
+/**
+ * A 'token gate' that renders some content depending on whether the user has the required quantity of a token or not.
+ */
+export const TokenGate = ({
+  children,
+  tokenContractAddress,
+  requiredQuantity = +ethers.utils.parseEther('1'),
+  deniedContent = null
+}: TokenGateProps) => {
+  const { connection } = useWallet();
+  const { userAddress } = connection;
+  const [tokenContract, isReady] = useReadOnlyContract(
+    tokenContractAddress,
+    ERC20ABI
+  );
+  const [balance, setBalance] = useState<BigNumber>();
+
+  const fetchBalance = useCallback(async () => {
+    if (isReady && userAddress && tokenContract) {
+      const balance: BigNumber = await tokenContract.balanceOf(userAddress);
+      setBalance(balance);
+    }
+  }, [isReady, userAddress, tokenContract]);
+
+  useEffect(() => {
+    fetchBalance();
+  }, [fetchBalance]);
+
+  if (!balance) {
+    return null;
+  }
+
+  return (
+    <PrivTokenGate
+      walletBalance={+balance.toString()}
+      deniedMessage={deniedContent}
+      requiredQuantity={requiredQuantity}
+    >
+      {children}
+    </PrivTokenGate>
+  );
+};

packages/core/src/components/TokenGate/index.ts

@@ -0,0 +1 @@
+export { TokenGate } from './TokenGate';

packages/core/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './ConnectWallet';
 export * from './Provider';
+export * from './TokenGate';

packages/hooks/src/stories/UseContract.stories.tsx

@@ -167,7 +167,7 @@ const ReadContract = () => {
 storiesOf('Hooks/useReadContract', module).add('Default', () => (
   <Provider
     network={NETWORKS.rinkeby}
-    readOnlyProviderUrl="https://rinkeby.infura.io/v3/INFURA_ID"
+    rpcUrl="https://rinkeby.infura.io/v3/21bc321f21a54c528dc084f5ed7f8df7"
   >
     <ReadContract />
   </Provider>