Setup a separate redux state for create

src/components/NftRewards/AddNftCollectionForm/AddNftCollectionForm.tsx

@@ -4,10 +4,11 @@ import { Form, FormInstance } from 'antd'
 import ExternalLink from 'components/ExternalLink'
 import TooltipLabel from 'components/TooltipLabel'
 import { JuiceInput } from 'components/inputs/JuiceTextInput'
-import { NftRewardTier } from 'models/nftRewards'
+import { NftPostPayModalConfig, NftRewardTier } from 'models/nftRewards'
 import { CreateCollapse } from 'packages/v2v3/components/Create/components/CreateCollapse/CreateCollapse'
 import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
 import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
+import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
 import { inputMustExistRule } from 'utils/antdRules'
 import { RewardsList } from '../RewardsList/RewardsList'
 import { NftAdvancedFormItems } from './NftAdvancedFormItems'
@@ -28,11 +29,15 @@ export type NftRewardsFormProps = Partial<{
 export const AddNftCollectionForm = ({
   form,
   initialValues,
+  postPayModalData,
+  nftRewardsData,
   okButton,
   onFinish,
 }: {
   form: FormInstance<NftRewardsFormProps>
   initialValues?: NftRewardsFormProps
+  postPayModalData: NftPostPayModalConfig | undefined
+  nftRewardsData: NftRewardsData
   okButton: React.ReactNode
   onFinish?: VoidFunction
 }) => {
@@ -53,7 +58,7 @@ export const AddNftCollectionForm = ({
       >
         <div className="flex flex-col gap-6">
           <Form.Item noStyle name="rewards">
-            <RewardsList allowCreate />
+            <RewardsList allowCreate nftRewardsData={nftRewardsData} />
           </Form.Item>
 
           {hasNfts && (
@@ -122,7 +127,9 @@ export const AddNftCollectionForm = ({
                   header={<OptionalHeader header={t`Payment Success Pop-up`} />}
                   hideDivider
                 >
-                  <NftPaymentSuccessFormItems />
+                  <NftPaymentSuccessFormItems
+                    postPayModalData={postPayModalData}
+                  />
                 </CreateCollapse.Panel>
 
                 <CreateCollapse.Panel

src/components/NftRewards/AddNftCollectionForm/NftPaymentSuccessFormItems.tsx

@@ -4,21 +4,19 @@ import { Form } from 'antd'
 import { NftPostPayModal } from 'components/NftRewards/NftPostPayModal'
 import TooltipLabel from 'components/TooltipLabel'
 import { CreateButton } from 'components/buttons/CreateButton/CreateButton'
-
 import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
 import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { useModal } from 'hooks/useModal'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { NftPostPayModalConfig } from 'models/nftRewards'
 
 export function NftPaymentSuccessFormItems({
   hidePreview,
+  postPayModalData,
 }: {
   hidePreview?: boolean
+  postPayModalData: NftPostPayModalConfig | undefined
 }) {
   const postPayModal = useModal()
-  const postPayModalData = useAppSelector(
-    state => state.editingV2Project.nftRewards.postPayModal,
-  )
   return (
     <>
       <div className="flex flex-col gap-4 pt-3 pb-2">

src/components/NftRewards/RewardsList/AddEditRewardModal.tsx

@@ -20,7 +20,7 @@ import { DEFAULT_NFT_MAX_SUPPLY } from 'packages/v2v3/constants/nftRewards'
 import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { UploadRequestOption } from 'rc-upload/lib/interface'
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
 import {
   inputIsIntegerRule,
   inputIsValidUrlRule,
@@ -57,13 +57,15 @@ export const NEW_NFT_ID_LOWER_LIMIT = 1000000
 export const AddEditRewardModal = ({
   className,
   editingData,
+  nftRewards,
   open,
   onOk,
   onCancel,
   withEditWarning = false,
 }: {
   className?: string
   editingData?: NftRewardTier | undefined
+  nftRewards: NftRewardsData
   open?: boolean
   onOk: (reward: NftRewardTier) => void
   onCancel: VoidFunction
@@ -74,7 +76,6 @@ export const AddEditRewardModal = ({
   const [isReservingNfts, setIsReservingNfts] = useState<boolean>(false)
   const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState<boolean>(false)
 
-  const { nftRewards } = useAppSelector(state => state.editingV2Project)
   const nftCurrency = nftRewards?.pricing.currency
 
   useLayoutEffect(() => {

src/components/NftRewards/RewardsList/RewardItem.tsx

@@ -8,7 +8,7 @@ import round from 'lodash/round'
 import { NftRewardTier } from 'models/nftRewards'
 import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { ReactNode } from 'react'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
 import { isZeroAddress } from 'utils/address'
 import { hasLimitedSupply } from 'utils/nftRewards'
 import { prettyUrl } from 'utils/url'
@@ -28,10 +28,12 @@ function numberUpToPrecisionFormat(
 
 export const RewardItem = ({
   reward,
+  nftRewards,
   onEditClicked,
   onDeleteClicked,
 }: {
   reward: NftRewardTier
+  nftRewards: NftRewardsData
   onEditClicked?: () => void
   onDeleteClicked?: () => void
 }) => {
@@ -47,7 +49,6 @@ export const RewardItem = ({
     fileUrl,
   } = reward
 
-  const { nftRewards } = useAppSelector(state => state.editingV2Project)
   const nftCurrency = nftRewards?.pricing.currency
 
   const hasBeneficiary = Boolean(beneficiary) && !isZeroAddress(beneficiary)

src/components/NftRewards/RewardsList/RewardsList.tsx

@@ -7,6 +7,7 @@ import { FormItemInput } from 'models/formItemInput'
 import { NftRewardTier } from 'models/nftRewards'
 import { MAX_NFT_REWARD_TIERS } from 'packages/v2v3/constants/nftRewards'
 import { createContext, useCallback, useContext, useState } from 'react'
+import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
 import { sortNftsByContributionFloor } from 'utils/nftRewards'
 import { AddEditRewardModal } from './AddEditRewardModal'
 import { RewardItem } from './RewardItem'
@@ -32,6 +33,7 @@ const useRewardsInstance = () => {
 type RewardsListProps = FormItemInput<NftRewardTier[]> & {
   allowCreate?: boolean
   withEditWarning?: boolean
+  nftRewardsData: NftRewardsData
 }
 
 interface RewardsListChildrenExports {
@@ -45,6 +47,7 @@ export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
   value,
   onChange,
   withEditWarning,
+  nftRewardsData,
 }: RewardsListProps) => {
   const rewardsHook = useRewards({ value, onChange })
   const [selectedReward, setSelectedReward] = useState<NftRewardTier>()
@@ -78,6 +81,7 @@ export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
             {sortNftsByContributionFloor(rewards).map((reward, i) => (
               <div key={reward.id}>
                 <RewardItem
+                  nftRewards={nftRewardsData}
                   reward={reward}
                   onEditClicked={() => {
                     setSelectedReward(reward)
@@ -110,6 +114,7 @@ export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
       <AddEditRewardModal
         open={modal.visible}
         editingData={selectedReward}
+        nftRewards={nftRewardsData}
         onOk={onModalOk}
         onCancel={onModalCancel}
         withEditWarning={withEditWarning}

src/components/formItems/ProjectDiscountRate.tsx

@@ -3,7 +3,7 @@ import { Form, Switch } from 'antd'
 import FormItemLabel from 'components/FormItemLabel'
 import FormItemWarningText from 'components/FormItemWarningText'
 import { DISCOUNT_RATE_EXPLANATION } from 'components/strings'
-import { DEFAULT_FUNDING_CYCLE_DATA } from 'redux/slices/editingV2Project'
+import { DEFAULT_FUNDING_CYCLE_DATA } from 'redux/slices/shared/v2ProjectDefaultState'
 import NumberSlider from '../inputs/NumberSlider'
 import { FormItemExt } from './formItemExt'
 

src/components/formItems/ProjectReserved.tsx

@@ -15,7 +15,7 @@ import { useState } from 'react'
 import {
   DEFAULT_FUNDING_CYCLE_METADATA,
   DEFAULT_MINT_RATE,
-} from 'redux/slices/editingV2Project'
+} from 'redux/slices/shared/v2ProjectDefaultState'
 import { formattedNum } from 'utils/format/formatNumber'
 import NumberSlider from '../inputs/NumberSlider'
 import FundingCycleDetailWarning from '../Project/FundingCycleDetailWarning'

src/packages/v1/components/V1Project/modals/ReconfigureFCModal/ReconfigureFCModal.tsx

@@ -41,7 +41,7 @@ import { amountSubFee } from 'packages/v1/utils/math'
 import { serializeV1FundingCycle } from 'packages/v1/utils/serializers'
 import { useCallback, useContext, useLayoutEffect, useState } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
-import { useEditingV1FundingCycleSelector } from 'redux/hooks/useAppSelector'
+import { useEditingV1FundingCycleSelector } from 'redux/hooks/v1'
 import { editingProjectActions } from 'redux/slices/editingProject'
 import { classNames } from 'utils/classNames'
 import { drawerWidth } from 'utils/drawerWidth'

src/packages/v1/components/shared/forms/BudgetForm.tsx

@@ -16,7 +16,7 @@ import {
 } from 'packages/v1/utils/payouts'
 import { useContext, useLayoutEffect, useMemo, useState } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
-import { useEditingV1FundingCycleSelector } from 'redux/hooks/useAppSelector'
+import { useEditingV1FundingCycleSelector } from 'redux/hooks/v1'
 import { editingProjectActions } from 'redux/slices/editingProject'
 import { fromWad } from 'utils/format/formatNumber'
 import { helpPagePath } from 'utils/helpPagePath'

src/packages/v2v3/components/Create/components/Wizard/hooks/usePage.ts

@@ -1,7 +1,7 @@
 import { CreatePage } from 'models/createPage'
 import { useCallback, useContext, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
-import { editingV2ProjectActions } from 'redux/slices/editingV2Project'
+import { creatingV2ProjectActions } from 'redux/slices/creatingV2Project'
 import { WizardContext } from '../contexts/WizardContext'
 
 export const usePage = ({ name }: { name: string }) => {
@@ -41,14 +41,14 @@ export const usePage = ({ name }: { name: string }) => {
 
   const lockPageProgress = useCallback(() => {
     dispatch(
-      editingV2ProjectActions.addCreateSoftLockedPage(name as CreatePage),
+      creatingV2ProjectActions.addCreateSoftLockedPage(name as CreatePage),
     )
   }, [dispatch, name])
 
   const unlockPageProgress = useCallback(() => {
     // We need to make sure pages can't unsoftlock other pages :\
     dispatch(
-      editingV2ProjectActions.removeCreateSoftLockedPage(name as CreatePage),
+      creatingV2ProjectActions.removeCreateSoftLockedPage(name as CreatePage),
     )
   }, [dispatch, name])
 

src/packages/v2v3/components/Create/components/Wizard/hooks/useSteps.ts

@@ -21,7 +21,7 @@ export const useSteps = () => {
   const { pages, currentPage, goToPage } = useContext(WizardContext)
   const { furthestPageReached } = useEditingCreateFurthestPageReached()
   const softLockedPageQueue = useAppSelector(
-    state => state.editingV2Project.createSoftLockPageQueue,
+    state => state.creatingV2Project.createSoftLockPageQueue,
   )
 
   const firstIndexOfLockedPage = useMemo(() => {

src/packages/v2v3/components/Create/components/Wizard/hooks/useWizard.ts

@@ -13,7 +13,7 @@ export const useWizard = ({ children }: { children?: any[] }) => {
   const [currentPage, setCurrentPage] = useState<string>('')
   const { furthestPageReached } = useEditingCreateFurthestPageReached()
   const softLockedPageQueue = useAppSelector(
-    state => state.editingV2Project.createSoftLockPageQueue,
+    state => state.creatingV2Project.createSoftLockPageQueue,
   )
 
   const pages: PageProps[] = useMemo(() => {

src/packages/v2v3/components/Create/components/pages/FundingCycles/hooks/useFundingCyclesForm.ts

@@ -6,8 +6,8 @@ import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import {
   DEFAULT_MUST_START_AT_OR_AFTER,
-  editingV2ProjectActions,
-} from 'redux/slices/editingV2Project'
+  creatingV2ProjectActions,
+} from 'redux/slices/creatingV2Project'
 import {
   deriveDurationUnit,
   otherUnitToSeconds,
@@ -23,7 +23,7 @@ export type FundingCyclesFormProps = Partial<{
 export const useFundingCyclesForm = () => {
   const [form] = useForm<FundingCyclesFormProps>()
   const { fundingCycleData, fundingCyclesPageSelection, mustStartAtOrAfter } =
-    useAppSelector(state => state.editingV2Project)
+    useAppSelector(state => state.creatingV2Project)
   useDebugValue(form.getFieldsValue())
 
   const initialValues: FundingCyclesFormProps | undefined = useMemo(() => {
@@ -63,25 +63,25 @@ export const useFundingCyclesForm = () => {
   const launchDate = useWatch('launchDate', form)
 
   useEffect(() => {
-    dispatch(editingV2ProjectActions.setFundingCyclesPageSelection(selection))
+    dispatch(creatingV2ProjectActions.setFundingCyclesPageSelection(selection))
 
     // We need to handle manual case first as duration might be undefined, but
     // manual set.
     if (selection === 'manual') {
-      dispatch(editingV2ProjectActions.setDuration('0'))
+      dispatch(creatingV2ProjectActions.setDuration('0'))
       return
     }
 
     if (!selection || duration?.duration === undefined) {
-      dispatch(editingV2ProjectActions.setDuration(''))
+      dispatch(creatingV2ProjectActions.setDuration(''))
       return
     }
     if (selection === 'automated') {
       const newDuration = otherUnitToSeconds({
         duration: duration.duration,
         unit: duration.unit,
       })
-      dispatch(editingV2ProjectActions.setDuration(newDuration.toString()))
+      dispatch(creatingV2ProjectActions.setDuration(newDuration.toString()))
       return
     }
   }, [selection, duration, dispatch])
@@ -90,14 +90,14 @@ export const useFundingCyclesForm = () => {
     if (launchDate === undefined) return
     if (launchDate === null || !launchDate.unix().toString()) {
       dispatch(
-        editingV2ProjectActions.setMustStartAtOrAfter(
+        creatingV2ProjectActions.setMustStartAtOrAfter(
           DEFAULT_MUST_START_AT_OR_AFTER,
         ),
       )
       return
     }
     dispatch(
-      editingV2ProjectActions.setMustStartAtOrAfter(
+      creatingV2ProjectActions.setMustStartAtOrAfter(
         launchDate?.unix().toString(),
       ),
     )

src/packages/v2v3/components/Create/components/pages/NftRewards/NftRewardsPage.tsx

@@ -2,6 +2,7 @@ import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm
 import { CREATE_FLOW } from 'constants/fathomEvents'
 import { trackFathomGoal } from 'lib/fathom'
 import { useContext } from 'react'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
 import { Wizard } from '../../Wizard/Wizard'
 import { PageContext } from '../../Wizard/contexts/PageContext'
@@ -11,12 +12,22 @@ export function NftRewardsPage() {
   const { goToNextPage } = useContext(PageContext)
 
   const { form, initialValues } = useCreateFlowNftRewardsForm()
+
+  const postPayModalData = useAppSelector(
+    state => state.creatingV2Project.nftRewards.postPayModal,
+  )
+  const nftRewardsData = useAppSelector(
+    state => state.creatingV2Project.nftRewards,
+  )
+
   useSetCreateFurthestPageReached('nftRewards')
 
   return (
     <AddNftCollectionForm
       form={form}
       initialValues={initialValues}
+      postPayModalData={postPayModalData}
+      nftRewardsData={nftRewardsData}
       okButton={<Wizard.Page.ButtonControl />}
       onFinish={() => {
         goToNextPage?.()