<LoopConnectPaymentMethods 
    customerId="cust_abc123"
    // OR
    customerRefId="usr_abc1234"
/>

interface PaymentMethodsReadyEvent {
    merchantId: string;
}

interface PaymentMethodsReadyFailedEvent {
    type: "paymentMethodsReadyFailed";
    message: string;
    data: Record<string, any>;
}

interface PaymentMethodsTokenChangeEvent {
    address: string;
    networkId: number;
    name: string;
    symbol: string;
    decimals: number;
    logoUrl: string;
    exchange: ExchangeRateDetails;
}

interface PaymentMethodsStateChangeEvent {
    state: 
        | "findingCustomer"
        | "idle" 
        | "editingAuthorization"
        | "selectingMethod"
        | "updatingMethod"
        | "deletingMethod"
        | "addingMethod"
        | "confirmingBalance"
        | "confirmingAuthorization" 
        | "updatingAuthorization" 
        | "signingMessage" 
        | "creatingCustomer" 
        | "creatingPaymentMethod";
    message: string;
    data: /* see "onPaymentMethodsStateChange states" for types */;
}

interface PaymentMethodsAuthorizationUpdatedEvent {
    authorizationAmount: string;
    suggestedAuthorizationTokenAmount: string | undefined;
    minimumAuthorizationTokenAmount: string | undefined;
    tokenAddress: string;
    tokenSymbol: string;
    networkId: number;
    walletAddress: string;
    existingAuthorizationAmount: string | null;
}

interface PaymentMethodsCustomerCreatedEvent {
    customerId: string;
    customerRefIds: {
        merchantId: string;
        customerRefId: string;
    }[];
    paymentMethods: {
        paymentMethodId: string;
        paymentMethodName: string;
        networkId: number;
        walletAddress: string;
        isDefault: boolean;
        token: {
            tokenId: string;
            symbol: string;
            address: string;
            decimals: number;
            exchangeRates: {
                currency: string;
                price: string;
                timestamp: number;
            }[];
        };
        preAuthorization: {
            balance: string;
            authorization: string;
        };
    }[];
    dateCreated: number;
}

interface PaymentMethodsCreatedEvent {
    paymentMethodId: string;
    merchantId: string;
    paymentMethodName: string;
    networkId: number;
    walletAddress: string;
    isDefault: boolean;
    token: {
        tokenId: string;
        symbol: string;
        address: string;
        decimals: number;
        exchangeRates: {
            currency: string;
            price: string;
            timestamp: number;
        }[];
    };
    preAuthorization: {
        balance: string;
        authorization: string;
    };
}

interface PaymentMethodsUpdatedEvent {
    paymentMethodId: string;
    merchantId: string;
    paymentMethodName: string;
    networkId: number;
    walletAddress: string;
    isDefault: boolean;
    token: {
        tokenId: string;
        symbol: string;
        address: string;
        decimals: number;
        exchangeRates: {
            currency: string;
            price: string;
            timestamp: number;
        }[];
    };
    preAuthorization: {
        balance: string;
        authorization: string;
    };
}

interface PaymentMethodsDeletedEvent {
    paymentMethodId: string;
    merchantId: string;
    paymentMethodName: string;
    networkId: number;
    walletAddress: string;
    isDefault: boolean;
    token: {
        tokenId: string;
        symbol: string;
        address: string;
        decimals: number;
        exchangeRates: {
            currency: string;
            price: string;
            timestamp: number;
        }[];
    };
    preAuthorization: {
        balance: string;
        authorization: string;
    };
}

interface PaymentMethodsFailedEvent {
	type:
        | "methodCreationFailed"
        | "insufficientBalance"
        | "authorizationFailed"
        | "insufficientAuthorization"
  	    | "signedMessageRequired"
  	    | "customerCreationFailed"
        | "selectMethodFailed"
        | "deleteMethodFailed";
	message: string;
	data: {
		error: Record<string, any> | undefined;
	};
}

<LoopConnectPaymentMethods 
    // other props
    onPaymentMethodsStateChange={
        ({ state, message, data }) => console.log(`${state}: ${message}`, data);
    } 
/>

interface PaymentMethodsStateChangeEventFindingCustomer {
    customerId?: string;
    customerRefId?: string;
    merchantId: string;
}

interface PaymentMethodsStateChangeEventIdle {
    /* no additional data is provided for the idle state */
}

interface PaymentMethodsStateChangeEventEditingAuthorization {
    tokenAddress: string;
    tokenSymbol: string;
    currentAuthorizationAmount: string | undefined;
    minimumAuthorization: string | undefined;
}

interface PaymentMethodsStateChangeEventSelectingMethod {
    /* no additional data is provided for the selecting method state */
}

interface PaymentMethodsStateChangeEventUpdatingMethod {
    paymentMethodId?: string;
}

interface PaymentMethodsStateChangeEventDeletingMethod {
    paymentMethodId?: string;
}

interface PaymentMethodsStateChangeEventAddingMethod {
    /* no additional data is provided for the adding method state */
}

interface PaymentMethodsStateChangeEventConfirmingBalance {
    amount: string;
    walletAddress: string;
    chain: BlockchainNetwork;
    networkName: string;
    token: {
        name: string;
        logoUrl: string;
        symbol: string;
        decimals: number;
        address: string;
        networkId: number;
        exchange: {
            currency: string;
            rate: number;
            updated: number;
            provider: string;
        };
    }
}

interface PaymentMethodsStateChangeEventConfirmingAuthorization {
    minimumAuthorization: string | undefined;
    contractAddress: string;
    walletAddress: string;
    chain: BlockchainNetwork;
    networkName: string;
    token: {
        name: string;
        logoUrl: string;
        symbol: string;
        decimals: number;
        address: string;
        networkId: number;
        exchange: {
            currency: string;
            rate: number;
            updated: number;
            provider: string;
        };
    }
}

interface PaymentMethodsStateChangeEventUpdatingAuthorization {
    suggestedAuthorization: string | undefined;
    contractAddress: string;
    walletAddress: string;
    chain: BlockchainNetwork;
    networkName: string;
    existingAuthorization: string | null;
    token: {
        name: string;
        logoUrl: string;
        symbol: string;
        decimals: number;
        address: string;
        networkId: number;
        exchange: {
            currency: string;
            rate: number;
            updated: number;
            provider: string;
        };
    }
}

interface PaymentMethodsStateChangeEventSigningMessage {
    walletAddress: string;
    chain: BlockchainNetwork;
    networkName: string;
    networkId: number;
}

interface PaymentMethodsStateChangeEventCreatingCustomer {
    walletAddress: string;
    chain: BlockchainNetwork;
    networkName: string;
    token: {
        name: string;
        logoUrl: string;
        symbol: string;
        decimals: number;
        address: string;
        networkId: number;
        exchange: {
            currency: string;
            rate: number;
            updated: number;
            provider: string;
        };
    }
}

interface PaymentMethodsStateChangeEventCreatingPaymentMethod {
    walletAddress: string;
    chain: BlockchainNetwork;
    networkName: string;
    customerId: string;
    customerRefId?: string;
    token: {
        name: string;
        logoUrl: string;
        symbol: string;
        decimals: number;
        address: string;
        networkId: number;
        exchange: {
            currency: string;
            rate: number;
            updated: number;
            provider: string;
        };
    }
}

<LoopConnectPaymentMethods 
    // other props
    onPaymentMethodsFailed={
        ({ type, message, data }) => console.log(`${type}: ${message}`, data);
    } 
/>

<LoopConnectPaymentMethods 
    // other props
    customStyles={`
        --loop-connect-font: italic 700 1rem 'Poppins', sans-serif;
        --loop-connect-widget-shadow: 0 0 0.5rem rgba(99,99,99,0.3);
    `} 
/>

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

// 1. Import the package
import { initLoopConnect, LoopConnectPaymentMethods } from "@loop-crypto/connect";

// 2. Initialize is outside of the application
initLoopConnect({
    jwtToken: "your-jwt-token-here",
    entityId: "your-entity-id-here",
    merchantId: "your-merchant-id-here",
});

// 3. Add the PaymentMethods component to the React application
createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <LoopConnectPaymentMethods
            customerRefId="test-user-id"
        />
    </StrictMode>
);