@web3auth/ui
Version:
Ui modal for web3Auth
107 lines (106 loc) • 3.66 kB
TypeScript
import type { SafeEventEmitter, UX_MODE_TYPE, WhiteLabelData } from "@web3auth/auth";
import { BaseAdapterConfig, ChainNamespaceType, LoginMethodConfig, WALLET_ADAPTER_TYPE, WalletRegistry, WalletRegistryItem, Web3AuthNoModalEvents } from "@web3auth/base";
export interface UIConfig extends WhiteLabelData {
/**
* order of how login methods are shown
*
* @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
*/
loginMethodsOrder?: string[];
/**
* Z-index of the modal and iframe
* @defaultValue 99998
*/
modalZIndex?: string;
/**
* Whether to show errors on Web3Auth modal.
*
* @defaultValue `true`
*/
displayErrorsOnModal?: boolean;
/**
* number of columns to display the Social Login buttons
*
* @defaultValue `3`
*/
loginGridCol?: 2 | 3;
/**
* Decides which button will be the focus of the modal
* For `socialLogin` the social icon will be colored
* For other options like `emailLogin` and `externalLogin` the respective buttons will be converted into a primary button
*
* @defaultValue `socialLogin`
*/
primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
adapterListener: SafeEventEmitter<Web3AuthNoModalEvents>;
/**
* UX Mode for the auth adapter
*/
uxMode?: UX_MODE_TYPE;
}
export interface LoginModalProps extends UIConfig {
chainNamespace: ChainNamespaceType;
walletRegistry: WalletRegistry;
}
export declare const LOGIN_MODAL_EVENTS: {
readonly INIT_EXTERNAL_WALLETS: "INIT_EXTERNAL_WALLETS";
readonly LOGIN: "LOGIN";
readonly DISCONNECT: "DISCONNECT";
readonly MODAL_VISIBILITY: "MODAL_VISIBILITY";
};
export type SocialLoginsConfig = {
loginMethodsOrder: string[];
loginMethods: LoginMethodConfig;
adapter: WALLET_ADAPTER_TYPE;
uiConfig: Omit<UIConfig, "adapterListener">;
};
export declare const MODAL_STATUS: {
INITIALIZED: string;
CONNECTED: string;
CONNECTING: string;
ERRORED: string;
};
export type ModalStatusType = (typeof MODAL_STATUS)[keyof typeof MODAL_STATUS];
export interface ModalState {
status: ModalStatusType;
externalWalletsInitialized: boolean;
hasExternalWallets: boolean;
externalWalletsVisibility: boolean;
modalVisibility: boolean;
modalVisibilityDelayed: boolean;
postLoadingMessage: string;
walletConnectUri: string;
socialLoginsConfig: SocialLoginsConfig;
externalWalletsConfig: Record<string, BaseAdapterConfig>;
detailedLoaderAdapter: string;
detailedLoaderAdapterName: string;
showExternalWalletsOnly: boolean;
}
export type SocialLoginEventType = {
adapter: string;
loginParams: {
loginProvider: string;
login_hint?: string;
name: string;
};
};
export type ExternalWalletEventType = {
adapter: string;
};
export declare const DEFAULT_LOGO_LIGHT = "https://images.web3auth.io/web3auth-logo-w.svg";
export declare const DEFAULT_LOGO_DARK = "https://images.web3auth.io/web3auth-logo-w-light.svg";
export declare const WALLET_CONNECT_LOGO = "https://images.web3auth.io/login-wallet-connect.svg";
export type StateEmitterEvents = {
STATE_UPDATED: (state: Partial<ModalState>) => void;
MOUNTED: () => void;
};
export type ExternalButton = {
name: string;
displayName?: string;
href?: string;
hasInjectedWallet: boolean;
hasWalletConnect: boolean;
hasInstallLinks: boolean;
walletRegistryItem?: WalletRegistryItem;
imgExtension?: string;
};