Merge pull request #1618 from Web3Auth/feat/modal-whitelabel-fix

whitelabel changes

demo/react-app/src/services/web3auth.tsx

@@ -106,7 +106,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
  clientId,
  uiConfig: {
  defaultLanguage: "en",
- theme: "light",
+ mode: "light",
  loginGridCol: 3,
  primaryButton: "socialLogin",
  },

packages/modal/package.json

@@ -1,22 +1,7 @@
 {
- "name": "@web3auth/modal",
- "version": "7.0.5",
- "homepage": "https:/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:/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:/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:/Web3Auth/Web3Auth.git"
  },
- "bugs": {
- "url": "https:/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"
 }

packages/ui/src/components/Footer.tsx

@@ -1,11 +1,23 @@
-import { memo } from "react";
+import { WhiteLabelData } from "@toruslabs/openlogin-utils";
+import { memo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 import i18n from "../localeImport";
 
-function Footer() {
+type FooterProps = Partial<Pick<WhiteLabelData, "privacyPolicy" | "tncLink" | "defaultLanguage">>;
+
+function Footer(props: FooterProps) {
+ const { privacyPolicy, tncLink, defaultLanguage = "en" } = props;
  const [t] = useTranslation(undefined, { i18n });
 
+ const getPrivacyUrl = useCallback(() => {
+ return privacyPolicy?.[defaultLanguage] || privacyPolicy?.en || "https://docs.web3auth.io/legal/privacy-policy";
+ }, [privacyPolicy, defaultLanguage]);
+
+ const getTncUrl = useCallback(() => {
+ return tncLink?.[defaultLanguage] || tncLink?.en || "https://docs.web3auth.io/legal/terms-and-conditions";
+ }, [tncLink, defaultLanguage]);
+
  return (
  <div className="w3a-modal__footer">
  <div className="w3a-footer">
@@ -15,11 +27,11 @@ function Footer() {
  {/* {web3authIcon} */}
  </div>
  <div className="w3a-footer__links">
- <a href="https://docs.web3auth.io/legal/terms-and-conditions" target="_blank" rel="noreferrer noopener">
+ <a href={getTncUrl()} target="_blank" rel="noreferrer noopener">
  {t("modal.footer.terms-service")}
  </a>
  <span>|</span>
- <a href="https://docs.web3auth.io/legal/privacy-policy" target="_blank" rel="noreferrer noopener">
+ <a href={getPrivacyUrl()} target="_blank" rel="noreferrer noopener">
  {t("modal.footer.policy")}
  </a>
  </div>

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 = (
  <div className="w3ajs-external-wallet w3a-group">
@@ -138,6 +141,7 @@ export default function Modal(props: ModalProps) {
  <button
  type="button"
  className={`w3a-button ${isExternalPrimary ? "w3a-button--primary" : ""} w-full w3ajs-external-toggle__button`}
+ style={{ backgroundColor: isExternalPrimary ? primaryColor : "" }}
  onClick={() => {
  handleShowExternalWallets(modalState.externalWalletsInitialized);
  setModalState((prevState) => {
@@ -215,6 +219,7 @@ export default function Modal(props: ModalProps) {
  adapter={modalState.socialLoginsConfig?.adapter}
  handleSocialLoginClick={(params: SocialLoginEventType) => preHandleSocialWalletClick(params)}
  isPrimaryBtn={isEmailPrimary}
+ primaryColor={primaryColor}
  />
  )}
 
@@ -239,7 +244,7 @@ export default function Modal(props: ModalProps) {
  </div>
  )}
 
- <Footer />
+ <Footer privacyPolicy={whiteLabel?.privacyPolicy} tncLink={whiteLabel?.tncLink} defaultLanguage={whiteLabel.defaultLanguage} />
  </div>
  </div>
  )

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<string>("");
@@ -101,7 +102,12 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
 
  {isValidInput === false && <div className="w3a-sms-field--error">{t("modal.errors-invalid-number-email")}</div>}
 
- <button disabled={fieldValue === ""} className={`w3a-button ${isPrimaryBtn ? "w3a-button--primary" : ""} w-full`} type="submit">
+ <button
+ disabled={fieldValue === ""}
+ className={`w3a-button ${isPrimaryBtn ? "w3a-button--primary" : ""} w-full`}
+ style={{ backgroundColor: isPrimaryBtn ? primaryColor || "" : "" }}
+ type="submit"
+ >
  {t("modal.social.passwordless-cta")}
  </button>
  </form>

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}

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}
  />
  </ThemedContext.Provider>
  );