🏦 ERC1400 Token Dashboard

Part of the ODW ASSETTECH Legacy RWA / STO Reference Stack

⚡ About This Repository

This is the ERC-1400 Token Dashboard: a Next.js-based admin and ops dashboard for ERC-1400 security tokens. It provides token monitoring, transfers, partition management, document handling, and role-based administrative controls, integrated with the same on-chain contracts used by the rest of the stack.

Back in 2024, the ODW Team built a full Security Token Offering (STO) solution using the ERC‑1400 token standard on a private EVM chain running ConsenSys Quorum. Since then, the ecosystem has evolved: Quorum is no longer actively supported by ConsenSys (with Hyperledger Besu recommended as the successor), and STOs are now more commonly framed under the broader Real‑World Assets (RWA) narrative.

On the token side, ERC‑3643 (T‑REX) and ERC‑1155 have emerged as the most commonly used standards for regulated STO/RWA projects, with ERC‑3643 gaining prominence for its advanced, on‑chain compliance (DID, KYC/AML, transfer restrictions), and ERC‑1155 enabling efficient multi‑asset, multi‑class tokenization.

We are open‑sourcing this repository as a reference implementation to share architecture, design patterns, and integration approaches around ERC‑1400‑based STOs on permissioned EVM chains.

Important: This repository is not intended for production use. A production‑grade RWA/STO system today should:

• Migrate from Quorum → Hyperledger Besu (or another actively maintained EVM execution client), and
• Refactor token logic from ERC‑1400 → ERC‑3643 and/or ERC‑1155, with modern compliance and identity tooling.

---

📚 Repository Series

This repository is part of the ODW ASSETTECH legacy RWA collection:

1. ERC1400 Token Dashboard ← You are here (Frontend Dashboard)
2. STO Backend API (Express.js API with JWT, Wallet Auth)
3. STO Web Client (Next.js Web Interface)
4. ERC1400 Smart Contracts (Solidity Implementation)

Each repository can be explored independently, but together they form a complete STO platform architecture.

---

🎯 Overview

This dashboard enables users to interact with ERC1400 token contracts through a modern, responsive web interface. Key features include:

• Token Management: View balances, transfer tokens, and manage partitions
• Document Management: Upload, view, and manage token documents
• Administrative Functions: Manage controllers, allowlists, and validators
• Wallet Integration: Seamless integration with MetaMask and other Web3 wallets via RainbowKit
• Dark Mode Support: Full dark/light theme support
• Responsive Design: Works on desktop and mobile devices

🛠️ Architecture

Tech Stack

• Framework: Next.js 13.4 (React 18.2)
• UI Library: NextUI 2.1
• Web3: Wagmi 1.4, Ethers.js 6.7, RainbowKit 1.0
• State Management: Zustand 4.4
• Styling: Tailwind CSS 3.3
• Charts: ApexCharts 3.35
• Type Safety: TypeScript 5.2

Project Structure

dashboard-ui/
├── components/          # React components
│   ├── accounts/       # Account and transfer components
│   ├── charts/         # Chart components
│   ├── document/       # Document management components
│   ├── home/           # Home page components
│   ├── layout/         # Layout components (sidebar, navbar)
│   ├── management/     # Admin management components
│   ├── wallet/         # Wallet connection components
│   └── ...
├── config/             # Configuration and state management
├── pages/              # Next.js pages
├── services/           # Business logic and contract interactions
├── typechain/          # Generated TypeScript types for contracts
├── utils/              # Utility functions
└── styles/             # Global styles

Key Components

1. Services Layer (services/)

   • erc1400Services.ts: ERC1400 contract interactions
   • walletServices.ts: Wallet utilities and error handling

2. State Management (config/)

   • configStorage.ts: Zustand stores for theme and wallet state

3. Components

   • Modular, reusable React components
   • Type-safe with TypeScript
   • Responsive design with Tailwind CSS

🚀 Getting Started

Prerequisites

• Node.js 18.x or 20.x
• npm or yarn
• A Web3 wallet (MetaMask recommended)
• Access to an ERC1400 token contract

Installation

1. Clone the repository:

git clone https://github.com/OnDemandWorld/erc1400-dashboard.git
cd erc1400-dashboard

2. Install dependencies:

npm install
# or
yarn install

3. Set up environment variables (see Environment Variables)

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser

⚙️ Configuration

TypeScript Configuration

The project uses strict TypeScript settings. Key configurations:

• strict: true - Enables strict type checking
• noImplicitAny: false - Allows implicit any (consider enabling for better type safety)

ESLint Configuration

Extended ESLint rules for Next.js and TypeScript:

• Warns on any types
• Warns on unused variables
• Restricts console usage (warn/error allowed)

Prettier Configuration

Code formatting with Prettier:

• 2-space indentation
• Semicolons enabled
• 100 character line width
• LF line endings

🔧 Environment Variables

Create a .env.local file in the root directory with the following variables:

# Blockchain Configuration
NEXT_PUBLIC_CHAIN_ID=2023                    # Chain ID (default: 2023)
NEXT_PUBLIC_QUORUM_CHAIN=Quorum             # Chain name
NEXT_PUBLIC_RPC_URL=http://localhost:8545   # RPC endpoint URL
NEXT_PUBLIC_BLOCK_EXPLORER=http://localhost:4000  # Block explorer URL

# Contract Addresses
NEXT_PUBLIC_ERC1400_TOKEN_ADDRESS=0x...     # ERC1400 token contract address

# WalletConnect (Optional)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=...    # Get from https://cloud.walletconnect.com

# Feature Flags
NEXT_PUBLIC_ENABLE_TESTNETS=false           # Enable testnet chains

Required Variables

• NEXT_PUBLIC_ERC1400_TOKEN_ADDRESS: The deployed ERC1400 token contract address
• NEXT_PUBLIC_RPC_URL: RPC endpoint for blockchain interactions
• NEXT_PUBLIC_CHAIN_ID: Network chain ID

Optional Variables

• NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: For WalletConnect integration (defaults to demo ID)
• NEXT_PUBLIC_ENABLE_TESTNETS: Enable testnet support

📝 Scripts

Development

npm run dev          # Start development server

Building

npm run build        # Build for production
npm run start        # Start production server

Code Quality

npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint issues
npm run format       # Format code with Prettier
npm run format:check # Check code formatting
npm run type-check   # Run TypeScript type checking

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project in Vercel
3. Configure environment variables in Vercel dashboard
4. Deploy

Manual Deployment

1. Build the project:

npm run build

2. Start the production server:

npm run start

Environment Variables in Production

Ensure all required environment variables are set in your deployment platform:

• Vercel: Project Settings → Environment Variables
• Netlify: Site Settings → Environment Variables
• Other platforms: Refer to their documentation

🐛 Troubleshooting

Common Issues

Wallet Connection Issues

Problem: Wallet not connecting

• Solution: Ensure MetaMask or another Web3 wallet is installed
• Check that you're on the correct network
• Verify RPC URL is accessible

Transaction Failures

Problem: Transactions failing

• Solution:
  • Check wallet has sufficient balance for gas
  • Verify token contract address is correct
  • Ensure user has required permissions (for admin functions)
  • Check network connectivity

Build Errors

Problem: TypeScript or build errors

• Solution:
  • Run npm run type-check to identify type errors
  • Ensure all environment variables are set
  • Clear .next folder and rebuild: rm -rf .next && npm run build

Environment Variable Issues

Problem: Features not working, undefined values

• Solution:
  • Ensure all NEXT_PUBLIC_* variables are set
  • Restart development server after changing .env.local
  • Check variable names match exactly (case-sensitive)

Debug Mode

Enable debug logging by checking browser console. The app logs:

• Wallet connection status
• Transaction submissions
• Error details

🤝 Contributing

Development Workflow

1. Create a feature branch from main or develop
2. Make your changes
3. Run code quality checks:

   npm run lint
   npm run format:check
   npm run type-check

4. Commit with descriptive messages
5. Push and create a Pull Request

Code Style

• Follow TypeScript best practices
• Use functional components with hooks
• Add JSDoc comments for public functions
• Keep components small and focused
• Use meaningful variable names

Testing

While test infrastructure is being set up, manual testing should cover:

• Wallet connection/disconnection
• Token transfers (all variants)
• Document management operations
• Admin functions (if applicable)
• Responsive design on different screen sizes

📄 License

MIT

---

🌟 Support & Community

If this repository is useful to you as a reference for STO/RWA design, please consider:

• Giving the project a ⭐ star on GitHub
• Watching the repo to follow updates
• Opening issues for questions, ideas, or problems you hit
• Submitting pull requests with improvements or fixes

Your feedback and contributions help us decide how much more to invest in evolving these open‑source building blocks.

---

💼 Work with the ODW Team

ODW ASSETTECH specializes in:

• RWA / STO architecture & solution design
• Frontend development - User interfaces for blockchain applications
• Smart contract engineering (ERC‑3643, ERC‑1155, custom compliance modules)
• Migration of legacy ERC‑1400 / Quorum stacks to Hyperledger Besu and modern standards
• Backend & frontend integration (wallet flows, KYC/AML, dashboards, ops tooling)
• Regulated environments: focusing on compliance‑aware tokenization flows

If you are:

• A financial institution or issuer exploring tokenization,
• A startup building an RWA platform, or
• An engineering team looking to modernize an existing STO stack,

we'd be happy to discuss how we can help.

📧 Contact the ODW Team

• Email: office@odw.ai
• Contact Page: https://ondemandworld.com/contact-us/
• GitHub Issues: Report bugs and request features
• GitHub Discussions: Ask questions and share ideas

---

🔗 Related Repositories in This Series

• ERC1400 Token Dashboard – Next.js dashboard UI for managing ERC‑1400 tokens
• STO Backend API – TypeScript/Express backend for auth, users, and wallet integration
• STO Web Client – Next.js web client for end‑user STO workflows
• ERC1400 Smart Contracts – Solidity implementation of ERC‑1400 and related extensions

This repository is one component of a 4‑repo reference stack. For a fuller picture, explore the other repos in the ODW ASSETTECH organization.

---

Made by the ODW Team – sharing our 2024 STO stack as a reference for today's RWA builders.