TokenizeRWATemplate

2025-12-31 12:33:58 +00:00
parent 93e3f09667
commit 203580ffb0
9 changed files with 849 additions and 82 deletions
--- a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
@ -0,0 +1,421 @@
+import { AlgorandClient } from '@algorandfoundation/algokit-utils'
+import { useWallet } from '@txnlab/use-wallet-react'
+import { useSnackbar } from 'notistack'
+import { useEffect, useMemo, useState } from 'react'
+import { AiOutlineInfoCircle, AiOutlineLoading3Quarters } from 'react-icons/ai'
+import { BsCoin } from 'react-icons/bs'
+import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
+
+type CreatedAsset = {
+  assetId: number
+  assetName: string
+  unitName: string
+  total: string
+  decimals: string
+  url?: string
+  manager?: string
+  reserve?: string
+  freeze?: string
+  clawback?: string
+  createdAt: string
+}
+
+const STORAGE_KEY = 'tokenize_assets'
+const LORA_BASE = 'https://lora.algokit.io/testnet'
+
+function loadAssets(): CreatedAsset[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? (JSON.parse(raw) as CreatedAsset[]) : []
+  } catch {
+    return []
+  }
+}
+
+function persistAsset(asset: CreatedAsset): CreatedAsset[] {
+  const existing = loadAssets()
+  const next = [asset, ...existing]
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+  return next
+}
+
+export default function TokenizeAsset() {
+  const [assetName, setAssetName] = useState<string>('Tokenized Coffee Membership')
+  const [unitName, setUnitName] = useState<string>('COFFEE')
+  const [total, setTotal] = useState<string>('1000')
+  const [decimals, setDecimals] = useState<string>('0')
+  const [url, setUrl] = useState<string>('')
+
+  const [showAdvanced, setShowAdvanced] = useState<boolean>(false)
+  const [manager, setManager] = useState<string>('')
+  const [reserve, setReserve] = useState<string>('')
+  const [freeze, setFreeze] = useState<string>('')
+  const [clawback, setClawback] = useState<string>('')
+
+  const [loading, setLoading] = useState<boolean>(false)
+  const [createdAssets, setCreatedAssets] = useState<CreatedAsset[]>([])
+
+  const { transactionSigner, activeAddress } = useWallet()
+  const { enqueueSnackbar } = useSnackbar()
+
+  const algodConfig = getAlgodConfigFromViteEnvironment()
+  const algorand = useMemo(() => AlgorandClient.fromConfig({ algodConfig }), [algodConfig])
+
+  useEffect(() => {
+    setCreatedAssets(loadAssets())
+  }, [])
+
+  useEffect(() => {
+    if (activeAddress && !manager) setManager(activeAddress)
+  }, [activeAddress, manager])
+
+  const resetDefaults = () => {
+    setAssetName('Tokenized Coffee Membership')
+    setUnitName('COFFEE')
+    setTotal('1000')
+    setDecimals('0')
+    setUrl('')
+    setShowAdvanced(false)
+    setManager(activeAddress ?? '')
+    setReserve('')
+    setFreeze('')
+    setClawback('')
+  }
+
+  const isWholeNumber = (v: string) => /^\d+$/.test(v)
+
+  const handleTokenize = async () => {
+    if (!transactionSigner || !activeAddress) {
+      enqueueSnackbar('Please connect your wallet first.', { variant: 'warning' })
+      return
+    }
+
+    if (!assetName || !unitName) {
+      enqueueSnackbar('Please enter an asset name and symbol.', { variant: 'warning' })
+      return
+    }
+    if (!isWholeNumber(total)) {
+      enqueueSnackbar('Total supply must be a whole number.', { variant: 'warning' })
+      return
+    }
+    if (!isWholeNumber(decimals)) {
+      enqueueSnackbar('Decimals must be a whole number (0–19).', { variant: 'warning' })
+      return
+    }
+
+    const d = Number(decimals)
+    if (Number.isNaN(d) || d < 0 || d > 19) {
+      enqueueSnackbar('Decimals must be between 0 and 19.', { variant: 'warning' })
+      return
+    }
+
+    try {
+      setLoading(true)
+      enqueueSnackbar('Tokenizing asset (creating ASA)...', { variant: 'info' })
+
+      const onChainTotal = BigInt(total) * 10n ** BigInt(d)
+
+      const createResult = await algorand.send.assetCreate({
+        sender: activeAddress,
+        signer: transactionSigner,
+        total: onChainTotal,
+        decimals: d,
+        assetName,
+        unitName,
+        url: url || undefined,
+        defaultFrozen: false,
+        manager: manager || undefined,
+        reserve: reserve || undefined,
+        freeze: freeze || undefined,
+        clawback: clawback || undefined,
+      })
+
+      const assetId = createResult.assetId
+
+      const newEntry: CreatedAsset = {
+        assetId: Number(assetId),
+        assetName: String(assetName),
+        unitName: String(unitName),
+        total: String(total), // human total as string
+        decimals: String(decimals), // decimals as string
+        url: url ? String(url) : undefined,
+        manager: manager ? String(manager) : undefined,
+        reserve: reserve ? String(reserve) : undefined,
+        freeze: freeze ? String(freeze) : undefined,
+        clawback: clawback ? String(clawback) : undefined,
+        createdAt: new Date().toISOString(),
+      }
+
+      const next = persistAsset(newEntry)
+      setCreatedAssets(next)
+
+      enqueueSnackbar(`✅ Success! Asset ID: ${assetId}`, {
+        variant: 'success',
+        action: () =>
+          assetId ? (
+            <a
+              href={`${LORA_BASE}/asset/${assetId}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ textDecoration: 'underline', marginLeft: 8 }}
+            >
+              View on Lora ↗
+            </a>
+          ) : null,
+      })
+
+      resetDefaults()
+    } catch (error) {
+      console.error(error)
+      enqueueSnackbar('Failed to tokenize asset (ASA creation failed).', { variant: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const canSubmit = !!assetName && !!unitName && !!total && !loading && !!activeAddress
+
+  return (
+    <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-lg p-6 sm:p-8">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          <span className="inline-flex h-12 w-12 items-center justify-center rounded-lg bg-teal-100 dark:bg-teal-900/30">
+            <BsCoin className="text-2xl text-teal-600 dark:text-teal-400" />
+          </span>
+          <div>
+            <h2 className="text-xl sm:text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Tokenize an Asset (Mint ASA)</h2>
+            <p className="text-sm text-slate-600 dark:text-slate-400 mt-1">Create a standard ASA on TestNet. Perfect for RWA POCs.</p>
+          </div>
+        </div>
+      </div>
+
+      {loading && (
+        <div className="relative h-1 w-full mt-5 overflow-hidden rounded bg-slate-200 dark:bg-slate-700">
+          <div className="absolute inset-y-0 left-0 w-1/3 animate-[loading_1.2s_ease-in-out_infinite] bg-teal-600 dark:bg-teal-500" />
+          <style>{`
+            @keyframes loading {
+              0%   { transform: translateX(-120%); }
+              50%  { transform: translateX(60%); }
+              100% { transform: translateX(220%); }
+            }
+          `}</style>
+        </div>
+      )}
+
+      <div className={`mt-6 ${loading ? 'opacity-50' : ''}`}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Asset Name</label>
+            <input
+              type="text"
+              className="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 border border-slate-300 dark:border-slate-600 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-200 dark:focus:ring-teal-900/30 px-4 py-2 transition"
+              value={assetName}
+              onChange={(e) => setAssetName(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Symbol</label>
+            <input
+              type="text"
+              className="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 border border-slate-300 dark:border-slate-600 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-200 dark:focus:ring-teal-900/30 px-4 py-2 transition"
+              value={unitName}
+              onChange={(e) => setUnitName(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Total Supply</label>
+            <input
+              type="number"
+              min={1}
+              className="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 border border-slate-300 dark:border-slate-600 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-200 dark:focus:ring-teal-900/30 px-4 py-2 transition"
+              value={total}
+              onChange={(e) => setTotal(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
+              <span>Decimals</span>
+              <div className="group relative">
+                <AiOutlineInfoCircle className="text-slate-400 cursor-help hover:text-slate-600 dark:hover:text-slate-300" />
+                <div className="invisible group-hover:visible bg-slate-900 dark:bg-slate-800 text-white dark:text-slate-200 text-xs rounded px-2 py-1 whitespace-nowrap absolute bottom-full left-0 mb-1 z-10">
+                  Decimals controls fractional units. 0 = whole units only.
+                </div>
+              </div>
+            </label>
+            <input
+              type="number"
+              min={0}
+              max={19}
+              className="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 border border-slate-300 dark:border-slate-600 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-200 dark:focus:ring-teal-900/30 px-4 py-2 transition"
+              value={decimals}
+              onChange={(e) => setDecimals(e.target.value)}
+            />
+          </div>
+
+          <div className="md:col-span-2">
+            <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
+              <span>Metadata URL (optional)</span>
+              <div className="group relative">
+                <AiOutlineInfoCircle className="text-slate-400 cursor-help hover:text-slate-600 dark:hover:text-slate-300" />
+                <div className="invisible group-hover:visible bg-slate-900 dark:bg-slate-800 text-white dark:text-slate-200 text-xs rounded px-2 py-1 whitespace-nowrap absolute bottom-full left-0 mb-1 z-10">
+                  A public link describing the asset (JSON, webpage, or doc).
+                </div>
+              </div>
+            </label>
+            <input
+              type="url"
+              className="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 border border-slate-300 dark:border-slate-600 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-200 dark:focus:ring-teal-900/30 px-4 py-2 transition"
+              placeholder="https://example.com/metadata.json"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button
+            type="button"
+            onClick={() => setShowAdvanced((s) => !s)}
+            className="flex items-center gap-2 text-sm font-medium text-primary hover:underline transition"
+          >
+            <span>{showAdvanced ? 'Hide advanced options' : 'Show advanced options'}</span>
+            <span className={`transition-transform ${showAdvanced ? 'rotate-180' : ''}`}>▾</span>
+          </button>
+          {showAdvanced && (
+            <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-5">
+              {[
+                {
+                  label: 'Manager',
+                  tip: 'The manager can update or reconfigure asset settings. Often set to the issuer wallet.',
+                  value: manager,
+                  setValue: setManager,
+                  placeholder: 'Defaults to your wallet address',
+                },
+                {
+                  label: 'Reserve',
+                  tip: 'Reserve may hold non-circulating supply depending on your design. Leave blank to disable.',
+                  value: reserve,
+                  setValue: setReserve,
+                  placeholder: 'Optional address',
+                },
+                {
+                  label: 'Freeze',
+                  tip: 'Freeze can freeze/unfreeze holdings (useful for compliance). Leave blank to disable.',
+                  value: freeze,
+                  setValue: setFreeze,
+                  placeholder: 'Optional address',
+                },
+                {
+                  label: 'Clawback',
+                  tip: 'Clawback can revoke tokens from accounts (recovery/compliance). Leave blank to disable.',
+                  value: clawback,
+                  setValue: setClawback,
+                  placeholder: 'Optional address',
+                },
+              ].map((f) => (
+                <div key={f.label}>
+                  <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
+                    <span>{f.label}</span>
+                    <div className="group relative">
+                      <AiOutlineInfoCircle className="text-slate-400 cursor-help hover:text-slate-600 dark:hover:text-slate-300" />
+                      <div className="invisible group-hover:visible bg-slate-900 dark:bg-slate-800 text-white dark:text-slate-200 text-xs rounded px-2 py-1 whitespace-nowrap absolute bottom-full left-0 mb-1 z-10">
+                        {f.tip}
+                      </div>
+                    </div>
+                  </label>
+                  <input
+                    type="text"
+                    className="w-full rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 border border-slate-300 dark:border-slate-600 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-200 dark:focus:ring-teal-900/30 px-4 py-2 transition"
+                    placeholder={f.placeholder}
+                    value={f.value}
+                    onChange={(e) => f.setValue(e.target.value)}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-8 flex flex-col sm:flex-row gap-3 sm:justify-end">
+          <button
+            type="button"
+            className={`px-6 py-3 rounded-lg font-semibold transition ${canSubmit ? 'bg-teal-600 hover:bg-teal-700 text-white shadow-md' : 'bg-slate-300 text-slate-500 cursor-not-allowed dark:bg-slate-700 dark:text-slate-400'}`}
+            onClick={handleTokenize}
+            disabled={!canSubmit}
+          >
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <AiOutlineLoading3Quarters className="animate-spin" />
+                Creating…
+              </span>
+            ) : (
+              'Tokenize Asset'
+            )}
+          </button>
+        </div>
+
+        <div className="mt-10">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-bold text-slate-900 dark:text-white">My Created Assets</h3>
+            <button
+              type="button"
+              className="px-3 py-1 text-xs bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-lg font-medium transition"
+              onClick={() => {
+                localStorage.removeItem(STORAGE_KEY)
+                setCreatedAssets([])
+              }}
+            >
+              Clear
+            </button>
+          </div>
+
+          <div className="overflow-x-auto border border-slate-200 dark:border-slate-700 rounded-lg">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800">
+                  <th className="text-left px-4 py-3 font-semibold text-slate-900 dark:text-white">Asset ID</th>
+                  <th className="text-left px-4 py-3 font-semibold text-slate-900 dark:text-white">Name</th>
+                  <th className="text-left px-4 py-3 font-semibold text-slate-900 dark:text-white">Symbol</th>
+                  <th className="text-left px-4 py-3 font-semibold text-slate-900 dark:text-white">Supply</th>
+                  <th className="text-left px-4 py-3 font-semibold text-slate-900 dark:text-white">Decimals</th>
+                </tr>
+              </thead>
+              <tbody>
+                {createdAssets.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="text-center px-4 py-6 text-slate-500 dark:text-slate-400">
+                      No assets created yet. Mint one to see it here.
+                    </td>
+                  </tr>
+                ) : (
+                  createdAssets.map((a) => (
+                    <tr
+                      key={`${a.assetId}-${a.createdAt}`}
+                      className="border-b border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/50 cursor-pointer transition"
+                      onClick={() => window.open(`${LORA_BASE}/asset/${a.assetId}`, '_blank', 'noopener,noreferrer')}
+                      title="Open in Lora explorer"
+                    >
+                      <td className="font-mono text-xs px-4 py-3 text-slate-700 dark:text-slate-300">{a.assetId}</td>
+                      <td className="px-4 py-3 text-slate-900 dark:text-white">{a.assetName}</td>
+                      <td className="font-mono px-4 py-3 text-slate-700 dark:text-slate-300">{a.unitName}</td>
+                      <td className="font-mono px-4 py-3 text-slate-700 dark:text-slate-300">{a.total}</td>
+                      <td className="font-mono px-4 py-3 text-slate-700 dark:text-slate-300">{a.decimals}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          <p className="mt-3 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-2">
+            <AiOutlineInfoCircle />
+            This list is stored locally in your browser (localStorage) to keep the template simple.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}