PushChainProvider.tsx

import {
  PushUI,
  PushUniversalWalletProvider,
  type AppMetadata,
  type ProviderConfigProps,
} from "@pushchain/ui-kit";
import { TICKETCHAIN_LOGO_BASE64 } from "../lib/logoData";

/**
 * PushChainProviders Component
 *
 * This component wraps your entire application with Push Chain's Universal Wallet Provider.
 * It configures the wallet connection options, network settings, and app metadata.
 *
 * Configuration Guide:
 * - network: Choose between MAINNET, TESTNET, or DEV
 * - login: Configure authentication methods (email, google, wallet)
 * - modal: Customize the UI appearance and behavior
 * - chainConfig: Add your custom RPC endpoints
 * - appMetadata: Brand your app with logo, title, and description
 */

const PushChainProviders = ({ children }: { children: React.ReactNode }) => {
  // Wallet configuration - customize these settings for your app
  const walletConfig: ProviderConfigProps = {
    // Network selection: MAINNET for production, TESTNET for development
    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET,

    // Login options - enable/disable authentication methods
    login: {
      email: true, // Allow email authentication
      google: true, // Allow Google OAuth
      wallet: {
        enabled: true, // Allow wallet connection (MetaMask, etc.)
      },
      appPreview: true, // Show app preview in login modal
    },

    // Modal UI customization
    modal: {
      // Layout: SPLIT (side-by-side) or STACKED (vertical)
      loginLayout: PushUI.CONSTANTS.LOGIN.LAYOUT.SPLIT,

      // Connected wallet display: HOVER (on hover) or FULL (always visible)
      connectedLayout: PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER,

      // Show app preview in modals
      appPreview: true,

      // Background interaction when modal is open: BLUR or NONE
      connectedInteraction: PushUI.CONSTANTS.CONNECTED.INTERACTION.BLUR,
    },

    // Chain configuration - add your custom RPC endpoints here
    chainConfig: {
      rpcUrls: {
        // Ethereum Sepolia testnet (for testing)
        "eip155:11155111": [
          "https://sepolia.gateway.tenderly.co/",
          "https://rpc.sepolia.org",
        ],

        // Solana Push Testnet (fee-locker lives on devnet)
        "solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1": [
          "https://api.devnet.solana.com",
        ],

        // Solana Devnet (standard cluster id)
        "solana:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z": [
          "https://api.devnet.solana.com",
        ],
      },
    },
  };

  // App metadata - customize with your app's branding
  const appMetadata: AppMetadata = {
    // Your app's logo URL (using base64 for better compatibility)
    logoUrl: TICKETCHAIN_LOGO_BASE64,

    // Your app's display name
    title: "TicketChain",

    // Brief description of your app (shown in wallet connection prompts)
    description:
      "TicketChain - A decentralized ticketing platform powered by Push Chain. Buy tickets with any token from any supported blockchain.",
  };

  return (
    <PushUniversalWalletProvider 
      config={walletConfig} 
      app={appMetadata}
      themeOverrides={{
        // Black theme overrides
        '--pw-core-bg-primary-color': '#0A0A0A',
        '--pw-core-bg-secondary-color': '#1A1A1A',
        '--pw-core-bg-tertiary-color': '#2D2D2D',
        '--pw-core-text-primary-color': '#FFFFFF',
        '--pw-core-text-secondary-color': '#A3A3A3',
        '--pw-core-text-tertiary-color': '#737373',
        // @ts-expect-error - Push Wallet types incomplete
        '--pw-core-border-primary-color': '#404040',
        '--pw-core-border-secondary-color': '#262626',
        '--pw-core-btn-primary-bg-color': '#8B5CF6',
        '--pw-core-btn-primary-text-color': '#FFFFFF',
        '--pw-core-btn-secondary-bg-color': '#374151',
        '--pw-core-btn-secondary-text-color': '#FFFFFF',
        '--pw-core-btn-border-radius': '12px',
        '--pw-core-font-family': 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
        '--pw-core-shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.5)',
        '--pw-core-shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.6)',
        '--pw-core-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.7)',
        '--pw-core-modal-bg-color': 'rgba(0, 0, 0, 0.8)',
        '--pw-core-card-bg-color': '#1A1A1A',
        '--pw-core-card-border-color': '#404040',
        '--pw-core-input-bg-color': '#2D2D2D',
        '--pw-core-input-border-color': '#404040',
        '--pw-core-input-text-color': '#FFFFFF',
        '--pw-core-success-color': '#10B981',
        '--pw-core-error-color': '#EF4444',
        '--pw-core-warning-color': '#F59E0B',
        '--pw-core-info-color': '#3B82F6',
      }}
    >
      {children}
    </PushUniversalWalletProvider>
  );
};

export { PushChainProviders };