UI Customization

// app/layout.tsx or pages/_app.tsx
import {
  AbstraxnProvider,
  type AbstraxnProviderConfig,
} from "@abstraxn/signer-react";

const providerConfig: AbstraxnProviderConfig = {
  apiKey: process.env.NEXT_PUBLIC_ABSTRAXN_API_KEY || "your-api-key-here",
  ui: {
    onboardTitle: "Sign In", // Optional (default: 'Sign In')
    logo: "https://your-logo-url.com/logo.png", // Optional (default: no logo)
    theme: "light", // Optional: 'light' | 'dark' (default: 'light')
    showFooter: true, // Optional (default: true)
    showCloseButton: true, // Optional (default: false)
    closeOnBackdropClick: true, // Optional (default: true)
    authMethods: ["otp", "passkey", "google", "twitter", "discord"], // Optional (default: ['otp', 'google'])

    // Custom labels
    labels: {
      emailLabel: "Enter Email", // Optional (default: 'Email Address')
      emailPlaceholder: "Enter your email", // Optional (default: 'Enter your email address')
      otpLabel: "OTP", // Optional (default: 'OTP Code')
      otpPlaceholder: "Enter your OTP", // Optional (default: 'Enter 6-digit code')
      emailButton: "Continue", // Optional (default: 'Continue')
      otpButton: "Verify", // Optional (default: 'Verify')
      googleButton: "Continue with Google", // Optional (default: 'Continue with Google')
    },

    // Custom colors
    colors: {
      primary: "#9333ea",
      primaryHover: "#7e22ce",
    },

    // Custom CSS
    customCSS: `
      .onboarding-button-primary {
        background-color: rgb(234, 51, 231);
      }
      .onboarding-card {
        border-radius: 20px;
      }
    `,
  },
};

// ... rest of your setup

ui: {
  onboardTitle: 'Sign In',               // Optional (default: 'Sign In')
  logo: 'https://...',                    // Optional (default: no logo)
  theme: 'light',                         // Optional: 'light' | 'dark' (default: 'light')
  showFooter: true,                       // Optional (default: true)
  showCloseButton: true,                  // Optional (default: false)
  closeOnBackdropClick: true,             // Optional (default: true)
}

ui: {
  authMethods: ['otp', 'passkey', 'google', 'twitter', 'discord'], // Optional (default: ['otp', 'google'])
}

ui: {
  labels: {
    emailLabel: 'Email Address',
    emailPlaceholder: 'Enter your email',
    otpLabel: 'OTP Code',
    otpPlaceholder: 'Enter 6-digit code',
    emailButton: 'Continue',
    otpButton: 'Verify',
    googleButton: 'Continue with Google',
    connectButton: 'Connect Wallet',
    disconnectButton: 'Disconnect',
  },
}

ui: {
  colors: {
    primary: '#9333ea',                  // Primary color
    primaryHover: '#7e22ce',             // Primary hover color
    background: '#ffffff',               // Background color
    text: '#000000',                     // Text color
    border: '#e5e7eb',                   // Border color
    error: '#ef4444',                    // Error color
    success: '#10b981',                  // Success color
  },
}

ui: {
  customCSS: `
    .onboarding-button-primary {
      background-color: rgb(234, 51, 231) !important;
    }
    .onboarding-card {
      border-radius: 20px !important;
    }
  `,
}

const providerConfig: AbstraxnProviderConfig = {
  // ... other config
  externalWallets: {
    enabled: true,
    walletConnectProjectId: "your-walletconnect-project-id",
    connectors: ["injected", "metaMask", "walletConnect"],
  },
};

const providerConfig: AbstraxnProviderConfig = {
  apiKey: import.meta.env.VITE_ABSTRAXN_API_KEY || "your-api-key-here",
  ui: {
    onboardTitle: "Sign In",
    logo: "https://your-logo-url.com/logo.png",
    theme: "light",
    showFooter: true,
    showCloseButton: true,
    closeOnBackdropClick: true,
    authMethods: ["otp", "passkey", "google", "twitter", "discord"],
    labels: {
      emailLabel: "Enter Email",
      emailPlaceholder: "Enter your email",
      otpLabel: "OTP",
      otpPlaceholder: "Enter your OTP",
      emailButton: "Continue",
      otpButton: "Verify",
      googleButton: "Continue with Google",
    },
    colors: {
      primary: "#9333ea",
      primaryHover: "#7e22ce",
    },
    customCSS: `
      .onboarding-button-primary {
        background-color: rgb(234, 51, 231);
      }
      .onboarding-card {
        border-radius: 20px;
      }
    `,
  },
  externalWallets: {
    enabled: true,
    walletConnectProjectId: "your-project-id",
    connectors: ["injected", "metaMask", "walletConnect"],
  },
};