FRONTEND: Wallet Connection Context Provider (Next.js)

Description
Create a React context to manage StarkNet wallet connections (ArgentX/Braavos) with SIWE (Sign-In with Ethereum) flow.

Acceptance Criteria:

1. Context provides:

   {
     isConnected: boolean,
     address?: string,
     connect: (walletType: 'argentx' | 'braavos') => Promise<void>,
     disconnect: () => void,
     authToken?: string
   }
   

2. Implements flow:
   • GET /api/auth/nonce → Wallet signs message → POST /api/auth/verify
3. Persists session in localStorage with encryption
4. Auto-reconnects on page reload if token valid
5. Supports switching between testnet/mainnet

Technical Details:

// components/WalletProvider.tsx
import { createContext, useContext, useEffect } from 'react';
import { AccountInterface } from 'starknet';

interface WalletState {
  isConnected: boolean;
  account?: AccountInterface;
  authToken?: string;
}

export const WalletContext = createContext<WalletState>({ isConnected: false });

export default function WalletProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<WalletState>({ isConnected: false });

  const connect = async (walletType: WalletType) => {
    const nonce = await fetch('/api/auth/nonce');
    const signature = await wallet.signMessage(nonce);
    const { token } = await verifySignature(signature);
    // ...store token
  };

  return (
    <WalletContext.Provider value={state}>
      {children}
    </WalletContext.Provider>
  );
}

Notes:

• Use @starknet-react/core for wallet interactions
• Handle wallet disconnects/network changes