Handle Modal Events

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

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

paraModalConfig={{
  bareModal: true
}}

paraModalConfig={{
  hideWallets: true
}}

paraModalConfig={{
  onRampTestMode: true
}}

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

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
    };
  }
}}

<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>