feat(explorer): server-side currency data

SiaFoundation · Feb 20, 2025 · 14f0796 · 14f0796
1 parent 70e57bf
commit 14f0796
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/apps/explorer/app/fallback.ts b/apps/explorer/app/fallback.ts
@@ -0,0 +1,23 @@
+import { explored } from '../config/explored'
+import { unstable_serialize } from 'swr'
+import { CurrencyID, exchangeRateRoute } from '@siafoundation/explored-types'
+import { exploredApi } from '../config'
+
+// Builds fallback data for the exchange rate. Passing this to the SWR
+// config's fallback prop allows the exchange rate hooks with a matching
+// key to server-render with an initial exchange rate value.
+export async function buildFallbackDataExchangeRate(currency: CurrencyID) {
+  const rate = await explored.exchangeRate({
+    params: {
+      currency,
+    },
+  })
+  return {
+    // Hooks build with react-core have keys of the form:
+    // ['method', `${api}${route}${params}${JSON.stringify(args.payload)}`]
+    [unstable_serialize([
+      'get',
+      `${exploredApi}${exchangeRateRoute.replace(':currency', currency)}`,
+    ])]: rate.data,
+  }
+}
diff --git a/apps/explorer/app/layout.tsx b/apps/explorer/app/layout.tsx
@@ -4,6 +4,10 @@ import { NextAppSsrAppRouter } from '@siafoundation/design-system'
 import { appLink } from '../config'
 import Script from 'next/script'
 import { rootFontClasses } from '@siafoundation/fonts'
+import { cookies } from 'next/headers'
+import { CurrencyID } from '@siafoundation/explored-types'
+import { buildFallbackDataDefaultCurrencyId } from '@siafoundation/react-core'
+import { buildFallbackDataExchangeRate } from './fallback'
 
 export const metadata = {
   title: 'Explorer',
@@ -15,15 +19,31 @@ export const metadata = {
   ),
 }
 
-export default function RootLayout({
+function getUserCurrencyPreference() {
+  const cookieStore = cookies()
+  const currency = cookieStore.get('currency')?.value as CurrencyID
+  return currency || 'usd'
+}
+
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const currency = getUserCurrencyPreference()
   return (
     <html lang="en" suppressHydrationWarning className={rootFontClasses}>
       <body>
-        <NextAppSsrAppRouter>
+        <NextAppSsrAppRouter
+          fallback={{
+            // Pass the currency cookie value to the app settings provider so that
+            // it initializes and server-renders with the user's prefered currency.
+            ...buildFallbackDataDefaultCurrencyId(currency),
+            // Pass the currency's initial exchange rate value to the exchange rate
+            // hooks so that they initialize and server-render with the value.
+            ...(await buildFallbackDataExchangeRate(currency)),
+          }}
+        >
           <Layout>{children}</Layout>
         </NextAppSsrAppRouter>
       </body>