token creator updates

dOrgTech · Feb 19, 2024 · e30e3d9 · e30e3d9
1 parent c97e323
commit e30e3d9
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 80 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,9 @@
 import React from "react"
 import ReactDOM from "react-dom"
-
 import App from "App"
 import { TezosProvider } from "services/beacon/context"
 import localizedFormat from "dayjs/plugin/localizedFormat"
 import dayjs from "dayjs"
-import BigNumber from "bignumber.js"
 
 // BigNumber.config({ DECIMAL_PLACES:  })
 

diff --git a/src/modules/creator/deployment/index.tsx b/src/modules/creator/deployment/index.tsx
@@ -51,6 +51,7 @@ const IndicatorValue = styled(Paper)(({ theme }) => ({
   height: "100%",
   margin: "0 auto",
   fontSize: 25,
+  fontWeight: 300,
   color: theme.palette.text.secondary,
   userSelect: "none",
   boxShadow: "none",
@@ -76,7 +77,7 @@ const ProgressContainer = styled(Grid)(({ theme }) => ({
   background: "#2F3438",
   display: "grid",
   borderRadius: 8,
-  maxHeight: 460,
+  maxHeight: 480,
   paddingTop: 20,
   position: "sticky",
   top: 125
@@ -101,7 +102,7 @@ const FAQClickToAction = styled(Typography)(({ theme }) => ({
 }))
 
 const FAQClickText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.secondary.main,
+  color: theme.palette.text.secondary,
   fontSize: "14px",
   cursor: "pointer",
   textAlign: "center"
@@ -132,10 +133,10 @@ export const Deployment: React.FC = () => {
             <Grid item container direction="column" alignItems="center" xs>
               <ProgressBar
                 progress={progress}
-                radius={52}
-                strokeWidth={5}
+                radius={62}
+                strokeWidth={8}
                 strokeColor={theme.palette.secondary.main}
-                trackStrokeWidth={4}
+                trackStrokeWidth={7}
                 trackStrokeColor={"rgba(255, 255, 255, 0.2)"}
               >
                 <Box className="indicator">

diff --git a/src/modules/creator/deployment/steps/Config.tsx b/src/modules/creator/deployment/steps/Config.tsx
@@ -14,13 +14,15 @@ import { useHistory, useRouteMatch } from "react-router-dom"
 import { DeploymentContext } from "../state/context"
 import { ActionTypes, TokenContractSettings } from "../state/types"
 import { TextField as FormikTextField } from "formik-material-ui"
-import { SmallButton } from "modules/common/SmallButton"
-import { TitleBlock } from "modules/common/TitleBlock"
 import { FieldChange, handleChange, handleNegativeInput } from "modules/creator/utils"
 
-const ButtonContainer = styled(Grid)({
-  marginTop: 40
-})
+const Title = styled(Typography)(({ theme }) => ({
+  fontSize: 32,
+  fontWeight: 600,
+  [theme.breakpoints.down("sm")]: {
+    fontSize: 26
+  }
+}))
 
 const CustomTextarea = styled(withTheme(TextareaAutosize))(props => ({
   "minHeight": 152,
@@ -61,8 +63,7 @@ const CustomFormikTextField = withStyles({
     "& .MuiInput-underline:after": {
       borderBottom: "none !important"
     }
-  },
-  disabled: {}
+  }
 })(FormikTextField)
 
 const CustomInputContainer = styled(Grid)(({ theme }) => ({
@@ -180,7 +181,7 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
           {errors.description && touched.description ? <ErrorText>{errors.description}</ErrorText> : null}
         </Grid>
         <Grid item container direction="row" spacing={2}>
-          <Grid item xs={6}>
+          <Grid item xs={isMobileSmall ? 12 : 6}>
             <Typography variant="subtitle1" color="textSecondary">
               {" "}
               Supply{" "}
@@ -197,7 +198,7 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
             </CustomInputContainer>
             {errors.totalSupply && touched.totalSupply ? <ErrorText>{errors.totalSupply}</ErrorText> : null}
           </Grid>
-          <Grid item xs={isMobileSmall ? 6 : 3}>
+          <Grid item xs={isMobileSmall ? 12 : 3}>
             <Typography variant="subtitle1" color="textSecondary">
               {" "}
               Decimals{" "}
@@ -217,7 +218,7 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
         </Grid>
 
         <Grid item container direction="row" spacing={2}>
-          <Grid item xs={6}>
+          <Grid item xs={isMobileSmall ? 12 : 6}>
             <Typography variant="subtitle1" color="textSecondary">
               {" "}
               Icon{" "}
@@ -226,7 +227,7 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
               <Field id="outlined-basic" placeholder="URL" name="icon" component={CustomFormikTextField} />
             </CustomInputContainer>
           </Grid>
-          <Grid item xs={isMobileSmall ? 6 : 3}>
+          <Grid item xs={isMobileSmall ? 12 : 3}>
             <Typography variant="subtitle1" color="textSecondary">
               {" "}
               Symbol{" "}
@@ -263,9 +264,9 @@ export const ConfigContract: React.FC = () => {
     <>
       <Grid container direction="column">
         <Grid>
-          <Typography style={{ marginBottom: 32 }} variant="h5" color="textSecondary">
+          <Title style={{ marginBottom: 32 }} color="textSecondary">
             Configure Token Contract
-          </Typography>
+          </Title>
         </Grid>
 
         <Formik

diff --git a/src/modules/creator/deployment/steps/Distribution.tsx b/src/modules/creator/deployment/steps/Distribution.tsx
@@ -6,11 +6,13 @@ import { useHistory, useRouteMatch } from "react-router-dom"
 import { DeploymentContext } from "../state/context"
 import { ActionTypes, Holder, TokenContractSettings, TokenDistributionSettings } from "../state/types"
 import { TextField as FormikTextField } from "formik-material-ui"
-import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons"
+import { RemoveCircleOutline } from "@material-ui/icons"
 import BigNumber from "bignumber.js"
 import { numberWithCommas } from "../state/utils"
 import { useTezos } from "services/beacon/hooks/useTezos"
 import { FieldChange, handleNegativeInput } from "modules/creator/utils"
+import AddCircleIcon from "@mui/icons-material/AddCircle"
+import { validateContractAddress, validateAddress } from "@taquito/utils"
 
 const RemoveButton = styled(RemoveCircleOutline)({
   marginTop: 0,
@@ -101,6 +103,9 @@ const ErrorText = styled(Typography)({
   marginTop: 4
 })
 
+const isInvalidKtOrTzAddress = (address: string) =>
+  validateContractAddress(address) !== 3 && validateAddress(address) !== 3
+
 const hasDuplicates = (options: Holder[]) => {
   const trimOptions = options.map(option => option.walletAddress.trim())
   return new Set(trimOptions).size !== trimOptions.length
@@ -125,12 +130,15 @@ const validateForm = (values: TokenDistributionSettings) => {
     if (values.totalAmount && values.totalAmount.gt(new BigNumber(getTotal(values.holders)))) {
       errors.totalAmount = "Total Supply not fully allocated"
     }
+    if (isInvalidKtOrTzAddress(values.holders[index].walletAddress)) {
+      errors.holders = "Invalid address"
+    }
   })
 
   return errors
 }
 
-const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue, setFieldTouched }: any) => {
+const TokenSettingsForm = ({ submitForm, values, errors, touched }: any) => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
 
@@ -229,13 +237,13 @@ const TokenSettingsForm = ({ submitForm, values, errors, touched, setFieldValue,
                               style={{ cursor: "pointer", padding: 0 }}
                               onClick={() => arrayHelpers.insert(values.holders.length, newValue)}
                             >
-                              <AddCircleOutline
+                              <AddCircleIcon
                                 style={{ cursor: "pointer", fontSize: 18 }}
                                 htmlColor={theme.palette.secondary.main}
                               />
                             </IconButton>
                             <Typography
-                              variant={"body2"}
+                              variant={"body1"}
                               style={{ cursor: "pointer" }}
                               onClick={() => arrayHelpers.insert(values.holders.length, newValue)}
                               color={"secondary"}

diff --git a/src/modules/creator/deployment/steps/Ownership.tsx b/src/modules/creator/deployment/steps/Ownership.tsx
@@ -22,46 +22,48 @@ const PageContent = styled(Grid)(({ theme }) => ({
   }
 }))
 
-const Title = styled(Typography)({
-  fontSize: 24,
-  textAlign: "center"
-})
+const Title = styled(Typography)(({ theme }) => ({
+  fontSize: 32,
+  fontWeight: 600,
+  textAlign: "center",
+  [theme.breakpoints.down("sm")]: {
+    fontSize: 26
+  }
+}))
 
 const CardContainer = styled(Grid)(({ theme }) => ({
   background: theme.palette.primary.dark,
+  gap: 32,
   borderRadius: 8,
-  padding: "36px 47px"
+  padding: "40px 48px",
+  [theme.breakpoints.down("sm")]: {
+    padding: "30px 38px"
+  }
 }))
 
 const DescriptionContainer = styled(Grid)(({ theme }) => ({
-  marginTop: 32,
   [theme.breakpoints.down("sm")]: {
     paddingLeft: "4%",
-    paddingRight: "4%",
-    marginTop: 40
+    paddingRight: "4%"
   }
 }))
 
 const OptionsContainer = styled(Grid)(({ theme }) => ({
-  marginTop: 20,
   [theme.breakpoints.down("sm")]: {
     paddingLeft: "4%",
-    paddingRight: "4%",
-    marginTop: 40
+    paddingRight: "4%"
   }
 }))
 
 const ChoicesContainer = styled(Grid)(({ theme }) => ({
-  marginTop: 50,
   [theme.breakpoints.down("sm")]: {
-    paddingLeft: "2%",
-    paddingRight: "2%",
-    gap: 20
+    gap: 32
   }
 }))
 
 const DescriptionText = styled(Typography)(({ theme }) => ({
-  fontWeight: 200,
+  fontWeight: 300,
+  fontSize: 18,
   color: theme.palette.text.secondary,
   [theme.breakpoints.down("sm")]: {
     fontSize: 14
@@ -70,7 +72,6 @@ const DescriptionText = styled(Typography)(({ theme }) => ({
 
 const OptionButton = styled(Link)(({ theme }) => ({
   [theme.breakpoints.down("sm")]: {
-    width: "95%",
     display: "flex",
     textAlign: "center"
   }
@@ -85,19 +86,20 @@ export const Ownership: React.FC = () => {
       <PageContainer container direction="row">
         <Navbar mode="creator" />
         <PageContent>
-          <CardContainer>
+          <CardContainer container>
             <Grid container direction="row">
               <Title color="textSecondary">Do you already have a governance token?</Title>
             </Grid>
 
-            <Grid container direction="column">
+            <Grid container direction="row">
               <DescriptionContainer item>
                 <DescriptionText>
                   This would be an FA2-compatible token contract that will serve to assign voting weight based on
                   ownership.
                 </DescriptionText>
               </DescriptionContainer>
-
+            </Grid>
+            <Grid container direction="row">
               <OptionsContainer item>
                 <DescriptionText>
                   If you already have this asset deployed, click YES. If not, click NO and we will configure and deploy
@@ -112,14 +114,14 @@ export const Ownership: React.FC = () => {
               alignContent="center"
               justifyContent={isMobileSmall ? "center" : "flex-start"}
             >
-              <Grid item xs={isMobileSmall ? undefined : 3}>
+              <Grid item xs={isMobileSmall ? 12 : 3} container justifyContent={isMobileSmall ? "center" : "flex-start"}>
                 <OptionButton underline="none" href={`/creator/build`}>
                   <MainButton variant="contained" color="secondary">
                     Yes, I have one
                   </MainButton>
                 </OptionButton>
               </Grid>
-              <Grid item xs={isMobileSmall ? undefined : 3}>
+              <Grid item xs={isMobileSmall ? 12 : 3} container justifyContent={isMobileSmall ? "center" : "flex-start"}>
                 <OptionButton underline="none" href={`/creator/deployment`}>
                   <MainButton variant="contained" color="secondary">
                     No, I need one