Unlock Membership Tiers for Kickback

README.md

@@ -125,17 +125,60 @@ Add `src/config/env.json` with the following information
   "API_URL": "https://kovan.api.kickback.events",
   "NUM_CONFIRMATIONS": 1,
   "ENV": "kovan",
-  "DAI_CONTRACT_ADDRESS": "0x7d669a64deb8a4a51eea755bb0e19fd39ce25ae9"
+  "DAI_CONTRACT_ADDRESS": "0x7d669a64deb8a4a51eea755bb0e19fd39ce25ae9",
+  "LOCKS": {
+    "1": {
+      "0xa5bA2f45aFc9864bFA97CBb7D92BF8390744d529": {
+        "name": "Kickback Bronze Supporter"
+      }
+    },
+    "4": {
+      "0xb452A1BfE64036718aCeFC8B5F718E0c9d233cB8": {
+        "name": "Kickback Gold Supporter"
+      },
+      "0x70456ebD53E19eaE05932C482FeF1b24251ABb18": {
+        "name": "Kickback Bronze Supporter"
+      }
+    }
+  }
 }
 ```
 
+The format for "LOCKS" is the following:
+
+```
+"LOCKS": {
+  "<network id>": {
+    "<lock address>": {
+      "name": "<membership label>"
+    }
+  }
+}
+```
+
+Run the app.
+
+
 ```
 yarn start
 ```
 
 **Test creating a event locally**
 
+Event creation is has a paywall by Unlock. Unlock currently only supports Rinkeby and Mainnet. Using Kovan with your wallet will cause an error. 
+
+Rinkeby or Mainnet for Unlock is chosen with `package.json` scripts. Using `yarn build:release:` will select either Rinkeby or Mainnet depending on the script you use. These scripts are found in `package.json`. 
+
+Using `yarn build` will select Mainnet for Unlock. Using `yarn start` will select Rinkeby for unlock. These can be overwritten by entering a network with your start script. `REACT_APP_ENV=live yarn start` will have Unlock use Mainnet, and `REACT_APP_ENV=rinkeby yarn build` will have Unlock use Rinkeby.
+
+If `env.json` sets `ENV` to `local`, no paywall will be shown.
+
+Lock addresses are placed in `env.json` under the `LOCKS` field as shown in Setup. New locks can be created for [Mainnet](https://app.unlock-protocol.com/dashboard/) or [Rinkeby](https://staging-app.unlock-protocol.com/dashboard/).
+
+After the app starts with an envirnoment chosen for unlock:
+
 - Go to http://localhost:3000/create
+- Display form by paying for a membership tier (must be Rinkeby or Mainnet)
 - Fill in event detail (leave password as blank)
 - Fill in event detail and press "Submit"
 

package.json

@@ -39,7 +39,7 @@
     "react-dropzone": "^7.0.1",
     "react-emotion": "^9.2.6",
     "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.0",
     "react-scripts": "2.1.5",
     "react-select": "^2.1.0",
@@ -56,11 +56,11 @@
     "seedParty": "node scripts/seedParty.js",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "build:release:kovan": "yarn setup --kovan && yarn build",
-    "build:release:ropsten": "yarn setup --ropsten && yarn build",
-    "build:release:rinkeby": "yarn setup --rinkeby && yarn build",
-    "build:release:alpha": "yarn setup --alpha && yarn build",
-    "build:release:live": "yarn setup --live && yarn build",
+    "build:release:kovan": "yarn setup --kovan && cross-env REACT_APP_ENV=kovan yarn build",
+    "build:release:ropsten": "yarn setup --ropsten && cross-env REACT_APP_ENV=ropsten yarn build",
+    "build:release:rinkeby": "yarn setup --rinkeby && cross-env REACT_APP_ENV=rinkeby yarn build",
+    "build:release:alpha": "yarn setup --alpha && cross-env REACT_APP_ENV=alpha yarn build",
+    "build:release:live": "yarn setup --live && cross-env REACT_APP_ENV=live yarn build",
     "deploy:ropsten": "yarn build:release:ropsten && yarn now -f --local-config .deploy/now.ropsten.json --public && yarn now alias --local-config .deploy/now.ropsten.json && yarn now rm kickback-app-ropsten --safe --yes",
     "deploy:rinkeby": "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",
     "deploy:kovan": "yarn build:release:kovan && yarn now -f --local-config .deploy/now.kovan.json --public && yarn now alias --local-config .deploy/now.kovan.json && yarn now rm kickback-app-kovan --safe --yes",
@@ -84,6 +84,7 @@
     "@storybook/addon-links": "^3.4.11",
     "@storybook/react": "^3.4.11",
     "babel-plugin-macros": "^2.4.2",
+    "cross-env": "^6.0.3",
     "cypress": "^3.1.2",
     "cypress-testing-library": "^2.3.3",
     "ganache-cli": "^6.1.8",

public/index.html

@@ -52,13 +52,37 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 
-    <script type="text/javascript">
-      window.MIXPANEL_CUSTOM_LIB_URL = "https://analytics.kickback.events/client.js";
-    </script>
-   <script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
-     0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
-     for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=true;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
-    </script><!-- end Mixpanel -->
+  <script type="text/javascript">
+    window.MIXPANEL_CUSTOM_LIB_URL = "https://analytics.kickback.events/client.js";
+  </script>
+  <script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
+    0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
+    for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=true;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
+  </script><!-- end Mixpanel -->
+
+  <!-- 
+    Unlock snippet scripts modified from 
+    https://github.com/unlock-protocol/react-example/blob/master/public/index.html
+  -->
+  <script> 
+    (function (d, s) {
+      // set network based on start scripts environment variables
+      const nodeEnv = "%NODE_ENV%";
+      const ethEnv = "%REACT_APP_ENV%";
+      const networkId = (ethEnv.includes("REACT_APP_ENV") && nodeEnv === "production") ? 1 
+      : (ethEnv.includes("REACT_APP_ENV") && nodeEnv !== "production") ? 4  
+      : ethEnv === "rinkeby" ? 4 
+      // : ethEnv === "kovan" ? 42 // include kovan when supported by unlock paywall
+      : ethEnv === "live" ? 1
+      : 4;
+      // if Rinkeby set, use Rinkeby paywall, else use Mainnet
+      let testnetUrl = networkId === 4 ? 'staging-' : '';
+      let js = d.createElement(s);
+      let sc = d.getElementsByTagName(s)[0];
+        js.src = `https://${testnetUrl}paywall.unlock-protocol.com/static/unlock.1.0.min.js`;
+        sc.parentNode.insertBefore(js, sc);
+    }(document, "script"));
+  </script>
 </body>
 
 </html>

scripts/setup.js

@@ -44,6 +44,16 @@ if (argv.ropsten) {
   appConfig.ROLLBAR_TOKEN = 'e676d64e462b48d098a12db8a173598a'
   appConfig.BLOCKNATIVE_DAPPID = '27b3eac2-e46c-428a-9a0c-56cce2725d42'
   appConfig.MIXPANEL_ID = '28243587317e7b2d8a669dcce23302cb'
+  appConfig.LOCKS = {
+    4: {
+      '0xb452A1BfE64036718aCeFC8B5F718E0c9d233cB8': {
+        name: 'Kickback Gold Supporter'
+      },
+      '0x70456ebD53E19eaE05932C482FeF1b24251ABb18': {
+        name: 'Kickback Bronze Supporter'
+      }
+    }
+  }
 } else if (argv.kovan) {
   appConfig.ENV = 'kovan'
   appConfig.API_URL = 'https://kovan.api.kickback.events'

src/components/Header/HamburgerMenu.js

@@ -31,9 +31,13 @@ function HamburgerMenu({ isMenuOpen }) {
       <Link to="/pricing">Pricing</Link>
       {links.map(l =>
         isExternal(l.url) ? (
-          <Link to={l.href}>{l.label}</Link>
+          <Link to={l.href} key={l.href}>
+            {l.label}
+          </Link>
         ) : (
-          <a href={l.href}>{l.label}</a>
+          <a href={l.href} key={l.href}>
+            {l.label}
+          </a>
         )
       )}
     </HamburgerMenuContainer>

src/index.js

@@ -11,6 +11,19 @@ import { clientInstance } from './graphql'
 import setupWeb3 from './api/web3'
 import { GlobalProvider } from './GlobalState'
 import './globalStyles'
+import { ENV, LOCKS } from './config'
+
+// assumes mainnet or rinkeby Unlock for now
+const networkId = ENV === 'live' ? 1 : 4
+const locks = LOCKS[networkId]
+
+window.unlockProtocolConfig = {
+  locks,
+  icon: 'https://kickback.events/card.png',
+  callToAction: {
+    default: 'Select a membership to access page.'
+  }
+}
 
 window.addEventListener('load', async () => {
   setupRollbar()