feat: add environment-based networks and swap navigation (#102, #103)

[dicethedev]

Summary

Implemented environment-based network configuration to ensure testnet (Base Sepolia) is only available in development and mainnet (Base Mainnet) is only available in production. The application now automatically detects and switches to the correct network based on the NEXT_PUBLIC_ENV environment variable.

Changes Made

1. Centralized Chain Configuration (lib/chains.config.ts)

• Created a new configuration file that manages supported chains based on environment
• Introduced NEXT_PUBLIC_ENV variable with two modes: dev and prod
• Dev mode: Only Base Sepolia (chain ID: 84532)
• Prod mode: Only Base Mainnet (chain ID: 8453)
• Exported helper constants and functions for environment detection

2. Updated Wagmi Configuration (lib/wagmi.ts)

• Modified to use supportedChains from environment config instead of hardcoded chains
• Dynamically generates transports based on active environment
• Ensures only environment-appropriate networks are exposed to users

3. Environment-Aware Contract Configuration (config/contracts.ts)

• Updated contract addresses to filter based on supported chains
• Added helper functions that gracefully handle unsupported chains
• Maintains all contract addresses but only exposes relevant ones per environment

4. Environment-Aware Token Configuration (config/tokens.ts)

• Token lists now filtered based on active environment
• Added fallback mechanisms for unsupported chain requests
• Improved error handling with helpful console warnings

5. Chain Validation Hook (hooks/useValidChain.ts)

• Utility hook for checking if connected chain is supported
• Returns validation status and active chain information
• Used throughout components for conditional rendering

6. Updated UI Components

• CustomConnectButton: Added environment indicator (DEV badge) and improved network mismatch messaging
• SwapCard: Added network mismatch warnings and auto-switch functionality
• Footer: Faucet link now only visible in dev mode on Base Sepolia

7. Environment Variables

• .env.local: NEXT_PUBLIC_ENV=dev (for local development) or NEXT_PUBLIC_ENV=prod (for production deployment)

Testing

Dev Mode (NEXT_PUBLIC_ENV=dev)

• ✅ Only Base Sepolia available in network selector
• ✅ Faucet link visible in footer
• ✅ DEV badge shown on network button
• ✅ All features work with testnet tokens and contracts

Prod Mode (NEXT_PUBLIC_ENV=prod)

• ✅ Only Base Mainnet available in network selector
• ✅ No faucet link in footer
• ✅ No DEV indicators shown
• ✅ All features work with mainnet tokens and contracts

Deployment Checklist

• Set NEXT_PUBLIC_ENV=prod in Vercel/hosting production environment variables
• Set NEXT_PUBLIC_ENV=dev in Vercel/hosting preview/staging environment variables
• Verify .env.local is in .gitignore

Benefits

• Security: Prevents accidental testnet usage in production
• User Experience: Users never see irrelevant networks
• Automatic: No manual network switching required
• Testing: Easy to test both environments locally
• Maintainable: Single source of truth for network configuration
• Extensible: Easy to add more networks or environments in the future

Breaking Changes

None - existing functionality preserved, just restricted to appropriate environments

Files Changed

lib/chains.config.ts                     (new)
lib/wagmi.ts                            (modified)
config/contracts.ts                     (modified)
config/tokens.ts                        (modified)
hooks/useAutoSwitchChain.ts            (new)
hooks/useValidChain.ts                 (new)
components/CustomConnectButton.tsx      (modified)
components/Footer.tsx                   (modified)
app/views/trade/components/SwapCard.tsx (modified)
.env.example                           (new)

Related Issues

Closes #102 #103

[vercel]

@dicethedev is attempting to deploy a commit to the Own Protocol Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
own-frontend	Ready	Preview, Comment	Jan 26, 2026 6:59pm

[swetshaw]

Make swap the first item in the dropdown