From 6a6eddb1d78213cdd96bcce77e28c4f3f88d7382 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Fri, 23 Sep 2022 20:36:34 +0300
Subject: [PATCH] Fetch My Collections from the API

---
 pages/collections/create.tsx        | 34 +++++++++---
 pages/collections/myCollections.tsx | 80 ++++++++++++++---------------
 utils/constants.ts                  |  1 +
 3 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx
index 5bd65da..4d5be3f 100644
--- a/pages/collections/create.tsx
+++ b/pages/collections/create.tsx
@@ -29,7 +29,14 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import { upload } from 'services/upload'
 import { compareFileArrays } from 'utils/compareFileArrays'
-import { MINTER_CODE_ID, SG721_CODE_ID, STARGAZE_URL, WHITELIST_CODE_ID } from 'utils/constants'
+import {
+  BLOCK_EXPLORER_URL,
+  MINTER_CODE_ID,
+  NETWORK,
+  SG721_CODE_ID,
+  STARGAZE_URL,
+  WHITELIST_CODE_ID,
+} from 'utils/constants'
 import { withMetadata } from 'utils/layout'
 import { links } from 'utils/links'
 
@@ -472,13 +479,24 @@ const CollectionCreationPage: NextPage = () => {
                 <br />
               </Conditional>
               Transaction Hash: {'  '}
-              <Anchor
-                className="text-stargaze hover:underline"
-                external
-                href={`https://testnet-explorer.publicawesome.dev/stargaze/tx/${transactionHash as string}`}
-              >
-                {transactionHash}
-              </Anchor>
+              <Conditional test={NETWORK === 'testnet'}>
+                <Anchor
+                  className="text-stargaze hover:underline"
+                  external
+                  href={`${BLOCK_EXPLORER_URL}/tx/${transactionHash as string}`}
+                >
+                  {transactionHash}
+                </Anchor>
+              </Conditional>
+              <Conditional test={NETWORK === 'mainnet'}>
+                <Anchor
+                  className="text-stargaze hover:underline"
+                  external
+                  href={`${BLOCK_EXPLORER_URL}/txs/${transactionHash as string}`}
+                >
+                  {transactionHash}
+                </Anchor>
+              </Conditional>
               <Button className="mt-2">
                 <Anchor
                   className="text-white"
diff --git a/pages/collections/myCollections.tsx b/pages/collections/myCollections.tsx
index 794a201..8cf77b6 100644
--- a/pages/collections/myCollections.tsx
+++ b/pages/collections/myCollections.tsx
@@ -1,74 +1,81 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import axios from 'axios'
 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 { useCallback, useEffect, useState } from 'react'
 import { FaRocket, FaSlidersH } from 'react-icons/fa'
-import { STARGAZE_URL } from 'utils/constants'
+import { API_URL, 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 [myCollections, setMyCollections] = useState<any[]>([])
 
-  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'])
-  }
+  useEffect(() => {
+    const fetchCollections = async () => {
+      await axios
+        .get(`${API_URL}/api/v1beta/collections/${wallet.address}`)
+        .then((response) => {
+          const collectionData = response.data
+          setMyCollections(collectionData)
+        })
+        .catch(console.error)
+    }
+    fetchCollections().catch(console.error)
+  }, [wallet.address])
 
   const renderTable = useCallback(() => {
     return (
       <div className="overflow-x-auto w-full">
-        {myCollectionList.length > 0 && (
+        {myCollections.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="pl-36 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) => {
+              {myCollections.map((collection: any, index: any) => {
                 return (
                   <tr key={index}>
-                    <td className="bg-black">
+                    <td className="w-[55%] 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 className="w-28 h-28 mask mask-squircle">
+                            <img
+                              alt="Cover"
+                              src={`https://ipfs.stargaze.zone/ipfs/${(collection.image as string).substring(7)}`}
+                            />
                           </div>
                         </div>
-                        <div>
-                          <div className="ml-2 font-bold">{collection.name}</div>
-                          <div className="text-sm opacity-50" />
+                        <div className="pl-2">
+                          <p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p>
+                          <p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p>
                         </div>
                       </div>
                     </td>
-                    <td className="bg-black">
-                      {collection.address}
+                    <td className="w-[35%] bg-black">
+                      {collection.contractAddress}
                       {/* <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"
-                          href={`/collections/actions?sg721ContractAddress=${collection.address}&minterContractAddress=${collection.minter}`}
+                          href={`/collections/actions?sg721ContractAddress=${collection.contractAddress}&minterContractAddress=${collection.minter}`}
                         >
                           <FaSlidersH />
                         </Anchor>
@@ -90,16 +97,7 @@ const CollectionList: NextPage = () => {
         )}
       </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)
-    }
-  }
+  }, [myCollections, wallet.address])
 
   return (
     <section className="py-6 px-12 space-y-4">
@@ -108,8 +106,8 @@ const CollectionList: NextPage = () => {
       <hr />
       <div>{renderTable()}</div>
       <br />
-      {myCollectionList.length > 0 && <Button onClick={clearMyCollections}>Clear Collection List</Button>}
-      <Conditional test={myCollectionList.length === 0}>
+
+      <Conditional test={myCollections.length === 0}>
         <Alert type="info">You haven&apos;t created any collections so far.</Alert>
       </Conditional>
     </section>
diff --git a/utils/constants.ts b/utils/constants.ts
index f0e9cfe..bf13826 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -4,6 +4,7 @@ export const WHITELIST_CODE_ID = parseInt(process.env.NEXT_PUBLIC_WHITELIST_CODE
 
 export const PINATA_ENDPOINT_URL = process.env.NEXT_PUBLIC_PINATA_ENDPOINT_URL
 export const NETWORK = process.env.NEXT_PUBLIC_NETWORK
+export const API_URL = process.env.NEXT_PUBLIC_API_URL
 export const STARGAZE_URL = process.env.NEXT_PUBLIC_STARGAZE_WEBSITE_URL
 
 export const BLOCK_EXPLORER_URL = process.env.NEXT_PUBLIC_BLOCK_EXPLORER_URL