🐛 Check WebAuthn support + fix referralInteraction hook

frak-id · Aug 28, 2024 · f8c200a · f8c200a
1 parent e65e4bb
commit f8c200a
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 29 deletions.
diff --git a/.changeset/sweet-cheetahs-impress.md b/.changeset/sweet-cheetahs-impress.md
@@ -0,0 +1,5 @@
+---
+"@frak-labs/nexus-sdk": patch
+---
+
+Fix `useReferralInteraction` to directly populate nexus context if user is logged in
diff --git a/packages/sdk/src/react/hook/helper/useReferralInteraction.ts b/packages/sdk/src/react/hook/helper/useReferralInteraction.ts
@@ -56,9 +56,10 @@ export function useReferralInteraction({
     const processReferral = useCallback(async (): Promise<ReferralState> => {
         try {
             // Get the current wallet, without auto displaying the modal
-            let currentWallet = await ensureWalletConnected({
-                autoDisplay: false,
-            });
+            let currentWallet =
+                walletStatus?.key === "connected"
+                    ? walletStatus.wallet
+                    : undefined;
 
             if (!nexusContext?.r) {
                 if (currentWallet) {
@@ -69,9 +70,7 @@ export function useReferralInteraction({
 
             // We have a referral, so if we don't have a current wallet, display the modal
             if (!currentWallet) {
-                currentWallet = await ensureWalletConnected({
-                    autoDisplay: true,
-                });
+                currentWallet = await ensureWalletConnected();
             }
 
             if (
@@ -100,6 +99,7 @@ export function useReferralInteraction({
         ensureWalletConnected,
         sendInteraction,
         updateContextAsync,
+        walletStatus,
     ]);
 
     // Setup the query that will transmit the referral interaction
@@ -140,25 +140,22 @@ function useEnsureWalletConnected({
     // Hook to display the modal
     const { mutateAsync: displayModal } = useDisplayModal();
 
-    return useCallback(
-        async ({ autoDisplay }: { autoDisplay: boolean }) => {
-            // If wallet not connected, or no interaction session
-            if (
-                walletStatus?.key !== "connected" ||
-                !walletStatus.interactionSession
-            ) {
-                // If we don't have any modal setup, or we don't want to auto display it, do nothing
-                if (!(modalConfig && autoDisplay)) {
-                    return undefined;
-                }
-                const result = await displayModal(modalConfig);
-                return result?.login?.wallet ?? undefined;
+    return useCallback(async () => {
+        // If wallet not connected, or no interaction session
+        if (
+            walletStatus?.key !== "connected" ||
+            !walletStatus.interactionSession
+        ) {
+            // If we don't have any modal setup, or we don't want to auto display it, do nothing
+            if (!modalConfig) {
+                return undefined;
             }
+            const result = await displayModal(modalConfig);
+            return result?.login?.wallet ?? undefined;
+        }
 
-            return walletStatus.wallet ?? undefined;
-        },
-        [walletStatus, modalConfig, displayModal]
-    );
+        return walletStatus.wallet ?? undefined;
+    }, [walletStatus, modalConfig, displayModal]);
 }
 
 /**

diff --git a/packages/wallet/src/module/common/component/RequireWebAuthN/index.tsx b/packages/wallet/src/module/common/component/RequireWebAuthN/index.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { type PropsWithChildren, useMemo } from "react";
+
+/**
+ * Component to require webauthn for the children sub-components
+ * @param children
+ * @constructor
+ */
+export function RequireWebAuthN({ children }: PropsWithChildren) {
+    // Check if webauthn is supported
+    const isWebAuthnSupported = useMemo(() => {
+        // If on server side, webauthn not supported
+        if (typeof window === "undefined") {
+            return false;
+        }
+
+        // Check if webauthn is supported
+        return window.PublicKeyCredential !== undefined;
+    }, []);
+
+    // If webauthn is supported, directly return the children
+    if (isWebAuthnSupported) {
+        return children;
+    }
+
+    // Otherwise, simple message telling that webauthn isn't supported
+    return (
+        <p>
+            Open this page on your default web browser to enjoy Nexus rewards
+            and benefits.
+        </p>
+    );
+}
diff --git a/packages/wallet/src/module/listener/component/Login/index.tsx b/packages/wallet/src/module/listener/component/Login/index.tsx
@@ -3,6 +3,7 @@ import { getSession } from "@/context/session/action/session";
 import { useLogin } from "@/module/authentication/hook/useLogin";
 import { useOpenSsoPopup } from "@/module/authentication/hook/useOpenSsoPopup";
 import { sessionAtom } from "@/module/common/atoms/session";
+import { RequireWebAuthN } from "@/module/common/component/RequireWebAuthN";
 import styles from "@/module/listener/component/Modal/index.module.css";
 import type {
     LoginModalStepType,
@@ -49,7 +50,7 @@ export function LoginModalStep({
     }, [onFinish, session]);
 
     return (
-        <>
+        <RequireWebAuthN>
             {metadata?.description && (
                 <div className={prefixModalCss("text")}>
                     <p>{metadata.description}</p>
@@ -113,7 +114,7 @@ export function LoginModalStep({
                     {error.message}
                 </p>
             )}
-        </>
+        </RequireWebAuthN>
     );
 }
 

diff --git a/packages/wallet/src/module/listener/component/OpenSession/index.tsx b/packages/wallet/src/module/listener/component/OpenSession/index.tsx
@@ -1,3 +1,4 @@
+import { RequireWebAuthN } from "@/module/common/component/RequireWebAuthN";
 import styles from "@/module/listener/component/Modal/index.module.css";
 import { useInteractionSessionStatus } from "@/module/wallet/hook/useInteractionSessionStatus";
 import { useOpenSession } from "@/module/wallet/hook/useOpenSession";
@@ -75,7 +76,7 @@ export function OpenSessionModalStep({
     });
 
     return (
-        <>
+        <RequireWebAuthN>
             {metadata?.description && (
                 <div className={prefixModalCss("text")}>
                     <p>{metadata.description}</p>
@@ -100,6 +101,6 @@ export function OpenSessionModalStep({
                     {error.message}
                 </p>
             )}
-        </>
+        </RequireWebAuthN>
     );
 }
diff --git a/packages/wallet/src/module/listener/component/Transaction/index.tsx b/packages/wallet/src/module/listener/component/Transaction/index.tsx
@@ -1,4 +1,5 @@
 import { encodeWalletMulticall } from "@/context/wallet/utils/multicall";
+import { RequireWebAuthN } from "@/module/common/component/RequireWebAuthN";
 import { Title } from "@/module/common/component/Title";
 import styles from "@/module/listener/component/Modal/index.module.css";
 import { AccordionTransactions } from "@/module/listener/component/Transaction/AccordionTransactions";
@@ -40,7 +41,7 @@ export function TransactionModalStep({
     }
 
     return (
-        <>
+        <RequireWebAuthN>
             <Title className={styles.modalListener__subTitle}>
                 You need to confirm this transaction
             </Title>
@@ -62,7 +63,7 @@ export function TransactionModalStep({
                     {error.message}
                 </p>
             )}
-        </>
+        </RequireWebAuthN>
     );
 }