type initial auth mode to const

Author: chaitanyapotti

demo/vue-app-new/src/components/AppDashboard.vue

@@ -14,7 +14,7 @@ import {
   useWeb3AuthUser,
   useSwitchChain as useWeb3AuthSwitchChain,
 } from "@web3auth/modal/vue";
-import { type CustomChainConfig, type NFTCheckoutPluginType } from "@web3auth/no-modal";
+import { CONNECTOR_INITIAL_AUTHENTICATION_MODE, type CustomChainConfig, type NFTCheckoutPluginType } from "@web3auth/no-modal";
 import { useI18n } from "petite-vue-i18n";
 
 import { useSignAndSendTransaction, useSignMessage as useSolanaSignMessage, useSignTransaction, useSolanaWallet } from "@web3auth/modal/vue/solana";
@@ -92,7 +92,7 @@ const isDisplay = (name: "dashboard" | "ethServices" | "solServices" | "walletSe
   const chainNamespace = currentChainNamespace.value;
   switch (name) {
     case "dashboard":
-      return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value;
+      return formData.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN ? isAuthorized.value : isConnected.value;
 
     case "ethServices":
       return chainNamespace === CHAIN_NAMESPACES.EIP155;

demo/vue-app-new/src/components/AppHeader.vue

@@ -4,6 +4,7 @@ import { useWeb3Auth, useWeb3AuthDisconnect } from "@web3auth/modal/vue";
 import { useI18n } from "petite-vue-i18n";
 import { watch } from "vue";
 import { formDataStore } from "../store/form";
+import { CONNECTOR_INITIAL_AUTHENTICATION_MODE } from "@web3auth/no-modal";
 
 const { log } = console;
 const { t } = useI18n({ useScope: "global" });
@@ -15,10 +16,10 @@ const formData = formDataStore;
 const isDisplay = (name: string): boolean => {
   switch (name) {
     case "btnLogout":
-      return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value;
+      return formData.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN ? isAuthorized.value : isConnected.value;
 
     case "appHeading":
-      return formData.initialAuthenticationMode === "connect-and-sign" ? isAuthorized.value : isConnected.value;
+      return formData.initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN ? isAuthorized.value : isConnected.value;
 
     default: {
       return false;

demo/vue-app-new/src/config.ts

@@ -4,7 +4,7 @@ import {
   ChainNamespaceType,
   CONFIRMATION_STRATEGY,
   type CONFIRMATION_STRATEGY_TYPE,
-  InitialAuthenticationModeType,
+  type ConnectorInitialAuthenticationModeType,
   LoginMethodConfig,
   ModalConfig,
   SignTypedDataMessageV4,
@@ -110,7 +110,7 @@ export type FormData = {
     config: WhiteLabelData;
   };
   connectors: string[];
-  initialAuthenticationMode: InitialAuthenticationModeType;
+  initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
   loginProviders: AUTH_CONNECTION_TYPE[];
   showWalletDiscovery: boolean;
   multiInjectedProviderDiscovery: boolean;

demo/vue-app-new/src/store/form.ts

@@ -1,13 +1,13 @@
 import { WEB3AUTH_NETWORK } from "@web3auth/auth";
-import { CHAIN_NAMESPACES, WIDGET_TYPE } from "@web3auth/modal";
+import { CHAIN_NAMESPACES, CONNECTOR_INITIAL_AUTHENTICATION_MODE, WIDGET_TYPE } from "@web3auth/modal";
 import { reactive } from "vue";
 
 import { chainConfigs, defaultLoginMethod, FormData, initWhiteLabel } from "../config";
 
 export const formDataStore = reactive<FormData>({
   // authMode: "",
   connectors: [],
-  initialAuthenticationMode: "connect-only",
+  initialAuthenticationMode: CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_ONLY,
   network: process.env.NODE_ENV === "production" ? WEB3AUTH_NETWORK.SAPPHIRE_MAINNET : WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
   chainNamespaces: [CHAIN_NAMESPACES.EIP155, CHAIN_NAMESPACES.SOLANA],
   chains: [chainConfigs[CHAIN_NAMESPACES.EIP155][0], chainConfigs[CHAIN_NAMESPACES.SOLANA][0]],

packages/modal/src/ui/components/Widget/Widget.tsx

@@ -1,5 +1,13 @@
 import { AUTH_CONNECTION, AUTH_CONNECTION_TYPE, BUILD_ENV, WEB3AUTH_NETWORK } from "@web3auth/auth";
-import { cloneDeep, CONNECTOR_NAMES, log, WALLET_CONNECTOR_TYPE, WALLET_CONNECTORS, WIDGET_TYPE } from "@web3auth/no-modal";
+import {
+  cloneDeep,
+  CONNECTOR_INITIAL_AUTHENTICATION_MODE,
+  CONNECTOR_NAMES,
+  log,
+  WALLET_CONNECTOR_TYPE,
+  WALLET_CONNECTORS,
+  WIDGET_TYPE,
+} from "@web3auth/no-modal";
 import deepmerge from "deepmerge";
 import { useEffect, useMemo, useState } from "react";
 
@@ -57,7 +65,10 @@ function Widget(props: WidgetProps) {
     authBuildEnv: BUILD_ENV.PRODUCTION,
   });
 
-  const isConnectAndSignAuthenticationMode = useMemo(() => initialAuthenticationMode === "connect-and-sign", [initialAuthenticationMode]);
+  const isConnectAndSignAuthenticationMode = useMemo(
+    () => initialAuthenticationMode === CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN,
+    [initialAuthenticationMode]
+  );
 
   useEffect(() => {
     setModalState((prev) => ({ ...prev, modalVisibility: visible }));

packages/modal/src/ui/components/Widget/Widget.type.ts

@@ -1,5 +1,5 @@
 import { SafeEventEmitter } from "@web3auth/auth";
-import { ChainNamespaceType, InitialAuthenticationModeType, WALLET_CONNECTOR_TYPE, WalletRegistry } from "@web3auth/no-modal";
+import { ChainNamespaceType, ConnectorInitialAuthenticationModeType, WALLET_CONNECTOR_TYPE, WalletRegistry } from "@web3auth/no-modal";
 
 import { browser, ExternalWalletEventType, os, platform, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces";
 
@@ -10,7 +10,7 @@ export interface WidgetProps {
   chainNamespaces: ChainNamespaceType[];
   walletRegistry?: WalletRegistry;
   uiConfig: UIConfig;
-  initialAuthenticationMode: InitialAuthenticationModeType;
+  initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
   deviceDetails: { platform: platform; browser: browser; os: os };
   handleSocialLoginClick: (params: SocialLoginEventType) => void;
   handleExternalWalletClick: (params: ExternalWalletEventType) => void;

packages/modal/src/ui/interfaces.ts

@@ -13,7 +13,7 @@ import {
   type AuthLoginParams,
   type BaseConnectorConfig,
   type ChainNamespaceType,
-  InitialAuthenticationModeType,
+  type ConnectorInitialAuthenticationModeType,
   type LoginMethodConfig,
   type LoginModalConfig,
   type UIConfig as CoreUIConfig,
@@ -77,7 +77,7 @@ export type ModalLoginParams = Pick<
 };
 
 export interface LoginModalProps extends UIConfig {
-  initialAuthenticationMode: InitialAuthenticationModeType;
+  initialAuthenticationMode: ConnectorInitialAuthenticationModeType;
   chainNamespaces: ChainNamespaceType[];
   walletRegistry: WalletRegistry;
   web3authClientId: string;

packages/modal/src/ui/loginModal.tsx

@@ -2,13 +2,14 @@
 
 import "./css/index.css";
 
-import { applyWhiteLabelTheme, LANGUAGES, SafeEventEmitter } from "@web3auth/auth";
+import { applyWhiteLabelTheme, LANGUAGES, SafeEventEmitter, THEME_MODES } from "@web3auth/auth";
 import {
   type Analytics,
   ANALYTICS_EVENTS,
   type BaseConnectorConfig,
   type ChainNamespaceType,
   CONNECTOR_EVENTS,
+  CONNECTOR_INITIAL_AUTHENTICATION_MODE,
   getWhitelabelAnalyticsProperties,
   type IConnectorDataEvent,
   log,
@@ -90,15 +91,15 @@ export class LoginModal {
 
     if (!uiConfig.logoDark) this.uiConfig.logoDark = DEFAULT_LOGO_DARK;
     if (!uiConfig.logoLight) this.uiConfig.logoLight = DEFAULT_LOGO_LIGHT;
-    if (!uiConfig.mode) this.uiConfig.mode = "light";
+    if (!uiConfig.mode) this.uiConfig.mode = THEME_MODES.light;
     if (!uiConfig.modalZIndex) this.uiConfig.modalZIndex = "99998";
     if (typeof uiConfig.displayErrorsOnModal === "undefined") this.uiConfig.displayErrorsOnModal = true;
     if (!uiConfig.appName) this.uiConfig.appName = "Web3Auth";
     if (!uiConfig.loginGridCol) this.uiConfig.loginGridCol = 3;
     if (!uiConfig.primaryButton) this.uiConfig.primaryButton = "socialLogin";
     if (!uiConfig.defaultLanguage) this.uiConfig.defaultLanguage = getUserLanguage(uiConfig.defaultLanguage);
     if (!uiConfig.widgetType) this.uiConfig.widgetType = WIDGET_TYPE.MODAL;
-    if (!uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = "connect-only";
+    if (!uiConfig.initialAuthenticationMode) this.uiConfig.initialAuthenticationMode = CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_ONLY;
 
     if (uiConfig.widgetType === WIDGET_TYPE.EMBED && !uiConfig.targetId) {
       log.error("targetId is required for embed widget");

packages/no-modal/src/base/connector/constants.ts

@@ -23,3 +23,8 @@ export const CONNECTOR_CATEGORY = {
   EXTERNAL: "external",
   IN_APP: "in_app",
 } as const;
+
+export const CONNECTOR_INITIAL_AUTHENTICATION_MODE = {
+  CONNECT_ONLY: "connect-only",
+  CONNECT_AND_SIGN: "connect-and-sign",
+} as const;

packages/no-modal/src/base/core/IWeb3Auth.ts

@@ -14,6 +14,7 @@ import { type ChainNamespaceType, type CustomChainConfig } from "../chain/IChain
 import {
   CONNECTED_EVENT_DATA,
   CONNECTOR_EVENTS,
+  CONNECTOR_INITIAL_AUTHENTICATION_MODE,
   type CONNECTOR_STATUS_TYPE,
   ConnectorEvents,
   type ConnectorFn,
@@ -62,7 +63,8 @@ export interface UIConfig extends WhiteLabelData {
   uxMode?: UX_MODE_TYPE;
 }
 
-export type InitialAuthenticationModeType = "connect-only" | "connect-and-sign";
+export type ConnectorInitialAuthenticationModeType =
+  (typeof CONNECTOR_INITIAL_AUTHENTICATION_MODE)[keyof typeof CONNECTOR_INITIAL_AUTHENTICATION_MODE];
 
 export interface IWeb3AuthCoreOptions {
   /**
@@ -185,7 +187,7 @@ export interface IWeb3AuthCoreOptions {
    * Initial authentication mode for the auth connector.
    * @defaultValue "connect-only"
    */
-  initialAuthenticationMode?: InitialAuthenticationModeType;
+  initialAuthenticationMode?: ConnectorInitialAuthenticationModeType;
 }
 
 export type LoginParamMap = {