@coin-voyage/paykit/dist/types.d.ts

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import type { ReactNode } from "react";
import type { Languages as Lang } from "./lib/localizations";
import type { WalletConfiguration as WalletConfigurationImport } from "@coin-voyage/crypto/types/wallet";
import { useConnectCallbackProps } from "@coin-voyage/crypto/hooks";
export type WalletConfiguration = WalletConfigurationImport;
export type { PayOrder, PayOrderMetadata } from "@coin-voyage/shared/common";
export type PayKitConfig = {
    children?: ReactNode;
    apiKey: string;
    theme?: Theme;
    mode?: Mode;
    customTheme?: CustomTheme;
    debugMode?: boolean;
    options?: PayKitOptions;
} & Omit<useConnectCallbackProps, "setAllowedWallets">;
export type Languages = Lang;
export type Theme = "auto" | "web95" | "retro" | "soft" | "midnight" | "minimal" | "rounded" | "nouns";
export type Mode = "light" | "dark" | "auto";
export type CustomTheme = {
    "--ck-connectbutton-font-size"?: string;
    "--ck-connectbutton-color"?: string;
    "--ck-connectbutton-background"?: string;
    "--ck-connectbutton-background-secondary"?: string;
    "--ck-connectbutton-hover-color"?: string;
    "--ck-connectbutton-hover-background"?: string;
    "--ck-connectbutton-active-color"?: string;
    "--ck-connectbutton-active-background"?: string;
    "--ck-connectbutton-balance-color"?: string;
    "--ck-connectbutton-balance-background"?: string;
    "--ck-connectbutton-balance-box-shadow"?: string;
    "--ck-connectbutton-balance-hover-background"?: string;
    "--ck-connectbutton-balance-hover-box-shadow"?: string;
    "--ck-connectbutton-balance-active-background"?: string;
    "--ck-connectbutton-balance-active-box-shadow"?: string;
    /** Primary Button */
    "--ck-primary-button-border-radius"?: string;
    "--ck-primary-button-color"?: string;
    "--ck-primary-button-background"?: string;
    "--ck-primary-button-box-shadow"?: string;
    "--ck-primary-button-font-weight"?: string;
    "--ck-primary-button-hover-color"?: string;
    "--ck-primary-button-hover-background"?: string;
    "--ck-primary-button-hover-box-shadow"?: string;
    "--ck-primary-button-active-background"?: string;
    /** Secondary Button */
    "--ck-secondary-button-border-radius"?: string;
    "--ck-secondary-button-color"?: string;
    "--ck-secondary-button-background"?: string;
    "--ck-secondary-button-box-shadow"?: string;
    "--ck-secondary-button-font-weight"?: string;
    /** Tertiary Button */
    "--ck-tertiary-button-background"?: string;
    "--ck-secondary-button-hover-background"?: string;
    /** Modal */
    "--ck-modal-box-shadow"?: string;
    "--ck-overlay-background"?: string;
    "--ck-body-color"?: string;
    "--ck-body-color-muted"?: string;
    "--ck-body-color-muted-hover"?: string;
    "--ck-body-background"?: string;
    "--ck-body-background-transparent"?: string;
    "--ck-body-background-secondary"?: string;
    "--ck-body-background-secondary-hover-background"?: string;
    "--ck-body-background-secondary-hover-outline"?: string;
    "--ck-body-background-tertiary"?: string;
    "--ck-body-action-color"?: string;
    "--ck-body-divider"?: string;
    "--ck-body-divider-secondary"?: string;
    "--ck-body-color-danger"?: string;
    "--ck-body-color-valid"?: string;
    "--ck-siwe-border"?: string;
    /** Disclaimer */
    "--ck-body-disclaimer-background"?: string;
    "--ck-body-disclaimer-box-shadow"?: string;
    "--ck-body-disclaimer-color"?: string;
    "--ck-body-disclaimer-link-color"?: string;
    "--ck-body-disclaimer-link-hover-color"?: string;
    /** Tooltips */
    "--ck-tooltip-background"?: string;
    "--ck-tooltip-background-secondary"?: string;
    "--ck-tooltip-color"?: string;
    "--ck-tooltip-shadow"?: string;
    /** Network dropdown */
    "--ck-dropdown-button-color"?: string;
    "--ck-dropdown-button-box-shadow"?: string;
    "--ck-dropdown-button-background"?: string;
    "--ck-dropdown-button-hover-color"?: string;
    "--ck-dropdown-button-hover-background"?: string;
    /** QR Code */
    "--ck-qr-dot-color"?: string;
    "--ck-qr-border-color"?: string;
    /** Misc. */
    "--ck-focus-color"?: string;
    "--ck-spinner-color"?: string;
    "--ck-copytoclipboard-stroke"?: string;
};
export type All = {
    theme?: Theme;
    mode?: Mode;
    customTheme?: CustomTheme;
    lang?: Languages;
};
/** Global options, across all pay buttons and payments. */
export type PayKitOptions = {
    language?: Languages;
    hideBalance?: boolean;
    hideTooltips?: boolean;
    hideQuestionMarkCTA?: boolean;
    hideNoWalletCTA?: boolean;
    hideRecentBadge?: boolean;
    walletConnectCTA?: "link" | "modal" | "both";
    /** Avoids layout shift when the Pay modal is open by adding padding to the body */
    avoidLayoutShift?: boolean;
    /** Automatically embeds Google Font of the current theme. Does not work with custom themes */
    embedGoogleFonts?: boolean;
    truncateLongENSAddress?: boolean;
    walletConnectName?: string;
    reducedMotion?: boolean;
    disclaimer?: ReactNode | string;
    bufferPolyfill?: boolean;
    initialChainId?: number;
    enforceSupportedChains?: boolean;
    ethereumOnboardingUrl?: string;
    walletOnboardingUrl?: string;
    /** Blur the background when the modal is open */
    overlayBlur?: number;
};
/** Modal UI options, set on the pay button triggering that modal. */
export type PayModalOptions = {
    /** Automatically close the modal after a successful payment. */
    closeOnSuccess?: boolean;
    /** Automatically reset the payment state after a successful payment. */
    resetOnSuccess?: boolean;
};
/** Payment status. See webhooks and React usePayStatus() hook. */
export type PaymentStatus = "payment_pending" | "payment_started" | "payment_completed" | "payment_bounced" | "payment_expired" | "payment_failed";