newOS for Developers

Back to Overview

ConnectDialog

input~180 lines

Wallet connection dialog for Web3 authentication. Supports MetaMask, WalletConnect, and Coinbase Wallet.

Props Interface

{
  walletType?: "metamask" | "walletconnect" | "coinbase";
  isConnecting?: boolean;        // Show loading state
  isConnected?: boolean;         // Connection successful
  address?: string;              // Connected wallet address
  onConnect?: (wallet: string) => void;
  onDisconnect?: () => void;
  className?: string;
}

Data Flow

Wallet Providers

MetaMask — Browser extension injection via window.ethereum
WalletConnect — QR code modal for mobile wallets
Coinbase Wallet — Coinbase SDK integration

Connection Flow

1. User selects wallet provider
2. Provider prompts for connection approval
3. On approval, address is returned
4. App signs message to authenticate with Newgraph

Key Features

Multi-Provider Support

Supports multiple wallet providers with consistent UX. Auto-detects installed wallets.

Connection State Management

Handles loading, connected, and error states with appropriate visual feedback.

Address Display

Shows truncated wallet address (0x1234...abcd) when connected.

Edge Cases & Gotchas

No wallet installed — Show install prompt with links to wallet websites
User rejects connection — Handle rejection gracefully, allow retry
Network mismatch — Prompt to switch to correct network

Related Components

PhoneSignInWatts