refactor: we need to split root out for readability into a SdkWrapper component to reflect changes in init'ing the sdk down the component tree, and sdk should be a react var

app/root.tsx

@@ -1,10 +1,4 @@
-import {
+import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
 
 import stylesheet from "./tailwind.css?url";
 import type {LinksFunction} from "@remix-run/node";
@@ -58,16 +52,7 @@ function App() {
 
 export default function Root() {
   const [portalUrl, setPortalUrl] = useState(import.meta.env.VITE_PORTAL_URL);
-  const sdk = Sdk.create(portalUrl);
+  const [sdk, setSdk] = useState<Sdk| undefined>(portalUrl ? Sdk.create(portalUrl) : undefined);
-
-  const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
-
-  useEffect(() => {
-    if (sdk) {
-      PinningProcess.setupSdk(sdk as Sdk);
-    }
-  }, [sdk]);
-
   useEffect(() => {
     if (!portalUrl) {
       fetch("/api/meta")
@@ -81,12 +66,34 @@ export default function Root() {
     }
   }, [portalUrl]);
 
+    useEffect(() => {
+        if (portalUrl) {
+            setSdk(Sdk.create(portalUrl));
+        }
+    }, [portalUrl]);
+
   if (!portalUrl) {
     return <p>Loading...</p>;
   }
 
     return (
-    <SdkContextProvider sdk={sdk}>
+        <SdkContextProvider sdk={sdk as Sdk}>
+            <SdkWrapper />
+        </SdkContextProvider>
+    );
+}
+
+function SdkWrapper() {
+    const sdk = useSdk();
+    PinningProcess.setupSdk(sdk as Sdk);
+
+    const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
+
+    if (!sdk) {
+        return <p>Loading...</p>;
+    }
+
+    return (
         <QueryClientProvider client={queryClient}>
             <Refine
                 authProvider={providers.auth}
@@ -101,8 +108,7 @@ export default function Root() {
                 <App/>
             </Refine>
         </QueryClientProvider>
-    </SdkContextProvider>
+    )
-  );
 }
 
 export function HydrateFallback() {