Collection creation page styling (#26)

* Refactor whitelist component and add new state * Implement existing whitelist component * Refactor other pages for styling
2022-08-05 14:13:27 +03:00 · 2022-08-05 14:13:27 +03:00 · 927a3af361
commit 927a3af361
parent 5b9ce8568c
4 changed files with 408 additions and 295 deletions
--- a/components/collections/creation/RoyaltyDetails.tsx
+++ b/components/collections/creation/RoyaltyDetails.tsx
@ -1,6 +1,7 @@
+import { Conditional } from 'components/Conditional'
 import { FormGroup } from 'components/FormGroup'
 import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'

 import { NumberInput, TextInput } from '../../forms/FormInput'

@ -9,11 +10,16 @@ interface RoyaltyDetailsProps {
 }

 export interface RoyaltyDetailsDataProps {
+  royaltyType: RoyaltyState
  paymentAddress: string
  share: number
 }

+type RoyaltyState = 'none' | 'new'
+
 export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
+  const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
+
  const royaltyPaymentAddressState = useInputState({
    id: 'royalty-payment-address',
    name: 'royaltyPaymentAddress',
@ -32,6 +38,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {

  useEffect(() => {
    const data: RoyaltyDetailsDataProps = {
+      royaltyType: royaltyState,
      paymentAddress: royaltyPaymentAddressState.value,
      share: royaltyShareState.value,
    }
@ -40,11 +47,47 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
  }, [royaltyPaymentAddressState.value, royaltyShareState.value])

  return (
-    <div>
+    <div className="py-3 px-8 rounded border-2 border-white/20">
+      <div className="flex justify-center">
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={royaltyState === 'none'}
+            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            id="royaltyRadio1"
+            name="royaltyRadioOptions1"
+            onClick={() => {
+              setRoyaltyState('none')
+            }}
+            type="radio"
+            value="None"
+          />
+          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio1">
+            No royalty
+          </label>
+        </div>
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={royaltyState === 'new'}
+            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            id="royaltyRadio2"
+            name="royaltyRadioOptions2"
+            onClick={() => {
+              setRoyaltyState('new')
+            }}
+            type="radio"
+            value="Existing"
+          />
+          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio2">
+            New royalty
+          </label>
+        </div>
+      </div>
+      <Conditional test={royaltyState === 'new'}>
        <FormGroup subtitle="Information about royalty" title="Royalty Details">
          <TextInput {...royaltyPaymentAddressState} />
          <NumberInput {...royaltyShareState} />
        </FormGroup>
+      </Conditional>
    </div>
  )
 }
--- a/components/collections/creation/UploadDetails.tsx
+++ b/components/collections/creation/UploadDetails.tsx
@ -162,7 +162,6 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
  }, [uploadMethod])

  return (
-    <div>
    <div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
      <div className="flex justify-center">
        <div className="mt-3 ml-4 font-bold form-check form-check-inline">
@ -182,7 +181,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
          </label>
        </div>

-          <div className="mt-3 ml-4 form-check form-check-inline">
+        <div className="mt-3 ml-4 font-bold form-check form-check-inline">
          <input
            checked={uploadMethod === 'new'}
            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
@ -440,6 +439,5 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
        </Conditional>
      </div>
    </div>
-    </div>
  )
 }
--- a/components/collections/creation/WhitelistDetails.tsx
+++ b/components/collections/creation/WhitelistDetails.tsx
@ -1,11 +1,11 @@
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
-import { useNumberInputState } from 'components/forms/FormInput.hooks'
+import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import React, { useEffect, useState } from 'react'

 import { Conditional } from '../../Conditional'
-import { NumberInput } from '../../forms/FormInput'
+import { AddressInput, NumberInput } from '../../forms/FormInput'
 import { JsonPreview } from '../../JsonPreview'
 import { WhitelistUpload } from '../../WhitelistUpload'

@ -14,7 +14,7 @@ interface WhitelistDetailsProps {
 }

 export interface WhitelistDetailsDataProps {
-  isContractAddress: boolean
+  whitelistType: WhitelistState
  contractAddress?: string
  members?: string[]
  unitPrice?: string
@ -24,11 +24,20 @@ export interface WhitelistDetailsDataProps {
  memberLimit?: number
 }

+type WhitelistState = 'none' | 'existing' | 'new'
+
 export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
+  const [whitelistState, setWhitelistState] = useState<WhitelistState>('none')
  const [startDate, setStartDate] = useState<Date | undefined>(undefined)
  const [endDate, setEndDate] = useState<Date | undefined>(undefined)
  const [whitelistArray, setWhitelistArray] = useState<string[]>([])

+  const whitelistAddressState = useInputState({
+    id: 'whitelist-address',
+    name: 'whitelistAddress',
+    title: 'Whitelist Address',
+  })
+
  const uniPriceState = useNumberInputState({
    id: 'unit-price',
    name: 'unitPrice',
@ -59,8 +68,8 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {

  useEffect(() => {
    const data: WhitelistDetailsDataProps = {
-      isContractAddress: false,
-      contractAddress: '',
+      whitelistType: whitelistState,
+      contractAddress: whitelistAddressState.value,
      members: whitelistArray,
      unitPrice: uniPriceState.value ? (Number(uniPriceState.value) * 1_000_000).toString() : '',
      startTime: startDate ? (startDate.getTime() * 1_000_000).toString() : '',
@ -73,24 +82,85 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
  }, [uniPriceState.value, memberLimitState.value, perAddressLimitState.value, startDate, endDate, whitelistArray])

  return (
+    <div className="py-3 px-8 rounded border-2 border-white/20">
+      <div className="flex justify-center">
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={whitelistState === 'none'}
+            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            id="whitelistRadio1"
+            name="whitelistRadioOptions1"
+            onClick={() => {
+              setWhitelistState('none')
+            }}
+            type="radio"
+            value="None"
+          />
+          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio1">
+            No whitelist
+          </label>
+        </div>
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={whitelistState === 'existing'}
+            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            id="whitelistRadio2"
+            name="whitelistRadioOptions2"
+            onClick={() => {
+              setWhitelistState('existing')
+            }}
+            type="radio"
+            value="Existing"
+          />
+          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio2">
+            Existing whitelist
+          </label>
+        </div>
+        <div className="ml-4 font-bold form-check form-check-inline">
+          <input
+            checked={whitelistState === 'new'}
+            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            id="whitelistRadio3"
+            name="whitelistRadioOptions3"
+            onClick={() => {
+              setWhitelistState('new')
+            }}
+            type="radio"
+            value="New"
+          />
+          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio3">
+            New whitelist
+          </label>
+        </div>
+      </div>
+
+      <Conditional test={whitelistState === 'existing'}>
+        <AddressInput {...whitelistAddressState} className="pb-5" />
+      </Conditional>
+
+      <Conditional test={whitelistState === 'new'}>
        <div className="grid grid-cols-2">
          <FormGroup subtitle="Information about your minting settings" title="Whitelist Minting Details">
            <NumberInput isRequired {...uniPriceState} />
            <NumberInput isRequired {...memberLimitState} />
            <NumberInput isRequired {...perAddressLimitState} />
-      </FormGroup>
-      <FormGroup subtitle="" title="">
            <FormControl htmlId="start-date" isRequired subtitle="Start time for the minting" title="Start Time">
              <InputDateTime minDate={new Date()} onChange={(date) => setStartDate(date)} value={startDate} />
            </FormControl>
            <FormControl htmlId="end-date" isRequired subtitle="End time for the minting" title="End Time">
              <InputDateTime minDate={new Date()} onChange={(date) => setEndDate(date)} value={endDate} />
            </FormControl>
-        <WhitelistUpload onChange={whitelistFileOnChange} />
-        <Conditional test={whitelistArray.length > 0}>
-          <JsonPreview content={whitelistArray} initialState={false} title="File Contents" />
-        </Conditional>
          </FormGroup>
+          <div>
+            <FormGroup subtitle="TXT file that contains the whitelisted addresses" title="Whitelist File">
+              <WhitelistUpload onChange={whitelistFileOnChange} />
+            </FormGroup>
+            <Conditional test={whitelistArray.length > 0}>
+              <JsonPreview content={whitelistArray} initialState title="File Contents" />
+            </Conditional>
+          </div>
+        </div>
+      </Conditional>
    </div>
  )
 }
--- a/pages/collections/create.tsx
+++ b/pages/collections/create.tsx
@ -65,9 +65,9 @@ const CollectionCreationPage: NextPage = () => {
        uploadDetails?.pinataSecretKey as string,
      )

-      const whitelist = whitelistDetails?.isContractAddress
-        ? whitelistDetails.contractAddress
-        : await instantiateWhitelist()
+      let whitelist: string | undefined
+      if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
+      else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()

      await instantate(baseUri, coverImageUri, whitelist)

@ -105,7 +105,7 @@ const CollectionCreationPage: NextPage = () => {
    if (!minterContract) throw new Error('Contract not found')

    let royaltyInfo = null
-    if (royaltyDetails?.paymentAddress && royaltyDetails.share) {
+    if (royaltyDetails?.royaltyType === 'new') {
      royaltyInfo = {
        paymentAddress: royaltyDetails.paymentAddress,
        share: royaltyDetails.share,
@ -225,8 +225,8 @@ const CollectionCreationPage: NextPage = () => {

  const checkWhitelistDetails = () => {
    if (!whitelistDetails) throw new Error('Please fill out the whitelist details')
-    if (whitelistDetails.isContractAddress) {
-      if (whitelistDetails.contractAddress === '') throw new Error('Contract address is required')
+    if (whitelistDetails.whitelistType === 'existing') {
+      if (whitelistDetails.contractAddress === '') throw new Error('Whitelist contract address is required')
    } else {
      if (whitelistDetails.members?.length === 0) throw new Error('Whitelist member list cannot be empty')
      if (whitelistDetails.unitPrice === '') throw new Error('Whitelist unit price is required')
@ -239,9 +239,11 @@ const CollectionCreationPage: NextPage = () => {

  const checkRoyaltyDetails = () => {
    if (!royaltyDetails) throw new Error('Please fill out the royalty details')
+    if (royaltyDetails.royaltyType === 'new') {
      if (royaltyDetails.share === 0) throw new Error('Royalty share is required')
      if (royaltyDetails.paymentAddress === '') throw new Error('Royalty payment address is required')
    }
+  }

  return (
    <div>
@ -259,29 +261,29 @@ const CollectionCreationPage: NextPage = () => {
        </p>
      </div>

+      <div className="mx-10">
        <UploadDetails onChange={setUploadDetails} />

-      <div className="flex justify-evenly grid-col-2">
+        <div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
          <CollectionDetails onChange={setCollectionDetails} />
          <MintingDetails onChange={setMintingDetails} />
        </div>

-      <div className="flex justify-end">
+        <div className="flex justify-between my-6">
          <Button {...toggleProps} isWide type="button" variant="outline">
            {isExpanded ? 'Hide' : 'Show'} Advanced Details
          </Button>
-      </div>
-
-      <section {...collapseProps}>
-        <WhitelistDetails onChange={setWhitelistDetails} />
-        <RoyaltyDetails onChange={setRoyaltyDetails} />
-      </section>
-
-      <div className="mt-5 ml-8">
-        <Button className="mb-8" isWide onClick={createCollection} variant="solid">
+          <Button isWide onClick={createCollection} variant="solid">
            Create Collection
          </Button>
        </div>
+
+        <section {...collapseProps} className="mb-10">
+          <WhitelistDetails onChange={setWhitelistDetails} />
+          <div className="my-6" />
+          <RoyaltyDetails onChange={setRoyaltyDetails} />
+        </section>
+      </div>
    </div>
  )
 }