[prod] fix: bugs in dao creation flow

apps/web/src/modules/dashboard/CreateActions.tsx

@@ -38,7 +38,7 @@ export const CreateActions: React.FC<CreateActionsProps> = ({ userAddress }) =>
         <Button
           as={Link}
           href="/create"
-          style={{ width: '100%', flex: 1 }}
+          style={{ width: '100%' }}
           variant="secondaryOutline"
         >
           Create a DAO

packages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsx

@@ -119,8 +119,6 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
 
   const { address } = useAccount()
 
-  // Determine if founder allocation is enabled based on existing values
-  // Enable if there's more than one founder OR if the first founder has non-zero allocation
   const hasExistingAllocation =
     founderAllocation.length > 1 ||
     (founderAllocation.length === 1 &&
@@ -129,6 +127,12 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
   const [hasFounderAllocation, setHasFounderAllocation] =
     useState<boolean>(hasExistingAllocation)
 
+  useEffect(() => {
+    setHasFounderAllocation(hasExistingAllocation)
+  }, [hasExistingAllocation])
+
+  // Determine if founder allocation is enabled based on existing values
+  // Enable if there's more than one founder OR if the first founder has non-zero allocation
   // should always default to the current signer address given this field is disabled
   const initialFounderValues =
     founderAllocation.length === 0
@@ -154,34 +158,6 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
     setActiveSection(activeSection - 1)
   }
 
-  const handleToggleFounderAllocation = () => {
-    const newState = !hasFounderAllocation
-    setHasFounderAllocation(newState)
-
-    // If toggling OFF, set form values to single founder with 0% allocation
-    if (!newState && formRef.current) {
-      formRef.current.setFieldValue('founderAllocation', [
-        {
-          founderAddress: address || '',
-          allocationPercentage: 0,
-          endDate: getOneMonthFromNow(),
-          admin: true,
-        },
-      ])
-    }
-    // If toggling ON, reset to initial values (empty allocation to force user input)
-    else if (newState && formRef.current) {
-      formRef.current.setFieldValue('founderAllocation', [
-        {
-          founderAddress: address || '',
-          allocationPercentage: '',
-          endDate: '',
-          admin: true,
-        },
-      ])
-    }
-  }
-
   const handleSubmit = async ({
     founderAllocation,
     founderRewardRecipient,
@@ -249,6 +225,34 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
         onSubmit={handleSubmit}
       >
         {(formik) => {
+          const handleToggleFounderAllocation = (nextState: boolean) => {
+            setHasFounderAllocation(nextState)
+
+            // Toggling off keeps the admin founder row but clears the allocation.
+            // Toggling on restores an empty allocation so the user must fill it in.
+            formik.setFieldValue(
+              'founderAllocation',
+              nextState
+                ? [
+                    {
+                      founderAddress: address || '',
+                      allocationPercentage: '',
+                      endDate: '',
+                      admin: true,
+                    },
+                  ]
+                : [
+                    {
+                      founderAddress: address || '',
+                      allocationPercentage: 0,
+                      endDate: getOneMonthFromNow(),
+                      admin: true,
+                    },
+                  ],
+              true
+            )
+          }
+
           return (
             <Form>
               <FormErrorObserver setIsFormSubmittable={setIsFormSubmittable} />
@@ -284,7 +288,7 @@ export const AllocationForm: React.FC<AllocationFormProps> = ({ title }) => {
                 <Heading size="xs">Token Allocation</Heading>
                 <Toggle
                   on={hasFounderAllocation}
-                  onToggle={handleToggleFounderAllocation}
+                  onToggle={() => handleToggleFounderAllocation(!hasFounderAllocation)}
                 />
               </Flex>
 

packages/create-dao-ui/src/components/Artwork/ArtworkUpload.tsx

@@ -6,11 +6,19 @@ import {
   ArtworkUpload as UploadComponent,
   LayerOrdering,
 } from '@buildeross/ui/Artwork'
+import { AnimatedModal } from '@buildeross/ui/Modal'
 import { type FormikProps } from 'formik'
 import { motion } from 'framer-motion'
-import React, { BaseSyntheticEvent, ReactElement, useCallback, useEffect } from 'react'
+import React, {
+  BaseSyntheticEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 
 import { useFormStore } from '../../stores'
+import { ConfirmReset } from '../ConfirmReset/ConfirmReset'
 import { artworkPreviewPanel } from './ArtworkUpload.css'
 
 const previewVariants = {
@@ -51,6 +59,7 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
   errorMessage,
   formik,
 }) => {
+  const [resetModalOpen, setResetModalOpen] = useState(false)
   const {
     setUpArtwork,
     setSetUpArtwork,
@@ -124,6 +133,33 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
     [setOrderedLayers, setFiles]
   )
 
+  const handleResetArtwork = useCallback(() => {
+    if (!formik) return
+
+    const emptyArtworkValues = {
+      artwork: [],
+      filesLength: '',
+      fileType: '',
+    }
+
+    formik.resetForm({ values: emptyArtworkValues })
+    setSetUpArtwork({ ...emptyArtworkValues })
+    setIpfsUpload([])
+    setOrderedLayers([])
+    setIpfsUploadProgress(0)
+    setIsUploadingToIPFS(false)
+    setFiles(undefined)
+    setResetModalOpen(false)
+  }, [
+    formik,
+    setFiles,
+    setIpfsUpload,
+    setIpfsUploadProgress,
+    setIsUploadingToIPFS,
+    setOrderedLayers,
+    setSetUpArtwork,
+  ])
+
   // Set up artwork traits into store
   useEffect(() => {
     if (!uploadedArtwork || !formik) return
@@ -158,6 +194,19 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
   )
   return (
     <>
+      <AnimatedModal
+        open={resetModalOpen}
+        close={() => setResetModalOpen(false)}
+        size="small"
+      >
+        <ConfirmReset
+          handleReset={handleResetArtwork}
+          onDismiss={() => setResetModalOpen(false)}
+          heading="Reset artwork?"
+          helperText="This will clear your uploaded artwork, trait ordering, and preview so you can start over."
+          confirmLabel="Reset artwork"
+        />
+      </AnimatedModal>
       <UploadComponent
         id={id}
         inputLabel={inputLabel}
@@ -170,6 +219,7 @@ export const ArtworkUpload: React.FC<ArtworkFormProps> = ({
         artworkError={artworkError}
         fileType={setUpArtwork.fileType}
         layerOrdering={layerOrdering}
+        onReset={() => setResetModalOpen(true)}
       />
       {showPreview && (
         <motion.div

packages/create-dao-ui/src/components/ConfirmReset/ConfirmReset.tsx

@@ -12,13 +12,22 @@ import {
 interface ConfirmResetProps {
   handleReset: () => void
   onDismiss: () => void
+  heading?: string
+  helperText?: string
+  confirmLabel?: string
 }
 
-export const ConfirmReset: React.FC<ConfirmResetProps> = ({ handleReset, onDismiss }) => {
+export const ConfirmReset: React.FC<ConfirmResetProps> = ({
+  handleReset,
+  onDismiss,
+  heading = 'Reset all DAO setup?',
+  helperText = 'This will clear all saved settings across every step, including artwork, auction settings, rewards, and allocations. This cannot be undone.',
+  confirmLabel = 'Reset all setup',
+}) => {
   return (
     <Flex direction={'column'} w={'100%'} gap={'x2'}>
       <Flex align="center" justify="space-between" w={'100%'}>
-        <Flex className={confirmResetHeadingStyle}>Reset form?</Flex>
+        <Flex className={confirmResetHeadingStyle}>{heading}</Flex>
         <Button
           variant={'ghost'}
           onClick={onDismiss}
@@ -28,12 +37,10 @@ export const ConfirmReset: React.FC<ConfirmResetProps> = ({ handleReset, onDismi
           <Icon id="cross" />
         </Button>
       </Flex>
-      <Flex className={confirmResetHelperStyle}>
-        This will clear all your DAO settings and start over.
-      </Flex>
+      <Flex className={confirmResetHelperStyle}>{helperText}</Flex>
       <Flex direction={'column'} align={'stretch'} w={'100%'} mt={'x2'}>
         <Button className={confirmResetButton} onClick={handleReset}>
-          Reset
+          {confirmLabel}
         </Button>
         <Button className={dismissResetButton} onClick={onDismiss}>
           Cancel

packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.css.ts

@@ -1,14 +1,9 @@
 import { vars } from '@buildeross/zord'
 import { style } from '@vanilla-extract/css'
 
-export const formNavResetButton = style({
-  marginRight: 8,
-})
-
 export const formNavContinueButton = style({
   borderRadius: 10,
   height: 60,
-  marginLeft: 8,
 })
 
 export const formNavMobileBar = style({

packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx

@@ -10,7 +10,6 @@ import {
   formNavDesktopRow,
   formNavMobileBar,
   formNavMobileBarSpacer,
-  formNavResetButton,
 } from './FormNavButtons.css'
 
 interface FormNavButtonsProps {
@@ -82,7 +81,7 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
       )}
 
       <div className={formNavDesktopRow}>
-        <Flex align={'center'} mt={'x8'}>
+        <Flex align={'center'} mt={'x8'} gap={'x2'}>
           {showReset && (
             <Button
               justify={'center'}
@@ -94,7 +93,6 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
               type="button"
               onClick={() => setIsModalOpen(true)}
               aria-label="Reset form"
-              className={formNavResetButton}
             >
               <Icon id="trash" />
             </Button>
@@ -143,7 +141,7 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
       {isMounted &&
         createPortal(
           <div className={formNavMobileBar}>
-            <Flex align={'center'}>
+            <Flex align={'center'} gap={'x2'}>
               {showReset && (
                 <Button
                   justify={'center'}
@@ -155,7 +153,6 @@ export const FormNavButtons: React.FC<FormNavButtonsProps> = ({
                   type="button"
                   onClick={() => setIsModalOpen(true)}
                   aria-label="Reset form"
-                  className={formNavResetButton}
                 >
                   <Icon id="trash" />
                 </Button>

packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.css.ts

@@ -23,7 +23,6 @@ export const reviewSectionSubHeading = style({
   width: '100%',
   fontSize: 23,
   fontWeight: 700,
-  borderRadius: '16px',
   backgroundColor: vars.color.background2,
   selectors: {
     '&:hover': {

packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsx

@@ -44,6 +44,7 @@ export const ReviewSection: React.FC<{
       <Flex
         align={'center'}
         justify={'center'}
+        borderRadius={'curved'}
         className={reviewSectionSubHeading}
         px={'x6'}
         py={'x4'}

packages/dao-ui/src/components/MinterManagementModal/MinterManagementModal.tsx

@@ -7,7 +7,7 @@ import { ContractButton } from '@buildeross/ui/ContractButton'
 import { SmartInput } from '@buildeross/ui/Fields'
 import { AnimatedModal } from '@buildeross/ui/Modal'
 import { getEnsAddress } from '@buildeross/utils/ens'
-import { Box, Button, Flex, Heading, Icon, Text, theme } from '@buildeross/zord'
+import { Box, Button, Flex, Heading, Text, theme } from '@buildeross/zord'
 import React from 'react'
 import { isAddress, zeroAddress } from 'viem'
 import { useAccount, useConfig, useWriteContract } from 'wagmi'
@@ -107,12 +107,11 @@ const MinterCard: React.FC<MinterCardProps> = ({
               variant="ghost"
               style={{
                 minWidth: 'auto',
-                padding: '4px 8px',
                 fontSize: '12px',
+                padding: '1px 6px',
               }}
-            >
-              <Icon id="cross-16" style={{ width: 16, height: 16 }} />
-            </Button>
+              icon="cross"
+            />
           )}
           <Flex align="center" gap="x2">
             <input
@@ -440,7 +439,7 @@ export const MinterManagementModal: React.FC<MinterManagementModalProps> = ({
               onClick={handleAddCustomMinter}
               disabled={!customMinterInput || isSettingUpMinter || isCheckingCustomMinter}
               variant="secondary"
-              style={{ minWidth: '80px', marginBottom: '32px' }}
+              style={{ minWidth: '80px', marginBottom: '32px', height: '60px' }}
             >
               {isCheckingCustomMinter ? 'Adding...' : 'Add'}
             </Button>

packages/feed-ui/src/AuctionBidPlacedItem.tsx

@@ -35,7 +35,7 @@ export const AuctionBidPlacedItem: React.FC<AuctionBidPlacedItemProps> = ({ item
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>

packages/feed-ui/src/AuctionCreatedItem.tsx

@@ -23,7 +23,7 @@ export const AuctionCreatedItem: React.FC<AuctionCreatedItemProps> = ({ item })
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>

packages/feed-ui/src/AuctionSettledItem.tsx

@@ -30,7 +30,7 @@ export const AuctionSettledItem: React.FC<AuctionSettledItemProps> = ({ item })
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>

packages/feed-ui/src/ClankerTokenCreatedItem.tsx

@@ -25,7 +25,7 @@ export const ClankerTokenCreatedItem: React.FC<ClankerTokenCreatedItemProps> = (
           <FallbackImage
             src={item.tokenImage}
             alt={item.tokenName}
-            loadingPlaceholder={<ImageSkeleton />}
+            loadingPlaceholder={<ImageSkeleton fullWidth />}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         </Box>