Onboarding: small PR changes

package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@aragon/templates-tokens": "^1.2.1",
     "@aragon/ui": "^1.0.0-alpha.23",
-    "@aragon/wrapper": "^5.0.0-rc.16",
+    "@aragon/wrapper": "^5.0.0-rc.17",
     "@babel/polyfill": "^7.0.0",
     "@sentry/browser": "^5.5.0",
     "@ungap/event-target": "^0.1.0",

src/components/Carousel/PrevNext.js

@@ -12,7 +12,8 @@ function PrevNext({ onClick, type }) {
       css={`
         position: absolute;
         z-index: 1;
-        top: 50%;
+        top: calc(50% - ${3 * GU}px);
+        height: ${6 * GU}px;
         ${next ? 'right' : 'left'}: ${5 * GU}px;
       `}
     >

src/onboarding2/Create/Create.js

@@ -302,7 +302,7 @@ function useDeploymentState(
   }
 }
 
-function Create({ account, templates, walletWeb3, web3 }) {
+function Create({ account, onOpenOrg, templates, walletWeb3, web3 }) {
   const [status, setStatus] = useState(STATUS_SELECT_TEMPLATE)
 
   const onScreenUpdate = useCallback((index, screens) => {
@@ -388,6 +388,12 @@ function Create({ account, templates, walletWeb3, web3 }) {
   const handleTemplateNext = useCallback(data => nextScreen(data), [nextScreen])
   const handleTemplatePrev = useCallback(() => prevScreen(), [prevScreen])
 
+  const handleOpenNewOrg = useCallback(() => {
+    if (templateData && templateData.domain) {
+      onOpenOrg(templateData.domain)
+    }
+  }, [templateData, onOpenOrg])
+
   return (
     <div
       css={`
@@ -400,6 +406,7 @@ function Create({ account, templates, walletWeb3, web3 }) {
       {status === STATUS_DEPLOYMENT ? (
         <Deployment
           loadingTransactions={fetchingTemplateInformation}
+          onOpenOrg={handleOpenNewOrg}
           ready={
             Array.isArray(deployTransactions) &&
             deployTransactions.length > 0 &&
@@ -428,6 +435,7 @@ function Create({ account, templates, walletWeb3, web3 }) {
 }
 Create.propTypes = {
   account: EthereumAddressType,
+  onOpenOrg: PropTypes.func.isRequired,
   templates: PropTypes.array.isRequired,
   walletWeb3: PropTypes.object,
   web3: PropTypes.object,

src/onboarding2/Deployment/Deployment.js

@@ -133,10 +133,11 @@ function BoxProgress({ opacity, boxTransform }) {
   )
 }
 
-function BoxReady({ opacity, boxTransform }) {
+function BoxReady({ onOpenOrg, opacity, boxTransform }) {
   const { below } = useViewport()
   const fullWidth = below('large')
   const small = below('medium')
+
   return (
     <BoxBase opacity={opacity} boxTransform={boxTransform}>
       <div
@@ -165,14 +166,15 @@ function BoxReady({ opacity, boxTransform }) {
             <strong>All done!</strong>
           </p>
           <p css="font-weight: 400">Your organization is ready</p>
-          <Button label="Get started" mode="strong" href="/" external={false} />
+          <Button label="Get started" mode="strong" onClick={onOpenOrg} />
         </div>
       </div>
     </BoxBase>
   )
 }
 
 const Deployment = React.memo(function Deployment({
+  onOpenOrg,
   ready,
   transactionsStatus,
 }) {
@@ -221,7 +223,11 @@ const Deployment = React.memo(function Deployment({
           >
             {ready => ({ opacity, transform }) =>
               ready ? (
-                <BoxReady opacity={opacity} boxTransform={transform} />
+                <BoxReady
+                  onOpenOrg={onOpenOrg}
+                  opacity={opacity}
+                  boxTransform={transform}
+                />
               ) : (
                 <BoxProgress opacity={opacity} boxTransform={transform} />
               )}

src/onboarding2/Onboarding/Onboarding.js

@@ -201,6 +201,7 @@ function Onboarding({
         {status === 'create' && Array.isArray(templates) && (
           <Create
             account={account}
+            onOpenOrg={goToOrg}
             templates={templates}
             walletWeb3={walletWeb3}
             web3={web3}
@@ -220,7 +221,7 @@ function Onboarding({
 
 Onboarding.propTypes = {
   account: EthereumAddressType,
-  status: PropTypes.string.isRequired,
+  status: PropTypes.oneOf(['none', 'welcome', 'open', 'create']).isRequired,
   selectorNetworks: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))
     .isRequired,
   walletWeb3: PropTypes.object,

src/onboarding2/Templates/TemplateDetails.js

@@ -189,19 +189,20 @@ TemplateDetails.propTypes = {
 function SelectTemplateButton({ onClick, template }) {
   const templateLoading = template.status === TEMPLATE_LOADING
   const templateUnavailable = template.status === TEMPLATE_UNAVAILABLE
+  const label = templateLoading
+    ? 'Loading template…'
+    : templateUnavailable
+    ? 'This template is not available at the moment'
+    : 'Use this template'
+
   return (
     <Button
       disabled={templateLoading || templateUnavailable}
+      label={label}
       mode="strong"
       onClick={onClick}
       wide
-    >
-      {templateLoading
-        ? 'Loading template…'
-        : templateUnavailable
-        ? 'This template is not available at the moment'
-        : 'Use this template'}
-    </Button>
+    />
   )
 }
 SelectTemplateButton.propTypes = {

src/onboarding2/Welcome/OpenOrg.js

@@ -104,9 +104,11 @@ function OpenOrg({ onOpenOrg, onBack }) {
             justify-content: flex-end;
           `}
         >
-          <Button mode="strong" onClick={handleSubmit}>
-            Open organization
-          </Button>
+          <Button
+            label="Open organization"
+            mode="strong"
+            onClick={handleSubmit}
+          />
         </div>
       </form>
     </Box>

src/onboarding2/Welcome/Welcome.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { ButtonText, DropDown, GU, Layout, Split, useTheme } from '@aragon/ui'
+import { Link, DropDown, GU, Layout, Split, useTheme } from '@aragon/ui'
 import { network } from '../../environment'
 import Header from '../Header/Header'
 import OpenOrg from './OpenOrg'
@@ -98,9 +98,9 @@ function Welcome({
           `}
         >
           Do you need more information about Aragon?{' '}
-          <ButtonText href="https://aragon.org/" external>
+          <Link href="https://aragon.org/" external>
             Visit our homepage
-          </ButtonText>
+          </Link>
         </p>
       </Layout>
     </div>

src/onboarding2/create-utils.js

@@ -1,8 +1,10 @@
 import { network, web3Providers } from '../environment'
 import { getWeb3 } from '../web3-utils'
 
+const TEMPLATE_STATE_KEY = `create-org:${network.type}`
+
 export function loadTemplateState() {
-  const value = localStorage.getItem(`create-org:${network.type}`)
+  const value = localStorage.getItem(TEMPLATE_STATE_KEY)
   try {
     const data = JSON.parse(value)
     return {

src/templates/company/index.js

@@ -59,7 +59,7 @@ export default {
               fields: [
                 [
                   'Token name & symbol',
-                  `${data.tokenName} (${data.tokenSymbol})`,
+                  `${data.tokens.tokenName} (${data.tokens.tokenSymbol})`,
                 ],
                 ...data.tokens.members.map(([account], i) => [
                   `Tokenholder #${i + 1}`,
@@ -79,8 +79,8 @@ export default {
 
     const { domain, tokens, voting } = data
     const { tokenName, tokenSymbol, members } = tokens
-    const stake = new BN(10).pow(new BN(18)).toString()
-    const stakes = members.map(() => stake)
+    const baseStake = new BN(10).pow(new BN(18))
+    const stakes = members.map(([_, stake]) => baseStake.muln(stake).toString())
 
     const { support, quorum, duration } = voting
     const onePercent = new BN(10).pow(new BN(16))
@@ -91,7 +91,7 @@ export default {
     // Rinkeby has its gas limit capped at 7M, so some larger 6.5M+ transactions are
     // often not mined
     const forceMultipleTransactions =
-      network.type === 'rinkeby' && members.length > 2
+      network.type === 'rinkeby' && members.length > 1
 
     if (!hasPayroll && !forceMultipleTransactions) {
       return [

src/templates/kit/ClaimDomain.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Info, GU, SafeLink } from '@aragon/ui'
+import { Info, GU, Link } from '@aragon/ui'
 import { useCheckDomain, DOMAIN_CHECK, DOMAIN_ERROR } from '../../check-domain'
 import { DomainField, Header, PrevNextFooter } from '.'
 
@@ -64,10 +64,8 @@ function ClaimDomain({
         `}
       >
         Aragon uses the{' '}
-        <SafeLink href="https://ens.domains/" target="_blank">
-          Ethereum Name Service (ENS)
-        </SafeLink>{' '}
-        to assig names to organizations. The name you choose will be mapped to
+        <Link href="https://ens.domains/">Ethereum Name Service (ENS)</Link> to
+        assign names to organizations. The name you choose will be mapped to
         your organization’s Ethereum address and cannot be changed after you
         launch your organization.
       </Info>

src/templates/kit/Tokens.js

@@ -340,6 +340,7 @@ function MemberField({
                       `}
                     />
                   }
+                  label="Remove"
                   size="mini"
                 />
               )}

src/templates/kit/Voting.js

@@ -130,7 +130,7 @@ function Voting({ back, data, fields, next, screenIndex, screens }) {
                 <strong>Minimum Approval</strong> is the percentage of the total
                 token supply that support for a proposal must be greater than
                 for the proposal to be considered valid. For example, if the
-                Minimum Approval is set to 20%, then more than 20% of the
+                “Minimum Approval” is set to 20%, then more than 20% of the
                 outstanding token supply must vote to approve a proposal for the
                 vote to be considered valid.
               </Help>
@@ -152,9 +152,7 @@ function Voting({ back, data, fields, next, screenIndex, screens }) {
         >
           The support and minimum approval thresholds are strict requirements,
           such that votes will only pass if they achieve approval percentages
-          greater than these thresholds. These parameters currently{' '}
-          <strong>cannot be changed</strong> on the included Voting app after
-          the organization is created.
+          greater than these thresholds.
         </Info>
 
         <PrevNextFooter

src/templates/membership/index.js

@@ -59,7 +59,7 @@ export default {
               fields: [
                 [
                   'Token name & symbol',
-                  `${data.tokenName} (${data.tokenSymbol})`,
+                  `${data.tokens.tokenName} (${data.tokens.tokenSymbol})`,
                 ],
                 ...data.tokens.members.map(([account], i) => [
                   `Tokenholder #${i + 1}`,
@@ -89,7 +89,7 @@ export default {
     // Rinkeby has its gas limit capped at 7M, so some larger 6.5M+ transactions are
     // often not mined
     const forceMultipleTransactions =
-      network.type === 'rinkeby' && members.length > 2
+      network.type === 'rinkeby' && members.length > 1
 
     if (!hasPayroll && !forceMultipleTransactions) {
       return [

src/templates/reputation/index.js

@@ -59,7 +59,7 @@ export default {
               fields: [
                 [
                   'Token name & symbol',
-                  `${data.tokenName} (${data.tokenSymbol})`,
+                  `${data.tokens.tokenName} (${data.tokens.tokenSymbol})`,
                 ],
                 ...data.tokens.members.map(([account], i) => [
                   `Tokenholder #${i + 1}`,
@@ -79,8 +79,8 @@ export default {
 
     const { domain, tokens, voting } = data
     const { tokenName, tokenSymbol, members } = tokens
-    const stake = new BN(10).pow(new BN(18)).toString()
-    const stakes = members.map(() => stake)
+    const baseStake = new BN(10).pow(new BN(18))
+    const stakes = members.map(([_, stake]) => baseStake.muln(stake).toString())
 
     const { support, quorum, duration } = voting
     const onePercent = new BN(10).pow(new BN(16))
@@ -91,7 +91,7 @@ export default {
     // Rinkeby has its gas limit capped at 7M, so some larger 6.5M+ transactions are
     // often not mined
     const forceMultipleTransactions =
-      network.type === 'rinkeby' && members.length > 2
+      network.type === 'rinkeby' && members.length > 1
 
     if (!hasPayroll && !forceMultipleTransactions) {
       return [