From c62438d7531e5173e668b500de863bfde98d98fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arda=20Nak=C4=B1=C5=9F=C3=A7=C4=B1?= Date: Thu, 4 Aug 2022 14:19:25 +0300 Subject: [PATCH] Upload details component styling (#23) * Add styling to upload details * Refactor image preview --- .../collections/creation/UploadDetails.tsx | 711 +++++++----------- components/forms/FormInput.tsx | 22 +- pages/collections/create.tsx | 6 +- 3 files changed, 288 insertions(+), 451 deletions(-) diff --git a/components/collections/creation/UploadDetails.tsx b/components/collections/creation/UploadDetails.tsx index 670171e..d52e7d7 100644 --- a/components/collections/creation/UploadDetails.tsx +++ b/components/collections/creation/UploadDetails.tsx @@ -2,7 +2,8 @@ import clsx from 'clsx' import { Alert } from 'components/Alert' import Anchor from 'components/Anchor' import { Conditional } from 'components/Conditional' -import { StyledInput } from 'components/forms/StyledInput' +import { TextInput } from 'components/forms/FormInput' +import { useInputState } from 'components/forms/FormInput.hooks' import { MetadataModal } from 'components/MetadataModal' import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collection' import type { ChangeEvent } from 'react' @@ -35,15 +36,30 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { const [uploadMethod, setUploadMethod] = useState('new') const [uploadService, setUploadService] = useState('nft-storage') const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0) - const [refreshMetadata, setRefreshMetadata] = useState(false) - const [nftStorageApiKey, setNftStorageApiKey] = useState( - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDJBODk5OGI4ZkE2YTM1NzMyYmMxQTRDQzNhOUU2M0Y2NUM3ZjA1RWIiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY1NTE5MTcwNDQ2MiwibmFtZSI6IlRlc3QifQ.IbdV_26bkPHSdd81sxox5AoG-5a4CCEY4aCrdbCXwAE', - ) - const [pinataApiKey, setPinataApiKey] = useState('c8c2ea440c09ee8fa639') - const [pinataSecretKey, setPinataSecretKey] = useState( - '9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7', - ) + + const nftStorageApiKeyState = useInputState({ + id: 'nft-storage-api-key', + name: 'nftStorageApiKey', + title: 'NFT Storage API Key', + placeholder: '...', + defaultValue: + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDJBODk5OGI4ZkE2YTM1NzMyYmMxQTRDQzNhOUU2M0Y2NUM3ZjA1RWIiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY1NTE5MTcwNDQ2MiwibmFtZSI6IlRlc3QifQ.IbdV_26bkPHSdd81sxox5AoG-5a4CCEY4aCrdbCXwAE', + }) + const pinataApiKeyState = useInputState({ + id: 'pinata-api-key', + name: 'pinataApiKey', + title: 'Pinata API Key', + placeholder: '...', + defaultValue: 'c8c2ea440c09ee8fa639', + }) + const pinataSecretKeyState = useInputState({ + id: 'pinata-secret-key', + name: 'pinataSecretKey', + title: 'Pinata Secret Key', + placeholder: '...', + defaultValue: '9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7', + }) const handleChangeBaseTokenUri = (event: { target: { value: React.SetStateAction } }) => { setBaseTokenUri(event.target.value.toString()) @@ -130,9 +146,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { assetFiles: assetFilesArray, metadataFiles: metadataFilesArray, uploadService, - nftStorageApiKey, - pinataApiKey, - pinataSecretKey, + nftStorageApiKey: nftStorageApiKeyState.value, + pinataApiKey: pinataApiKeyState.value, + pinataSecretKey: pinataSecretKeyState.value, } onChange(data) } catch (error: any) { @@ -142,40 +158,43 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { return (
-
-
- { - setUploadMethod('existing') - }} - type="radio" - value="Existing" - /> - +
+
+
+ { + setUploadMethod('existing') + }} + type="radio" + value="Existing" + /> + +
+ +
+ { + setUploadMethod('new') + }} + type="radio" + value="New" + /> + +
-
- { - setUploadMethod('new') - }} - type="radio" - value="New" - /> - -
{baseTokenURI && ( @@ -183,405 +202,239 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { )} -
-
- - {uploadMethod === 'existing' && ( -
-

- Though Stargaze's sg721 contract allows for off-chain metadata storage, it is recommended to use a - decentralized storage solution, such as IPFS.
You may head over to{' '} - - NFT Storage - {' '} - or{' '} - - Pinata - {' '} - and upload your assets & metadata manually to get a base URI for your collection. -

-
- - + +
+

+ Though Stargaze's sg721 contract allows for off-chain metadata storage, it is recommended to use a + decentralized storage solution, such as IPFS.
You may head over to{' '} + + NFT Storage + {' '} + or{' '} + + Pinata + {' '} + and upload your assets & metadata manually to get a base URI for your collection. +

+
+ + -
-
- - -
-
- )} - {uploadMethod === 'new' && ( -
-
-
- { - setUploadService('nft-storage') - }} - type="radio" - value="nft-storage" - /> - -
- -
- { - setUploadService('pinata') - }} - type="radio" - value="pinata" - /> - -
-
- -
- - - setNftStorageApiKey(e.target.value)} - value={nftStorageApiKey} - /> - -
-
- - - setPinataApiKey(e.target.value)} - value={pinataApiKey} - /> - - setPinataSecretKey(e.target.value)} - value={pinataSecretKey} - /> - -
- -
-
-
-
- -
- -
-
- - {assetFilesArray.length > 0 && ( -
- -
- -
-
- )} - 0 && - metadataFilesArray.length > 0 && - assetFilesArray.length !== metadataFilesArray.length - } - > - - The number of assets and metadata files should match. - - - -
- {assetFilesArray.length > 0 && ( -
- {assetFilesArray.map((assetSource, index) => ( -
-
- 4 * index}> -
+ + +
+
+
+
+ { + setUploadService('nft-storage') + }} + type="radio" + value="nft-storage" + /> + +
- {getAssetType(assetFilesArray[4 * index]?.name) === 'image' && ( - asset - )} - - - - 4 * index + 1}> -
- {getAssetType(assetFilesArray[4 * index + 1]?.name) === 'image' && ( - asset - )} - - - - 4 * index + 2}> - - - 4 * index + 3}> - - +
+ +
+
- ))} + + {assetFilesArray.length > 0 && ( +
+ +
+ +
+
+ )} + + +
+ + 0}> +
+ {assetFilesArray.map((assetSource, index) => ( + + ))} +
+
- )} +
-
+
- )} +
) } diff --git a/components/forms/FormInput.tsx b/components/forms/FormInput.tsx index 346a35d..db74c52 100644 --- a/components/forms/FormInput.tsx +++ b/components/forms/FormInput.tsx @@ -17,9 +17,9 @@ export type FormInputProps = BaseProps & SlicedInputProps export const FormInput = forwardRef( function FormInput(props, ref) { - const { id, name, title, subtitle, isRequired, ...rest } = props + const { id, name, title, subtitle, isRequired, className, ...rest } = props return ( - + ) @@ -78,28 +78,14 @@ export const UrlInput = forwardRef( export const TraitTypeInput = forwardRef( function TraitTypeInput(props, ref) { - return ( - - ) + return }, // ) export const TraitValueInput = forwardRef( function TraitValueInput(props, ref) { - return ( - - ) + return }, // ) diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx index a604175..9741469 100644 --- a/pages/collections/create.tsx +++ b/pages/collections/create.tsx @@ -247,8 +247,8 @@ const CollectionCreationPage: NextPage = () => {
-
-

Upload Assets & Metadata

+
+

Create Collection

Make sure you check our{' '} @@ -259,8 +259,6 @@ const CollectionCreationPage: NextPage = () => {

-
-