Fix edit NFT metadata tx for latest delegate (#4065)

src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/UpdateNftsPage/EditCollectionDetailsSection.tsx

@@ -49,6 +49,8 @@ export function EditCollectionDetailsSection() {
   } = useCollectionDetailsForm()
   const [formHasUpdated, setFormHasUpdated] = useState<boolean>()
   const [txLoading, setTxLoading] = useState<boolean>()
+  const [txSuccessful, setTxSuccessful] = useState<boolean>()
+  const [txFailed, setTxFailed] = useState<boolean>()
 
   const reconfigureNftCollectionMetadata = useReconfigureNftCollectionMetadata()
 
@@ -91,11 +93,24 @@ export function EditCollectionDetailsSection() {
       symbol: marketplaceForm.getFieldValue('collectionSymbol'),
     }
 
-    await reconfigureNftCollectionMetadata({
-      ...newCollectionMetadata,
-    })
+    const txOpts = {
+      onConfirmed() {
+        setTxLoading(false)
+        setTxSuccessful(true)
+      },
+    }
+
+    const txSuccess = await reconfigureNftCollectionMetadata(
+      {
+        ...newCollectionMetadata,
+      },
+      txOpts,
+    )
 
-    setTxLoading(false)
+    if (!txSuccess) {
+      setTxFailed(true)
+      setTxLoading(false)
+    }
   }
 
   if (isLoading) return <Loading />
@@ -120,15 +135,26 @@ export function EditCollectionDetailsSection() {
         onFinish={submitCollectionMetadata}
       >
         <NftCollectionDetailsFormItems isReconfigure />
-
-        <Button
-          loading={txLoading}
-          disabled={!formHasUpdated}
-          onClick={() => marketplaceForm.submit()}
-          type="primary"
-        >
-          Save collection details
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            loading={txLoading}
+            disabled={!formHasUpdated}
+            onClick={() => marketplaceForm.submit()}
+            type="primary"
+            className="grow-0"
+          >
+            <Trans>Save collection details</Trans>
+          </Button>
+          {txSuccessful ? (
+            <span className="text-success-500">
+              <Trans>Saved!</Trans>
+            </span>
+          ) : txFailed ? (
+            <span className="text-error-500">
+              <Trans>Something went wrong!</Trans>
+            </span>
+          ) : null}
+        </div>
       </Form>
     </div>
   )

src/hooks/v2v3/transactor/useReconfigureNftCollectionMetadata.ts

@@ -1,20 +1,33 @@
+import * as constants from '@ethersproject/constants'
 import { t } from '@lingui/macro'
 import { JB721DelegateContractsContext } from 'contexts/NftRewards/JB721DelegateContracts/JB721DelegateContractsContext'
 import { TransactionContext } from 'contexts/Transaction/TransactionContext'
 import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
+import { useDefaultTokenUriResolver } from 'hooks/DefaultTokenUriResolver/contracts/useDefaultTokenUriResolver'
 import { TransactorInstance } from 'hooks/useTransactor'
 import { NftCollectionMetadata } from 'models/nftRewards'
 import { JB721DelegateVersion } from 'models/v2v3/contracts'
 import { useContext } from 'react'
-import { ipfsUri } from 'utils/ipfs'
+import { cidFromUrl, encodeIpfsUri, ipfsUri } from 'utils/ipfs'
 import { pinNftCollectionMetadata } from 'utils/nftRewards'
 import { useV2ProjectTitle } from '../useProjectTitle'
 
 function buildArgs(
   version: JB721DelegateVersion,
-  { contractUri }: { contractUri: string | undefined },
+  {
+    uri,
+    tokenUriResolverAddress,
+  }: {
+    uri: string
+    tokenUriResolverAddress: string
+  },
 ) {
+  const contractUri = ipfsUri(uri)
+  const cid = cidFromUrl(uri) as string
   switch (version) {
+    case JB721DelegateVersion.JB721DELEGATE_V3_3:
+    case JB721DelegateVersion.JB721DELEGATE_V3_4:
+      return ['', contractUri, tokenUriResolverAddress, '0', encodeIpfsUri(cid)]
     case JB721DelegateVersion.JB721DELEGATE_V3_2:
       return [undefined, contractUri, undefined, undefined, undefined]
     default: // v3, v3.1
@@ -31,6 +44,8 @@ export function useReconfigureNftCollectionMetadata(): TransactorInstance<NftCol
     version,
   } = useContext(JB721DelegateContractsContext)
 
+  const defaultTokenUriResolver = useDefaultTokenUriResolver()
+
   const projectTitle = useV2ProjectTitle()
 
   return async ({ name, description }, txOpts) => {
@@ -52,7 +67,11 @@ export function useReconfigureNftCollectionMetadata(): TransactorInstance<NftCol
         version === JB721DelegateVersion.JB721DELEGATE_V3_1
         ? 'setContractUri'
         : 'setMetadata',
-      buildArgs(version, { contractUri: ipfsUri(uri) }),
+      buildArgs(version, {
+        uri,
+        tokenUriResolverAddress:
+          defaultTokenUriResolver?.address || constants.AddressZero,
+      }),
       {
         ...txOpts,
         title: t`Update ${projectTitle}'s NFT collection details.`,

src/locales/messages.pot

@@ -971,6 +971,9 @@ msgstr ""
 msgid "Adding an edit deadline is recommended. Projects with no deadline will appear risky to contributors."
 msgstr ""
 
+msgid "Saved!"
+msgstr ""
+
 msgid "<0><1>Peel</1> manages this website — the juicebox.money frontend interface. You can reach out to Peel through the <2>Peel Discord</2>.</0><3><4>JuiceboxDAO</4> builds and governs the Juicebox fundraising protocol and other community resources. You can reach out to JuiceboxDAO through the <5>Juicebox Discord</5>.</3>"
 msgstr ""
 
@@ -1625,6 +1628,9 @@ msgstr ""
 msgid "Switch to unlimited payouts"
 msgstr ""
 
+msgid "Save collection details"
+msgstr ""
+
 msgid "NO LIMIT"
 msgstr ""
 
@@ -4805,6 +4811,9 @@ msgstr ""
 msgid "project"
 msgstr ""
 
+msgid "Something went wrong!"
+msgstr ""
+
 msgid "Configuration"
 msgstr ""