diff --git a/.vscode/settings.json b/.vscode/settings.json index 3cacfb68d..fbf5c6634 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -13,5 +13,5 @@ "changeProcessCWD": true } ], - "cSpell.words": ["clsx", "JRPC", "PASSWORDLESS", "Ronin", "Solana", "WEBAUTHN"] + "cSpell.words": ["bowser", "clsx", "JRPC", "PASSWORDLESS", "Ronin", "Solana", "SQAURE", "WEBAUTHN"] } diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json index d0270b915..49f4bcafc 100644 --- a/demo/vue-app-new/package-lock.json +++ b/demo/vue-app-new/package-lock.json @@ -55,6 +55,7 @@ } }, "../../packages/adapters/auth-adapter": { + "name": "@web3auth/auth-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -72,6 +73,7 @@ } }, "../../packages/adapters/base-evm-adapter": { + "name": "@web3auth/base-evm-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -87,6 +89,7 @@ } }, "../../packages/adapters/base-solana-adapter": { + "name": "@web3auth/base-solana-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -106,6 +109,7 @@ } }, "../../packages/adapters/coinbase-adapter": { + "name": "@web3auth/coinbase-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -125,6 +129,7 @@ } }, "../../packages/adapters/default-evm-adapter": { + "name": "@web3auth/default-evm-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -142,6 +147,7 @@ } }, "../../packages/adapters/default-solana-adapter": { + "name": "@web3auth/default-solana-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -166,6 +172,7 @@ } }, "../../packages/adapters/torus-evm-adapter": { + "name": "@web3auth/torus-evm-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -182,6 +189,7 @@ } }, "../../packages/adapters/torus-solana-adapter": { + "name": "@web3auth/torus-solana-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -201,6 +209,7 @@ } }, "../../packages/adapters/wallet-connect-v2-adapter": { + "name": "@web3auth/wallet-connect-v2-adapter", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -229,6 +238,7 @@ } }, "../../packages/base": { + "name": "@web3auth/base", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -249,11 +259,12 @@ } }, "../../packages/composables/modal-vue-composables": { + "name": "@web3auth/modal-vue-composables", "version": "9.3.1", "license": "ISC", "dependencies": { "@web3auth/base": "^9.3.0", - "@web3auth/modal": "file:../../modal" + "@web3auth/modal": "^9.3.1" }, "devDependencies": { "@web3auth/auth": "^9.4.1", @@ -269,15 +280,15 @@ } }, "../../packages/modal": { + "name": "@web3auth/modal", "version": "9.3.1", "license": "ISC", "dependencies": { "@web3auth/auth-adapter": "^9.3.0", "@web3auth/base": "^9.3.0", "@web3auth/base-provider": "^9.3.0", - "@web3auth/modal-ui": "file:../modal-ui", + "@web3auth/modal-ui": "^9.3.1", "@web3auth/no-modal": "^9.3.1", - "@web3auth/ui": "^9.3.1", "deepmerge": "^4.3.1" }, "devDependencies": { @@ -306,6 +317,7 @@ } }, "../../packages/no-modal": { + "name": "@web3auth/no-modal", "version": "9.3.1", "license": "ISC", "dependencies": { @@ -338,6 +350,7 @@ } }, "../../packages/plugins/solana-wallet-connector-plugin": { + "name": "@web3auth/solana-wallet-connector-plugin", "version": "9.3.1", "license": "ISC", "dependencies": { @@ -356,6 +369,7 @@ } }, "../../packages/plugins/wallet-services-plugin": { + "name": "@web3auth/wallet-services-plugin", "version": "9.3.1", "license": "ISC", "dependencies": { @@ -377,6 +391,7 @@ } }, "../../packages/providers/account-abstraction-provider": { + "name": "@web3auth/account-abstraction-provider", "version": "9.3.1", "license": "ISC", "dependencies": { @@ -399,6 +414,7 @@ } }, "../../packages/providers/base-provider": { + "name": "@web3auth/base-provider", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -419,6 +435,7 @@ } }, "../../packages/providers/ethereum-provider": { + "name": "@web3auth/ethereum-provider", "version": "9.3.0", "license": "ISC", "dependencies": { @@ -449,6 +466,7 @@ } }, "../../packages/providers/solana-provider": { + "name": "@web3auth/solana-provider", "version": "9.3.0", "license": "ISC", "dependencies": { diff --git a/package-lock.json b/package-lock.json index 46a2edca9..3e73fa88c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "packages/base", "packages/composables/*", "packages/hooks/*", - "packages/modal", "packages/modal-ui", + "packages/modal", "packages/no-modal", "packages/plugins/*", "packages/providers/*", @@ -27267,6 +27267,14 @@ } } }, + "node_modules/solid-icons": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/solid-icons/-/solid-icons-1.1.0.tgz", + "integrity": "sha512-IesTfr/F1ElVwH2E1110s2RPXH4pujKfSs+koT8rwuTAdleO5s26lNSpqJV7D1+QHooJj18mcOiz2PIKs0ic+A==", + "peerDependencies": { + "solid-js": "*" + } + }, "node_modules/solid-js": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.3.tgz", @@ -27278,6 +27286,17 @@ "seroval-plugins": "^1.1.0" } }, + "node_modules/solid-qr-code": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/solid-qr-code/-/solid-qr-code-0.1.11.tgz", + "integrity": "sha512-8TpELeuK6OoPz5TfJaycsna63IivaSr6Y34qU79eYDF+SRTowO9os8gpElNvNe2FFROZuMZpf28jgmn9gV20Eg==", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "solid-js": "^1.8.0" + } + }, "node_modules/sonic-boom": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-2.8.0.tgz", @@ -31248,7 +31267,9 @@ "clsx": "^2.1.1", "copy-to-clipboard": "^3.3.3", "deepmerge": "^4.3.1", + "solid-icons": "^1.1.0", "solid-js": "^1.8.11", + "solid-qr-code": "^0.1.11", "tailwind-merge": "^2.5.5" }, "devDependencies": { diff --git a/package.json b/package.json index 39a523954..1ea86e872 100644 --- a/package.json +++ b/package.json @@ -80,8 +80,8 @@ "packages/base", "packages/composables/*", "packages/hooks/*", - "packages/modal", "packages/modal-ui", + "packages/modal", "packages/no-modal", "packages/plugins/*", "packages/providers/*", diff --git a/packages/modal-ui/package.json b/packages/modal-ui/package.json index aebcfa952..e1d510f62 100644 --- a/packages/modal-ui/package.json +++ b/packages/modal-ui/package.json @@ -65,7 +65,8 @@ "deepmerge": "^4.3.1", "solid-js": "^1.8.11", "tailwind-merge": "^2.5.5", - "@solid-primitives/i18n": "^2.1.1" + "@solid-primitives/i18n": "^2.1.1", + "solid-qr-code": "^0.1.11" }, "lint-staged": { "!(*d).ts": [ diff --git a/packages/modal-ui/src/components/Body/Body.tsx b/packages/modal-ui/src/components/Body/Body.tsx index 9c83f3a05..a3f3969f7 100644 --- a/packages/modal-ui/src/components/Body/Body.tsx +++ b/packages/modal-ui/src/components/Body/Body.tsx @@ -1,9 +1,26 @@ import { type SafeEventEmitter } from "@web3auth/auth"; import { ChainNamespaceType, WalletRegistry } from "@web3auth/base/src"; -import { createSignal, Show } from "solid-js"; +import Bowser from "bowser"; +import { createContext, createEffect, createMemo, Show } from "solid-js"; +import { createStore } from "solid-js/store"; -import { ExternalWalletEventType, ModalState, SocialLoginEventType, SocialLoginsConfig, StateEmitterEvents } from "../../interfaces"; +import { PAGES } from "../../constants"; +import { + browser, + ExternalButton, + ExternalWalletEventType, + mobileOs, + MODAL_STATUS, + ModalState, + platform, + SocialLoginEventType, + SocialLoginsConfig, + StateEmitterEvents, +} from "../../interfaces"; +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"; @@ -26,54 +43,202 @@ export interface BodyProps { handleExternalWalletBtnClick?: (flag: boolean) => void; modalState: ModalState; preHandleExternalWalletClick: (params: { adapter: string }) => void; + setModalState: (state: ModalState) => void; + onCloseLoader: () => void; + isEmailPasswordLessLoginVisible: boolean; + isSmsPasswordLessLoginVisible: boolean; } -const PAGES = { - LOGIN: "login", - CONNECT_WALLET: "connect_wallet", -}; +interface BodyContextType { + bodyState: { + showWalletDetails: boolean; + walletDetails: ExternalButton; + }; + setBodyState: (state: { showWalletDetails: boolean; walletDetails: ExternalButton }) => void; +} + +export const BodyContext = createContext({} as BodyContextType); const Body = (props: BodyProps) => { - const [currentPage, setCurrentPage] = createSignal(PAGES.LOGIN); + const [bodyState, setBodyState] = createStore<{ + showWalletDetails: boolean; + walletDetails: ExternalButton; + }>({ + showWalletDetails: false, + walletDetails: null, + }); + + createEffect(() => { + // eslint-disable-next-line no-console + console.log(props.socialLoginsConfig, "socialLoginsConfig", props.modalState, "modalState"); + }); const handleExternalWalletBtnClick = (flag: boolean) => { - setCurrentPage(PAGES.CONNECT_WALLET); + props.setModalState({ + ...props.modalState, + currentPage: PAGES.CONNECT_WALLET, + }); if (props.handleExternalWalletBtnClick) props.handleExternalWalletBtnClick(flag); }; const handleBackClick = (flag: boolean) => { - setCurrentPage(PAGES.LOGIN); + props.setModalState({ + ...props.modalState, + currentPage: PAGES.LOGIN, + }); if (props.handleExternalWalletBtnClick) props.handleExternalWalletBtnClick(flag); }; + // Wallet Details + const deviceDetails = createMemo<{ platform: platform; browser: browser; os: mobileOs }>(() => { + const browserData = Bowser.getParser(window.navigator.userAgent); + return { + platform: browserData.getPlatformType() as platform, + browser: browserData.getBrowserName().toLowerCase() as browser, + os: browserData.getOSName() as mobileOs, + }; + }); + + const mobileInstallLinks = () => { + const installConfig = bodyState.walletDetails.walletRegistryItem.app || {}; + const installLinks = Object.keys(installConfig).reduce((acc, os) => { + if (!["android", "ios"].includes(os)) return acc; + const appId = installConfig[os as mobileOs]; + if (!appId) return acc; + const appUrl = getMobileInstallLink(os as mobileOs, appId); + if (!appUrl) return acc; + const logoLight = `${os}-light`; + const logoDark = `${os}-dark`; + acc.push( +
  • + + + +
    • + ); + return acc; + }, []); + return installLinks; + }; + + const desktopInstallLinks = () => { + // if browser is brave, use chrome extension + const browserType = deviceDetails().browser === "brave" ? "chrome" : deviceDetails().browser; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const browserExtensionConfig: any = bodyState.walletDetails.walletRegistryItem.app || {}; + const extensionForCurrentBrowser = + browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined; + const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser; + const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null; + const installLink = browserExtensionUrl ? ( +
  • + + + +
    • + ) : null; + return [installLink, ...mobileInstallLinks()]; + }; + return ( -
    - - - - - - -
    -
    + +
    + + + + } + > + + + + + +