tanstack updates (#145)

Author: naps62

biome.json

@@ -11,7 +11,8 @@
       "!**/.vinxi",
       "!**/dist",
       "!**/app.config.timestamp_*",
-      "!**/.nitro"
+      "!**/.nitro",
+      "!**/*.css"
     ]
   },
   "formatter": {

package.json

@@ -23,17 +23,20 @@
     "@rainbow-me/rainbowkit": "^2.2.8",
     "@stefanprobst/rehype-extract-toc": "^3.0.0",
     "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/devtools-vite": "^0.5.0",
+    "@tanstack/react-devtools": "^0.9.4",
     "@tanstack/react-query": "^5.90.2",
-    "@tanstack/react-router": "^1.158.0",
+    "@tanstack/react-router": "^1.132.0",
     "@tanstack/react-router-devtools": "^1.132.11",
-    "@tanstack/react-start": "^1.158.0",
+    "@tanstack/react-start": "^1.132.0",
     "@vitejs/plugin-react": "^5.0.3",
     "autoprefixer": "^10.4.21",
     "cheerio": "^1.1.2",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "lru-cache": "^11.2.2",
     "lucide-react": "^0.506.0",
+    "nitro": "npm:nitro-nightly@latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.63.0",
@@ -49,6 +52,7 @@
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
     "simple-icons": "^16.3.0",
+    "srvx": "^0.11.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "4.0.11",
     "titleize": "^4.0.0",

pnpm-lock.yaml

@@ -58,9 +58,7 @@ Like the previous feature, this was also spearheaded by a first-time contributor
 
 ## Live on Gitcoin 19
 
-The latest Gitcoin round is now live, and Iron Wallet is up in the Web3 Open source category. so if the project has been of use to you, consider supporting it.
-
-<Embed url="https://explorer.gitcoin.co/#/round/424/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008-94" />
+The latest Gitcoin round is now live, and Iron Wallet is up in the Web3 Open source category. so if the project has been of use to you, [consider supporting it](https://explorer.gitcoin.co/#/round/424/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008-94)
 
 Or just go say hi to us in DevConnect & [WalletUncon](https://twitter.com/walletuncon). We don’t bite.
 

src/blog/08-ethui-1.1.1-ledger-devtools/index.mdx

@@ -60,9 +60,7 @@ It also doesn't help that the most popular explorer, Etherscan, has a pretty lim
 
 ## What about Otterscan?
 
-This is a hugely popular open-source effort, Otterscan, attempting to replicate Etherscan's functionality in a local and private environment:
-
-<Embed url="https://otterscan.io" />
+This is a hugely popular open-source effort, Otterscan, attempting to replicate Etherscan's functionality in a [local and private environment][otterscan]:
 
 However, for development workflows, it has some drawbacks of it's own:
 

src/blog/13-ethui-explorer/index.mdx

@@ -14,7 +14,10 @@ export function Breadcrumbs() {
   const breadcrumbs: { label: string; path: string }[] = matches.reduce(
     (acc, { context, pathname }) => {
       if (
-        context?.breadcrumb &&
+        context &&
+        typeof context === "object" &&
+        "breadcrumb" in context &&
+        typeof context.breadcrumb === "string" &&
         context.breadcrumb !== acc[acc.length - 1]?.label
       ) {
         acc.push({ label: context.breadcrumb, path: pathname });

src/components/breadcrumbs.tsx

@@ -12,7 +12,6 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LRouteImport } from './routes/_l'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DocsIndexRouteImport } from './routes/docs/index'
-import { Route as AuthIndexRouteImport } from './routes/auth/index'
 import { Route as DocsLRouteImport } from './routes/docs/_l'
 import { Route as DocsLNotfoundRouteImport } from './routes/docs/_l.$notfound'
 import { Route as LBlogLRouteImport } from './routes/_l.blog/_l'
@@ -35,11 +34,6 @@ const DocsIndexRoute = DocsIndexRouteImport.update({
   path: '/docs/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AuthIndexRoute = AuthIndexRouteImport.update({
-  id: '/auth/',
-  path: '/auth/',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const DocsLRoute = DocsLRouteImport.update({
   id: '/docs/_l',
   path: '/docs',
@@ -80,7 +74,6 @@ const LBlogLSlugRoute = LBlogLSlugRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/docs': typeof DocsLRouteWithChildren
-  '/auth/': typeof AuthIndexRoute
   '/docs/': typeof DocsIndexRoute
   '/blog': typeof LBlogLRouteWithChildren
   '/docs/$notfound': typeof DocsLNotfoundRoute
@@ -92,7 +85,6 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/docs': typeof DocsIndexRoute
-  '/auth': typeof AuthIndexRoute
   '/docs/$notfound': typeof DocsLNotfoundRoute
   '/blog/$slug': typeof LBlogLSlugRoute
   '/docs/$section/$subsection': typeof DocsLSectionSubsectionRoute
@@ -104,7 +96,6 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/_l': typeof LRouteWithChildren
   '/docs/_l': typeof DocsLRouteWithChildren
-  '/auth/': typeof AuthIndexRoute
   '/docs/': typeof DocsIndexRoute
   '/_l/blog/_l': typeof LBlogLRouteWithChildren
   '/docs/_l/$notfound': typeof DocsLNotfoundRoute
@@ -118,7 +109,6 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/docs'
-    | '/auth/'
     | '/docs/'
     | '/blog'
     | '/docs/$notfound'
@@ -130,7 +120,6 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/docs'
-    | '/auth'
     | '/docs/$notfound'
     | '/blog/$slug'
     | '/docs/$section/$subsection'
@@ -141,7 +130,6 @@ export interface FileRouteTypes {
     | '/'
     | '/_l'
     | '/docs/_l'
-    | '/auth/'
     | '/docs/'
     | '/_l/blog/_l'
     | '/docs/_l/$notfound'
@@ -155,7 +143,6 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LRoute: typeof LRouteWithChildren
   DocsLRoute: typeof DocsLRouteWithChildren
-  AuthIndexRoute: typeof AuthIndexRoute
   DocsIndexRoute: typeof DocsIndexRoute
 }
 
@@ -182,13 +169,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/auth/': {
-      id: '/auth/'
-      path: '/auth'
-      fullPath: '/auth/'
-      preLoaderRoute: typeof AuthIndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/docs/_l': {
       id: '/docs/_l'
       path: '/docs'
@@ -282,7 +262,6 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LRoute: LRouteWithChildren,
   DocsLRoute: DocsLRouteWithChildren,
-  AuthIndexRoute: AuthIndexRoute,
   DocsIndexRoute: DocsIndexRoute,
 }
 export const routeTree = rootRouteImport

src/routeTree.gen.ts

@@ -1,33 +1,19 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   createRootRouteWithContext,
   HeadContent,
   Outlet,
+  type RouteContext,
   Scripts,
 } from "@tanstack/react-router";
-import { lazy, Suspense } from "react";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import appCss from "#/app.css?url";
 import { Aptabase } from "#/components/aptabase";
 import { DefaultCatchBoundary } from "#/components/DefaultCatchBoundary";
 import { NotFound } from "#/components/NotFound";
 import { linkedData, seo } from "#/utils/seo";
 
-const TanStackRouterDevtools =
-  process.env.NODE_ENV === "production"
-    ? () => null // Render nothing in production
-    : lazy(() =>
-      // Lazy load in development
-      import("@tanstack/react-router-devtools").then((res) => ({
-        default: res.TanStackRouterDevtools,
-        // For Embedded Mode
-        // default: res.TanStackRouterDevtoolsPanel
-      })),
-    );
-
-export interface RouteContext {
-  breadcrumb?: string;
-}
-
 const seoDescription =
   "High-performance Ethereum desktop app for Web3 devs. Native Hardhat & Foundry support, local smart contract explorer, and multi-wallet sync. Open-source.";
 
@@ -122,9 +108,17 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       </head>
       <body>
         {children}
-        <Suspense>
-          <TanStackRouterDevtools position="bottom-right" />
-        </Suspense>
+        <TanStackDevtools
+          config={{
+            position: "bottom-right",
+          }}
+          plugins={[
+            {
+              name: "Tanstack Router",
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
         <Scripts />
       </body>
     </html>