feat: #143: experimentally request summary data on server

app/app.tsx

@@ -6,15 +6,15 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ToastProvider } from '@penumbra-zone/ui/Toast';
 import { TooltipProvider } from '@penumbra-zone/ui/Tooltip';
 import { Header, SyncBar } from '@/widgets/header';
-import { queryClient } from '@/shared/const/queryClient';
+import { getQueryClient } from '@/shared/const/queryClient';
 
 // Used so that observer() won't subscribe to any observables used in an SSR environment
 // and no garbage collection problems are introduced.
 enableStaticRendering(typeof window === 'undefined');
 
 export const App = ({ children }: { children: ReactNode }) => {
   return (
-    <QueryClientProvider client={queryClient}>
+    <QueryClientProvider client={getQueryClient()}>
       <TooltipProvider>
         <main className='relative z-0'>
           <SyncBar />

next.config.mjs

@@ -34,9 +34,6 @@ const PnpmInstallPlugin = {
 
 const nextConfig = {
   transpilePackages: ['@penumbra-zone/protobuf'],
-  compiler: {
-    styledComponents: true,
-  },
   webpack: config => {
     config.module.rules.push({
       test: /\.svg$/i,

package.json

@@ -108,7 +108,7 @@
     "babel-loader": "^9.1.3",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3",
-    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react": "^7.37.2",
     "globals": "^15.9.0",
     "kysely-codegen": "^0.17.0",
     "postcss": "^8.4.47",

src/pages/trade/model/use-path.ts

@@ -1,16 +1,18 @@
+'use client';
+
 import { useAssets } from '@/shared/api/assets';
 import { useParams } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 
-interface PathParams {
+export interface PathParams {
   baseSymbol: string;
   quoteSymbol: string;
   [key: string]: string; // required for useParams signature
 }
 
 export const usePathSymbols = () => {
   const params = useParams<PathParams>();
-  if (!params) {
+  if (!params?.baseSymbol || !params.quoteSymbol) {
     throw new Error('No symbol params in path');
   }
   return { baseSymbol: params.baseSymbol, quoteSymbol: params.quoteSymbol };

src/pages/trade/model/use-prefetch-summary.ts

@@ -0,0 +1,36 @@
+import { PathParams } from '@/pages/trade/model/use-path';
+import { getSummary } from '@/shared/api/server/summary';
+import { DurationWindow } from '@/shared/utils/duration.ts';
+import { getQueryClient } from '@/shared/const/queryClient';
+import { useServerParams } from '@/shared/utils/server-params';
+
+export const usePrefetchSummary = (window: DurationWindow) => {
+  const queryClient = getQueryClient();
+  const { baseSymbol, quoteSymbol } = useServerParams<PathParams>();
+
+  return {
+    queryClient,
+    prefetch: () =>
+      queryClient.prefetchQuery({
+        queryKey: ['summary', baseSymbol, quoteSymbol],
+        queryFn: async () => {
+          const paramsObj = {
+            durationWindow: window,
+            baseAsset: baseSymbol,
+            quoteAsset: quoteSymbol,
+          };
+          const baseUrl = 'https://localhost/api/summary';
+          const urlParams = new URLSearchParams(paramsObj).toString();
+          const res = await getSummary({ url: `${baseUrl}?${urlParams}` });
+          if ('error' in res) {
+            throw new Error(res.error);
+          }
+          return {
+            ...res,
+            asset_start: res.asset_start.toJSON(),
+            asset_end: res.asset_end.toJSON(),
+          };
+        },
+      }),
+  };
+};

src/pages/trade/model/useSummary.ts → src/pages/trade/model/use-summary.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import { usePathSymbols } from '@/pages/trade/model/use-path.ts';
-import { SummaryResponse } from '@/shared/api/server/summary.ts';
+import { usePathSymbols } from '@/pages/trade/model/use-path';
+import { SummaryResponse } from '@/shared/api/server/summary';
 import { DurationWindow } from '@/shared/utils/duration.ts';
 
 export const useSummary = (window: DurationWindow) => {

src/pages/trade/ui/chart.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import cn from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import { createChart, IChartApi, OhlcData } from 'lightweight-charts';

src/pages/trade/ui/form-tabs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Tabs } from '@penumbra-zone/ui/Tabs';

src/pages/trade/ui/history-tabs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Tabs } from '@penumbra-zone/ui/Tabs';