Merge pull request #12 from commons-stack/launchpad

new-dao.tsx refactor, configure next/previous to handle final step
commons-stack · Oct 5, 2023 · 0e44ebc · 0e44ebc
2 parents e9d0f89 + dd67a40
commit 0e44ebc
Show file tree

Hide file tree

Showing 14 changed files with 441 additions and 363 deletions.
diff --git a/apps/web/public/ABCLaunchpadLogo.svg b/apps/web/public/ABCLaunchpadLogo.svg
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -11,7 +11,7 @@ import App from './App.tsx'
 import Launchpad from './presentation/pages/launchpad';
 import Swap from './presentation/pages/swap';
 import { createHashRouter, RouterProvider, createRoutesFromElements, Route } from "react-router-dom";
-import NewDao from './presentation/pages/new-dao.tsx';
+import NewDao from './presentation/pages/new-dao/new-dao.tsx';
 import { TransactionProvider } from './presentation/providers/TransactionProvider.tsx';
 import { DAOCreationWagmiLSRepository } from './data/DAOCreationWagmiLSRepository.ts';
 

diff --git a/apps/web/src/presentation/components/launchpad/DAOLayout.tsx b/apps/web/src/presentation/components/launchpad/DAOLayout.tsx
@@ -1,19 +1,25 @@
-import { Box, Button, HStack, VStack, Flex, Image, Text } from "@chakra-ui/react";
+import { Box, Button, HStack, VStack, Flex, Image, Text, Step } from "@chakra-ui/react";
 
 type Step = {
     title: string;
     content: JSX.Element;
     index: number;
     completed: boolean;
+    nextStepText?: string;
+    previousStepText?: string;
+    lastStepAction?: () => void;
 }
 
 interface DAOLayoutProps {
+    onNextStep: () => void,
+    onPreviousStep: () => void,
     steps: Step[];
     currentStep: number;
-    onStepChanged: (data: number) => void;
 }
 
-export default function DAOLayout({ steps, currentStep, onStepChanged }: DAOLayoutProps) {
+export default function DAOLayout({ steps, currentStep, onNextStep, onPreviousStep }: DAOLayoutProps) {
+    console.log(steps[currentStep].lastStepAction);
+
     return (
         <Flex justify="center" align="center" height="auto" bg="brand.100" pb="100px">
             <VStack
@@ -96,11 +102,21 @@ export default function DAOLayout({ steps, currentStep, onStepChanged }: DAOLayo
                 {steps[currentStep].content}
 
                 <HStack spacing={4} pb="50px" pt="40px">
-                    <Button onClick={() => onStepChanged(currentStep - 1)} variant="outline">Back</Button>
+                    <Button onClick={() => onPreviousStep()} variant="outline">
+                        {steps[currentStep].previousStepText ? steps[currentStep].previousStepText : 'Previous'}
+                    </Button>
                     <Button
-                        onClick={() => onStepChanged(currentStep + 1)}
+                        onClick={() => {
+                            console.log(steps[currentStep + 1]);
+                            const action = steps[currentStep + 1].lastStepAction;
+                            if (typeof action === "function") {
+                                action();                                
+                            } else {
+                                onNextStep();
+                            }
+                        }}
                         isDisabled={!steps[currentStep].completed}>
-                        Next
+                        {steps[currentStep].nextStepText ? steps[currentStep].nextStepText : 'Next'}
                     </Button>
                 </HStack>
             </VStack>

diff --git a/apps/web/src/presentation/components/launchpad/abc/ABCSettingsModelController.ts b/apps/web/src/presentation/components/launchpad/abc/ABCSettingsModelController.ts
@@ -59,7 +59,6 @@ export function useABCSettingsModelController(daoCreationRepository: DAOCreation
             } else {
                 setEnoughBalance(false);
             }   
-            console.log(enoughBalance);
         }
         checkBalance();
     }, [

diff --git a/apps/web/src/presentation/components/launchpad/abc/AugmentedBondingCurveSettings.tsx b/apps/web/src/presentation/components/launchpad/abc/AugmentedBondingCurveSettings.tsx
@@ -99,7 +99,7 @@ export default function AugmentedBondingCurveSettings({ onStepCompletionChanged,
                         </FormLabel>
                         <Box>
                             <Flex>
-                                <Select placeholder="Select option" borderRight="1px solid" borderColor="brand.900" borderRadius="0" borderTopLeftRadius="15px" borderBottomLeftRadius="15px" value={augmentedBondingCurveSettings.getCollateralToken()?.getTokenSymbol() || ''} onChange={handleCollateralTokenChange}>
+                                <Select placeholder="Select option" borderRight="1px solid" borderColor="brand.900" borderRadius="0" borderTopLeftRadius="8px" borderBottomLeftRadius="8px" value={augmentedBondingCurveSettings.getCollateralToken()?.getTokenSymbol() || ''} onChange={handleCollateralTokenChange}>
                                     {collateralTokenList.map((token) => (
                                         <option key={token.tokenAddress} value={token.tokenSymbol}>
                                             <HStack>
@@ -109,7 +109,7 @@ export default function AugmentedBondingCurveSettings({ onStepCompletionChanged,
                                         </option>
                                     ))}
                                 </Select>
-                                <CustomInput placeholder="Enter value" borderRadius="15px" borderLeft="0" borderTopLeftRadius="0" borderBottomLeftRadius="0" borderColor="brand.900" value={augmentedBondingCurveSettings.getReserveInitialBalance() ?? 0} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInitialReserveChange(Number(e.target.value))} type="number" />
+                                <CustomInput placeholder="Enter value" borderRadius="8px" borderLeft="0" borderTopLeftRadius="0" borderBottomLeftRadius="0" borderColor="brand.900" value={augmentedBondingCurveSettings.getReserveInitialBalance() ?? 0} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInitialReserveChange(Number(e.target.value))} type="number" />
                             </Flex>
                         </Box>
                     </FormControl>