wallet connect/disconnect. hero section. image upload

src/App.tsx

@@ -6,7 +6,7 @@ import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
 import { useState } from 'react'
 import Gallery from './components/Gallery'
-import MintNft from './components/mintNft'
+import Hero from './components/Hero'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -65,8 +65,12 @@ export default function App() {
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
         <div className="flex justify-center items-center flex-col">
-          <MintNft />
-          <Gallery />
+          <Hero />
+          {activeAddress && (
+            <div>
+              <Gallery />
+            </div>
+          )}
         </div>
       </WalletProvider>
     </SnackbarProvider>

src/components/Hero.tsx

@@ -0,0 +1,40 @@
+import { useWallet } from '@txnlab/use-wallet'
+import { useState } from 'react'
+import ConnectWallet from './ConnectWallet'
+import MintNft from './mintNft'
+
+const Hero = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+  return (
+    <div className="hero min-h-screen bg-base-200">
+      <div className="hero-content text-center">
+        <div className="max-w-md">
+          <h1 className="text-5xl font-bold">Hello there</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>
+            <button
+              className="btn m-2 bg-green-500 rounded border-none hover:bg-green-600 transition-colors duration-300"
+              onClick={toggleWalletModal}
+            >
+              {activeAddress ? 'Disconnect' : 'Connect Wallet'}
+            </button>
+            <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+          </div>
+          {activeAddress && <MintNft />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero

src/components/MintNft.tsx

@@ -1,6 +1,3 @@
-import { useState } from 'react'
-import ConnectWallet from './ConnectWallet'
-
 /*
 NFT Minting / Wallet Connect component
 
@@ -21,22 +18,68 @@ Minting
   = NFT name should be the emotion of the day + date (e.g. "happy 2021-09-01")
 */
 
+import { useEffect, useState } from 'react'
+
 const MintNft = () => {
-  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  // const { activeAddress } = useWallet()
+  const [nftImage, setNftImage] = useState<File>()
+  const [nftImageUrl, setNftImageUrl] = useState<string>('')
+  const [nftName, setNftName] = useState<string>('')
+
+  // store user nft image file upload to CharityFormData
+  const handleFileUpload = (e: { target: { files: FileList | null } }) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      setNftImage(file)
+      const reader = new FileReader()
+      reader.onload = () => {
+        setNftImageUrl(reader.result as string)
+      }
+      reader.readAsDataURL(file)
+    }
+  }
 
-  const toggleWalletModal = () => {
-    setOpenWalletModal(!openWalletModal)
+  const handleTextInput = (e: { target: { value: string } }) => {
+    setNftName(e.target.value)
   }
+
+  useEffect(() => {
+    console.log(nftImage)
+    console.log(nftImageUrl)
+  }, [nftImage, nftImageUrl])
+
   return (
-    <div>
-      <button
-        className="btn m-2 bg-green-500 rounded border-none hover:bg-green-600 transition-colors duration-300"
-        onClick={toggleWalletModal}
-      >
-        Connect Wallet
-      </button>
-      <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
+    <div className="max-w-xl mt-4 mb-4">
+      {nftImage ? (
+        <div className="flex flex-col">
+          <img src={nftImageUrl} alt="Fundraiser" />
+          <input type="text" className="rounded mt-2 mb-2" placeholder="Enter NFT Name" onChange={handleTextInput} />
+          <button>Create Photo Diary</button>
+        </div>
+      ) : (
+        <label className="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none">
+          <span className="flex items-center space-x-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6 text-gray-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+              />
+            </svg>
+            <span className="font-medium text-gray-600">
+              Drop files to Attach, or
+              <span className="text-blue-600 underline"> browse</span>
+            </span>
+          </span>
+          <input type="file" name="file_upload" className="hidden" onChange={handleFileUpload} />
+        </label>
+      )}
     </div>
   )
 }