From db8e9d5342e1185476dda3fa004cc3c79031890c Mon Sep 17 00:00:00 2001
From: jdabbech-ledger <jalil.dabbech@ledger.com>
Date: Fri, 22 Nov 2024 14:15:41 +0100
Subject: [PATCH] :green_heart: (smpl): Fix build with node 21

---
 apps/sample/src/app/device-actions/page.tsx     | 9 ++++++++-
 apps/sample/src/app/signer/ethereum/page.tsx    | 6 +++++-
 apps/sample/src/app/signer/solana/page.tsx      | 8 ++++++--
 apps/sample/src/components/SessionIdWrapper.tsx | 2 +-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/sample/src/app/device-actions/page.tsx b/apps/sample/src/app/device-actions/page.tsx
index 4c101f153..5474345f8 100644
--- a/apps/sample/src/app/device-actions/page.tsx
+++ b/apps/sample/src/app/device-actions/page.tsx
@@ -1,8 +1,15 @@
 "use client";
 import React from "react";
+import dynamic from "next/dynamic";
 
-import { AllDeviceActions } from "@/components/DeviceActionsView/AllDeviceActions";
 import { SessionIdWrapper } from "@/components/SessionIdWrapper";
+const AllDeviceActions = dynamic(
+  () =>
+    import("@/components/DeviceActionsView/AllDeviceActions").then(
+      (mod) => mod.AllDeviceActions,
+    ),
+  { ssr: false },
+);
 
 const DeviceActions: React.FC = () => {
   return <SessionIdWrapper ChildComponent={AllDeviceActions} />;
diff --git a/apps/sample/src/app/signer/ethereum/page.tsx b/apps/sample/src/app/signer/ethereum/page.tsx
index c297848d3..afece2c9e 100644
--- a/apps/sample/src/app/signer/ethereum/page.tsx
+++ b/apps/sample/src/app/signer/ethereum/page.tsx
@@ -1,8 +1,12 @@
 "use client";
 import React from "react";
+import dynamic from "next/dynamic";
 
 import { SessionIdWrapper } from "@/components/SessionIdWrapper";
-import { SignerEthView } from "@/components/SignerEthView";
+const SignerEthView = dynamic(
+  () => import("@/components/SignerEthView").then((mod) => mod.SignerEthView),
+  { ssr: false },
+);
 
 const Signer: React.FC = () => {
   return <SessionIdWrapper ChildComponent={SignerEthView} />;
diff --git a/apps/sample/src/app/signer/solana/page.tsx b/apps/sample/src/app/signer/solana/page.tsx
index 85b74a573..5bef0cc5e 100644
--- a/apps/sample/src/app/signer/solana/page.tsx
+++ b/apps/sample/src/app/signer/solana/page.tsx
@@ -1,9 +1,13 @@
 "use client";
 import React from "react";
+import dynamic from "next/dynamic";
 
 import { SessionIdWrapper } from "@/components/SessionIdWrapper";
-import { SignerSolanaView } from "@/components/SignerSolanaView";
-
+const SignerSolanaView = dynamic(
+  () =>
+    import("@/components/SignerSolanaView").then((mod) => mod.SignerSolanaView),
+  { ssr: false },
+);
 const Signer: React.FC = () => {
   return <SessionIdWrapper ChildComponent={SignerSolanaView} />;
 };
diff --git a/apps/sample/src/components/SessionIdWrapper.tsx b/apps/sample/src/components/SessionIdWrapper.tsx
index 7a0514711..0e3c3108b 100644
--- a/apps/sample/src/components/SessionIdWrapper.tsx
+++ b/apps/sample/src/components/SessionIdWrapper.tsx
@@ -9,7 +9,7 @@ import { useDeviceSessionsContext } from "@/providers/DeviceSessionsProvider";
  * If there is no selected sessionId, it renders a message and a button to go to the home page.
  */
 export const SessionIdWrapper: React.FC<{
-  ChildComponent: React.FC<{ sessionId: string }>;
+  ChildComponent: React.ComponentType<{ sessionId: string }>;
 }> = ({ ChildComponent }) => {
   const {
     state: { selectedId: sessionId },