refactor: split app to App and Root and store the sdk context in the root for app to use

app/root.tsx

@@ -8,11 +8,12 @@ import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
 import {notificationProvider} from "~/data/notification-provider";
-import {SdkContextProvider} from "~/components/lib/sdk-context";
+import {SdkContextProvider, useSdk} from "~/components/lib/sdk-context";
 import {Toaster} from "~/components/ui/toaster";
 import {getProviders} from "~/data/providers.js";
 import {Sdk} from "@lumeweb/portal-sdk";
 import resources from "~/data/resources.js";
+import {useMemo} from "react";
 
 export const links: LinksFunction = () => [
     {rel: "stylesheet", href: stylesheet},
@@ -37,9 +38,9 @@ export function Layout({children}: { children: React.ReactNode }) {
     );
 }
 
-export default function App() {
+function App() {
-    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
+    const sdk = useSdk();
-    const providers = getProviders(sdk);
+    const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
     return (
         <Refine
             authProvider={providers.auth}
@@ -49,13 +50,20 @@ export default function App() {
             resources={resources}
             options={{disableTelemetry: true}}
         >
-            <SdkContextProvider sdk={sdk}>
             <Outlet/>
-            </SdkContextProvider>
         </Refine>
     );
 }
 
+export default function Root() {
+    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
+    return (
+        <SdkContextProvider sdk={sdk}>
+            <App/>
+        </SdkContextProvider>
+    );
+}
+
 export function HydrateFallback() {
     return <p>Loading...</p>;
 }