Collection info (#6)

* Initial preview & upload logic

* Refactor image & metadata selection & preview logic

* Refactor image & metadata selection & preview logic - 2

* Basic collection and minting info

* Minor fix

* gec

* gec

* gec

* Collection info entries

* Small refactor

* Add stargaze text image and change website color

Co-authored-by: Serkan Reis <serkanreis@gmail.com>
Co-authored-by: findolor <anakisci@gmail.com>

components/CollectionInfo.tsx

@@ -0,0 +1,190 @@
+import { Button } from 'components/Button'
+import { FormControl } from 'components/FormControl'
+import { FormGroup } from 'components/FormGroup'
+import { AddressList } from 'components/forms/AddressList'
+import { useAddressListState } from 'components/forms/AddressList.hooks'
+import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
+import { InputDateTime } from 'components/InputDateTime'
+import React, { useState } from 'react'
+import useCollapse from 'react-collapsed'
+import { useMutation } from 'react-query'
+
+import { NumberInput, TextInput } from './forms/FormInput'
+
+export const CollectionInfo = () => {
+  const { getCollapseProps, getToggleProps } = useCollapse()
+  const [timestamp, setTimestamp] = useState<Date | undefined>()
+
+  const toggleProps = getToggleProps()
+  const collapseProps = getCollapseProps()
+
+  const nameState = useInputState({
+    id: 'name',
+    name: 'name',
+    title: 'Name',
+    subtitle: '',
+  })
+
+  const descriptionState = useInputState({
+    id: 'description',
+    name: 'description',
+    title: 'Description',
+    subtitle: '',
+  })
+
+  const imageState = useInputState({
+    id: 'image',
+    name: 'image',
+    title: 'Image',
+    subtitle: '',
+  })
+
+  const externalImageState = useInputState({
+    id: 'externalImage',
+    name: 'externalImage',
+    title: 'External Image',
+    subtitle: '',
+  })
+
+  const numberOfTokensState = useNumberInputState({
+    id: 'numberoftokens',
+    name: 'numberoftokens',
+    title: 'Number Of Tokens',
+    subtitle: '',
+    placeholder: '100',
+  })
+
+  const unitPriceState = useNumberInputState({
+    id: 'unitPrice',
+    name: 'unitPrice',
+    title: 'Unit Price',
+    subtitle: '',
+    placeholder: '100',
+  })
+
+  const perAddressLimitState = useNumberInputState({
+    id: 'peraddresslimit',
+    name: 'peraddresslimit',
+    title: 'Per Address Limit',
+    subtitle: '',
+    placeholder: '1',
+  })
+
+  const royaltyPaymentAddressState = useInputState({
+    id: 'royalty-payment-address',
+    name: 'royaltyPaymentAddress',
+    title: 'Payment Address',
+    subtitle: 'Address to receive royalties',
+    placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
+  })
+
+  const royaltyShareState = useNumberInputState({
+    id: 'royalty-share',
+    name: 'royaltyShare',
+    title: 'Share Percentage',
+    subtitle: 'Percentage of royalties to be paid',
+    placeholder: '8',
+  })
+
+  const [wlstartDate, setwlStartDate] = useState<Date | undefined>(undefined)
+  const [wlendDate, setwlEndDate] = useState<Date | undefined>(undefined)
+
+  const wladdressListState = useAddressListState()
+
+  const wlunitPriceState = useNumberInputState({
+    id: 'unit-price',
+    name: 'unitPrice',
+    title: 'Unit Price',
+    subtitle: 'Price of each tokens in collection',
+    placeholder: '500',
+  })
+
+  const wlmemberLimitState = useNumberInputState({
+    id: 'member-limit',
+    name: 'memberLimit',
+    title: 'Member Limit',
+    subtitle: 'Limit of the whitelisted members',
+    placeholder: '1000',
+  })
+
+  const wlperAddressLimitState = useNumberInputState({
+    id: 'per-address-limit',
+    name: 'perAddressLimit',
+    title: 'Per Address Limit',
+    subtitle: 'Limit of tokens per address',
+    placeholder: '5',
+  })
+
+  const { isLoading, mutate } = useMutation(
+    (event: FormEvent) => {
+      //event.preventDefault()
+    },
+    {
+      onError: (error) => {
+        //toast.error(String(error))
+      },
+    },
+  )
+
+  return (
+    <div>
+      <form className="grid grid-cols-2 p-4 space-x-8" onSubmit={mutate}>
+        <div className="space-y-8">
+          <FormGroup subtitle="Information about your collection" title="Collection Info">
+            <TextInput {...nameState} />
+            <TextInput {...descriptionState} />
+            <TextInput {...imageState} />
+            <TextInput {...externalImageState} />
+          </FormGroup>
+          <FormGroup subtitle="Information about your minting settings" title="Minting Details">
+            <NumberInput {...numberOfTokensState} />
+            <NumberInput {...unitPriceState} />
+            <NumberInput {...perAddressLimitState} />
+            <FormControl htmlId="timestamp" isRequired subtitle="Start time for the minting" title="Start Time">
+              <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
+            </FormControl>
+          </FormGroup>
+          <button {...toggleProps} type="button">
+            Advanced
+          </button>
+          <section {...collapseProps}>
+            <FormGroup subtitle="Information about your whitelisted addresses" title="Whitelist Details">
+              <AddressList
+                entries={wladdressListState.entries}
+                isRequired
+                onAdd={wladdressListState.add}
+                onChange={wladdressListState.update}
+                onRemove={wladdressListState.remove}
+                subtitle="Enter the members you want in your contract"
+                title="Members"
+              />
+            </FormGroup>
+
+            <FormGroup subtitle="Information about your minting settings" title="Minting Details">
+              <NumberInput isRequired {...wlunitPriceState} />
+              <NumberInput isRequired {...wlmemberLimitState} />
+              <NumberInput isRequired {...wlperAddressLimitState} />
+              <FormControl htmlId="start-date" isRequired subtitle="Start time for the minting" title="Start Time">
+                <InputDateTime minDate={new Date()} onChange={(date) => setwlStartDate(date)} value={wlstartDate} />
+              </FormControl>
+              <FormControl htmlId="end-date" isRequired subtitle="End time for the minting" title="End Time">
+                <InputDateTime minDate={new Date()} onChange={(date) => setwlEndDate(date)} value={wlendDate} />
+              </FormControl>
+            </FormGroup>
+            <FormGroup subtitle="Information about royalty" title="Royalty Details">
+              <TextInput {...royaltyPaymentAddressState} />
+              <NumberInput {...royaltyShareState} />
+            </FormGroup>
+          </section>
+        </div>
+        <div className="space-y-8">
+          <div className="relative">
+            <Button className="absolute top-0 right-0" isLoading={isLoading} type="submit">
+              Upload
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}

components/Layout.tsx

@@ -23,9 +23,9 @@ export const Layout = ({ children, metadata = {} }: LayoutProps) => {
       <DefaultAppSeo />
 
       {/* plumbus confetti */}
-      <div className="fixed inset-0 -z-10 pointer-events-none stargaze-gradient-bg opacity-50">
+      {/* <div className="fixed inset-0 -z-10 pointer-events-none stargaze-gradient-bg opacity-50">
         <img alt="plumbus carina-nebula" className="fixed top-0 right-0 w-full h-[calc(100vh+180px)]" src="/carina-nebula.png" />
-      </div>
+      </div> */}
 
       {/* actual layout container */}
       <div className="hidden sm:flex">
@@ -47,7 +47,7 @@ export const Layout = ({ children, metadata = {} }: LayoutProps) => {
         <FaDesktop size={48} />
         <h1 className="text-2xl font-bold">Unsupported Viewport</h1>
         <p>
-        StargazeTools is best viewed on the big screen.
+          StargazeTools is best viewed on the big screen.
           <br />
           Please open StargazeTools on your tablet or desktop browser.
         </p>

components/Sidebar.tsx

@@ -22,14 +22,7 @@ export const Sidebar = () => {
     <SidebarLayout>
       {/* Stargaze brand as home button */}
       <Anchor href="/" onContextMenu={(e) => [e.preventDefault(), router.push('/brand')]}>
-        <div
-          className={clsx(
-            'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-1/2 h-16',
-            'rounded border-2 border-white/20 border-dashed',
-          )}
-        >
-          Home{/* <BrandText className="text-plumbus hover:text-plumbus-light transition" /> */}
-        </div>
+        <img alt="Brand Text" className="w-full" src="/stargaze-text.png" />
       </Anchor>
 
       {/* wallet button */}

components/SidebarLayout.tsx

@@ -16,7 +16,7 @@ export const SidebarLayout = ({ children }: SidebarLayoutProps) => {
       <div
         className={clsx(
           'overflow-auto fixed top-0 left-0 min-w-[250px] max-w-[250px] no-scrollbar',
-          'bg-black/50 border-r-[1px] border-r-plumbus-light',
+          'border-r-[1px] border-r-plumbus-light',
           { 'translate-x-[-230px]': !isOpen },
         )}
       >

contexts/collection.ts

@@ -2,11 +2,10 @@ import create from 'zustand'
 
 export const useCollectionStore = create(() => ({
   name: 'Example',
-  base_token_uri:
-    'ipfs://bafkreiei4e437w3hqf5vy4yqroukx22fag7akbajygettvylzqg6shvkfq',
+  base_token_uri: 'ipfs://bafkreiei4e437w3hqf5vy4yqroukx22fag7akbajygettvylzqg6shvkfq',
   description: 'Lorem',
-  image:
-    'ipfs://bafybeigi3bwpvyvsmnbj46ra4hyffcxdeaj6ntfk5jpic5mx27x6ih2qvq/images/1.png',
+  image: 'ipfs://bafybeigi3bwpvyvsmnbj46ra4hyffcxdeaj6ntfk5jpic5mx27x6ih2qvq/images/1.png',
+  external_image: '',
   num_tokens: 10,
   per_address_limit: 1,
   start_time: '1650982532000000000',
@@ -31,6 +30,10 @@ export const setImage = (value: string) => {
   useCollectionStore.setState({ image: value })
 }
 
+export const setExternalImage = (value: string) => {
+  useCollectionStore.setState({ external_image: value })
+}
+
 export const setNumTokens = (value: number) => {
   useCollectionStore.setState({ num_tokens: value })
 }

package.json

@@ -29,6 +29,7 @@
     "axios": "^0",
     "clsx": "^1",
     "compare-versions": "^4",
+    "daisyui": "^2.19.0",
     "match-sorter": "^6",
     "next": "^12",
     "next-seo": "^4",
@@ -42,10 +43,12 @@
     "react-popper": "^2",
     "react-query": "^3",
     "react-tracked": "^1",
+    "react-collapsed": "^3",
     "scheduler": "^0",
     "zustand": "^3"
   },
   "devDependencies": {
+    "@stargazezone/types": "^0.7.2",
     "@types/node": "^14",
     "@types/react": "^18",
     "@types/react-datetime-picker": "^3",
@@ -78,4 +81,4 @@
   },
   "prettier": "@stargaze-tools/prettier-config",
   "private": true
-}
+}

pages/collections/create.tsx

@@ -0,0 +1,32 @@
+import Anchor from 'components/Anchor'
+import { CollectionInfo } from 'components/CollectionInfo'
+import type { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+
+const UploadPage: NextPage = () => {
+  return (
+    <div>
+      <NextSeo title="Create Collection" />
+
+      <div className="mt-5 space-y-8 text-center">
+        <h1 className="font-heading text-4xl font-bold">Create Collection</h1>
+
+        <p>
+          Make sure you check our{' '}
+          <Anchor className="font-bold text-plumbus hover:underline" href={links['Docs']}>
+            documentation
+          </Anchor>{' '}
+          on how to create your collection
+        </p>
+      </div>
+
+      <hr className="border-white/20" />
+
+      <CollectionInfo />
+    </div>
+  )
+}
+
+export default withMetadata(UploadPage, { center: false })

pages/index.tsx

@@ -1,22 +1,20 @@
 import { HomeCard } from 'components/HomeCard'
 import type { NextPage } from 'next'
-import Brand from 'public/brand/brand.svg'
 import { withMetadata } from 'utils/layout'
 
 const HomePage: NextPage = () => {
   return (
     <section className="px-8 pt-4 pb-16 mx-auto space-y-8 max-w-4xl">
       <div className="flex justify-center items-center py-8 max-w-xl">
-        {/* <Brand className="w-full text-plumbus" /> */}
+        <img alt="Brand Text" className="w-full" src="/stargaze-text.png" />
       </div>
       <h1 className="font-heading text-4xl font-bold">Welcome!</h1>
       <p className="text-xl">
-        Looking for a fast and efficient way to build an NFT collection?
-        Stargaze Tools is the solution.
+        Looking for a fast and efficient way to build an NFT collection? Stargaze Tools is the solution.
         <br />
         <br />
-        Stargaze Tools is built to provide useful smart contract interfaces that
-        helps you build and deploy your own NFT collection in no time.
+        Stargaze Tools is built to provide useful smart contract interfaces that helps you build and deploy your own NFT
+        collection in no time.
       </p>
 
       <br />
@@ -24,18 +22,10 @@ const HomePage: NextPage = () => {
       <br />
 
       <div className="grid gap-8 md:grid-cols-2">
-        <HomeCard
-          title="Create"
-          link="/collection/"
-          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
-        >
+        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/collection/" title="Create">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </HomeCard>
-        <HomeCard
-          title="My Collections"
-          link="/collections"
-          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
-        >
+        <HomeCard className="p-4 -m-4 hover:bg-gray-500/10 rounded" link="/collections" title="My Collections">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </HomeCard>
         {/*
@@ -69,7 +59,7 @@ const HomePage: NextPage = () => {
         */}
       </div>
     </section>
-    )
+  )
 }
 
 export default withMetadata(HomePage, { center: false })

tailwind.config.js

@@ -5,6 +5,10 @@ const plugin = require('tailwindcss/plugin')
 module.exports = {
   content: ['./{components,contexts,hooks,pages,utils}/**/*.{js,cjs,mjs,ts,tsx}'],
 
+  daisyui: {
+    themes: ["dracula"]
+  },
+
   theme: {
     extend: {
       colors: {
@@ -61,5 +65,6 @@ module.exports = {
         },
       })
     }),
+    require("daisyui"),
   ],
 }