From f6f24257d54813ab6984e44958f9f8f93ca41f9b Mon Sep 17 00:00:00 2001
From: SaraJane <sarajanedeveloper@gmail.com>
Date: Thu, 15 Jan 2026 13:01:22 +0000
Subject: [PATCH] feat: copy addr, hyperlinks to ALGO/USDC dispenser

---
 .../src/components/Account.tsx                | 45 +++++++++++++++----
 .../src/components/TokenizeAsset.tsx          | 41 +++++++++++++++++
 2 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx
index 0e81154..d3a396e 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useUnifiedWallet } from '../hooks/useUnifiedWallet'
 import { ellipseAddress } from '../utils/ellipseAddress'
 import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
@@ -18,6 +18,7 @@ import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClien
 const Account = () => {
   const { activeAddress } = useUnifiedWallet()
   const algoConfig = getAlgodConfigFromViteEnvironment()
+  const [copied, setCopied] = useState(false)
 
   // Normalize network name for Lora
   const networkName = useMemo(() => {
@@ -33,16 +34,42 @@ const Account = () => {
 
   const loraUrl = `https://lora.algokit.io/${networkName}/account/${address}/`
 
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(address)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch (e) {
+      console.error('Failed to copy address', e)
+    }
+  }
+
   return (
     <div>
-      <a
-        href={loraUrl}
-        target="_blank"
-        rel="noreferrer"
-        className="text-xl text-gray-900 dark:text-slate-100 hover:text-teal-600 dark:hover:text-teal-400 transition font-mono"
-      >
-        Address: {ellipseAddress(address)}
-      </a>
+      <div className="flex items-center gap-2">
+        <a
+          href={loraUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="text-xl text-gray-900 dark:text-slate-100 hover:text-teal-600 dark:hover:text-teal-400 transition font-mono"
+        >
+          Address: {ellipseAddress(address)}
+        </a>
+
+        {/* Copy button */}
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            handleCopy()
+          }}
+          className="inline-flex items-center rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-2 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 transition"
+          title={copied ? 'Copied!' : 'Copy address'}
+        >
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
 
       <div className="text-xl text-gray-900 dark:text-slate-100 mt-2">Network: {networkName}</div>
     </div>
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
index 2ac52ed..1604425 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
@@ -649,6 +649,27 @@ export default function TokenizeAsset() {
           <div>
             <h2 className="text-xl sm:text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Tokenize on Algorand</h2>
             <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">Mint standard ASAs or mint an NFT-style ASA on TestNet.</p>
+            {/* TestNet funding helper */}
+            <div className="mt-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4">
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                <div className="text-sm text-slate-700 dark:text-slate-200">
+                  Need TestNet ALGO to get started? Use the Algorand TestNet Dispenser.
+                  <span className="block text-xs text-slate-500 dark:text-slate-400 mt-1">
+                    Tip: fund the connected address, then refresh your balance.
+                  </span>
+                </div>
+
+                <a
+                  href="https://bank.testnet.algorand.network/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold bg-teal-600 hover:bg-teal-700 text-white shadow-md transition"
+                >
+                  Open Dispenser ↗
+                </a>
+              </div>
+            </div>
+
           </div>
         </div>
       </div>
@@ -1143,6 +1164,26 @@ export default function TokenizeAsset() {
         <div className="mt-12 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-lg p-6 sm:p-8">
           <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Transfer</h3>
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-6">Send ALGO, USDC, or any ASA (including NFTs) to another wallet.</p>
+          {/* TestNet USDC helper */}
+          <div className="mb-6 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <div className="text-sm text-slate-700 dark:text-slate-200">
+                Need TestNet USDC? Use Circle’s faucet, then transfer it like any ASA.
+                <span className="block text-xs text-slate-500 dark:text-slate-400 mt-1">
+                  Note: you may need to opt-in to the USDC asset before receiving it.
+                </span>
+              </div>
+
+              <a
+                href="https://faucet.circle.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold bg-teal-600 hover:bg-teal-700 text-white shadow-md transition"
+              >
+                Open USDC Faucet ↗
+              </a>
+            </div>
+          </div>
 
           {/* Mode selector */}
           <div className="mb-5">