[PREVIEW] Complete launch NFT collection form

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>
             }
           >
-            <NftRewardsPage />
+            <AddNftCollectionForm />
           </Wizard.Page>
           <Wizard.Page
             name="reconfigurationRules"

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

@@ -31,7 +31,7 @@ import { Wizard } from '../../Wizard'
 import { PageContext } from '../../Wizard/contexts/PageContext'
 import { useNftRewardsForm } from './hooks'
 
-export const NftRewardsPage = ({
+export const AddNftCollectionForm = ({
   okButton,
 }: {
   okButton?: React.ReactNode

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

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

src/components/v2v3/V2V3Project/V2V3ProjectSettings/ProjectSettingsContent.tsx

@@ -15,7 +15,7 @@ import { ArchiveProjectSettingsPage } from './pages/ArchiveProjectSettingsPage'
 import { EditNftsPage } from './pages/EditNftsPage'
 import { GovernanceSettingsPage } from './pages/GovernanceSettingsPage'
 import { EditCyclePage } from './pages/NewEditCyclePage/EditCyclePage'
-import { NewEditNftsPage } from './pages/NewEditNftsPage/NewEditNftsPage'
+import { EditNftsPage as NewEditNftsPage } from './pages/NewEditNftsPage/EditNftsPage'
 import { PayoutsSettingsPage } from './pages/PayoutsSettingsPage'
 import { ProjectDetailsSettingsPage } from './pages/ProjectDetailsSettingsPage/ProjectDetailsSettingsPage'
 import { ProjectHandleSettingsPage } from './pages/ProjectHandleSettingsPage'

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/ReviewConfirmModal/ReviewConfirmModal.tsx

@@ -57,7 +57,7 @@ export function ReviewConfirmModal({
         open={open}
         title={<Trans>Review & confirm</Trans>}
         destroyOnClose
-        onOk={reconfigureFundingCycle}
+        onOk={() => reconfigureFundingCycle()}
         okText={<Trans>Deploy changes</Trans>}
         okButtonProps={{ disabled: !formHasChanges }}
         cancelButtonProps={{ hidden: true }}

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/NewEditNftsPage.tsx → src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EditNftsPage.tsx

@@ -1,9 +1,9 @@
 import Loading from 'components/Loading'
 import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards'
 import { EditNftsTabs } from '../EditNftsPage/EditNftsTabs'
-import { LaunchNftCollection } from './LaunchNftCollection'
+import { LaunchNftsPage } from './LaunchNftsPage'
 
-export function NewEditNftsPage() {
+export function EditNftsPage() {
   const { value: hasExistingNfts, loading: hasNftsLoading } = useHasNftRewards()
 
   if (hasNftsLoading) {
@@ -12,6 +12,6 @@ export function NewEditNftsPage() {
   if (hasExistingNfts) {
     return <EditNftsTabs />
   } else {
-    return <LaunchNftCollection />
+    return <LaunchNftsPage />
   }
 }

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EnableNftsModal.tsx

@@ -43,7 +43,7 @@ export function EnableNftsModal({
       confirmLoading={loading}
     >
       <Trans>
-        To add NFTs to your next cycle. You'll need to{' '}
+        To add NFTs to your next cycle, you'll need to{' '}
         <strong>grant NFT permissions</strong>.
       </Trans>{' '}
       <TooltipIcon

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftsPage.tsx

@@ -0,0 +1,10 @@
+import { AddNftCollectionForm } from 'components/Create/components'
+import { UploadAndLaunchNftsButton } from './UploadAndLaunchNftsButton'
+
+export function LaunchNftsPage() {
+  return (
+    <AddNftCollectionForm
+      okButton={<UploadAndLaunchNftsButton className="mt-10" />}
+    />
+  )
+}

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UploadAndLaunchNftsButton.tsx

@@ -0,0 +1,95 @@
+import { Trans } from '@lingui/macro'
+import { Button } from 'antd'
+import { useState } from 'react'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
+import { pinNftCollectionMetadata, pinNftRewards } from 'utils/nftRewards'
+import {
+  EditingFundingCycleConfig,
+  useEditingFundingCycleConfig,
+} from '../ReconfigureFundingCycleSettingsPage/hooks/useEditingFundingCycleConfig'
+import { useReconfigureFundingCycle } from '../ReconfigureFundingCycleSettingsPage/hooks/useReconfigureFundingCycle'
+
+export function UploadAndLaunchNftsButton({
+  className,
+}: {
+  className?: string
+}) {
+  const [ipfsUploading, setIpfsUploading] = useState<boolean>(false)
+
+  const {
+    projectMetadata: { logoUri },
+  } = useAppSelector(state => state.editingV2Project)
+
+  const editingFundingCycleConfig = useEditingFundingCycleConfig()
+  const { reconfigureLoading, reconfigureFundingCycle } =
+    useReconfigureFundingCycle({
+      editingFundingCycleConfig,
+      memo: 'First NFT collection',
+      launchedNewNfts: true,
+    })
+
+  const {
+    editingPayoutGroupedSplits,
+    editingReservedTokensGroupedSplits,
+    editingFundingCycleMetadata,
+    editingFundingCycleData,
+    editingFundAccessConstraints,
+    editingNftRewards,
+    editingMustStartAtOrAfter,
+  } = editingFundingCycleConfig
+
+  const uploadNftsToIpfs = async () => {
+    setIpfsUploading(true)
+    const newRewardTiers =
+      editingFundingCycleConfig.editingNftRewards?.rewardTiers
+    const collectionName =
+      editingFundingCycleConfig.editingNftRewards?.collectionMetadata.name ?? ''
+    const collectionDescription =
+      editingFundingCycleConfig.editingNftRewards?.collectionMetadata
+        .description ?? ''
+    const collectionLogoUri = logoUri ?? ''
+    const collectionInfoUri =
+      editingFundingCycleConfig.editingNftRewards?.collectionMetadata.uri ?? ''
+
+    const [rewardTiersCIDs, nftCollectionMetadataUri] = await Promise.all([
+      newRewardTiers ? pinNftRewards(newRewardTiers) : [],
+      pinNftCollectionMetadata({
+        collectionName,
+        collectionDescription,
+        collectionLogoUri,
+        collectionInfoUri,
+      }),
+    ])
+    const latestEditingData: EditingFundingCycleConfig = {
+      editingPayoutGroupedSplits,
+      editingReservedTokensGroupedSplits,
+      editingFundingCycleMetadata,
+      editingFundingCycleData,
+      editingFundAccessConstraints,
+      editingNftRewards: editingNftRewards
+        ? {
+            ...editingNftRewards,
+            collectionMetadata: {
+              ...editingNftRewards.collectionMetadata,
+              uri: nftCollectionMetadataUri,
+            },
+            CIDs: rewardTiersCIDs,
+          }
+        : undefined,
+      editingMustStartAtOrAfter,
+    }
+    reconfigureFundingCycle(latestEditingData)
+    setIpfsUploading(false)
+  }
+
+  return (
+    <Button
+      type="primary"
+      onClick={uploadNftsToIpfs}
+      loading={ipfsUploading || reconfigureLoading}
+      className={className}
+    >
+      <Trans>Deploy NFT collection</Trans>
+    </Button>
+  )
+}