add development context

frontendphil · frontendphil · commit dd7eeb2b7b38 · 2025-02-06T15:42:44.000+01:00
diff --git a/deployables/app/app/components/DevelopmentContext.tsx b/deployables/app/app/components/DevelopmentContext.tsx
@@ -0,0 +1,12 @@
+import { createContext, useContext, type PropsWithChildren } from 'react'
+
+const DevelopmentContext = createContext(false)
+
+export const ProvideDevelopmentContext = ({
+  children,
+  isDev,
+}: PropsWithChildren<{ isDev: boolean }>) => (
+  <DevelopmentContext value={isDev}>{children}</DevelopmentContext>
+)
+
+export const useIsDev = () => useContext(DevelopmentContext)
diff --git a/deployables/app/app/components/index.ts b/deployables/app/app/components/index.ts
@@ -2,6 +2,7 @@ import { lazy } from 'react'
 
 export { AvatarInput } from './AvatarInput'
 export { ChainSelect } from './ChainSelect'
+export { ProvideDevelopmentContext, useIsDev } from './DevelopmentContext'
 export * from './navigation'
 export { Page } from './Page'
 export * from './pilotStatus'
diff --git a/deployables/app/app/components/versionManagement/MinimumVersion.tsx b/deployables/app/app/components/versionManagement/MinimumVersion.tsx
@@ -1,12 +1,27 @@
 import { compare } from 'compare-versions'
 import type { PropsWithChildren } from 'react'
+import { useIsDev } from '../DevelopmentContext'
 import { useExtensionVersion } from './ExtensionVersionContext'
 
 export const MinimumVersion = ({
   children,
   version,
 }: PropsWithChildren<{ version: string }>) => {
   const extensionVersion = useExtensionVersion()
+  const isDev = useIsDev()
+
+  if (isDev) {
+    return (
+      <div className="rounded border border-yellow-900/80">
+        <div className="flex items-center gap-2 p-2 text-xs uppercase">
+          <span className="opacity-75">From version:</span>
+          <span className="font-semibold">{version}</span>
+        </div>
+
+        {children}
+      </div>
+    )
+  }
 
   // Extension too old to even support this feature
   if (extensionVersion == null) {
diff --git a/deployables/app/app/root.tsx b/deployables/app/app/root.tsx
@@ -1,4 +1,7 @@
-import { ProvideExtensionVersion } from '@/components'
+import {
+  ProvideDevelopmentContext,
+  ProvideExtensionVersion,
+} from '@/components'
 import { ToastContainer } from '@zodiac/ui'
 import {
   isRouteErrorResponse,
@@ -7,6 +10,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLoaderData,
 } from 'react-router'
 import type { Route } from './+types/root'
 
@@ -20,7 +24,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body className="flex h-full flex-col text-base text-zinc-900 dark:text-white">
-        <ProvideExtensionVersion>{children}</ProvideExtensionVersion>
+        {children}
         <ToastContainer />
         <ScrollRestoration />
         <Scripts />
@@ -29,8 +33,18 @@ export function Layout({ children }: { children: React.ReactNode }) {
   )
 }
 
+export const loader = () => ({ isDev: process.env.NODE_ENV === 'development' })
+
 export default function App() {
-  return <Outlet />
+  const { isDev } = useLoaderData<typeof loader>()
+
+  return (
+    <ProvideDevelopmentContext isDev={isDev}>
+      <ProvideExtensionVersion>
+        <Outlet />
+      </ProvideExtensionVersion>
+    </ProvideDevelopmentContext>
+  )
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
diff --git a/deployables/app/app/routes/edit/edit-route.$data.tsx b/deployables/app/app/routes/edit/edit-route.$data.tsx
@@ -2,6 +2,7 @@ import {
   AvatarInput,
   ChainSelect,
   ConnectWallet,
+  useIsDev,
   WalletProvider,
   ZodiacMod,
 } from '@/components'
@@ -71,7 +72,6 @@ export const loader = ({ params }: Route.LoaderArgs) => {
     chainId,
     avatar: route.avatar,
     waypoints: route.waypoints,
-    isDev: process.env.NODE_ENV === 'development',
   }
 }
 
@@ -174,11 +174,12 @@ export const clientAction = async ({
 }
 
 const EditRoute = ({
-  loaderData: { chainId, label, avatar, waypoints, isDev },
+  loaderData: { chainId, label, avatar, waypoints },
   actionData,
 }: Route.ComponentProps) => {
   const submit = useSubmit()
   const optimisticRoute = useOptimisticRoute()
+  const isDev = useIsDev()
 
   return (
     <>
