feat: refactor proposal creation flow

apps/web/src/components/LinksProvider.tsx

@@ -1,4 +1,10 @@
-import { AddressType, CHAIN_ID } from '@buildeross/types'
+import {
+  AddressType,
+  CHAIN_ID,
+  DaoTab,
+  ProposalCreateStage,
+  ProposalTab,
+} from '@buildeross/types'
 import { LinksProvider as BaseLinksProvider } from '@buildeross/ui/LinksProvider'
 import { chainIdToSlug } from '@buildeross/utils/chains'
 import React from 'react'
@@ -26,7 +32,7 @@ export const LinksProvider: React.FC<LinksProviderProps> = ({ children }) => {
   )
 
   const getDaoLink = React.useCallback(
-    (chainId: CHAIN_ID, tokenAddress: AddressType, tab?: string) => {
+    (chainId: CHAIN_ID, tokenAddress: AddressType, tab?: DaoTab) => {
       const baseHref = `/dao/${chainIdToSlug(chainId)}/${tokenAddress}`
       return {
         href: tab ? `${baseHref}?tab=${tab}` : baseHref,
@@ -40,7 +46,7 @@ export const LinksProvider: React.FC<LinksProviderProps> = ({ children }) => {
       chainId: CHAIN_ID,
       tokenAddress: AddressType,
       proposalId: string | number | bigint,
-      tab?: string
+      tab?: ProposalTab
     ) => {
       const baseHref = `/dao/${chainIdToSlug(chainId)}/${tokenAddress}/vote/${proposalId}`
       return {
@@ -51,9 +57,10 @@ export const LinksProvider: React.FC<LinksProviderProps> = ({ children }) => {
   )
 
   const getProposalCreateLink = React.useCallback(
-    (chainId: CHAIN_ID, tokenAddress: AddressType) => {
+    (chainId: CHAIN_ID, tokenAddress: AddressType, stage?: ProposalCreateStage) => {
+      const baseHref = `/dao/${chainIdToSlug(chainId)}/${tokenAddress}/proposal/create`
       return {
-        href: `/dao/${chainIdToSlug(chainId)}/${tokenAddress}/proposal/create`,
+        href: stage ? `${baseHref}?stage=${stage}` : baseHref,
       }
     },
     []

apps/web/src/layouts/BaseLayout/BaseLayout.tsx

@@ -30,6 +30,7 @@ export function BaseLayout({
   nav,
   ...props
 }: BaseLayoutProps) {
+  const { style, ...rest } = props
   const chainStore = useMemo(() => createChainStore(chain), [chain])
   const daoStore = useMemo(() => createDaoStore(addresses), [addresses])
   const { openConnectModal } = useConnectModal()
@@ -38,9 +39,11 @@ export function BaseLayout({
     <ConnectModalProvider value={{ openConnectModal }}>
       <ChainStoreProvider store={chainStore}>
         <DaoStoreProvider store={daoStore}>
-          <Box>
+          <Box style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
             {nav || <DefaultLayoutNav />}
-            <Box {...props}>{children}</Box>
+            <Box style={{ ...style, flex: 1 }} {...rest}>
+              {children}
+            </Box>
             {footer}
           </Box>
         </DaoStoreProvider>

apps/web/src/layouts/DaoLayout/DaoLayout.tsx

@@ -9,14 +9,25 @@ type DaoPageProps = {
   chainId?: number
 }
 
-export function getDaoLayout(page: ReactElement<DaoPageProps>) {
+type DaoLayoutOptions = {
+  hideFooterOnMobile?: boolean
+}
+
+export function getDaoLayout(
+  page: ReactElement<DaoPageProps>,
+  options?: DaoLayoutOptions
+) {
   const addresses = page.props?.addresses ?? {}
   const chainId = page.props?.chainId ?? 1
   const chain =
     PUBLIC_DEFAULT_CHAINS.find((c) => c.id === chainId) ?? PUBLIC_DEFAULT_CHAINS[0]
 
   return (
-    <DefaultLayout chain={chain} addresses={addresses}>
+    <DefaultLayout
+      chain={chain}
+      addresses={addresses}
+      hideFooterOnMobile={options?.hideFooterOnMobile}
+    >
       {page}
     </DefaultLayout>
   )

apps/web/src/modules/coin/CreateContentCoinForm/NoCreatorCoinWarning.tsx

@@ -10,7 +10,7 @@ import { useAccount } from 'wagmi'
 export const NoCreatorCoinWarning: React.FC = () => {
   const router = useRouter()
   const { address: userAddress } = useAccount()
-  const { createProposal, setTransactionType } = useProposalStore()
+  const { startProposalDraft } = useProposalStore()
 
   // Get addresses and chain from stores
   const addresses = useDaoStore((x) => x.addresses)
@@ -36,17 +36,17 @@ export const NoCreatorCoinWarning: React.FC = () => {
 
   // Handle creating a Creator Coin proposal
   const handleCreateCreatorCoinProposal = () => {
-    setTransactionType(TransactionType.CREATOR_COIN)
-    createProposal({
-      title: undefined,
-      summary: undefined,
-      disabled: false,
-      transactions: [],
+    startProposalDraft({
+      transactionType: TransactionType.CREATOR_COIN,
     })
     // Navigate to proposal create page
     router.push({
       pathname: '/dao/[network]/[token]/proposal/create',
-      query: router.query,
+      query: {
+        network: router.query.network,
+        token: router.query.token,
+        stage: 'transactions',
+      },
     })
   }
 

apps/web/src/pages/dao/[network]/[token]/[tokenId].tsx

@@ -15,7 +15,7 @@ import { useGalleryItems } from '@buildeross/hooks/useGalleryItems'
 import { useVotes } from '@buildeross/hooks/useVotes'
 import { OrderDirection, SubgraphSDK, Token_OrderBy } from '@buildeross/sdk/subgraph'
 import { DaoContractAddresses } from '@buildeross/stores'
-import { AddressType, Chain, CHAIN_ID } from '@buildeross/types'
+import { AddressType, Chain, CHAIN_ID, ProposalCreateStage } from '@buildeross/types'
 import { isChainIdSupportedByCoining } from '@buildeross/utils/coining'
 import { isChainIdSupportedByDroposal } from '@buildeross/utils/droposal'
 import { isPossibleMarkdown } from '@buildeross/utils/helpers'
@@ -126,15 +126,19 @@ const TokenPage: NextPageWithLayout<TokenPageProps> = ({
     })
   }, [push, chain.slug, addresses.token])
 
-  const openProposalCreatePage = React.useCallback(async () => {
-    await push({
-      pathname: `/dao/[network]/[token]/proposal/create`,
-      query: {
-        network: chain.slug,
-        token: addresses.token,
-      },
-    })
-  }, [push, chain.slug, addresses.token])
+  const openProposalCreatePage = React.useCallback(
+    async (stage?: ProposalCreateStage) => {
+      await push({
+        pathname: `/dao/[network]/[token]/proposal/create`,
+        query: {
+          network: chain.slug,
+          token: addresses.token,
+          ...(stage ? { stage } : {}),
+        },
+      })
+    },
+    [push, chain.slug, addresses.token]
+  )
 
   const openProposalReviewPage = React.useCallback(async () => {
     await push({

apps/web/src/pages/dao/[network]/[token]/index.tsx

@@ -16,7 +16,7 @@ import {
 import { auctionAbi, getDAOAddresses, tokenAbi } from '@buildeross/sdk/contract'
 import { OrderDirection, SubgraphSDK, Token_OrderBy } from '@buildeross/sdk/subgraph'
 import { DaoContractAddresses, useChainStore, useDaoStore } from '@buildeross/stores'
-import { AddressType, CHAIN_ID } from '@buildeross/types'
+import { AddressType, CHAIN_ID, ProposalCreateStage } from '@buildeross/types'
 import { unpackOptionalArray } from '@buildeross/utils/helpers'
 import { serverConfig } from '@buildeross/utils/wagmi/serverConfig'
 import { atoms, Flex, Text, theme } from '@buildeross/zord'
@@ -135,15 +135,19 @@ const DaoPage: NextPageWithLayout<DaoPageProps> = ({ chainId, collectionAddress
     [push, chain.slug, addresses.token]
   )
 
-  const openProposalCreatePage = React.useCallback(async () => {
-    await push({
-      pathname: `/dao/[network]/[token]/proposal/create`,
-      query: {
-        network: chain.slug,
-        token: addresses.token,
-      },
-    })
-  }, [push, chain.slug, addresses.token])
+  const openProposalCreatePage = React.useCallback(
+    async (stage?: ProposalCreateStage) => {
+      await push({
+        pathname: `/dao/[network]/[token]/proposal/create`,
+        query: {
+          network: chain.slug,
+          token: addresses.token,
+          ...(stage ? { stage } : {}),
+        },
+      })
+    },
+    [push, chain.slug, addresses.token]
+  )
 
   const openProposalReviewPage = React.useCallback(async () => {
     await push({
@@ -205,7 +209,7 @@ const DaoPage: NextPageWithLayout<DaoPageProps> = ({ chainId, collectionAddress
       ...baseSections,
       ...minterSections,
       {
-        title: 'Smart Contracts',
+        title: 'Contracts',
         component: [<SmartContracts key={'smart_contracts'} />],
       },
     ]