diff --git a/apps/explorer/app/fallback.ts b/apps/explorer/app/fallback.ts new file mode 100644 index 000000000..1fe59cf18 --- /dev/null +++ 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 index aeec6a159..71533b187 100644 --- 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 ( - + {children}