✨ Add Network Switching Support (Testnet/Mainnet) #37
Description
Description
The application currently hardcodes mainnet network configuration. Users should be able to switch between testnet and mainnet for development and testing purposes.
Current State
// frontend/src/config/token.ts (Line 40)
export const CURRENT_NETWORK: 'mainnet' | 'testnet' = 'mainnet';
// frontend/src/hooks/useMarkets.ts (Line 4)
import { STACKS_MAINNET } from '@stacks/network';
// Always uses mainnetProposed Features
1. Network Selector Component
// components/NetworkSelector.tsx
<button onClick={toggleNetwork}>
{isMainnet ? '🟢 Mainnet' : '🟡 Testnet'}
</button>2. Network Context
// contexts/NetworkContext.tsx
interface NetworkContextType {
network: 'mainnet' | 'testnet';
setNetwork: (n: 'mainnet' | 'testnet') => void;
stacksNetwork: StacksNetwork;
apiUrl: string;
contractAddress: string;
}3. Dynamic Contract Addresses
const contractAddresses = {
mainnet: 'SP31PKQVQZVZCK3FM3NH67CGD6G1FMR17VQVS2W5T',
testnet: 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM',
};4. Persist Network Selection
- Save to localStorage
- Restore on page load
- Clear when wallet disconnects (optional)
5. Visual Indicators
- Network badge in header
- Warning banner on testnet
- Different accent colors per network
Files to Create/Modify
frontend/src/contexts/NetworkContext.tsx(new)frontend/src/components/NetworkSelector.tsx(new)frontend/src/hooks/useMarkets.ts(modify)frontend/src/hooks/useContract.ts(modify)frontend/src/components/Header.tsx(add selector)frontend/src/config/token.ts(remove hardcoded network)
Priority
🟡 Medium - Useful for development and testing