cleaned code. setup necessary components. TODOs defined

.vscode/settings.json

@@ -2,9 +2,8 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": true
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
   },
-  "dotenv.enableAutocloaking": false,
-
+  "dotenv.enableAutocloaking": false
 }

src/App.tsx

@@ -5,8 +5,8 @@ import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, us
 import algosdk from 'algosdk'
 import { SnackbarProvider } from 'notistack'
 import { useState } from 'react'
-import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
+import Gallery from './components/Gallery'
+import MintNft from './components/mintNft'
 import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
 
 let providersArray: ProvidersArray
@@ -64,42 +64,9 @@ export default function App() {
   return (
     <SnackbarProvider maxSnack={3}>
       <WalletProvider value={walletProviders}>
-        <div className="hero min-h-screen bg-teal-400">
-          <div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
-            <div className="max-w-md">
-              <h1 className="text-4xl">
-                Welcome to <div className="font-bold">AlgoKit 🙂</div>
-              </h1>
-              <p className="py-6">
-                This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
-              </p>
-
-              <div className="grid">
-                <a
-                  data-test-id="getting-started"
-                  className="btn btn-primary m-2"
-                  target="_blank"
-                  href="https://github.com/algorandfoundation/algokit-cli"
-                >
-                  Getting started
-                </a>
-
-                <div className="divider" />
-                <button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
-                  Wallet Connection
-                </button>
-
-                {activeAddress && (
-                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                    Transactions Demo
-                  </button>
-                )}
-              </div>
-
-              <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-              <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-            </div>
-          </div>
+        <div className="flex justify-center items-center flex-col">
+          <MintNft />
+          <Gallery />
         </div>
       </WalletProvider>
     </SnackbarProvider>

src/components/Gallery.tsx

@@ -0,0 +1,12 @@
+/*
+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
+*/
+const Gallery = () => {
+  return <div>Gallery</div>
+}
+
+export default Gallery

src/components/MintNft.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import ConnectWallet from './ConnectWallet'
+
+/*
+NFT Minting / Wallet Connect component
+
+TODO
+
+Wallet Connect
+- Create button to connect wallet
+- once connected, the button disappear and shows the minting component with connect wallet address at the top
+
+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
+- Integrate with Pinata to upload image to IPFS
+- Minting should:
+  = upload image to IPFS
+  - unitName should start with "dia"+ today's date?
+  = NFT name should be the emotion of the day + date (e.g. "happy 2021-09-01")
+*/
+
+const MintNft = () => {
+  const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
+  // const { activeAddress } = useWallet()
+
+  const toggleWalletModal = () => {
+    setOpenWalletModal(!openWalletModal)
+  }
+  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>
+  )
+}
+
+export default MintNft