💄 Remove fallback page and replace it with privy btn on auth pages

frak-id · Dec 18, 2024 · 0087f4f · 0087f4f
1 parent 2989a31
commit 0087f4f
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 26 deletions.
diff --git a/packages/wallet/app/module/authentication/component/EcdsaLogin/index.tsx b/packages/wallet/app/module/authentication/component/EcdsaLogin/index.tsx
@@ -11,7 +11,7 @@ export function EcdsaLogin() {
     const { mutate: logIn } = usePrivyCrossAppAuthenticate();
 
     return (
-        <Button type={"button"} onClick={() => logIn()}>
+        <Button type={"button"} onClick={() => logIn()} variant={"primary"}>
             Connect via Privy
         </Button>
     );

diff --git a/packages/wallet/app/routes.ts b/packages/wallet/app/routes.ts
@@ -14,7 +14,6 @@ export default [
         route("/login", "./views/auth/login.tsx"),
         route("/register", "./views/auth/register.tsx"),
         route("/recovery", "./views/auth/recovery.tsx"),
-        route("/fallback", "./views/auth/fallback.tsx"),
     ]),
     layout("./views/layouts/sso.tsx", [route("/sso", "./views/auth/sso.tsx")]),
 

diff --git a/packages/wallet/app/views/auth/fallback.tsx b/packages/wallet/app/views/auth/fallback.tsx
diff --git a/packages/wallet/app/views/auth/login.module.css b/packages/wallet/app/views/auth/login.module.css
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    gap: 36px;
 }
 
 .login__link {

diff --git a/packages/wallet/app/views/auth/login.tsx b/packages/wallet/app/views/auth/login.tsx
@@ -1,8 +1,11 @@
 import { ButtonAuth } from "@/module/authentication/component/ButtonAuth";
+import { EcdsaLogin } from "@/module/authentication/component/EcdsaLogin";
 import { LoginList } from "@/module/authentication/component/LoginList";
 import { useLogin } from "@/module/authentication/hook/useLogin";
 import { Back } from "@/module/common/component/Back";
 import { Grid } from "@/module/common/component/Grid";
+import { usePrivyCrossAppAuthenticate } from "@/module/common/hook/crossAppPrivyHooks";
+import { useIsWebAuthNSupported } from "@/module/common/hook/useIsWebAuthNSupported";
 import { CloudUpload } from "lucide-react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router";
@@ -11,10 +14,14 @@ import styles from "./login.module.css";
 export default function Login() {
     const navigate = useNavigate();
     const { t } = useTranslation();
+
+    const isWebAuthnSupported = useIsWebAuthNSupported();
     const { login } = useLogin({
-        onSuccess: () => {
-            navigate("/wallet");
-        },
+        onSuccess: () => navigate("/wallet"),
+    });
+    const { mutateAsync: privyLogin } = usePrivyCrossAppAuthenticate({
+        // On success, transmit the wallet address up a level
+        onSuccess: () => navigate("/wallet"),
     });
 
     return (
@@ -35,9 +42,15 @@ export default function Login() {
                     </>
                 }
             >
-                <ButtonAuth trigger={() => login({})}>
+                <ButtonAuth
+                    trigger={() =>
+                        isWebAuthnSupported ? login({}) : privyLogin()
+                    }
+                >
                     <Trans i18nKey={"wallet.login.button"} />
                 </ButtonAuth>
+
+                {isWebAuthnSupported && <EcdsaLogin />}
             </Grid>
         </>
     );

diff --git a/packages/wallet/app/views/auth/register.module.css b/packages/wallet/app/views/auth/register.module.css
@@ -2,4 +2,5 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    gap: 36px;
 }
diff --git a/packages/wallet/app/views/auth/register.tsx b/packages/wallet/app/views/auth/register.tsx
@@ -1,7 +1,10 @@
 import { ButtonAuth } from "@/module/authentication/component/ButtonAuth";
+import { EcdsaLogin } from "@/module/authentication/component/EcdsaLogin";
 import { useRegister } from "@/module/authentication/hook/useRegister";
 import { Grid } from "@/module/common/component/Grid";
 import { Notice } from "@/module/common/component/Notice";
+import { usePrivyCrossAppAuthenticate } from "@/module/common/hook/crossAppPrivyHooks";
+import { useIsWebAuthNSupported } from "@/module/common/hook/useIsWebAuthNSupported";
 import { useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router";
@@ -10,12 +13,15 @@ import styles from "./register.module.css";
 export default function Register() {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const [disabled, setDisabled] = useState(false);
+    const isWebAuthnSupported = useIsWebAuthNSupported();
     const { register, error, isRegisterInProgress } = useRegister({
-        onSuccess: () => {
-            navigate("/wallet");
-        },
+        onSuccess: () => navigate("/wallet"),
+    });
+    const { mutateAsync: privyLogin } = usePrivyCrossAppAuthenticate({
+        // On success, transmit the wallet address up a level
+        onSuccess: () => navigate("/wallet"),
     });
-    const [disabled, setDisabled] = useState(false);
 
     /**
      * Boolean used to know if the error is about a previously used authenticator
@@ -87,11 +93,12 @@ export default function Register() {
             }
         >
             <ButtonAuth
-                trigger={register}
+                trigger={isWebAuthnSupported ? register : privyLogin}
                 disabled={disabled || isPreviouslyUsedAuthenticatorError}
             >
                 {message}
             </ButtonAuth>
+            {isWebAuthnSupported && <EcdsaLogin />}
         </Grid>
     );
 }