Update sidebar & add my collections

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/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,71 @@
+import { Alert } from 'components/Alert'
+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 { withMetadata } from 'utils/layout'
+import { links } from 'utils/links'
+
+const CollectionList: NextPage = () => {
+  const wallet = useWallet()
+
+  const renderImages = useCallback(() => {
+    return (
+      <div className="overflow-x-auto w-full">
+        <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>
+            <tr>
+              <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="Avatar Tailwind CSS Component" src="/pixel.png" />
+                    </div>
+                  </div>
+                  <div>
+                    <div className="ml-2 font-bold">My Collection</div>
+                    <div className="text-sm opacity-50" />
+                  </div>
+                </div>
+              </td>
+              <td className="bg-black">
+                stars1v9fj6mrump74zut0tse65hn4nfzvfdfh4nue0y
+                {/* <br /> */}
+                {/* <span className="badge badge-ghost badge-sm"></span> */}
+              </td>
+              <td className="bg-black">{new Date().toDateString()}</td>
+              <th className="bg-black">
+                <button className="text-lg font-bold text-plumbus btn btn-ghost btn-xs">Details</button>
+              </th>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    )
+  }, [wallet.address])
+
+  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 />
+      <br />
+      <div>{renderImages()}</div>
+      <br />
+      <Conditional test={false}>
+        <Alert type="info">You haven&apos;t created any collections so far.</Alert>
+      </Conditional>
+    </section>
+  )
+}
+export default withMetadata(CollectionList, { center: false })