+
+ );
+};
+
+export default App;
diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx
new file mode 100644
index 000000000..405892076
--- /dev/null
+++ b/packages/modal-ui/src/components/Body/Body.tsx
@@ -0,0 +1,266 @@
+import { type SafeEventEmitter } from "@web3auth/auth";
+import { ChainNamespaceType, WalletRegistry } from "@web3auth/base/src";
+import Bowser from "bowser";
+import { createContext, createMemo, Match, Show, Suspense, Switch } from "solid-js";
+import { createStore } from "solid-js/store";
+
+import { PAGES } from "../../constants";
+import {
+ browser,
+ ExternalButton,
+ ExternalWalletEventType,
+ mobileOs,
+ MODAL_STATUS,
+ ModalState,
+ platform,
+ SocialLoginEventType,
+ SocialLoginsConfig,
+ StateEmitterEvents,
+} from "../../interfaces";
+import { t } from "../../localeImport";
+import { getBrowserExtensionUrl, getBrowserName, getMobileInstallLink, getOsName } from "../../utils/common";
+import Footer from "../Footer/Footer";
+import { Image } from "../Image";
+import { Loader } from "../Loader";
+import ConnectWallet from "./ConnectWallet";
+import Login from "./Login";
+
+export interface BodyProps {
+ stateListener: SafeEventEmitterTry out your new modal
+
+ {/* Content */}
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+ {/* Footer */}
+
+
+ {/* Wallet Details */}
+
+
+
+
+
+
+ );
+};
+
+export default ConnectWallet;
diff --git a/packages/modal-ui/src/components/Body/Login.tsx b/packages/modal-ui/src/components/Body/Login.tsx
new file mode 100644
index 000000000..71d6c1d89
--- /dev/null
+++ b/packages/modal-ui/src/components/Body/Login.tsx
@@ -0,0 +1,176 @@
+import { LOGIN_PROVIDER } from "@web3auth/auth";
+import { createEffect, createMemo, createSignal, mergeProps, Show } from "solid-js";
+
+import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, SocialLoginsConfig } from "../../interfaces";
+import { t } from "../../localeImport";
+import { cn } from "../../utils/common";
+import { validatePhoneNumber } from "../../utils/modal";
+import SocialLoginList from "../SocialLoginList";
+
+export interface LoginProps {
+ appLogo?: string;
+ appName?: string;
+ showPasswordLessInput: boolean;
+ showExternalWalletButton: boolean;
+ socialLoginsConfig: SocialLoginsConfig;
+ areSocialLoginsVisible: boolean;
+ isEmailPrimary: boolean;
+ isExternalPrimary: boolean;
+ handleSocialLoginClick: (params: { adapter: string; loginParams: { loginProvider: string; login_hint?: string; name: string } }) => void;
+ handleExternalWalletBtnClick?: (flag: boolean) => void;
+ isEmailPasswordLessLoginVisible: boolean;
+ isSmsPasswordLessLoginVisible: boolean;
+}
+
+const Login = (props: LoginProps) => {
+ const mergedProps = mergeProps({ appName: "Web3Auth", appLogo: "" }, props);
+ const [fieldValue, setFieldValue] = createSignal setBodyState({ showWalletDetails: false })}
+ />
+ ;
+ walletConnectUri: string | undefined;
+ showBackButton: boolean;
+ modalStatus: ModalStatusType;
+ chainNamespace: ChainNamespaceType;
+ walletRegistry?: WalletRegistry;
+ appLogo?: string;
+}
+
+const ConnectWallet = (props: ConnectWalletProps) => {
+ const { bodyState, setBodyState } = useContext(BodyContext);
+
+ const [currentPage, setCurrentPage] = createSignal(CONNECT_WALLET_PAGES.CONNECT_WALLET);
+ const [selectedWallet, setSelectedWallet] = createSignal(false);
+ const [externalButtons, setExternalButtons] = createSignal([]);
+ const [totalExternalWallets, setTotalExternalWallets] = createSignal(0);
+ const [selectedButton, setSelectedButton] = createSignal(null);
+ const [walletSearch, setWalletSearch] = createSignal("");
+ const [isLoading, setIsLoading] = createSignal(true);
+
+ const handleBack = () => {
+ log.debug("handleBack", selectedWallet(), currentPage());
+ if (!selectedWallet() && currentPage() === CONNECT_WALLET_PAGES.CONNECT_WALLET && props.onBackClick) {
+ log.debug("handleBack IF");
+ props.onBackClick(false);
+ }
+
+ if (selectedWallet()) {
+ setCurrentPage(CONNECT_WALLET_PAGES.CONNECT_WALLET);
+ setSelectedWallet(false);
+ }
+ };
+
+ const walletDiscoverySupported = createMemo(() => {
+ const supported =
+ props.walletRegistry && Object.keys(props.walletRegistry.default || {}).length > 0 && Object.keys(props.walletRegistry.others || {}).length > 0;
+ return supported;
+ });
+
+ const deviceDetails = createMemo<{ platform: platform; os: os; browser: browser }>(() => {
+ const browserData = bowser.getParser(window.navigator.userAgent);
+ return {
+ platform: browserData.getPlatformType() as platform,
+ os: browserData.getOSName() as os,
+ browser: browserData.getBrowserName().toLowerCase() as browser,
+ };
+ });
+
+ const adapterVisibilityMap = createMemo(() => {
+ const canShowMap: Record = {};
+
+ Object.keys(props.config).forEach((adapter) => {
+ const adapterConfig = props.config[adapter];
+
+ if (!adapterConfig.showOnModal) {
+ canShowMap[adapter] = false;
+ return;
+ }
+
+ if (deviceDetails().platform === "desktop" && adapterConfig.showOnDesktop) {
+ canShowMap[adapter] = true;
+ return;
+ }
+
+ if ((deviceDetails().platform === "mobile" || deviceDetails().platform === "tablet") && adapterConfig.showOnMobile) {
+ canShowMap[adapter] = true;
+ return;
+ }
+
+ canShowMap[adapter] = false;
+ });
+
+ log.debug("adapter visibility map", canShowMap);
+ return canShowMap;
+ });
+
+ const isWalletConnectAdapterIncluded = createMemo(() => Object.keys(props.config).some((adapter) => adapter === WALLET_ADAPTERS.WALLET_CONNECT_V2));
+ const adapterVisibility = createMemo(() => adapterVisibilityMap());
+ const defaultButtonKeys = createMemo(() => new Set(Object.keys(props.walletRegistry.default)));
+
+ const generateWalletButtons = (wallets: Record): ExternalButton[] => {
+ // eslint-disable-next-line solid/reactivity
+ return Object.keys(wallets).reduce((acc, wallet) => {
+ if (adapterVisibility()[wallet] === false) return acc;
+
+ const walletRegistryItem: WalletRegistryItem = wallets[wallet];
+ let href = "";
+ if (deviceDetails().platform === bowser.PLATFORMS_MAP.mobile) {
+ const universalLink = walletRegistryItem?.mobile?.universal;
+ const deepLink = walletRegistryItem?.mobile?.native;
+ href = universalLink || deepLink;
+ }
+
+ const button: ExternalButton = {
+ name: wallet,
+ displayName: walletRegistryItem.name,
+ href,
+ hasInjectedWallet: props.config[wallet]?.isInjected || false,
+ hasWalletConnect: isWalletConnectAdapterIncluded && walletRegistryItem.walletConnect?.sdks?.includes("sign_v2"),
+ hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
+ walletRegistryItem,
+ imgExtension: walletRegistryItem.imgExtension || "svg",
+ };
+
+ if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
+
+ const chainNamespaces = new Set(walletRegistryItem.chains?.map((chain) => chain.split(":")[0]));
+ const injectedChainNamespaces = new Set(walletRegistryItem.injected?.map((injected) => injected.namespace));
+ if (!chainNamespaces.has(props.chainNamespace) && !injectedChainNamespaces.has(props.chainNamespace)) return acc;
+
+ acc.push(button);
+ return acc;
+ }, [] as ExternalButton[]);
+ };
+
+ const customAdapterButtons = createMemo(() => {
+ // eslint-disable-next-line solid/reactivity
+ return Object.keys(props.config).reduce((acc, adapter) => {
+ if (![WALLET_ADAPTERS.WALLET_CONNECT_V2].includes(adapter) && !props.config[adapter].isInjected && adapterVisibilityMap()[adapter]) {
+ acc.push({
+ name: adapter,
+ displayName: props.config[adapter].label || adapter,
+ hasInjectedWallet: false,
+ hasWalletConnect: false,
+ hasInstallLinks: false,
+ });
+ }
+ return acc;
+ }, [] as ExternalButton[]);
+ });
+
+ const allButtons = createMemo(() => {
+ return [...generateWalletButtons(props.walletRegistry.default), ...generateWalletButtons(props.walletRegistry.others)];
+ });
+
+ const filteredButtons = (searchValue: string) => {
+ return allButtons()
+ .concat(customAdapterButtons())
+ .filter((button) => button.name.toLowerCase().includes(searchValue.toLowerCase()));
+ };
+
+ const sortedButtons = createMemo(() => {
+ log.debug("sortedButtons", allButtons());
+ return [
+ ...allButtons().filter((button) => button.hasInjectedWallet && defaultButtonKeys().has(button.name)),
+ ...customAdapterButtons(),
+ ...allButtons().filter((button) => !button.hasInjectedWallet && defaultButtonKeys().has(button.name)),
+ ];
+ });
+
+ const totalExternalWalletsLength = createMemo(() => {
+ return allButtons().length + customAdapterButtons().length;
+ });
+
+ const visibleButtons = createMemo(() => {
+ const visibilityMap = adapterVisibilityMap();
+ // eslint-disable-next-line solid/reactivity
+ return Object.keys(props.config).reduce((acc, adapter) => {
+ if (![WALLET_ADAPTERS.WALLET_CONNECT_V2].includes(adapter) && visibilityMap[adapter]) {
+ acc.push({
+ name: adapter,
+ displayName: props.config[adapter].label || adapter,
+ hasInjectedWallet: props.config[adapter].isInjected,
+ hasWalletConnect: false,
+ hasInstallLinks: false,
+ });
+ }
+ return acc;
+ }, [] as ExternalButton[]);
+ });
+
+ const handleWalletSearch = (e: InputEvent) => {
+ const searchValue = (e.target as HTMLInputElement).value;
+ log.debug("handleWalletSearch", searchValue);
+ setWalletSearch(searchValue);
+ if (searchValue) {
+ setExternalButtons(filteredButtons(searchValue));
+ } else {
+ setExternalButtons(sortedButtons());
+ }
+ };
+
+ createEffect(() => {
+ if (walletDiscoverySupported()) {
+ setExternalButtons(sortedButtons());
+ setTotalExternalWallets(totalExternalWalletsLength());
+ } else {
+ setExternalButtons(visibleButtons());
+ setTotalExternalWallets(visibleButtons().length);
+ }
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 2000);
+ });
+
+ const handleWalletClick = (button: ExternalButton) => {
+ // if has injected wallet, connect to injected wallet
+ // if doesn't have wallet connect & doesn't have install links, must be a custom adapter
+ if (button.hasInjectedWallet || (!button.hasWalletConnect && !button.hasInstallLinks)) {
+ props.handleExternalWalletClick({ adapter: button.name });
+ } else if (button.hasWalletConnect) {
+ setSelectedButton(button);
+ setSelectedWallet(true);
+ setCurrentPage(CONNECT_WALLET_PAGES.SELECTED_WALLET);
+ } else {
+ setBodyState({
+ ...bodyState,
+ showWalletDetails: true,
+ walletDetails: button,
+ });
+ }
+ };
+
+ const headerLogo = createMemo(() => ([DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(props.appLogo) ? "" : props.appLogo));
+
+ return (
+
+ }
+ >
+
+
+
+ );
+};
+
+export default Body;
diff --git a/packages/modal-ui/src/components/Body/ConnectWallet.tsx b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
new file mode 100644
index 000000000..4e01c916f
--- /dev/null
+++ b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -0,0 +1,397 @@
+import { BaseAdapterConfig, ChainNamespaceType, log, WALLET_ADAPTERS, WalletRegistry, WalletRegistryItem } from "@web3auth/base/src";
+import bowser from "bowser";
+import { createEffect, createMemo, createSignal, For, Show, useContext } from "solid-js";
+import { MaskType, QRCodeCanvas } from "solid-qr-code";
+
+import { CONNECT_WALLET_PAGES } from "../../constants";
+import { browser, DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, ExternalButton, ModalStatusType, os, platform } from "../../interfaces";
+import { t } from "../../localeImport";
+import { cn } from "../../utils/common";
+import { Image } from "../Image";
+import { WalletButton } from "../WalletButton";
+import { BodyContext } from "./Body";
+export interface ConnectWalletProps {
+ onBackClick?: (flag: boolean) => void;
+ handleExternalWalletClick: (params: { adapter: string }) => void;
+ config: Record setBodyState({ showWalletDetails: false })}
+ aria-hidden="true"
+ role="button"
+ />
+
+
+
+
+ -
+ {deviceDetails().platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()}
+
+
+ 15 && !isLoading()}
+ fallback={}
+ >
+ {
+ e.target.placeholder = "";
+ }}
+ onBlur={(e) => {
+ e.target.placeholder = t("modal.external.search-wallet", { count: `${totalExternalWallets()}` });
+ }}
+ placeholder={
+ isLoading() ? t("modal.external.search-wallet-loading") : t("modal.external.search-wallet", { count: `${totalExternalWallets()}` })
+ }
+ disabled={isLoading()}
+ class="w3a--appearance-none w3a--px-4 w3a--py-2.5 w3a--border w3a--text-app-gray-900 w3a--border-app-gray-300 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 dark:w3a--border-app-gray-600 dark:w3a--text-app-white placeholder:w3a--text-app-gray-500 dark:placeholder:w3a--text-app-gray-400 placeholder:w3a--text-sm placeholder:w3a--font-normal w3a--rounded-full w3a--outline-none focus:w3a--outline-none active:w3a--outline-none"
+ />
+
+
+ }
+ >
+
+
+
+
+
+
+ + {currentPage() === CONNECT_WALLET_PAGES.SELECTED_WALLET ? selectedButton()?.displayName : currentPage()} +
+ +-
+
+ {t("modal.external.no-wallets-found")}
+
+ }
+ >
+
+
+ {(button) => (
+ handleWalletClick(button)}
+ button={button}
+ deviceDetails={deviceDetails()}
+ walletConnectUri={props.walletConnectUri}
+ />
+ )}
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+ + {t("modal.external.walletconnect-copy")} +
+
+
+ + {t("modal.external.dont-have")} {selectedButton()?.displayName}? +
+ +
+
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/packages/modal-ui/src/components/Body/index.ts b/packages/modal-ui/src/components/Body/index.ts
new file mode 100644
index 000000000..15b1fb2bb
--- /dev/null
+++ b/packages/modal-ui/src/components/Body/index.ts
@@ -0,0 +1 @@
+export { default as Body } from "./Body";
diff --git a/packages/modal-ui/src/components/Footer/Footer.tsx b/packages/modal-ui/src/components/Footer/Footer.tsx
new file mode 100644
index 000000000..32fde8c6f
--- /dev/null
+++ b/packages/modal-ui/src/components/Footer/Footer.tsx
@@ -0,0 +1,22 @@
+import { t } from "../../localeImport";
+const Footer = () => {
+ return (
+
+
+
+
+
+
+ })
+
+ {t("modal.header-title")}
+{subtitle()}
+
+ 
+ 
+
+ );
+};
+
+export default Footer;
diff --git a/packages/modal-ui/src/components/Footer/index.ts b/packages/modal-ui/src/components/Footer/index.ts
new file mode 100644
index 000000000..090a49acd
--- /dev/null
+++ b/packages/modal-ui/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { default as Footer } from "./Footer";
diff --git a/packages/modal-ui/src/components/Image/Image.tsx b/packages/modal-ui/src/components/Image/Image.tsx
new file mode 100644
index 000000000..7b6afc9a0
--- /dev/null
+++ b/packages/modal-ui/src/components/Image/Image.tsx
@@ -0,0 +1,65 @@
+import { createMemo, mergeProps, Show, useContext } from "solid-js";
+
+import { ThemedContext } from "../../context/ThemeContext";
+
+export interface ImageProps {
+ hoverImageId?: string;
+ imageId: string;
+ isButton?: boolean;
+ height?: string;
+ width?: string;
+ fallbackImageId?: string;
+ extension?: string;
+ darkImageId?: string;
+ darkHoverImageId?: string;
+ class?: string;
+}
+
+export default function Image(props: ImageProps) {
+ const mergedProps = mergeProps(
+ {
+ isButton: false,
+ height: "auto",
+ width: "auto",
+ extension: "svg",
+ },
+ props
+ );
+
+ const { isDark } = useContext(ThemedContext);
+
+ const imgName = createMemo(() => (isDark && mergedProps.darkImageId ? mergedProps.darkImageId : mergedProps.imageId));
+ const hoverImgName = createMemo(() => (isDark && mergedProps.darkHoverImageId ? mergedProps.darkHoverImageId : mergedProps.hoverImageId));
+
+ return (
+ <>
+ {t("modal.footer.message-new")}
+
+
+ }.${mergedProps.extension}`})
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Loader;
diff --git a/packages/modal-ui/src/components/Loader/index.ts b/packages/modal-ui/src/components/Loader/index.ts
new file mode 100644
index 000000000..bb4d37f1a
--- /dev/null
+++ b/packages/modal-ui/src/components/Loader/index.ts
@@ -0,0 +1 @@
+export { default as Loader } from "./Loader";
diff --git a/packages/modal-ui/src/components/LoginModal/LoginModal.tsx b/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
new file mode 100644
index 000000000..b8ea8805f
--- /dev/null
+++ b/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
@@ -0,0 +1,203 @@
+import { LOGIN_PROVIDER, type SafeEventEmitter } from "@web3auth/auth";
+import { ADAPTER_NAMES, ChainNamespaceType, cloneDeep, log, WALLET_ADAPTERS, WalletRegistry } from "@web3auth/base/src";
+import deepmerge from "deepmerge";
+import { createEffect, createMemo, createSignal, on } from "solid-js";
+
+import { PAGES } from "../../constants";
+import { ExternalWalletEventType, MODAL_STATUS, ModalState, SocialLoginEventType, StateEmitterEvents } from "../../interfaces";
+import { Body } from "../Body";
+import { Modal } from "../Modal";
+
+export interface LoginModalProps {
+ stateListener: SafeEventEmitter
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ {providerIcon()}
+
+
+
+ {t("modal.adapter-loader.message1", { adapter: props.adapterName })}
+
+
+ {t("modal.adapter-loader.message2", { adapter: props.adapterName })}
+
+
+
+
+ {props.message}
+
+
+
+ {props.message}
+
+
+ );
+};
+
+export default Modal;
diff --git a/packages/modal-ui/src/components/Modal/index.ts b/packages/modal-ui/src/components/Modal/index.ts
new file mode 100644
index 000000000..38a0f4495
--- /dev/null
+++ b/packages/modal-ui/src/components/Modal/index.ts
@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";
diff --git a/packages/modal-ui/src/components/SocialLoginButton/SocialLoginButton.tsx b/packages/modal-ui/src/components/SocialLoginButton/SocialLoginButton.tsx
new file mode 100644
index 000000000..ce36e4fb8
--- /dev/null
+++ b/packages/modal-ui/src/components/SocialLoginButton/SocialLoginButton.tsx
@@ -0,0 +1,38 @@
+import { LOGIN_PROVIDER } from "@web3auth/auth";
+
+import Image from "../Image/Image";
+export interface SocialLoginButtonProps {
+ text?: string;
+ showIcon?: boolean;
+ showText?: boolean;
+ method?: string;
+ isDark?: boolean;
+ isPrimaryBtn?: boolean;
+ onClick?: (e: Event) => void;
+}
+
+function getProviderIcon(method: string, isDark: boolean, isPrimaryBtn: boolean) {
+ const imageId =
+ method === LOGIN_PROVIDER.TWITTER ? `login-twitter-x${isDark ? "-light" : "-dark"}` : `login-${method}${isDark ? "-light" : "-dark"}`;
+ const hoverId =
+ method === LOGIN_PROVIDER.APPLE || method === LOGIN_PROVIDER.GITHUB || method === LOGIN_PROVIDER.TWITTER ? imageId : `login-${method}-active`;
+ if (isPrimaryBtn) {
+ return
+ {mergedProps.showCloseIcon && (
+
+
+
+
+ )}
+ {mergedProps.children}
+
+
+
+ props.handleSocialLoginClick({
+ adapter: mainOption().adapter,
+ loginParams: mainOption().loginParams,
+ })
+ }
+ showText={true}
+ showIcon={true}
+ text={t("modal.social.continueCustom", { adapter: mainOption().name })}
+ />
+
+
+ 0}>
+
+
+ {/* 224px */}
+ 0}>
+
+
+
+
+
+
+ );
+};
+
+export default SocialLoginList;
diff --git a/packages/modal-ui/src/components/SocialLoginList/index.ts b/packages/modal-ui/src/components/SocialLoginList/index.ts
new file mode 100644
index 000000000..25f8a9c2c
--- /dev/null
+++ b/packages/modal-ui/src/components/SocialLoginList/index.ts
@@ -0,0 +1 @@
+export { default } from "./SocialLoginList";
diff --git a/packages/modal-ui/src/components/WalletButton/WalletButton.tsx b/packages/modal-ui/src/components/WalletButton/WalletButton.tsx
new file mode 100644
index 000000000..910bc75b7
--- /dev/null
+++ b/packages/modal-ui/src/components/WalletButton/WalletButton.tsx
@@ -0,0 +1,75 @@
+import { createMemo, Show } from "solid-js";
+
+import { ExternalButton } from "../../interfaces";
+import { t } from "../../localeImport";
+import { Image } from "../Image";
+
+type os = "iOS" | "Android";
+type platform = "mobile" | "desktop" | "tablet";
+type browser = "chrome" | "firefox" | "edge" | "brave" | "safari";
+
+export interface WalletButtonProps {
+ label: string;
+ onClick?: () => void;
+ button?: ExternalButton;
+ deviceDetails?: { platform: platform; os: os; browser: browser };
+ walletConnectUri: string | undefined;
+}
+
+function formatIOSMobile(params: { uri: string; link?: string }) {
+ const encodedUri: string = encodeURIComponent(params.uri);
+ if (params.link.startsWith("http")) return `${params.link}/wc?uri=${encodedUri}`;
+ if (params.link) return `${params.link}wc?uri=${encodedUri}`;
+ return "";
+}
+
+const WalletButton = (props: WalletButtonProps) => {
+ const isLink = createMemo(
+ () => props.deviceDetails.platform !== "desktop" && props.button.href && props.button.hasWalletConnect && !props.button.hasInjectedWallet
+ );
+ const href = createMemo(() =>
+ props.button.href ? formatIOSMobile({ uri: props.walletConnectUri, link: props.button.href }) : props.walletConnectUri
+ );
+
+ const handleBtnClick = () => {
+ if (href() && isLink()) {
+ window.open(href(), "_blank");
+ } else if (props.onClick) {
+ props.onClick();
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default WalletButton;
diff --git a/packages/modal-ui/src/components/WalletButton/index.ts b/packages/modal-ui/src/components/WalletButton/index.ts
new file mode 100644
index 000000000..8d8ae3fd9
--- /dev/null
+++ b/packages/modal-ui/src/components/WalletButton/index.ts
@@ -0,0 +1 @@
+export { default as WalletButton } from "./WalletButton";
diff --git a/packages/modal-ui/src/config.ts b/packages/modal-ui/src/config.ts
new file mode 100644
index 000000000..6f6ca8f03
--- /dev/null
+++ b/packages/modal-ui/src/config.ts
@@ -0,0 +1,23 @@
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_TYPE } from "@web3auth/auth";
+
+export function capitalizeFirstLetter(string: string): string {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const restrictedLoginMethods: Set
+
+ {(row) => (
+ <>
+
+ props.handleSocialLoginClick({
+ adapter: row.adapter,
+ loginParams: row.loginParams,
+ })
+ }
+ showIcon={true}
+ />
+
+ )}
+
+
+
+
+ {(row) => (
+ <>
+
+ props.handleSocialLoginClick({
+ adapter: row.adapter,
+ loginParams: row.loginParams,
+ })
+ }
+ showIcon={true}
+ />
+
+ )}
+
+
+ {t("modal.social.policy")}
+ +