chore(deps): upgrade React Router to v7

.gitignore

@@ -48,4 +48,7 @@ build
 .cache
 
 # macOS
-.DS_Store
+.DS_Store
+
+# React Router
+.react-router/

eslint.config.js

@@ -16,6 +16,7 @@ export default [
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   {
+    files: ['frontend/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
     ...pluginReact.configs.flat.recommended,
     settings: {
       react: {
@@ -40,6 +41,13 @@ export default [
     }
   },
   {
-    ignores: ['**/node_modules/', '**/dist/', '**/build/', '**/public/init.js']
+    ignores: [
+      '**/node_modules/',
+      '**/dist/',
+      '**/build/',
+      '**/public/init.js',
+      '**/.react-router/',
+      '**/.wrangler/'
+    ]
   }
 ]

frontend/app/components/ButtonOrLink.tsx

@@ -1,4 +1,4 @@
-import { Link, type LinkProps } from '@remix-run/react'
+import { Link, type LinkProps } from 'react-router'
 import { forwardRef, type ComponentProps } from 'react'
 
 type AnchorOrLinkProps = ComponentProps<'a'> & Partial<LinkProps>

frontend/app/components/redesign/components/BuilderBackground.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useSnapshot } from 'valtio'
 import { cx } from 'class-variance-authority'
 import { toolState } from '~/stores/toolStore'
-import { ToolsSecondaryButton } from '@/components'
+import { ToolsSecondaryButton } from '@/components/ToolsSecondaryButton'
 import { SLIDE_ANIMATION } from '@shared/types'
 
 const DOT_PATTERN_SVG = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="2" fill="white" fill-opacity="0.5" /></svg>`

frontend/app/components/redesign/components/HeadingCore.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { GhostButton } from '@/components'
+import { GhostButton } from '@/components/GhostButton'
 import { Heading1, Heading2SemiBold } from '@/typography'
 import { SVGArrowLeft } from '@/assets'
 

frontend/app/components/redesign/components/landing/ToolCard.tsx

@@ -1,5 +1,5 @@
 import React, { useId } from 'react'
-import { Link } from '@remix-run/react'
+import { Link } from 'react-router'
 import { PillTag } from '@/components'
 import arrowOutwardIcon from '~/assets/images/landing/arrow-outward.svg'
 

frontend/app/entry.client.tsx

@@ -4,7 +4,7 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from '@remix-run/react'
+import { HydratedRouter } from 'react-router/dom'
 import { startTransition, StrictMode } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { scan } from 'react-scan'
@@ -22,7 +22,7 @@ startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>
   )
 })

frontend/app/entry.server.tsx

@@ -4,32 +4,31 @@
  * For more information, see https://remix.run/file-conventions/entry.server
  */
 
-import type { AppLoadContext, EntryContext } from '@remix-run/cloudflare'
-import { RemixServer } from '@remix-run/react'
+import {
+  ServerRouter,
+  type AppLoadContext,
+  type EntryContext
+} from 'react-router'
 import { isbot } from 'isbot'
 import { renderToReadableStream } from 'react-dom/server'
 
-const ABORT_DELAY = 5000
+export const streamTimeout = 5000
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   loadContext: AppLoadContext
 ) {
   const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), ABORT_DELAY)
+  const timeoutId = setTimeout(() => controller.abort(), streamTimeout)
 
   const body = await renderToReadableStream(
-    <RemixServer
-      context={remixContext}
-      url={request.url}
-      abortDelay={ABORT_DELAY}
-    />,
+    <ServerRouter context={reactRouterContext} url={request.url} />,
     {
       signal: controller.signal,
       onError(error: unknown) {

frontend/app/hooks/usePathTracker.ts

@@ -1,4 +1,4 @@
-import { useLocation } from '@remix-run/react'
+import { useLocation } from 'react-router'
 import { useEffect } from 'react'
 import { TOOL_TYPES, toolActions, type ToolType } from '~/stores/toolStore'
 

frontend/app/root.tsx

@@ -1,13 +1,14 @@
-import type { LinksFunction, MetaFunction } from '@remix-run/cloudflare'
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useRouteError,
-  isRouteErrorResponse
-} from '@remix-run/react'
+  isRouteErrorResponse,
+  type LinksFunction,
+  type MetaFunction
+} from 'react-router'
 import type { ReactNode } from 'react'
 import stylesheet from '~/tailwind.css?url'
 import { Button } from './components/index.js'

frontend/app/routes.ts

@@ -0,0 +1,15 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes'
+
+export default [
+  // Root index route
+  index('routes/_index.tsx'),
+  // Tool routes
+  route('banner/', 'routes/banner.tsx'),
+  route('link-tag/', 'routes/link-tag.tsx'),
+  route('payment-confirmation/', 'routes/payment-confirmation.tsx'),
+  route('prob-revshare/', 'routes/prob-revshare.tsx'),
+  route('widget/', 'routes/widget.tsx'),
+  // API routes
+  route('api/config/:type', 'routes/api.config.$type.ts'),
+  route('api/grant/:type', 'routes/api.grant.$type.ts')
+] satisfies RouteConfig

frontend/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/cloudflare'
+import type { MetaFunction } from 'react-router'
 import { ToolCard } from '~/components/redesign/components/landing/ToolCard'
 import { Heading1, Heading3 } from '~/components/redesign/Typography'
 import SVGLinkGenerator from '~/assets/images/landing/illustration_link_generator.svg?url'

frontend/app/routes/api.config.$type.ts

@@ -1,8 +1,5 @@
-import {
-  json,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs
-} from '@remix-run/cloudflare'
+import { data } from 'react-router'
+import type { Route } from './+types/api.config.$type'
 import { getDefaultData } from '@shared/default-data'
 import { filterDeepProperties } from '~/utils/utils.server.js'
 import { sanitizeConfigFields } from '~/utils/sanitize.server.js'
@@ -16,7 +13,7 @@ import { APP_BASEPATH } from '~/lib/constants.js'
 import { AWS_PREFIX } from '@shared/defines'
 import { getWalletAddress, normalizeWalletAddress } from '@shared/utils'
 
-export async function loader({ request, params, context }: LoaderFunctionArgs) {
+export async function loader({ request, params, context }: Route.LoaderArgs) {
   try {
     const { env } = context.cloudflare
     const url = new URL(request.url)
@@ -36,7 +33,7 @@ export async function loader({ request, params, context }: LoaderFunctionArgs) {
       errors.fieldErrors = result.error?.flatten().fieldErrors || {
         walletAddress: undefined
       }
-      return json({ errors, success: false }, { status: 400 })
+      return data({ errors, success: false }, { status: 400 })
     }
 
     const ownerWalletAddress = normalizeWalletAddress(
@@ -50,17 +47,17 @@ export async function loader({ request, params, context }: LoaderFunctionArgs) {
       let fileContent = Object.assign({}, fileContentString)
       fileContent = filterDeepProperties(fileContent) as ConfigVersions
 
-      return json(fileContent)
+      return data(fileContent)
     } catch (error) {
       // @ts-expect-error TODO
       if (error.name === 'NoSuchKey' || error.message.includes('404')) {
         // no user config exists for this wallet address - return empty response
-        return json({})
+        return {}
       }
       throw error
     }
   } catch (error) {
-    return json(
+    return data(
       {
         error: `An error occurred while fetching data: ${(error as Error).message}`
       },
@@ -69,14 +66,14 @@ export async function loader({ request, params, context }: LoaderFunctionArgs) {
   }
 }
 
-export async function action({ request, params, context }: ActionFunctionArgs) {
+export async function action({ request, params, context }: Route.ActionArgs) {
   const { env } = context.cloudflare
   const elementType = params.type
 
   const formData = await request.formData()
   const entries = Object.fromEntries(formData.entries())
   if (!entries.walletAddress) {
-    return json(
+    return data(
       {
         errors: { fieldErrors: { walletAddress: 'Wallet address is required' } }
       },
@@ -95,7 +92,7 @@ export async function action({ request, params, context }: ActionFunctionArgs) {
     errors.fieldErrors = result.error?.flatten().fieldErrors || {
       walletAddress: undefined
     }
-    return json({ message, errors, success: false, intent }, { status: 400 })
+    return data({ message, errors, success: false, intent }, { status: 400 })
   }
 
   let ownerWalletAddress: string = payload.walletAddress
@@ -115,7 +112,7 @@ export async function action({ request, params, context }: ActionFunctionArgs) {
       })
       session.set('payment-grant', grant)
 
-      return json(
+      return data(
         {
           errors,
           grantRequired: grant.interact.redirect,
@@ -133,7 +130,7 @@ export async function action({ request, params, context }: ActionFunctionArgs) {
       errors.fieldErrors = {
         walletAddress: ['Could not verify ownership of wallet address']
       }
-      return json({ errors }, { status: 500 })
+      return data({ errors }, { status: 500 })
     }
   }
 
@@ -150,7 +147,7 @@ export async function action({ request, params, context }: ActionFunctionArgs) {
       return handleDelete(storageService, formData, ownerWalletAddress)
 
     default:
-      return json({ error: 'Method not allowed' }, { status: 405 })
+      return data({ error: 'Method not allowed' }, { status: 405 })
   }
 }
 
@@ -163,7 +160,7 @@ async function handleCreate(
     const version = formData.get('version') as string
 
     if (!version) {
-      return json(
+      return data(
         { errors: { fieldErrors: { version: 'Version required' } } },
         { status: 400 }
       )
@@ -181,7 +178,7 @@ async function handleCreate(
       const err = error as Error
       if (err.name !== 'NoSuchKey') {
         // for NoSuchKey, continue with defaults
-        return json(
+        return data(
           {
             error: `An error occurred while fetching data: ${(error as Error).message}`
           },
@@ -192,7 +189,7 @@ async function handleCreate(
 
     if (configs.default) {
       if (configs[version]) {
-        return json(
+        return data(
           { errors: { fieldErrors: { version: 'Version already exists' } } },
           { status: 409 }
         )
@@ -208,9 +205,9 @@ async function handleCreate(
     }
 
     await storageService.putJson(walletAddress, configs)
-    return json(configs)
+    return data(configs)
   } catch (error) {
-    return json({ error: (error as Error).message }, { status: 500 })
+    return data({ error: (error as Error).message }, { status: 500 })
   }
 }
 
@@ -239,9 +236,9 @@ async function handleUpdate(
     await configStorage.putJson(walletAddress, filteredData)
 
     // TODO: reduce payload size, return only ok
-    return json(filteredData)
+    return data(filteredData)
   } catch (error) {
-    return json({ error: (error as Error).message }, { status: 500 })
+    return data({ error: (error as Error).message }, { status: 500 })
   }
 }
 
@@ -254,7 +251,7 @@ async function handleDelete(
     const version = formData.get('version') as string
 
     if (!version) {
-      return json(
+      return data(
         { errors: { fieldErrors: { version: 'Version required' } } },
         { status: 400 }
       )
@@ -272,9 +269,9 @@ async function handleDelete(
       await configStorage.putJson(walletAddress, existingConfig)
     }
 
-    return json(existingConfig)
+    return data(existingConfig)
   } catch (error) {
-    return json(
+    return data(
       {
         error: `Error occurred while deleting version: ${(error as Error).message}`
       },

frontend/app/routes/api.grant.$type.tsx → frontend/app/routes/api.grant.$type.ts

@@ -1,8 +1,10 @@
-import { redirect, type LoaderFunctionArgs } from '@remix-run/cloudflare'
+import { redirect } from 'react-router'
 import { commitSession, getSession } from '~/utils/session.server'
 import { isGrantValidAndAccepted } from '~/utils/open-payments.server'
 
-export async function loader({ params, request, context }: LoaderFunctionArgs) {
+import type { Route } from './+types/api.grant.$type'
+
+export async function loader({ params, request, context }: Route.LoaderArgs) {
   const { env } = context.cloudflare
 
   const elementType = params.type

frontend/app/routes/banner.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState, useRef } from 'react'
 import { useSnapshot } from 'valtio'
-import { useLoaderData, useNavigate } from '@remix-run/react'
 import { useUIActions } from '~/stores/uiStore'
 import { usePathTracker } from '~/hooks/usePathTracker'
 import {
+  useLoaderData,
+  useNavigate,
+  data,
   type LoaderFunctionArgs,
-  json,
   type MetaFunction
-} from '@remix-run/cloudflare'
+} from 'react-router'
 import {
   HeadingCore,
   ToolsWalletAddress,
@@ -60,7 +61,7 @@ export async function loader({ request, context }: LoaderFunctionArgs) {
   session.unset('is-grant-accepted')
   session.unset('is-grant-response')
 
-  return json(
+  return data(
     {
       grantResponse,
       isGrantAccepted,

frontend/app/routes/link-tag.tsx

@@ -1,6 +1,5 @@
 import { HeadingCore, LinkTagGenerator } from '@/components'
-import { useNavigate } from '@remix-run/react'
-import type { MetaFunction } from '@remix-run/cloudflare'
+import { useNavigate, type MetaFunction } from 'react-router'
 
 export const meta: MetaFunction = () => {
   return [