diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index 5ec89fb..33dd6cf 100644 --- a/components/Sidebar.tsx +++ b/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 = () => { {/* main navigation routes */} - {routes.map(({ text, href }) => ( + {routes.map(({ text, href, isChild }) => ( { 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[] = 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 => { diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx index f2d24cc..baf11b5 100644 --- a/pages/collections/index.tsx +++ b/pages/collections/index.tsx @@ -27,6 +27,13 @@ const HomePage: NextPage = () => { > Upload your assets, enter collection metadata and deploy your collection. + + View a list of your collections. + { > Execute messages on a collection. - - Query data from a collection. - ) diff --git a/pages/collections/myCollections.tsx b/pages/collections/myCollections.tsx new file mode 100644 index 0000000..148285e --- /dev/null +++ b/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[] = [] + let myCollections: Record | 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 ( +
+ {myCollectionList.length > 0 && ( + + + + + + + + + + {myCollectionList.map((collection, index) => { + return ( + + + + + + + ) + })} + +
Collection NameContract AddressCreation Time +
+
+
+
+ Cover +
+
+
+
{collection.name}
+
+
+
+
+ {collection.address} + {/*
*/} + {/* */} +
{new Date(collection.time).toDateString()} +
+ + + + + + + +
+
+ )} +
+ ) + }, [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 ( +
+ + +
+
{renderTable()}
+
+ {myCollectionList.length > 0 && } + + You haven't created any collections so far. + +
+ ) +} +export default withMetadata(CollectionList, { center: false })