Casper Interop

Cross-Chain Bridge & Token Swap Platform for Casper Network

Casper Interop is a comprehensive cross-chain interoperability platform built for the Casper Network Hackathon. It enables users to bridge assets between Casper and other blockchain networks, swap tokens, and manage their multi-chain DeFi activities seamlessly.

🌟 Features

🔗 Cross-Chain Bridge

Multi-Chain Support: Bridge assets between Casper and 7 major EVM networks
Supported Networks: Ethereum Sepolia, Arbitrum Sepolia, Optimism Sepolia, Base Sepolia, zkSync Era Sepolia, Linea Sepolia, Scroll Sepolia
Fast Transactions: Bridge completions typically under 5 minutes
Secure Transactions: Multi-signature validation and enterprise-grade security
Auto Network Detection: Automatic chain switching for connected wallets

🔄 Token Swap

Instant Swaps: Swap CSPR, wETH, USDT, and USDC with minimal fees
Low Fees: Only 0.3% swap fee with optimized exchange rates
Slippage Control: Customizable slippage tolerance settings
Real-time Rates: Live price feeds and rate calculations

👛 Wallet Integration

Casper Wallets: Native support via CSPR.click SDK
- Casper Wallet
- Ledger Hardware Wallet
- MetaMask Snap
EVM Wallets: Full MetaMask and EVM wallet support
Multi-Wallet Support: Connect multiple wallets simultaneously
Balance Auto-refresh: Real-time balance updates every 15 seconds

💧 Testnet Faucet

Free CSPR Tokens: Get testnet CSPR for development and testing
Rate Limited: Prevents abuse while enabling development
Instant Distribution: Quick token distribution for testing

📊 Transaction Management

Complete History: Track all bridge and swap transactions
Status Tracking: Real-time transaction status updates
Explorer Integration: Direct links to blockchain explorers
Export Data: Download transaction history for record keeping

🚀 Quick Start

Prerequisites

Node.js 16+
pnpm (recommended) or npm
MetaMask or compatible EVM wallet
Casper wallet (optional, can be created in-app)

Installation

Clone the repository

git clone https://github.com/myspace253/Casper-Interop.git
cd casper-interop

Install dependencies
```
pnpm install
# or
npm install
```

Set up environment variables

cp .env.example .env.local

Configure your environment variables:

# Optional: CSPR.cloud API Key for enhanced balance fetching
CSPR_CLOUD_API_KEY=your-cspr-cloud-api-key-here

# Next.js Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_CASPER_TESTNET_RPC=https://node.testnet.cspr.cloud/rpc
NEXT_PUBLIC_CASPER_TESTNET_EXPLORER=https://testnet.cspr.live

Run the development server
```
pnpm dev
# or
npm run dev
```
Open your browser Navigate to http://localhost:3000

🏗️ Architecture

Tech Stack

Frontend: Next.js 16, React 19, TypeScript
Styling: Tailwind CSS, shadcn/ui components
Blockchain Integration: CSPR.click SDK, EVM wallets
API: Next.js API routes with Casper RPC integration
Icons: Lucide React, custom icons

Project Structure

casper-interop/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   └── casper/        # Casper blockchain API
│   ├── bridge/            # Bridge interface page
│   ├── swap/              # Swap interface page
│   ├── faucet/            # Faucet page
│   ├── history/           # Transaction history
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── bridge-card.tsx   # Bridge interface
│   ├── swap-card.tsx     # Swap interface
│   └── ...               # Other components
├── lib/                   # Core utilities
│   ├── casper-config.ts  # Casper network configuration
│   ├── cspr-click-context.tsx  # Casper wallet context
│   ├── evm-wallet-context.tsx  # EVM wallet context
│   └── ...               # Other utilities
├── hooks/                # Custom React hooks
└── public/               # Static assets

Core Components

Wallet Integration (`lib/cspr-click-context.tsx`)

CsprClickProvider: React context for Casper wallet management
Features: Connection status, balance tracking, transaction signing
Auto-refresh: Real-time balance updates with 15-second intervals
Multi-provider: Support for multiple Casper wallet providers

EVM Wallet Integration (`lib/evm-wallet-context.tsx`)

EVMWalletProvider: React context for EVM wallet management
Chain Support: 7 testnet chains with automatic configuration
Network Switching: Automatic chain detection and switching
Balance Tracking: Real-time ETH and token balance monitoring

Cross-Chain Bridge (`components/bridge-card.tsx`)

Dual Wallet Support: Works with both Casper and EVM wallets
Smart Address Management: Auto-fill destination addresses
Fee Estimation: Real-time gas and bridge fee calculations
Status Tracking: Comprehensive transaction status updates

Token Swap (`components/swap-card.tsx`)

Multi-Token Support: CSPR, wETH, USDT, USDC
Rate Calculation: Real-time exchange rate calculations
Slippage Settings: Customizable slippage tolerance
Gas Estimation: Automatic gas cost calculations

🔧 API Routes

Casper Blockchain APIs

/api/casper/balance: Fetch account balance from Casper testnet
/api/casper/account: Get account information
/api/casper/deploys: Submit and track deploys
/api/casper/transfers: Handle token transfers
/api/casper/status: Get network status

API Features

Fallback Support: Automatic fallback to RPC if API key unavailable
Error Handling: Comprehensive error handling and logging
Rate Limiting: Built-in rate limiting to prevent abuse
Caching: Smart caching for improved performance

🌐 Supported Networks

Casper Network

Network: Casper Testnet
Chain ID: casper-test
RPC: https://node.testnet.cspr.cloud/rpc
Explorer: https://testnet.cspr.live

EVM Networks (Testnets)

Network	Chain ID	Explorer	Status
Ethereum Sepolia	11155111	Sepolia Etherscan	✅
Arbitrum Sepolia	421614	Sepolia Arbiscan	✅
Optimism Sepolia	11155420	Sepolia Optimism	✅
Base Sepolia	84532	Sepolia Basescan	✅
zkSync Era Sepolia	300	Sepolia zkSync Explorer	✅
Linea Sepolia	59141	Sepolia LineaScan	✅
Scroll Sepolia	534351	Sepolia Scrollscan	✅

💰 Supported Tokens

Token	Symbol	Decimals	Type	Icon
Casper	CSPR	9	Native	🔴
Wrapped Ether	wETH	18	ERC-20	🔷
Tether USD	USDT	6	ERC-20	💵
USD Coin	USDC	6	ERC-20	💲

🛠️ Development

Available Scripts

# Development
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server
pnpm lint         # Run ESLint

# Type Checking
pnpm type-check   # Run TypeScript compiler check

Environment Setup

Install Required Wallets
- Casper Wallet (browser extension)
- MetaMask (browser extension)
Configure Testnet Networks
- Add Casper testnet to your wallet
- Configure EVM testnets in MetaMask
Get Testnet Tokens
- Visit the built-in faucet at /faucet
- Request CSPR from official testnet faucets

Key Configuration Files

lib/casper-config.ts: Network and token configurations
next.config.mjs: Next.js configuration
tailwind.config.ts: Tailwind CSS configuration
components.json: shadcn/ui configuration

🔒 Security Features

Wallet Integration: Secure wallet connections only
Transaction Validation: Client-side transaction validation
Error Handling: Comprehensive error handling and user feedback
Rate Limiting: API rate limiting to prevent abuse
Network Verification: Automatic network verification
Slippage Protection: Configurable slippage tolerance

📈 Performance

Fast Loading: Next.js static generation where possible
Efficient Updates: Smart balance refresh with 15-second intervals
Optimized Images: Next.js image optimization
Tree Shaking: Automatic bundle optimization
Caching: Strategic API response caching

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Code Style

Use TypeScript for all new code
Follow existing naming conventions
Add JSDoc comments for complex functions
Ensure all tests pass before submitting

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Casper Network for the innovative blockchain technology
CSPR.click for wallet integration SDK
shadcn/ui for beautiful UI components
Next.js team for the excellent framework
Tailwind CSS for the utility-first CSS framework

📞 Support

Documentation: docs.casper-interop.com
Discord: Casper Network Discord
Twitter: @CasperInterop
Email: support@casper-interop.com

📊 Statistics

Built with ❤️ for the Casper Network Hackathon 2024

Disclaimer: This is a demonstration application for the Casper Network Hackathon. Do not use for mainnet transactions.

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
components.json		components.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

myspace253/Casper-Interop

Folders and files

Latest commit

History

Repository files navigation