77 AccordionIcon ,
88 AccordionItem ,
99 AccordionPanel ,
10- Divider ,
1110 FormControl ,
1211 Input ,
1312 Textarea ,
@@ -32,6 +31,7 @@ import {
3231 updateTokenURI as updateTokenURI1155 ,
3332} from "thirdweb/extensions/erc1155" ;
3433import { useActiveAccount , useSendAndConfirmTransaction } from "thirdweb/react" ;
34+ import type { NFTMetadata } from "thirdweb/utils" ;
3535import {
3636 Button ,
3737 FormErrorMessage ,
@@ -68,20 +68,20 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
6868 const address = useActiveAccount ( ) ?. address ;
6969
7070 const transformedQueryData = useMemo ( ( ) => {
71- return {
72- name : nft ?. metadata . name || "" ,
73- description : nft ?. metadata . description || "" ,
74- external_url : nft ?. metadata . external_url || "" ,
75- background_color : nft ?. metadata . background_color || "" ,
76- attributes : nft ?. metadata . attributes || [ ] ,
77- // We override these in the submit if they haven't been changed
78- image : nft ?. metadata . image || undefined ,
79- animation_url : nft ?. metadata . animation_url || undefined ,
80- // No need for these, but we need to pass them to the form
81- supply : 0 ,
82- customImage : "" ,
83- customAnimationUrl : "" ,
71+ const nftMetadata : Partial < NFTMetadata > = {
72+ // basic
73+ name : nft . metadata . name || "" ,
74+ description : nft . metadata . description || "" ,
75+ // media
76+ image : nft . metadata . image ,
77+ animation_url : nft . metadata . animation_url ,
78+ // advanced
79+ external_url : nft . metadata . external_url || "" ,
80+ background_color : nft . metadata . background_color || "" ,
81+ attributes : nft . metadata . attributes ,
8482 } ;
83+
84+ return nftMetadata ;
8585 } , [ nft ] ) ;
8686
8787 const {
@@ -91,13 +91,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
9191 watch,
9292 handleSubmit,
9393 formState : { errors, isDirty } ,
94- } = useForm <
95- NFTMetadataInputLimited & {
96- supply : number ;
97- customImage : string ;
98- customAnimationUrl : string ;
99- }
100- > ( {
94+ } = useForm < NFTMetadataInputLimited > ( {
10195 defaultValues : transformedQueryData ,
10296 values : transformedQueryData ,
10397 } ) ;
@@ -140,6 +134,9 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
140134 } ;
141135
142136 const imageUrl = useImageFileOrUrl ( watch ( "image" ) as File | string ) ;
137+ const animationUrlFormValue = watch ( "animation_url" ) ;
138+ const imageUrlFormValue = watch ( "image" ) ;
139+
143140 const mediaFileUrl =
144141 watch ( "animation_url" ) instanceof File
145142 ? watch ( "animation_url" )
@@ -190,11 +187,8 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
190187 try {
191188 const newMetadata = parseAttributes ( {
192189 ...data ,
193- image : data . image || data . customImage || nft . metadata . image ,
194- animation_url :
195- data . animation_url ||
196- data . customAnimationUrl ||
197- nft . metadata . animation_url ,
190+ image : data . image || nft . metadata . image ,
191+ animation_url : data . animation_url || nft . metadata . animation_url ,
198192 } ) ;
199193
200194 const transaction = useUpdateMetadata
@@ -249,10 +243,6 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
249243 }
250244 } ) }
251245 >
252- < div className = "flex flex-col gap-2" >
253- < Heading size = "subtitle.md" > Metadata</ Heading >
254- < Divider />
255- </ div >
256246 < FormControl isRequired isInvalid = { ! ! errors . name } >
257247 < FormLabel > Name</ FormLabel >
258248 < Input autoFocus { ...register ( "name" ) } />
@@ -263,22 +253,34 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
263253 < div className = "flex flex-row flex-wrap gap-3" >
264254 { nft ?. metadata && ! mediaFileUrl && (
265255 < NFTMediaWithEmptyState
266- metadata = { nft . metadata }
256+ metadata = { {
257+ name : nft . metadata . name ,
258+ animation_url :
259+ typeof animationUrlFormValue === "string"
260+ ? animationUrlFormValue
261+ : nft . metadata . animation_url ,
262+ image :
263+ typeof imageUrlFormValue === "string"
264+ ? imageUrlFormValue
265+ : nft . metadata . image ,
266+ } }
267267 width = "200px"
268268 height = "200px"
269269 />
270270 ) }
271+
271272 < FileInput
272273 previewMaxWidth = "200px"
273274 value = { mediaFileUrl as File | string }
274275 showUploadButton
275276 showPreview = { nft ?. metadata ? ! ! mediaFileUrl : true }
276277 setValue = { setFile }
277- className = "rounded border border-border transition-all duration-200"
278+ className = "shrink-0 rounded border border-border transition-all duration-200"
278279 selectOrUpload = "Upload"
279280 helperText = { nft ?. metadata ? "New Media" : "Media" }
280281 />
281282 </ div >
283+
282284 < FormHelperText >
283285 You can upload image, audio, video, html, text, pdf, and 3d model
284286 files here.
@@ -319,6 +321,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
319321 register = { register }
320322 setValue = { setValue }
321323 />
324+
322325 < Accordion
323326 allowToggle = { ! ( errors . background_color || errors . external_url ) }
324327 index = { errors . background_color || errors . external_url ? [ 0 ] : undefined }
@@ -328,7 +331,7 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
328331 < Heading size = "subtitle.md" > Advanced Options</ Heading >
329332 < AccordionIcon />
330333 </ AccordionButton >
331- < AccordionPanel className = "flex flex-col gap-6 px-0 " >
334+ < AccordionPanel className = "!px-0 flex flex-col gap-6" >
332335 < FormControl isInvalid = { ! ! errors . background_color } >
333336 < FormLabel >
334337 Background Color < OpenSeaPropertyBadge />
@@ -357,26 +360,40 @@ export const UpdateNftMetadata: React.FC<UpdateNftMetadataForm> = ({
357360 </ FormErrorMessage >
358361 </ FormControl >
359362 ) }
360- < FormControl isInvalid = { ! ! errors . customImage } >
363+ < FormControl isInvalid = { ! ! errors . image } >
361364 < FormLabel > Image URL</ FormLabel >
362- < Input max = "6" { ...register ( "customImage" ) } />
365+ < Input
366+ value = {
367+ typeof imageUrlFormValue === "string" ? imageUrlFormValue : ""
368+ }
369+ onChange = { ( e ) => {
370+ setValue ( "image" , e . target . value ) ;
371+ } }
372+ />
363373 < FormHelperText >
364- If you already have your NFT image pre-uploaded, you can set the
365- URL or URI here.
374+ If you already have your NFT image pre-uploaded to a URL, you
375+ can specify it here instead of uploading the media file
366376 </ FormHelperText >
367- < FormErrorMessage >
368- { errors ?. customImage ?. message }
369- </ FormErrorMessage >
377+ < FormErrorMessage > { errors ?. image ?. message } </ FormErrorMessage >
370378 </ FormControl >
371- < FormControl isInvalid = { ! ! errors . customAnimationUrl } >
379+ < FormControl isInvalid = { ! ! errors . animation_url } >
372380 < FormLabel > Animation URL</ FormLabel >
373- < Input max = "6" { ...register ( "customAnimationUrl" ) } />
381+ < Input
382+ value = {
383+ typeof animationUrlFormValue === "string"
384+ ? animationUrlFormValue
385+ : ""
386+ }
387+ onChange = { ( e ) => {
388+ setValue ( "animation_url" , e . target . value ) ;
389+ } }
390+ />
374391 < FormHelperText >
375- If you already have your NFT Animation URL pre-uploaded, you can
376- set the URL or URI here.
392+ If you already have your NFT Animation URL pre-uploaded to a
393+ URL, you can specify it here instead of uploading the media file
377394 </ FormHelperText >
378395 < FormErrorMessage >
379- { errors ?. customAnimationUrl ?. message }
396+ { errors ?. animation_url ?. message }
380397 </ FormErrorMessage >
381398 </ FormControl >
382399 </ AccordionPanel >
0 commit comments