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: {
      foregroundColor: "#007AFF",
      backgroundColor: "#FFFFFF"
    },
    // ... other customization options
  }}
>
  {children}
</ParaProvider>

<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // Runtime / behavior props — these stay in code:
    defaultAuthIdentifier: "user@example.com",
    recoverySecretStepEnabled: true,
    currentStepOverride: "AUTH_MAIN",
    onRampTestMode: false,
    onClose: () => {
      console.log('Modal closed');
    },

    // ⚠️ DEPRECATED — these are now configured on the partner record
    // (Developer Portal), or via `configOverrides` on ParaProvider. Shown here
    // only to map the old prop names. See:
    // /v3/react/guides/customization/configuration
    logo: "https://yourdomain.com/logo.png",
    oAuthMethods: ["GOOGLE", "TWITTER", "DISCORD"],
    disablePhoneLogin: false,
    disableEmailLogin: false,
    authLayout: ["AUTH:FULL", "EXTERNAL:CONDENSED"],
    twoFactorAuthEnabled: true,
    isGuestModeEnabled: false,
    theme: {
      foregroundColor: "#007AFF",
      backgroundColor: "#FFFFFF",
      mode: "light",
      borderRadius: "md",
      font: "Inter, sans-serif",
      foregroundMixRatio: 0.04
    },
    supportedAccountLinks: ["EMAIL", "PHONE", "GOOGLE", "TWITTER", "EXTERNAL_WALLET"]
  }}
>
  {children}
</ParaProvider>