From 412fb5da083ce0473d72b3118674efd134ec620f Mon Sep 17 00:00:00 2001 From: kien-ngo Date: Sat, 2 Nov 2024 01:54:49 +0000 Subject: [PATCH] [Dashboard] Remove Drawer from ERC1155 udpate-metadata form (#5269) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR primarily focuses on updating the user interface components related to NFT actions, enhancing text alignment, and improving metadata update functionality by replacing a `Drawer` with a `Sheet` for better user experience. ### Detailed summary - Corrected typo from `Aidrop` to `Airdrop` in `airdrop-tab.tsx` and `airdrop-button.tsx`. - Added `className="text-left"` to `SheetTitle` in several components for consistent text alignment. - Replaced `Drawer` with `Sheet` in `update-metadata-tab.tsx` to improve UI. - Modified state management for opening/closing the metadata update sheet. - Enhanced error handling and user feedback with `toast` notifications in `update-metadata-form.tsx`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../nfts/[tokenId]/components/airdrop-tab.tsx | 2 +- .../components/update-metadata-form.tsx | 444 +++++++++--------- .../components/update-metadata-tab.tsx | 46 +- .../nfts/components/claim-button.tsx | 4 +- .../tokens/components/airdrop-button.tsx | 2 +- .../tokens/components/burn-button.tsx | 2 +- .../tokens/components/claim-button.tsx | 2 +- .../tokens/components/mint-button.tsx | 4 +- .../tokens/components/transfer-button.tsx | 2 +- 9 files changed, 246 insertions(+), 262 deletions(-) diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx index 52ed99a4c1e..d9a86ef36b9 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx +++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx @@ -129,7 +129,7 @@ const AirdropTab: React.FC = ({ contract, tokenId }) => { - Aidrop NFTs + Airdrop NFTs >; /** * If useUpdateMetadata (NFT Drop, Edition Drop) -> use `updateMetadata` * else (NFT Collection, Edition) -> use `setTokenURI` @@ -62,6 +58,7 @@ export const UpdateNftMetadata: React.FC = ({ contract, nft, useUpdateMetadata, + setOpen, }) => { const trackEvent = useTrack(); const address = useActiveAccount()?.address; @@ -101,14 +98,6 @@ export const UpdateNftMetadata: React.FC = ({ values: transformedQueryData, }); - const modalContext = useModalContext(); - - const { onSuccess, onError } = useTxNotifications( - "NFT Metadata updated successfully", - "Metadata update failed", - contract, - ); - const setFile = (file: File) => { if (file.type.includes("image")) { // image files @@ -173,237 +162,234 @@ export const UpdateNftMetadata: React.FC = ({ const showCoverImageUpload = watch("animation_url") instanceof File || watch("external_url") instanceof File; - const { mutate, isPending } = useSendAndConfirmTransaction(); + const sendAndConfirmTx = useSendAndConfirmTransaction(); return ( - <> - - Update NFT Metadata - - -
{ - if (!address) { - onError("Please connect your wallet to update metadata."); - return; - } - trackEvent({ - category: "nft", - action: "update-metadata", - label: "attempt", - }); + { + if (!address) { + toast.error("Please connect your wallet to update metadata."); + return; + } + trackEvent({ + category: "nft", + action: "update-metadata", + label: "attempt", + }); - const newMetadata = parseAttributes({ - ...data, - image: data.image || data.customImage || nft.metadata.image, - animation_url: - data.animation_url || - data.customAnimationUrl || - nft.metadata.animation_url, - }); + try { + const newMetadata = parseAttributes({ + ...data, + image: data.image || data.customImage || nft.metadata.image, + animation_url: + data.animation_url || + data.customAnimationUrl || + nft.metadata.animation_url, + }); - const transaction = useUpdateMetadata - ? // For Drop contracts, we need to call the `updateBatchBaseURI` method - nft.type === "ERC721" - ? updateMetadata721({ - contract, - targetTokenId: BigInt(nft.id), - newMetadata, - }) - : updateMetadata1155({ - contract, - targetTokenId: BigInt(nft.id), - newMetadata, - }) - : // For Collection contracts, we need to call the `setTokenURI` method - nft.type === "ERC721" - ? updateTokenURI721({ - contract, - tokenId: BigInt(nft.id), - newMetadata, - }) - : updateTokenURI1155({ - contract, - tokenId: BigInt(nft.id), - newMetadata, - }); - mutate(transaction, { - onSuccess: () => { - trackEvent({ - category: "nft", - action: "update-metadata", - label: "success", - }); - onSuccess(); - modalContext.onClose(); - }, - // biome-ignore lint/suspicious/noExplicitAny: FIXME - onError: (error: any) => { - trackEvent({ - category: "nft", - action: "update-metadata", - label: "error", - error, + const transaction = useUpdateMetadata + ? // For Drop contracts, we need to call the `updateBatchBaseURI` method + nft.type === "ERC721" + ? updateMetadata721({ + contract, + targetTokenId: BigInt(nft.id), + newMetadata, + }) + : updateMetadata1155({ + contract, + targetTokenId: BigInt(nft.id), + newMetadata, + }) + : // For Collection contracts, we need to call the `setTokenURI` method + nft.type === "ERC721" + ? updateTokenURI721({ + contract, + tokenId: BigInt(nft.id), + newMetadata, + }) + : updateTokenURI1155({ + contract, + tokenId: BigInt(nft.id), + newMetadata, }); - onError(error); - }, - }); - })} - > -
- Metadata - -
- - Name - - {errors?.name?.message} - - - Media - {nft?.metadata && !mediaFileUrl && ( -
- -
+ const promise = sendAndConfirmTx.mutateAsync(transaction, { + onSuccess: () => { + trackEvent({ + category: "nft", + action: "update-metadata", + label: "success", + }); + setOpen(false); + }, + // biome-ignore lint/suspicious/noExplicitAny: FIXME + onError: (error: any) => { + trackEvent({ + category: "nft", + action: "update-metadata", + label: "error", + error, + }); + }, + }); + + toast.promise(promise, { + loading: "Updating NFT metadata", + error: "Failed to update NFT metadata", + success: "NFT metadata updated successfully", + }); + } catch (err) { + console.error(err); + toast.error("Failed to update NFT metadata"); + } + })} + > +
+ Metadata + +
+ + Name + + {errors?.name?.message} + + + Media +
+ {nft?.metadata && !mediaFileUrl && ( + + )} + +
+ + You can upload image, audio, video, html, text, pdf, and 3d model + files here. + + + {mediaFileError?.message as unknown as string} + + + {showCoverImageUpload && ( + + Cover Image + setValue("image", file)} + className="rounded border border-border transition-all" + /> + + You can optionally upload an image as the cover of your NFT. + + + {errors?.image?.message as unknown as string} + + + )} + + Description +