본문으로 건너뛰기

VolrUIProvider Configuration

The VolrUIProvider component wraps your application and provides configuration for Volr SDK UI components.

Basic Setup​

import { VolrUIProvider } from '@volr/react-ui';

function App() {
  return (
    <VolrUIProvider
      config={{
        projectApiKey: 'YOUR_PROJECT_API_KEY',
        appName: 'My App',
      }}
    >
      {/* Your app components */}
    </VolrUIProvider>
  );
}

Configuration Options​

Core Settings​

interface VolrUIConfig {
  // Required: Your project API key
  projectApiKey: string;
  
  
  // Optional: RPC URL overrides
  rpcOverrides?: Record<number, string>;
  
  // Required: Your app name (displayed in modals)
  appName: string;
  
  // Optional: Accent color (hex code)
  accentColor?: string;
  
  // Optional: Theme mode
  theme?: 'light' | 'dark' | 'system';
  
  // Optional: Enabled login methods
  enabledLoginMethods?: ('email' | 'social' | 'siwe')[];
  
  // Optional: Social providers
  socialProviders?: ('google' | 'twitter')[];
  
  // Optional: Branding configuration
  branding?: BrandingConfig;
  
  // Optional: Key storage type
  keyStorageType?: 'passkey' | 'mpc';
}

projectApiKey​

Your Volr project API key. Get it from your Dashboard.

<VolrUIProvider
  config={{
    projectApiKey: process.env.REACT_APP_VOLR_API_KEY!,
    // ... other config
  }}
/>

appName​

Your application name, displayed in authentication and payment modals.

<VolrUIProvider
  config={{
    appName: 'My Awesome App',
    // ... other config
  }}
/>

accentColor​

Custom accent color for UI elements (buttons, links, etc.).

<VolrUIProvider
  config={{
    accentColor: '#0066ff',
    // ... other config
  }}
/>

theme​

Theme mode for the UI components.

<VolrUIProvider
  config={{
    theme: 'system', // 'light' | 'dark' | 'system'
    // 'system' follows user's OS preference
    // ... other config
  }}
/>

enabledLoginMethods​

Control which login methods are available.

<VolrUIProvider
  config={{
    enabledLoginMethods: ['email', 'social', 'siwe'],
    // Options: 'email', 'social', 'siwe'
    // ... other config
  }}
/>

socialProviders​

Specify which social login providers to enable.

<VolrUIProvider
  config={{
    socialProviders: ['google', 'twitter'],
    // Options: 'google', 'twitter'
    // Note: Configure OAuth credentials in Dashboard
    // ... other config
  }}
/>

branding​

Customize branding for modals.

<VolrUIProvider
  config={{
    branding: {
      logoUrl: 'https://example.com/logo.png',
      primaryColor: '#0066ff',
      backgroundColor: '#ffffff',
    },
    // ... other config
  }}
/>

See Branding Customization for details.

keyStorageType​

Specify the key storage type for new users.

<VolrUIProvider
  config={{
    keyStorageType: 'passkey', // 'passkey' | 'mpc'
    // Default: 'passkey'
    // ... other config
  }}
/>

Complete Example​

import { VolrUIProvider } from '@volr/react-ui';

function App() {
  return (
    <VolrUIProvider
      config={{
        projectApiKey: process.env.REACT_APP_VOLR_API_KEY!,
        appName: 'My E-commerce Store',
        accentColor: '#0066ff',
        theme: 'system',
        enabledLoginMethods: ['email', 'social'],
        socialProviders: ['google', 'twitter'],
        branding: {
          logoUrl: '/logo.png',
          primaryColor: '#0066ff',
          backgroundColor: '#ffffff',
        },
      }}
    >
      <YourApp />
    </VolrUIProvider>
  );
}

Environment Variables​

Store sensitive configuration in environment variables:

# .env
REACT_APP_VOLR_API_KEY=volr_pk_...
<VolrUIProvider
  config={{
    projectApiKey: process.env.REACT_APP_VOLR_API_KEY!,
    // ... other config
  }}
/>

Next Steps​