feat: add network switching capability

src/components/network/NetworkContext.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { 
+  NetworkType, 
+  NetworkConfig, 
+  NETWORKS, 
+  getStoredNetwork, 
+  setStoredNetwork,
+  clearNetworkCache 
+} from '@/lib/network';
+
+interface NetworkContextType {
+  network: NetworkType;
+  config: NetworkConfig;
+  switchNetwork: (network: NetworkType) => void;
+  showConfirmDialog: boolean;
+  pendingNetwork: NetworkType | null;
+  confirmSwitch: () => void;
+  cancelSwitch: () => void;
+}
+
+const NetworkContext = createContext<NetworkContextType | undefined>(undefined);
+
+export function NetworkProvider({ children }: { children: React.ReactNode }) {
+  const [network, setNetwork] = useState<NetworkType>('testnet');
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [pendingNetwork, setPendingNetwork] = useState<NetworkType | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    const stored = getStoredNetwork();
+    setNetwork(stored);
+    setIsInitialized(true);
+  }, []);
+
+  const switchNetwork = useCallback((newNetwork: NetworkType) => {
+    if (newNetwork === network) return;
+    setPendingNetwork(newNetwork);
+    setShowConfirmDialog(true);
+  }, [network]);
+
+  const confirmSwitch = useCallback(() => {
+    if (pendingNetwork) {
+      clearNetworkCache();
+      setStoredNetwork(pendingNetwork);
+      setNetwork(pendingNetwork);
+      setShowConfirmDialog(false);
+      setPendingNetwork(null);
+      window.location.reload();
+    }
+  }, [pendingNetwork]);
+
+  const cancelSwitch = useCallback(() => {
+    setShowConfirmDialog(false);
+    setPendingNetwork(null);
+  }, []);
+
+  const value: NetworkContextType = {
+    network,
+    config: NETWORKS[network],
+    switchNetwork,
+    showConfirmDialog,
+    pendingNetwork,
+    confirmSwitch,
+    cancelSwitch,
+  };
+
+  if (!isInitialized) {
+    return null;
+  }
+
+  return (
+    <NetworkContext.Provider value={value}>
+      {children}
+    </NetworkContext.Provider>
+  );
+}
+
+export function useNetwork() {
+  const context = useContext(NetworkContext);
+  if (context === undefined) {
+    throw new Error('useNetwork must be used within a NetworkProvider');
+  }
+  return context;
+}

src/components/network/NetworkSelector.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useNetwork } from '@/contexts/NetworkContext';
+import { NETWORKS, NetworkType } from '@/lib/network';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { ChevronDown, Globe } from 'lucide-react';
+
+export function NetworkSelector() {
+  const { network, config, switchNetwork } = useNetwork();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <Globe className="h-4 w-4" />
+          <span className={network === 'mainnet' ? 'text-green-600' : 'text-yellow-600'}>
+            {config.name}
+          </span>
+          <ChevronDown className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {(Object.keys(NETWORKS) as NetworkType[]).map((net) => (
+          <DropdownMenuItem
+            key={net}
+            onClick={() => switchNetwork(net)}
+            className={network === net ? 'bg-accent' : ''}
+          >
+            <span className={net === 'mainnet' ? 'text-green-600' : 'text-yellow-600'}>
+              {NETWORKS[net].name}
+            </span>
+            {network === net && <span className="ml-2 text-xs text-muted-foreground">(current)</span>}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/network/NetworkSwitchDialog.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useNetwork } from '@/contexts/NetworkContext';
+import { NETWORKS } from '@/lib/network';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle } from 'lucide-react';
+
+export function NetworkSwitchDialog() {
+  const { showConfirmDialog, pendingNetwork, confirmSwitch, cancelSwitch } = useNetwork();
+
+  if (!pendingNetwork) return null;
+
+  return (
+    <Dialog open={showConfirmDialog} onOpenChange={cancelSwitch}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-yellow-500" />
+            Switch Network?
+          </DialogTitle>
+          <DialogDescription>
+            You are about to switch to <strong>{NETWORKS[pendingNetwork].name}</strong>.
+            <br /><br />
+            This will:
+            <ul className="list-disc list-inside mt-2 space-y-1">
+              <li>Clear all cached data</li>
+              <li>Disconnect current wallet session</li>
+              <li>Reload the application</li>
+            </ul>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={cancelSwitch}>
+            Cancel
+          </Button>
+          <Button onClick={confirmSwitch} variant="default">
+            Switch to {NETWORKS[pendingNetwork].name}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/network.ts

@@ -0,0 +1,42 @@
+export type NetworkType = 'mainnet' | 'testnet';
+
+export interface NetworkConfig {
+  name: string;
+  rpcUrl: string;
+  contractId: string;
+  passphrase: string;
+}
+
+export const NETWORKS: Record<NetworkType, NetworkConfig> = {
+  mainnet: {
+    name: 'Mainnet',
+    rpcUrl: 'https://horizon.stellar.org',
+    contractId: process.env.NEXT_PUBLIC_MAINNET_CONTRACT_ID || '',
+    passphrase: 'Public Global Stellar Network ; September 2015',
+  },
+  testnet: {
+    name: 'Testnet',
+    rpcUrl: 'https://horizon-testnet.stellar.org',
+    contractId: process.env.NEXT_PUBLIC_TESTNET_CONTRACT_ID || '',
+    passphrase: 'Test SDF Network ; September 2015',
+  },
+};
+
+const STORAGE_KEY = 'sorosave-network';
+
+export function getStoredNetwork(): NetworkType {
+  if (typeof window === 'undefined') return 'testnet';
+  const stored = localStorage.getItem(STORAGE_KEY);
+  return (stored as NetworkType) || 'testnet';
+}
+
+export function setStoredNetwork(network: NetworkType): void {
+  localStorage.setItem(STORAGE_KEY, network);
+}
+
+export function clearNetworkCache(): void {
+  const keysToRemove = Object.keys(localStorage).filter(key => 
+    key.startsWith('sorosave-') && key !== STORAGE_KEY
+  );
+  keysToRemove.forEach(key => localStorage.removeItem(key));
+}

src/sorosave.ts

@@ -0,0 +1,16 @@
+import { getStoredNetwork, NETWORKS } from './network';
+
+export function getRpcUrl(): string {
+  const network = getStoredNetwork();
+  return NETWORKS[network].rpcUrl;
+}
+
+export function getContractId(): string {
+  const network = getStoredNetwork();
+  return NETWORKS[network].contractId;
+}
+
+export function getNetworkPassphrase(): string {
+  const network = getStoredNetwork();
+  return NETWORKS[network].passphrase;
+}