Token gate #121

hone1er · 2021-12-14T16:21:05Z

Closes #98

Description

This component restricts access to all child components unless certain erc-20/erc-721 token requirements are met. It takes as parameters a provider and contract address, and required number of tokens(defaults to 1) as props to determine access.

📝 Additional Information

Definitely would like some feedback on what should be returned by default in a few different cases. For example with no wallet connected it currently will return null by default unless a "deniedMessage" is provided.

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

changeset-bot · 2021-12-14T16:21:07Z

🦋 Changeset detected

Latest commit: 9da1577

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@web3-ui/components	Minor
@web3-ui/core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

AlexNi245 · 2021-12-14T19:33:28Z

You should merge the current main branch into this one to resolve the merge conflicts

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

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

AlexNi245 · 2021-12-14T19:51:14Z

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

+  useEffect(() => {
+    async function setBalance() {
+      const balance = await getTokenBalance();
+      setTokenQuantity(parseInt(balance, 16));


useTokenBalance also provides a field formattedBalance to display a user-readable and correctly calculated balance

Dhaiwat10

Thanks for the PR! Left a few questions.

Also, for some reason I cannot see these two stories

Dhaiwat10 · 2021-12-18T21:36:55Z

packages/components/src/components/Address/Address.test.tsx

@@ -6,7 +6,7 @@ import { Address } from './Address';

 /**
 * We need to mock the Clipboard API by creating a global navigator object.
- * 
+ *


Can you revert all the changes in this file? I think it's not related to your PR. Let's keep the Git history and blame clean!

My bad i totally did that on accident. Showing my noobness to open-source. Will do.

@hone1er no you're good haha

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

Dhaiwat10 · 2021-12-18T21:40:12Z

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

+  const [loadedStatus, setloadedStatus] = useState<boolean>(false);
+  // connect to contract address to get balance
+  async function getTokenBalance() {
+    const signer = provider!.getSigner();


Do we need a signer to read data?

If we do need a signer in all cases, what do you think of accepting a signer as a prop instead of a provider?

That would work. But should we take the signer at all? Or should we allow the dev to pass the quantity held by the wallet?

In the core package it would use the get balance hook to provide that for the dev.

Maybe the dev has the wallet balance in their app's state already so fetching the balance for them could be undesirable.

And if they want the balance fetched for them they can use the core package version.

In the core package it would use the get balance hook to provide that for the dev. Maybe the dev has the wallet balance in their app's state already so fetching the balance for them could be undesirable.

With you on this. Let's just take the balance as a prop :)

@hone1er do you also want to add Token Gate to core in this PR?

@Dhaiwat10 Yeah i can add it to core as well. I do that in a new folder in core/src/components?

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

hone1er · 2021-12-18T22:22:20Z

Thanks for the PR! Left a few questions.

Also, for some reason I cannot see these two stories

On these it is because the default returns null if access is denied. So, access denied default should always be empty, and with loader should show a spinner while loading then show reactNode if you get access or null(the default) if you don't. With loader requires you to hold at least 1 DevDao NFT in the wallet you connected.

…updated component

hone1er

I removed much of the logic. Now it just takes the walletBalance instead of taking a provider and fetching the balance. Still need to revert that change to address.test.tsx.

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

hone1er · 2021-12-20T00:27:14Z

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

+  const [loadedStatus, setloadedStatus] = useState<boolean>(false);
+  // connect to contract address to get balance
+  async function getTokenBalance() {
+    const signer = provider!.getSigner();


@Dhaiwat10 Yeah i can add it to core as well. I do that in a new folder in core/src/components?

hone1er · 2021-12-20T00:29:31Z

packages/components/src/components/Address/Address.test.tsx

@@ -6,7 +6,7 @@ import { Address } from './Address';

 /**
 * We need to mock the Clipboard API by creating a global navigator object.
- * 
+ *


My bad i totally did that on accident. Showing my noobness to open-source. Will do.

Dhaiwat10

Looks good. Left some suggestions :)

Dhaiwat10 · 2021-12-20T10:40:30Z

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

+  /**
+   * The provider or signer to fetch the address from the ens
+   */
+  walletBalance: number;


You forgot to update the docstring! 😄

Dhaiwat10 · 2021-12-20T10:41:04Z

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

+  children,
+  deniedMessage,
+}) => {
+  console.log(walletBalance);


Let's remove this console.log

Dhaiwat10 · 2021-12-20T10:41:21Z

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

+}) => {
+  console.log(walletBalance);
+
+  // return children within simple container(className optional)


Suggested change

// return children within simple container(className optional)

// return children within simple container

…ted docstring for TokenGate and removed console.log from file.

hone1er

Implemented changes suggested by @Dhaiwat10

Fixed whitespace in Address.test.tsx to keep history clean. Removed console.log statement. Updated the docstring.

Dhaiwat10 · 2021-12-22T11:25:43Z

@allcontributors add @hone1er for code

allcontributors · 2021-12-22T11:25:52Z

@Dhaiwat10

I've put up a pull request to add @hone1er! 🎉

hone1er and others added 5 commits December 13, 2021 14:24

Version Packages (#109)

9758bf6

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fixed tokenQuantity default

c611a56

storybook working with web3hooks

bf73d00

completed default, web3 hook, and denied access story

5220311

changed deniedMessage from string to ReactNode

ce80baa

AlexNi245 reviewed Dec 14, 2021

View reviewed changes

packages/components/src/components/TokenGate/TokenGate.stories.tsx Outdated Show resolved Hide resolved

AlexNi245 reviewed Dec 14, 2021

View reviewed changes

packages/components/src/components/TokenGate/TokenGate.stories.tsx Outdated Show resolved Hide resolved

AlexNi245 reviewed Dec 14, 2021

View reviewed changes

packages/components/src/components/TokenGate/TokenGate.tsx Outdated Show resolved Hide resolved

AlexNi245 reviewed Dec 14, 2021

View reviewed changes

packages/components/src/components/TokenGate/TokenGate.tsx Outdated Show resolved Hide resolved

AlexNi245 reviewed Dec 14, 2021

View reviewed changes

hone1er added 4 commits December 14, 2021 13:06

updated requiredQuantity logic in story

7ac2da6

merge main into branch

e7d55ea

added ERC20ABI from hooks/src/constants

fa1e04a

added ERC20ABI from hooks/src/constants

4671a28

hone1er added the component label Dec 15, 2021

Dhaiwat10 self-requested a review December 16, 2021 11:43

naz3eh mentioned this pull request Dec 16, 2021

Getting window.ethereum undefined in chromatic. #127

Closed

hone1er added 2 commits December 17, 2021 10:17

Merge branch 'main' into tokenGate

3fce075

changeset added

59e757e

Dhaiwat10 requested changes Dec 18, 2021

View reviewed changes

removed logic from TokenGate component. Changed stories to work with …

f052a51

…updated component

hone1er commented Dec 20, 2021

View reviewed changes

Dhaiwat10 requested changes Dec 20, 2021

View reviewed changes

Dhaiwat10 mentioned this pull request Dec 20, 2021

TokenBalance Component #97

Closed

added whitespace back to Address.test.tsx to keep history clean. Upda…

68ef3c8

…ted docstring for TokenGate and removed console.log from file.

hone1er commented Dec 20, 2021

View reviewed changes

Merge branch 'main' into tokenGate

9da1577

Dhaiwat10 merged commit aa9b2f6 into main Dec 22, 2021

Dhaiwat10 deleted the tokenGate branch December 22, 2021 11:23

github-actions bot mentioned this pull request Dec 22, 2021

Version Packages #123

Merged

allcontributors bot mentioned this pull request Dec 22, 2021

docs: add hone1er as a contributor for code #140

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Token gate #121

Token gate #121

hone1er commented Dec 14, 2021 •

edited

Loading

changeset-bot bot commented Dec 14, 2021 •

edited

Loading

AlexNi245 commented Dec 14, 2021

AlexNi245 Dec 14, 2021

Dhaiwat10 left a comment

Dhaiwat10 Dec 18, 2021

hone1er Dec 20, 2021

Dhaiwat10 Dec 20, 2021

Dhaiwat10 Dec 18, 2021

hone1er Dec 18, 2021 •

edited

Loading

Dhaiwat10 Dec 19, 2021

Dhaiwat10 Dec 19, 2021

hone1er Dec 20, 2021

hone1er commented Dec 18, 2021

hone1er left a comment

hone1er Dec 20, 2021

hone1er Dec 20, 2021

Dhaiwat10 left a comment

Dhaiwat10 Dec 20, 2021

Dhaiwat10 Dec 20, 2021

Dhaiwat10 Dec 20, 2021

hone1er left a comment

Dhaiwat10 commented Dec 22, 2021

allcontributors bot commented Dec 22, 2021

	// return children within simple container(className optional)
	// return children within simple container

Token gate #121

Token gate #121

Conversation

hone1er commented Dec 14, 2021 • edited Loading

Description

📝 Additional Information

changeset-bot bot commented Dec 14, 2021 • edited Loading

🦋 Changeset detected

AlexNi245 commented Dec 14, 2021

Choose a reason for hiding this comment

Dhaiwat10 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hone1er Dec 18, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hone1er commented Dec 18, 2021

hone1er left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dhaiwat10 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hone1er left a comment

Choose a reason for hiding this comment

Dhaiwat10 commented Dec 22, 2021

allcontributors bot commented Dec 22, 2021

hone1er commented Dec 14, 2021 •

edited

Loading

changeset-bot bot commented Dec 14, 2021 •

edited

Loading

hone1er Dec 18, 2021 •

edited

Loading