✨ Add Network Switching Support (Testnet/Mainnet)

[Mosas2000]

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 mainnet

Proposed 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

[Mosas2000]

Implemented network switching support with 17 commits:

• Added NetworkProvider context with persistent storage
• Created NetworkSelector (dropdown/toggle/compact variants)
• Created NetworkBadge/NetworkDot/NetworkIndicator components
• Added TestnetWarningBanner with dismissible option
• Added NetworkSwitchDialog confirmation modal
• Updated contracts config for dynamic network
• Updated useMarkets hook to re-fetch on network change
• Updated useContract hook for network-aware transactions
• Added useApi hook for network-aware API calls
• Added URL-based network selection (?network=testnet)
• Full documentation in docs/network-switching.md