chore: pages dev section

Author: mjkeaton

src/pages/balances/BalancesPage.tsx

@@ -7,6 +7,7 @@ import { PropsWithChildren, Suspense } from "react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { BalancesResponse, fetchBalances } from "@/lib/api"
 import { useSuspenseQuery } from "@tanstack/react-query"
+import useLocalStorage from "@/hooks/use-local-storage"
 
 function Loader() {
   return (
@@ -175,10 +176,26 @@ function PageBody() {
           <OtherBalanceChart />
         </Card>
       </div>
+    </>
+  )
+}
 
+
+function DevSection() {
+  const [devMode] = useLocalStorage("devMode", false)
+  const { data } = useSuspenseQuery({
+    queryKey: ["balances"],
+    queryFn: fetchBalances,
+  })
+
+  return (
+    <>
+      {devMode && (
+        
       <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
         {JSON.stringify(data, null, 2)}
       </pre>
+      )}
     </>
   )
 }
@@ -191,6 +208,7 @@ export default function BalancesPage() {
 
       <Suspense fallback={<Loader />}>
         <PageBody />
+        <DevSection />
       </Suspense>
     </>
   )

src/pages/quotes/QuotesPage.tsx

@@ -3,6 +3,7 @@ import { H3 } from "@/components/Headings"
 import { PageTitle } from "@/components/PageTitle"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
+import useLocalStorage from "@/hooks/use-local-storage"
 import { fetchAdminQuotePending } from "@/lib/api"
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { ViewIcon } from "lucide-react"
@@ -55,13 +56,24 @@ function QuoteListPending() {
   )
 }
 
+function DevSection() {
+  const [devMode] = useLocalStorage("devMode", false)
+
+  return (
+    <>
+      {devMode && (
+        <QuoteListPendingRaw />
+      )}
+    </>
+  )
+}
+
 function PageBody() {
   return (
     <>
       <H3>Pending</H3>
       <Suspense fallback={<Loader />}>
         <QuoteListPending />
-        <QuoteListPendingRaw />
       </Suspense>
     </>
   )
@@ -73,6 +85,9 @@ export default function QuotesPage() {
       <Breadcrumbs>Quotes</Breadcrumbs>
       <PageTitle>Quotes</PageTitle>
       <PageBody />
+      <Suspense>
+        <DevSection />
+      </Suspense>
     </>
   )
 }