+
+
Select wallet provider
+
+
+
+
+ Choose the wallet you want to connect. Supported: Pera, Defly, LocalNet (KMD), and others.
+
+
+
{activeAddress && (
<>
-
-
+
+
+ {/* Wallet Info */}
+
+ {activeWallet && (
+
+
Connected Wallet
+
{getWalletDisplayName(activeWallet)}
+
+ )}
+
+
+
)}
@@ -28,47 +95,54 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
wallets?.map((wallet) => (
))}
-
+
+
{activeAddress && (
)}
-
+
)
}
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/ThemeToggle.tsx b/projects/TokenizeRWATemplate-frontend/src/components/ThemeToggle.tsx
index 6644433..439c8bc 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/ThemeToggle.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/ThemeToggle.tsx
@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react'
const THEME_KEY = 'tokenize_theme'
type Theme = 'light' | 'dark'
+/**
+ * Get initial theme preference from localStorage or system preference
+ */
function getInitialTheme(): Theme {
const saved = localStorage.getItem(THEME_KEY)
if (saved === 'light' || saved === 'dark') return saved
@@ -10,6 +13,11 @@ function getInitialTheme(): Theme {
return prefersDark ? 'dark' : 'light'
}
+/**
+ * ThemeToggle Component
+ * Allows users to toggle between light and dark modes
+ * Persists theme preference to localStorage and applies Tailwind's dark class
+ */
export default function ThemeToggle() {
const [theme, setTheme] = useState
(() => getInitialTheme())
const [mounted, setMounted] = useState(false)
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
index d1d3852..21a41dd 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
@@ -6,6 +6,10 @@ import { AiOutlineInfoCircle, AiOutlineLoading3Quarters } from 'react-icons/ai'
import { BsCoin } from 'react-icons/bs'
import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
+/**
+ * Type for created assets stored in browser localStorage
+ * Captures all ASA configuration including compliance fields
+ */
type CreatedAsset = {
assetId: number
assetName: string
@@ -23,6 +27,9 @@ type CreatedAsset = {
const STORAGE_KEY = 'tokenize_assets'
const LORA_BASE = 'https://lora.algokit.io/testnet'
+/**
+ * Load created assets from browser localStorage
+ */
function loadAssets(): CreatedAsset[] {
try {
const raw = localStorage.getItem(STORAGE_KEY)
@@ -32,6 +39,10 @@ function loadAssets(): CreatedAsset[] {
}
}
+/**
+ * Save a newly created asset to localStorage
+ * Returns updated asset list with new asset at the top
+ */
function persistAsset(asset: CreatedAsset): CreatedAsset[] {
const existing = loadAssets()
const next = [asset, ...existing]
@@ -39,6 +50,12 @@ function persistAsset(asset: CreatedAsset): CreatedAsset[] {
return next
}
+/**
+ * TokenizeAsset Component
+ * Main form for creating Algorand Standard Assets (ASAs)
+ * Collects basic and advanced compliance metadata
+ * Persists created assets to localStorage for tracking
+ */
export default function TokenizeAsset() {
const [assetName, setAssetName] = useState('Tokenized Coffee Membership')
const [unitName, setUnitName] = useState('COFFEE')
@@ -84,6 +101,10 @@ export default function TokenizeAsset() {
const isWholeNumber = (v: string) => /^\d+$/.test(v)
+ /**
+ * Handle ASA creation with validation and on-chain transaction
+ * Adjusts total supply by decimals and saves asset to localStorage
+ */
const handleTokenize = async () => {
if (!transactionSigner || !activeAddress) {
enqueueSnackbar('Please connect your wallet first.', { variant: 'warning' })