[1/2] Improve launch NFT collection tx UI

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

@@ -41,7 +41,12 @@ interface AddEditRewardModalFormProps {
   externalUrl?: string | undefined
 }
 
-const NFT_FILE_UPLOAD_EXTRA = t`Images will be cropped to a 1:1 square in thumbnail previews on the Juicebox app.`
+const NFT_FILE_UPLOAD_EXTRA = (
+  <Trans>
+    Images will be cropped to a 1:1 square in thumbnail previews on the Juicebox
+    app.
+  </Trans>
+)
 const MAX_NFT_FILE_SIZE_MB = 100
 
 // This assumes an existing NFT ID (from the contracts) will never be >= 1000000

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditCyclePage/ReviewConfirmModal/EditCycleSuccessModal.tsx → src/components/v2v3/V2V3Project/V2V3ProjectSettings/TransactionSuccessModal.tsx

@@ -4,15 +4,17 @@ import { Button, Modal } from 'antd'
 import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { V2V3ProjectContext } from 'contexts/v2v3/Project/V2V3ProjectContext'
 import Link from 'next/link'
-import { useContext } from 'react'
+import { ReactNode, useContext } from 'react'
 import { settingsPagePath, v2v3ProjectRoute } from 'utils/routes'
 
-export function EditCycleSuccessModal({
+export function TransactionSuccessModal({
   open,
   onClose,
+  content,
 }: {
   open: boolean
   onClose: VoidFunction
+  content: ReactNode
 }) {
   const { projectId } = useContext(ProjectMetadataContext)
   const { handle } = useContext(V2V3ProjectContext)
@@ -35,15 +37,7 @@ export function EditCycleSuccessModal({
     >
       <div className="flex w-full flex-col items-center gap-4 pt-2 text-center">
         {checkIconWithBackground}
-        <div className="w-80 pt-1 text-2xl font-medium">
-          <Trans>Your updated cycle has been deployed</Trans>
-        </div>
-        <div className="text-secondary pb-6">
-          <Trans>
-            Changes will take effect in your next cycle as long as it starts
-            after your edit deadline.
-          </Trans>
-        </div>
+        {content}
         <div className="flex gap-2.5">
           <Link href={settingsPagePath(undefined, { projectId, handle })}>
             <Button type="ghost" className={buttonClasses}>

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

@@ -5,11 +5,11 @@ import { CreateCollapse } from 'components/Create/components/CreateCollapse'
 import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
 import TransactionModal from 'components/modals/TransactionModal'
 import { useState } from 'react'
+import { TransactionSuccessModal } from '../../../TransactionSuccessModal'
 import { useReconfigureFundingCycle } from '../../ReconfigureFundingCycleSettingsPage/hooks/useReconfigureFundingCycle'
 import { useEditCycleFormContext } from '../EditCycleFormContext'
 import { usePrepareSaveEditCycleData } from '../hooks/usePrepareSaveEditCycleData'
 import { DetailsSectionDiff } from './DetailsSectionDiff'
-import { EditCycleSuccessModal } from './EditCycleSuccessModal'
 import { PayoutsSectionDiff } from './PayoutsSectionDiff'
 import { SectionCollapseHeader } from './SectionCollapseHeader'
 import { TokensSectionDiff } from './TokensSectionDiff'
@@ -123,9 +123,22 @@ export function ReviewConfirmModal({
           />
         </Form.Item>
       </TransactionModal>
-      <EditCycleSuccessModal
+      <TransactionSuccessModal
         open={editCycleSuccessModalOpen}
         onClose={() => setEditCycleSuccessModalOpen(false)}
+        content={
+          <>
+            <div className="w-80 pt-1 text-2xl font-medium">
+              <Trans>Your updated cycle has been deployed</Trans>
+            </div>
+            <div className="text-secondary pb-6">
+              <Trans>
+                Changes will take effect in your next cycle as long as it starts
+                after your edit deadline.
+              </Trans>
+            </div>
+          </>
+        }
       />
     </>
   )

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

@@ -24,9 +24,6 @@ export function EnableNftsModal({
         setLoading(false)
         reloadWindow()
       },
-      onDone() {
-        setLoading(false)
-      },
       onError() {
         setLoading(false)
       },

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

@@ -1,8 +1,10 @@
 import { Trans } from '@lingui/macro'
 import { Button } from 'antd'
+import TransactionModal from 'components/modals/TransactionModal'
 import { useState } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { pinNftCollectionMetadata, pinNftRewards } from 'utils/nftRewards'
+import { TransactionSuccessModal } from '../../../TransactionSuccessModal'
 import {
   EditingFundingCycleConfig,
   useEditingFundingCycleConfig,
@@ -15,19 +17,23 @@ export function UploadAndLaunchNftsButton({
   className?: string
 }) {
   const [ipfsUploading, setIpfsUploading] = useState<boolean>(false)
+  const [successModalOpen, setSuccessModalOpen] = useState<boolean>(false)
 
   const {
     projectMetadata: { logoUri },
   } = useAppSelector(state => state.editingV2Project)
 
   const editingFundingCycleConfig = useEditingFundingCycleConfig()
-  const { reconfigureLoading, reconfigureFundingCycle } =
+  const { reconfigureLoading, reconfigureFundingCycle, txPending } =
     useReconfigureFundingCycle({
       editingFundingCycleConfig,
       memo: 'First NFT collection',
       launchedNewNfts: true,
+      onComplete: () => setSuccessModalOpen(true),
     })
 
+  const buttonLoading = ipfsUploading || reconfigureLoading
+
   const {
     editingPayoutGroupedSplits,
     editingReservedTokensGroupedSplits,
@@ -83,13 +89,33 @@ export function UploadAndLaunchNftsButton({
   }
 
   return (
-    <Button
-      type="primary"
-      onClick={uploadNftsToIpfs}
-      loading={ipfsUploading || reconfigureLoading}
-      className={className}
-    >
-      <Trans>Deploy NFT collection</Trans>
-    </Button>
+    <>
+      <Button
+        type="primary"
+        onClick={uploadNftsToIpfs}
+        loading={buttonLoading}
+        className={className}
+      >
+        <Trans>Deploy NFT collection</Trans>
+      </Button>
+      <TransactionModal transactionPending open={txPending} />
+      <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>
+          </>
+        }
+      />
+    </>
   )
 }

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/ReconfigureFundingCycleSettingsPage/hooks/useReconfigureFundingCycle.ts

@@ -60,6 +60,7 @@ export const useReconfigureFundingCycle = ({
 
   const [reconfigureTxLoading, setReconfigureTxLoading] =
     useState<boolean>(false)
+  const [txPending, setTxPending] = useState<boolean>(false)
 
   const reconfigureV2V3FundingCycleTx = useReconfigureV2V3FundingCycleTx()
   const reconfigureV2V3FundingCycleWithNftsTx =
@@ -120,6 +121,9 @@ export const useReconfigureFundingCycle = ({
       }
 
       const txOpts = {
+        onDone() {
+          setTxPending(true)
+        },
         async onConfirmed() {
           if (projectId) {
             await revalidateProject({
@@ -128,14 +132,20 @@ export const useReconfigureFundingCycle = ({
             })
           }
           setReconfigureTxLoading(false)
+          setTxPending(false)
           if (onComplete) {
             onComplete()
           } else {
             reloadWindow()
           }
         },
+        onCancelled() {
+          setTxPending(false)
+        },
+        onError() {
+          setTxPending(false)
+        },
       }
-
       let txSuccessful: boolean
       if (launchedNewNfts && editingNftRewards?.rewardTiers) {
         txSuccessful = await reconfigureV2V3FundingCycleWithNftsTx(
@@ -154,6 +164,7 @@ export const useReconfigureFundingCycle = ({
 
       if (!txSuccessful) {
         setReconfigureTxLoading(false)
+        setTxPending(false)
       }
     },
     [
@@ -169,5 +180,9 @@ export const useReconfigureFundingCycle = ({
     ],
   )
 
-  return { reconfigureLoading: reconfigureTxLoading, reconfigureFundingCycle }
+  return {
+    reconfigureLoading: reconfigureTxLoading,
+    reconfigureFundingCycle,
+    txPending,
+  }
 }

src/locales/messages.pot

@@ -782,6 +782,9 @@ msgstr ""
 msgid "Receive ERC-20 tokens"
 msgstr ""
 
+msgid "New NFTs will be available in your next cycle as long as it starts after your edit deadline."
+msgstr ""
+
 msgid "Confirm"
 msgstr ""
 
@@ -4424,6 +4427,9 @@ msgstr ""
 msgid "Add recipient"
 msgstr ""
 
+msgid "Your new NFTs have been deployed"
+msgstr ""
+
 msgid "Your balance"
 msgstr ""