feat: move Layout component back to SSR

layouts/account.tsx

@@ -1,15 +1,11 @@
 import BottomDrawer from "@components/BottomDrawer";
-import DelegatingView from "@components/DelegatingView";
-import DelegatingWidget from "@components/DelegatingWidget";
 import HistoryView from "@components/HistoryView";
 import HorizontalScrollContainer from "@components/HorizontalScrollContainer";
 import OrchestratingView from "@components/OrchestratingView";
 import Profile from "@components/Profile";
-import Spinner from "@components/Spinner";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { getLayout } from "@layouts/main";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { getAccount, getSortedOrchestrators } from "@lib/api/ssr";
 import { checkAddressEquality } from "@lib/utils";
 import {
   Button,
@@ -22,21 +18,30 @@ import {
 } from "@livepeer/design-system";
 import {
   AccountQueryResult,
-  getApollo,
   OrchestratorsSortedQueryResult,
   useAccountQuery,
 } from "apollo";
 import { useBondingManagerAddress } from "hooks/useContracts";
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import { useParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { useWindowSize } from "react-use";
-import useSWR from "swr";
 import { useReadContract } from "wagmi";
 
 import { useAccountAddress, useEnsData, useExplorerStore } from "../hooks";
 
+const DelegatingView = dynamic(() => import("../components/DelegatingView"), {
+  ssr: false,
+});
+
+const DelegatingWidget = dynamic(
+  () => import("../components/DelegatingWidget"),
+  {
+    ssr: false,
+  }
+);
+
 export interface TabType {
   name: string;
   href: string;
@@ -47,40 +52,13 @@ type TabTypeEnum = "delegating" | "orchestrating" | "history";
 
 const ACCOUNT_VIEWS: TabTypeEnum[] = ["delegating", "orchestrating", "history"];
 
-const AccountLayout = () => {
-  /* PART OF https://github.com/livepeer/explorer/pull/427 - TODO: REMOVE ONCE SERVER-SIDE ISSUE IS FIXED */
-  const context = { params: useParams() };
-
-  const {
-    data: sortedOrchestrators,
-    error: errorSortedOrchestrators,
-    isLoading: isLoadingSortedOrchestrators,
-  } = useSWR<OrchestratorsSortedQueryResult["data"]>(
-    `/api/ssr/sorted-orchestrators`,
-    async () => {
-      const { sortedOrchestrators } = await getSortedOrchestrators();
-      return sortedOrchestrators.data as OrchestratorsSortedQueryResult["data"];
-    }
-  );
-
-  const {
-    data: account,
-    error: errorAccount,
-    isLoading: isLoadingAccount,
-  } = useSWR<AccountQueryResult["data"]>(
-    `/api/ssr/account/${context.params?.account?.toString().toLowerCase()}`,
-    async () => {
-      const client = getApollo();
-      const { account } = await getAccount(
-        client,
-        context.params?.account?.toString().toLowerCase() ?? ""
-      );
-      return account.data;
-    }
-  );
-
-  /* ************* */
-
+const AccountLayout = ({
+  account,
+  sortedOrchestrators,
+}: {
+  account?: AccountQueryResult["data"] | null;
+  sortedOrchestrators: OrchestratorsSortedQueryResult["data"];
+}) => {
   const accountAddress = useAccountAddress();
   const { width } = useWindowSize();
   const router = useRouter();
@@ -167,45 +145,6 @@ const AccountLayout = () => {
     setSelectedStakingAction("delegate");
   }, [setSelectedStakingAction]);
 
-  /* PART OF https://github.com/livepeer/explorer/pull/427 - TODO: REMOVE ONCE SERVER-SIDE ISSUE IS FIXED */
-  if (isLoadingSortedOrchestrators || isLoadingAccount) {
-    return (
-      <Flex
-        css={{
-          height: "calc(100vh - 100px)",
-          width: "100%",
-          justifyContent: "center",
-          alignItems: "center",
-          "@bp3": {
-            height: "100vh",
-          },
-        }}
-      >
-        <Spinner />
-      </Flex>
-    );
-  }
-
-  if (errorSortedOrchestrators || errorAccount) {
-    // TODO: Replace with ErrorComponent once https://github.com/livepeer/explorer/pull/435 is merged
-    return (
-      <Flex
-        css={{
-          height: "calc(100vh - 100px)",
-          width: "100%",
-          justifyContent: "center",
-          alignItems: "center",
-          "@bp3": {
-            height: "100vh",
-          },
-        }}
-      >
-        An error occurred while loading account data.
-      </Flex>
-    );
-  }
-  /* ************* */
-
   return (
     <Container css={{ maxWidth: LAYOUT_MAX_WIDTH, width: "100%" }}>
       <Flex>

layouts/main.tsx

@@ -1,15 +1,11 @@
 import AppBar from "@components/AppBar";
-import Claim from "@components/Claim";
-import ConnectButton from "@components/ConnectButton";
 import Drawer from "@components/Drawer";
 import Hamburger from "@components/Hamburger";
 import InactiveWarning from "@components/InactiveWarning";
 import Logo from "@components/Logo";
 import PopoverLink from "@components/PopoverLink";
 import ProgressBar from "@components/ProgressBar";
-import RegisterToVote from "@components/RegisterToVote";
 import Search from "@components/Search";
-import TxConfirmedDialog from "@components/TxConfirmedDialog";
 import TxStartedDialog from "@components/TxStartedDialog";
 import TxSummaryDialog from "@components/TxSummaryDialog";
 import URLVerificationBanner from "@components/URLVerificationBanner";
@@ -44,6 +40,7 @@ import {
 } from "apollo";
 import { BigNumber } from "ethers";
 import { CHAIN_INFO, DEFAULT_CHAIN_ID } from "lib/chains";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -111,6 +108,23 @@ const DesignSystemProviderTyped = DesignSystemProvider as React.FC<{
   children?: React.ReactNode;
 }>;
 
+const ConnectButton = dynamic(() => import("../components/ConnectButton"), {
+  ssr: false,
+});
+
+const Claim = dynamic(() => import("../components/Claim"), { ssr: false });
+
+const TxConfirmedDialog = dynamic(
+  () => import("../components/TxConfirmedDialog"),
+  {
+    ssr: false,
+  }
+);
+
+const RegisterToVote = dynamic(() => import("../components/RegisterToVote"), {
+  ssr: false,
+});
+
 const Layout = ({ children, title = "Livepeer Explorer" }) => {
   const { asPath, isReady, query } = useRouter();
   const { data: protocolData } = useProtocolQuery();

next.config.js

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ["@vanilla-extract/sprinkles"],
   turbopack: {
     rules: {
       "*.svg": {

pages/_app.tsx

@@ -14,6 +14,7 @@ import { CookiesProvider } from "react-cookie";
 import { SWRConfig } from "swr";
 
 import { useApollo } from "../apollo";
+import Layout from "../layouts/main";
 
 numbro.setDefaults({ spaceSeparated: false });
 
@@ -23,8 +24,6 @@ const Web3Providers = dynamic(() => import("../components/Web3Providers"), {
   ssr: false,
 });
 
-const Layout = dynamic(() => import("../layouts/main"), { ssr: false });
-
 function App({ Component, pageProps, fallback = null }) {
   const client = useApollo();
   const { route, locale } = useRouter();

pages/accounts/[account]/delegating.tsx

@@ -1,8 +1,70 @@
 import AccountLayout from "@layouts/account";
 import { getLayout } from "@layouts/main";
+import { getAccount, getSortedOrchestrators } from "@lib/api/ssr";
+import { EnsIdentity } from "@lib/api/types/get-ens";
+import {
+  AccountQueryResult,
+  getApollo,
+  OrchestratorsSortedQueryResult,
+} from "apollo";
 
-const Delegating = () => <AccountLayout />;
+type PageProps = {
+  account: AccountQueryResult["data"] | null;
+  sortedOrchestrators: OrchestratorsSortedQueryResult["data"];
+  fallback: { [key: string]: EnsIdentity };
+};
+
+const Delegating = ({ account, sortedOrchestrators }: PageProps) => (
+  <AccountLayout sortedOrchestrators={sortedOrchestrators} account={account} />
+);
 
 Delegating.getLayout = getLayout;
 
+export const getStaticPaths = async () => {
+  const { sortedOrchestrators } = await getSortedOrchestrators();
+
+  return {
+    paths:
+      sortedOrchestrators?.data?.transcoders?.map((t) => ({
+        params: { account: t.id },
+      })) ?? [],
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps = async (context) => {
+  try {
+    const client = getApollo();
+    const { account, fallback } = await getAccount(
+      client,
+      context.params?.account?.toString().toLowerCase()
+    );
+
+    const { sortedOrchestrators, fallback: sortedOrchestratorsFallback } =
+      await getSortedOrchestrators(client);
+
+    if (!sortedOrchestrators.data) {
+      return { notFound: true, revalidate: 300 };
+    }
+
+    const props: PageProps = {
+      account: account.data,
+      sortedOrchestrators: sortedOrchestrators.data,
+      fallback: {
+        ...sortedOrchestratorsFallback,
+        ...fallback,
+      },
+    };
+
+    return {
+      props,
+      revalidate: 600,
+    };
+  } catch (e) {
+    console.error(e);
+  }
+
+  return { notFound: true, revalidate: 300 };
+};
+
 export default Delegating;

pages/accounts/[account]/history.tsx

@@ -1,8 +1,70 @@
 import AccountLayout from "@layouts/account";
 import { getLayout } from "@layouts/main";
+import { getAccount, getSortedOrchestrators } from "@lib/api/ssr";
+import { EnsIdentity } from "@lib/api/types/get-ens";
+import {
+  AccountQueryResult,
+  getApollo,
+  OrchestratorsSortedQueryResult,
+} from "apollo";
 
-const History = () => <AccountLayout />;
+type PageProps = {
+  account: AccountQueryResult["data"];
+  sortedOrchestrators: OrchestratorsSortedQueryResult["data"];
+  fallback: { [key: string]: EnsIdentity };
+};
+
+const History = ({ account, sortedOrchestrators }: PageProps) => (
+  <AccountLayout sortedOrchestrators={sortedOrchestrators} account={account} />
+);
 
 History.getLayout = getLayout;
 
+export const getStaticPaths = async () => {
+  const { sortedOrchestrators } = await getSortedOrchestrators();
+
+  return {
+    paths:
+      sortedOrchestrators?.data?.transcoders?.map((t) => ({
+        params: { account: t.id },
+      })) ?? [],
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps = async (context) => {
+  try {
+    const client = getApollo();
+    const { account, fallback } = await getAccount(
+      client,
+      context.params?.account?.toString().toLowerCase()
+    );
+
+    const { sortedOrchestrators, fallback: sortedOrchestratorsFallback } =
+      await getSortedOrchestrators(client);
+
+    if (!account.data || !sortedOrchestrators.data) {
+      return { notFound: true, revalidate: 300 };
+    }
+
+    const props: PageProps = {
+      account: account.data,
+      sortedOrchestrators: sortedOrchestrators.data,
+      fallback: {
+        ...sortedOrchestratorsFallback,
+        ...fallback,
+      },
+    };
+
+    return {
+      props,
+      revalidate: 600,
+    };
+  } catch (e) {
+    console.error(e);
+  }
+
+  return { notFound: true, revalidate: 300 };
+};
+
 export default History;