LaconicNetwork/stargaze-studio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor UI updates

Browse Source
This commit is contained in:
Serkan Reis 2023-06-15 16:13:08 +03:00
parent 1fa4d0dcf9
commit 8f14b92a80
6 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/MetadataInput.tsx
View File

@ -175,9 +175,9 @@ export const MetadataInput = (props: MetadataInputProps) => {
return (
<div>
<div className="grid grid-cols-2 mx-4 mt-4 w-full max-w-6xl max-h-full no-scrollbar">
<div className="grid grid-cols-2 mt-4 mr-4 ml-8 w-full max-w-6xl max-h-full no-scrollbar">
<div className="mr-4">
<div className="mb-7 text-xl font-bold underline underline-offset-2">NFT Metadata</div>
<div className="mb-7 text-xl font-bold underline underline-offset-4">NFT Metadata</div>
<TextInput {...nameState} />
<TextInput className="mt-2" {...descriptionState} />
<TextInput className="mt-2" {...externalUrlState} />

6
components/openEdition/CollectionDetails.tsx
View File

@ -14,7 +14,7 @@ import { addLogItem } from 'contexts/log'
import type { ChangeEvent } from 'react'
import { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { SG721_UPDATABLE_CODE_ID } from 'utils/constants'
import { OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS, SG721_UPDATABLE_CODE_ID } from 'utils/constants'
import { uid } from 'utils/random'
import { TextInput } from '../forms/FormInput'
@ -131,7 +131,7 @@ export const CollectionDetails = ({
useEffect(() => {
setCoverImage(null)
// empty the element so that the same file can be selected again
coverImageInputRef.current!.value = ''
if (coverImageInputRef.current) coverImageInputRef.current.value = ''
}, [metadataStorageMethod])
useEffect(() => {
@ -261,7 +261,7 @@ export const CollectionDetails = ({
</div>
</div>
</div>
<Conditional test={SG721_UPDATABLE_CODE_ID > 0}>
<Conditional test={SG721_UPDATABLE_CODE_ID > 0 && OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS !== undefined}>
<Tooltip
backgroundColor="bg-blue-500"
label={

6
components/openEdition/ImageUploadDetails.tsx
View File

@ -65,7 +65,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
const imageUrlState = useInputState({
id: 'imageUrl',
name: 'imageUrl',
title: 'Image URL',
title: 'Asset URL',
placeholder: 'ipfs://',
defaultValue: '',
})
@ -217,7 +217,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
<Conditional test={uploadMethod === 'existing'}>
<div className="ml-3 flex-column">
<p className="mb-5 ml-5">
Though the Open Edition contracts allow for off-chain image storage, it is recommended to use a
Though the Open Edition contracts allow for off-chain asset storage, it is recommended to use a
decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
NFT.Storage
@ -310,7 +310,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
htmlFor="assetFile"
>
Image Selection
Asset Selection
</label>
<div
className={clsx(

14
components/openEdition/OnChainMetadataInputDetails.tsx
View File

@ -66,7 +66,8 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
id: 'metadata-external-url',
name: 'metadata-external-url',
title: 'External URL',
subtitle: 'External URL for the badge',
subtitle: 'External URL for the token',
placeholder: 'https://',
})
const attributesState = useMetadataAttributesState()
@ -75,14 +76,16 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
id: 'metadata-animation-url',
name: 'metadata-animation-url',
title: 'Animation URL',
subtitle: 'Animation URL for the badge',
subtitle: 'Animation URL for the token',
placeholder: 'https://',
})
const youtubeUrlState = useInputState({
id: 'metadata-youtube-url',
name: 'metadata-youtube-url',
title: 'YouTube URL',
subtitle: 'YouTube URL for the badge',
subtitle: 'YouTube URL for the token',
placeholder: 'https://',
})
const parseMetadata = async () => {
@ -193,8 +196,9 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
])
return (
<div>
<div className={clsx('grid grid-cols-2 mt-4 ml-12 max-w-5xl')}>
<div className="py-3 px-8 rounded border-2 border-white/20">
<span className="ml-4 text-xl font-bold underline underline-offset-4">NFT Metadata</span>
<div className={clsx('grid grid-cols-2 mt-4 mb-2 ml-4 max-w-6xl')}>
<div className={clsx('mt-6')}>
<TextInput className="mt-2" {...nameState} />
<TextInput className="mt-2" {...descriptionState} />

2
components/openEdition/RoyaltyDetails.tsx
View File

@ -61,7 +61,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
}, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
return (
<div className="py-3 px-8 rounded border-2 border-white/20">
<div className="py-3 px-8 mx-10 rounded border-2 border-white/20">
<div className="flex justify-center">
<div className="ml-4 font-bold form-check form-check-inline">
<input

46
pages/collections/create.tsx
View File

@ -1374,30 +1374,30 @@ const CollectionCreationPage: NextPage = () => {
</span>
</button>
</div>
<Conditional test={OPEN_EDITION_FACTORY_ADDRESS !== undefined}>
<div
className={clsx(
'isolate space-y-1 border-2',
'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
minterType === 'openEdition' ? 'border-stargaze' : 'border-transparent',
minterType !== 'openEdition' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
)}
<div
className={clsx(
'isolate space-y-1 border-2',
'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
minterType === 'openEdition' ? 'border-stargaze' : 'border-transparent',
minterType !== 'openEdition' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
OPEN_EDITION_FACTORY_ADDRESS === undefined ? 'hover:bg-zinc-500 opacity-50 hover:opacity-70' : '',
)}
>
<button
className="p-4 w-full h-full text-left bg-transparent"
disabled={OPEN_EDITION_FACTORY_ADDRESS === undefined}
onClick={() => {
setMinterType('openEdition')
resetReadyFlags()
}}
type="button"
>
<button
className="p-4 w-full h-full text-left bg-transparent"
onClick={() => {
setMinterType('openEdition')
resetReadyFlags()
}}
type="button"
>
<h4 className="font-bold">Open Edition Collection</h4>
<span className="text-sm text-white/80 line-clamp-2">
Allows multiple copies of a single NFT to be minted for a given time interval.
</span>
</button>
</div>
</Conditional>
<h4 className="font-bold">Open Edition Collection</h4>
<span className="text-sm text-white/80 line-clamp-2">
Allows multiple copies of a single NFT to be minted for a given time interval.
</span>
</button>
</div>
</div>
</div>