From 9c1057a6c2678c9efb228240d9ac211b18a49960 Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Mon, 6 Mar 2023 12:06:38 +0300 Subject: [PATCH 01/17] Enable metadata file selection during badge creation --- .../badges/creation/ImageUploadDetails.tsx | 101 ++++++++++++++---- 1 file changed, 78 insertions(+), 23 deletions(-) diff --git a/components/badges/creation/ImageUploadDetails.tsx b/components/badges/creation/ImageUploadDetails.tsx index fb8d725..b0feafc 100644 --- a/components/badges/creation/ImageUploadDetails.tsx +++ b/components/badges/creation/ImageUploadDetails.tsx @@ -30,14 +30,17 @@ export interface ImageUploadDetailsDataProps { pinataSecretKey?: string uploadMethod: UploadMethod imageUrl?: string + metadataFile?: File | undefined } export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsProps) => { const [assetFile, setAssetFile] = useState() const [uploadMethod, setUploadMethod] = useState('new') const [uploadService, setUploadService] = useState('nft-storage') + const [metadataFile, setMetadataFile] = useState() const assetFileRef = useRef(null) + const metadataFileRef = useRef(null) const nftStorageApiKeyState = useInputState({ id: 'nft-storage-api-key', @@ -89,6 +92,26 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro } } + const selectMetadata = (event: ChangeEvent) => { + setMetadataFile(undefined) + if (event.target.files === null) return + + let selectedFile: File + const reader = new FileReader() + reader.onload = (e) => { + if (!event.target.files) return toast.error('No file selected.') + if (!e.target?.result) return toast.error('Error parsing file.') + selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'application/json' }) + } + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0]) + else return toast.error('No file selected.') + reader.onloadend = () => { + if (!event.target.files) return toast.error('No file selected.') + setMetadataFile(selectedFile) + } + } + const regex = /[\0-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u2020-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g @@ -108,6 +131,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro .replace(/'/g, '') .replace(/ /g, '') .replace(regex, ''), + metadataFile, } onChange(data) } catch (error: any) { @@ -121,6 +145,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro pinataSecretKeyState.value, uploadMethod, imageUrlState.value, + metadataFile, ]) useEffect(() => { @@ -252,31 +277,61 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
-
-
- -
- +
+
+ +
+ > + +
+
+
+
+
+ +
+ +
From 1f98d146fbca4e63f7828bc9f62c8e289fcbd95e Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Mon, 6 Mar 2023 18:08:19 +0300 Subject: [PATCH 02/17] Move metadata selection under badge details --- components/badges/creation/BadgeDetails.tsx | 145 ++++++++++++++++-- .../badges/creation/ImageUploadDetails.tsx | 53 ------- pages/badges/create.tsx | 1 + 3 files changed, 136 insertions(+), 63 deletions(-) diff --git a/components/badges/creation/BadgeDetails.tsx b/components/badges/creation/BadgeDetails.tsx index 42ff004..babf6c4 100644 --- a/components/badges/creation/BadgeDetails.tsx +++ b/components/badges/creation/BadgeDetails.tsx @@ -10,7 +10,8 @@ import { useMetadataAttributesState } from 'components/forms/MetadataAttributes. import { InputDateTime } from 'components/InputDateTime' import { useWallet } from 'contexts/wallet' import type { Trait } from 'contracts/badgeHub' -import { useEffect, useState } from 'react' +import type { ChangeEvent } from 'react' +import { useEffect, useRef, useState } from 'react' import { toast } from 'react-hot-toast' import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput' @@ -42,6 +43,9 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { const wallet = useWallet() const [timestamp, setTimestamp] = useState(undefined) const [transferrable, setTransferrable] = useState(false) + const [metadataFile, setMetadataFile] = useState() + + const metadataFileRef = useRef(null) const managerState = useInputState({ id: 'manager-address', @@ -109,6 +113,107 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { subtitle: 'YouTube URL for the badge', }) + const parseMetadata = async () => { + try { + let parsedMetadata: any + if (metadataFile) { + attributesState.reset() + parsedMetadata = JSON.parse(await metadataFile.text()) + + if (!parsedMetadata.attributes || parsedMetadata.attributes.length === 0) { + attributesState.add({ + trait_type: '', + value: '', + }) + } else { + for (let i = 0; i < parsedMetadata.attributes.length; i++) { + attributesState.add({ + trait_type: parsedMetadata.attributes[i].trait_type, + value: parsedMetadata.attributes[i].value, + }) + } + } + if (!parsedMetadata.name) { + nameState.onChange('') + } else { + nameState.onChange(parsedMetadata.name) + } + if (!parsedMetadata.description) { + descriptionState.onChange('') + } else { + descriptionState.onChange(parsedMetadata.description) + } + if (!parsedMetadata.external_url) { + externalUrlState.onChange('') + } else { + externalUrlState.onChange(parsedMetadata.external_url) + } + if (!parsedMetadata.youtube_url) { + youtubeUrlState.onChange('') + } else { + youtubeUrlState.onChange(parsedMetadata.youtube_url) + } + if (!parsedMetadata.animation_url) { + animationUrlState.onChange('') + } else { + animationUrlState.onChange(parsedMetadata.animation_url) + } + if (!parsedMetadata.background_color) { + backgroundColorState.onChange('') + } else { + backgroundColorState.onChange(parsedMetadata.background_color) + } + if (!parsedMetadata.image_data) { + imageDataState.onChange('') + } else { + imageDataState.onChange(parsedMetadata.image_data) + } + } else { + attributesState.reset() + nameState.onChange('') + descriptionState.onChange('') + externalUrlState.onChange('') + youtubeUrlState.onChange('') + animationUrlState.onChange('') + backgroundColorState.onChange('') + imageDataState.onChange('') + } + } catch (error) { + toast.error('Error parsing metadata file: Invalid JSON format.') + if (metadataFileRef.current) metadataFileRef.current.value = '' + setMetadataFile(undefined) + } + } + + const selectMetadata = (event: ChangeEvent) => { + setMetadataFile(undefined) + if (event.target.files === null) return + + let selectedFile: File + const reader = new FileReader() + reader.onload = (e) => { + if (!event.target.files) return toast.error('No file selected.') + if (!e.target?.result) return toast.error('Error parsing file.') + selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'application/json' }) + } + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0]) + else return toast.error('No file selected.') + reader.onloadend = () => { + if (!event.target.files) return toast.error('No file selected.') + setMetadataFile(selectedFile) + } + } + + useEffect(() => { + void parseMetadata() + if (!metadataFile) + attributesState.add({ + trait_type: '', + value: '', + }) + }, [metadataFile]) + useEffect(() => { try { const data: BadgeDetailsDataProps = { @@ -154,15 +259,6 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { youtubeUrlState.value, ]) - useEffect(() => { - if (attributesState.values.length === 0) - attributesState.add({ - trait_type: '', - value: '', - }) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - return (
@@ -172,6 +268,7 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { + setTimestamp(date)} value={timestamp} /> @@ -197,6 +294,34 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { title="Traits" />
+
+
+ +
+ +
+
+
diff --git a/components/badges/creation/ImageUploadDetails.tsx b/components/badges/creation/ImageUploadDetails.tsx index b0feafc..0bd58b4 100644 --- a/components/badges/creation/ImageUploadDetails.tsx +++ b/components/badges/creation/ImageUploadDetails.tsx @@ -30,17 +30,14 @@ export interface ImageUploadDetailsDataProps { pinataSecretKey?: string uploadMethod: UploadMethod imageUrl?: string - metadataFile?: File | undefined } export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsProps) => { const [assetFile, setAssetFile] = useState() const [uploadMethod, setUploadMethod] = useState('new') const [uploadService, setUploadService] = useState('nft-storage') - const [metadataFile, setMetadataFile] = useState() const assetFileRef = useRef(null) - const metadataFileRef = useRef(null) const nftStorageApiKeyState = useInputState({ id: 'nft-storage-api-key', @@ -92,26 +89,6 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro } } - const selectMetadata = (event: ChangeEvent) => { - setMetadataFile(undefined) - if (event.target.files === null) return - - let selectedFile: File - const reader = new FileReader() - reader.onload = (e) => { - if (!event.target.files) return toast.error('No file selected.') - if (!e.target?.result) return toast.error('Error parsing file.') - selectedFile = new File([e.target.result], event.target.files[0].name, { type: 'application/json' }) - } - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (event.target.files[0]) reader.readAsArrayBuffer(event.target.files[0]) - else return toast.error('No file selected.') - reader.onloadend = () => { - if (!event.target.files) return toast.error('No file selected.') - setMetadataFile(selectedFile) - } - } - const regex = /[\0-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u2020-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g @@ -131,7 +108,6 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro .replace(/'/g, '') .replace(/ /g, '') .replace(regex, ''), - metadataFile, } onChange(data) } catch (error: any) { @@ -145,7 +121,6 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro pinataSecretKeyState.value, uploadMethod, imageUrlState.value, - metadataFile, ]) useEffect(() => { @@ -306,34 +281,6 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
-
-
- -
- -
-
-
Date: Mon, 6 Mar 2023 21:49:05 +0300 Subject: [PATCH 03/17] Display badge creation fee estimate --- components/badges/creation/BadgeDetails.tsx | 55 ++++++++++++++++----- pages/badges/create.tsx | 39 +++++++++++++++ 2 files changed, 83 insertions(+), 11 deletions(-) diff --git a/components/badges/creation/BadgeDetails.tsx b/components/badges/creation/BadgeDetails.tsx index babf6c4..46a25b3 100644 --- a/components/badges/creation/BadgeDetails.tsx +++ b/components/badges/creation/BadgeDetails.tsx @@ -3,7 +3,9 @@ /* eslint-disable @typescript-eslint/no-unsafe-argument */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ +import { toUtf8 } from '@cosmjs/encoding' import clsx from 'clsx' +import { Conditional } from 'components/Conditional' import { FormControl } from 'components/FormControl' import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks' import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks' @@ -13,6 +15,7 @@ import type { Trait } from 'contracts/badgeHub' import type { ChangeEvent } from 'react' import { useEffect, useRef, useState } from 'react' import { toast } from 'react-hot-toast' +import { BADGE_HUB_ADDRESS } from 'utils/constants' import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput' import { MetadataAttributes } from '../../forms/MetadataAttributes' @@ -22,6 +25,7 @@ interface BadgeDetailsProps { onChange: (data: BadgeDetailsDataProps) => void uploadMethod: UploadMethod | undefined mintRule: MintRule + metadataSize: number } export interface BadgeDetailsDataProps { @@ -39,11 +43,12 @@ export interface BadgeDetailsDataProps { youtube_url?: string } -export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { +export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => { const wallet = useWallet() const [timestamp, setTimestamp] = useState(undefined) const [transferrable, setTransferrable] = useState(false) const [metadataFile, setMetadataFile] = useState() + const [metadataFeeRate, setMetadataFeeRate] = useState(0) const metadataFileRef = useRef(null) @@ -259,6 +264,26 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { youtubeUrlState.value, ]) + useEffect(() => { + const retrieveFeeRate = async () => { + try { + if (wallet.client) { + const feeRateRaw = await wallet.client.queryContractRaw( + BADGE_HUB_ADDRESS, + toUtf8(Buffer.from(Buffer.from('fee_rate').toString('hex'), 'hex').toString()), + ) + console.log('Fee Rate Raw: ', feeRateRaw) + const feeRate = JSON.parse(new TextDecoder().decode(feeRateRaw as Uint8Array)) + setMetadataFeeRate(Number(feeRate.metadata)) + } + } catch (error) { + toast.error('Error retrieving metadata fee rate.') + console.log('Error retrieving fee rate: ', error) + } + } + void retrieveFeeRate() + }, [wallet.client]) + return (
@@ -272,16 +297,24 @@ export const BadgeDetails = ({ onChange }: BadgeDetailsProps) => { setTimestamp(date)} value={timestamp} /> -
- +
+
+ +
+ +
+
Fee Estimate:
+ {(metadataSize * Number(metadataFeeRate)) / 1000000} stars +
+
diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx index 3f510b3..3763984 100644 --- a/pages/badges/create.tsx +++ b/pages/badges/create.tsx @@ -23,12 +23,14 @@ import { useInputState } from 'components/forms/FormInput.hooks' import { Tooltip } from 'components/Tooltip' import { useContracts } from 'contexts/contracts' import { useWallet } from 'contexts/wallet' +import type { Badge } from 'contracts/badgeHub' import type { DispatchExecuteArgs as BadgeHubDispatchExecuteArgs } from 'contracts/badgeHub/messages/execute' import { dispatchExecute as badgeHubDispatchExecute } from 'contracts/badgeHub/messages/execute' import * as crypto from 'crypto' import { toPng } from 'html-to-image' import type { NextPage } from 'next' import { NextSeo } from 'next-seo' +import sizeof from 'object-sizeof' import { QRCodeSVG } from 'qrcode.react' import { useEffect, useMemo, useRef, useState } from 'react' import { toast } from 'react-hot-toast' @@ -60,6 +62,7 @@ const BadgeCreationPage: NextPage = () => { const [readyToCreateBadge, setReadyToCreateBadge] = useState(false) const [mintRule, setMintRule] = useState('by_key') const [resolvedMinterAddress, setResolvedMinterAddress] = useState('') + const [tempBadge, setTempBadge] = useState() const [badgeId, setBadgeId] = useState(null) const [imageUrl, setImageUrl] = useState(null) @@ -139,6 +142,37 @@ const BadgeCreationPage: NextPage = () => { void resolveMinterAddress() }, [designatedMinterState.value]) + useEffect(() => { + 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: + mintRule === 'by_key' + ? { + by_key: keyState.value, + } + : mintRule === 'by_minter' + ? { + by_minter: resolvedMinterAddress, + } + : 'by_keys', + expiry: badgeDetails?.expiry || undefined, + max_supply: badgeDetails?.max_supply || undefined, + } + setTempBadge(badge) + }, [badgeDetails, keyState.value, mintRule, resolvedMinterAddress, imageUrl]) + const createNewBadge = async () => { try { if (!wallet.initialized) throw new Error('Wallet not connected') @@ -672,6 +706,11 @@ const BadgeCreationPage: NextPage = () => {
Date: Mon, 6 Mar 2023 22:14:24 +0300 Subject: [PATCH 04/17] Add image preview for existing image URL --- components/badges/creation/BadgeDetails.tsx | 1 + components/badges/creation/ImageUploadDetails.tsx | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/badges/creation/BadgeDetails.tsx b/components/badges/creation/BadgeDetails.tsx index 46a25b3..7805dcc 100644 --- a/components/badges/creation/BadgeDetails.tsx +++ b/components/badges/creation/BadgeDetails.tsx @@ -278,6 +278,7 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => { } } catch (error) { toast.error('Error retrieving metadata fee rate.') + setMetadataFeeRate(0) console.log('Error retrieving fee rate: ', error) } } diff --git a/components/badges/creation/ImageUploadDetails.tsx b/components/badges/creation/ImageUploadDetails.tsx index 0bd58b4..397f541 100644 --- a/components/badges/creation/ImageUploadDetails.tsx +++ b/components/badges/creation/ImageUploadDetails.tsx @@ -172,7 +172,7 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro
-
+

@@ -187,8 +187,17 @@ export const ImageUploadDetails = ({ onChange, mintRule }: ImageUploadDetailsPro {' '} and upload your image manually to get an image URL for your badge.

-
- +
+ + +
+ badge-preview +
+
From 278c9897032d25d1403c528660ccdff0b5e50532 Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Mon, 6 Mar 2023 22:29:08 +0300 Subject: [PATCH 05/17] Update My Badges layout & add placeholders --- .env.example | 6 +++--- pages/badges/myBadges.tsx | 12 +++++++----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/.env.example b/.env.example index e98f503..29bdb31 100644 --- a/.env.example +++ b/.env.example @@ -1,9 +1,9 @@ APP_VERSION=0.4.7 NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS -NEXT_PUBLIC_SG721_CODE_ID=793 -NEXT_PUBLIC_VENDING_MINTER_CODE_ID=275 -NEXT_PUBLIC_VENDING_FACTORY_ADDRESS="stars1s48apjumprma0d64ge88dmu7lr8exu02tlw90xxupgds0s25gfasx447dn" +NEXT_PUBLIC_SG721_CODE_ID=1702 +NEXT_PUBLIC_VENDING_MINTER_CODE_ID=1701 +NEXT_PUBLIC_VENDING_FACTORY_ADDRESS="stars1xz4d6wzxqn3udgsm5qnr78y032xng4r2ycv7aw6mjtsuw59s2n9s93ec0v" NEXT_PUBLIC_BASE_FACTORY_ADDRESS="stars1c6juqgd7cm80afpmuszun66rl9zdc4kgfht8fk34tfq3zk87l78sdxngzv" NEXT_PUBLIC_SG721_NAME_ADDRESS="stars1fx74nkqkw2748av8j7ew7r3xt9cgjqduwn8m0ur5lhe49uhlsasszc5fhr" NEXT_PUBLIC_BASE_MINTER_CODE_ID=613 diff --git a/pages/badges/myBadges.tsx b/pages/badges/myBadges.tsx index 93bf831..7f388a1 100644 --- a/pages/badges/myBadges.tsx +++ b/pages/badges/myBadges.tsx @@ -49,12 +49,12 @@ const BadgeList: NextPage = () => { {myBadges.map((badge: any, index: any) => { return ( - +
Cover {
-

{badge.name}

+

+ {badge.name ? badge.name : 'No name provided.'} +

Badge ID: {badge.tokenId}

- - {badge.description} + + {badge.description ? badge.description : 'No description provided.'} {/*
*/} {/* */} From cf7f00f2eeecd1595427411665c561a8903d7631 Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 10:33:59 +0300 Subject: [PATCH 06/17] Add Tooltips for Mint Rule selection --- components/Tooltip.tsx | 3 +- pages/badges/create.tsx | 67 ++++++++++++++++++++++++----------------- 2 files changed, 41 insertions(+), 29 deletions(-) diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index fa43855..2b2e552 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -6,6 +6,7 @@ import { usePopper } from 'react-popper' export interface TooltipProps extends ComponentProps<'div'> { label: ReactNode children: ReactElement + placement?: 'top' | 'bottom' | 'left' | 'right' } export const Tooltip = ({ label, children, ...props }: TooltipProps) => { @@ -14,7 +15,7 @@ export const Tooltip = ({ label, children, ...props }: TooltipProps) => { const [show, setShow] = useState(false) const { styles, attributes } = usePopper(referenceElement, popperElement, { - placement: 'top', + placement: props.placement ? props.placement : 'top', }) return ( diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx index 3763984..e92747f 100644 --- a/pages/badges/create.tsx +++ b/pages/badges/create.tsx @@ -603,20 +603,25 @@ const BadgeCreationPage: NextPage = () => { mintRule !== 'by_key' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5', )} > - + +
{ mintRule !== 'by_keys' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5', )} > - + +
{ type="button" >

Mint Rule: By Minter

- - Badges can be minted by a designated minter account. + + No key designation. Multiple badges can be minted to different addresses by a pre-determined minter + address.
From 43ae5eb03c3fe444550424ef8b370d7aabc7928a Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 11:02:56 +0300 Subject: [PATCH 07/17] Improved responsiveness to changes in screen resolution --- components/forms/MetadataAttributes.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/forms/MetadataAttributes.tsx b/components/forms/MetadataAttributes.tsx index acfac6e..d911d23 100644 --- a/components/forms/MetadataAttributes.tsx +++ b/components/forms/MetadataAttributes.tsx @@ -73,9 +73,10 @@ export function MetadataAttribute({ id, isLast, onAdd, onChange, onRemove, defau }, [traitTypeState.value, traitValueState.value, id]) return ( -
+
+
+ +
From cf07cc3cf5828128a48676ac57a7d6d707cfb3d1 Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 12:27:46 +0300 Subject: [PATCH 11/17] Add fee estimation warning --- components/Tooltip.tsx | 7 ++++++- components/badges/creation/BadgeDetails.tsx | 16 ++++++++++++---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx index 5e6b874..b243e18 100644 --- a/components/Tooltip.tsx +++ b/components/Tooltip.tsx @@ -7,6 +7,7 @@ export interface TooltipProps extends ComponentProps<'div'> { label: ReactNode children: ReactElement placement?: 'top' | 'bottom' | 'left' | 'right' + backgroundColor?: string } export const Tooltip = ({ label, children, ...props }: TooltipProps) => { @@ -33,7 +34,11 @@ export const Tooltip = ({ label, children, ...props }: TooltipProps) => {
diff --git a/components/badges/creation/BadgeDetails.tsx b/components/badges/creation/BadgeDetails.tsx index 7805dcc..0fac8b4 100644 --- a/components/badges/creation/BadgeDetails.tsx +++ b/components/badges/creation/BadgeDetails.tsx @@ -19,6 +19,7 @@ import { BADGE_HUB_ADDRESS } from 'utils/constants' import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput' import { MetadataAttributes } from '../../forms/MetadataAttributes' +import { Tooltip } from '../../Tooltip' import type { MintRule, UploadMethod } from './ImageUploadDetails' interface BadgeDetailsProps { @@ -311,10 +312,17 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
-
-
Fee Estimate:
- {(metadataSize * Number(metadataFeeRate)) / 1000000} stars -
+ +
+
Fee Estimate:
+ {(metadataSize * Number(metadataFeeRate)) / 1000000} stars +
+
From cf4378bbadcfb2f70eea6ec225fb3628e220a1f6 Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 12:52:20 +0300 Subject: [PATCH 12/17] Clean up parseMetadata() --- components/badges/creation/BadgeDetails.tsx | 42 ++++----------------- 1 file changed, 7 insertions(+), 35 deletions(-) diff --git a/components/badges/creation/BadgeDetails.tsx b/components/badges/creation/BadgeDetails.tsx index 0fac8b4..58b02e1 100644 --- a/components/badges/creation/BadgeDetails.tsx +++ b/components/badges/creation/BadgeDetails.tsx @@ -139,41 +139,13 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => { }) } } - if (!parsedMetadata.name) { - nameState.onChange('') - } else { - nameState.onChange(parsedMetadata.name) - } - if (!parsedMetadata.description) { - descriptionState.onChange('') - } else { - descriptionState.onChange(parsedMetadata.description) - } - if (!parsedMetadata.external_url) { - externalUrlState.onChange('') - } else { - externalUrlState.onChange(parsedMetadata.external_url) - } - if (!parsedMetadata.youtube_url) { - youtubeUrlState.onChange('') - } else { - youtubeUrlState.onChange(parsedMetadata.youtube_url) - } - if (!parsedMetadata.animation_url) { - animationUrlState.onChange('') - } else { - animationUrlState.onChange(parsedMetadata.animation_url) - } - if (!parsedMetadata.background_color) { - backgroundColorState.onChange('') - } else { - backgroundColorState.onChange(parsedMetadata.background_color) - } - if (!parsedMetadata.image_data) { - imageDataState.onChange('') - } else { - imageDataState.onChange(parsedMetadata.image_data) - } + nameState.onChange(parsedMetadata.name) + descriptionState.onChange(parsedMetadata.description) + externalUrlState.onChange(parsedMetadata.external_url) + youtubeUrlState.onChange(parsedMetadata.youtube_url) + animationUrlState.onChange(parsedMetadata.animation_url) + backgroundColorState.onChange(parsedMetadata.background_color) + imageDataState.onChange(parsedMetadata.image_data) } else { attributesState.reset() nameState.onChange('') From 8e0f1d3b518d67325f0e19a4fb8cd827dad0e78d Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 14:59:54 +0300 Subject: [PATCH 13/17] Edit tooltip label for Mint Rule: By Minter --- pages/badges/create.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx index 0bf4532..b089dc6 100644 --- a/pages/badges/create.tsx +++ b/pages/badges/create.tsx @@ -660,7 +660,7 @@ const BadgeCreationPage: NextPage = () => { )} >
-
- -
- +
+ +
+ > + +
-
+
From c224654c4c4494cf94417a0679cce1f816e15c9a Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 16:13:08 +0300 Subject: [PATCH 16/17] Tooltip color update --- pages/badges/create.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx index b089dc6..314f634 100644 --- a/pages/badges/create.tsx +++ b/pages/badges/create.tsx @@ -604,6 +604,7 @@ const BadgeCreationPage: NextPage = () => { )} > @@ -632,6 +633,7 @@ const BadgeCreationPage: NextPage = () => { )} > @@ -660,6 +662,7 @@ const BadgeCreationPage: NextPage = () => { )} > From 065d7b3e822fe593f64f8587cbab1d92c446bbea Mon Sep 17 00:00:00 2001 From: Serkan Reis Date: Tue, 7 Mar 2023 17:53:05 +0300 Subject: [PATCH 17/17] Update badge creation tooltips --- pages/badges/create.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx index 314f634..8abd492 100644 --- a/pages/badges/create.tsx +++ b/pages/badges/create.tsx @@ -605,7 +605,8 @@ const BadgeCreationPage: NextPage = () => { >