fix(frontend): Line breaks on tools pages, descriptions are sentenced per line

frontend/app/components/redesign/components/ToolsWalletAddress.tsx

@@ -169,11 +169,9 @@ export const ToolsWalletAddress = ({ toolName }: ToolsWalletAddressProps) => {
             Wallet address
           </Heading5>
           <Tooltip label="Why do I need to connect my wallet?">
-            Your wallet is required in order for us to save this components
-            configuration for you, link it to the original author, and verify
-            ownership for future updates.
-            <br /> It also embeds the wallet address into your web page
-            automatically, enabling Web Monetization on your behalf.
+            Your wallet is required to save this component&apos;s configuration, link it to the original author, and verify ownership for future updates.
+            <br />
+            It also embeds the wallet address into your web page automatically, enabling Web Monetization on your behalf.
           </Tooltip>
         </div>
         <div className="flex items-start gap-3 w-full pt-md">

frontend/app/components/redesign/components/header/MobileMenu.tsx

@@ -2,15 +2,17 @@ import { SVGCloseIcon } from '@/assets'
 import { GhostButton, PoweredByFooter } from '@/components'
 import mobileLogo from '~/assets/images/mobile_logo.svg'
 
+import { APP_BASEPATH } from '~/lib/constants.js'
+
 const toolItems: MobileMenuItemData[] = [
-  { to: '/publishers', text: 'Publisher tools' },
-  { to: '/supporters', text: 'Supporter tools' },
-  { to: '/developers', text: 'Developer tools' }
+  { to: `${APP_BASEPATH}/publishers`, text: 'Publisher tools' },
+  { to: `${APP_BASEPATH}/supporters`, text: 'Supporter tools' },
+  { to: `${APP_BASEPATH}/developers`, text: 'Developer tools' }
 ]
 
 const technicalItems: MobileMenuItemData[] = [
-  { to: '/docs', text: 'Documentation' },
-  { to: '/specification', text: 'Specification' }
+  { to: `${APP_BASEPATH}/docs`, text: 'Documentation' },
+  { to: `${APP_BASEPATH}/specification`, text: 'Specification' }
 ]
 
 interface MobileMenuItemData {

frontend/app/components/redesign/components/header/NavDropdown.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import ClickAwayListener from 'react-click-away-listener'
 import { cx } from 'class-variance-authority'
 import { SVGDownArrow } from '@/assets'
+import { APP_BASEPATH } from '~/lib/constants.js'
 import developerImage from '~/assets/images/dropdown-developer.png'
 import publisherHoverImage from '~/assets/images/dropdown-publisher-active.png'
 import publisherDefaultImage from '~/assets/images/dropdown-publisher-inactive.png'
@@ -142,19 +143,19 @@ export const NavDropdown = ({
         >
           <ul className="flex w-full flex-grow list-none flex-col gap-xs">
             <ToolsMenuItem
-              to="/publishers"
+              to={`${APP_BASEPATH}/publishers`}
               hoverImage={publisherHoverImage}
               defaultImage={publisherDefaultImage}
               text="For publishers"
             />
             <ToolsMenuItem
-              to="/supporters"
+              to={`${APP_BASEPATH}/supporters`}
               hoverImage={supporterHoverImage}
               defaultImage={supporterDefaultImage}
               text="For supporters"
             />
             <ToolsMenuItem
-              to="/developers"
+              to={`${APP_BASEPATH}/developers`}
               defaultImage={developerImage}
               text="For developers"
             />

frontend/app/components/redesign/components/header/NavigationLink.tsx

@@ -1,3 +1,5 @@
+import { APP_BASEPATH } from '~/lib/constants.js'
+
 type NavLinkProps = {
   to: string
   children: React.ReactNode
@@ -7,7 +9,7 @@ export const NavLink = ({ to, children }: NavLinkProps) => {
   return (
     <li className="group flex md:justify-center md:items-center">
       <a
-        href={to}
+        href={to.startsWith('/') ? `${APP_BASEPATH}${to}` : to}
         className="w-full px-md py-sm text-sm leading-sm bg-transparent text-nav-link-default focusable-nav-item"
       >
         {children}

frontend/app/components/redesign/components/revshare/RevShareInfo.tsx

@@ -7,14 +7,21 @@ export const RevShareInfo = () => {
       <div>
         <p className="text-sm leading-sm text-field-helpertext-default">
           Each recipient has a different chance of being chosen, depending on
-          their assigned weight. The weight is translated to a percentage which
-          represents the percent of revenue each recipient will receive over
-          time. The higher the weight, the larger the percentage.
+          their assigned weight.
+          <br />
+          The weight is translated to a percentage which represents the percent
+          of revenue each recipient will receive over time.
+          <br />
+          The higher the weight, the larger the percentage.
+          <br />
           <br />
           For example, if three recipients each have a weight of 1, then each
-          recipient will eventually receive 33% of the revenue. If three
-          recipients have a weight of 1, 2, and 3, the percentages will be 17%
-          (weight 1), 33% (weight 2), and 50% (weight 3). <br />
+          recipient will eventually receive 33% of the revenue.
+          <br />
+          If three recipients have a weight of 1, 2, and 3, the percentages will
+          be 17% (weight 1), 33% (weight 2), and 50% (weight 3).
+          <br />
+          <br />
           Additional information can be found in the overview of the&nbsp;
           <a
             className="underline"
@@ -33,10 +40,18 @@ export const RevShareInfo = () => {
         </p>
         <p className="text-sm leading-sm text-field-helpertext-default">
           Enter each payment pointer and wallet address that will receive a
-          split of the revenue into the table. Names are optional. Click Add
-          recipient to add more rows. Assign a weight to each recipient. When
-          you&apos;re finished, add the generated monetization link tag to your
-          site. The link contains a unique URL hosted on
+          split of the revenue into the table.
+          <br />
+          Names are optional.
+          <br />
+          Click Add recipient to add more rows.
+          <br />
+          Assign a weight to each recipient.
+          <br />
+          When you&apos;re finished, add the generated monetization link tag to
+          your site.
+          <br />
+          The link contains a unique URL hosted on
           https://tools-api.webmonetization.org/revshare/.
         </p>
       </div>

frontend/app/root.tsx

@@ -42,7 +42,12 @@ export default function App() {
 }
 
 export function ErrorBoundary() {
-  const error = useRouteError()
+  let error: unknown
+  try {
+    error = useRouteError()
+  } catch (e) {
+    error = e
+  }
 
   if (isRouteErrorResponse(error)) {
     return (

frontend/app/routes/_index.tsx

@@ -47,8 +47,13 @@ const setupTools = [
 const interactionTools = [
   {
     title: 'Banner',
-    description:
-      'Show a customizable banner to introduce Web Monetization. The banner disappears when dismissed or the extension is installed.',
+    description: (
+      <>
+        Show a customizable banner to introduce Web Monetization.
+        <br />
+        The banner disappears when dismissed or the extension is installed.
+      </>
+    ),
     tags: [
       'Web Monetization',
       'Visibility boost',
@@ -60,7 +65,13 @@ const interactionTools = [
   },
   {
     title: 'Widget',
-    description: `A floating icon that lets visitors support you with one-time payments. No extension needed, simple and flexible.`,
+    description: (
+      <>
+        A floating icon that lets visitors support you with one-time payments.
+        <br />
+        No extension needed, simple and flexible.
+      </>
+    ),
     tags: [
       'Web Monetization',
       'One time support',
@@ -72,8 +83,14 @@ const interactionTools = [
   },
   {
     title: 'Call-to-Action button',
-    description:
-      'The most classic, yet one of the most effective methods in order to link to your supporters. Ladies and gents, the button!',
+    description: (
+      <>
+        The most classic, yet one of the most effective methods in order to link
+        to your supporters.
+        <br />
+        Ladies and gents, the button!
+      </>
+    ),
     tags: ['flawless', 'dynamic', 'high click rate', 'button'],
     icon: SVGButton,
     link: '/button',
@@ -117,6 +134,7 @@ export default function Index() {
 
         <p className="text-style-h5 !text-landing-content text-center w-full max-xl:!text-style-body-standard">
           Use our suite of tools to set up and promote Web Monetization.
+          <br />
           Encourage your visitors to support your content and website.
         </p>
       </div>
@@ -136,7 +154,7 @@ export default function Index() {
             Setup tools
           </Heading3>
 
-          <p className="text-style-h5 !text-landing-content text-left w-full max-xl:!text-style-small-standard max-xl:text-center">
+          <p className="text-style-h5 !text-landing-content text-center w-full max-xl:!text-style-small-standard max-xl:text-center xl:text-left">
             Get started quickly with tools designed to help you set up Web
             Monetization on your website
           </p>
@@ -175,11 +193,12 @@ export default function Index() {
             Interaction tools
           </Heading3>
 
-          <p className="text-style-h5 !text-landing-content text-left w-full max-xl:!text-style-small-standard max-xl:text-center">
+          <p className="text-style-h5 !text-landing-content text-center w-full max-xl:!text-style-small-standard max-xl:text-center xl:text-left">
             Add lightweight and embeddable tools, like banners and widgets, to
-            your site with simple scripts. They&apos;re easily customizable,
-            helping you connect with your audience to encourage Web Monetization
-            support.
+            your site with simple scripts.
+            <br />
+            They&apos;re easily customizable, helping you connect with your
+            audience to encourage Web Monetization support.
           </p>
 
           <ul

frontend/app/routes/link-tag.tsx

@@ -22,7 +22,9 @@ export default function LinkTag() {
           onBackClick={() => navigate('/')}
         >
           Use the Link Tag Generator to generate a monetization <link>
-          element for your HTML documents. Just enter your 
+          element for your HTML documents.
+          <br />
+          Just enter your&nbsp;
           <a href="https://paymentpointers.org/" className="underline">
             payment pointer
           </a>

frontend/app/routes/payment-confirmation.tsx

@@ -97,8 +97,9 @@ export default function PaymentComplete() {
           </h2>
 
           <p className="text-gray-600 mb-8">
-            Your payment has been processed successfully. You can now close this
-            window.
+            Your payment has been processed successfully.
+            <br />
+            You can now close this window.
           </p>
         </div>
       </div>

frontend/app/routes/prob-revshare.tsx

@@ -130,10 +130,13 @@ function Revshare() {
           onBackClick={() => navigate('/')}
         >
           Probabilistic revenue sharing is a way to share a portion of a web
-          monetized page's earnings between multiple recipients. Each time
-          a web monetized user visits the page, a recipient will be chosen at
-          random. Payments will go to the chosen recipient until the page is
-          closed or reloaded.
+          monetized page's earnings between multiple recipients.
+          <br />
+          Each time a web monetized user visits the page, a recipient will be
+          chosen at random.
+          <br />
+          Payments will go to the chosen recipient until the page is closed or
+          reloaded.
         </HeadingCore>
         <Card>
           <Heading5>Recipients</Heading5>

frontend/app/routes/widget.tsx

@@ -143,8 +143,10 @@ export default function Widget() {
         <div className="w-full max-w-[1280px] px-md">
           <HeadingCore title="Widget" onBackClick={() => navigate('/')}>
             The payment widget allows visitors to make one-time payments to
-            support your content directly. It provides a clean, customizable
-            interface for Web Monetization payments.
+            support your content directly.
+            <br />
+            It provides a clean, customizable interface for Web Monetization
+            payments.
             <br />
             Configure your wallet address to receive payments from your
             supporters.

frontend/app/stores/uiStore.tsx

@@ -110,10 +110,6 @@ export const useUIActions = (): UIActions => {
   return context
 }
 
-export const useUIState = (): UIState => {
-  const state = useContext(UIStateContext)
-  if (!state) {
-    throw new Error('useUIState must be used within a UIProvider')
-  }
-  return state
+export const useUIState = (): UIState | undefined => {
+  return useContext(UIStateContext)
 }

frontend/worker.ts

@@ -24,6 +24,15 @@ export default {
       if (url.pathname === '/') {
         return Response.redirect(new URL(`${APP_BASEPATH}/`, request.url), 302)
       }
+
+      if (url.pathname === '/favicon.ico') {
+        return new Response(null, { status: 404 })
+      }
+
+      if (!url.pathname.startsWith(APP_BASEPATH)) {
+        return new Response(null, { status: 404 })
+      }
+
       const serverBuild = await build()
       const requestHandler = createRequestHandler(serverBuild as ServerBuild)
 

package.json

@@ -26,14 +26,15 @@
     "globals": "^17.0.0",
     "prettier": "^3.7.4",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.52.0"
+    "typescript-eslint": "^8.52.0",
+      "wrangler": "4.59.1"
   },
   "resolutions": {
     "esbuild": "^0.27.2"
   },
   "pnpm": {
     "overrides": {
-      "wrangler": "4.54.0"
+      "wrangler": "4.59.1"
     }
   },
   "engines": {