TokenizeRWATemplate
This commit is contained in:
SaraJane
@ -18,6 +18,8 @@
|
|||||||
"notistack": "^3.0.1",
|
"notistack": "^3.0.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-icons": "^5.5.0",
|
||||||
|
"react-router-dom": "^7.11.0",
|
||||||
"tslib": "^2.6.2"
|
"tslib": "^2.6.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -5045,6 +5047,19 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cookie": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/core-util-is": {
|
"node_modules/core-util-is": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||||
@ -10106,6 +10121,15 @@
|
|||||||
"react": "^18.3.1"
|
"react": "^18.3.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-icons": {
|
||||||
|
"version": "5.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
|
||||||
|
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-is": {
|
"node_modules/react-is": {
|
||||||
"version": "18.3.1",
|
"version": "18.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||||
@ -10123,6 +10147,44 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "7.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
|
||||||
|
"integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cookie": "^1.0.1",
|
||||||
|
"set-cookie-parser": "^2.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "7.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
|
||||||
|
"integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-router": "7.11.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||||
@ -10506,6 +10568,12 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/set-cookie-parser": {
|
||||||
|
"version": "2.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||||
|
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/set-function-length": {
|
"node_modules/set-function-length": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||||
|
|||||||
@ -13,24 +13,24 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@algorandfoundation/algokit-client-generator": "^5.0.0",
|
"@algorandfoundation/algokit-client-generator": "^5.0.0",
|
||||||
|
"@playwright/test": "^1.35.0",
|
||||||
|
"@types/jest": "29.5.2",
|
||||||
"@types/node": "^18.17.14",
|
"@types/node": "^18.17.14",
|
||||||
"@types/react": "^18.2.11",
|
"@types/react": "^18.2.11",
|
||||||
"@types/react-dom": "^18.2.4",
|
"@types/react-dom": "^18.2.4",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
||||||
|
"@typescript-eslint/parser": "^7.0.2",
|
||||||
"@vitejs/plugin-react": "^4.2.1",
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"eslint-plugin-prettier": "^5.1.3",
|
"eslint-plugin-prettier": "^5.1.3",
|
||||||
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
"playwright": "^1.35.0",
|
||||||
"@typescript-eslint/parser": "^7.0.2",
|
|
||||||
"postcss": "^8.4.24",
|
"postcss": "^8.4.24",
|
||||||
"tailwindcss": "3.3.2",
|
"tailwindcss": "3.3.2",
|
||||||
"ts-jest": "^29.1.1",
|
"ts-jest": "^29.1.1",
|
||||||
"@types/jest": "29.5.2",
|
|
||||||
"ts-node": "^10.9.1",
|
"ts-node": "^10.9.1",
|
||||||
"typescript": "^5.1.6",
|
"typescript": "^5.1.6",
|
||||||
"@playwright/test": "^1.35.0",
|
|
||||||
"playwright": "^1.35.0",
|
|
||||||
"vite": "^5.0.0",
|
"vite": "^5.0.0",
|
||||||
"vite-plugin-node-polyfills": "^0.22.0"
|
"vite-plugin-node-polyfills": "^0.22.0"
|
||||||
},
|
},
|
||||||
@ -45,6 +45,8 @@
|
|||||||
"notistack": "^3.0.1",
|
"notistack": "^3.0.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-icons": "^5.5.0",
|
||||||
|
"react-router-dom": "^7.11.0",
|
||||||
"tslib": "^2.6.2"
|
"tslib": "^2.6.2"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
|
import { SupportedWallet, WalletId, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
|
||||||
import { SnackbarProvider } from 'notistack'
|
import { SnackbarProvider } from 'notistack'
|
||||||
|
import { BrowserRouter, Routes, Route } from 'react-router-dom'
|
||||||
import Home from './Home'
|
import Home from './Home'
|
||||||
|
import Layout from './Layout'
|
||||||
|
import TokenizePage from './TokenizePage'
|
||||||
import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
|
import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
|
||||||
|
|
||||||
let supportedWallets: SupportedWallet[]
|
let supportedWallets: SupportedWallet[]
|
||||||
@ -17,13 +20,7 @@ if (import.meta.env.VITE_ALGOD_NETWORK === 'localnet') {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
} else {
|
} else {
|
||||||
supportedWallets = [
|
supportedWallets = [{ id: WalletId.DEFLY }, { id: WalletId.PERA }, { id: WalletId.EXODUS }]
|
||||||
{ id: WalletId.DEFLY },
|
|
||||||
{ id: WalletId.PERA },
|
|
||||||
{ id: WalletId.EXODUS },
|
|
||||||
// If you are interested in WalletConnect v2 provider
|
|
||||||
// refer to https://github.com/TxnLab/use-wallet for detailed integration instructions
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
@ -49,7 +46,14 @@ export default function App() {
|
|||||||
return (
|
return (
|
||||||
<SnackbarProvider maxSnack={3}>
|
<SnackbarProvider maxSnack={3}>
|
||||||
<WalletProvider manager={walletManager}>
|
<WalletProvider manager={walletManager}>
|
||||||
<Home />
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route element={<Layout />}>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/tokenize" element={<TokenizePage />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
</WalletProvider>
|
</WalletProvider>
|
||||||
</SnackbarProvider>
|
</SnackbarProvider>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,76 +1,175 @@
|
|||||||
// src/components/Home.tsx
|
|
||||||
import { useWallet } from '@txnlab/use-wallet-react'
|
import { useWallet } from '@txnlab/use-wallet-react'
|
||||||
import React, { useState } from 'react'
|
import { Link } from 'react-router-dom'
|
||||||
import ConnectWallet from './components/ConnectWallet'
|
|
||||||
import Transact from './components/Transact'
|
|
||||||
import AppCalls from './components/AppCalls'
|
|
||||||
|
|
||||||
interface HomeProps {}
|
export default function Home() {
|
||||||
|
|
||||||
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 { activeAddress } = useWallet()
|
||||||
|
|
||||||
const toggleWalletModal = () => {
|
|
||||||
setOpenWalletModal(!openWalletModal)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleDemoModal = () => {
|
|
||||||
setOpenDemoModal(!openDemoModal)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleAppCallsModal = () => {
|
|
||||||
setAppCallsDemoModal(!appCallsDemoModal)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="hero min-h-screen bg-teal-400">
|
<div className="bg-white dark:bg-slate-950">
|
||||||
<div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
|
{/* Hero Section */}
|
||||||
<div className="max-w-md">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-32">
|
||||||
<h1 className="text-4xl">
|
<div className="text-center">
|
||||||
Welcome to <div className="font-bold">AlgoKit 🙂</div>
|
<div className="inline-block mb-4 px-3 py-1 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 text-sm font-semibold rounded-full">
|
||||||
</h1>
|
RWA Tokenization Platform
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeAddress && (
|
|
||||||
<button data-test-id="appcalls-demo" className="btn m-2" onClick={toggleAppCallsModal}>
|
|
||||||
Contract Interactions Demo
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
|
<h1 className="mt-4 text-5xl sm:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
|
||||||
<Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
|
Tokenize Real-World Assets on Algorand
|
||||||
<AppCalls openModal={appCallsDemoModal} setModalState={setAppCallsDemoModal} />
|
</h1>
|
||||||
|
|
||||||
|
<p className="mt-6 text-lg sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Create Algorand Standard Assets (ASA) with built-in compliance features. Perfect for founders prototyping RWA solutions.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Link
|
||||||
|
to="/tokenize"
|
||||||
|
className={`px-8 py-3 rounded-lg font-semibold transition text-white shadow-md ${
|
||||||
|
activeAddress ? 'bg-teal-600 hover:bg-teal-700' : 'bg-slate-400 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Start Tokenizing
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<a
|
||||||
|
className="px-8 py-3 border-2 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100 rounded-lg font-semibold hover:border-slate-400 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
href="https://developer.algorand.org/docs/get-details/asa/"
|
||||||
|
>
|
||||||
|
Learn about ASAs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!activeAddress && (
|
||||||
|
<p className="mt-6 text-slate-500 dark:text-slate-400">Connect your wallet using the button in the top-right to get started.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<div className="bg-slate-50 dark:bg-slate-900 py-20 sm:py-28">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white">How It Works</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{/* Step 1 */}
|
||||||
|
<div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 hover:shadow-lg transition">
|
||||||
|
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 font-bold text-lg mb-4">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-slate-900 dark:text-white mb-3">Connect Wallet</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">Use Pera, Defly, Exodus, or KMD on localnet. One click to connect.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2 */}
|
||||||
|
<div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 hover:shadow-lg transition">
|
||||||
|
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 font-bold text-lg mb-4">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-slate-900 dark:text-white mb-3">Create ASA</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">
|
||||||
|
Define asset properties: name, symbol, supply, and optional metadata URL.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3 */}
|
||||||
|
<div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-8 hover:shadow-lg transition">
|
||||||
|
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-teal-100 dark:bg-teal-900/30 text-teal-600 dark:text-teal-400 font-bold text-lg mb-4">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-slate-900 dark:text-white mb-3">Track Assets</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">
|
||||||
|
View your created assets in a local history table (stored in your browser).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Highlight */}
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28">
|
||||||
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white mb-6">Compliance-Ready Features</h2>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
<li className="flex gap-3">
|
||||||
|
<span className="text-blue-600 font-bold text-xl">✓</span>
|
||||||
|
<span className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Manager Role:</strong> Update asset settings
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex gap-3">
|
||||||
|
<span className="text-blue-600 font-bold text-xl">✓</span>
|
||||||
|
<span className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Freeze Account:</strong> Restrict transfers
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex gap-3">
|
||||||
|
<span className="text-blue-600 font-bold text-xl">✓</span>
|
||||||
|
<span className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Clawback Authority:</strong> Recover tokens if needed
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex gap-3">
|
||||||
|
<span className="text-blue-600 font-bold text-xl">✓</span>
|
||||||
|
<span className="text-gray-700 dark:text-gray-300">
|
||||||
|
<strong>Metadata Support:</strong> Link off-chain documentation
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-100 dark:bg-slate-800 rounded-lg p-8">
|
||||||
|
<div className="bg-white dark:bg-slate-700 rounded border border-slate-300 dark:border-slate-600 p-6">
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 font-mono">Asset Configuration Example</p>
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Name:</span>{' '}
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-white">Real Estate Token</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Symbol:</span>{' '}
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-white">PROPERTY</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Total Supply:</span>{' '}
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-white">1,000,000</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Decimals:</span>{' '}
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-white">2</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Manager:</span>{' '}
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-white">Your Wallet</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<div className="bg-teal-600 dark:bg-teal-700 text-white">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 text-center">
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to get started?</h2>
|
||||||
|
<p className="text-lg text-teal-100 mb-8 max-w-2xl mx-auto">
|
||||||
|
Launch your first RWA token in minutes. No complicated setup, no hidden fees.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
to="/tokenize"
|
||||||
|
className={`inline-block px-8 py-3 rounded-lg font-semibold transition ${
|
||||||
|
activeAddress
|
||||||
|
? 'bg-white text-teal-600 dark:bg-slate-800 dark:text-teal-400 hover:bg-slate-100 dark:hover:bg-slate-700 shadow-md'
|
||||||
|
: 'bg-teal-400 text-white cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Create Your First Asset
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Home
|
|
||||||
|
|||||||
116
projects/TokenizeRWATemplate-frontend/src/Layout.tsx
Normal file
116
projects/TokenizeRWATemplate-frontend/src/Layout.tsx
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
import { useWallet } from '@txnlab/use-wallet-react'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { NavLink, Outlet } from 'react-router-dom'
|
||||||
|
import ConnectWallet from './components/ConnectWallet'
|
||||||
|
import ThemeToggle from './components/ThemeToggle'
|
||||||
|
|
||||||
|
export default function Layout() {
|
||||||
|
const [openWalletModal, setOpenWalletModal] = useState(false)
|
||||||
|
const { activeAddress } = useWallet()
|
||||||
|
|
||||||
|
const toggleWalletModal = () => setOpenWalletModal(!openWalletModal)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">
|
||||||
|
{/* Navbar */}
|
||||||
|
<nav className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-50 shadow-sm">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
|
||||||
|
<NavLink
|
||||||
|
to="/"
|
||||||
|
className="text-2xl font-bold text-slate-900 dark:text-white hover:text-teal-600 dark:hover:text-teal-400 transition"
|
||||||
|
>
|
||||||
|
TokenizeRWA
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
<div className="hidden sm:flex items-center gap-6">
|
||||||
|
<NavLink
|
||||||
|
to="/"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 font-medium transition ${isActive ? 'text-slate-900 dark:text-slate-100 border-b-2 border-teal-600' : ''}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/tokenize"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 font-medium transition ${isActive ? 'text-slate-900 dark:text-slate-100 border-b-2 border-teal-600' : ''}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Tokenize
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<ThemeToggle />
|
||||||
|
<button
|
||||||
|
onClick={toggleWalletModal}
|
||||||
|
className="px-4 py-2 bg-teal-600 text-white rounded-lg font-medium hover:bg-teal-700 transition text-sm shadow-sm"
|
||||||
|
>
|
||||||
|
{activeAddress ? 'Wallet Connected' : 'Connect Wallet'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Main */}
|
||||||
|
<main className="flex-1">
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-slate-900 dark:bg-slate-950 text-slate-300 dark:text-slate-400 border-t border-slate-800 dark:border-slate-800">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
<div className="grid gap-8 md:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<div className="text-xl font-bold text-white">TokenizeRWA</div>
|
||||||
|
<p className="mt-3 text-sm leading-relaxed">
|
||||||
|
A lightweight proof-of-concept template for tokenizing real-world assets on Algorand.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-white mb-4">Resources</div>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<NavLink to="/tokenize" className="hover:text-white transition">
|
||||||
|
Tokenize an Asset
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="hover:text-white transition"
|
||||||
|
href="https://developer.algorand.org/docs/get-details/asa/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
ASA Documentation →
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a className="hover:text-white transition" href="https://lora.algokit.io/testnet" target="_blank" rel="noreferrer">
|
||||||
|
Lora Explorer →
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-white mb-4">About</div>
|
||||||
|
<p className="text-sm leading-relaxed">
|
||||||
|
A POC template for founders. For production, add compliance workflows, identity verification, and audit logs.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 pt-8 border-t border-gray-800 text-xs text-gray-400 flex flex-col sm:flex-row gap-2 sm:justify-between">
|
||||||
|
<span>© {new Date().getFullYear()} TokenizeRWA. All rights reserved.</span>
|
||||||
|
<span>Built with AlgoKit + Algorand</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
11
projects/TokenizeRWATemplate-frontend/src/TokenizePage.tsx
Normal file
11
projects/TokenizeRWATemplate-frontend/src/TokenizePage.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import TokenizeAsset from './components/TokenizeAsset'
|
||||||
|
|
||||||
|
export default function TokenizePage() {
|
||||||
|
return (
|
||||||
|
<div className="bg-white dark:bg-slate-950 min-h-screen py-12">
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<TokenizeAsset />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
const THEME_KEY = 'tokenize_theme'
|
||||||
|
type Theme = 'light' | 'dark'
|
||||||
|
|
||||||
|
function getInitialTheme(): Theme {
|
||||||
|
const saved = localStorage.getItem(THEME_KEY)
|
||||||
|
if (saved === 'light' || saved === 'dark') return saved
|
||||||
|
const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
|
||||||
|
return prefersDark ? 'dark' : 'light'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ThemeToggle() {
|
||||||
|
const [theme, setTheme] = useState<Theme>(() => getInitialTheme())
|
||||||
|
const [mounted, setMounted] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true)
|
||||||
|
// Apply theme immediately on mount to prevent flash
|
||||||
|
const t = getInitialTheme()
|
||||||
|
if (t === 'dark') {
|
||||||
|
document.documentElement.classList.add('dark')
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark')
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!mounted) return
|
||||||
|
// Apply Tailwind dark mode
|
||||||
|
if (theme === 'dark') {
|
||||||
|
document.documentElement.classList.add('dark')
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark')
|
||||||
|
}
|
||||||
|
localStorage.setItem(THEME_KEY, theme)
|
||||||
|
}, [theme, mounted])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition"
|
||||||
|
onClick={() => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))}
|
||||||
|
title="Toggle light/dark mode"
|
||||||
|
>
|
||||||
|
{theme === 'dark' ? '🌙' : '☀️'}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,12 +1,9 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
daisyui: {
|
plugins: [],
|
||||||
themes: ['lofi'],
|
|
||||||
logs: false,
|
|
||||||
},
|
|
||||||
plugins: [require('daisyui')],
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user