Merge branch 'master' of github.com:Web3Auth/Web3Auth into v9

Web3Auth · Aug 30, 2024 · e7dae55 · e7dae55
2 parents cdc1c98 + 5658f61
commit e7dae55
Show file tree

Hide file tree

Showing 21 changed files with 239 additions and 75 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "8.12.4",
+  "version": "8.12.7",
   "npmClient": "npm"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/composables/modal-vue-composables/package.json b/packages/composables/modal-vue-composables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/modal-vue-composables",
-  "version": "8.12.4",
+  "version": "8.12.7",
   "description": "Vue composables to simplify integration with web3Auth modal SDK.",
   "keywords": [
     "web3Auth/modal-vue-composables",
@@ -29,7 +29,7 @@
   ],
   "dependencies": {
     "@web3auth/base": "^8.12.4",
-    "@web3auth/modal": "^8.12.4"
+    "@web3auth/modal": "^8.12.7"
   },
   "devDependencies": {
     "@toruslabs/openlogin-utils": "^8.2.1",

diff --git a/packages/hooks/modal-react-hooks/package.json b/packages/hooks/modal-react-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/modal-react-hooks",
-  "version": "8.12.4",
+  "version": "8.12.7",
   "description": "React hooks to simplify integration with web3Auth modal SDK.",
   "keywords": [
     "web3Auth/modal-react-hooks",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@web3auth/base": "^8.12.4",
-    "@web3auth/modal": "^8.12.4"
+    "@web3auth/modal": "^8.12.7"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.x",

diff --git a/packages/hooks/wallet-services-plugin-react-hooks/package.json b/packages/hooks/wallet-services-plugin-react-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/wallet-services-plugin-react-hooks",
-  "version": "8.12.4",
+  "version": "8.12.5",
   "description": "React hooks to simplify integration with web3Auth wallet-services-plugin SDK.",
   "keywords": [
     "web3Auth/wallet-services-plugin-react-hooks",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@web3auth/base": "^8.12.4",
-    "@web3auth/wallet-services-plugin": "^8.12.4"
+    "@web3auth/wallet-services-plugin": "^8.12.5"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.x",

diff --git a/packages/modal/package.json b/packages/modal/package.json
@@ -8,7 +8,7 @@
     "@web3auth/base-provider": "^8.12.4",
     "@web3auth/no-modal": "^8.12.4",
     "@web3auth/openlogin-adapter": "^8.12.4",
-    "@web3auth/ui": "^8.12.4",
+    "@web3auth/ui": "^8.12.7",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2"
   },
@@ -69,5 +69,5 @@
   },
   "types": "dist/types/index.d.ts",
   "unpkg": "dist/modal.umd.min.js",
-  "version": "8.12.4"
+  "version": "8.12.7"
 }
diff --git a/packages/plugins/wallet-services-plugin/package.json b/packages/plugins/wallet-services-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/wallet-services-plugin",
-  "version": "8.12.4",
+  "version": "8.12.5",
   "description": "Wallet services for which can be used with Web3Auth or private key providers used inside Web3Auth",
   "keywords": [
     "web3Auth/wallet-services-plugin",
@@ -37,7 +37,7 @@
     "@toruslabs/openlogin-jrpc": "^8.3.0",
     "@web3auth/base": "^8.12.4",
     "@web3auth/no-modal": "^8.12.4",
-    "@web3auth/ws-embed": "^2.0.21",
+    "@web3auth/ws-embed": "^2.0.23",
     "loglevel": "^1.9.1"
   },
   "peerDependencies": {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/ui",
-  "version": "8.12.4",
+  "version": "8.12.7",
   "description": "Ui modal for web3Auth",
   "keywords": [
     "web3Auth/ui",

diff --git a/packages/ui/src/components/ExternalWallets.tsx b/packages/ui/src/components/ExternalWallets.tsx
@@ -198,44 +198,49 @@ export default function ExternalWallet(props: ExternalWalletsProps) {
           }
           return null;
         })}
-        {modalStatus === MODAL_STATUS.INITIALIZED && (
-          <ul className="w3a-adapter-list w3ajs-wallet-adapters">
-            {externalButtons.map((button) => {
-              const providerIcon = button.isLink ? (
-                <img src={button.logo} height="auto" width="auto" alt={`login-${button.name}`} />
-              ) : (
-                <Image imageId={`login-${button.name}`} hoverImageId={`login-${button.name}`} height="32" width="32" isButton />
-              );
-
-              const isBlock = externalButtons.length === 1 || button.block;
-
-              const label = isBlock ? <p className="ml-2 text-left">{config[button.name]?.label || button.name}</p> : "";
-              return (
-                <li className={[`w3a-adapter-item`, isBlock ? "w3a-adapter-item--full" : "col-span-2"].join(" ")} key={button.name}>
-                  {button.isLink ? (
-                    <a key={button.name} href={button.href} rel="noopener noreferrer" target="_blank">
-                      <Button type="button" variant="tertiary" className="w-full">
+        {modalStatus === MODAL_STATUS.INITIALIZED &&
+          (externalButtons.length > 0 ? (
+            <ul className="w3a-adapter-list w3ajs-wallet-adapters">
+              {externalButtons.map((button) => {
+                const providerIcon = button.isLink ? (
+                  <img src={button.logo} height="auto" width="auto" alt={`login-${button.name}`} />
+                ) : (
+                  <Image imageId={`login-${button.name}`} hoverImageId={`login-${button.name}`} height="32" width="32" isButton />
+                );
+
+                const isBlock = externalButtons.length === 1 || button.block;
+
+                const label = isBlock ? <p className="ml-2 text-left">{config[button.name]?.label || button.name}</p> : "";
+                return (
+                  <li className={[`w3a-adapter-item`, isBlock ? "w3a-adapter-item--full" : "col-span-2"].join(" ")} key={button.name}>
+                    {button.isLink ? (
+                      <a key={button.name} href={button.href} rel="noopener noreferrer" target="_blank">
+                        <Button type="button" variant="tertiary" className="w-full">
+                          {providerIcon}
+                          {label}
+                        </Button>
+                      </a>
+                    ) : (
+                      <Button
+                        variant="tertiary"
+                        type="button"
+                        onClick={() => handleExternalWalletClick({ adapter: button.name })}
+                        className="w-full"
+                        title={config[button.name]?.label || button.name}
+                      >
                         {providerIcon}
                         {label}
                       </Button>
-                    </a>
-                  ) : (
-                    <Button
-                      variant="tertiary"
-                      type="button"
-                      onClick={() => handleExternalWalletClick({ adapter: button.name })}
-                      className="w-full"
-                      title={config[button.name]?.label || button.name}
-                    >
-                      {providerIcon}
-                      {label}
-                    </Button>
-                  )}
-                </li>
-              );
-            })}
-          </ul>
-        )}
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <div className="mt-4 text-center text-sm font-normal text-app-gray-500 dark:text-app-gray-400">
+              {t("modal.external.no-wallets-found")}
+            </div>
+          ))}
       </div>
     </div>
   );

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -221,7 +221,7 @@ export default function Modal(props: ModalProps) {
               ) : (
                 <ExternalWallets
                   modalStatus={modalState.status}
-                  showBackButton={areSocialLoginsVisible}
+                  showBackButton={areSocialLoginsVisible || isEmailPasswordlessLoginVisible || isSmsPasswordlessLoginVisible}
                   handleExternalWalletClick={preHandleExternalWalletClick}
                   walletConnectUri={modalState.walletConnectUri}
                   wcAdapters={modalState.wcAdapters}

diff --git a/packages/ui/src/components/SocialLoginPasswordless.tsx b/packages/ui/src/components/SocialLoginPasswordless.tsx
@@ -28,17 +28,24 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
   const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const value = fieldValue;
-    const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
-    if (isEmailValid) {
-      return handleSocialLoginClick({ adapter, loginParams: { loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, login_hint: value, name: "Email" } });
+    if (isEmailVisible) {
+      const isEmailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
+      if (isEmailValid) {
+        return handleSocialLoginClick({
+          adapter,
+          loginParams: { loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, login_hint: value, name: "Email" },
+        });
+      }
     }
-    const number = value.startsWith("+") ? value : `${countryCode}${value}`;
-    const result = await validatePhoneNumber(number);
-    if (result) {
-      return handleSocialLoginClick({
-        adapter,
-        loginParams: { loginProvider: LOGIN_PROVIDER.SMS_PASSWORDLESS, login_hint: typeof result === "string" ? result : number, name: "Mobile" },
-      });
+    if (isSmsVisible) {
+      const number = value.startsWith("+") ? value : `${countryCode}${value}`;
+      const result = await validatePhoneNumber(number);
+      if (result) {
+        return handleSocialLoginClick({
+          adapter,
+          loginParams: { loginProvider: LOGIN_PROVIDER.SMS_PASSWORDLESS, login_hint: typeof result === "string" ? result : number, name: "Mobile" },
+        });
+      }
     }
 
     setIsValidInput(false);
@@ -72,6 +79,12 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
     return "+(00)123456";
   }, [isEmailVisible, isSmsVisible]);
 
+  const invalidInputErrorMessage = useMemo(() => {
+    if (isEmailVisible && isSmsVisible) return "modal.errors-invalid-number-email";
+    if (isEmailVisible) return "modal.errors-invalid-email";
+    return "modal.errors-invalid-number";
+  }, [isEmailVisible, isSmsVisible]);
+
   return (
     <div className="w3ajs-passwordless w3a-group w3a-group--passwordless">
       <div className="w3a-group__title">
@@ -81,7 +94,11 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
             <Icon iconName={`information-circle${isDark ? "-light" : ""}`} />
             <div className="absolute z-20 flex-col items-center hidden mb-5 top-4 group-hover:flex">
               <div className="w-3 h-3 ml-[3px] -mb-2 rotate-45 bg-app-gray-50 dark:bg-app-gray-600" />
-              <div className="relative p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg">
+              <div
+                className={`relative p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg ${
+                  isSmsVisible && !isEmailVisible ? "left-20" : "left-8"
+                }`}
+              >
                 <div className="mb-1 text-xs font-medium text-app-gray-900 dark:text-app-white">{t("modal.popup.phone-header")}</div>
                 <div className="text-xs text-app-gray-400">{t("modal.popup.phone-body")}</div>
               </div>
@@ -104,7 +121,7 @@ export default function SocialLoginPasswordless(props: SocialLoginPasswordlessPr
           onChange={(e) => handleInputChange(e)}
         />
 
-        {isValidInput === false && <div className="w3a-sms-field--error">{t("modal.errors-invalid-number-email")}</div>}
+        {isValidInput === false && <div className="w3a-sms-field--error">{t(invalidInputErrorMessage)}</div>}
 
         <Button variant={isPrimaryBtn ? "primary" : "tertiary"} disabled={fieldValue === ""} className="w-full" type="submit">
           {t("modal.social.passwordless-cta")}

diff --git a/packages/ui/src/i18n/dutch.json b/packages/ui/src/i18n/dutch.json
@@ -4,9 +4,13 @@
     "adapter-loader.message1": "Verifieer uw {{adapter}}",
     "adapter-loader.message2": "account om door te gaan",
     "errors-invalid-number-email": "Ongeldig e-mailadres of telefoonnummer",
+    "errors-invalid-number": "Ongeldig telefoonnummer",
+    "errors-invalid-email": "Ongeldig e-mailadres",
     "errors-required": "Vereist",
     "external.back": "Terug",
     "external.connect": "Verbinden met portemonnee",
+    "external.continue": "Ga verder met externe portemonnee",
+    "external.no-wallets-found": "Geen portefeuilles gevonden",
     "external.title": "Externe portemonnee",
     "external.walletconnect-connect": "Verbinden",
     "external.walletconnect-copy": "Klik op de QR-code om te kopiëren naar het klembord",
@@ -37,6 +41,7 @@
     "social.email-continue": "Doorgaan met e-mail",
     "social.email-new": "[email protected]",
     "social.passwordless-cta": "Doorgaan",
+    "social.passwordless-login": "Log in",
     "social.passwordless-title": "E-mail of telefoon",
     "social.phone": "Telefoon",
     "social.policy": "We slaan geen gegevens op die verband houden met uw sociale logins.",
@@ -46,6 +51,15 @@
     "social.sms-placeholder-text": "Bijv.:",
     "social.view-less": "Minder bekijken",
     "social.view-more": "Meer bekijken",
+    "social.view-less-socials": "Bekijk minder socials",
+    "social.view-more-socials": "Bekijk meer socials",
+    "passkey.haveExisting": "Heeft u een bestaande passkey?",
+    "passkey.use": "Ik heb een passkey",
+    "passkey.or": "of",
+    "passkey.register-title": "Registreer Passkey",
+    "passkey.register-desc": "Met passkeys kunt u uw identiteit verifiëren via uw gezicht, vingerafdruk of beveiligingssleutels.",
+    "passkey.learn-more": "Kom meer te weten",
+    "passkey.add": "Passkey toevoegen",
     "post-loading.connected": "U bent verbonden met uw account",
     "post-loading.something-wrong": "Er is iets fout gegaan!"
   }