Merge pull request #2 from iskysun96/gallery-integrate

Retrieve NFT info from connected account and display on gallery
iskysun96 · Jan 20, 2024 · f87554f · f87554f
2 parents 69a0924 + 0e96f74
commit f87554f
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 156 deletions.
diff --git a/.github/workflows/checks.yaml b/.github/workflows/checks.yaml
@@ -31,9 +31,6 @@ jobs:
       - name: Run linters
         run: npm run lint
 
-      - name: Run unit tests
-        run: npm run test
-
       - name: Create placeholder .env file
         if: ${{ inputs.run-build }}
         uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main

diff --git a/public/imgs/hero-background.jpg b/public/imgs/hero-background.jpg
diff --git a/src/App.tsx b/src/App.tsx
@@ -37,20 +37,10 @@ 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 = () => {
-    setOpenWalletModal(!openWalletModal)
-  }
-
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
   const algodConfig = getAlgodConfigFromViteEnvironment()
 
   const walletProviders = useInitializeProviders({
@@ -70,10 +60,8 @@ export default function App() {
         {activeAddress ? (
           <div>
             <Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
-            <div className="flex justify-center items-center flex-col">
-              {activeTab === 0 && <Hero />}
-              {activeTab === 1 && <Gallery />}
-            </div>
+            {activeTab === 0 && <Hero />}
+            {activeTab === 1 && <Gallery />}
           </div>
         ) : (
           <Hero />

diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
@@ -1,59 +1,92 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*
 Gallery Component
 */
 
-import { Asset, useWallet } from '@txnlab/use-wallet'
-import { useEffect } from 'react'
+import { useWallet } from '@txnlab/use-wallet'
+import axios from 'axios'
+import { useEffect, useState } from 'react'
+import { getAlgodClient } from '../utils/setupClients'
 
-const DIA = 'dia'
+const PD = 'pd'
 
 const Gallery = () => {
+  const [diaryAssets, setDiaryAssets] = useState<Record<string, any>[]>([])
   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',
-      },
-    ]
+  // Set up algod, Indexer
+  const algodClient = getAlgodClient()
+
+  //get Image Url from metadata Url uploaded on IPFS
+  const getIpfsUrl = async (url: string) => {
+    const slicedUrl = url.slice(7, url.length + 1)
+    const response = await axios.get(`https://ipfs.algonode.xyz/ipfs/${slicedUrl}`)
+    const responseImage = response.data.image
+    const slicedResponseImage = responseImage.slice(7, url.length + 1)
+    return `https://ipfs.algonode.xyz/ipfs/${slicedResponseImage}`
+  }
+
+  const fetchAssetUnitNames = async () => {
+    if (wallet && wallet.activeAddress) {
+      try {
+        const balances = await wallet.getAssets()
+        const diaryAssets: Record<string, any>[] = []
+
+        for (const balance of balances) {
+          const assetInfo = await algodClient.getAssetByID(balance['asset-id']).do()
+          if (assetInfo.params['unit-name'] === undefined) {
+            continue
+          }
+
+          if (assetInfo.params['unit-name'].startsWith(PD)) {
+            const ipfsUrl = await getIpfsUrl(assetInfo.params['url'])
+            assetInfo['image'] = ipfsUrl
+            diaryAssets.push(assetInfo)
+          }
+        }
+        console.log('diaryAssets: ', diaryAssets)
+        return diaryAssets
+      } catch (error) {
+        console.error('Error fetching asset balances:', error)
+        return
+      }
+    }
   }
-  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))
+          const assets = await fetchAssetUnitNames()
+          if (assets === undefined) {
+            return
+          }
+          setDiaryAssets(assets)
         } catch (error) {
           console.error('Error fetching assets:', error)
         }
       }
     }
 
     fetchData()
-  }, [wallet])
+  }, [wallet.activeAddress])
 
   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 className="flex justify-center min-h-screen">
+        {diaryAssets.length > 0 ? (
+          <div className="container grid grid-cols-4 gap-4 mt-8">
+            {diaryAssets.map((item, index) => (
+              <div key={index} className="bg-white p-2 rounded-lg" style={{ border: '2px solid 	#b2d8d8' }}>
+                <img src={diaryAssets[index].image} className="w-full h-48 object-cover rounded-lg" alt="Photo Diary" />
+                <p className="text-center text-sm mt-2">{item.params['name']}</p>
+              </div>
+            ))}
           </div>
-        ))} */}
+        ) : (
+          <span className="loading loading-spinner" />
+        )}
       </div>
     )
   )

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -5,27 +5,29 @@ import MintNft from './MintNft'
 
 const Hero = () => {
   const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openTransactModal, setOpenTransactModal] = useState<boolean>(false)
   const { activeAddress } = useWallet()
 
   const toggleWalletModal = () => {
     setOpenWalletModal(!openWalletModal)
   }
 
-  const toggleTransactModal = () => {
-    setOpenTransactModal(!openTransactModal)
-  }
   return (
-    <div className="hero min-h-screen bg-base-200">
+    <div className="hero min-h-screen" style={{ backgroundImage: "url('../../public/imgs/hero-background.jpg')" }}>
       <div className="hero-content text-center">
-        <div className="max-w-md">
-          <h1 className="text-5xl font-bold">Hello there</h1>
+        <div className="max-w-md text-white">
+          {activeAddress ? (
+            <h1 className="text-3xl font-bold">Upload a photo of the day</h1>
+          ) : (
+            <h1 className="text-7xl font-bold">Keep Your Memories Forever</h1>
+          )}
 
-          <p className="py-6">
-            {activeAddress
-              ? 'Enjoy your permanent photo diary recorded on the Algorand blockchain'
-              : 'Welcome to your Photo Diary on the Blockchain. Connect your wallet to get started.'}
-          </p>
+          <div className="py-6">
+            {activeAddress ? (
+              <p className="text-1xl">We will mint your photo as an NFT and store it on the blockchain.</p>
+            ) : (
+              <p className="text-2xl">Welcome to your Blockchain Photo Diary. Connect your wallet to get started.</p>
+            )}
+          </div>
 
           {activeAddress ? (
             <div>

diff --git a/src/components/MintNft.tsx b/src/components/MintNft.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /*
 NFT Minting / Wallet Connect component
 
@@ -35,7 +36,7 @@ const MintNft = () => {
   const [loading, setLoading] = useState<boolean>(false)
 
   const { enqueueSnackbar } = useSnackbar()
-  const { signer, activeAddress, signTransactions, sendTransactions } = useWallet()
+  const { signer, activeAddress } = useWallet()
 
   const today = new Date()
   const formattedDate = today.toLocaleDateString('en-CA')
@@ -105,7 +106,7 @@ const MintNft = () => {
         decimals: 0,
       })
 
-      const { transaction, confirmation } = await algokit.sendTransaction(
+      const { confirmation } = await algokit.sendTransaction(
         {
           transaction: nftCreateTxn,
           from: signingAccount,

diff --git a/src/components/Transact.tsx b/src/components/Transact.tsx
diff --git a/src/utils/pinata.ts b/src/utils/pinata.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import axios from 'axios'
 import FormData from 'form-data'