TokenizeRWATemplate
This commit is contained in:
SaraJane
@ -1,76 +1,175 @@
|
||||
// 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 { Link } from 'react-router-dom'
|
||||
|
||||
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)
|
||||
export default function Home() {
|
||||
const { activeAddress } = useWallet()
|
||||
|
||||
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
|
||||
</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 className="bg-white dark:bg-slate-950">
|
||||
{/* Hero Section */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-32">
|
||||
<div className="text-center">
|
||||
<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">
|
||||
RWA Tokenization Platform
|
||||
</div>
|
||||
|
||||
<ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
|
||||
<Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
|
||||
<AppCalls openModal={appCallsDemoModal} setModalState={setAppCallsDemoModal} />
|
||||
<h1 className="mt-4 text-5xl sm:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
|
||||
Tokenize Real-World Assets on Algorand
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
||||
Reference in New Issue
Block a user