first frontend commit

.github/workflows/hackalgo-frontend-cd.yaml

@@ -20,11 +20,17 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
+          cache: npm
+          cache-dependency-path: projects/hackalgo-frontend/package-lock.json
 
       - name: Install algokit
         run: pipx install algokit
 
+      - name: Install frontend dependencies
+        working-directory: projects/hackalgo-frontend
+        run: npm ci
+
       - name: Bootstrap dependencies
         run: algokit project bootstrap all --project-name 'hackalgo-frontend'
 

docs/ABI.md

@@ -0,0 +1,33 @@
+# Algo-Mint Smart Contract ABI (ARC-4 / ARC-19)
+
+## Global State (read-only)
+- `creator`: address – the person who minted the NFTs
+- `total_nfts`: uint64 – number of NFTs minted (e.g., 10)
+- `total_pct_bps`: uint64 – total % of earnings offered, in basis points (e.g., 500 = 5%)
+- `duration_years`: uint64 – contract active years (e.g., 3)
+- `start_quarter`: uint64 – quarter index when contract started (e.g., 20261)
+
+## Methods
+
+### mint_future_nft(axfer: pay) -> void
+- Called by creator only, once.
+- Sends ALGO to cover minimum balance requirement.
+- Mints the entire series of NFTs (ARC-19) with metadata URI.
+
+### buy_nft(asset_id: uint64, axfer: pay) -> void
+- Investor calls this to purchase a specific NFT.
+- Payment is forwarded to the creator’s address.
+- Transfers the NFT from creator to investor.
+
+### report_income(quarter: uint64, income_amount: uint64) -> void
+- Called by creator only, once per quarter.
+- `income_amount` in microAlgos or stablecoin units (we’ll use microAlgos for demo).
+- Computes `payout_per_nft = (income_amount * pct_per_nft_bps) / 10000`
+- Stores the total pending payout for each NFT holder.
+
+### claim_payout(asset_id: uint64) -> void
+- Any NFT holder can call to claim their accumulated payouts.
+- Transfers ALGO from contract account to caller.
+
+### get_pending_payout(asset_id: uint64, address: address) -> uint64
+- Read-only view method to check how much is claimable.

projects/hackalgo-frontend/src/Home.tsx

@@ -1,74 +1,52 @@
-// src/components/Home.tsx
 import { useWallet } from '@txnlab/use-wallet-react'
 import React, { useState } from 'react'
 import ConnectWallet from './components/ConnectWallet'
-import Transact from './components/Transact'
-import AppCalls from './components/AppCalls'
+import CreatorPage from './pages/CreatorPage'
+import GalleryPage from './pages/GalleryPage'
 
 interface HomeProps {}
 
 const Home: React.FC<HomeProps> = () => {
   const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
-  const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
-  const [appCallsDemoModal, setAppCallsDemoModal] = useState<boolean>(false)
   const { activeAddress } = useWallet()
+  const [activeTab, setActiveTab] = useState<'creator' | 'gallery'>('creator')
 
   const toggleWalletModal = () => {
     setOpenWalletModal(!openWalletModal)
   }
 
-  const toggleDemoModal = () => {
-    setOpenDemoModal(!openDemoModal)
-  }
-
-  const toggleAppCallsModal = () => {
-    setAppCallsDemoModal(!appCallsDemoModal)
-  }
-
   return (
-    <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
+    <div className="min-h-screen bg-base-200">
+      <div className="navbar bg-base-100 shadow-sm">
+        <div className="navbar-start">
+          <div className="text-lg font-bold">Algo-Mint</div>
+        </div>
+        <div className="navbar-center">
+          <div className="tabs tabs-boxed">
+            <button className={`tab ${activeTab === 'creator' ? 'tab-active' : ''}`} onClick={() => setActiveTab('creator')}>
+              Creator
+            </button>
+            <button className={`tab ${activeTab === 'gallery' ? 'tab-active' : ''}`} onClick={() => setActiveTab('gallery')}>
+              Gallery
             </button>
-
-            {activeAddress && (
-              <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
-                Transactions Demo
-              </button>
-            )}
-
-            {activeAddress && (
-              <button data-test-id="appcalls-demo" className="btn m-2" onClick={toggleAppCallsModal}>
-                Contract Interactions Demo
-              </button>
-            )}
           </div>
-
-          <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
-          <Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
-          <AppCalls openModal={appCallsDemoModal} setModalState={setAppCallsDemoModal} />
+        </div>
+        <div className="navbar-end">
+          <button data-test-id="connect-wallet" className="btn btn-sm" onClick={toggleWalletModal}>
+            {activeAddress ? 'Wallet connected' : 'Connect wallet'}
+          </button>
         </div>
       </div>
+
+      <div className="max-w-5xl mx-auto p-4">
+        {activeTab === 'creator' ? (
+          <CreatorPage onRequestWalletConnect={toggleWalletModal} />
+        ) : (
+          <GalleryPage onRequestWalletConnect={toggleWalletModal} />
+        )}
+      </div>
+
+      <ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
     </div>
   )
 }

projects/hackalgo-frontend/src/assets/asset_ids.json

@@ -0,0 +1,4 @@
+{
+  "assetIds": [1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010]
+}
+