update branch with master and develop and added try catch

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:  })
 

src/modules/common/TitleBlock.tsx

@@ -3,6 +3,10 @@ import React from "react"
 import { ReactElement } from "react-markdown/lib/react-markdown"
 import { InfoRounded } from "@material-ui/icons"
 
+const DescriptionText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.secondary.dark
+}))
+
 const StyledGrid = styled(Grid)({
   height: "fit-content",
   borderRadius: 8,
@@ -26,17 +30,22 @@ const InfoIconInput = styled(InfoRounded)(({ theme }) => ({
 }))
 
 const CustomTooltipText = styled(Typography)({
-  fontSize: 14,
-  marginLeft: 2
+  fontSize: 18,
+  marginLeft: 2,
+  fontWeight: 200
 })
 
-const CustomTextContainer = styled(Paper)({
+const CustomTextContainer = styled(Paper)(({ theme }) => ({
   maxWidth: "fit-content",
   background: "inherit",
   boxShadow: "none",
   display: "flex",
-  alignItems: "center"
-})
+  alignItems: "center",
+  marginRight: 24,
+  [theme.breakpoints.down("sm")]: {
+    alignItems: "baseline"
+  }
+}))
 
 interface Props {
   title?: ReactElement | string
@@ -55,7 +64,7 @@ export const TitleBlock: React.FC<Props> = ({
 }) => {
   return (
     <StyledGrid container direction="row" justifyContent="space-between">
-      <Grid item xs={12} container direction="row" alignItems="flex-end">
+      <Grid item xs={12} container direction="row" alignItems="baseline">
         <CustomTextContainer>
           <Typography variant="h3" color="textSecondary">
             {title}
@@ -74,14 +83,9 @@ export const TitleBlock: React.FC<Props> = ({
       </Grid>
       <Grid item xs={12}>
         {title === "" ? (
-          <Typography variant="subtitle1" color="textSecondary">
-            {" "}
-            {description}
-          </Typography>
+          <DescriptionText variant="subtitle1"> {description}</DescriptionText>
         ) : description ? (
-          <Typography variant="subtitle1" color="textSecondary">
-            {description}
-          </Typography>
+          <DescriptionText variant="subtitle1">{description}</DescriptionText>
         ) : null}
       </Grid>
       <Grid item xs={12}></Grid>

src/modules/creator/components/DeploymentLoader.tsx

@@ -1,17 +1,20 @@
 import {
   Box,
   Grid,
+  LinearProgress,
   Step,
   StepConnector,
   StepLabel,
   Stepper,
   styled,
   Theme,
   Typography,
+  useTheme,
   withStyles
 } from "@material-ui/core"
 import React, { useEffect, useState } from "react"
 import { SuspenseDots } from "./SuspenseDots"
+import ProgressBar from "react-customizable-progressbar"
 
 const WaitingText = styled(Typography)({
   marginTop: 46,
@@ -23,70 +26,12 @@ const WaitingText = styled(Typography)({
 
 const StyledContainer = styled(Box)({
   width: "100%",
-  marginTop: "-15%",
   minWidth: 650,
   ["@media (max-width:1167px)"]: {
     minWidth: "auto"
   }
 })
 
-const StyledStepper = styled(Stepper)(({ theme }) => ({
-  "width": "100%",
-  "paddingLeft": 0,
-  "paddingRight": 0,
-  "background": "inherit",
-  "& .MuiStepConnector-alternativeLabel": {
-    "left": "calc(-50% + 19px)",
-    "right": "calc(50% + 19px)",
-    "top": 16,
-    "& .MuiStepConnector-lineHorizontal": {
-      borderColor: theme.palette.primary.light,
-      borderTopWidth: 3
-    }
-  }
-}))
-
-const StyledLabel = styled(StepLabel)(
-  ({ theme, focused, hasError }: { theme: Theme; focused: boolean; hasError: boolean }) => ({
-    "& .MuiStepIcon-root": {
-      borderWidth: 3
-    },
-    "& .MuiStepIcon-active": {
-      borderColor: hasError ? theme.palette.error.main : focused ? "#fff" : theme.palette.primary.light,
-      fill: "none"
-    },
-    "& .MuiStepIcon-text": {
-      fill: "none"
-    },
-    "& .MuiStepIcon-completed": {
-      borderColor: focused ? "#fff" : theme.palette.secondary.main,
-      fill: theme.palette.secondary.main
-    }
-  })
-)
-
-const ColorlibConnector = withStyles((theme: Theme) => ({
-  alternativeLabel: {
-    top: 22
-  },
-  active: {
-    "& $line": {
-      backgroundColor: theme.palette.secondary.main
-    }
-  },
-  completed: {
-    "& $line": {
-      backgroundColor: theme.palette.secondary.main
-    }
-  },
-  line: {
-    height: 3,
-    border: 0,
-    backgroundColor: theme.palette.primary.light,
-    borderRadius: 1
-  }
-}))(StepConnector)
-
 interface Props {
   states: { activeText: string; completedText: string }[]
   activeStep: number | undefined
@@ -100,6 +45,8 @@ export const DeploymentLoader: React.FC<Props> = ({ states, activeStep, error })
   const isStarted = Number.isInteger(activeStep)
   const showActiveText = isStarted && !isFinished && activeStep === focusedState
   const showCompletedText = isStarted && focusedState < (activeStep as number)
+  const [progress, setProgress] = useState(0)
+  const theme = useTheme()
 
   useEffect(() => {
     if (activeStep) {
@@ -111,9 +58,14 @@ export const DeploymentLoader: React.FC<Props> = ({ states, activeStep, error })
     }
   }, [activeStep, isFinished, states.length])
 
+  useEffect(() => {
+    setProgress(progress + 20)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusedState])
+
   return (
     <StyledContainer>
-      <Grid container justifyContent="center">
+      <Grid container justifyContent="flex-start">
         <Grid item>
           <WaitingText variant="subtitle1" color="textSecondary">
             {showActiveText
@@ -127,25 +79,8 @@ export const DeploymentLoader: React.FC<Props> = ({ states, activeStep, error })
           </WaitingText>
         </Grid>
       </Grid>
-      <StyledStepper activeStep={activeStep} alternativeLabel nonLinear connector={<ColorlibConnector />}>
-        {states.map((_, index) => (
-          <Step
-            key={index}
-            onClick={() => {
-              if (!activeStep) {
-                return
-              }
 
-              if (index <= activeStep) {
-                setFocusedState(index)
-              }
-            }}
-            completed={activeStep ? index < activeStep : false}
-          >
-            <StyledLabel hasError={activeStep === index && !!error} focused={index === focusedState} />
-          </Step>
-        ))}
-      </StyledStepper>
+      <LinearProgress color="secondary" variant="determinate" value={progress} />
     </StyledContainer>
   )
 }

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">

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,
@@ -179,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{" "}
@@ -196,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{" "}
@@ -216,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{" "}
@@ -225,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{" "}
@@ -262,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

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"}