Merge pull request #1 from iskysun96/gallery

Navbar & Gallery
iskysun96 · Jan 14, 2024 · faa170a · faa170a
2 parents 74fff01 + 5082ae4
commit faa170a
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AlgoKit React Template</title>
+    <title>Blockchain Photo Diary</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,31 +13,32 @@
     "@types/node": "18.17.14",
     "@types/react": "18.2.11",
     "@types/react-dom": "18.2.4",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
     "@vitejs/plugin-react-swc": "3.3.2",
     "autoprefixer": "10.4.14",
     "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "5.0.0",
-    "@typescript-eslint/eslint-plugin": "6.5.0",
-    "@typescript-eslint/parser": "6.5.0",
     "postcss": "^8.4.24",
     "tailwindcss": "3.3.2",
     "ts-node": "10.9.1",
     "typescript": "5.1.6",
     "vite": "4.4.9"
   },
   "dependencies": {
-    "@walletconnect/modal-sign-html": "^2.6.1",
     "@algorandfoundation/algokit-utils": "^4.1.0",
     "@blockshake/defly-connect": "^1.1.6",
     "@daffiwallet/connect": "^1.0.3",
     "@perawallet/connect": "^1.3.1",
     "@txnlab/use-wallet": "^2.1.1",
+    "@walletconnect/modal-sign-html": "^2.6.1",
     "algosdk": "^2.5.0",
     "daisyui": "^3.1.0",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "styled-components": "^6.1.8",
     "tslib": "^2.6.2"
   },
   "scripts": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import { SnackbarProvider } from 'notistack'
 import { useState } from 'react'
 import Gallery from './components/Gallery'
 import Hero from './components/Hero'
+import { Navbar } from './components/Navbar'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -38,6 +39,8 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
 export default function App() {
   const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
   const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
+  const [activeTab, setActiveTab] = useState(0) // 0 = Mint; 1 = Gallery
+
   const { activeAddress } = useWallet()
 
   const toggleWalletModal = () => {
@@ -64,13 +67,10 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
+        <Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
         <div className="flex justify-center items-center flex-col">
-          <Hero />
-          {activeAddress && (
-            <div>
-              <Gallery />
-            </div>
-          )}
+          {activeTab === 0 && <Hero />}
+          {activeTab === 1 && <Gallery />}
         </div>
       </WalletProvider>
     </SnackbarProvider>

diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
@@ -1,12 +1,62 @@
 /*
 Gallery Component
-
-TODO
-- query all nfts with unitName that starts with "dia" from the connected account
-- display the nfts in a grid with Create Date showing at the bottom of the image
 */
+
+import { Asset, useWallet } from '@txnlab/use-wallet'
+import { useEffect } from 'react'
+
+const DIA = 'dia'
+
 const Gallery = () => {
-  return <div>Gallery</div>
+  const wallet = useWallet()
+
+  // TODO: placeholder
+  const fetchContent = () => {
+    return [
+      {
+        imageUrl:
+          'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/The_Great_Wave_off_Kanagawa.jpg/1280px-The_Great_Wave_off_Kanagawa.jpg',
+        date: 'happy 2024-01-13',
+      },
+    ]
+  }
+  const galleryContents = fetchContent()
+
+  let diaAssets: Asset[] = []
+  useEffect(() => {
+    const fetchData = async () => {
+      if (wallet && wallet.activeAddress) {
+        try {
+          const assets = await wallet.getAssets()
+          diaAssets = assets.filter((asset) => asset['unit-name'].startsWith(DIA))
+        } catch (error) {
+          console.error('Error fetching assets:', error)
+        }
+      }
+    }
+
+    fetchData()
+  }, [wallet])
+
+  return (
+    wallet.activeAddress && (
+      <div className="grid grid-cols-4 gap-4 mt-8">
+        {galleryContents.map((item, index) => (
+          <div key={index} className="bg-white p-2 rounded-lg" style={{ border: '2px solid 	#b2d8d8' }}>
+            <img src={item.imageUrl} className="w-full h-48 object-cover rounded-lg" />
+            <p className="text-center text-sm mt-2">{item.date}</p>
+          </div>
+        ))}
+        {/* {diaAssets.map((item, index) => (
+          <div key={index} className="bg-white p-2 rounded-lg" style={{ border: '2px solid 	#b2d8d8' }}>
+            <img src={// TODO: get image url from IPFS} className="w-full h-48 object-cover rounded-lg" />
+            <p className="text-center text-sm mt-2">{item.name}</p>
+            //{' '}
+          </div>
+        ))} */}
+      </div>
+    )
+  )
 }
 
 export default Gallery
diff --git a/src/components/MintNft.tsx b/src/components/MintNft.tsx
@@ -10,7 +10,7 @@ Wallet Connect
 Minting
 - Create drag and drop component for uploading images
 - Create input field for NFT name (one word to describe my emotion of the day)
-- create button to mint NFT
+- Create button to mint NFT
 - Integrate with Pinata to upload image to IPFS
 - Minting should:
   = upload image to IPFS