Customization Basics

<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    logo: "https://yourdomain.com/logo.png",
    theme: {
      backgroundColor: "#ffffff",
      foregroundColor: "#000000",
      accentColor: "#007AFF"
    },
    // ... other customization options
  }}
>
  {children}
</ParaProvider>

<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // Branding
    logo: "https://yourdomain.com/logo.png",

    // Authentication
    oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD"],
    disablePhoneLogin: false,
    disableEmailLogin: false,
    defaultAuthIdentifier: "user@example.com",
    authLayout: ["AUTH:FULL", "EXTERNAL:CONDENSED"],

    // Security
    twoFactorAuthEnabled: true,
    recoverySecretStepEnabled: true,
    isGuestModeEnabled: false,

    // Theme
    theme: {
      foregroundColor: "#333333",
      backgroundColor: "#FFFFFF",
      accentColor: "#007AFF",
      mode: "light",
      borderRadius: "md",
      font: "Inter, sans-serif",
      customPalette: {
        text: {
          primary: "#333333",
          secondary: "#666666"
        },
        button: {
          primary: {
            background: "#007AFF",
            hover: "#0056CC"
          }
        }
      }
    },

    // Behavior
    currentStepOverride: "AUTH_MAIN",
    onRampTestMode: false,

    // Account linking
    supportedAccountLinks: [
      "EMAIL",
      "PHONE",
      "GOOGLE",
      "TWITTER",
      "EXTERNAL_WALLET"
    ],

    // Events
    onModalStepChange: (stepInfo) => {
      console.log('Step changed:', stepInfo);
    },
    onClose: () => {
      console.log('Modal closed');
    }
  }}
>
  {children}
</ParaProvider>