Merge pull request #1318 from near/fixes

feat: remove server side load

package.json

@@ -76,9 +76,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-singleton-hook": "^3.4.0",
-    "remark": "^14.0.3",
     "rudder-sdk-js": "^2.48.6",
-    "strip-markdown": "^5.0.1",
     "styled-components": "^5.3.11",
     "typescript": "^5.4.5",
     "wagmi": "^2.12.17",

src/components/sidebar-navigation/UserDropdownMenu.tsx

@@ -123,7 +123,7 @@ export const UserDropdownMenu = ({ collapsed }: Props) => {
         method: 'storage_balance_of',
         args: { account_id: signedAccountId },
       });
-      setAvailableStorage(BigInt(storage.available) / BigInt(10 ** 19));
+      if (storage) setAvailableStorage(BigInt(storage.available) / BigInt(10 ** 19));
     }
 
     if (!wallet || !signedAccountId) return;

src/pages/[accountId]/widget/[componentName].tsx

@@ -0,0 +1,56 @@
+import { useRouter } from 'next/router';
+import { useContext, useEffect, useState } from 'react';
+
+import { RootContentContainer } from '@/components/RootContentContainer';
+import { VmComponent } from '@/components/vm/VmComponent';
+import { NearContext } from '@/components/wallet-selector/WalletSelector';
+import { privacyDomainName, termsDomainName } from '@/config';
+import { useBosComponents } from '@/hooks/useBosComponents';
+import { useGatewayEvents } from '@/hooks/useGatewayEvents';
+import { useDefaultLayout } from '@/hooks/useLayout';
+import { useSignInRedirect } from '@/hooks/useSignInRedirect';
+import type { NextPageWithLayout } from '@/utils/types';
+
+const ViewComponentPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const componentSrc = `${router.query.accountId}/widget/${router.query.componentName}`;
+  const [componentProps, setComponentProps] = useState<Record<string, unknown>>({});
+  const { wallet, signedAccountId } = useContext(NearContext);
+  const components = useBosComponents();
+  const { requestAuthentication } = useSignInRedirect();
+  const { emitGatewayEvent, shouldPassGatewayEventProps } = useGatewayEvents();
+
+  useEffect(() => {
+    const { requestAuth, createAccount } = componentProps;
+    if (requestAuth && !signedAccountId) {
+      requestAuthentication(!!createAccount);
+    }
+  }, [signedAccountId, componentProps, requestAuthentication]);
+
+  useEffect(() => {
+    setComponentProps(router.query);
+  }, [router.query]);
+
+  return (
+    <RootContentContainer>
+      <VmComponent
+        key={components.wrapper}
+        src={components.wrapper}
+        props={{
+          emitGatewayEvent: shouldPassGatewayEventProps(router.query.componentAccountId as string)
+            ? emitGatewayEvent
+            : undefined,
+          logOut: wallet?.signOut,
+          targetProps: componentProps,
+          targetComponent: componentSrc,
+          termsDomainName,
+          privacyDomainName,
+        }}
+      />
+    </RootContentContainer>
+  );
+};
+
+ViewComponentPage.getLayout = useDefaultLayout;
+
+export default ViewComponentPage;