Skip to main content
Handle modal lifecycle events, configure account linking, and customize advanced modal behaviors.

​
Event Callbacks

paraModalConfig={{
  onModalStepChange: (stepInfo) => {
    console.log('Modal step changed:', stepInfo);
    // Track analytics, update UI state, etc.
  },
  onClose: () => {
    console.log('Modal closed');
    // Clean up, redirect, etc.
  }
}}

​
Account Linking

paraModalConfig={{
  supportedAccountLinks: [
    "EMAIL",
    "PHONE",
    "GOOGLE",
    "TWITTER",
    "EXTERNAL_WALLET"
  ]
}}

​
Advanced Configuration

​
Bare Modal

paraModalConfig={{
  bareModal: true
}}
Use this when embedding the modal inline or when you want to provide your own backdrop.

​
Hide Wallet Terminology

paraModalConfig={{
  hideWallets: true
}}
Use this for applications where wallet terminology may confuse users or isn’t relevant to your use case.

​
On-Ramp Test Mode

paraModalConfig={{
  onRampTestMode: true
}}
Enable this during development to test on-ramp flows without processing real transactions.

​
Custom CSS Class

paraModalConfig={{
  className: "my-custom-modal"
}}

​
Custom Overrides

​
Login Transition Override

​
Wallet Creation Override

paraModalConfig={{
  loginTransitionOverride: async (para) => {
    // Custom login transition logic
    await customLoginHandler(para);
  },
  createWalletOverride: async (para) => {
    // Custom wallet creation logic
    const result = await customWalletCreation(para);
    return {
      walletIds: result.walletIds,
      recoverySecret: result.secret
    };
  }
}}

​
Complete Events Example

<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // Event callbacks
    onModalStepChange: (stepInfo) => {
      console.log('Step changed:', stepInfo);
    },
    onClose: () => {
      console.log('Modal closed');
    },

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

    // Advanced options
    bareModal: false,
    hideWallets: false,
    onRampTestMode: false,
    className: "my-app-modal"
  }}
>
  {children}
</ParaProvider>