token deployment flow

src/modules/common/Toolbar.tsx

@@ -28,6 +28,7 @@ import { ChangeNetworkButton } from "./ChangeNetworkButton"
 
 import { ArrowBackIos } from "@material-ui/icons"
 import { EnvKey, getEnv } from "services/config"
+import { networkNameMap } from "services/bakingBad"
 
 const AddressMenu = styled(Box)(() => ({
   width: 264,
@@ -39,7 +40,7 @@ const AddressMenuItem = styled(Grid)(({ theme }) => ({
   cursor: "pointer",
   boxSizing: "border-box",
   color: theme.palette.text.secondary,
-  padding: "20px 3px"
+  padding: "15px 10px"
 }))
 
 const AddressMenuIcon = styled(Grid)({

src/modules/creator/deployment/router.tsx

@@ -5,6 +5,7 @@ import { ConfigContract } from "./steps/Config"
 import { ContractDistribution } from "./steps/Distribution"
 import { ContractSummary } from "./steps/Summary"
 import { Ownership } from "./steps/Ownership"
+import { Success } from "./steps/Success"
 
 export const TokenDeploymentRouter = (): JSX.Element => {
   const match = useRouteMatch()
@@ -26,6 +27,9 @@ export const TokenDeploymentRouter = (): JSX.Element => {
       <Route path={`${match.url}/summary`}>
         <ContractSummary />
       </Route>
+      <Route path={`${match.url}/success`}>
+        <Success />
+      </Route>
       <Redirect to={`${match.url}/ownership`} />
     </Switch>
   )

src/modules/creator/deployment/state/context.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useReducer, Dispatch, useMemo } from "react"
 import useLocalStorage from "modules/common/hooks/useLocalStorage"
 import { DeploymentAction, DeploymentState, TokenContractParams, ActionTypes } from "./types"
+import BigNumber from "bignumber.js"
 
 const deploymentStatus = {
   deploying: false,
@@ -24,7 +25,8 @@ export const INITIAL_TOKEN_STATE: TokenContractParams = {
         walletAddress: "",
         amount: null
       }
-    ]
+    ],
+    totalAmount: new BigNumber(0)
   }
 }
 

src/modules/creator/deployment/state/types.ts

@@ -1,3 +1,4 @@
+import BigNumber from "bignumber.js"
 import { NavigationBarProps } from "modules/creator/state/types"
 
 export type TokenContractSettings = {
@@ -11,6 +12,7 @@ export type TokenContractSettings = {
 
 export type TokenDistributionSettings = {
   holders: Holder[]
+  totalAmount: BigNumber
 }
 
 export type Holder = {

src/modules/creator/deployment/steps/Distribution.tsx

@@ -13,6 +13,7 @@ import { parseUnits } from "services/contracts/utils"
 import { numberWithCommas } from "../state/utils"
 import { useNotification } from "modules/common/hooks/useNotification"
 import { TitleBlock } from "modules/common/TitleBlock"
+import { useTezos } from "services/beacon/hooks/useTezos"
 
 const SupplyContainer = styled(Grid)(({ theme }) => ({
   background: theme.palette.primary.dark,
@@ -65,18 +66,47 @@ const CustomInputContainer = styled(Grid)(({ theme }) => ({
   width: "100%"
 }))
 
+const CustomAmountContainer = styled(Grid)(({ theme }) => ({
+  height: 54,
+  boxSizing: "border-box",
+  marginTop: 14,
+  background: "#2F3438",
+  borderRadius: 8,
+  alignItems: "center",
+  display: "flex",
+  padding: "13px 23px",
+  width: "40%",
+  [theme.breakpoints.down("sm")]: {
+    width: "100%"
+  }
+}))
+
 const ErrorText = styled(Typography)({
   fontSize: 14,
   color: "red"
 })
 
+const hasDuplicates = (options: Holder[]) => {
+  const trimOptions = options.map(option => option.walletAddress.trim())
+  return new Set(trimOptions).size !== trimOptions.length
+}
+
 const validateForm = (values: TokenDistributionSettings) => {
   const errors: FormikErrors<TokenDistributionSettings> = {}
 
   values.holders.forEach((holder: Holder, index: number) => {
-    if (!values.holders[index].walletAddress || values.holders[index].amount === null) {
+    if (values.holders[index].walletAddress && !values.holders[index].amount) {
       errors.holders = "Required"
     }
+    if (!values.holders[index].walletAddress && values.holders[index].amount) {
+      errors.holders = "Required"
+    }
+    if (values.holders.length > 0 && hasDuplicates(values.holders)) {
+      errors.holders = "Duplicate wallets are not allowed"
+    }
+    if (values.totalAmount && values.totalAmount.minus(new BigNumber(getTotal(values.holders))) < new BigNumber(0)) {
+      errors.totalAmount = "Available balance has to be greater that the total supply"
+    }
   })
 
   return errors
@@ -136,14 +166,14 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
                         />
                       </CustomInputContainer>
 
-                      <CustomInputContainer>
+                      <CustomAmountContainer>
                         <Field
                           type="number"
                           name={`holders.[${index}].amount`}
                           placeholder={`Amount`}
                           component={CustomFormikTextField}
                         />
-                      </CustomInputContainer>
+                      </CustomAmountContainer>
 
                       {index !== 0 ? (
                         <RemoveButton
@@ -199,26 +229,24 @@ export const ContractDistribution: React.FC = () => {
   const { state, dispatch, updateCache } = useContext(DeploymentContext)
   const { tokenDistribution, tokenSettings } = state.data
   const history = useHistory()
-  const openNotification = useNotification()
+  const { account } = useTezos()
 
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
 
-  const totalAmount = parseUnits(new BigNumber(Number(tokenSettings.totalSupply)), Number(tokenSettings.decimals))
+  tokenDistribution.totalAmount = new BigNumber(Number(tokenSettings.totalSupply))
 
   const saveStepInfo = (
     values: TokenDistributionSettings,
     { setSubmitting }: { setSubmitting: (b: boolean) => void }
   ) => {
-    if (totalAmount.minus(new BigNumber(getTotal(values.holders))) < new BigNumber(0)) {
-      openNotification({
-        message: "Available balance has to be greater that the total supply",
-        variant: "error",
-        autoHideDuration: 2000
-      })
-      return
-    }
     const newValues: TokenDistributionSettings = { ...values }
+
+    if (newValues.holders.length === 1 && newValues.holders[0].walletAddress === "") {
+      newValues.holders[0].walletAddress = account
+      newValues.holders[0].amount = newValues.totalAmount.toNumber()
+    }
+
     const newState = {
       ...state.data,
       tokenDistribution: newValues
@@ -250,16 +278,21 @@ export const ContractDistribution: React.FC = () => {
                 <SupplyContainer item container direction="column" style={{ gap: "12px" }}>
                   <Grid container item direction="row" style={{ gap: 10 }}>
                     <AmountText color="textSecondary">Total supply: </AmountText>
-                    <Typography color="secondary"> {numberWithCommas(totalAmount)} </Typography>
+                    <Typography color="secondary"> {numberWithCommas(values.totalAmount)} </Typography>
                   </Grid>
                   <Grid container item direction="row" style={{ gap: 10 }}>
                     <AmountText color="textSecondary">Available:</AmountText>
                     <Typography color="secondary">
                       {" "}
-                      {numberWithCommas(totalAmount.minus(new BigNumber(getTotal(values.holders))))}
+                      {numberWithCommas(
+                        values.totalAmount && values.totalAmount.minus(new BigNumber(getTotal(values.holders)))
+                      )}
                     </Typography>
                   </Grid>
                 </SupplyContainer>
+                {errors.totalAmount && touched.totalAmount ? (
+                  <ErrorText style={{ marginTop: 6 }}>{errors.totalAmount}</ErrorText>
+                ) : null}
 
                 <Grid
                   container

src/modules/creator/deployment/steps/Success.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from "react"
+import { Grid, Link, styled, Typography } from "@material-ui/core"
+import { MainButton } from "modules/common/MainButton"
+import { Navbar } from "modules/common/Toolbar"
+import { useHistory, useLocation } from "react-router-dom"
+import { Blockie } from "modules/common/Blockie"
+import { CopyAddress } from "modules/common/CopyAddress"
+
+const PageContainer = styled(Grid)(({ theme }) => ({
+  background: theme.palette.primary.main
+}))
+
+const PageContent = styled(Grid)(({ theme }) => ({
+  marginTop: 60,
+  width: "1000px",
+  height: "100%",
+  margin: "auto",
+  padding: "28px 0",
+  flexDirection: "row",
+  paddingTop: 0,
+  ["@media (max-width:1167px)"]: {
+    width: "86vw"
+  },
+  [theme.breakpoints.down("sm")]: {
+    marginTop: 10
+  }
+}))
+
+const Title = styled(Typography)({
+  fontSize: 24,
+  textAlign: "center"
+})
+
+const CardContainer = styled(Grid)(({ theme }) => ({
+  background: theme.palette.primary.dark,
+  borderRadius: 8,
+  padding: "36px 47px"
+}))
+
+const DescriptionContainer = styled(Grid)(({ theme }) => ({
+  display: "inline-flex",
+  [theme.breakpoints.down("sm")]: {
+    paddingLeft: "4%",
+    paddingRight: "4%"
+  }
+}))
+
+const OptionsContainer = styled(Grid)(({ theme }) => ({
+  marginTop: 40,
+  [theme.breakpoints.down("sm")]: {
+    paddingLeft: "4%",
+    paddingRight: "4%",
+    marginTop: 40
+  }
+}))
+
+const ChoicesContainer = styled(Grid)(({ theme }) => ({
+  marginTop: 50,
+  paddingLeft: "24%",
+  paddingRight: "24%",
+  [theme.breakpoints.down("sm")]: {
+    paddingLeft: "2%",
+    paddingRight: "2%"
+  }
+}))
+
+const DescriptionText = styled(Typography)(({ theme }) => ({
+  fontWeight: 200,
+  color: theme.palette.text.secondary,
+  [theme.breakpoints.down("sm")]: {
+    fontSize: 14
+  }
+}))
+
+const OptionButton = styled(Link)(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    width: "95%",
+    display: "flex",
+    textAlign: "center"
+  }
+}))
+
+export const Success: React.FC = () => {
+  const location = useLocation<{ address: string }>()
+  const [address, setAddress] = useState("")
+  const history = useHistory()
+
+  useEffect(() => {
+    if (location && location.state && location.state.address) {
+      setAddress(location.state.address)
+    } else {
+      history.push("/explorer")
+    }
+  }, [location, history])
+  return (
+    <>
+      <PageContainer container direction="row">
+        <Navbar mode="creator" />
+        <PageContent>
+          <CardContainer>
+            <Grid container direction="row">
+              <Title color="textSecondary">Governance token successfully deployed!</Title>
+            </Grid>
+
+            <Grid container direction="column">
+              <Grid item>
+                <DescriptionText style={{ marginTop: 40, marginBottom: 20 }}>Your Token Address:</DescriptionText>
+              </Grid>
+              <DescriptionContainer item>
+                <DescriptionText style={{ display: "inline-flex", alignItems: "center" }}>
+                  <Blockie address={address} size={35} style={{ marginRight: 16 }} />
+                  {address && (
+                    <CopyAddress
+                      address={address}
+                      typographyProps={{
+                        variant: "body1",
+                        color: "textSecondary"
+                      }}
+                    />
+                  )}
+                </DescriptionText>
+              </DescriptionContainer>
+
+              <OptionsContainer item>
+                <DescriptionText>Would you like to continue and create a DAO?</DescriptionText>
+              </OptionsContainer>
+            </Grid>
+
+            <ChoicesContainer container direction="row" alignContent="center" justifyContent="center">
+              <Grid item xs>
+                <OptionButton underline="none" href={`/creator/build/dao`}>
+                  <MainButton variant="contained" color="secondary">
+                    Create DAO
+                  </MainButton>
+                </OptionButton>
+              </Grid>
+              <Grid item xs>
+                <OptionButton underline="none" href={`/explorer`}>
+                  <Typography color="secondary" style={{ padding: "6px 16px" }}>
+                    {"I'm done"}
+                  </Typography>
+                </OptionButton>
+              </Grid>
+            </ChoicesContainer>
+          </CardContainer>
+        </PageContent>
+      </PageContainer>
+    </>
+  )
+}