fix(web): icon bundling, runtime errors caught in tests

Author: kyranjamie

apps/web/app/components/icons/bitcoin-icon.tsx

@@ -4,11 +4,5 @@ interface BitcoinIconProps extends HTMLStyledProps<'img'> {
   size?: number;
 }
 export function BitcoinIcon({ size = 24 }: BitcoinIconProps) {
-  return (
-    <styled.img
-      width={size}
-      height={size}
-      src={'node_modules/@leather.io/ui/dist-web/assets/icons/bitcoin.svg'}
-    />
-  );
+  return <styled.img width={size} height={size} src="icons/bitcoin.svg" />;
 }

apps/web/app/components/icons/stacks-icon.tsx

@@ -4,11 +4,5 @@ interface StacksIconProps extends HTMLStyledProps<'img'> {
   size?: number;
 }
 export function StacksIcon({ size = 24 }: StacksIconProps) {
-  return (
-    <styled.img
-      width={size}
-      height={size}
-      src="node_modules/@leather.io/ui/dist-web/assets/icons/stacks.svg"
-    />
-  );
+  return <styled.img width={size} height={size} src="icons/stacks.svg" />;
 }

apps/web/app/layouts/footer/footer.tsx

@@ -1,7 +1,5 @@
 import { FooterLayout as Footer } from './footer.layout';
 
-const year = new Date().getFullYear();
-
 function AppFooter() {
   return (
     <Footer>
@@ -49,7 +47,9 @@ function AppFooter() {
 
       <Footer.LegalText
         product="A Trust Machines product"
-        copyright={`© ${year} Leather Wallet, LLC`}
+        // Hard coding date as Cloudflare Workers renders new Date() as epoch
+        // start time
+        copyright={`© 2025 Leather Wallet, LLC`}
       />
     </Footer>
   );

apps/web/app/pages/earn/earn.tsx

@@ -8,7 +8,7 @@ import { StackingExplainer } from './components/stacking-explainer';
 export function Earn() {
   return (
     <Page>
-      <Page.Header title="Earn" />
+      <Page.Header title="Invest in Stacks" />
 
       <styled.h2 textStyle="heading.05" mt="space.07">
         Stack in a pool

apps/web/public/icons/bitcoin.svg

@@ -0,0 +1,10 @@
+import { expect } from '@playwright/test';
+
+import { test } from '.';
+
+test.describe('Earn page', () => {
+  test('has title', async ({ page }) => {
+    await page.goto('/earn');
+    await expect(page.getByRole('heading', { name: 'Invest in Stacks' })).toBeVisible();
+  });
+});

apps/web/public/icons/stacks.svg

@@ -1,4 +1,6 @@
-import { expect, test } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { test } from '.';
 
 test.describe('Homepage', () => {
   test('has title', async ({ page }) => {

apps/web/tests/earn.spec.ts

@@ -0,0 +1,23 @@
+import { test as base, expect } from '@playwright/test';
+
+export const test = base.extend({
+  page: async ({ page }, use) => {
+    const messages: string[] = [];
+    page.on('console', msg => {
+      // Ignore regular log messages; we are only interested in errors.
+      if (msg.type() === 'error') {
+        messages.push(`[${msg.type()}] ${msg.text()}`);
+      }
+    });
+    // Uncaught (in promise) TypeError + friends are page errors.
+    page.on('pageerror', error => {
+      messages.push(`[${error.name}] ${error.message}`);
+    });
+    await use(page);
+    if (messages.length) {
+      // eslint-disable-next-line no-console
+      console.log(`Console errors: ${messages.join('\n')}`);
+    }
+    expect(messages).toStrictEqual([]);
+  },
+});

apps/web/tests/homepage.spec.ts

@@ -45,7 +45,7 @@ export default tseslint.config(
   },
   {
     name: 'web',
-    files: ['apps/web/**/*.{ts,tsx}'],
+    files: ['apps/web/app/**/*.{ts,tsx}'],
     extends: [reactConfig, pluginQuery.configs['flat/recommended']],
   },
   {