Wallet Connection and Management

/**
 * High-level wrapper component that provides wallet connection functionality
 * @param children - Child component that receives connector props  
 * @param modalProps - Props passed to the connection modal
 * @param onConnect - Callback when connection starts
 * @param onConnected - Callback when connection succeeds
 * @param onDisconnect - Callback when disconnection starts  
 * @param onDisconnected - Callback when disconnection completes
 * @param onChainSwitched - Callback when chain is switched
 * @param onConnectError - Callback for connection errors
 */
const Connector: React.FC<ConnectorProps>;

interface ConnectorProps {
  children: React.ReactNode;
  modalProps?: ConnectModalProps;
  onConnect?: () => void;
  onConnected?: (account?: Account) => void;
  onDisconnect?: () => void;
  onDisconnected?: () => void;
  onChainSwitched?: (chain?: Chain) => void;
  onConnectError?: (error?: Error) => void;
}

import { Connector } from "@ant-design/web3";

function App() {
  return (
    <Connector
      onConnected={(account) => {
        console.log('Connected account:', account);
      }}
      onChainSwitched={(chain) => {
        console.log('Switched to chain:', chain);
      }}
    >
      {(connectorProps) => (
        <MyCustomConnectButton {...connectorProps} />
      )}
    </Connector>
  );
}

/**
 * Main connect button component with wallet management, chain switching, and profile modal
 * @param chainSelect - Whether to show chain selection dropdown (default: true)
 * @param onConnectClick - Callback when connect is clicked
 * @param onDisconnectClick - Callback when disconnect is clicked
 * @param tooltip - Tooltip configuration
 * @param profileModal - Profile modal configuration  
 * @param quickConnect - Whether to show quick connect options
 * @param avatar - Avatar configuration
 * @param sign - Signing configuration
 * @param actionsMenu - Actions menu configuration
 * @param locale - Localization overrides
 */
const ConnectButton: React.FC<ConnectButtonProps>;

interface ConnectButtonProps extends ButtonProps, ConnectorTriggerProps {
  chainSelect?: boolean;
  onConnectClick?: (wallet?: Wallet) => void;
  onDisconnectClick?: () => void;
  tooltip?: boolean | ConnectButtonTooltipProps;
  profileModal?: boolean | ProfileModalProps['modalProps'];
  quickConnect?: boolean;
  avatar?: AvatarProps;
  sign?: SignConfig;
  signBtnTextRender?: (signText?: React.ReactNode, account?: Account) => React.ReactNode;
  onMenuItemClick?: (e: NonNullable<MenuProps['items']>[number]) => void;
  addressPrefix?: string | false;
  actionsMenu?: boolean | {
    items?: MenuItemType[];
    extraItems?: MenuItemType[];
  };
  locale?: Locale['ConnectButton'];
}

interface ConnectButtonTooltipProps extends TooltipProps {
  copyable?: boolean;
  title?: boolean | string | React.ReactNode;
  format?: AddressProps['format'];
}

interface AvatarProps {
  src?: string;
  size?: 'small' | 'default' | 'large' | number;
}

type MenuItemType = Extract<GetProp<MenuProps, 'items'>[number], { type?: 'item' }>;

import { ConnectButton } from "@ant-design/web3";

// Basic usage
<ConnectButton />

// With custom callbacks
<ConnectButton
  onConnectClick={(wallet) => {
    console.log('Connecting to wallet:', wallet?.name);
  }}
  onDisconnectClick={() => {
    console.log('Disconnecting wallet');
  }}
/>

// With profile modal and tooltip
<ConnectButton
  tooltip={{ copyable: true }}
  profileModal={true}
  chainSelect={true}
/>

/**
 * Dropdown component for selecting blockchain networks
 * @param chains - Available chains to select from
 * @param currentChain - Currently selected chain
 * @param onSwitchChain - Callback when chain is switched
 * @param buttonProps - Props for the button component
 */
const ChainSelect: React.FC<ChainSelectProps>;

interface ChainSelectProps {
  chains: Chain[];
  currentChain?: Chain;
  onSwitchChain?: (chain: Chain) => void;
  buttonProps?: ButtonProps;
}

import { ChainSelect } from "@ant-design/web3";

const availableChains = [
  { id: 1, name: "Ethereum", type: ChainType.EVM },
  { id: 137, name: "Polygon", type: ChainType.EVM },
  { id: 56, name: "BSC", type: ChainType.EVM }
];

<ChainSelect
  chains={availableChains}
  currentChain={availableChains[0]}
  onSwitchChain={(chain) => {
    console.log('Switching to chain:', chain.name);
  }}
/>

/**
 * Modal component for wallet connection with support for different modes
 * @param onWalletSelected - Wallet selection callback
 * @param walletList - Available wallets
 * @param mode - Modal display mode: 'simple' | 'normal' | 'auto'
 * @param guide - Guide panel configuration
 * @param group - Wallet grouping options
 * @param connecting - Connection status display
 * @param disabled - Whether to disable wallet connections
 */
const ConnectModal: React.FC<ConnectModalProps> & { ModalPanel: typeof ModalPanel };

interface ConnectModalProps {
  onWalletSelected?: (wallet: Wallet, options?: ConnectOptions) => void;
  walletList?: Wallet[];
  mode?: 'simple' | 'normal' | 'auto';
  guide?: DefaultGuide;
  group?: boolean | object;
  connecting?: ConnectingStatusConfig;
  disabled?: boolean;
}

interface DefaultGuide {
  title?: React.ReactNode;
  infos?: Array<{
    title: React.ReactNode;
    description: React.ReactNode;
    icon?: React.ReactNode;
  }>;
  moreLink?: string;
}

interface ConnectingStatusConfig {
  title?: React.ReactNode;
  description?: React.ReactNode;
}

interface ConnectOptions {
  connectType?: 'extension' | 'qrCode' | 'openMobile';
}

import { ConnectModal } from "@ant-design/web3";

// Simple modal
<ConnectModal
  mode="simple"
  onWalletSelected={(wallet, options) => {
    console.log('Selected wallet:', wallet.name, 'with options:', options);
  }}
/>

// Normal modal with guide
<ConnectModal
  mode="normal"
  guide={{
    title: "Connect Your Wallet",
    infos: [
      {
        title: "Step 1",
        description: "Choose your preferred wallet",
        icon: <WalletIcon />
      }
    ]
  }}
  group={true}
/>

// Modal panel component
<ConnectModal.ModalPanel
  onWalletSelected={(wallet) => {
    console.log('Wallet selected:', wallet);
  }}
/>

interface Wallet extends WalletMetadata {
  _standardWallet?: any;
  _isMobileWallet?: boolean;
  hasWalletReady?: () => Promise<boolean>;
  hasExtensionInstalled?: () => Promise<boolean>;
  getQrCode?: () => Promise<{ uri: string }>;
  customQrCodePanel?: boolean;
}

type WalletMetadata = {
  name: string;
  remark: string;
  key?: React.Key;
  icon?: string | React.ReactNode;
  extensions?: false | WalletExtensionItem[];
  app?: false | { link: string };
  group?: string;
  universalProtocol?: { link: string };
  supportChainTypes?: ChainType[];
  transferQRCodeFormatter?: (params: Record<string, any>) => string;
  deeplink?: { urlTemplate: string };
};

interface WalletExtensionItem {
  key: string;
  browserIcon: string;
  browserName: string;
  link: string;
  description: string;
}

interface ConnectorTriggerProps {
  account?: Account;
  loading?: boolean;
  onConnectClick?: (wallet?: Wallet) => void;
  onDisconnectClick?: () => void;
  onSwitchChain?: (chain: Chain) => Promise<void>;
  availableChains?: Chain[];
  availableWallets?: Wallet[];
  chain?: Chain;
  balance?: Balance;
}

interface SignConfig {
  signIn: (address: string) => Promise<void>;
  signOut?: () => Promise<void>;
}