Tectonic EVM Web UI

              

---

A web interface for interacting with Solidity implementations of the Tectonic protocol deployed to EVM-compatible chain, enabling users to explore deployments, equity coins, stablecoin mechanics, Trigger redemption operations, and ecosystem information through an intuitive Next.js application.

Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Getting Started
• Local Development
• Build & Deployment
• Environment Variables
• Roadmap
• Contributing

Overview

Tectonic is an EVM-compatible stablecoin infrastructure platform.

The web interface serves as the primary gateway for users to:

• Explore protocol deployments
• Monitor EquityCoins
• Understand Trigger Redemption mechanisms
• Access ecosystem resources

The application is built with Next.js and TypeScript, providing a fast, responsive, and accessible user experience.

Features

• Modern responsive landing page
• Deployment explorer
• EquityCoin information dashboard
• StablePay ecosystem section
• Trigger Redemption information hub
• Community integration
• Mobile-friendly UI
• Fast static deployment support
• SEO-ready metadata structure

Tech Stack

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• ESLint

Project Structure

Tectonic-EVM-WebUI/
├── app/
│   ├── page.tsx                    # Hero page with navigation
│   ├── deployments/
│   │   └── page.tsx                # Deployment dashboard with mint/redeem modal
│   ├── equity/
│   │   └── page.tsx                # Equity coins hub with yield tracking
│   ├── trigger-redemption/
│   │   └── page.tsx                # Trigger redemption monitor & crisis management
│   ├── stablepay/
│   │   └── page.tsx                # StablePay feature with payment flow demo
│   ├── layout.tsx
│   └── globals.css
├── components/
│   └── Navbar.tsx                  # Navigation with wallet connection
├── public/
│   ├── stability.svg
│   ├── Logo.svg
│   └── tectonic-hero.png
├── package.json
├── next.config.ts
├── tsconfig.json
└── README.md

Getting Started

git clone https://github.com/StabilityNexus/Tectonic-EVM-WebUI.git
cd Tectonic-EVM-WebUI
npm install

Local Development

npm run dev

Open:

http://localhost:3000

Web3 Local Testing (Hardhat / Foundry)

When testing smart contract interactions locally, you need to run a local blockchain node (Anvil or Hardhat Node) alongside this Web UI.

1. Start the local blockchain (in your smart contracts directory):

   # If using Foundry
   anvil
   
   # Or if using Hardhat
   npx hardhat node

2. Fund your wallet: The local node generates pre-funded test accounts with 10,000 ETH. Since your personal MetaMask address has 0 ETH on the local network, you must import one of the test private keys to interact with the dApp.
   • Example private key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
   • In MetaMask: Accounts -> Add account or hardware wallet -> Import account -> Paste the private key.
3. Make sure MetaMask is connected to Localhost 8545. If your balance still shows 0 or transactions fail, try resetting the network cache in MetaMask (Settings -> Advanced -> Clear activity tab data).

Build & Deployment

Production Build

npm run build

Start Production Server

npm run start

Export Static Site

npm run build

GitHub Pages Deployment

This repository uses GitHub Pages via .github/workflows/nextjs.yml. Push to main to trigger the deployment workflow.

Environment Variables

NEXT_PUBLIC_APP_NAME=Tectonic
NEXT_PUBLIC_NETWORK=EVM

Add any future protocol-specific variables here.

Roadmap

• Landing page
• Community integration
• StablePay section
• Deployment dashboard
• EquityCoin overview
• Trigger Redemption page
• Protocol analytics
• Public deployment URL
• Multi-chain explorer

Contributing

We welcome community contributions.

1. Fork the repository.
2. Create a feature branch.
3. Implement your changes.
4. Run the following commands:

   npm run build
   npm run lint

5. Submit a Pull Request.

Built with ❤️ by Tectonic.

(back to top)