UI upgrades & Self deployed step added (#609)

* All Homebase modals updated (#593) * modals updated * current delegate added * Settings modal (#594) * contract field & delegate added * responsive modal * Add delegated token deployment (#592) Signed-off-by: Manank Patni <manank321@gmail.com> * ui upgrades & self deployed step added * faq links changed * article link added - deployment type * Add api call to deployer Signed-off-by: Manank Patni <manank321@gmail.com> * Add backend logic * Fix states and progress Signed-off-by: Manank Patni <manank321@gmail.com> * Add DAO Deployer API ENV Signed-off-by: Manank Patni <manank321@gmail.com> * states on deployment fixed --------- Signed-off-by: Manank Patni <manank321@gmail.com> Co-authored-by: Manank Patni <manank321@gmail.com>
dOrgTech · Jul 21, 2023 · 6c8903c · 6c8903c
1 parent fd22d13
commit 6c8903c
Show file tree

Hide file tree

Showing 43 changed files with 2,194 additions and 5,307 deletions.
diff --git a/src/assets/img/download.svg b/src/assets/img/download.svg
diff --git a/src/assets/img/lite-dao.svg b/src/assets/img/lite-dao.svg
diff --git a/src/assets/img/managed.svg b/src/assets/img/managed.svg
diff --git a/src/assets/img/self-deployed.svg b/src/assets/img/self-deployed.svg
diff --git a/src/modules/common/CopyAddress.tsx b/src/modules/common/CopyAddress.tsx
@@ -16,7 +16,7 @@ export const CopyAddress: React.FC<Props> = ({ address, typographyProps }) => {
     <>
       <Grid container alignItems="center">
         <Grid item>
-          <Typography variant="subtitle1" color="textPrimary" {...typographyProps}>
+          <Typography variant="subtitle2" color="textPrimary" {...typographyProps}>
             {isMobileSmall ? toShortAddress(address) : address}
           </Typography>
         </Grid>

diff --git a/src/modules/common/CopyButton.tsx b/src/modules/common/CopyButton.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react"
 import { Box, styled, Tooltip } from "@material-ui/core"
-import { FileCopyOutlined } from "@material-ui/icons"
+import { FileCopyOutlined, Image } from "@material-ui/icons"
+import DownloadIcon from "assets/img/download.svg"
 
-const CopyIcon = styled(FileCopyOutlined)({
+const CopyIcon = styled("img")({
   cursor: "pointer"
 })
 
@@ -23,7 +24,7 @@ export const CopyButton: React.FC<{ text: string; style?: any }> = ({ text, styl
       }}
     >
       <Tooltip style={style} placement="bottom" title={!copied ? "Copy to Clipboard" : "Copied!"}>
-        <CopyIcon color="secondary" fontSize="small" />
+        <CopyIcon src={DownloadIcon} />
       </Tooltip>
     </Box>
   )

diff --git a/src/modules/common/MainButton.tsx b/src/modules/common/MainButton.tsx
@@ -7,6 +7,7 @@ export const MainButton = styled(Button)(({ theme }) => ({
   "transition": ".15s ease-in",
   "background": theme.palette.secondary.main,
   "textTransform": "none",
+  "borderRadius": 8,
 
   "&$disabled": {
     boxShadow: "none"

diff --git a/src/modules/common/SmallButton.tsx b/src/modules/common/SmallButton.tsx
@@ -6,6 +6,7 @@ export const SmallButton = styled(Button)({
   "boxShadow": "0px 0px 7px -2px rgba(0, 0, 0, 0.2)",
   "transition": ".15s ease-out",
   "textTransform": "capitalize",
+  "borderRadius": 8,
 
   "&$disabled": {
     boxShadow: "none"

diff --git a/src/modules/common/TitleBlock.tsx b/src/modules/common/TitleBlock.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper, styled, Tooltip, Typography } from "@material-ui/core"
+import { Grid, Link, Paper, styled, Tooltip, Typography } from "@material-ui/core"
 import React from "react"
 import { ReactElement } from "react-markdown/lib/react-markdown"
 import { InfoRounded } from "@material-ui/icons"
@@ -7,14 +7,9 @@ import { CopyButton } from "./CopyButton"
 
 const StyledGrid = styled(Grid)({
   height: "fit-content",
-  background: "#2F3438",
   borderRadius: 8,
-  padding: "30px 40px",
-  marginBottom: 38
-})
-
-const CustomTypography = styled(Typography)({
-  marginTop: 27
+  padding: "0",
+  gap: 16
 })
 
 const CustomTooltip = styled(Tooltip)({
@@ -33,7 +28,7 @@ const InfoIconInput = styled(InfoRounded)(({ theme }) => ({
 }))
 
 const CustomTooltipText = styled(Typography)({
-  fontSize: 12,
+  fontSize: 14,
   marginLeft: 2
 })
 
@@ -50,9 +45,16 @@ interface Props {
   description: ReactElement | string
   tooltip?: boolean
   tooltipText?: string
+  tooltipLink?: string
 }
 
-export const TitleBlock: React.FC<Props> = ({ title = "", description, tooltip = false, tooltipText = "" }) => {
+export const TitleBlock: React.FC<Props> = ({
+  title = "",
+  description,
+  tooltip = false,
+  tooltipText = "",
+  tooltipLink = ""
+}) => {
   return (
     <StyledGrid container direction="row" justifyContent="space-between">
       <Grid item xs={12} container direction="row" alignItems="flex-end">
@@ -66,9 +68,9 @@ export const TitleBlock: React.FC<Props> = ({ title = "", description, tooltip =
             <CustomTooltip placement="bottom" title={description}>
               <InfoIconInput />
             </CustomTooltip>
-            <HashLink smooth to="/faq#how-to-create-a-dao-on-homebase" target={"_blank"}>
+            <Link target="_blank" href={`https://faq.tezos-homebase.io/homebase-faq/${tooltipLink}`} color="secondary">
               <CustomTooltipText color="secondary">{tooltipText} </CustomTooltipText>
-            </HashLink>
+            </Link>
           </CustomTextContainer>
         ) : null}
       </Grid>
@@ -79,9 +81,9 @@ export const TitleBlock: React.FC<Props> = ({ title = "", description, tooltip =
             {description}
           </Typography>
         ) : description ? (
-          <CustomTypography variant="subtitle1" color="textSecondary">
+          <Typography variant="subtitle1" color="textSecondary">
             {description}
-          </CustomTypography>
+          </Typography>
         ) : null}
       </Grid>
       <Grid item xs={12}></Grid>

diff --git a/src/modules/creator/components/NavigationBar.tsx b/src/modules/creator/components/NavigationBar.tsx
@@ -3,6 +3,7 @@ import React from "react"
 import { ArrowBackIos } from "@material-ui/icons"
 
 import { NavigationBarProps } from "modules/creator/state"
+import { MainButton } from "modules/common/MainButton"
 
 const Footer = styled(Grid)(({ theme }) => ({
   background: theme.palette.primary.main,
@@ -27,14 +28,12 @@ const BackButton = styled(Paper)({
   width: "fit-content"
 })
 
-const NextButton = styled(Paper)(({ theme }) => ({
-  boxShadow: "none",
-  borderRadius: 4,
+const NextButton = styled(MainButton)(({ theme }) => ({
   textAlign: "center",
   float: "right",
   cursor: "pointer",
   background: theme.palette.secondary.light,
-  padding: 8
+  padding: "8px 16px"
 }))
 
 const BackButtonIcon = styled(ArrowBackIos)(({ theme }) => ({
@@ -58,14 +57,18 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({ back, next }) => {
           {back && (
             <BackButton onClick={back.handler}>
               <BackButtonIcon />
-              <Typography color="secondary">{back.text}</Typography>
+              <Typography style={{ fontWeight: 500 }} color="secondary">
+                {back.text}
+              </Typography>
             </BackButton>
           )}
         </Grid>
         <Grid item xs={6}>
           {next && (
             <NextButton onClick={next.handler}>
-              <Typography color="primary">{next.text}</Typography>
+              <Typography style={{ fontWeight: 500 }} color="primary">
+                {next.text}
+              </Typography>
             </NextButton>
           )}
         </Grid>

diff --git a/src/modules/creator/index.tsx b/src/modules/creator/index.tsx
@@ -10,13 +10,14 @@ import {
   styled,
   useMediaQuery,
   useTheme,
-  Theme
+  Theme,
+  Link
 } from "@material-ui/core"
 import ProgressBar from "react-customizable-progressbar"
 import { useHistory } from "react-router"
 
 import { CreatorContext, StepInfo } from "modules/creator/state"
-import { StepRouter, STEPS, useStepNumber } from "modules/creator/steps"
+import { StepRouter, STEPS, urlToStepMap, useStepNumber } from "modules/creator/steps"
 import { NavigationBar } from "modules/creator/components/NavigationBar"
 import { Navbar } from "modules/common/Toolbar"
 import mixpanel from "mixpanel-browser"
@@ -26,7 +27,6 @@ const PageContainer = styled(Grid)(({ theme }) => ({
 }))
 
 const StepContentContainer = styled(Grid)({
-  marginTop: 28,
   alignItems: "baseline",
   height: "100%",
   paddingTop: 0,
@@ -72,18 +72,17 @@ const FAQClickToAction = styled(Typography)(({ theme }) => ({
   color: theme.palette.secondary.main,
   fontSize: "14px",
   cursor: "pointer",
-  marginTop: 16,
-  marginBottom: 8
+  fontWeight: 300
 }))
 
 const ProgressContainer = styled(Grid)(({ theme }) => ({
   background: "#2F3438",
   display: "grid",
   borderRadius: 8,
-  maxHeight: 585,
+  maxHeight: 650,
   paddingTop: 20,
   position: "sticky",
-  top: 153
+  top: 130
 }))
 
 const custom = (theme: Theme) => ({
@@ -127,10 +126,6 @@ export const DAOCreate: React.FC = () => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"))
 
-  const goToFAQ = (): void => {
-    history.push("/faq")
-  }
-
   useEffect(() => {
     mixpanel.unregister("daoAddress")
     mixpanel.unregister("daoType")
@@ -146,19 +141,22 @@ export const DAOCreate: React.FC = () => {
           <ProgressContainer item xs={3} container direction="column">
             <Grid item container direction="column" alignItems="center" xs>
               <ProgressBar
-                progress={progress}
+                progress={Math.floor((step / (Object.keys(urlToStepMap).length - 1)) * 100)}
                 radius={52}
                 strokeWidth={5}
                 strokeColor={theme.palette.secondary.main}
                 trackStrokeWidth={4}
                 trackStrokeColor={"rgba(255, 255, 255, 0.2)"}
               >
                 <Box className="indicator">
-                  <IndicatorValue>{progress === 0.5 ? 0 : step * 20}%</IndicatorValue>
+                  <IndicatorValue>{Math.floor((step / (Object.keys(urlToStepMap).length - 1)) * 100)}%</IndicatorValue>
                 </Box>
               </ProgressBar>
               <Box>
-                <FAQClickToAction onClick={goToFAQ}>New to DAOs? Read our FAQ</FAQClickToAction>
+                <FAQClickToAction>New to DAOs?</FAQClickToAction>
+                <Link target="_blank" href="https://faq.tezos-homebase.io" color="secondary">
+                  <FAQClickToAction style={{ textDecoration: "underline" }}>Read our FAQ</FAQClickToAction>
+                </Link>
               </Box>
               <StyledStepper activeStep={step} orientation="vertical">
                 {STEPS.map(({ title, path }: StepInfo, index: number) => (
@@ -181,7 +179,7 @@ export const DAOCreate: React.FC = () => {
               </StepContentContainer>
             </Grid>
           </Grid>
-          {step < 5 && <NavigationBar back={back} next={next} />}
+          {step < 6 && <NavigationBar back={back} next={next} />}
         </Grid>
       </PageContent>
     </PageContainer>

diff --git a/src/modules/creator/state/types.ts b/src/modules/creator/state/types.ts
@@ -68,6 +68,8 @@ export interface NavigationBarProps {
 
 export type DAOTemplate = "lambda" | "lite" | ""
 
+export type DeploymentMethod = "managed" | "self-deployed"
+
 type DeploymentStatus = {
   deploying: boolean
   successful: boolean