Congratulations message launch dao

apps/abclaunch/src/components/DaoStepper.tsx

@@ -23,10 +23,11 @@ function Steps({ steps, activeStep }: { steps: { title: string }[], activeStep:
 }
 
 export default function DaoStepper(
-    { steps, onComplete, isValid }: {
+    { steps, onComplete, isValid, blockingComponent }: {
         steps: { title: string, component: React.ReactElement }[],
         onComplete: () => void,
-        isValid: (step: number) => boolean
+        isValid: (step: number) => boolean,
+        blockingComponent?: React.ReactElement
     }
 ) {
 
@@ -59,19 +60,25 @@ export default function DaoStepper(
                 >
                     <Steps steps={steps} activeStep={activeStep} />
                 </Box>
+                {
+                    blockingComponent ??
+                    <>
+                        {
+                            steps[activeStep].component
+                        }
 
-                {steps[activeStep].component}
-
-                <HStack spacing={4} pb="50px" pt="40px">
-                    <Button variant="outline" onClick={activeStep === 0 ? () => navigate(-1) : goToPrevious}>
-                        Previous
-                    </Button>
-                    <Button
-                        onClick={isLastStep ? onComplete : goToNext}
-                        isDisabled={!valid}>
-                        {isLastStep ? 'Launch' : 'Next'}
-                    </Button>
-                </HStack>
+                        <HStack spacing={4} pb="50px" pt="40px">
+                            <Button variant="outline" onClick={activeStep === 0 ? () => navigate(-1) : goToPrevious}>
+                                Previous
+                            </Button>
+                            <Button
+                                onClick={isLastStep ? onComplete : goToNext}
+                                isDisabled={!valid}>
+                                {isLastStep ? 'Launch' : 'Next'}
+                            </Button>
+                        </HStack>
+                    </>
+                }
             </VStack>
         </Flex>
     )

apps/abclaunch/src/components/dao-steps/DaoLaunched.tsx

@@ -0,0 +1,22 @@
+import { Box, Button, HStack, Text, VStack } from "@chakra-ui/react";
+import { useRecoilValue } from "recoil";
+import { newDaoCreatedUrl } from "../../recoil";
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+
+export default function DaoLaunched() {
+
+    const createdDaoUrl = useRecoilValue(newDaoCreatedUrl);
+
+    return (
+        <Box pt="75px" pb="75px">
+            <VStack spacing={0} className="abcs-newdao-step-content">
+                <Text fontFamily="VictorSerifTrial" fontSize="72px" color="brand.900">Congratulations!</Text>
+                <Text mt="32px" fontSize="24px" color="brand.900" >Your DAO and ABC were created.</Text>
+                <HStack mt="28px" spacing={5}>
+                    <Button onClick={() => window.open("https://abcswap.xyz", '_blank')}>Go to ABC Swap <ArrowForwardIcon /></Button>
+                    <Button onClick={() => window.open(createdDaoUrl, '_blank')}>Go to my DAO <ArrowForwardIcon/></Button>
+                </HStack>
+            </VStack>
+        </Box>
+    );
+}

apps/abclaunch/src/pages/NewDao.tsx

@@ -1,19 +1,22 @@
-import { Box, HStack, Text, VStack, Image, Button } from '@chakra-ui/react'
-import { useAccount, useBalance } from 'wagmi';
-import { parseEther } from 'viem';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { WarningTwoIcon } from '@chakra-ui/icons'
+import { WarningTwoIcon } from '@chakra-ui/icons';
+import { Box, Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { CustomConnectButton } from 'commons-ui/src/components/ConnectButton';
 import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useProcessTransactions } from 'transactions-modal';
+import { parseEther } from 'viem';
+import { useAccount, useBalance } from 'wagmi';
 import DaoStepper from '../components/DaoStepper';
-import OrganizationName from '../components/dao-steps/OrganizationName';
-import ConfigureVoting from '../components/dao-steps/ConfigureVoting';
-import ConfigureToken from '../components/dao-steps/ConfigureToken';
 import ConfigureAbc from '../components/dao-steps/ConfigureAbc';
+import ConfigureToken from '../components/dao-steps/ConfigureToken';
+import ConfigureVoting from '../components/dao-steps/ConfigureVoting';
+import DaoLaunched from '../components/dao-steps/DaoLaunched';
+import OrganizationName from '../components/dao-steps/OrganizationName';
 import Summary from '../components/dao-steps/Summary';
-import { useProcessTransactions } from 'transactions-modal';
-import useLaunchSteps from '../hooks/useLaunchSteps';
 import useIsValid from '../hooks/useIsValid';
-import { CustomConnectButton } from 'commons-ui/src/components/ConnectButton';
+import useLaunchSteps from '../hooks/useLaunchSteps';
+import { newDaoCreatedIsValid, newDaoCreatedState, newDaoNameState } from '../recoil';
 
 function Error({ children }: { children: React.ReactNode }) {
     return (
@@ -48,6 +51,10 @@ export default function NewDao() {
 
     const isValid = useIsValid()
 
+    const setNewDaoCreated = useSetRecoilState(newDaoCreatedState)
+    const daoName = useRecoilValue(newDaoNameState)
+    const newDaoHasBeenCreated = useRecoilValue(newDaoCreatedIsValid);
+
     const steps = [
         { title: 'Name your DAO', component: <OrganizationName /> },
         { title: 'Configure voting', component: <ConfigureVoting /> },
@@ -58,7 +65,14 @@ export default function NewDao() {
 
     if (location.pathname === '/new-dao/wizard') {
         return (
-            <DaoStepper steps={steps} isValid={isValid} onComplete={() => processTransactions("Launch your DAO", undefined, txSteps)} />
+            <DaoStepper
+                steps={steps}
+                isValid={isValid}
+                onComplete={() => processTransactions("Launch your DAO", undefined, txSteps, true, undefined, () => {
+                    setNewDaoCreated({name:daoName.name})
+                })}
+                blockingComponent={newDaoHasBeenCreated ? <DaoLaunched /> : undefined}
+            />
         )
     }
     return (

apps/abclaunch/src/recoil/index.ts

@@ -3,3 +3,4 @@ export {default as newDaoCheckedState, newDaoCheckedIsValidState} from "./newDao
 export {default as newDaoNameState, newDaoNameIsValidState} from "./newDaoName";
 export {default as newDaoTokenState, newDaoTokenSupplyState, newDaoTokenIsValidState} from "./newDaoToken";
 export {default as newDaoVotingState, newDaoVotingDurationState, newDaoVotingIsValidState} from "./newDaoVoting";
+export {default as newDaoCreatedState, newDaoCreatedUrl, newDaoCreatedIsValid} from "./newDaoCreated";

apps/abclaunch/src/recoil/newDaoCreated/atom.ts

@@ -0,0 +1,10 @@
+import { atom } from "recoil";
+
+export default atom<{
+    name: string;
+}>({
+    key: 'newDaoCreated',
+    default: {
+        name: ''
+    }
+});

apps/abclaunch/src/recoil/newDaoCreated/createdIsValidSelector.ts

@@ -0,0 +1,10 @@
+import { selector } from "recoil";
+import newDaoNameAtom from "./atom";
+
+export default selector({
+    key: 'newDaoCreatedIsValid',
+    get: ({get}) => {
+        const {name} = get(newDaoNameAtom);
+        return name.length > 0;
+    },
+});

apps/abclaunch/src/recoil/newDaoCreated/index.ts

@@ -0,0 +1,5 @@
+import atom from "./atom";
+import newDaoCreatedUrl from "./urlSelector";
+import newDaoCreatedIsValid from "./createdIsValidSelector";
+export {newDaoCreatedUrl, newDaoCreatedIsValid};
+export default atom;

apps/abclaunch/src/recoil/newDaoCreated/urlSelector.ts

@@ -0,0 +1,10 @@
+import { selector } from "recoil";
+import newDaoNameAtom from "./atom";
+
+export default selector({
+    key: 'newDaoCreatedUrl',
+    get: ({get}) => {
+        const {name} = get(newDaoNameAtom);
+        return `https://optimism.aragon.blossom.software/#/${name}`
+    },
+});

apps/abcswap/src/pages/Swap.tsx

@@ -71,7 +71,7 @@ export default function SimpleConvert() {
 
     function handleSwap() {
         const subtitle = `Swapping ${formatDisplayNumber(amount)} ${fromToken.symbol} to ${formatDisplayNumber(convertedAmountFormatted)} ${toToken.symbol}`;
-        processTransactions("Swapping Tokens", subtitle, steps, "Token Swap Complete.");
+        processTransactions("Swapping Tokens", subtitle, steps, false, "Token Swap Complete.");
     }
 
     function handleAmountChange(amount: string) {

pkg/transactions-modal/src/components/TransactionModal.tsx

@@ -20,23 +20,30 @@ import {
     Button,
     Heading
 } from '@chakra-ui/react';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useEffect } from 'react';
 import { TransactionContext } from '../providers/TransactionProvider';
 
 export default function TransactionModal() {
 
-    const { title, subtitle, isOpen, onClose, steps, activeStep, stepStatus, successTitle } = useContext(TransactionContext);
+    const { title, subtitle, isOpen, onClose, steps, activeStep, stepStatus, closeOnSuccess, successTitle, successCallback } = useContext(TransactionContext);
 
     const description = useCallback((index: number) => {
         return stepStatus[index] === 'success' ? 'Success' : stepStatus[index] === 'error' ? 'Error' : stepStatus[index] === 'pending' ? 'Signed' : 'Waiting for signature'
     }, [stepStatus]);
 
-    const isTransactionSucceeded = (): boolean => {
+    useEffect(()=>{
+        if (isAllTransactionsSucceeded()) {
+            if(closeOnSuccess) onClose();
+            if(successCallback) successCallback();
+        }
+    }, [activeStep, successCallback, steps, closeOnSuccess]);
+
+    const isAllTransactionsSucceeded = (): boolean => {
         return (activeStep >= steps.length)
     }
 
     const isTransactionsEnded = (): boolean => {
-        if (isTransactionSucceeded()) {
+        if (isAllTransactionsSucceeded()) {
             return true
         }
         return stepStatus[activeStep] && stepStatus[activeStep] !== 'pending' && stepStatus[activeStep] !== 'notsigned'
@@ -50,7 +57,7 @@ export default function TransactionModal() {
                 <ModalBody>
                     <VStack pt="145px" pb="105px">
                         <Heading fontSize="40px" fontWeight={500} color="brand.900">
-                            {(isTransactionSucceeded() && successTitle) ? successTitle: title.length > 0 ? title : (steps.length > 1 ? 'Confirm Transactions' : 'Confirm Transaction')}
+                            {(isAllTransactionsSucceeded() && successTitle) ? successTitle: title.length > 0 ? title : (steps.length > 1 ? 'Confirm Transactions' : 'Confirm Transaction')}
                         </Heading>
                         {subtitle &&
                             <Text fontSize="24px" fontWeight={400} mt="24px" color="brand.900">{subtitle}</Text>
@@ -92,3 +99,4 @@ export default function TransactionModal() {
         </Modal>
     )
 }
+

pkg/transactions-modal/src/providers/TransactionProvider.tsx

@@ -11,7 +11,9 @@ interface TransactionContextData {
     stepStatus: ("notsigned" | "pending" | "success" | "error")[];
     activeStep: number;
     successTitle?: string;
-    processTransactions: (title:string, subtitle:string|undefined, newSteps: Step[], successTitle?: string) => void;
+    closeOnSuccess?: boolean;
+    successCallback?: () => void;
+    processTransactions: (title: string, subtitle: string | undefined, newSteps: Step[], closeOnSuccess?: boolean, successTitle?: string, successCallback?: () => void) => void;
     onTransactionSuccess: () => void;
     onTransactionSent: () => void;
     onTransactionError: () => void;
@@ -25,11 +27,11 @@ const TransactionContext = React.createContext<TransactionContextData>({
     steps: [],
     stepStatus: [],
     activeStep: 0,
-    processTransactions: () => {},
-    onTransactionSuccess: () => {},
-    onTransactionSent: () => {},
-    onTransactionError: () => {},
-    onClose: () => {}
+    processTransactions: () => { },
+    onTransactionSuccess: () => { },
+    onTransactionSent: () => { },
+    onTransactionError: () => { },
+    onClose: () => { }
 });
 
 interface Props {
@@ -44,14 +46,18 @@ const TransactionProvider: FC<Props> = ({ children, transactionModal }) => {
     const [steps, setSteps] = useState<Step[]>([]);
     const [stepStatus, setStepStatus] = useState<("notsigned" | "pending" | "success" | "error")[]>([]);
     const [successTitle, setSuccessTitle] = useState<string | undefined>(undefined);
+    const [successCallback, setSuccessCallback] = useState<(() => void) | undefined>(undefined);
+    const [closeOnSuccess, setCloseOnSuccess] = useState<boolean | undefined>(undefined);
     const [activeStep, setActiveStep] = useState(0);
 
-    const processTransactions = useCallback((title:string, subtitle: string|undefined, newSteps: Step[], successTitle?: string) => {
+    const processTransactions = useCallback((title: string, subtitle: string | undefined, newSteps: Step[], closeOnSuccess?: boolean, successTitle?: string, successCallback?: () => void) => {
         setTitle(title);
-        setSubtitle(subtitle??"");
+        setSubtitle(subtitle ?? "");
         setSteps(newSteps);
         setStepStatus([]);
         setSuccessTitle(successTitle);
+        setSuccessCallback(() => successCallback);
+        setCloseOnSuccess(closeOnSuccess)
         setActiveStep(0);
         setIsOpen(true);
     }, [setSteps, setStepStatus, setActiveStep, setIsOpen]);
@@ -85,7 +91,9 @@ const TransactionProvider: FC<Props> = ({ children, transactionModal }) => {
             steps,
             activeStep,
             stepStatus,
+            closeOnSuccess,
             successTitle,
+            successCallback,
             processTransactions,
             onTransactionSent,
             onTransactionSuccess,