[2/2] Cleanup Create/Settings NFT tech debt (#4066)

src/components/Create/Create.tsx

@@ -12,8 +12,8 @@ import { NetworkName } from 'models/networkName'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import {
-  AddNftCollectionForm,
   FundingCyclesPage,
+  NftRewardsPage,
   ProjectDetailsPage,
   ProjectTokenPage,
   ReconfigurationRulesPage,
@@ -124,7 +124,7 @@ export function Create() {
               <Trans>Reward your supporters with custom NFTs.</Trans>
             }
           >
-            <AddNftCollectionForm />
+            <NftRewardsPage />
           </Wizard.Page>
           <Wizard.Page
             name="reconfigurationRules"

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

@@ -0,0 +1,27 @@
+import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm'
+import { CREATE_FLOW } from 'constants/fathomEvents'
+import { trackFathomGoal } from 'lib/fathom'
+import { useContext } from 'react'
+import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
+import { Wizard } from '../../Wizard'
+import { PageContext } from '../../Wizard/contexts/PageContext'
+import { useCreateFlowNftRewardsForm } from './hooks'
+
+export function NftRewardsPage() {
+  const { goToNextPage } = useContext(PageContext)
+
+  const { form, initialValues } = useCreateFlowNftRewardsForm()
+  useSetCreateFurthestPageReached('nftRewards')
+
+  return (
+    <AddNftCollectionForm
+      form={form}
+      initialValues={initialValues}
+      okButton={<Wizard.Page.ButtonControl />}
+      onFinish={() => {
+        goToNextPage?.()
+        trackFathomGoal(CREATE_FLOW.NFT_NEXT_CTA)
+      }}
+    />
+  )
+}

src/components/Create/components/pages/NftRewards/hooks/index.ts

@@ -1 +1 @@
-export * from './useNftRewardsForm'
+export * from './useCreateFlowNftRewardsForm'

src/components/Create/components/pages/NftRewards/hooks/useNftRewardsForm.ts → src/components/Create/components/pages/NftRewards/hooks/useCreateFlowNftRewardsForm.ts

@@ -1,4 +1,5 @@
 import { Form } from 'antd'
+import { NftRewardsFormProps } from 'components/NftRewards/AddNftCollectionForm'
 import { JB721GovernanceType, NftRewardTier } from 'models/nftRewards'
 import { useEffect, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
@@ -11,20 +12,7 @@ import {
 } from 'utils/nftRewards'
 import { useFormDispatchWatch } from '../../hooks'
 
-type NftRewardsFormProps = Partial<{
-  rewards: NftRewardTier[]
-  collectionName?: string
-  collectionSymbol?: string
-  collectionDescription?: string
-  postPayMessage?: string
-  postPayButtonText?: string
-  postPayButtonLink?: string
-  onChainGovernance: JB721GovernanceType
-  useDataSourceForRedeem: boolean
-  preventOverspending: boolean
-}>
-
-export const useNftRewardsForm = () => {
+export const useCreateFlowNftRewardsForm = () => {
   const [form] = Form.useForm<NftRewardsFormProps>()
   const {
     collectionMetadata,

src/components/Create/components/pages/NftRewards/index.ts

@@ -1 +1 @@
-export * from './AddNftCollectionForm'
+export * from './NftRewardsPage'

src/components/Create/components/pages/ReviewDeploy/components/RewardsReview/RewardsReview.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro'
-import { RewardsList } from 'components/Create/components/RewardsList'
+import { RewardsList } from 'components/NftRewards/RewardsList'
 import { JB721GovernanceType, NftRewardTier } from 'models/nftRewards'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'

src/components/Create/components/pages/NftRewards/AddNftCollectionForm.tsx → src/components/NftRewards/AddNftCollectionForm/AddNftCollectionForm.tsx

@@ -1,37 +1,46 @@
 import { RightOutlined } from '@ant-design/icons'
 import { Trans, t } from '@lingui/macro'
-import { Form, Radio } from 'antd'
+import { Form, FormInstance, Radio } from 'antd'
 import { useLockPageRulesWrapper } from 'components/Create/hooks/useLockPageRulesWrapper'
 import ExternalLink from 'components/ExternalLink'
 import TooltipLabel from 'components/TooltipLabel'
 import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { RadioItem } from 'components/inputs/RadioItem'
-import { CREATE_FLOW } from 'constants/fathomEvents'
-import { trackFathomGoal } from 'lib/fathom'
-import { JB721GovernanceType } from 'models/nftRewards'
-import { useContext } from 'react'
-import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
+import { JB721GovernanceType, NftRewardTier } from 'models/nftRewards'
 import { inputMustExistRule } from 'utils/antdRules'
 import { helpPagePath } from 'utils/routes'
-import { CreateBadge } from '../../CreateBadge'
-import { CreateCollapse } from '../../CreateCollapse'
-import { OptionalHeader } from '../../OptionalHeader'
-import { RewardsList } from '../../RewardsList'
-import { Wizard } from '../../Wizard'
-import { PageContext } from '../../Wizard/contexts/PageContext'
+import { CreateBadge } from '../../Create/components/CreateBadge'
+import { CreateCollapse } from '../../Create/components/CreateCollapse'
+import { OptionalHeader } from '../../Create/components/OptionalHeader'
+import { RewardsList } from '../RewardsList'
 import { NftAdvancedFormItems } from './NftAdvancedFormItems'
 import { NftPaymentSuccessFormItems } from './NftPaymentSuccessFormItems'
-import { useNftRewardsForm } from './hooks'
+
+export type NftRewardsFormProps = Partial<{
+  rewards: NftRewardTier[]
+  collectionName?: string
+  collectionSymbol?: string
+  collectionDescription?: string
+  postPayMessage?: string
+  postPayButtonText?: string
+  postPayButtonLink?: string
+  onChainGovernance: JB721GovernanceType
+  useDataSourceForRedeem: boolean
+  preventOverspending: boolean
+}>
 
 export const AddNftCollectionForm = ({
+  form,
+  initialValues,
   okButton,
+  onFinish,
 }: {
-  okButton?: React.ReactNode
+  form: FormInstance<NftRewardsFormProps>
+  initialValues?: NftRewardsFormProps
+  okButton: React.ReactNode
+  onFinish?: VoidFunction
 }) => {
-  useSetCreateFurthestPageReached('nftRewards')
-  const { form, initialValues } = useNftRewardsForm()
   const lockPageRulesWrapper = useLockPageRulesWrapper()
-  const { goToNextPage } = useContext(PageContext)
 
   const hasNfts = !!Form.useWatch('rewards', form)?.length
 
@@ -43,10 +52,7 @@ export const AddNftCollectionForm = ({
         name="fundingCycles"
         colon={false}
         layout="vertical"
-        onFinish={() => {
-          goToNextPage?.()
-          trackFathomGoal(CREATE_FLOW.NFT_NEXT_CTA)
-        }}
+        onFinish={onFinish}
         scrollToFirstError
       >
         <div className="flex flex-col gap-6">
@@ -171,7 +177,7 @@ export const AddNftCollectionForm = ({
             </div>
           )}
         </div>
-        {okButton ?? <Wizard.Page.ButtonControl />}
+        {okButton}
       </Form>
 
       <div className="mt-8 text-center">

src/components/NftRewards/AddNftCollectionForm/index.ts

@@ -0,0 +1 @@
+export * from './AddNftCollectionForm'

src/components/Create/components/RewardsList/AddEditRewardModal.tsx → src/components/NftRewards/RewardsList/AddEditRewardModal.tsx

@@ -26,8 +26,8 @@ import {
 } from 'utils/antdRules'
 import { withHttps } from 'utils/externalLink'
 import { ipfsGatewayUrl } from 'utils/ipfs'
-import { CreateCollapse } from '../CreateCollapse'
-import { OptionalHeader } from '../OptionalHeader'
+import { CreateCollapse } from '../../Create/components/CreateCollapse'
+import { OptionalHeader } from '../../Create/components/OptionalHeader'
 
 interface AddEditRewardModalFormProps {
   fileUrl: string

src/components/inputs/UploadNoStyle.tsx

@@ -2,9 +2,9 @@ import { CloseCircleFilled, UploadOutlined } from '@ant-design/icons'
 import { Trans, t } from '@lingui/macro'
 import { Progress, Upload, UploadProps } from 'antd'
 import { RcFile } from 'antd/lib/upload'
-import { RewardImage } from 'components/Create/components/RewardImage'
 import { JuiceVideoPreview } from 'components/JuiceVideo/JuiceVideoPreview'
 import Loading from 'components/Loading'
+import { RewardImage } from 'components/NftRewards/RewardImage'
 import { CreateButton } from 'components/buttons/CreateButton'
 import { useContentType } from 'hooks/useContentType'
 import { FormItemInput } from 'models/formItemInput'

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useUpdateCurrentCollection.ts

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro'
-import { NEW_NFT_ID_LOWER_LIMIT } from 'components/Create/components/RewardsList/AddEditRewardModal'
+import { NEW_NFT_ID_LOWER_LIMIT } from 'components/NftRewards/RewardsList/AddEditRewardModal'
 import { JB721DelegateContractsContext } from 'contexts/NftRewards/JB721DelegateContracts/JB721DelegateContractsContext'
 import { useAdjustTiersTx } from 'hooks/JB721Delegate/transactor/useAdjustTiersTx'
 import { NftRewardTier } from 'models/nftRewards'

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftCollection/LaunchNftsCollection.tsx

@@ -1,10 +1,52 @@
-import { AddNftCollectionForm } from 'components/Create/components'
-import { UploadAndLaunchNftsButton } from './UploadAndLaunchNftsButton'
+import { Trans } from '@lingui/macro'
+import { Button } from 'antd'
+import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm'
+import TransactionModal from 'components/modals/TransactionModal'
+import { TransactionSuccessModal } from '../../../TransactionSuccessModal'
+import { useLaunchNftsForm } from './hooks/useLaunchNftsForm'
 
 export function LaunchNftsPage() {
+  const {
+    form,
+    launchCollection,
+    launchButtonLoading,
+    launchTxPending,
+    successModalOpen,
+    setSuccessModalOpen,
+  } = useLaunchNftsForm()
   return (
-    <AddNftCollectionForm
-      okButton={<UploadAndLaunchNftsButton className="mt-10" />}
-    />
+    <>
+      <AddNftCollectionForm
+        form={form}
+        okButton={
+          <Button
+            type="primary"
+            onClick={launchCollection}
+            loading={launchButtonLoading}
+            className="mt-10"
+          >
+            <Trans>Deploy NFT collection</Trans>
+          </Button>
+        }
+      />
+      <TransactionModal transactionPending open={launchTxPending} />
+      <TransactionSuccessModal
+        open={successModalOpen}
+        onClose={() => setSuccessModalOpen(false)}
+        content={
+          <>
+            <div className="w-80 pt-1 text-2xl font-medium">
+              <Trans>Your new NFTs have been deployed</Trans>
+            </div>
+            <div className="text-secondary pb-6">
+              <Trans>
+                New NFTs will be available in your next cycle as long as it
+                starts after your edit deadline.
+              </Trans>
+            </div>
+          </>
+        }
+      />
+    </>
   )
 }