+ {currentPage() === PAGES.LOGIN && setCurrentPage(PAGES.CONNECT_WALLET)} />}
+ {currentPage() === PAGES.CONNECT_WALLET && setCurrentPage(PAGES.LOGIN)} />}
+
+
+ );
+};
+
+export default Body
\ No newline at end of file
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..6cfe04dde
--- /dev/null
+++ b/packages/modal-ui/src/components/Body/ConnectWallet.tsx
@@ -0,0 +1,78 @@
+import { createSignal, For } from "solid-js"
+import { WalletButton } from "../WalletButton"
+
+export interface ConnectWalletProps {
+ onBackClick?: () => void
+};
+
+const WALLET_LIST = ['Metamask', 'Ronin Wallet', 'Phantom', 'Rainbow', 'Trust Wallet', 'Coinbase Wallet', 'Uniswap', 'Metamask', 'Ronin Wallet', 'Phantom', 'Rainbow', 'Trust Wallet', 'Coinbase Wallet', 'Uniswap', 'Metamask', 'Ronin Wallet', 'Phantom', 'Rainbow', 'Trust Wallet', 'Coinbase Wallet', 'Uniswap']
+
+
+const PAGES = {
+ CONNECT_WALLET: 'Connect Wallet',
+ SELECTED_WALLET: "Selected Wallet"
+}
+
+const ConnectWallet = ({ onBackClick }: ConnectWalletProps) => {
+
+ const [currentPage, setCurrentPage] = createSignal(PAGES.CONNECT_WALLET);
+ const [selectedWallet, setSelectedWallet] = createSignal(false);
+
+ const handleBack = () => {
+ if (!selectedWallet() && currentPage() === PAGES.CONNECT_WALLET && onBackClick) {
+ onBackClick()
+ }
+
+ if (selectedWallet) {
+ setCurrentPage(PAGES.CONNECT_WALLET)
+ setSelectedWallet(false)
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export default ConnectWallet
\ No newline at end of file
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..67fe94b18
--- /dev/null
+++ b/packages/modal-ui/src/components/Body/Login.tsx
@@ -0,0 +1,38 @@
+import SocialLoginList from "../SocialLoginList";
+
+export interface LoginProps {
+ onExternalWalletClick?: () => void;
+};
+
+const Login = ({ onExternalWalletClick }: LoginProps) => {
+
+ const handleConnectWallet = (e: MouseEvent) => {
+ e.preventDefault();
+ if (onExternalWalletClick) onExternalWalletClick()
+ }
+ return (
+
+
+
+ {!selectedWallet() ? {currentPage()}
+ +
+
+
:
+ -
+
+
+
+ }
+
+ {/* Scan with a WalletConnect-supported wallet or click the QR code to copy to your clipboard.
+
+
+ Don't have Trust Wallet?
+ +
+
*/}
+
+
+ Install Chrome
+
+
+ Install Chrome
+
+
+ Install Chrome
+
+
+ )
+}
+
+export default Login;
\ No newline at end of file
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..664e593f1
--- /dev/null
+++ b/packages/modal-ui/src/components/Footer/Footer.tsx
@@ -0,0 +1,21 @@
+const Footer = () => {
+ return (
+
+
+
+ Sign in
+Your Web3Auth wallet with one click
+
+ 
+ 
+
+ )
+}
+
+export default Footer
\ No newline at end of file
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..e69de29bb
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..c556801bd
--- /dev/null
+++ b/packages/modal-ui/src/components/LoginModal/LoginModal.tsx
@@ -0,0 +1,87 @@
+import { ChainNamespaceType, cloneDeep, log, WalletRegistry } from "@web3auth/base";
+import { StateEmitterEvents, SocialLoginEventType, ExternalWalletEventType, ModalState, MODAL_STATUS } from "../../interfaces";
+import { Body } from "../Body";
+import { Modal } from "../Modal";
+import { type SafeEventEmitter } from "@web3auth/auth";
+import { createSignal, createEffect, on, createMemo } from "solid-js";
+import deepmerge from "deepmerge";
+
+export interface LoginModalProps {
+ stateListener: SafeEventEmitter{"modal.footer.message-new"}
+
+
+
+
+
+ );
+};
+
+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..de27c1423
--- /dev/null
+++ b/packages/modal-ui/src/components/SocialLoginButton/SocialLoginButton.tsx
@@ -0,0 +1,15 @@
+export interface SocialLoginButtonProps {
+ showIcon?: boolean;
+ showText?: boolean;
+}
+
+const SocialLoginButton = ({ showIcon = true, showText = true }: SocialLoginButtonProps) => {
+ return (
+
+ );
+};
+
+export default SocialLoginButton;
\ No newline at end of file
diff --git a/packages/modal-ui/src/components/SocialLoginButton/index.ts b/packages/modal-ui/src/components/SocialLoginButton/index.ts
new file mode 100644
index 000000000..ff8830f78
--- /dev/null
+++ b/packages/modal-ui/src/components/SocialLoginButton/index.ts
@@ -0,0 +1 @@
+export { default as SocialLoginButton } from "./SocialLoginButton";
diff --git a/packages/modal-ui/src/components/SocialLoginList/SocialLoginList.tsx b/packages/modal-ui/src/components/SocialLoginList/SocialLoginList.tsx
new file mode 100644
index 000000000..9e4684b2d
--- /dev/null
+++ b/packages/modal-ui/src/components/SocialLoginList/SocialLoginList.tsx
@@ -0,0 +1,45 @@
+import { createSignal, For } from "solid-js"
+import { SocialLoginButton } from "../SocialLoginButton"
+import { cn } from "../../utils/common";
+
+
+const SocialLoginList = () => {
+
+ const loginMethods = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
+
+ const firstRow = loginMethods().slice(0, 3);
+ const otherRow = loginMethods().slice(3);
+
+ const [expand, setExpand] = createSignal(false)
+
+ const handleExpand = () => {
+ setExpand((prev) => !prev)
+ }
+
+ return (
+
+
+ {mergedProps.showCloseIcon &&
+
+
+
}
+ {mergedProps.children}
+
+
+ )
+}
+
+export default SocialLoginList
\ No newline at end of file
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..c8f7f0054
--- /dev/null
+++ b/packages/modal-ui/src/components/WalletButton/WalletButton.tsx
@@ -0,0 +1,19 @@
+export interface WalletButtonProps {
+ label: string;
+ onClick?: () => void
+};
+
+const WalletButton = ({ label, ...props }: WalletButtonProps) => {
+ return (
+
+ )
+}
+
+export default WalletButton
\ No newline at end of file
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
+
+ {(_) =>
+
+
+ {/* 224px */}
+
+
+ {(_) =>
+
+
+ We do not store any data related to your social logins.
+ +