My Collections UI & collection storage logic update

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/myCollections.tsx

@@ -1,68 +1,116 @@
 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 } from 'react'
+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[] = []
 
-  const renderImages = useCallback(() => {
+  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">
-        <table className="table w-full">
+        {myCollectionList.length > 0 && (
-          <thead>
+          <table className="table w-full">
-            <tr>
+            <thead>
-              <th className="pl-20 text-lg font-bold text-left bg-black">Collection Name</th>
+              <tr>
-              <th className="text-lg font-bold bg-black">Contract Address</th>
+                <th className="pl-20 text-lg font-bold text-left bg-black">Collection Name</th>
-              <th className="text-lg font-bold bg-black">Creation Time</th>
+                <th className="text-lg font-bold bg-black">Contract Address</th>
-              <th className="bg-black" />
+                <th className="text-lg font-bold bg-black">Creation Time</th>
-            </tr>
+                <th className="bg-black" />
-          </thead>
+              </tr>
-          <tbody>
+            </thead>
-            <tr>
+            <tbody>
-              <td className="bg-black">
+              {myCollectionList.map((collection, index) => {
-                <div className="flex items-center space-x-3">
+                return (
-                  <div className="avatar">
+                  <tr key={index}>
-                    <div className="w-12 h-12 mask mask-squircle">
+                    <td className="bg-black">
-                      <img alt="Avatar Tailwind CSS Component" src="/pixel.png" />
+                      <div className="flex items-center space-x-3">
-                    </div>
+                        <div className="avatar">
-                  </div>
+                          <div className="w-12 h-12 mask mask-squircle">
-                  <div>
+                            <img alt="Cover" src={collection.imageURL} />
-                    <div className="ml-2 font-bold">My Collection</div>
+                          </div>
-                    <div className="text-sm opacity-50" />
+                        </div>
-                  </div>
+                        <div>
-                </div>
+                          <div className="ml-2 font-bold">{collection.name}</div>
-              </td>
+                          <div className="text-sm opacity-50" />
-              <td className="bg-black">
+                        </div>
-                stars1v9fj6mrump74zut0tse65hn4nfzvfdfh4nue0y
+                      </div>
-                {/* <br /> */}
+                    </td>
-                {/* <span className="badge badge-ghost badge-sm"></span> */}
+                    <td className="bg-black">
-              </td>
+                      {collection.address}
-              <td className="bg-black">{new Date().toDateString()}</td>
+                      {/* <br /> */}
-              <th className="bg-black">
+                      {/* <span className="badge badge-ghost badge-sm"></span> */}
-                <button className="text-lg font-bold text-plumbus btn btn-ghost btn-xs">Details</button>
+                    </td>
-              </th>
+                    <td className="bg-black">{new Date(collection.time).toDateString()}</td>
-            </tr>
+                    <th className="bg-black">
-          </tbody>
+                      <div className="flex items-center space-x-8">
-        </table>
+                        <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>
     )
-  }, [wallet.address])
+  }, [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 />
-      <div>{renderImages()}</div>
+      {myCollectionList.length > 0 && <Button onClick={clearMyCollections}>Clear Collection List</Button>}
-      <br />
+      <Conditional test={myCollectionList.length === 0}>
-      <Conditional test={false}>
         <Alert type="info">You haven&apos;t created any collections so far.</Alert>
       </Conditional>
     </section>