Remove TokenGate (#324)

* Remove `TokenGate`

* Add changeset

Author: Dhaiwat10

.changeset/cold-years-kiss.md

@@ -0,0 +1,6 @@
+---
+'@web3-ui/components': minor
+'@web3-ui/core': minor
+---
+
+The `TokenGate` component has been removed since its implementation was insecure.

packages/components/README.md

@@ -35,7 +35,6 @@ This is the list of components the package currently provides:
 - [NFT](#nft)
 - [NFTGallery](#nftgallery)
 - [Provider](#provider)
-- [TokenGate](#tokengate)
 - [EtherInput](#etherinput)
 - [TokenBalance](#tokenbalance)
 
@@ -97,23 +96,6 @@ The Provider component is the `web3-ui` equivalent of ChakraUI's `ChakraProvider
 
 ---
 
-### TokenGate
-
-The TokenGate component lets you conditionally render some content depending on whether the user owns some quantity of tokens or not.
-
-```tsx
-<TokenGate
-  requiredQuantity={10}
-  walletBalance={walletBalance}
-  deniedMessage={<p>This will be rendered if walletBalance is less than 10.</p>}
->
-  <h1>You're eligible!</h1>
-  <p>This will be rendered if walletBalance is greater than or equal to 10.</p>
-</TokenGate>
-```
-
----
-
 ### EtherInput
 
 EtherInput is an input field that accepts values in _wei_ or _ether_. It always returns the value to you in _wei_ so that you can easily use it to interact with contracts without any conversions.

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

@@ -5,7 +5,6 @@ export * from './Address';
 export * from './NFTGallery';
 export * from './NFT';
 export * from './AddressInput';
-export * from './TokenGate';
 export * from './EtherInput';
 export * from './TokenBalance';
 export * from './MultiAddressInput';

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

@@ -33,7 +33,6 @@ This is the list of components the package currently provides:
 
 - [Provider](#provider)
 - [ConnectWallet](#connectwallet)
-- [TokenGate](#tokengate)
 - [TokenBalance](#tokenbalance)
 
 ---
@@ -71,29 +70,6 @@ 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 and ERC721 (NFTs) 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>
-  }
-  tokenType="ERC721" // optional, defaults to ERC20
->
-  <h1>This message will be visible if the user has enough tokens.</h1>
-</TokenGate>;
-```
-
----
-
 ### TokenBalance
 
 `TokeBalance` is a component that fetches and renders the balance of an ERC20 token for a given address.