Merge pull request #15 from public-awesome/my-collections

Add My Collections & Update navigation

components/Sidebar.tsx

@@ -9,9 +9,11 @@ import { SidebarLayout } from './SidebarLayout'
 import { WalletLoader } from './WalletLoader'
 
 const routes = [
-  { text: 'Create Collection', href: `/collections/create/` },
-  { text: 'Collections', href: `/collections/` },
-  { text: 'Contract Dashboards', href: `/contracts/` },
+  { text: 'Collections', href: `/collections/`, isChild: false },
+  { text: 'Create a Collection', href: `/collections/create/`, isChild: true },
+  { text: 'My Collections', href: `/collections/myCollections/`, isChild: true },
+  { text: 'Collection Actions', href: `/collections/actions/`, isChild: true },
+  { text: 'Contract Dashboards', href: `/contracts/`, isChild: false },
 ]
 
 export const Sidebar = () => {
@@ -29,13 +31,15 @@ export const Sidebar = () => {
       <WalletLoader />
 
       {/* main navigation routes */}
-      {routes.map(({ text, href }) => (
+      {routes.map(({ text, href, isChild }) => (
         <Anchor
           key={href}
           className={clsx(
-            'py-2 px-4 -mx-4 uppercase rounded-lg', // styling
+            'px-4 -mx-5 font-extrabold uppercase rounded-lg', // styling
             'hover:bg-white/5 transition-colors', // hover styling
-            { 'font-bold bg-plumbus hover:bg-plumbus': router.asPath === href }, // active route styling
+            { 'py-0 ml-2 text-sm font-bold': isChild },
+            { 'text-gray hover:text-white': router.asPath !== href && isChild },
+            { 'text-plumbus': router.asPath === href && isChild }, // active route styling
             // { 'text-gray-500 pointer-events-none': disabled }, // disabled route styling
           )}
           href={href}

pages/collections/create.tsx

@@ -37,6 +37,14 @@ import type { UploadMethod } from '../../components/collections/creation/UploadD
 import { ConfirmationModal } from '../../components/ConfirmationModal'
 import { getAssetType } from '../../utils/getAssetType'
 
+export interface CollectionData {
+  name: string
+  address: string
+  minter: string
+  imageURL: string
+  time: number
+}
+
 const CollectionCreationPage: NextPage = () => {
   const wallet = useWallet()
   const { minter: minterContract, whitelist: whitelistContract } = useContracts()
@@ -193,6 +201,41 @@ const CollectionCreationPage: NextPage = () => {
     setTransactionHash(data.transactionHash)
     setMinterContractAddress(data.contractAddress)
     setSg721ContractAddress(data.logs[0].events[3].attributes[2].value)
+    console.log(`ipfs://${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const allCollections: Record<string, CollectionData[]>[] = localStorage['collections']
+      ? JSON.parse(localStorage['collections'])
+      : []
+    console.log('allCollections', allCollections)
+
+    const newCollectionData: CollectionData = {
+      name: collectionDetails?.name as string,
+      address: data.logs[0].events[3].attributes[2].value,
+      minter: data.contractAddress,
+      imageURL: `https://ipfs.stargaze.zone/ipfs/${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`,
+      time: new Date().getTime(),
+    }
+
+    //Get the CollectionData array for the current wallet address
+    const myCollections = allCollections.find((c) => Object.keys(c)[0] === wallet.address)
+    console.log('myCollections', myCollections)
+    if (myCollections === undefined) {
+      //If there is no CollectionData array for the current wallet address, create one in allCollections
+      allCollections.push({ [wallet.address]: [newCollectionData] })
+      //allCollections[allCollections.indexOf(myCollections)] = {[wallet.address]: myCollectionList}
+    } else {
+      //If there is a CollectionData array for the current wallet address, push the new collection data to it in allCollections
+      allCollections[allCollections.indexOf(myCollections)][wallet.address].push(newCollectionData)
+    }
+
+    //List of all collections for the current wallet address
+    const myCollectionList = myCollections ? Object.values(myCollections)[0] : []
+    console.log('myCollectionList', myCollectionList)
+
+    //Update the localStorage
+    localStorage['collections'] = JSON.stringify(allCollections)
+
+    console.log(localStorage['collections'])
   }
 
   const uploadFiles = async (): Promise<string> => {

pages/collections/index.tsx

@@ -27,6 +27,13 @@ const HomePage: NextPage = () => {
         >
           Upload your assets, enter collection metadata and deploy your collection.
         </HomeCard>
+        <HomeCard
+          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
+          link="/collections/myCollections"
+          title="My Collections"
+        >
+          View a list of your collections.
+        </HomeCard>
         <HomeCard
           className="p-4 -m-4 hover:bg-gray-500/10 rounded"
           link="/collections/actions"
@@ -34,13 +41,6 @@ const HomePage: NextPage = () => {
         >
           Execute messages on a collection.
         </HomeCard>
-        <HomeCard
-          className="p-4 -m-4 hover:bg-gray-500/10 rounded"
-          link="/collections/queries"
-          title="Collection Queries"
-        >
-          Query data from a collection.
-        </HomeCard>
       </div>
     </section>
   )

pages/collections/myCollections.tsx

@@ -0,0 +1,119 @@
+import { Alert } from 'components/Alert'
+import { Anchor } from 'components/Anchor'
+import { Button } from 'components/Button'
+import { Conditional } from 'components/Conditional'
+import { ContractPageHeader } from 'components/ContractPageHeader'
+import { useWallet } from 'contexts/wallet'
+import type { NextPage } from 'next'
+import { NextSeo } from 'next-seo'
+import { useCallback, useState } from 'react'
+import { FaRocket, FaSlidersH } from 'react-icons/fa'
+import { STARGAZE_URL } from 'utils/constants'
+import { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+
+import type { CollectionData } from './create'
+
+const CollectionList: NextPage = () => {
+  const wallet = useWallet()
+  const [clearFlag, setClearFlag] = useState(false)
+  let allCollections: Record<string, CollectionData[]>[] = []
+  let myCollections: Record<string, CollectionData[]> | undefined
+  let myCollectionList: CollectionData[] = []
+
+  if (typeof localStorage !== 'undefined') {
+    allCollections = localStorage['collections'] ? JSON.parse(localStorage['collections']) : []
+    myCollections = allCollections.find((c) => Object.keys(c)[0] === wallet.address)
+    myCollectionList = myCollections ? Object.values(myCollections)[0] : []
+    console.log(localStorage['collections'])
+  }
+
+  const renderTable = useCallback(() => {
+    return (
+      <div className="overflow-x-auto w-full">
+        {myCollectionList.length > 0 && (
+          <table className="table w-full">
+            <thead>
+              <tr>
+                <th className="pl-20 text-lg font-bold text-left bg-black">Collection Name</th>
+                <th className="text-lg font-bold bg-black">Contract Address</th>
+                <th className="text-lg font-bold bg-black">Creation Time</th>
+                <th className="bg-black" />
+              </tr>
+            </thead>
+            <tbody>
+              {myCollectionList.map((collection, index) => {
+                return (
+                  <tr key={index}>
+                    <td className="bg-black">
+                      <div className="flex items-center space-x-3">
+                        <div className="avatar">
+                          <div className="w-12 h-12 mask mask-squircle">
+                            <img alt="Cover" src={collection.imageURL} />
+                          </div>
+                        </div>
+                        <div>
+                          <div className="ml-2 font-bold">{collection.name}</div>
+                          <div className="text-sm opacity-50" />
+                        </div>
+                      </div>
+                    </td>
+                    <td className="bg-black">
+                      {collection.address}
+                      {/* <br /> */}
+                      {/* <span className="badge badge-ghost badge-sm"></span> */}
+                    </td>
+                    <td className="bg-black">{new Date(collection.time).toDateString()}</td>
+                    <th className="bg-black">
+                      <div className="flex items-center space-x-8">
+                        <Anchor
+                          className="text-xl text-plumbus"
+                          external
+                          href={`/collections/actions?sg721ContractAddress=${collection.address}&minterContractAddress=${collection.minter}`}
+                        >
+                          <FaSlidersH />
+                        </Anchor>
+
+                        <Anchor
+                          className="text-xl text-plumbus"
+                          external
+                          href={`${STARGAZE_URL}/launchpad/${collection.minter}`}
+                        >
+                          <FaRocket />
+                        </Anchor>
+                      </div>
+                    </th>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+    )
+  }, [clearFlag, wallet.address])
+
+  const clearMyCollections = () => {
+    console.log('Cleared!')
+    if (typeof localStorage !== 'undefined') {
+      localStorage['collections'] = JSON.stringify(allCollections.filter((c) => Object.keys(c)[0] !== wallet.address))
+      myCollectionList = []
+      setClearFlag(!clearFlag)
+    }
+  }
+
+  return (
+    <section className="py-6 px-12 space-y-4">
+      <NextSeo title="My Collections" />
+      <ContractPageHeader description="A list of your collections." link={links.Documentation} title="My Collections" />
+      <hr />
+      <div>{renderTable()}</div>
+      <br />
+      {myCollectionList.length > 0 && <Button onClick={clearMyCollections}>Clear Collection List</Button>}
+      <Conditional test={myCollectionList.length === 0}>
+        <Alert type="info">You haven&apos;t created any collections so far.</Alert>
+      </Conditional>
+    </section>
+  )
+}
+export default withMetadata(CollectionList, { center: false })