biuauthui/src/interfaces.ts

Ui modal for biuAuth

import { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
import { OPENLOGIN_NETWORK_TYPE } from "@toruslabs/openlogin-utils";
import { BaseAdapterConfig, IWalletConnectExtensionAdapter, LoginMethodConfig, WALLET_ADAPTER_TYPE } from "@web3auth/base";

export interface UIConfig {
  /**
   * App name to display in the UI.
   */
  appName?: string;

  /**
   * Logo for your app.
   */
  appLogo?: string;

  adapterLogo?: string;
  /**
   * theme for the modal
   *
   * @defaultValue `auto`
   */
  theme?: "light" | "dark" | "auto";

  /**
   * 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[];

  /**
   * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
   * en: english
   * de: german
   * ja: japanese
   * ko: korean
   * zh: mandarin
   * es: spanish
   * fr: french
   * pt: portuguese
   * nl: dutch
   *
   */
  defaultLanguage?: 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 displayed as primary button in modal
   * only one button will be primary and other buttons in modal will be secondary
   *
   * @defaultValue `socialLogin`
   */
  primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";

  adapterListener: SafeEventEmitter;
  web3AuthNetwork?: OPENLOGIN_NETWORK_TYPE;
}

export const LOGIN_MODAL_EVENTS = {
  INIT_EXTERNAL_WALLETS: "INIT_EXTERNAL_WALLETS",
  LOGIN: "LOGIN",
  DISCONNECT: "DISCONNECT",
  MODAL_VISIBILITY: "MODAL_VISIBILITY",
};

export type SocialLoginsConfig = {
  loginMethodsOrder: string[];
  loginMethods: LoginMethodConfig;
  adapter: WALLET_ADAPTER_TYPE;
  uiConfig: Omit<UIConfig, "adapterListener">;
};

export const MODAL_STATUS = {
  INITIALIZED: "initialized",
  CONNECTED: "connected",
  CONNECTING: "connecting",
  ERRORED: "errored",
};
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;
  wcAdapters: IWalletConnectExtensionAdapter[];
}

export type SocialLoginEventType = { adapter: string; loginParams: { loginProvider: string; login_hint?: string; name: string } };
export type ExternalWalletEventType = { adapter: string };

export const DEFAULT_LOGO_LIGHT = "https://images.web3auth.io/web3auth-logo-w-light.svg";
export const DEFAULT_LOGO_DARK = "https://images.web3auth.io/web3auth-logo-w.svg";

export const WALLET_CONNECT_LOGO = "https://images.web3auth.io/login-wallet-connect.svg";
export const LOGO = `data:image/png;base64,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`;