본문으로 건너뛰기

Component Props Reference

Complete reference for all Volr SDK UI component props.

VolrUIProvider​

Main provider component that wraps your application.

Props​

interface VolrUIProviderProps {
  config: VolrUIConfig;
  children: React.ReactNode;
}

VolrUIConfig​

interface VolrUIConfig {
  // Required
  projectApiKey: string;
  appName: string;
  
  // Optional
  rpcOverrides?: Record<number, string>;
  accentColor?: string;
  theme?: 'light' | 'dark' | 'system';
  enabledLoginMethods?: ('email' | 'social' | 'siwe')[];
  socialProviders?: ('google' | 'twitter')[];
  branding?: BrandingConfig;
  keyStorageType?: 'passkey' | 'mpc';
}

BrandingConfig​

interface BrandingConfig {
  logoUrl?: string;
  primaryColor?: string;
  backgroundColor?: string;
}

PaymentModal​

Payment modal component (usually used via useVolrPay hook).

Props​

interface PaymentModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

Usage​

<PaymentModal
  open={isOpen}
  onOpenChange={(open) => setIsOpen(open)}
/>

SigninModal​

Authentication modal component.

Props​

interface SigninModalProps {
  isOpen: boolean;
  onClose: () => void;
  onError?: (error: Error) => void;
}

Usage​

<SigninModal
  isOpen={showSignin}
  onClose={() => setShowSignin(false)}
  onError={(error) => console.error(error)}
/>

AccountModal​

Account management modal component.

Props​

interface AccountModalProps {
  isOpen: boolean;
  onClose: () => void;
  onError?: (error: Error) => void;
}

Usage​

<AccountModal
  isOpen={showAccount}
  onClose={() => setShowAccount(false)}
  onError={(error) => console.error(error)}
/>

DepositModal​

Deposit funds modal component.

Props​

interface DepositModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  asset?: {
    chainId: number;
    symbol: string;
  } | null;
}

Usage​

<DepositModal
  open={showDeposit}
  onOpenChange={(open) => setShowDeposit(open)}
  asset={{ chainId: 8453, symbol: 'USDC' }}
/>

PasskeyEnrollView​

Passkey enrollment component.

Props​

interface PasskeyEnrollViewProps {
  wrapInModal?: boolean;
  onComplete: () => void;
  onError?: (error: Error) => void;
  onClose?: () => void;
}

Usage​

<PasskeyEnrollView
  wrapInModal={true}
  onComplete={() => console.log('Passkey enrolled')}
  onError={(error) => console.error(error)}
  onClose={() => {}}
/>

Next Steps​