|
1 | | -import React, { useState } from "react" |
2 | | -import { Grid, Typography, Box, useMediaQuery, useTheme } from "components/ui" |
3 | | - |
4 | | -import { ReactComponent as LiteIcon } from "assets/img/lite-dao.svg" |
5 | | -import { ReactComponent as FullIcon } from "assets/img/full-dao.svg" |
| 1 | +import React, { useEffect } from "react" |
| 2 | +import { Grid, Box, CircularProgress } from "components/ui" |
6 | 3 |
|
7 | 4 | import { TitleBlock } from "modules/common/TitleBlock" |
8 | 5 | import useEvmDaoCreateStore from "services/contracts/etherlinkDAO/hooks/useEvmDaoCreateStore" |
9 | 6 |
|
10 | | -// Styled components replaced with inline styles |
11 | | - |
12 | | -type DaoTemplate = "full" | "lite" |
13 | | - |
14 | 7 | export const EvmDaoTemplate = (): JSX.Element => { |
15 | | - const theme = useTheme() |
16 | | - const { data: daoData, setFieldValue } = useEvmDaoCreateStore() |
17 | | - const selectedTemplate = daoData.template |
18 | | - const isMobileSmall = useMediaQuery(theme.breakpoints.down("xs")) |
19 | | - const [error, setError] = useState<boolean>(false) |
20 | | - |
21 | | - const handleTemplateSelect = (template: DaoTemplate) => { |
22 | | - setError(false) |
23 | | - setFieldValue("template", template) |
24 | | - } |
25 | | - |
| 8 | + const { setFieldValue, next } = useEvmDaoCreateStore() |
| 9 | + |
| 10 | + // Auto-select "full" template and advance to next step |
| 11 | + useEffect(() => { |
| 12 | + setFieldValue("template", "full") |
| 13 | + // Small delay to ensure state is set before navigating |
| 14 | + const timer = setTimeout(() => { |
| 15 | + next.handler() |
| 16 | + }, 100) |
| 17 | + return () => clearTimeout(timer) |
| 18 | + }, []) |
| 19 | + |
| 20 | + // Show loading state while auto-advancing |
26 | 21 | return ( |
27 | 22 | <Box> |
28 | | - <TitleBlock title={"DAO Creator"} description={"Create an organization by picking a template below."} /> |
29 | | - <Grid |
30 | | - container |
31 | | - justifyContent={isMobileSmall ? "center" : "space-between"} |
32 | | - direction="row" |
33 | | - spacing={isMobileSmall ? 2 : 0} |
34 | | - > |
35 | | - <Grid |
36 | | - item |
37 | | - container |
38 | | - direction="column" |
39 | | - justifyContent="flex-start" |
40 | | - alignItems="center" |
41 | | - xs={12} |
42 | | - sm={12} |
43 | | - md={5} |
44 | | - onClick={() => handleTemplateSelect("full")} |
45 | | - style={{ |
46 | | - height: 273, |
47 | | - marginTop: 30, |
48 | | - background: theme.palette.primary.main, |
49 | | - borderRadius: 8, |
50 | | - maxWidth: isMobileSmall ? "100%" : 342, |
51 | | - width: isMobileSmall ? "100%" : "-webkit-fill-available", |
52 | | - textAlign: "start", |
53 | | - cursor: "pointer", |
54 | | - paddingBottom: 0, |
55 | | - padding: "33px 38px 0px", |
56 | | - border: selectedTemplate === "full" ? "3px solid rgba(129, 254, 183, 0.4)" : undefined |
57 | | - }} |
58 | | - > |
59 | | - <FullIcon style={{ marginBottom: 16 }} /> |
60 | | - <Typography |
61 | | - color="textSecondary" |
62 | | - style={{ fontSize: 18, fontWeight: 600, fontFamily: "Roboto Flex", marginBottom: 10 }} |
63 | | - > |
64 | | - Full DAO |
65 | | - </Typography> |
66 | | - <Typography |
67 | | - color="textSecondary" |
68 | | - style={{ fontWeight: 300, fontSize: 18, lineHeight: "160%", alignSelf: "stretch" }} |
69 | | - > |
70 | | - Contract interaction. Transfer assets based on vote outcomes. |
71 | | - </Typography> |
72 | | - </Grid> |
73 | | - |
74 | | - <Grid |
75 | | - item |
76 | | - container |
77 | | - direction="column" |
78 | | - justifyContent="flex-start" |
79 | | - alignItems="center" |
80 | | - xs={12} |
81 | | - sm={12} |
82 | | - md={5} |
83 | | - onClick={() => handleTemplateSelect("lite")} |
84 | | - style={{ |
85 | | - height: 273, |
86 | | - marginTop: 30, |
87 | | - background: theme.palette.primary.main, |
88 | | - borderRadius: 8, |
89 | | - maxWidth: isMobileSmall ? "100%" : 342, |
90 | | - width: isMobileSmall ? "100%" : "-webkit-fill-available", |
91 | | - textAlign: "start", |
92 | | - cursor: "pointer", |
93 | | - paddingBottom: 0, |
94 | | - padding: "33px 38px 0px", |
95 | | - border: selectedTemplate === "lite" ? "3px solid rgba(129, 254, 183, 0.4)" : undefined |
96 | | - }} |
97 | | - > |
98 | | - <LiteIcon style={{ marginBottom: 16 }} /> |
99 | | - <Typography |
100 | | - color="textSecondary" |
101 | | - style={{ fontSize: 18, fontWeight: 600, fontFamily: "Roboto Flex", marginBottom: 10 }} |
102 | | - > |
103 | | - Lite DAO |
104 | | - </Typography> |
105 | | - <Typography |
106 | | - color="textSecondary" |
107 | | - style={{ fontWeight: 300, fontSize: 18, lineHeight: "160%", alignSelf: "stretch" }} |
108 | | - > |
109 | | - Off-chain weighted voting. Multiple voting strategies. No treasury. |
110 | | - </Typography> |
111 | | - </Grid> |
| 23 | + <TitleBlock title={"DAO Creator"} description={"Loading..."} /> |
| 24 | + <Grid container justifyContent="center" alignItems="center" style={{ minHeight: 200 }}> |
| 25 | + <CircularProgress color="secondary" /> |
112 | 26 | </Grid> |
113 | | - {error && ( |
114 | | - <Typography style={{ display: "block", fontSize: 14, color: "red", marginTop: 8 }}> |
115 | | - Must select a template in order to continue |
116 | | - </Typography> |
117 | | - )} |
118 | 27 | </Box> |
119 | 28 | ) |
120 | 29 | } |
0 commit comments