feat: add structured logging for route

apps/docs/src/index.ts

@@ -6,8 +6,8 @@ const stellarProvider: BridgeProvider = {
 };
 
 const layerZeroProvider: BridgeProvider = {
-    name: 'LayerZero',
-    apiUrl: 'https://layerzero-bridge.example.com/api',
+  name: 'LayerZero',
+  apiUrl: 'https://layerzero-bridge.example.com/api',
 };
 
 async function main() {
@@ -19,21 +19,21 @@ async function main() {
       payload: { amount: 100, asset: 'USDC' },
     });
     console.log('Response:', response);
-    await new Promise(resolve => setTimeout(resolve, 500));
+    await new Promise((resolve) => setTimeout(resolve, 500));
   }
 
   console.log('\n--- Simulating API calls to LayerZero ---');
   for (let i = 0; i < 10; i++) {
     console.log(`\nRequest #${i + 1}`);
     const response = await callApi({
-        provider: layerZeroProvider,
-        payload: { amount: 100, asset: 'USDC' },
+      provider: layerZeroProvider,
+      payload: { amount: 100, asset: 'USDC' },
     });
     console.log('Response:', response);
-    await new Promise(resolve => setTimeout(resolve, 500));
+    await new Promise((resolve) => setTimeout(resolve, 500));
   }
 }
 
-main().catch(error => {
+main().catch((error) => {
   console.error('An unexpected error occurred:', error);
 });

apps/docs/src/stories/Button.stories.ts

@@ -92,15 +92,15 @@ export const Secondary: Story = {
 };
 
 export const Large: Story = {
-  args:  {
+  args: {
     size: 'large',
     label: 'Button',
   },
 };
 
 export const Small: Story = {
   args: {
-    size:  'small',
-    label:  'Button',
+    size: 'small',
+    label: 'Button',
   },
-};
+};

apps/docs/src/stories/Header.stories.ts

@@ -6,7 +6,7 @@ import { Header } from './Header';
 
 const meta = {
   // title: 'Example/Header',
-  title: 'Components/Header',  // ← Changed to this
+  title: 'Components/Header', // ← Changed to this
 
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs

apps/docs/src/stories/Page.stories.ts

@@ -6,7 +6,7 @@ import { Page } from './Page';
 
 const meta = {
   // title: 'Example/Page',
-  title: 'Examples/Page',  // ← CHANGED from 'Example/Page' to 'Examples/Page'
+  title: 'Examples/Page', // ← CHANGED from 'Example/Page' to 'Examples/Page'
   component: Page,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout

apps/docs/vite.config.ts

@@ -7,32 +7,40 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 import { playwright } from '@vitest/browser-playwright';
-const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   plugins: [react()],
   test: {
-    projects: [{
-      extends: true,
-      plugins: [
-      // The plugin will run tests for the stories defined in your Storybook config
-      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-      storybookTest({
-        configDir: path.join(dirname, '.storybook')
-      })],
-      test: {
-        name: 'storybook',
-        browser: {
-          enabled: true,
-          headless: true,
-          provider: playwright({}),
-          instances: [{
-            browser: 'chromium'
-          }]
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
         },
-        setupFiles: ['.storybook/vitest.setup.ts']
-      }
-    }]
-  }
-});
+      },
+    ],
+  },
+});

apps/web/components/ui-lib/hooks/useTransactionPersistence.ts

@@ -1,89 +1,88 @@
-
 import { useState, useEffect, useCallback } from 'react';
 
 export interface TransactionState {
-    id: string;
-    status: 'idle' | 'pending' | 'success' | 'failed';
-    progress: number; // 0 to 100
-    step: string;
-    txHash?: string;
-    timestamp: number;
+  id: string;
+  status: 'idle' | 'pending' | 'success' | 'failed';
+  progress: number; // 0 to 100
+  step: string;
+  txHash?: string;
+  timestamp: number;
 }
 
 const STORAGE_KEY = 'bridgewise_tx_state';
 
 export const useTransactionPersistence = () => {
-    const [state, setState] = useState<TransactionState>({
-        id: '',
-        status: 'idle',
-        progress: 0,
-        step: '',
-        timestamp: 0,
-    });
+  const [state, setState] = useState<TransactionState>({
+    id: '',
+    status: 'idle',
+    progress: 0,
+    step: '',
+    timestamp: 0,
+  });
 
-    // Load from storage on mount
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-        try {
-            const stored = localStorage.getItem(STORAGE_KEY);
-            if (stored) {
-                const parsed = JSON.parse(stored);
-                // Optional: Expiry check (e.g. 24h)
-                if (Date.now() - parsed.timestamp < 24 * 60 * 60 * 1000) {
-                    setState(parsed);
-                } else {
-                    localStorage.removeItem(STORAGE_KEY);
-                }
-            }
-        } catch (e) {
-            console.error('Failed to load transaction state', e);
+  // Load from storage on mount
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        // Optional: Expiry check (e.g. 24h)
+        if (Date.now() - parsed.timestamp < 24 * 60 * 60 * 1000) {
+          setState(parsed);
+        } else {
+          localStorage.removeItem(STORAGE_KEY);
         }
-    }, []);
+      }
+    } catch (e) {
+      console.error('Failed to load transaction state', e);
+    }
+  }, []);
 
-    // Save to storage whenever state changes
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-        if (state.status === 'idle') {
-            // We might want to clear it if it's explicitly idle, or keep it if it's "history"
-            // For now, let's only clear if we explicitly want to reset.
-            // But if the user starts a new one, it overwrites.
-            return;
-        }
+  // Save to storage whenever state changes
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (state.status === 'idle') {
+      // We might want to clear it if it's explicitly idle, or keep it if it's "history"
+      // For now, let's only clear if we explicitly want to reset.
+      // But if the user starts a new one, it overwrites.
+      return;
+    }
 
-        // If completed/failed, we might want to keep it generic for a bit
-        // But persistence is key.
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-    }, [state]);
+    // If completed/failed, we might want to keep it generic for a bit
+    // But persistence is key.
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }, [state]);
 
-    const updateState = useCallback((updates: Partial<TransactionState>) => {
-        setState((prev) => ({ ...prev, ...updates, timestamp: Date.now() }));
-    }, []);
+  const updateState = useCallback((updates: Partial<TransactionState>) => {
+    setState((prev) => ({ ...prev, ...updates, timestamp: Date.now() }));
+  }, []);
 
-    const clearState = useCallback(() => {
-        setState({
-            id: '',
-            status: 'idle',
-            progress: 0,
-            step: '',
-            timestamp: 0,
-        });
-        localStorage.removeItem(STORAGE_KEY);
-    }, []);
+  const clearState = useCallback(() => {
+    setState({
+      id: '',
+      status: 'idle',
+      progress: 0,
+      step: '',
+      timestamp: 0,
+    });
+    localStorage.removeItem(STORAGE_KEY);
+  }, []);
 
-    const startTransaction = useCallback((id: string) => {
-        setState({
-            id,
-            status: 'pending',
-            progress: 0,
-            step: 'Initializing...',
-            timestamp: Date.now()
-        });
-    }, []);
+  const startTransaction = useCallback((id: string) => {
+    setState({
+      id,
+      status: 'pending',
+      progress: 0,
+      step: 'Initializing...',
+      timestamp: Date.now(),
+    });
+  }, []);
 
-    return {
-        state,
-        updateState,
-        clearState,
-        startTransaction
-    };
+  return {
+    state,
+    updateState,
+    clearState,
+    startTransaction,
+  };
 };

apps/web/components/ui-lib/index.ts

@@ -1,3 +1,2 @@
-
 export * from './TransactionHeartbeat';
 export * from './context/TransactionContext';

apps/web/next.config.ts

@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   transpilePackages: ['@bridgewise/ui-components'],