wearekickback · edsonayllon · Dec 10, 2019 · Dec 11, 2019 · Dec 11, 2019 · Dec 11, 2019
diff --git a/package.json b/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",

diff --git a/public/index.html b/public/index.html
@@ -34,6 +34,70 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
   <title>Kickback</title>
+
+  <!-- 
+    Unlock snippet scripts modified from 
+    https://github.com/unlock-protocol/react-example/blob/master/public/index.html
+  -->
+  <script> (function (d, s) {
+    // if production, set network to Mainnet, else set to Rinkeby for paywall
+    const environment = "%NODE_ENV%";
+    const networkId = environment === "production" ? 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>
+
+  <script>
+    // if production, set network to Mainnet, else set to Rinkeby for paywall
+    const environment = "%NODE_ENV%";
+    const networkId = environment === "production" ? 1  : 4;
+
+    // Kovan is included, but currently only Rinkeby and Mainnet is unsupported with paywall
+    // tokens entered first to last are displayed right to left in paywall modal
+    // NOTE: Replace Mainnet keys with keys Kickback owns
+    const locks = {
+      1: {
+        "enter-key-address-here": {
+          name: "Kickback Gold Supporter"
+        },
+        "enter-key-address-here": {
+          name: "Kickback Bronze Supporter"
+        }
+      },
+      4: {
+        "0xb452A1BfE64036718aCeFC8B5F718E0c9d233cB8": {
+          name: "Kickback Gold Supporter"
+        },
+        "0x70456ebD53E19eaE05932C482FeF1b24251ABb18": {
+          name: "Kickback Bronze Supporter"
+        }
+      },
+      42: {
+        "0x2eD8aD6AA973BEA5D60FA70Eead10F113fb4Dc99": {
+          name: "Kickback Gold Supporter"
+        },
+        "0xe61607898287220586abE01b536714d8429f675C": {
+          name: "Kickback Bronze Supporter"
+        }
+      }
+    }[networkId]
+
+    // unlock config must use var
+    var unlockProtocolConfig = {
+      locks,
+      icon: 'https://unlock-protocol.com/static/images/svg/unlock-word-mark.svg',
+      callToAction: {
+        default:
+          'Select a membership to access page',
+      },
+    }
+  </script>
 </head>
 
 <body>

diff --git a/src/routes/CreateEvent.js b/src/routes/CreateEvent.js
@@ -1,8 +1,10 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'react-emotion'
-import { withRouter } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import DefaultTextInput from '../components/Forms/TextInput'
 import Label from '../components/Forms/Label'
+import DefaultButton from '../components/Forms/Button'
+import Loader from '../components/Loader'
 
 import PartyForm from '../components/SingleEvent/Admin/PartyForm'
 import { CREATE_PENDING_PARTY } from '../graphql/mutations'
@@ -13,42 +15,117 @@ const CreateContainer = styled('div')`
   flex-direction: column;
 `
 
+const LockedContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+`
+
 const TextInput = styled(DefaultTextInput)`
   margin-bottom: 20px;
 `
 
-class Create extends Component {
-  state = {
-    password: ''
-  }
+const Button = styled(DefaultButton)`
+  margin: 60px auto 0px auto;
+`
 
-  render() {
-    const { password } = this.state
-
-    return (
-      <CreateContainer>
-        <PartyForm
-          onCompleted={this._onCreated}
-          mutation={CREATE_PENDING_PARTY}
-          variables={{ password }}
-          type="create"
-        >
-          <Label>SECRET PASSWORD:</Label>
-          <TextInput
-            value={password}
-            onChangeText={val => this.setState({ password: val })}
-            type="password"
-          />
-        </PartyForm>
-      </CreateContainer>
-    )
-  }
+const UnlockCredit = styled('div')`
+  margin: 40px auto 140px auto;
+  font-size: 14px;
+`
 
-  _onCreated = ({ id }, deposit, limitOfParticipants, coolingPeriod) => {
-    this.props.history.push(
+const UnlockedLogo = styled('a')`
+  color: #ff6771;
+  font-weight: 800;
+`
+
+function Create() {
+  const [password, setPassword] = useState('')
+  const [locked, setLocked] = useState('pending')
+  let history = useHistory()
+
+  const _onCreated = ({ id }, deposit, limitOfParticipants, coolingPeriod) => {
+    history.push(
       `/deploy?id=${id}&deposit=${deposit}&limitOfParticipants=${limitOfParticipants}&coolingPeriod=${coolingPeriod}`
     )
   }
+
+  const unlockHandler = e => {
+    setLocked(e.detail)
+    /*
+      Status can either be 'unlocked' or 'locked'...
+      If state is 'unlocked': implement code here which will be triggered when 
+      the current visitor has a valid lock key  
+      If state is 'locked': implement code here which will be
+      triggered when the current visitor does not have a valid lock key
+    */
+  }
+
+  const checkout = () => {
+    window.ethereum.enable()
+    window.unlockProtocol && window.unlockProtocol.loadCheckoutModal()
+  }
+
+  useEffect(() => {
+    window.addEventListener('unlockProtocol', unlockHandler)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      window.removeEventListener('unlockProtocol', unlockHandler)
+    }
+  }, [])
+
+  return (
+    <CreateContainer>
+      {
+        {
+          unlocked: (
+            <PartyForm
+              onCompleted={_onCreated}
+              mutation={CREATE_PENDING_PARTY}
+              variables={{ password }}
+              type="create"
+            >
+              <Label>SECRET PASSWORD:</Label>
+              <TextInput
+                value={password}
+                onChangeText={val => setPassword(val)}
+                type="password"
+              />
+            </PartyForm>
+          ),
+          locked: (
+            <LockedContainer>
+              <h1>Deploy your Kickback contract with us</h1>
+              <p>
+                Kickback offers paid benefits for event organizers publishing
+                their own kickback contract. Membership comes in two tiers.
+              </p>
+              <Button
+                data-testid="unlock-button"
+                analyticsId="Unlock Membership"
+                onClick={checkout}
+              >
+                Unlock Membership
+              </Button>
+              <UnlockCredit>
+                Powered by{' '}
+                <UnlockedLogo href="https://unlock-protocol.com/">
+                  Unlock
+                </UnlockedLogo>
+              </UnlockCredit>
+            </LockedContainer>
+          ),
+          pending: (
+            <div>
+              <Loader />
+            </div>
+          ),
+          default: <div>Please enable Javascript</div>
+        }[locked || locked['default']]
+      }
+    </CreateContainer>
+  )
 }
 
-export default withRouter(Create)
+export default Create