Setup a separate redux state for create (#4513)

Author: wraeth-eth

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])