From c84071637cdb92de1d37e242feaa3a5ff730a142 Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Mon, 13 Feb 2023 12:32:14 +0300 Subject: [PATCH] Image upload prior to badge creation --- .../badges/creation/ImageUploadDetails.tsx | 13 +- pages/badges/create.tsx | 133 ++++++++++-------- 2 files changed, 79 insertions(+), 67 deletions(-) diff --git a/components/badges/creation/ImageUploadDetails.tsx b/components/badges/creation/ImageUploadDetails.tsx index f425f41..f1a6a66 100644 --- a/components/badges/creation/ImageUploadDetails.tsx +++ b/components/badges/creation/ImageUploadDetails.tsx @@ -1,8 +1,8 @@ /* eslint-disable eslint-comments/disable-enable-pair */ -/* eslint-disable no-nested-ternary */ + /* eslint-disable no-misleading-character-class */ /* eslint-disable no-control-regex */ -/* eslint-disable @typescript-eslint/no-loop-func */ + import clsx from 'clsx' import { Anchor } from 'components/Anchor' import { Conditional } from 'components/Conditional' @@ -146,7 +146,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label" htmlFor="inlineRadio2" > - Upload New Asset + Upload New Image
@@ -165,7 +165,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label" htmlFor="inlineRadio1" > - Use an existing asset URL + Use an existing Image URL
@@ -256,7 +256,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300" htmlFor="assetFile" > - Asset Selection + Image Selection
{ setTokenUri(null) setImageUrl(null) setBadgeId(null) - setBadgeNftContractAddress(null) setTransactionHash(null) if (imageUploadDetails?.uploadMethod === 'new') { setUploading(true) - - const coverImageUrl = await upload( + const coverUrl = await upload( [imageUploadDetails.assetFile] as File[], imageUploadDetails.uploadService, 'cover', imageUploadDetails.nftStorageApiKey as string, imageUploadDetails.pinataApiKey as string, imageUploadDetails.pinataSecretKey as string, - ) - - setUploading(false) - setImageUrl(coverImageUrl) - } else { - setImageUrl(imageUploadDetails?.imageUrl as string) + ).then((imageBaseUrl) => { + setUploading(false) + return `ipfs://${imageBaseUrl}/${imageUploadDetails.assetFile?.name as string}` + }) + setImageUrl(coverUrl) + return coverUrl } + setImageUrl(imageUploadDetails?.imageUrl as string) + return imageUploadDetails?.imageUrl as string + } catch (error: any) { + toast.error(error.message, { style: { maxWidth: 'none' } }) + setCreatingBadge(false) + setUploading(false) + throw new Error("Couldn't upload the image.") + } + } + + const createNewBadge = async () => { + try { + if (!wallet.initialized) throw new Error('Wallet not connected') + if (!badgeHubContract) throw new Error('Contract not found') + + const coverUrl = await handleImageUrl() + + const badge = { + manager: badgeDetails?.manager as string, + metadata: { + name: badgeDetails?.name || undefined, + description: badgeDetails?.description || undefined, + image: coverUrl || undefined, + image_data: badgeDetails?.image_data || undefined, + external_url: badgeDetails?.external_url || undefined, + attributes: badgeDetails?.attributes || undefined, + background_color: badgeDetails?.background_color || undefined, + animation_url: badgeDetails?.animation_url || undefined, + youtube_url: badgeDetails?.youtube_url || undefined, + }, + transferrable: badgeDetails?.transferrable as boolean, + rule: { + by_key: '024d529b81a16c1310cbf9d26f2b8c57e9e03179ba68fdcd1824ae1dc5cb3cb02c', + }, + expiry: badgeDetails?.expiry || undefined, + max_supply: badgeDetails?.max_supply || undefined, + } + + const payload: BadgeHubDispatchExecuteArgs = { + contract: BADGE_HUB_ADDRESS, + messages: badgeHubMessages, + txSigner: wallet.address, + badge, + type: 'create_badge', + } + const data = await badgeHubDispatchExecute(payload) + console.log(data) + // setTransactionHash(data.transactionHash) + // setBadgeId(data.id) } catch (error: any) { toast.error(error.message, { style: { maxWidth: 'none' } }) setCreatingBadge(false) @@ -98,54 +145,12 @@ const BadgeCreationPage: NextPage = () => { } } - const createNewBadge = async () => { - if (!wallet.initialized) throw new Error('Wallet not connected') - if (!badgeHubContract) throw new Error('Contract not found') - - await handleImageUrl() - - const badge = { - manager: badgeDetails?.manager as string, - metadata: { - name: badgeDetails?.name || undefined, - description: badgeDetails?.description || undefined, - image: imageUrl || undefined, - image_data: badgeDetails?.image_data || undefined, - external_url: badgeDetails?.external_url || undefined, - attributes: badgeDetails?.attributes || undefined, - background_color: badgeDetails?.background_color || undefined, - animation_url: badgeDetails?.animation_url || undefined, - youtube_url: badgeDetails?.youtube_url || undefined, - }, - transferrable: badgeDetails?.transferrable as boolean, - rule: { - by_key: '024d529b81a16c1310cbf9d26f2b8c57e9e03179ba68fdcd1824ae1dc5cb3cb02c', - }, - expiry: badgeDetails?.expiry || undefined, - max_supply: badgeDetails?.max_supply || undefined, - } - - const payload: BadgeHubDispatchExecuteArgs = { - contract: BADGE_HUB_ADDRESS, - messages: badgeHubMessages, - txSigner: wallet.address, - badge, - type: 'create_badge', - } - const data = await badgeHubDispatchExecute(payload) - console.log(data) - // setTransactionHash(data.transactionHash) - // setBadgeId(data.id) - } - const checkImageUploadDetails = () => { if (!wallet.initialized) throw new Error('Wallet not connected.') if (!imageUploadDetails) { - throw new Error('Please select assets and metadata') + throw new Error('Please specify the image related details.') } - // if (minterType === 'base' && uploadDetails.uploadMethod === 'new' && uploadDetails.assetFiles.length > 1) { - // throw new Error('Base Minter can only mint one asset at a time. Please select only one asset.') - // } + if (imageUploadDetails.uploadMethod === 'new' && imageUploadDetails.assetFile === undefined) { throw new Error('Please select the image file') } @@ -163,7 +168,7 @@ const BadgeCreationPage: NextPage = () => { } } - // const checkMetadataDetails = () => { + // const checkBadgeDetails = () => { // if (!metadataDetails) throw new Error('Please fill out the collection details') // if (collectionDetails.name === '') throw new Error('Collection name is required') // if (collectionDetails.description === '') throw new Error('Collection description is required') @@ -303,7 +308,9 @@ const BadgeCreationPage: NextPage = () => { type="button" >

Mint Rule: By Key

- TODO + + Badges can be minted more than once with a badge specific message signed by a designated private key. +
{ 'isolate space-y-1 border-2', 'first-of-type:rounded-tl-md last-of-type:rounded-tr-md', mintRule === 'by_keys' ? 'border-stargaze' : 'border-transparent', - mintRule !== 'by_keys' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5', + mintRule !== 'by_keys' ? 'text-slate-500 bg-stargaze/5 hover:bg-gray/20' : 'hover:bg-white/5', )} >
{ 'isolate space-y-1 border-2', 'first-of-type:rounded-tl-md last-of-type:rounded-tr-md', mintRule === 'by_minter' ? 'border-stargaze' : 'border-transparent', - mintRule !== 'by_minter' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5', + mintRule !== 'by_minter' ? 'text-slate-500 bg-stargaze/5 hover:bg-gray/20' : 'hover:bg-white/5', )} >
@@ -368,7 +381,7 @@ const BadgeCreationPage: NextPage = () => {