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/NavigationLink.tsx

@@ -1,3 +1,5 @@
+
+
 type NavLinkProps = {
   to: string
   children: React.ReactNode

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)