[react] Allow uppercase email address in ConnectWallet (#2219)

thirdweb-dev · Jan 25, 2024 · 3dfc003 · 3dfc003
1 parent b34737d
commit 3dfc003
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/honest-flowers-bake.md b/.changeset/honest-flowers-bake.md
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Allow uppercase letters in email in embeddedWallet, magicLink, paperWallet in ConnectWallet UI
diff --git a/packages/react/src/wallet/wallets/embeddedWallet/EmbeddedWalletFormUI.tsx b/packages/react/src/wallet/wallets/embeddedWallet/EmbeddedWalletFormUI.tsx
@@ -127,7 +127,7 @@ export const EmbeddedWalletFormUI = (props: {
           name="email"
           type="email"
           errorMessage={(_input) => {
-            const input = _input.replace(/\+/g, "");
+            const input = _input.replace(/\+/g, "").toLowerCase();
             const emailRegex =
               /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,})$/g;
             const isValidEmail = emailRegex.test(input);

diff --git a/packages/react/src/wallet/wallets/magic/magicLink.tsx b/packages/react/src/wallet/wallets/magic/magicLink.tsx
@@ -395,7 +395,8 @@ const MagicUI: React.FC<{
             name="magic-input"
             type={type}
             emptyErrorMessage={emptyErrorMessage}
-            errorMessage={(input) => {
+            errorMessage={(_input) => {
+              const input = _input.toLowerCase();
               const isEmail = input.includes("@");
               const isPhone = Number.isInteger(Number(input[input.length - 1]));
 
@@ -474,8 +475,8 @@ function useConnectMagic() {
             data.type === "connect"
               ? {}
               : isEmail
-              ? { email: selectionData, chainId: activeChain.chainId }
-              : { phoneNumber: selectionData, chainId: activeChain.chainId },
+                ? { email: selectionData, chainId: activeChain.chainId }
+                : { phoneNumber: selectionData, chainId: activeChain.chainId },
           );
           connected();
         } catch (e) {

diff --git a/packages/react/src/wallet/wallets/paper/PaperFormUI.tsx b/packages/react/src/wallet/wallets/paper/PaperFormUI.tsx
@@ -79,7 +79,7 @@ export const PaperFormUI = (props: {
         name="email"
         type="email"
         errorMessage={(_input) => {
-          const input = _input.replace(/\+/g, "");
+          const input = _input.replace(/\+/g, "").toLowerCase();
           const emailRegex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,})$/g;
           const isValidEmail = emailRegex.test(input);
           if (!isValidEmail) {