Unlock Membership Tiers for Kickback #220

edsonayllon · 2019-12-10T02:08:12Z

Issue number

Description

@julien51 The Kickback team wants to provide paid benefits for people willing to deploy their own kickback contract. In order to do that, the kickback will deploy one or more locks (one for each level of benefits).

The front-end form will then ensure that the user owns a key to any of the kickback locks in order to deploy their kickback contract. If the user does not have a key, they are offered the ability to purchase a key to any of the lock (either thru crypto or credit card) thru Unlock.
[...]

See issue #209 linked.

In this PR, unlock displays page, as seen in the image below, requesting membership to view requested content. Once verified, form to deploy kickback contract is displayed to the user with membership status.

List of features added/changed

Adds membership tiers paywall for /create

How Has This Been Tested?

Testing done in Rinkeby. If account does not have membership token, form is not displayed. Purchase of membership token tested. Form displays after purchase. Switching to an account with no membership token shows restricted page again, as expected.

React-Router has also been updated to include history as a hook. Browsing other pages show routing is still working as expected.

Screenshots (if appropriate):

Checklist:

My code follows the code style of this project.
My code implements all the required features.

…ation

makoto · 2019-12-10T21:31:03Z

Hi, @edsonayllon . Thank you for the submission. When I tested locally, Clicking the "Unlock membership? didn't do anything.

I can also see "An error occurred on client" message (highlighted in red).

I can also see some error messages on console when I first load the /create page cc @julien51

edsonayllon · 2019-12-10T21:57:06Z

@makoto Yes, currently this PR isn't ready for review (marked as Work in Progress).

I ran into this issue yesterday. I talked to @julien51 and it seems Unlock's paywall app is only deployed on Rinkeby testnet, however, the addresses provided were for Kovan. Julien's provided me keys for Rinkeby which I'll test soon.

The Readme for the app includes instructions for Kovan, but package.json shows Rinkeby is available. Is there any documentation available for using Kickback on Rinkeby?

edsonayllon · 2019-12-11T05:07:53Z

Sorry, closed the PR by accident.

In 292b7b0 when using Rinkeby.

Remaining is having Unlock load depending on either Rinkeby or Mainnet.

@julien51 stated in #209 src/config/env.json can somehow be used.

edsonayllon · 2019-12-11T05:23:23Z

Build is passing, but tests are failing from needing credentials.

edsonayllon · 2019-12-11T19:54:22Z

@makoto This PR should be ready for review.

682d830 Network for Unlock is selected based on NODE_ENV which can be development, staging, or deployment depending on build or start scripts.

Dynamically selecting the network for Unlock was a bit tricky. Unlock is configured in public/index.html, as seen through the docs and their React example on the Unlock Github. I didn't see a way to access env.json from the public folder. Discovering the current network by importing the dist of web3.js would increase load times of the app, so I avoided that as well.

To work around these, seeing the testnet version of Unlock would only be accessed during development or staging, and the mainnet verion of Unlock would be accessed in deployment, I set dynamically choosing the network based on the Environment Variable NODE_ENV.

Again, currently Unlock Paywall is only compatible with Rinkeby and Mainnet, so testing should be done on Rinkeby. I've left the unlock keys for Mainnet empty, so make sure to enter those when your team creates them.

julien51 · 2019-12-11T21:01:21Z

public/index.html

+    // unlock config must use var
+    var unlockProtocolConfig = {
+      locks,
+      icon: 'https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg',


This could be changed to a Kickback logo ;)

Good idea. Changed in a60f5f7. It looks like only public urls are compatible with Unlock, so I used https://kickback.events/card.png.

makoto · 2019-12-11T21:21:45Z

Hi,

Can you write an instruction on how to test on my local machine? I just did NODE_ENV=development yarn start and opened my browser pointing network to Rinkeby but it shows "Wrong network", and pointing to mainnet does not seem to load locks.

edsonayllon · 2019-12-11T22:01:57Z

@makoto NODE_ENV is defined automatically by create-react-app (CRA), seeing if either react-scripts start or react-scripts build is used. Starting with yarn start should have the environment default to "development". Anything running yarn build should change the environment to "production". I'm not entirely sure if NODE_ENV can be manually set in CRA.

The red message box indicating wrong network is configured by src/config/env.json. By default that's set to Kovan, and displays this error if Rinkeby is used. However, the Paywall only works in Rinkeby or Mainnet, as stated before. So switching to Rinkeby should load locks and allow purchasing, but will display "wrong network" on the Kickback app. Once a token is purchased in Rinkeby, switching to Kovan should still show the form, and remove the error message if configured to Kovan. Because Unlock is set to default to Rinkeby unless the app is built for production, which sets it to Mainnet, if the account owns the token in Rinkeby it will still display the field even if the account provider changes network.

edsonayllon · 2019-12-11T23:02:03Z

Note: I changed the component Create to a functional component using hooks, as the Readme Contribution Style Guide said the app is transitioning in that direction anyway.

I can change it back to a class component, if your team prefers.

makoto · 2019-12-12T09:36:19Z

So is this the correct config?

$more src/config/env.json
{
  "API_URL": "https://kovan.api.kickback.events",
  "NUM_CONFIRMATIONS": 1,
  "ENV": "rinkeby"
}

I am still getting "Wrong network" on unlock.

Also Is it possible to disable Unlock if ENV=local ? Otherwise we cannot test when we are testing against local server and ganache.

edsonayllon · 2019-12-12T15:03:32Z

@makoto Can you verify that you pulled the latest commits? Also, what are the steps you are taking to run the app? And what browser and OS?

As for disabling Unlock, I can disable the paywall, and display the Create form by default if ENV=local in env.json. However, preventing the script from running in public/index.html would be more complicated. I'm guessing, however, you only need the form to show in ganache.

edsonayllon · 2019-12-13T00:42:04Z

595316b Paywall is disabled if env.json sets ENV to local network, displaying "Create" form.

Is something wrong with https://kovan.api.kickback.events/graphql? It's throwing errors in the console.

makoto · 2019-12-13T12:09:52Z

Hi, @edsonayllon kovan was down but now up. You can also test with https://rinkeby.kickback.events/create . Still not fully up and running but at least you can test the account creation page.

makoto · 2019-12-13T12:49:31Z

umm, I deployed your branch to both rinkeby and kovan but both are showing spinning message.

{
  "DEPLOYER_CONTRACT_ADDRESS": "0x8fE91259DC1F723d01b87Cf29534d8484F70e7Bc",
  "API_URL": "https://rinkeby.api.kickback.events",
  "NUM_CONFIRMATIONS": 1,
  "ENV": "rinkeby",
  "GIT_COMMIT": "595316b9f82d516e64ffda03cffe7b5e0a82a9d1",
  "ROLLBAR_TOKEN": "e676d64e462b48d098a12db8a173598a",
  "BLOCKNATIVE_DAPPID": "27b3eac2-e46c-428a-9a0c-56cce2725d42",
  "MIXPANEL_ID": "28243587317e7b2d8a669dcce23302cb"
}

{
  "DEPLOYER_CONTRACT_ADDRESS": "0x8fE91259DC1F723d01b87Cf29534d8484F70e7Bc",
  "API_URL": "https://kovan.api.kickback.events",
  "NUM_CONFIRMATIONS": 1,
  "ENV": "kovan",
  "GIT_COMMIT": "595316b9f82d516e64ffda03cffe7b5e0a82a9d1",
  "ROLLBAR_TOKEN": "",
  "BLOCKNATIVE_DAPPID": "",
  "MIXPANEL_ID": "28243587317e7b2d8a669dcce23302cb"
}

Can you think of what would cause this?

makoto · 2019-12-13T12:53:42Z

Actually I am seeing the same spinning on localhost if ENV=rinkeby (ENV=local will just render the event creation page as requested. Thanks!)

edsonayllon · 2019-12-13T13:52:51Z

@makoto umm, I deployed your branch to both rinkeby and kovan but both are showing spinning message. Can you think of what would cause this?

Yup. "deploy:rinkeby" or "deploy:kovan" actually configures unlock for mainnet. Currently, there are placeholders for mainnet keys, and not real addresses, which would cause an error in the configuration. When there's an error in the config, the state never updates from loading to locked or unlocked.

I can think of a simple workaround to address that. Will do so after work.

makoto · 2019-12-13T20:30:30Z

Ah ok. Would you mind adding the description of how to set things up in our README so that I can just follow that?

…d instructions in README

edsonayllon · 2019-12-13T22:46:28Z

@makoto Ah ok. Would you mind adding the description of how to set things up in our README so that I can just follow that?

Added instructions in Readme. Deploy scripts now chooses appropriate Unlock network, limited to Rinkeby or Mainnet (all test networks default to Rinkeby for Unlock). c1f1908

makoto · 2019-12-15T14:39:04Z

Hi.
I was able to test the purchase flow.
Once purchased and the create page is shown, would it be possible to display what lock has been purchased?

For the deployed environment, I again deployed to https://rinkeby.kickback.events/create but getting the spinning image when connecting to either rinkeby or mainnet.
Here is the config when deploying to rinkeby.

$yarn deploy:rinkeby
yarn run v1.15.2
$ yarn build:release:rinkeby && yarn now -f --local-config .deploy/now.rinkeby.json --public && yarn now alias --local-config .deploy/now.rinkeby.json && yarn now rm kickback-app-rinkeby --safe --yes
$ REACT_APP_ENV=rinkeby yarn setup --rinkeby && yarn build
$ scripts/setup.js --rinkeby
{
  "DEPLOYER_CONTRACT_ADDRESS": "0x8fE91259DC1F723d01b87Cf29534d8484F70e7Bc",
  "API_URL": "https://rinkeby.api.kickback.events",
  "NUM_CONFIRMATIONS": 1,
  "ENV": "rinkeby",
  "GIT_COMMIT": "c1f1908d7da54ccdb89da409eeb4dd0a1ea5b283",
  "ROLLBAR_TOKEN": "e676d64e462b48d098a12db8a173598a",
  "BLOCKNATIVE_DAPPID": "27b3eac2-e46c-428a-9a0c-56cce2725d42",
  "MIXPANEL_ID": "28243587317e7b2d8a669dcce23302cb"
}

Can you check https://rinkeby.kickback.events/create and see if you are seeing the same spinning image?

edsonayllon · 2019-12-15T20:40:52Z

@makoto Once purchased and the create page is shown, would it be possible to display what lock has been purchased?

Something like this?

Added a1166a7.

@makoto For the deployed environment, I again deployed to https://rinkeby.kickback.events/create but getting the spinning image when connecting to either rinkeby or mainnet.

I tested and got the same thing building locally. The environment variable was written to pass with yarn setup which should have instead been with && yarn build. I corrected the placement, and added cross-env for compatibility with Windows.

Fixed a1166a7.

I added temporary keys for Mainnet, please replace these with your keys in public/index.html.

jefflau · 2019-12-16T02:57:25Z

src/routes/CreateEvent.js

+
+  useEffect(() => {
+    // remove unlock in component unmount1
+    return () => {


Can this not be bundled with the other useEffect's return statement?

You're right. dbc56b9

jefflau · 2019-12-16T02:59:21Z

public/index.html

+      Kovan lock is included for when kovan is supported by Unlock paywall
+      NOTE: Replace Mainnet keys with keys Kickback owns
+    */
+    const locks = {


Is there any way to abstract these into the main src directory. It's not very visible having the locks in the index.html.

I don't think so. I looked through Unlock's documentation, and looked at the React example in Unlock's Github. They had this config in public/index.html. I also don't think there's a way to import a file from src to public, else I'd be using env.json instead of passing environment variables through package.json. Unless @julien51 has any suggestions.

Actually... I think this just adds a variable to window. Let me test something

Ok. Locks moved to config/env.json in src. Readme updated as well with instructions. 393de51

makoto · 2019-12-16T20:42:38Z

Hi,I tried both local and https://rinkeby.kickback.events/ with the latest commit (b76de81) and still stack at spinning despite placing "LOCKS" in the src/config/env.json.

~/.../kickback/app (pr/220)$yarn deploy:rinkeby
yarn run v1.15.2
$ yarn build:release:rinkeby && yarn now -f --local-config .deploy/now.rinkeby.json --public && yarn now alias --local-config .deploy/now.rinkeby.json && yarn now rm kickback-app-rinkeby --safe --yes
$ yarn setup --rinkeby && cross-env REACT_APP_ENV=rinkeby yarn build
$ scripts/setup.js --rinkeby
{
  "DEPLOYER_CONTRACT_ADDRESS": "0x291CD2C3e7Cf7627Fd8caC837635b7d00e9c9700",
  "API_URL": "https://rinkeby.api.kickback.events",
  "NUM_CONFIRMATIONS": 1,
  "ENV": "rinkeby",
  "DAI_CONTRACT_ADDRESS": "0xc4375b7de8af5a38a93548eb8453a498222c4ff2",
  "GIT_COMMIT": "b76de810aad37b2ee082492505473b17e2329bff",
  "LOGROCKET_TOKEN": "",
  "ROLLBAR_TOKEN": "e676d64e462b48d098a12db8a173598a",
  "BLOCKNATIVE_DAPPID": "27b3eac2-e46c-428a-9a0c-56cce2725d42",
  "MIXPANEL_ID": "28243587317e7b2d8a669dcce23302cb",
  "LOCKS": "https://staging-app.unlock-protocol.com/dashboard/"
}

edsonayllon · 2019-12-16T21:47:42Z

@makoto Hi,I tried both local and https://rinkeby.kickback.events/ with the latest commit (b76de81) and still stack at spinning despite placing "LOCKS" in the src/config/env.json.

~/.../kickback/app (pr/220)$yarn deploy:rinkeby
yarn run v1.15.2
$ yarn build:release:rinkeby && yarn now -f --local-config .deploy/now.rinkeby.json --public && yarn now alias --local-config .deploy/now.rinkeby.json && yarn now rm kickback-app-rinkeby --safe --yes
$ yarn setup --rinkeby && cross-env REACT_APP_ENV=rinkeby yarn build
$ scripts/setup.js --rinkeby
{
  "DEPLOYER_CONTRACT_ADDRESS": "0x291CD2C3e7Cf7627Fd8caC837635b7d00e9c9700",
  "API_URL": "https://rinkeby.api.kickback.events",
  "NUM_CONFIRMATIONS": 1,
  "ENV": "rinkeby",
  "DAI_CONTRACT_ADDRESS": "0xc4375b7de8af5a38a93548eb8453a498222c4ff2",
  "GIT_COMMIT": "b76de810aad37b2ee082492505473b17e2329bff",
  "LOGROCKET_TOKEN": "",
  "ROLLBAR_TOKEN": "e676d64e462b48d098a12db8a173598a",
  "BLOCKNATIVE_DAPPID": "27b3eac2-e46c-428a-9a0c-56cce2725d42",
  "MIXPANEL_ID": "28243587317e7b2d8a669dcce23302cb",
  "LOCKS": "https://staging-app.unlock-protocol.com/dashboard/"
}

That locks config is wrong. Please follow the README.

https://github.com/wearekickback/app/blob/b76de810aad37b2ee082492505473b17e2329bff/README.md#setup

edsonayllon · 2019-12-16T23:45:16Z

@makoto I've updated setup.js for Rinkeby so the correct lock is automatically added. 2eee09a

makoto · 2019-12-17T22:46:28Z

src/routes/CreateEvent.js

+    let unlock = window.unlockProtocol.blockchainData()
+    let locks = Object.keys(unlock.locks).map(i => unlock.locks[i])
+    let bronze = locks.find(o => o.name.includes('Kickback Bronze'))
+    let gold = locks.find(o => o.name.includes('Kickback Gold'))


Is this part used to determine which lock I became the member of?

Does unlock.locks returns all the locks only purchased by the specific Ethereum account? I tested with 4 different metamask accounts where account 1~3 bought gold and account 4 bought bronze though it kept showing gold no matter which ETH account I switch into.

When I put console.log({locks}) under account 4 it had both bronze and gold hence looks like it picked gold regardless.

I wonder if unlock.locks just returns all the available locks, rather than the lock purchased by the purchaser (=event organiser). cc @julien51

So, it is undocumented, but the way to get the locks for which the user has a key is to do this:

const data = window.unlockProtocol.blockchainData() if (data.keys) { // They should be indexed by lock. // Let's assume there is only one valid. const lockAddress = Object.keys(data.keys)[0] }

@makoto I wonder if unlock.locks just returns all the available locks, rather than the lock purchased by the purchaser (=event organiser).

You're right.

@julien51 So, it is undocumented, but the way to get the locks for which the user has a key is to do this: [...]

data.keys returned all available locks as well for me. Tested by purchasing on a new account.

I used data.transaction instead to get the latest purchase. Then displayed the membership by the lock purchased. I left the full algorithm commented in updateUnlockUser().

Should display the correct membership owned now.

c0eaed3

makoto · 2019-12-18T17:42:43Z

LGTM @edsonayllon @julien51 . Thank you so much for being super patient with my constant feedback!

julien51

All good for me too!

@makoto Pleaase send me the lock addresses that you'd like to enable credit card for!

julien51 · 2020-01-07T13:53:35Z

Let's merge this so we can release the bounty! ;)
Happy new year everyone!

edsonayllon · 2020-01-17T19:23:46Z

@makoto @jefflau Any updates on this?

Converted /create page to functional component, started unlock integr…

536ec70

…ation

edsonayllon closed this Dec 10, 2019

edsonayllon reopened this Dec 10, 2019

converted paywall to Rinkeby

292b7b0

Unlock network selected based on React environment NODE_ENV

682d830

edsonayllon changed the title ~~[WIP] Unlock Membership Tiers for Kickback~~ Unlock Membership Tiers for Kickback Dec 11, 2019

edsonayllon mentioned this pull request Dec 11, 2019

A Kickback "license" #209

Closed

julien51 reviewed Dec 11, 2019

View reviewed changes

edsonayllon added 2 commits December 11, 2019 17:35

Changed logo displayed in unlock to Kickback

a60f5f7

Remove logo.svg from public folder

eda6bd5

removes paywall in /create for local network set in env.json

595316b

updated unlock environment selection by package.json parameters, adde…

c1f1908

…d instructions in README

fix for build env variables, displays membership keys in /create

a1166a7

edsonayllon added 2 commits December 15, 2019 15:42

edit comments

ca62713

Clean up public/index.hmtl

2170033

jefflau reviewed Dec 16, 2019

View reviewed changes

edsonayllon added 5 commits December 15, 2019 23:22

merge useEffects

dbc56b9

Minor. Typo in comment

f53d6be

moved lock addresses to env.json

393de51

Readme json fix

0c05ba2

Comment edits

b76de81

edsonayllon added 2 commits December 16, 2019 16:51

add to Readme

54149f1

update setup.js for Rinkeby

2eee09a

makoto reviewed Dec 17, 2019

View reviewed changes

edsonayllon and others added 2 commits December 17, 2019 19:14

fix membership ownership to correct ownership

c0eaed3

Minor change. Edit comment wording

173d5c3

makoto approved these changes Dec 18, 2019

View reviewed changes

julien51 approved these changes Dec 19, 2019

View reviewed changes

edsonayllon requested a review from jefflau December 20, 2019 20:04

Merge branch 'dev' into dev

c62e1e5

edsonayllon and others added 3 commits January 17, 2020 18:54

Merge branch 'dev' into dev

e5f3a30

Merge branch 'dev' into dev

ee72b5d

yarn.lock

7e1fa4b

makoto mentioned this pull request Feb 7, 2020

Unlock #284

Open

Unlock Membership Tiers for Kickback #220

Are you sure you want to change the base?

Unlock Membership Tiers for Kickback #220

Conversation

edsonayllon commented Dec 10, 2019 • edited Loading

Issue number

Description

List of features added/changed

How Has This Been Tested?

Screenshots (if appropriate):

Checklist:

makoto commented Dec 10, 2019

edsonayllon commented Dec 10, 2019 • edited Loading

edsonayllon commented Dec 11, 2019 • edited Loading

edsonayllon commented Dec 11, 2019 • edited Loading

edsonayllon commented Dec 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

makoto commented Dec 11, 2019

edsonayllon commented Dec 11, 2019 • edited Loading

edsonayllon commented Dec 11, 2019

makoto commented Dec 12, 2019

edsonayllon commented Dec 12, 2019 • edited Loading

edsonayllon commented Dec 13, 2019 • edited Loading

makoto commented Dec 13, 2019

makoto commented Dec 13, 2019

makoto commented Dec 13, 2019

edsonayllon commented Dec 13, 2019 • edited Loading

makoto commented Dec 13, 2019 • edited Loading

edsonayllon commented Dec 13, 2019 • edited Loading

makoto commented Dec 15, 2019

edsonayllon commented Dec 15, 2019 • 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

Choose a reason for hiding this comment

edsonayllon Dec 16, 2019 • edited Loading

Choose a reason for hiding this comment

makoto commented Dec 16, 2019

edsonayllon commented Dec 16, 2019

edsonayllon commented Dec 16, 2019

makoto Dec 17, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

makoto commented Dec 18, 2019

julien51 left a comment

Choose a reason for hiding this comment

julien51 commented Jan 7, 2020

edsonayllon commented Jan 17, 2020

edsonayllon commented Dec 10, 2019 •

edited

Loading

edsonayllon commented Dec 10, 2019 •

edited

Loading

edsonayllon commented Dec 11, 2019 •

edited

Loading

edsonayllon commented Dec 11, 2019 •

edited

Loading

edsonayllon commented Dec 11, 2019 •

edited

Loading

edsonayllon commented Dec 11, 2019 •

edited

Loading

edsonayllon commented Dec 12, 2019 •

edited

Loading

edsonayllon commented Dec 13, 2019 •

edited

Loading

edsonayllon commented Dec 13, 2019 •

edited

Loading

makoto commented Dec 13, 2019 •

edited

Loading

edsonayllon commented Dec 13, 2019 •

edited

Loading

edsonayllon commented Dec 15, 2019 •

edited

Loading

edsonayllon Dec 16, 2019 •

edited

Loading

makoto Dec 17, 2019 •

edited

Loading