Explorer Media SSR (#2206)

kadena-community · May 29, 2024 · ca4fbfa · ca4fbfa
1 parent 3805b41
commit ca4fbfa
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/.changeset/shy-pianos-own.md b/.changeset/shy-pianos-own.md
@@ -0,0 +1,5 @@
+---
+"@kadena/explorer": patch
+---
+
+Add Media for SSR
diff --git a/packages/apps/explorer/package.json b/packages/apps/explorer/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@apollo/client": "~3.9.11",
+    "@artsy/fresnel": "^7.1.4",
     "@graphql-yoga/apollo-link": "~3.3.0",
     "@kadena/graph": "workspace:*",
     "@kadena/react-icons": "workspace:*",

diff --git a/packages/apps/explorer/src/components/layout/media.ts b/packages/apps/explorer/src/components/layout/media.ts
@@ -0,0 +1,13 @@
+import { createMedia } from '@artsy/fresnel';
+
+const AppMedia = createMedia({
+  breakpoints: {
+    none: 0,
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+  },
+});
+
+export const { Media, MediaContextProvider } = AppMedia;
diff --git a/packages/apps/explorer/src/pages/_app.tsx b/packages/apps/explorer/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 // load global styles from @kadena/react-ui
 import '@kadena/react-ui/global';
 
+import { MediaContextProvider } from '@/components/layout/media';
 import type { NormalizedCacheObject } from '@apollo/client';
 import {
   ApolloClient,
@@ -58,17 +59,19 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ApolloProvider client={client}>
       <RouterProvider navigate={router.push}>
-        <Head>
-          <title>K:Explorer</title>
-          <link
-            rel="icon"
-            href="https://raw.githubusercontent.com/kadena-community/kadena.js/main/common/images/icons/internal/default/icon%40128.png"
-          />
-        </Head>
+        <MediaContextProvider>
+          <Head>
+            <title>K:Explorer</title>
+            <link
+              rel="icon"
+              href="https://raw.githubusercontent.com/kadena-community/kadena.js/main/common/images/icons/internal/default/icon%40128.png"
+            />
+          </Head>
 
-        <main>
-          <ReactComponent {...pageProps} />
-        </main>
+          <main>
+            <ReactComponent {...pageProps} />
+          </main>
+        </MediaContextProvider>
       </RouterProvider>
     </ApolloProvider>
   );

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml