From 06372412cbe73ee1b0e905de65c9bb224a84cfd2 Mon Sep 17 00:00:00 2001 From: smgv Date: Wed, 18 Oct 2023 10:36:02 +0530 Subject: [PATCH 1/2] whitelabel changes --- demo/react-app/package-lock.json | 79 ++++++++++--------- demo/react-app/src/services/web3auth.tsx | 2 +- packages/modal/package.json | 60 +++++++------- packages/ui/src/components/Footer.tsx | 20 ++++- packages/ui/src/components/Modal.tsx | 11 ++- .../components/SocialLoginPasswordless.tsx | 10 ++- packages/ui/src/components/SocialLogins.tsx | 2 + packages/ui/src/loginModal.tsx | 1 + 8 files changed, 109 insertions(+), 76 deletions(-) diff --git a/demo/react-app/package-lock.json b/demo/react-app/package-lock.json index b4a804fc1..fd3d477b7 100644 --- a/demo/react-app/package-lock.json +++ b/demo/react-app/package-lock.json @@ -35,13 +35,14 @@ } }, "../../packages/adapters/openlogin-adapter": { - "version": "6.1.7", + "name": "@web3auth/openlogin-adapter", + "version": "7.0.4", "license": "ISC", "dependencies": { - "@toruslabs/openlogin": "^5.0.3", - "@toruslabs/openlogin-utils": "^5.0.2", - "@web3auth/base": "^6.1.7", - "@web3auth/base-provider": "^6.1.7", + "@toruslabs/openlogin": "^5.2.0", + "@toruslabs/openlogin-utils": "^5.2.0", + "@web3auth/base": "^7.0.4", + "@web3auth/base-provider": "^7.0.4", "lodash.merge": "^4.6.2" }, "devDependencies": { @@ -57,13 +58,14 @@ } }, "../../packages/base": { - "version": "6.1.7", + "name": "@web3auth/base", + "version": "7.0.4", "license": "ISC", "dependencies": { "@toruslabs/http-helpers": "^5.0.0", - "@toruslabs/openlogin": "^5.0.3", - "@toruslabs/openlogin-jrpc": "^5.0.2", - "@toruslabs/openlogin-utils": "^5.0.2", + "@toruslabs/openlogin": "^5.2.0", + "@toruslabs/openlogin-jrpc": "^5.2.0", + "@toruslabs/openlogin-utils": "^5.2.0", "jwt-decode": "^3.1.2", "loglevel": "^1.8.1", "ts-custom-error": "^3.3.1" @@ -77,26 +79,27 @@ } }, "../../packages/modal": { - "version": "6.1.8", + "name": "@web3auth/modal", + "version": "7.0.5", "license": "ISC", "dependencies": { - "@web3auth/base": "^6.1.7", - "@web3auth/base-provider": "^6.1.7", - "@web3auth/ethereum-provider": "^6.1.8", - "@web3auth/metamask-adapter": "^6.1.7", - "@web3auth/no-modal": "^6.1.7", - "@web3auth/openlogin-adapter": "^6.1.7", - "@web3auth/phantom-adapter": "^6.1.8", - "@web3auth/solana-provider": "^6.1.8", - "@web3auth/torus-evm-adapter": "^6.1.7", - "@web3auth/torus-solana-adapter": "^6.1.8", - "@web3auth/ui": "^6.1.8", - "@web3auth/wallet-connect-v2-adapter": "^6.1.8" + "@web3auth/base": "^7.0.4", + "@web3auth/base-provider": "^7.0.4", + "@web3auth/ethereum-provider": "^7.0.4", + "@web3auth/metamask-adapter": "^7.0.4", + "@web3auth/no-modal": "^7.0.4", + "@web3auth/openlogin-adapter": "^7.0.4", + "@web3auth/phantom-adapter": "^7.0.4", + "@web3auth/solana-provider": "^7.0.4", + "@web3auth/torus-evm-adapter": "^7.0.4", + "@web3auth/torus-solana-adapter": "^7.0.4", + "@web3auth/ui": "^7.0.5", + "@web3auth/wallet-connect-v2-adapter": "^7.0.4" }, "devDependencies": { "@svgr/webpack": "^8.1.0", "@toruslabs/isomorphic-style-loader": "^5.3.3", - "@toruslabs/openlogin-utils": "^5.0.2", + "@toruslabs/openlogin-utils": "^5.2.0", "css-loader": "^6.8.1", "postcss-prefix-selector": "^1.16.0", "style-loader": "^3.3.3", @@ -113,13 +116,14 @@ } }, "../../packages/plugins/torus-wallet-connector-plugin": { - "version": "6.1.7", + "name": "@web3auth/torus-wallet-connector-plugin", + "version": "7.0.4", "license": "ISC", "dependencies": { - "@toruslabs/torus-embed": "^2.2.9", - "@web3auth/base": "^6.1.7", - "@web3auth/base-plugin": "^6.1.7", - "@web3auth/no-modal": "^6.1.7", + "@toruslabs/torus-embed": "^4.0.2", + "@web3auth/base": "^7.0.4", + "@web3auth/base-plugin": "^7.0.4", + "@web3auth/no-modal": "^7.0.4", "loglevel": "^1.8.1" }, "devDependencies": { @@ -134,25 +138,26 @@ } }, "../../packages/providers/solana-provider": { - "version": "6.1.8", + "name": "@web3auth/solana-provider", + "version": "7.0.4", "license": "ISC", "dependencies": { "@metamask/rpc-errors": "^6.0.0", - "@toruslabs/base-controllers": "^4.0.1", + "@toruslabs/base-controllers": "^4.2.0", "@toruslabs/openlogin-ed25519": "^5.0.0", - "@toruslabs/openlogin-jrpc": "^5.0.2", + "@toruslabs/openlogin-jrpc": "^5.2.0", "@toruslabs/tweetnacl-js": "^1.0.4", - "@web3auth/base": "^6.1.7", - "@web3auth/base-provider": "^6.1.7", + "@web3auth/base": "^7.0.4", + "@web3auth/base-provider": "^7.0.4", "bn.js": "^5.2.1", "bs58": "^5.0.0", "json-rpc-random-id": "^1.0.1" }, "devDependencies": { - "@solana/web3.js": "^1.78.4", - "@solflare-wallet/sdk": "^1.3.0", - "@types/bn.js": "^5.1.1", - "@types/bs58": "^4.0.1", + "@solana/web3.js": "^1.87.0", + "@solflare-wallet/sdk": "^1.3.2", + "@types/bn.js": "^5.1.2", + "@types/bs58": "^4.0.2", "@types/json-rpc-random-id": "^1.0.1" }, "engines": { diff --git a/demo/react-app/src/services/web3auth.tsx b/demo/react-app/src/services/web3auth.tsx index b5dce8581..255bfcdc8 100644 --- a/demo/react-app/src/services/web3auth.tsx +++ b/demo/react-app/src/services/web3auth.tsx @@ -106,7 +106,7 @@ export const Web3AuthProvider: FunctionComponent = ({ children, clientId, uiConfig: { defaultLanguage: "en", - theme: "light", + mode: "light", loginGridCol: 3, primaryButton: "socialLogin", }, diff --git a/packages/modal/package.json b/packages/modal/package.json index bced2a835..1c31663fc 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -1,22 +1,7 @@ { - "name": "@web3auth/modal", - "version": "7.0.5", - "homepage": "https://github.com/Web3Auth/Web3Auth#readme", - "license": "ISC", - "main": "dist/modal.cjs.js", - "module": "dist/modal.esm.js", - "unpkg": "dist/modal.umd.min.js", - "jsdelivr": "dist/modal.umd.min.js", - "types": "dist/types/index.d.ts", "author": "Torus Labs", - "scripts": { - "test": "mocha --config ../../.mocharc.json test/**.ts", - "test-debugger": "mocha --config ../../.mocharc.json --inspect-brk test/**.ts", - "dev": "torus-scripts start", - "build": "torus-scripts build", - "lint": "eslint --fix 'src/**/*.ts'", - "prepack": "npm run build", - "pre-commit": "lint-staged --cwd ." + "bugs": { + "url": "https://github.com/Web3Auth/Web3Auth/issues" }, "dependencies": { "@web3auth/base": "^7.0.4", @@ -42,33 +27,48 @@ "tailwindcss": "^3.3.3", "url-loader": "^4.1.1" }, - "peerDependencies": { - "@babel/runtime": "7.x", - "@solana/web3.js": "^1.x" + "engines": { + "node": ">=18.x", + "npm": ">=9.x" }, "files": [ "dist", "src" ], + "homepage": "https://github.com/Web3Auth/Web3Auth#readme", + "jsdelivr": "dist/modal.umd.min.js", + "keywords": [], + "license": "ISC", "lint-staged": { "!(*d).ts": [ "eslint --cache --fix", "prettier --write" ] }, + "main": "dist/modal.cjs.js", + "module": "dist/modal.esm.js", + "name": "@web3auth/modal", + "peerDependencies": { + "@babel/runtime": "7.x", + "@solana/web3.js": "^1.x" + }, + "publishConfig": { + "access": "public" + }, "repository": { "type": "git", "url": "git+https://github.com/Web3Auth/Web3Auth.git" }, - "bugs": { - "url": "https://github.com/Web3Auth/Web3Auth/issues" - }, - "keywords": [], - "publishConfig": { - "access": "public" + "scripts": { + "build": "torus-scripts build", + "dev": "torus-scripts start", + "lint": "eslint --fix 'src/**/*.ts'", + "pre-commit": "lint-staged --cwd .", + "prepack": "npm run build", + "test": "mocha --config ../../.mocharc.json test/**.ts", + "test-debugger": "mocha --config ../../.mocharc.json --inspect-brk test/**.ts" }, - "engines": { - "node": ">=18.x", - "npm": ">=9.x" - } + "types": "dist/types/index.d.ts", + "unpkg": "dist/modal.umd.min.js", + "version": "7.0.5" } diff --git a/packages/ui/src/components/Footer.tsx b/packages/ui/src/components/Footer.tsx index 43b01e14e..5d2aea28e 100644 --- a/packages/ui/src/components/Footer.tsx +++ b/packages/ui/src/components/Footer.tsx @@ -1,11 +1,25 @@ +import { WhiteLabelData } from "@toruslabs/openlogin-utils"; import { memo } from "react"; import { useTranslation } from "react-i18next"; import i18n from "../localeImport"; -function Footer() { +type FooterProps = Partial>; + +function Footer(props: FooterProps) { + const { privacyPolicy, tncLink, defaultLanguage = "en" } = props; const [t] = useTranslation(undefined, { i18n }); + const getPrivacyUrl = () => { + if (privacyPolicy && privacyPolicy?.[defaultLanguage]) return privacyPolicy[defaultLanguage]; + return "https://docs.web3auth.io/legal/privacy-policy"; + }; + + const getTncUrl = () => { + if (tncLink && tncLink?.[defaultLanguage]) return tncLink[defaultLanguage]; + return "https://docs.web3auth.io/legal/terms-and-conditions"; + }; + return (
@@ -15,11 +29,11 @@ function Footer() { {/* {web3authIcon} */}
- + {t("modal.footer.terms-service")} | - + {t("modal.footer.policy")}
diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx index 74db3813b..bebc887d0 100644 --- a/packages/ui/src/components/Modal.tsx +++ b/packages/ui/src/components/Modal.tsx @@ -1,5 +1,5 @@ import type { SafeEventEmitter } from "@toruslabs/openlogin-jrpc"; -import { LOGIN_PROVIDER } from "@toruslabs/openlogin-utils"; +import { LOGIN_PROVIDER, WhiteLabelData } from "@toruslabs/openlogin-utils"; import { ADAPTER_NAMES, log } from "@web3auth/base"; import cloneDeep from "lodash.clonedeep"; import deepmerge from "lodash.merge"; @@ -25,6 +25,7 @@ interface ModalProps { handleExternalWalletClick: (params: ExternalWalletEventType) => void; handleShowExternalWallets: (externalWalletsInitialized: boolean) => void; closeModal: () => void; + whiteLabel?: WhiteLabelData; } log.enableAll(); @@ -58,7 +59,8 @@ export default function Modal(props: ModalProps) { const { isDark } = useContext(ThemedContext); const [t] = useTranslation(undefined, { i18n }); - const { stateListener, appLogo, appName, handleSocialLoginClick, handleExternalWalletClick, handleShowExternalWallets, closeModal } = props; + const { stateListener, appLogo, appName, handleSocialLoginClick, handleExternalWalletClick, handleShowExternalWallets, closeModal, whiteLabel } = + props; useEffect(() => { stateListener.emit("MOUNTED"); @@ -130,6 +132,7 @@ export default function Modal(props: ModalProps) { const isEmailPrimary = modalState.socialLoginsConfig?.uiConfig?.primaryButton === "emailLogin"; const isExternalPrimary = modalState.socialLoginsConfig?.uiConfig?.primaryButton === "externalLogin"; + const primaryColor = whiteLabel?.theme?.primary || ""; const externalWalletButton = (
@@ -138,6 +141,7 @@ export default function Modal(props: ModalProps) {
)} -
+
) diff --git a/packages/ui/src/components/SocialLoginPasswordless.tsx b/packages/ui/src/components/SocialLoginPasswordless.tsx index 6a65f7ca6..d43463bd1 100644 --- a/packages/ui/src/components/SocialLoginPasswordless.tsx +++ b/packages/ui/src/components/SocialLoginPasswordless.tsx @@ -13,9 +13,10 @@ interface SocialLoginPasswordlessProps { isSmsVisible: boolean; adapter: string; handleSocialLoginClick: (params: { adapter: string; loginParams: { loginProvider: string; login_hint?: string; name: string } }) => void; + primaryColor?: string; } export default function SocialLoginPasswordless(props: SocialLoginPasswordlessProps) { - const { handleSocialLoginClick, adapter, isPrimaryBtn, isEmailVisible, isSmsVisible } = props; + const { handleSocialLoginClick, adapter, isPrimaryBtn, isEmailVisible, isSmsVisible, primaryColor } = props; const { isDark } = useContext(ThemedContext); const [fieldValue, setFieldValue] = useState(""); @@ -101,7 +102,12 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr {isValidInput === false &&
{t("modal.errors-invalid-number-email")}
} - diff --git a/packages/ui/src/components/SocialLogins.tsx b/packages/ui/src/components/SocialLogins.tsx index 8548d9058..4b361b167 100644 --- a/packages/ui/src/components/SocialLogins.tsx +++ b/packages/ui/src/components/SocialLogins.tsx @@ -67,6 +67,7 @@ export default function SocialLogins(props: SocialLoginProps) { const isMainOption = socialLoginsConfig.loginMethods[method].mainOption; const isPrimaryBtn = socialLoginsConfig?.uiConfig?.primaryButton === "socialLogin" && order === 1; + const primaryColor = socialLoginsConfig?.uiConfig?.theme?.primary || ""; const imageId = `login-${method}${isDark || isPrimaryBtn ? "-light" : "-dark"}`; const hoverId = `login-${method}-active`; @@ -91,6 +92,7 @@ export default function SocialLogins(props: SocialLoginProps) { }) } className={`w3a-button ${isPrimaryBtn ? "w3a-button--primary" : ""} w3a-button--login h-12 w-full`} + style={{ backgroundColor: isPrimaryBtn ? primaryColor : "" }} title={name} > {providerIcon} diff --git a/packages/ui/src/loginModal.tsx b/packages/ui/src/loginModal.tsx index edf7eab9c..f70ffb238 100644 --- a/packages/ui/src/loginModal.tsx +++ b/packages/ui/src/loginModal.tsx @@ -181,6 +181,7 @@ class LoginModal extends SafeEventEmitter { handleSocialLoginClick={this.handleSocialLoginClick} appLogo={darkState.isDark ? this.uiConfig.logoDark : this.uiConfig.logoLight} appName={this.uiConfig.appName} + whiteLabel={this.uiConfig} /> ); From b905f36c29084e5838728ff9657136cd2f67bb23 Mon Sep 17 00:00:00 2001 From: smgv Date: Wed, 18 Oct 2023 13:32:37 +0530 Subject: [PATCH 2/2] comment review changes for for footer file --- packages/ui/src/components/Footer.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/components/Footer.tsx b/packages/ui/src/components/Footer.tsx index 5d2aea28e..425a717f6 100644 --- a/packages/ui/src/components/Footer.tsx +++ b/packages/ui/src/components/Footer.tsx @@ -1,5 +1,5 @@ import { WhiteLabelData } from "@toruslabs/openlogin-utils"; -import { memo } from "react"; +import { memo, useCallback } from "react"; import { useTranslation } from "react-i18next"; import i18n from "../localeImport"; @@ -10,15 +10,13 @@ function Footer(props: FooterProps) { const { privacyPolicy, tncLink, defaultLanguage = "en" } = props; const [t] = useTranslation(undefined, { i18n }); - const getPrivacyUrl = () => { - if (privacyPolicy && privacyPolicy?.[defaultLanguage]) return privacyPolicy[defaultLanguage]; - return "https://docs.web3auth.io/legal/privacy-policy"; - }; + const getPrivacyUrl = useCallback(() => { + return privacyPolicy?.[defaultLanguage] || privacyPolicy?.en || "https://docs.web3auth.io/legal/privacy-policy"; + }, [privacyPolicy, defaultLanguage]); - const getTncUrl = () => { - if (tncLink && tncLink?.[defaultLanguage]) return tncLink[defaultLanguage]; - return "https://docs.web3auth.io/legal/terms-and-conditions"; - }; + const getTncUrl = useCallback(() => { + return tncLink?.[defaultLanguage] || tncLink?.en || "https://docs.web3auth.io/legal/terms-and-conditions"; + }, [tncLink, defaultLanguage]); return (