diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
new file mode 100644
index 0000000..fa148b8
--- /dev/null
+++ b/.claude/CLAUDE.md
@@ -0,0 +1,138 @@
+# Ultracite Code Standards
+
+This project uses **Ultracite**, a zero-config preset that enforces strict code quality standards through automated formatting and linting.
+
+## Docs-First Rule (Required)
+
+Before making any code change, read these docs first:
+
+1. `README.md`
+2. `docs/architecture.md`
+3. `docs/adding-chains.md`
+4. `docs/customization.md`
+
+If your change is chain-specific, also read:
+- `apps/<slug>/README.md`
+- `apps/<slug>/src/runtime.ts`
+
+Do not write code before completing this docs pass. If docs and code disagree, update docs and code together so they stay aligned.
+
+## Quick Reference
+
+- **Format code**: `pnpm dlx ultracite fix`
+- **Check for issues**: `pnpm dlx ultracite check`
+- **Diagnose setup**: `pnpm dlx ultracite doctor`
+
+Biome (the underlying engine) provides robust linting and formatting. Most issues are automatically fixable.
+
+---
+
+## Core Principles
+
+Write code that is **accessible, performant, type-safe, and maintainable**. Focus on clarity and explicit intent over brevity.
+
+### Type Safety & Explicitness
+
+- Use explicit types for function parameters and return values when they enhance clarity
+- Prefer `unknown` over `any` when the type is genuinely unknown
+- Use const assertions (`as const`) for immutable values and literal types
+- Leverage TypeScript's type narrowing instead of type assertions
+- Use meaningful variable names instead of magic numbers - extract constants with descriptive names
+
+### Modern JavaScript/TypeScript
+
+- Use arrow functions for callbacks and short functions
+- Prefer `for...of` loops over `.forEach()` and indexed `for` loops
+- Use optional chaining (`?.`) and nullish coalescing (`??`) for safer property access
+- Prefer template literals over string concatenation
+- Use destructuring for object and array assignments
+- Use `const` by default, `let` only when reassignment is needed, never `var`
+
+### Async & Promises
+
+- Always `await` promises in async functions - don't forget to use the return value
+- Use `async/await` syntax instead of promise chains for better readability
+- Handle errors appropriately in async code with try-catch blocks
+- Don't use async functions as Promise executors
+
+### React & JSX
+
+- Use function components over class components
+- Call hooks at the top level only, never conditionally
+- Specify all dependencies in hook dependency arrays correctly
+- Use the `key` prop for elements in iterables (prefer unique IDs over array indices)
+- Nest children between opening and closing tags instead of passing as props
+- Don't define components inside other components
+- Use semantic HTML and ARIA attributes for accessibility:
+  - Provide meaningful alt text for images
+  - Use proper heading hierarchy
+  - Add labels for form inputs
+  - Include keyboard event handlers alongside mouse events
+  - Use semantic elements (`<button>`, `<nav>`, etc.) instead of divs with roles
+
+### Error Handling & Debugging
+
+- Remove `console.log`, `debugger`, and `alert` statements from production code
+- Throw `Error` objects with descriptive messages, not strings or other values
+- Use `try-catch` blocks meaningfully - don't catch errors just to rethrow them
+- Prefer early returns over nested conditionals for error cases
+
+### Code Organization
+
+- Keep functions focused and under reasonable cognitive complexity limits
+- Extract complex conditions into well-named boolean variables
+- Use early returns to reduce nesting
+- Prefer simple conditionals over nested ternary operators
+- Group related code together and separate concerns
+
+### Security
+
+- Add `rel="noopener"` when using `target="_blank"` on links
+- Avoid `dangerouslySetInnerHTML` unless absolutely necessary
+- Don't use `eval()` or assign directly to `document.cookie`
+- Validate and sanitize user input
+
+### Performance
+
+- Avoid spread syntax in accumulators within loops
+- Use top-level regex literals instead of creating them in loops
+- Prefer specific imports over namespace imports
+- Avoid barrel files (index files that re-export everything)
+- Use proper image components (e.g., Next.js `<Image>`) over `<img>` tags
+
+### Framework-Specific Guidance
+
+**Next.js:**
+- Use Next.js `<Image>` component for images
+- Use `next/head` or App Router metadata API for head elements
+- Use Server Components for async data fetching instead of async Client Components
+
+**React 19+:**
+- Use ref as a prop instead of `React.forwardRef`
+
+**Solid/Svelte/Vue/Qwik:**
+- Use `class` and `for` attributes (not `className` or `htmlFor`)
+
+---
+
+## Testing
+
+- Write assertions inside `it()` or `test()` blocks
+- Avoid done callbacks in async tests - use async/await instead
+- Don't use `.only` or `.skip` in committed code
+- Keep test suites reasonably flat - avoid excessive `describe` nesting
+
+## When Biome Can't Help
+
+Biome's linter will catch most issues automatically. Focus your attention on:
+
+1. **Business logic correctness** - Biome can't validate your algorithms
+2. **Meaningful naming** - Use descriptive names for functions, variables, and types
+3. **Architecture decisions** - Component structure, data flow, and API design
+4. **Edge cases** - Handle boundary conditions and error states
+5. **User experience** - Accessibility, performance, and usability considerations
+6. **Documentation** - Add comments for complex logic, but prefer self-documenting code
+
+---
+
+Most formatting and common issues are automatically fixed by Biome. Run `pnpm dlx ultracite fix` before committing to ensure compliance.
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..92e425b
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,15 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "pnpm dlx ultracite fix"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
index 6c15a99..3dd8a6d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,9 +20,7 @@ apps/*/.vite
 apps/*/node_modules
 
 # Generated chain bundles copied into root/public by collect-chains.mjs
-apps/root/public/citrea
-apps/root/public/megaeth
-apps/root/public/monad
+apps/root/public/*/
 
 # Editor / OS
 .DS_Store
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..b2c23a8
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+pnpm precommit:fix-staged
diff --git a/.zed/settings.json b/.zed/settings.json
new file mode 100644
index 0000000..b669e38
--- /dev/null
+++ b/.zed/settings.json
@@ -0,0 +1,50 @@
+{
+  "formatter": "language_server",
+  "format_on_save": "on",
+  "lsp": {
+    "typescript-language-server": {
+      "settings": {
+        "typescript": {
+          "preferences": {
+            "includePackageJsonAutoImports": "on"
+          }
+        }
+      }
+    }
+  },
+  "languages": {
+    "JavaScript": {
+      "formatter": {
+        "language_server": {
+          "name": "biome"
+        }
+      },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TypeScript": {
+      "formatter": {
+        "language_server": {
+          "name": "biome"
+        }
+      },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    },
+    "TSX": {
+      "formatter": {
+        "language_server": {
+          "name": "biome"
+        }
+      },
+      "code_actions_on_format": {
+        "source.fixAll.biome": true,
+        "source.organizeImports.biome": true
+      }
+    }
+  }
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..420bcff
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,204 @@
+# Agent Guide: nexus-fast-bridge
+
+This file is for future coding agents working in this repository.
+
+## Mission
+
+Keep multi-chain bridge development scalable:
+- Fix and ship shared logic once.
+- Keep chain wrappers thin.
+- Express chain differences through runtime config and feature flags.
+
+## Read First
+
+1. `README.md`
+2. `docs/architecture.md`
+3. `docs/adding-chains.md`
+4. `docs/customization.md`
+
+## Mandatory Docs Gate
+
+Before writing or editing any code, you must read the docs listed above.
+This is required for every task, not just onboarding.
+
+If your task touches chain-specific behavior, also read:
+- `apps/<slug>/README.md`
+- `apps/<slug>/src/runtime.ts`
+
+If docs and code conflict, stop and resolve the mismatch first (update docs and code in the same change where possible).
+
+## Core Rules
+
+- Prefer editing shared code in `packages/fast-bridge-app/src/**`.
+- Only use `apps/<slug>/src/runtime.ts` and env/config files for chain-specific behavior.
+- Avoid reintroducing duplicated per-chain component trees.
+- If you add env keys in `.env.<slug>`, run `pnpm chains:sync`.
+- If you move shared source files, update Tailwind `@source` paths in `packages/fast-bridge-app/src/index.css`.
+- For runtime-provided image URLs (`appConfig` / `chainFeatures`), use `withBasePath(...)` where needed.
+
+## Chain Workflows
+
+### Add a chain
+
+```bash
+pnpm chain:add <slug> --name "Chain Name"
+```
+
+Then complete the checklist in `docs/adding-chains.md`.
+
+### Add new chain-specific behavior
+
+1. Extend `ChainFeatures` in `packages/fast-bridge-app/src/types/runtime.ts`.
+2. Add default value in `defaultChainFeatures`.
+3. Consume flag in shared components/hooks.
+4. Set values in each `apps/<slug>/src/runtime.ts`.
+
+## Validation Commands
+
+- Single chain dev: `pnpm --filter @fastbridge/<slug> dev`
+- Multi app dev: `pnpm dev:all`
+- Single chain build: `pnpm --filter @fastbridge/<slug> build`
+- Full build: `pnpm build:all`
+- Env export for deploy: `pnpm vercel:env`
+
+## Important Paths
+
+- Chain registry: `chains.config.json`
+- Shared app code: `packages/fast-bridge-app/src`
+- Chain runtime wrappers: `apps/<slug>/src/runtime.ts`
+- Env prep: `scripts/prepare-env.mjs`
+- Scaffold: `scripts/chains-add.mjs`
+- Sync: `scripts/sync-chains.mjs`
+- Root bundle collection: `scripts/collect-chains.mjs`
+
+## Anti-Patterns
+
+- Duplicating the same bug fix in multiple apps.
+- Hardcoding chain logic in shared code without feature gates.
+- Forgetting to sync env key changes to turbo (`pnpm chains:sync`).
+- Introducing root-relative asset paths in runtime-driven UI without base-path normalization.
+
+
+# Ultracite Code Standards
+
+This project uses **Ultracite**, a zero-config preset that enforces strict code quality standards through automated formatting and linting.
+
+## Quick Reference
+
+- **Format code**: `pnpm dlx ultracite fix`
+- **Check for issues**: `pnpm dlx ultracite check`
+- **Diagnose setup**: `pnpm dlx ultracite doctor`
+
+Biome (the underlying engine) provides robust linting and formatting. Most issues are automatically fixable.
+
+---
+
+## Core Principles
+
+Write code that is **accessible, performant, type-safe, and maintainable**. Focus on clarity and explicit intent over brevity.
+
+### Type Safety & Explicitness
+
+- Use explicit types for function parameters and return values when they enhance clarity
+- Prefer `unknown` over `any` when the type is genuinely unknown
+- Use const assertions (`as const`) for immutable values and literal types
+- Leverage TypeScript's type narrowing instead of type assertions
+- Use meaningful variable names instead of magic numbers - extract constants with descriptive names
+
+### Modern JavaScript/TypeScript
+
+- Use arrow functions for callbacks and short functions
+- Prefer `for...of` loops over `.forEach()` and indexed `for` loops
+- Use optional chaining (`?.`) and nullish coalescing (`??`) for safer property access
+- Prefer template literals over string concatenation
+- Use destructuring for object and array assignments
+- Use `const` by default, `let` only when reassignment is needed, never `var`
+
+### Async & Promises
+
+- Always `await` promises in async functions - don't forget to use the return value
+- Use `async/await` syntax instead of promise chains for better readability
+- Handle errors appropriately in async code with try-catch blocks
+- Don't use async functions as Promise executors
+
+### React & JSX
+
+- Use function components over class components
+- Call hooks at the top level only, never conditionally
+- Specify all dependencies in hook dependency arrays correctly
+- Use the `key` prop for elements in iterables (prefer unique IDs over array indices)
+- Nest children between opening and closing tags instead of passing as props
+- Don't define components inside other components
+- Use semantic HTML and ARIA attributes for accessibility:
+  - Provide meaningful alt text for images
+  - Use proper heading hierarchy
+  - Add labels for form inputs
+  - Include keyboard event handlers alongside mouse events
+  - Use semantic elements (`<button>`, `<nav>`, etc.) instead of divs with roles
+
+### Error Handling & Debugging
+
+- Remove `console.log`, `debugger`, and `alert` statements from production code
+- Throw `Error` objects with descriptive messages, not strings or other values
+- Use `try-catch` blocks meaningfully - don't catch errors just to rethrow them
+- Prefer early returns over nested conditionals for error cases
+
+### Code Organization
+
+- Keep functions focused and under reasonable cognitive complexity limits
+- Extract complex conditions into well-named boolean variables
+- Use early returns to reduce nesting
+- Prefer simple conditionals over nested ternary operators
+- Group related code together and separate concerns
+
+### Security
+
+- Add `rel="noopener"` when using `target="_blank"` on links
+- Avoid `dangerouslySetInnerHTML` unless absolutely necessary
+- Don't use `eval()` or assign directly to `document.cookie`
+- Validate and sanitize user input
+
+### Performance
+
+- Avoid spread syntax in accumulators within loops
+- Use top-level regex literals instead of creating them in loops
+- Prefer specific imports over namespace imports
+- Avoid barrel files (index files that re-export everything)
+- Use proper image components (e.g., Next.js `<Image>`) over `<img>` tags
+
+### Framework-Specific Guidance
+
+**Next.js:**
+- Use Next.js `<Image>` component for images
+- Use `next/head` or App Router metadata API for head elements
+- Use Server Components for async data fetching instead of async Client Components
+
+**React 19+:**
+- Use ref as a prop instead of `React.forwardRef`
+
+**Solid/Svelte/Vue/Qwik:**
+- Use `class` and `for` attributes (not `className` or `htmlFor`)
+
+---
+
+## Testing
+
+- Write assertions inside `it()` or `test()` blocks
+- Avoid done callbacks in async tests - use async/await instead
+- Don't use `.only` or `.skip` in committed code
+- Keep test suites reasonably flat - avoid excessive `describe` nesting
+
+## When Biome Can't Help
+
+Biome's linter will catch most issues automatically. Focus your attention on:
+
+1. **Business logic correctness** - Biome can't validate your algorithms
+2. **Meaningful naming** - Use descriptive names for functions, variables, and types
+3. **Architecture decisions** - Component structure, data flow, and API design
+4. **Edge cases** - Handle boundary conditions and error states
+5. **User experience** - Accessibility, performance, and usability considerations
+6. **Documentation** - Add comments for complex logic, but prefer self-documenting code
+
+---
+
+Most formatting and common issues are automatically fixed by Biome. Run `pnpm dlx ultracite fix` before committing to ensure compliance.
diff --git a/README.md b/README.md
index 21fb202..dd3bbf9 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,61 @@
 # Nexus Fast Bridge Monorepo
 
-Turbo + pnpm workspace with four apps:
-- `apps/monad`
-- `apps/megaeth`
-- `apps/citrea`
-- `apps/root` (hosts the static bundles copied from the chain apps)
-
-## Local dev/build
-- Put secrets in `.env.<slug>` inside the app dir (or in repo root) — e.g. `apps/monad/.env.monad`, `apps/megaeth/.env.megaeth`.
-- `pnpm build` / `pnpm build:all` runs `scripts/prepare-env.mjs <slug>` for each app and copies `.env.<slug>` into `.env.production` and `.env.local` for that app. If `.env.<slug>` is missing, it falls back to environment variables prefixed with `<SLUG>_`.
-- `pnpm dev:root` runs the root site; `pnpm dev:all` runs all apps in parallel.
-
-## Vercel env + deploy
-- Generate Vercel-ready variables from your `.env.<slug>` files:
-  ```bash
-  pnpm vercel:env              # prints MONAD_*/MEGAETH_* lines
-  pnpm vercel:env -o .env.vercel
-  ```
-- Add those `<SLUG>_KEY=VALUE` pairs to the Vercel dashboard or pipe them into `vercel env add`.
-- Vercel build command: `pnpm build:all`
-- Output directory: `apps/root/dist`
-- During Vercel builds, `prepare-env.mjs` reads the `<SLUG>_` project env vars and writes `.env.production`/`.env.local` for each chain app (no `.env.<slug>` files exist in Vercel).
-
-
-
-## Adding a new chain
-1) Add the chain to `chains.config.json` with `slug`, `appDir`, etc.
-2) Create `apps/<slug>/.env.<slug>` (or `.env.<slug>` at repo root).
-3) Run `pnpm chains:sync` to add the workspace dep to `apps/root` and refresh `turbo.json` env allowlist from your `.env.<slug>` keys.
-4) Run `pnpm vercel:env` and push the output to Vercel env vars.
-5) Deploy (build: `pnpm build:all`, output: `apps/root/dist`).
-
-
-If you see Monad defaults in another chain’s build, the chain-specific env vars are missing — ensure the `<SLUG>_` vars are set in Vercel or that `.env.<slug>` exists locally.
+Fast Bridge is a Turborepo + pnpm monorepo with:
+- Chain apps (`apps/<chain>`) that are thin wrappers.
+- A shared app package (`packages/fast-bridge-app`) that contains almost all UI/logic.
+- A root landing app (`apps/root`) that links to chain deployments and serves built chain bundles.
+
+## Quick Start
+
+```bash
+pnpm install
+pnpm dev:all
+pnpm dev:root
+```
+
+Useful commands:
+
+```bash
+pnpm dev:root
+pnpm build:all
+pnpm chain:add <slug> --name "Chain Name"
+pnpm chains:sync
+pnpm vercel:env
+```
+
+## Documentation Map
+
+- Architecture: `docs/architecture.md`
+- Add a chain: `docs/adding-chains.md`
+- Chain customization and feature flags: `docs/customization.md`
+- Agent workflow rules for this repo: `AGENTS.md`
+
+## Common Workflows
+
+### Add a new chain
+
+```bash
+pnpm chain:add sonic --name "Sonic"
+```
+
+Then:
+1. Fill `apps/sonic/.env.sonic`.
+2. Adjust `apps/sonic/src/runtime.ts` feature flags.
+3. Run `pnpm --filter @fastbridge/sonic dev`.
+4. Run `pnpm vercel:env` and sync prefixed env vars in deployment.
+
+### Ship a shared bug fix once
+
+Edit shared code in `packages/fast-bridge-app/src/**`.
+All chain wrappers pick it up automatically through Vite aliasing.
+
+### Add chain-specific behavior
+
+Use `apps/<slug>/src/runtime.ts` (`chainFeatures`) first.
+If needed, add a new flag in `packages/fast-bridge-app/src/types/runtime.ts` and consume it in shared code.
+
+## Notes
+
+- If you add new env keys in `.env.<slug>`, run `pnpm chains:sync` so `turbo.json` tracks them.
+- If runtime image URLs are relative (for example `/logo.svg`), route them through `withBasePath(...)` in shared code.
+- If shared files move, keep Tailwind source scanning updated in `packages/fast-bridge-app/src/index.css`.
diff --git a/apps/citrea/README.md b/apps/citrea/README.md
index 6438e99..f3c4499 100644
--- a/apps/citrea/README.md
+++ b/apps/citrea/README.md
@@ -1,13 +1,15 @@
-# Nexus fast bridge
+# Chain App Wrapper
 
-### Run locally
+This app is a thin wrapper around shared code in `packages/fast-bridge-app`.
 
-`npm run dev` to run locally.
+For architecture, onboarding, and customization:
+- `README.md` (repo root)
+- `docs/architecture.md`
+- `docs/adding-chains.md`
+- `docs/customization.md`
 
-### Build project
-
-`npm run build` to build the project.
-
-### Preview
-
-`npm run start` to preview and run
+Primary chain-specific files in this app:
+- `get-config.ts`
+- `src/runtime.ts`
+- `.env.citrea`
+- `public/*` assets
diff --git a/apps/citrea/config.ts b/apps/citrea/config.ts
index b1e41eb..392c7b1 100644
--- a/apps/citrea/config.ts
+++ b/apps/citrea/config.ts
@@ -1,4 +1,4 @@
-import { getConfig } from "./getConfig";
+import { getConfig } from "./get-config";
 
 const config = getConfig(import.meta.env);
 
diff --git a/apps/citrea/eslint.config.js b/apps/citrea/eslint.config.js
index a6d1076..8401724 100644
--- a/apps/citrea/eslint.config.js
+++ b/apps/citrea/eslint.config.js
@@ -1,9 +1,9 @@
 import js from "@eslint/js";
-import globals from "globals";
+import { defineConfig, globalIgnores } from "eslint/config";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 import tseslint from "typescript-eslint";
-import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
   globalIgnores(["dist"]),
@@ -18,6 +18,9 @@ export default defineConfig([
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
   },
 ]);
diff --git a/apps/citrea/get-config.ts b/apps/citrea/get-config.ts
new file mode 100644
index 0000000..27c3f2c
--- /dev/null
+++ b/apps/citrea/get-config.ts
@@ -0,0 +1,93 @@
+import type { AppEnv } from "./src/vite-env.d";
+
+const withFallback = <T>(value: T, fallbackValue: T): T =>
+  value || fallbackValue;
+
+export function getConfig(env: AppEnv) {
+  return {
+    chainId: Number(withFallback(env.VITE_CONFIG_CHAIN_ID, 4114)),
+    chainName: withFallback(env.VITE_CONFIG_CHAIN_NAME, "Citrea"),
+    chainNativeCurrency: {
+      name: withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME, "CBTC"),
+      symbol: withFallback(
+        env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL,
+        "cBTC"
+      ),
+      decimals: Number(
+        withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS, 18)
+      ),
+    },
+    chainRpcUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_RPC_URL,
+      "https://rpcs.avail.so/citrea"
+    ),
+    chainBlockExplorerUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL,
+      "https://explorer.mainnet.citrea.xyz"
+    ),
+    chainTestnet: env.VITE_CONFIG_CHAIN_TESTNET,
+    useChainLogo: env.VITE_CONFIG_CHAIN_USE_CHAIN_LOGO,
+    chainIconUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_ICON_URL,
+      "/citrea-favicon.svg"
+    ),
+    chainLogoUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_LOGO_URL,
+      "/citrea-logo.svg"
+    ),
+    chainGifUrl: withFallback(env.VITE_CONFIG_CHAIN_GIF_URL, "/citrea.gif"),
+    chainGifAlt: withFallback(
+      env.VITE_CONFIG_CHAIN_GIF_ALT,
+      "Bridge to Citrea"
+    ),
+    heroText: withFallback(
+      env.VITE_CONFIG_CHAIN_HERO_TEXT,
+      "Move assets from any chain to Citrea, instantly."
+    ),
+
+    appTitle: withFallback(env.VITE_CONFIG_APP_TITLE, "Citrea Fast Bridge"),
+    appDescription: withFallback(
+      env.VITE_CONFIG_APP_DESCRIPTION,
+      "Move assets from any chain to Citrea, instantly."
+    ),
+
+    primaryColor: withFallback(env.VITE_CONFIG_PRIMARY_COLOR, "#EF8F36"),
+    secondaryColor: withFallback(env.VITE_CONFIG_SECONDARY_COLOR, "#CDD2D8"),
+    nexusNetwork: withFallback(env.VITE_CONFIG_NEXUS_NETWORK, "mainnet"),
+    nexusSupportedChain: Number(
+      withFallback(env.VITE_CONFIG_NEXUS_SUPPORTED_CHAIN, 4114)
+    ),
+    nexusPrimaryToken: withFallback(
+      env.VITE_CONFIG_NEXUS_PRIMARY_TOKEN,
+      "USDC"
+    ),
+
+    meta: {
+      title: withFallback(
+        env.VITE_CONFIG_APP_META_TITLE,
+        "Citrea Fast Bridge - Powered by Avail"
+      ),
+      description: withFallback(
+        env.VITE_CONFIG_APP_META_DESCRIPTION,
+        "Move assets from any chain to Citrea, instantly."
+      ),
+      canonicalUrl: withFallback(
+        env.VITE_CONFIG_APP_META_CANONICAL_URL,
+        "https://fastbridge.availproject.org/citrea/"
+      ),
+      imageUrl: withFallback(
+        env.VITE_CONFIG_APP_META_IMAGE_URL,
+        "https://files.availproject.org/fastbridge/megaeth/megaeth-meta-2.png"
+      ),
+      faviconUrl: withFallback(
+        env.VITE_CONFIG_APP_META_FAVICON_URL,
+        "https://fastbridge.availproject.org/citrea/faviconV2.png"
+      ),
+      themeColor: withFallback(env.VITE_CONFIG_APP_META_THEME_COLOR, "#EF8F36"),
+      backgroundColor: withFallback(
+        env.VITE_CONFIG_APP_META_BACKGROUND_COLOR,
+        "#CDD2D8"
+      ),
+    },
+  };
+}
diff --git a/apps/citrea/getConfig.ts b/apps/citrea/getConfig.ts
deleted file mode 100644
index 5c80276..0000000
--- a/apps/citrea/getConfig.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { AppEnv } from "./src/vite-env.d";
-
-export function getConfig(env: AppEnv) {
-    const config = {
-        chainId: Number(env.VITE_CONFIG_CHAIN_ID || 4114),
-        chainName: env.VITE_CONFIG_CHAIN_NAME || "Citrea",
-        chainNativeCurrency: {
-            name: env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME || "CBTC",
-            symbol: env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL || "cBTC",
-            decimals: Number(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS || 18),
-        },
-        chainRpcUrl: env.VITE_CONFIG_CHAIN_RPC_URL || "https://rpcs.avail.so/citrea",
-        chainBlockExplorerUrl:
-            env.VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL || "https://explorer.mainnet.citrea.xyz",
-        chainTestnet: env.VITE_CONFIG_CHAIN_TESTNET || false,
-        useChainLogo: env.VITE_CONFIG_CHAIN_USE_CHAIN_LOGO || false,
-        chainIconUrl: env.VITE_CONFIG_CHAIN_ICON_URL || "/citrea-favicon.svg",
-        chainLogoUrl: env.VITE_CONFIG_CHAIN_LOGO_URL || "/citrea-logo.svg",
-        chainGifUrl: env.VITE_CONFIG_CHAIN_GIF_URL || "/citrea.gif",
-        chainGifAlt: env.VITE_CONFIG_CHAIN_GIF_ALT || "Bridge to Citrea",
-        heroText:
-            env.VITE_CONFIG_CHAIN_HERO_TEXT ||
-            "Move assets from any chain to Citrea, instantly.",
-
-        appTitle: env.VITE_CONFIG_APP_TITLE || "Citrea Fast Bridge",
-        appDescription: env.VITE_CONFIG_APP_DESCRIPTION || "Move assets from any chain to Citrea, instantly.",
-
-        primaryColor: env.VITE_CONFIG_PRIMARY_COLOR || "#EF8F36",
-        secondaryColor: env.VITE_CONFIG_SECONDARY_COLOR || "#CDD2D8",
-        nexusNetwork: env.VITE_CONFIG_NEXUS_NETWORK || "mainnet",
-        nexusSupportedChain:
-            Number(env.VITE_CONFIG_NEXUS_SUPPORTED_CHAIN) || 4114,
-        nexusPrimaryToken: env.VITE_CONFIG_NEXUS_PRIMARY_TOKEN || "USDC",
-
-        meta: {
-            title:
-                env.VITE_CONFIG_APP_META_TITLE || "Citrea Fast Bridge - Powered by Avail",
-            description:
-                env.VITE_CONFIG_APP_META_DESCRIPTION || "Move assets from any chain to Citrea, instantly.",
-            canonicalUrl:
-                env.VITE_CONFIG_APP_META_CANONICAL_URL || "https://megaeth-fast-bridge.vercel.app",
-            imageUrl: env.VITE_CONFIG_APP_META_IMAGE_URL || "https://files.availproject.org/fastbridge/megaeth/megaeth-meta-2.png",
-            faviconUrl: env.VITE_CONFIG_APP_META_FAVICON_URL || "https://megaeth-fast-bridge.vercel.app/faviconV2.png",
-            themeColor: env.VITE_CONFIG_APP_META_THEME_COLOR || "#EF8F36",
-            backgroundColor: env.VITE_CONFIG_APP_META_BACKGROUND_COLOR || "#CDD2D8",
-        },
-    };
-
-    return config;
-}
diff --git a/apps/citrea/index.html b/apps/citrea/index.html
index 66cdf7a..87dc80c 100644
--- a/apps/citrea/index.html
+++ b/apps/citrea/index.html
@@ -1,77 +1,77 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--<meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://*.walletconnect.com https://*.walletconnect.org https://*.eth.merkle.io https://*.reown.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: blob: https://monadfastbridge.com https://availproject.org https://*.walletconnect.com https://*.walletconnect.org https:; connect-src 'self' https://api.coinbase.com https://rpcs.avail.so https://*.avail.so wss://*.avail.so ws://*.avail.so https://*.walletconnect.com https://*.walletconnect.org wss://*.walletconnect.com wss://*.walletconnect.org https://*.infura.io https://*.alchemy.com https://mainnet.infura.io https://polygon-rpc.com https://api.avax.network https://rpc.ankr.com https://*.ankr.com https://*.1inch.io https://*.1inch.exchange https://*.uniswap.org https://*.uniswap.io https://monadvision.com https://*.merkle.io https://*.arcana.network http://*.arcana.network https://cosmos01-testnet.arcana.network:26650 http://cosmos01-testnet.arcana.network:26650 wss://*.arcana.network ws://*.arcana.network wss://cosmos01-testnet.arcana.network:26650 ws://cosmos01-testnet.arcana.network:26650 https://mainnet.base.org https://*.base.org https://*.optimism.io https://mainnet.optimism.io https://*.arbitrum.io https://arb1.arbitrum.io https://*.scroll.io https://rpc.scroll.io https://*.polygon.technology https://*.avax.network https://*.sophon.xyz https://rpc.sophon.xyz https://*.kaia.io https://public-en.node.kaia.io https://*.bsc.com https://bsc-dataseed.binance.org https://*.binance.org https://*.tron.network https://*.trongrid.io https://*.sepolia.io https://sepolia.infura.io https://rpc.sepolia.org https://sepolia.optimism.io https://*.optimism-sepolia.io https://sepolia-rollup.arbitrum.io https://*.arbitrum-sepolia.io https://*.amoy.polygon.technology https://rpc-amoy.polygon.technology https://sepolia.base.org https://*.base-sepolia.org https://*.monad.xyz https://*.reown.com https://api.reown.com https://*.web3modal.org https://api.web3modal.org; frame-src 'self' https://*.walletconnect.com https://*.walletconnect.org https://*.reown.com https://*.family.co; manifest-src 'self'; form-action 'self'; base-uri 'self';"
     />-->
-    <link rel="icon" href="%= APP_FAVICON_URL =%" type="image/x-icon" />
-    <meta name="theme-color" content="%= APP_THEME_COLOR =%" />
-    <meta name="description" content="%= APP_DESCRIPTION =%" />
-    <link rel="apple-touch-icon" href="%= APP_FAVICON_URL =%" />
-    <link rel="manifest" href="%= MANIFEST_URL =%" />
+    <link rel="icon" href="%= APP_FAVICON_URL =%" type="image/x-icon">
+    <meta name="theme-color" content="%= APP_THEME_COLOR =%">
+    <meta name="description" content="%= APP_DESCRIPTION =%">
+    <link rel="apple-touch-icon" href="%= APP_FAVICON_URL =%">
+    <link rel="manifest" href="%= MANIFEST_URL =%">
     <title>%= APP_TITLE =%</title>
-    <link rel="canonical" href="%= APP_CANONICAL_URL =%" />
-    <meta name="title" content="%= APP_TITLE =%" />
+    <link rel="canonical" href="%= APP_CANONICAL_URL =%">
+    <meta name="title" content="%= APP_TITLE =%">
 
     <link
       rel="apple-touch-icon"
       sizes="180x180"
       type="image/png"
       href="%= APP_FAVICON_URL =%"
-    />
+    >
     <link
       rel="icon"
       sizes="16x16 32x32"
       type="image/png"
       href="%= APP_FAVICON_URL =%"
-    />
+    >
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:title" content="%= APP_TITLE =%" />
-    <meta property="og:description" content="%= APP_DESCRIPTION =%" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="%= APP_CANONICAL_URL =%" />
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="300" />
-    <meta property="og:image:height" content="157" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:title" content="%= APP_TITLE =%">
+    <meta property="og:description" content="%= APP_DESCRIPTION =%">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="%= APP_CANONICAL_URL =%">
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="300">
+    <meta property="og:image:height" content="157">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="600" />
-    <meta property="og:image:height" content="315" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="600">
+    <meta property="og:image:height" content="315">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="600" />
-    <meta property="og:image:height" content="600" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="600">
+    <meta property="og:image:height" content="600">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="627" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="627">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
     <!-- X (Twitter) -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="%= APP_CANONICAL_URL =%" />
-    <meta name="twitter:title" content="%= APP_TITLE =%" />
-    <meta name="twitter:description" content="%= APP_DESCRIPTION =%" />
-    <meta name="twitter:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta name="twitter:image:alt" content="%= APP_TITLE =%" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="%= APP_CANONICAL_URL =%">
+    <meta name="twitter:title" content="%= APP_TITLE =%">
+    <meta name="twitter:description" content="%= APP_DESCRIPTION =%">
+    <meta name="twitter:image" content="%= APP_META_IMAGE_URL =%">
+    <meta name="twitter:image:alt" content="%= APP_TITLE =%">
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
       href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Gloock&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
-    />
+    >
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/citrea/package.json b/apps/citrea/package.json
index 3f6ec5d..fac7b88 100644
--- a/apps/citrea/package.json
+++ b/apps/citrea/package.json
@@ -11,8 +11,9 @@
     "preview": "vite preview --port 5173"
   },
   "dependencies": {
-    "@avail-project/nexus-core": "github:availproject/nexus-sdk#cca99c1a570a8598334e3e89453d39a27d70ede7",
+    "@avail-project/nexus-core": "1.1.2",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
@@ -27,6 +28,7 @@
     "connectkit": "^1.9.1",
     "decimal.js": "^10.6.0",
     "lucide-react": "^0.544.0",
+    "motion": "^12.29.2",
     "next-themes": "^0.4.6",
     "posthog-js": "^1.336.4",
     "react": "19.2.2",
diff --git a/apps/citrea/src/App.tsx b/apps/citrea/src/App.tsx
deleted file mode 100644
index 6e18e78..0000000
--- a/apps/citrea/src/App.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Web3Provider from "@/providers/web3Provider";
-import { Toaster } from "@/components/ui/sonner";
-import Navbar from "@/components/navbar";
-import HeroSection from "@/components/hero-section";
-import FastBridgeShowcase from "@/components/fast-bridge-showcase";
-import NexusProvider from "@/components/nexus/NexusProvider";
-import config from "../config";
-
-// @ts-expect-error - Environment is not exported from @avail-project/nexus-core
-enum Environment {
-  FOLLY, // Dev with test-net tokens
-  CERISE, // Dev with main-net tokens
-  CORAL, // Test-net with main-net tokens
-  JADE, // Main-net with main-net tokens
-}
-
-export default function App() {
-  return (
-    <Web3Provider>
-      <NexusProvider
-        config={{
-          // network: {
-          //   NETWORK_HINT: Environment.CERISE,
-          //   COSMOS_GRPC_URL: "https://debugnet.availproject.org/grpc-web/",
-          //   COSMOS_REST_URL: "https://debugnet.availproject.org",
-          //   COSMOS_RPC_URL: "https://debugnet.availproject.org:26650",
-          //   COSMOS_WS_URL: "wss://debugnet.availproject.org:26650/websocket",
-          //   INTENT_EXPLORER_URL:
-          //     "https://explorer.nexus-cerise.availproject.org",
-          //   VSC_BASE_URL: "https://vsc-debugnet.availproject.org",
-          //   VSC_WS_URL: "wss://vsc-debugnet.availproject.org",
-          // },
-          network: "mainnet",
-          debug: true,
-        }}
-      >
-        <div className="font-sans min-h-screen overflow-x-hidden w-full">
-          <Navbar />
-          <div className="min-h-full w-full max-w-full flex gap-4 md:gap-16 overflow-x-hidden">
-            <div
-              className="absolute inset-0 z-0"
-              style={{
-                background: `radial-gradient(125% 125% at 50% 10%, #fff 50%, ${config.primaryColor} 125%)`,
-              }}
-            />
-            <main className="flex flex-col flex-1 min-w-0 max-w-full px-4 py-12 gap-8">
-              <HeroSection />
-              <FastBridgeShowcase />
-            </main>
-          </div>
-        </div>
-        <Toaster />
-      </NexusProvider>
-    </Web3Provider>
-  );
-}
diff --git a/apps/citrea/src/components/common/hooks/useDebouncedCallback.ts b/apps/citrea/src/components/common/hooks/useDebouncedCallback.ts
deleted file mode 100644
index d969b5a..0000000
--- a/apps/citrea/src/components/common/hooks/useDebouncedCallback.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useStableCallback } from "./useStableCallback";
-
-type AnyFn = (...args: any[]) => any;
-
-export interface Debounced<T extends AnyFn> {
-  (...args: Parameters<T>): void;
-  cancel: () => void;
-  flush: () => void;
-}
-
-/**
- * Returns a debounced function that delays invoking `fn` until after `delay`
- * milliseconds have elapsed since the last call.
- */
-export function useDebouncedCallback<T extends AnyFn>(
-  fn: T,
-  delay: number
-): Debounced<T> {
-  const latest = useStableCallback(fn);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const lastArgsRef = useRef<Parameters<T> | null>(null);
-
-  const cancel = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  const flush = () => {
-    if (timerRef.current && lastArgsRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-       
-      latest(...lastArgsRef.current);
-      lastArgsRef.current = null;
-    }
-  };
-
-  // cancel when delay changes/unmounts
-  useEffect(() => cancel, [delay]);
-
-  return useMemo(() => {
-    const debounced = ((...args: Parameters<T>) => {
-      lastArgsRef.current = args;
-      cancel();
-      timerRef.current = setTimeout(() => {
-         
-        latest(...lastArgsRef.current!);
-        lastArgsRef.current = null;
-        timerRef.current = null;
-      }, delay);
-    }) as Debounced<T>;
-    debounced.cancel = cancel;
-    debounced.flush = flush;
-    return debounced;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delay, latest]);
-}
diff --git a/apps/citrea/src/components/common/hooks/useDebouncedValue.ts b/apps/citrea/src/components/common/hooks/useDebouncedValue.ts
deleted file mode 100644
index 3df2f0b..0000000
--- a/apps/citrea/src/components/common/hooks/useDebouncedValue.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-import { useDebouncedCallback } from "./useDebouncedCallback";
-
-/**
- * Derives a debounced value from an input value and delay.
- */
-export function useDebouncedValue<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState<T>(value);
-  const setter = useDebouncedCallback((v: T) => setDebounced(v), delay);
-
-  useEffect(() => {
-    setter(value);
-    return setter.cancel;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, delay]);
-
-  return debounced;
-}
diff --git a/apps/citrea/src/components/common/hooks/usePolling.ts b/apps/citrea/src/components/common/hooks/usePolling.ts
deleted file mode 100644
index 8b35ed8..0000000
--- a/apps/citrea/src/components/common/hooks/usePolling.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useRef } from "react";
-import { useInterval } from "./useInterval";
-import { useStableCallback } from "./useStableCallback";
-
-/**
- * Declarative polling with in-flight protection (no overlap).
- * When enabled becomes true, an immediate run is executed,
- * followed by interval-based runs.
- */
-export function usePolling(
-  enabled: boolean,
-  fn: () => Promise<void> | void,
-  intervalMs: number
-) {
-  const inFlightRef = useRef(false);
-  const wrapped = useStableCallback(async () => {
-    if (inFlightRef.current) return;
-    try {
-      inFlightRef.current = true;
-      await fn();
-    } catch (error) {
-      console.error(error);
-    } finally {
-      inFlightRef.current = false;
-    }
-  });
-
-  useInterval(wrapped, enabled ? intervalMs : null, {
-    enabled,
-    immediate: enabled,
-  });
-}
diff --git a/apps/citrea/src/components/common/hooks/useStableCallback.ts b/apps/citrea/src/components/common/hooks/useStableCallback.ts
deleted file mode 100644
index b6d8cb2..0000000
--- a/apps/citrea/src/components/common/hooks/useStableCallback.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useCallback, useRef } from "react";
-
-/**
- * Returns a stable function identity that always calls the latest implementation.
- * Useful when passing callbacks to memoized children without re-creating handlers.
- */
-export function useStableCallback<Args extends readonly unknown[], Return>(
-  fn: (...args: Args) => Return
-): (...args: Args) => Return {
-  const fnRef = useRef<(...args: Args) => Return>(fn);
-  fnRef.current = fn;
-
-   
-  const stable = useCallback(
-    ((...args: Args) => {
-      return fnRef.current(...args);
-    }) as (...args: Args) => Return,
-    []
-  );
-
-  return stable;
-}
diff --git a/apps/citrea/src/components/common/hooks/useStopwatch.ts b/apps/citrea/src/components/common/hooks/useStopwatch.ts
deleted file mode 100644
index 9350047..0000000
--- a/apps/citrea/src/components/common/hooks/useStopwatch.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-interface UseStopwatchOptions {
-  running?: boolean;
-  intervalMs?: number;
-}
-
-/**
- * Simple stopwatch that increments elapsed seconds while running.
- * Designed to replace scattered timer effects.
- */
-export function useStopwatch(options: UseStopwatchOptions = {}) {
-  const { running = false, intervalMs = 100 } = options;
-  const [elapsedSeconds, setElapsedSeconds] = useState(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const reset = () => {
-    setElapsedSeconds(0);
-  };
-
-  const stop = () => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  const start = () => {
-    if (timerRef.current) return;
-    timerRef.current = setInterval(() => {
-      // 1s == 1000ms; we add fractional seconds per tick
-      setElapsedSeconds((prev) => prev + intervalMs / 1000);
-    }, intervalMs);
-  };
-
-  useEffect(() => {
-    if (running) {
-      start();
-    } else {
-      stop();
-    }
-    return stop;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [running, intervalMs]);
-
-  return {
-    seconds: elapsedSeconds,
-    start,
-    stop,
-    reset,
-    running: Boolean(timerRef.current),
-  };
-}
diff --git a/apps/citrea/src/components/common/index.ts b/apps/citrea/src/components/common/index.ts
deleted file mode 100644
index f5a855e..0000000
--- a/apps/citrea/src/components/common/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from "./hooks/useStopwatch";
-export * from "./hooks/usePolling";
-export * from "./hooks/useInterval";
-export * from "./hooks/useStableCallback";
-export * from "./hooks/useDebouncedValue";
-export * from "./hooks/useDebouncedCallback";
-export * from "./hooks/useNexusError";
-export * from "./tx/types";
-export * from "./tx/steps";
-export * from "./tx/useTransactionSteps";
-export * from "./utils/constant";
diff --git a/apps/citrea/src/components/common/tx/steps.ts b/apps/citrea/src/components/common/tx/steps.ts
deleted file mode 100644
index 9d44a88..0000000
--- a/apps/citrea/src/components/common/tx/steps.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { SwapStepType } from "@avail-project/nexus-core";
-import type { GenericStep } from "./types";
-import { getStepKey } from "./types";
-
-/**
- * Predefined expected steps for swaps to seed UI before events arrive.
- * Kept here to avoid duplication across exact-in and exact-out hooks.
- */
-export const SWAP_EXPECTED_STEPS: SwapStepType[] = [
-  { type: "SWAP_START", typeID: "SWAP_START" } as SwapStepType,
-  { type: "DETERMINING_SWAP", typeID: "DETERMINING_SWAP" } as SwapStepType,
-  {
-    type: "CREATE_PERMIT_FOR_SOURCE_SWAP",
-    typeID:
-      "CREATE_PERMIT_FOR_SOURCE_SWAP" as unknown as SwapStepType["typeID"],
-  } as SwapStepType,
-  {
-    type: "SOURCE_SWAP_BATCH_TX",
-    typeID: "SOURCE_SWAP_BATCH_TX",
-  } as SwapStepType,
-  {
-    type: "SOURCE_SWAP_HASH",
-    typeID: "SOURCE_SWAP_HASH" as unknown as SwapStepType["typeID"],
-  } as SwapStepType,
-  { type: "RFF_ID", typeID: "RFF_ID" } as SwapStepType,
-  {
-    type: "DESTINATION_SWAP_BATCH_TX",
-    typeID: "DESTINATION_SWAP_BATCH_TX",
-  } as SwapStepType,
-  {
-    type: "DESTINATION_SWAP_HASH",
-    typeID: "DESTINATION_SWAP_HASH" as unknown as SwapStepType["typeID"],
-  } as SwapStepType,
-  { type: "SWAP_COMPLETE", typeID: "SWAP_COMPLETE" } as SwapStepType,
-];
-
-export function seedSteps<T>(expected: T[]): Array<GenericStep<T>> {
-  return expected.map((st, index) => ({
-    id: index,
-    completed: false,
-    step: st,
-  }));
-}
-
-export function computeAllCompleted<T>(steps: Array<GenericStep<T>>): boolean {
-  return steps.length > 0 && steps.every((s) => s.completed);
-}
-
-/**
- * Replace the current list of steps with a new list, preserving completion
- * for any steps that were already marked completed (matched by key).
- */
-export function mergeStepsList<T>(
-  prev: Array<GenericStep<T>>,
-  list: T[]
-): Array<GenericStep<T>> {
-  const completedKeys = new Set<string>();
-  for (const prevStep of prev) {
-    if (prevStep.completed) {
-      completedKeys.add(getStepKey(prevStep.step));
-    }
-  }
-  const next: Array<GenericStep<T>> = [];
-  for (let index = 0; index < list.length; index++) {
-    const step = list[index];
-    const key = getStepKey(step);
-    next.push({
-      id: index,
-      completed: completedKeys.has(key),
-      step,
-    });
-  }
-  return next;
-}
-
-/**
- * Mark a step complete in-place; if the step doesn't yet exist, append it.
- */
-export function mergeStepComplete<T>(
-  prev: Array<GenericStep<T>>,
-  step: T
-): Array<GenericStep<T>> {
-  const key = getStepKey(step);
-  const updated: Array<GenericStep<T>> = [];
-  let found = false;
-  for (const s of prev) {
-    if (getStepKey(s.step) === key) {
-      updated.push({ ...s, completed: true, step: { ...s.step, ...step } });
-      found = true;
-    } else {
-      updated.push(s);
-    }
-  }
-  if (!found) {
-    updated.push({
-      id: updated.length,
-      completed: true,
-      step,
-    });
-  }
-  return updated;
-}
diff --git a/apps/citrea/src/components/common/tx/types.ts b/apps/citrea/src/components/common/tx/types.ts
deleted file mode 100644
index 7a2a7b1..0000000
--- a/apps/citrea/src/components/common/tx/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type TransactionStatus =
-  | "idle"
-  | "preview"
-  | "awaiting-approval"
-  | "executing"
-  | "success"
-  | "error";
-
-export type GenericStep<TStep> = {
-  id: number;
-  completed: boolean;
-  step: TStep;
-};
-
-/**
- * Normalizes a step to a stable key. Prefers typeID, then type, otherwise JSON.
- */
-export function getStepKey(step: any): string {
-  if (!step) return "";
-  if (typeof step.typeID === "string" && step.typeID.length > 0) {
-    return step.typeID;
-  }
-  if (typeof step.type === "string" && step.type.length > 0) {
-    return step.type;
-  }
-  try {
-    return JSON.stringify(step);
-  } catch {
-    return String(step);
-  }
-}
diff --git a/apps/citrea/src/components/common/tx/useTransactionSteps.ts b/apps/citrea/src/components/common/tx/useTransactionSteps.ts
deleted file mode 100644
index eb74bd6..0000000
--- a/apps/citrea/src/components/common/tx/useTransactionSteps.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import type { GenericStep } from "./types";
-import { getStepKey } from "./types";
-import {
-  computeAllCompleted,
-  mergeStepComplete,
-  mergeStepsList,
-  seedSteps,
-} from "./steps";
-
-interface UseTransactionStepsOptions<T> {
-  expected?: T[];
-}
-
-/**
- * Manages transaction steps with utilities to seed from expected steps,
- * replace the list on "steps list" events, and mark individual steps complete.
- */
-export function useTransactionSteps<
-  T extends { typeID?: string; type?: string }
->(options: UseTransactionStepsOptions<T> = {}) {
-  const { expected } = options;
-  const [steps, setSteps] = useState<Array<GenericStep<T>>>(() =>
-    expected ? seedSteps(expected) : []
-  );
-  const lastSignatureRef = useRef<string>("");
-
-  const onStepsList = (list: T[]) => {
-    const signature = list.map((step) => getStepKey(step)).join("|");
-    if (lastSignatureRef.current === signature) {
-      setSteps((prev) => mergeStepsList(prev, list));
-      return;
-    }
-    lastSignatureRef.current = signature;
-    setSteps((prev) => mergeStepsList(prev, list));
-  };
-
-  const onStepComplete = (step: T) => {
-    setSteps((prev) => mergeStepComplete(prev, step));
-  };
-
-  const seed = (expectedSteps: T[]) => {
-    setSteps(seedSteps(expectedSteps));
-  };
-
-  const reset = () => {
-    setSteps(expected ? seedSteps(expected) : []);
-    lastSignatureRef.current = "";
-  };
-
-  const allCompleted = useMemo(() => computeAllCompleted(steps), [steps]);
-
-  return {
-    steps,
-    allCompleted,
-    onStepsList,
-    onStepComplete,
-    seed,
-    reset,
-  };
-}
diff --git a/apps/citrea/src/components/common/utils/constant.ts b/apps/citrea/src/components/common/utils/constant.ts
deleted file mode 100644
index 29f3f6a..0000000
--- a/apps/citrea/src/components/common/utils/constant.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
-import { formatUnits, parseUnits } from "viem";
-
-export const SHORT_CHAIN_NAME: Record<number, string> = {
-  [SUPPORTED_CHAINS.ETHEREUM]: "Ethereum",
-  [SUPPORTED_CHAINS.BASE]: "Base",
-  [SUPPORTED_CHAINS.ARBITRUM]: "Arbitrum",
-  [SUPPORTED_CHAINS.OPTIMISM]: "Optimism",
-  [SUPPORTED_CHAINS.POLYGON]: "Polygon",
-  [SUPPORTED_CHAINS.AVALANCHE]: "Avalanche",
-  [SUPPORTED_CHAINS.SCROLL]: "Scroll",
-  [SUPPORTED_CHAINS.KAIA]: "Kaia",
-  [SUPPORTED_CHAINS.BNB]: "BNB",
-  [SUPPORTED_CHAINS.MONAD]: "Monad",
-  [SUPPORTED_CHAINS.HYPEREVM]: "HyperEVM",
-  4326: "MegaETH",
-  [SUPPORTED_CHAINS.CITREA]: "Citrea",
-
-  [SUPPORTED_CHAINS.SEPOLIA]: "Sepolia",
-  [SUPPORTED_CHAINS.BASE_SEPOLIA]: "Base Sepolia",
-  [SUPPORTED_CHAINS.ARBITRUM_SEPOLIA]: "Arbitrum Sepolia",
-  [SUPPORTED_CHAINS.OPTIMISM_SEPOLIA]: "Optimism Sepolia",
-  [SUPPORTED_CHAINS.POLYGON_AMOY]: "Polygon Amoy",
-  [SUPPORTED_CHAINS.MONAD_TESTNET]: "Monad Testnet",
-} as const;
-
-const DEFAULT_SAFETY_MARGIN = 0.01; // 1%
-
-export const TOKEN_IMAGES: Record<string, string> = {
-  USDC: "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png",
-  USDT: "https://coin-images.coingecko.com/coins/images/35023/large/USDT.png",
-  "USD₮0":
-    "https://coin-images.coingecko.com/coins/images/35023/large/USDT.png",
-  USDM: "https://assets.coingecko.com/coins/images/31719/large/usdm.png",
-  WETH: "https://assets.coingecko.com/coins/images/279/large/ethereum.png?1595348880",
-  USDS: "https://assets.coingecko.com/coins/images/39926/standard/usds.webp?1726666683",
-  SOPH: "https://assets.coingecko.com/coins/images/38680/large/sophon_logo_200.png",
-  KAIA: "https://assets.coingecko.com/asset_platforms/images/9672/large/kaia.png",
-  BNB: "https://assets.coingecko.com/coins/images/825/large/bnb-icon2_2x.png",
-  // Add ETH as fallback for any ETH-related tokens
-  ETH: "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
-  // Add common token fallbacks
-  POL: "https://coin-images.coingecko.com/coins/images/32440/standard/polygon.png",
-  AVAX: "https://assets.coingecko.com/coins/images/12559/standard/Avalanche_Circle_RedWhite_Trans.png",
-  FUEL: "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png",
-  HYPE: "https://assets.coingecko.com/asset_platforms/images/243/large/hyperliquid.png",
-  // Popular swap tokens
-  DAI: "https://coin-images.coingecko.com/coins/images/9956/large/Badge_Dai.png?1696509996",
-  UNI: "https://coin-images.coingecko.com/coins/images/12504/large/uni.jpg?1696512319",
-  AAVE: "https://coin-images.coingecko.com/coins/images/12645/large/AAVE.png?1696512452",
-  LDO: "https://coin-images.coingecko.com/coins/images/13573/large/Lido_DAO.png?1696513326",
-  PEPE: "https://coin-images.coingecko.com/coins/images/29850/large/pepe-token.jpeg?1696528776",
-  OP: "https://coin-images.coingecko.com/coins/images/25244/large/Optimism.png?1696524385",
-  ZRO: "https://coin-images.coingecko.com/coins/images/28206/large/ftxG9_TJ_400x400.jpeg?1696527208",
-  OM: "https://assets.coingecko.com/coins/images/12151/standard/OM_Token.png?1696511991",
-  KAITO:
-    "https://assets.coingecko.com/coins/images/54411/standard/Qm4DW488_400x400.jpg",
-};
-
-/**
- * Compute an amount string for fraction buttons (25%, 50%, 75%, 100%).
- *
- * @param balanceStr - user's balance as a human decimal string (e.g. "12.345") OR as base-unit integer string if `balanceIsBaseUnits` true
- * @param fraction - fraction e.g. 0.25, 0.5, 0.75, 1
- * @param decimals - token decimals (6 for USDC/USDT, 18 for ETH)
- * @param safetyMargin - 0.01 for 1% default
- * @param balanceIsBaseUnits - if true, balanceStr is already base units integer string (wei / smallest unit)
- * @returns decimal string clipped to token decimals (rounded down)
- */
-export function computeAmountFromFraction(
-  balanceStr: string,
-  fraction: number,
-  decimals: number,
-  safetyMargin = DEFAULT_SAFETY_MARGIN,
-  balanceIsBaseUnits = false,
-): string {
-  if (!balanceStr) return "0";
-
-  // parse balance into base units (BigInt)
-  const balanceUnits: bigint = balanceIsBaseUnits
-    ? BigInt(balanceStr)
-    : parseUnits(balanceStr, decimals);
-
-  if (balanceUnits === BigInt(0)) return "0";
-
-  // Use an integer precision multiplier to avoid FP issues
-  const PREC = 1_000_000; // 1e6 precision for fraction & safety margin
-  const safetyMul = BigInt(Math.max(0, Math.floor((1 - safetyMargin) * PREC))); // (1 - safetyMargin) * PREC
-  const fractionMul = BigInt(Math.max(0, Math.floor(fraction * PREC))); // fraction * PREC
-
-  // Apply safety margin: floor(balance * (1 - safetyMargin))
-  const maxAfterSafety = (balanceUnits * safetyMul) / BigInt(PREC);
-
-  // Apply fraction and floor: floor(maxAfterSafety * fraction)
-  let desiredUnits = (maxAfterSafety * fractionMul) / BigInt(PREC);
-
-  // Extra clamp just in case
-  if (desiredUnits > balanceUnits) desiredUnits = balanceUnits;
-  if (desiredUnits < BigInt(0)) desiredUnits = BigInt(0);
-
-  // format back to human readable decimal string with token decimals (formatUnits truncates/keeps decimals)
-  // formatUnits will produce exactly decimals digits if fractional part exists; we'll strip trailing zeros.
-  const raw = formatUnits(desiredUnits, decimals);
-  // strip trailing zeros and possible trailing dot
-  return raw
-    .replace(/(\.\d*?[1-9])0+$/u, "$1")
-    .replace(/\.0+$/u, "")
-    .replace(/^\.$/u, "0");
-}
-
-export const usdFormatter = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
diff --git a/apps/citrea/src/components/countdown-timer.tsx b/apps/citrea/src/components/countdown-timer.tsx
deleted file mode 100644
index 5da085c..0000000
--- a/apps/citrea/src/components/countdown-timer.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client";
-import * as React from "react";
-
-interface CountdownTimerProps {
-  targetDate: Date;
-}
-
-export const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) => {
-  const [timeLeft, setTimeLeft] = React.useState({
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-  });
-
-  React.useEffect(() => {
-    if (!targetDate || isNaN(targetDate.getTime())) {
-      console.error("Invalid target date provided to CountdownTimer");
-      return;
-    }
-
-    const calculateTimeLeft = () => {
-      const now = new Date().getTime();
-      const target = targetDate.getTime();
-      const difference = target - now;
-
-      if (difference > 0) {
-        setTimeLeft({
-          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-          hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-          minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
-          seconds: Math.floor((difference % (1000 * 60)) / 1000),
-        });
-      } else {
-        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
-      }
-    };
-
-    calculateTimeLeft();
-    const interval = setInterval(calculateTimeLeft, 1000);
-
-    return () => clearInterval(interval);
-  }, [targetDate]);
-
-  return (
-    <div className="flex flex-col items-center gap-4 mt-6">
-      <div className="flex gap-4 sm:gap-6 md:gap-8">
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.days).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Days
-          </div>
-        </div>
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.hours).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Hours
-          </div>
-        </div>
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.minutes).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Minutes
-          </div>
-        </div>
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.seconds).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Seconds
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
diff --git a/apps/citrea/src/components/fast-bridge/components/allowance-modal.tsx b/apps/citrea/src/components/fast-bridge/components/allowance-modal.tsx
deleted file mode 100644
index f5d4d61..0000000
--- a/apps/citrea/src/components/fast-bridge/components/allowance-modal.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-"use client";
-import React, {
-  type FC,
-  memo,
-  type RefObject,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { Button } from "../../ui/button";
-import { Input } from "../../ui/input";
-import { Label } from "../../ui/label";
-import {
-  type AllowanceHookSource,
-  CHAIN_METADATA,
-  type OnAllowanceHookData,
-  SUPPORTED_CHAINS,
-} from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-import CitreaLogo from "/citrea-chain-logo.webp";
-
-interface AllowanceModalProps {
-  allowance: RefObject<OnAllowanceHookData | null>;
-  callback?: () => void;
-  onCloseCallback?: () => void;
-}
-
-type AllowanceChoice = "min" | "max" | "custom";
-
-interface AllowanceOptionProps {
-  index: number;
-  name: string;
-  choice: AllowanceChoice;
-  selectedChoice?: AllowanceChoice;
-  onSelect: (index: number, choice: AllowanceChoice) => void;
-  title: string;
-  description?: string;
-  children?: React.ReactNode;
-  allowanceValue?: string;
-}
-
-const ALLOWANCE_CHOICES: Array<{
-  choice: AllowanceChoice;
-  title: string;
-  description: string;
-}> = [
-  {
-    choice: "min",
-    title: "Minimum",
-    description: "Grant the lowest allowance required for this action.",
-  },
-  {
-    choice: "max",
-    title: "Maximum",
-    description: "Approve once and skip future approvals for this token.",
-  },
-  {
-    choice: "custom",
-    title: "Custom amount",
-    description: "Specify an allowance that fits your threshold.",
-  },
-];
-
-const AllowanceOption: FC<AllowanceOptionProps> = ({
-  index,
-  name,
-  choice,
-  selectedChoice,
-  onSelect,
-  title,
-  description,
-  children,
-  allowanceValue,
-}) => {
-  const isActive = selectedChoice === choice;
-
-  return (
-    <Label className="block cursor-pointer">
-      <input
-        type="radio"
-        name={name}
-        value={choice}
-        checked={isActive}
-        onChange={() => onSelect(index, choice)}
-        className="peer sr-only"
-      />
-      <div className="flex flex-col gap-3 rounded-xl border border-border/40 bg-background/40 px-4 py-3 transition peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50 peer-checked:border-primary peer-checked:bg-primary/10 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center justify-between w-full">
-          <div>
-            <p className="text-sm font-medium leading-tight">{title}</p>
-            {description ? (
-              <p className="text-xs text-muted-foreground">{description}</p>
-            ) : null}
-          </div>
-          {allowanceValue && (
-            <p className="text-sm font-medium leading-tight">
-              {allowanceValue}
-            </p>
-          )}
-        </div>
-
-        {children}
-      </div>
-    </Label>
-  );
-};
-
-const AllowanceModal: FC<AllowanceModalProps> = ({
-  allowance,
-  callback,
-  onCloseCallback,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [selectedOption, setSelectedOption] = useState<AllowanceChoice[]>([]);
-  const [customValues, setCustomValues] = useState<string[]>([]);
-
-  const { sources, allow, deny } = allowance.current ?? {
-    sources: [],
-    allow: () => {},
-    deny: () => {},
-  };
-
-  const defaultChoices = useMemo<AllowanceChoice[]>(
-    () => Array.from({ length: sources.length }, () => "min"),
-    [sources.length],
-  );
-
-  const isCustomValueValid = (
-    value: string,
-    minimumRaw: bigint,
-    decimals: number,
-  ): boolean => {
-    if (!value || value.trim() === "") return false;
-    try {
-      const parsedValue = nexusSDK?.utils?.parseUnits(value, decimals);
-      if (parsedValue === undefined) return false;
-      return parsedValue >= minimumRaw;
-    } catch {
-      return false;
-    }
-  };
-
-  const hasValidationErrors = useMemo(() => {
-    return sources.some((source, index) => {
-      if (selectedOption[index] !== "custom") return false;
-      const value = customValues[index];
-      if (!value || value.trim() === "") return false;
-      return !isCustomValueValid(
-        value,
-        source.allowance.minimumRaw,
-        source.token.decimals,
-      );
-    });
-  }, [sources, selectedOption, customValues]);
-
-  const onClose = () => {
-    deny();
-    allowance.current = null;
-    onCloseCallback?.();
-  };
-
-  const onApprove = () => {
-    const processed = sources.map((_, i) => {
-      const opt = selectedOption[i];
-      if (opt === "min" || opt === "max") return opt;
-      const rawValue = customValues[i]?.trim();
-      if (!rawValue) return "min";
-      const parsed = Number(rawValue);
-      if (!Number.isFinite(parsed) || parsed < 0) return "min";
-      return rawValue;
-    });
-    try {
-      allow(processed);
-      allowance.current = null;
-      callback?.();
-    } catch (error) {
-      console.error("AllowanceModal onApprove error", error);
-      allowance.current = null;
-      onCloseCallback?.();
-    }
-  };
-
-  const handleChoiceChange = (index: number, value: AllowanceChoice) => {
-    setSelectedOption((prev) => {
-      const next = [...(prev.length ? prev : defaultChoices)];
-      next[index] = value;
-      return next;
-    });
-  };
-
-  const formatAmount = (value: string | bigint, source: AllowanceHookSource) =>
-    nexusSDK?.utils?.formatTokenBalance(value, {
-      symbol: source.token.symbol,
-      decimals: source.token.decimals,
-    }) ?? "—";
-
-  useEffect(() => {
-    setSelectedOption(defaultChoices);
-  }, [defaultChoices]);
-
-  useEffect(() => {
-    setCustomValues(Array.from({ length: sources.length }, () => ""));
-  }, [sources.length]);
-
-  return (
-    <>
-      <div className="space-y-1">
-        <p className="text-lg font-semibold tracking-tight">
-          Set Token Allowances
-        </p>
-        <p className="text-sm text-muted-foreground">
-          Review every required token and choose the minimum, an unlimited max,
-          or define a custom amount before approving.
-        </p>
-      </div>
-
-      <div className="space-y-4 py-2 max-h-[60vh] overflow-y-auto pr-1">
-        {sources?.map((source: AllowanceHookSource, index: number) => (
-          <div
-            key={`${source.token.symbol}-${index}`}
-            className="rounded-2xl border border-border/40 bg-muted/10 p-4 shadow-sm transition hover:border-border"
-          >
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div className="flex items-center gap-3">
-                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-background shadow-inner">
-                  <img
-                    src={
-                      source.chain.id === SUPPORTED_CHAINS.CITREA
-                        ? CitreaLogo
-                        : CHAIN_METADATA[source.chain.id]?.logo
-                    }
-                    alt={source.chain.name}
-                    width={24}
-                    height={24}
-                    className="rounded-full"
-                  />
-                </div>
-                <div>
-                  <p className="text-base font-semibold">
-                    {source.token.symbol}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {source.chain.name}
-                  </p>
-                </div>
-              </div>
-
-              <div className="text-right">
-                <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                  Current allowance
-                </p>
-                <p className="text-sm font-semibold">
-                  {formatAmount(source.allowance.currentRaw, source)}
-                </p>
-              </div>
-            </div>
-
-            <div className="mt-4 space-y-2">
-              {ALLOWANCE_CHOICES.map((choice) => {
-                if (choice.choice === "custom") {
-                  const customValue = customValues[index] ?? "";
-                  const isCustomSelected = selectedOption[index] === "custom";
-                  const showError =
-                    isCustomSelected &&
-                    customValue.trim() !== "" &&
-                    !isCustomValueValid(
-                      customValue,
-                      source.allowance.minimumRaw,
-                      source.token.decimals,
-                    );
-                  return (
-                    <AllowanceOption
-                      key={choice.choice}
-                      index={index}
-                      name={`allowance-${index}`}
-                      choice={choice.choice}
-                      selectedChoice={selectedOption[index]}
-                      onSelect={handleChoiceChange}
-                      title={choice.title}
-                      description={choice.description}
-                    >
-                      <div className="flex flex-col gap-1">
-                        <Input
-                          type="number"
-                          step="any"
-                          min="0"
-                          inputMode="decimal"
-                          placeholder="0.00"
-                          value={isCustomSelected ? customValue : ""}
-                          onChange={(e) => {
-                            const next = [...customValues];
-                            next[index] = e.target.value;
-                            setCustomValues(next);
-                          }}
-                          maxLength={source.token.decimals}
-                          className={`h-9 w-40 rounded-lg border bg-background/80 text-sm disabled:opacity-60 ${
-                            showError ? "border-destructive" : ""
-                          }`}
-                          disabled={!isCustomSelected}
-                        />
-                        {showError && (
-                          <p className="text-xs text-destructive">
-                            Min: {source.allowance.minimum}
-                          </p>
-                        )}
-                      </div>
-                    </AllowanceOption>
-                  );
-                }
-                return (
-                  <AllowanceOption
-                    key={choice.choice}
-                    index={index}
-                    name={`allowance-${index}`}
-                    choice={choice.choice}
-                    selectedChoice={selectedOption[index]}
-                    onSelect={handleChoiceChange}
-                    title={choice.title}
-                    description={choice.description}
-                    allowanceValue={
-                      choice.choice === "min"
-                        ? formatAmount(source.allowance.minimumRaw, source)
-                        : "Unlimited"
-                    }
-                  />
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="mt-4 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">
-        <Button variant="ghost" onClick={onClose} className="font-semibold">
-          Deny
-        </Button>
-        <Button
-          onClick={onApprove}
-          className="w-full sm:w-auto font-semibold"
-          disabled={hasValidationErrors}
-        >
-          Approve Selected
-        </Button>
-      </div>
-    </>
-  );
-};
-
-AllowanceModal.displayName = "AllowanceModal";
-
-export default memo(AllowanceModal);
diff --git a/apps/citrea/src/components/fast-bridge/components/amount-input.tsx b/apps/citrea/src/components/fast-bridge/components/amount-input.tsx
deleted file mode 100644
index af8251f..0000000
--- a/apps/citrea/src/components/fast-bridge/components/amount-input.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { type FC, Fragment, useEffect, useRef } from "react";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { SUPPORTED_CHAINS, type UserAsset } from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type FastBridgeState } from "../hooks/useBridge";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { SHORT_CHAIN_NAME } from "../../common";
-import { LoaderCircle } from "lucide-react";
-
-interface AmountInputProps {
-  amount?: string;
-  onChange: (value: string) => void;
-  bridgableBalance?: UserAsset;
-  onCommit?: (value: string) => void;
-  disabled?: boolean;
-  inputs: FastBridgeState;
-  showBalanceDetails?: boolean;
-}
-
-const AmountInput: FC<AmountInputProps> = ({
-  amount,
-  onChange,
-  bridgableBalance,
-  onCommit,
-  disabled,
-  inputs,
-  showBalanceDetails = true,
-}) => {
-  const { nexusSDK, loading } = useNexus();
-  const commitTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const showBalanceDivider = showBalanceDetails && Boolean(bridgableBalance);
-
-  const scheduleCommit = (val: string) => {
-    if (!onCommit || disabled) return;
-    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    commitTimerRef.current = setTimeout(() => {
-      onCommit(val);
-    }, 800);
-  };
-
-  const onMaxClick = async () => {
-    if (!showBalanceDetails || !nexusSDK || !inputs) return;
-    const maxBalAvailable = await nexusSDK?.calculateMaxForBridge({
-      token: inputs?.token,
-      toChainId: inputs?.chain,
-      recipient: inputs?.recipient,
-    });
-    if (!maxBalAvailable) return;
-    onChange(maxBalAvailable.amount);
-    onCommit?.(maxBalAvailable.amount);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (commitTimerRef.current) {
-        clearTimeout(commitTimerRef.current);
-        commitTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-y-2 pb-2 w-full">
-      <div className="w-full flex sm:flex-row flex-col border border-border rounded-lg gap-y-2">
-        <Input
-          type="text"
-          inputMode="decimal"
-          value={amount ?? ""}
-          placeholder="Enter Amount"
-          onChange={(e) => {
-            let next = e.target.value.replaceAll(/[^0-9.]/g, "");
-            const parts = next.split(".");
-            if (parts.length > 2)
-              next = parts[0] + "." + parts.slice(1).join("");
-            if (next === ".") next = "0.";
-            onChange(next);
-            scheduleCommit(next);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              if (commitTimerRef.current) {
-                clearTimeout(commitTimerRef.current);
-                commitTimerRef.current = null;
-              }
-              onCommit?.(amount ?? "");
-            }
-          }}
-          className="w-full border-none bg-transparent rounded-r-none focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none py-0 px-3  h-12!"
-          aria-invalid={Boolean(amount) && Number.isNaN(Number(amount))}
-          disabled={disabled}
-        />
-        <div
-          className={`flex items-center justify-end-safe gap-x-2 sm:gap-x-4 w-fit px-2 ${
-            showBalanceDivider ? "border-l border-border" : ""
-          }`}
-        >
-          {showBalanceDetails && bridgableBalance && (
-            <p className="text-base font-medium min-w-max">
-              {nexusSDK?.utils?.formatTokenBalance(bridgableBalance?.balance, {
-                symbol:
-                  bridgableBalance?.displaySymbol ?? bridgableBalance?.symbol,
-                decimals: bridgableBalance?.decimals,
-              })}
-            </p>
-          )}
-          {showBalanceDetails && loading && !bridgableBalance && (
-            <LoaderCircle className="size-4 animate-spin" />
-          )}
-          {showBalanceDetails && (
-            <Button
-              size={"sm"}
-              variant={"ghost"}
-              onClick={onMaxClick}
-              className="px-0 font-medium"
-              disabled={disabled}
-            >
-              MAX
-            </Button>
-          )}
-        </div>
-      </div>
-      {showBalanceDetails && (
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="balance-breakdown">
-            <AccordionTrigger
-              className="w-fit justify-end items-center py-0 mt-2 gap-x-0.5 cursor-pointer text-sm font-normal"
-              hideChevron={false}
-            >
-              View Balance Breakdown
-            </AccordionTrigger>
-            <AccordionContent className="pb-0 bg-muted rounded-lg mt-4">
-              <div className="space-y-1 py-2">
-                {bridgableBalance?.breakdown.map((chain) => {
-                  if (Number.parseFloat(chain.balance) === 0) return null;
-                  if (
-                    bridgableBalance.symbol === "USDM" &&
-                    chain.chain.id === SUPPORTED_CHAINS.MEGAETH
-                  )
-                    return null;
-                  return (
-                    <Fragment key={chain.chain.id}>
-                      <div className="flex items-center justify-between px-2 py-1 rounded-md">
-                        <div className="flex items-center gap-2">
-                          <div className="relative h-6 w-6">
-                            <img
-                              src={chain?.chain?.logo}
-                              alt={chain.chain.name}
-                              sizes="100%"
-                              className="rounded-full"
-                              loading="lazy"
-                              decoding="async"
-                              width="20"
-                              height="20"
-                            />
-                          </div>
-                          <span className="text-sm font-light sm:block hidden">
-                            {SHORT_CHAIN_NAME[chain.chain.id]}
-                          </span>
-                        </div>
-                        <p className="text-sm font-light text-right">
-                          {nexusSDK?.utils?.formatTokenBalance(chain.balance, {
-                            symbol:
-                              bridgableBalance?.displaySymbol ??
-                              bridgableBalance?.symbol,
-                            decimals: bridgableBalance?.decimals,
-                          })}
-                        </p>
-                      </div>
-                    </Fragment>
-                  );
-                })}
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
-    </div>
-  );
-};
-
-export default AmountInput;
diff --git a/apps/citrea/src/components/fast-bridge/components/balance-breakdown.tsx b/apps/citrea/src/components/fast-bridge/components/balance-breakdown.tsx
deleted file mode 100644
index 6cdeec3..0000000
--- a/apps/citrea/src/components/fast-bridge/components/balance-breakdown.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { type UserAsset } from "@avail-project/nexus-core";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-
-interface BalanceBreakdownProps {
-  assetBalances: UserAsset;
-}
-
-const BalanceBreakdown = ({ assetBalances }: BalanceBreakdownProps) => {
-  return (
-    <Accordion type="single" collapsible style={{ marginTop: "-0.5rem" }}>
-      <AccordionItem value="sources">
-        <div className="flex items-start justify-end gap-x-4 w-full">
-          {assetBalances && (
-            <div className="flex flex-col items-end gap-y-1 min-w-fit">
-              <AccordionTrigger
-                containerClassName="w-fit"
-                className="py-0 items-center gap-x-1"
-                hideChevron={false}
-              >
-                <p className="text-sm font-light">View Balance Breakdown</p>
-              </AccordionTrigger>
-            </div>
-          )}
-        </div>
-        {assetBalances && (
-          <AccordionContent className="my-4 bg-muted pb-0 px-4 py-2 rounded-lg w-full">
-            <div className="flex flex-col items-center gap-y-3">
-              {assetBalances?.breakdown?.map((individualBalance) => (
-                <div
-                  key={individualBalance.chain.id}
-                  className="flex items-center justify-between w-full gap-x-2"
-                >
-                  <div className="flex items-center gap-x-2">
-                    <img
-                      src={individualBalance.chain.logo}
-                      alt={individualBalance.chain.name}
-                      width={20}
-                      height={20}
-                      className="rounded-full"
-                    />
-                    <p className="text-sm font-light">
-                      {individualBalance.chain.name}
-                    </p>
-                  </div>
-
-                  <p className="text-sm font-light">
-                    {individualBalance.balance} {assetBalances.symbol}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </AccordionContent>
-        )}
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default BalanceBreakdown;
diff --git a/apps/citrea/src/components/fast-bridge/components/chain-select.tsx b/apps/citrea/src/components/fast-bridge/components/chain-select.tsx
deleted file mode 100644
index a5c175b..0000000
--- a/apps/citrea/src/components/fast-bridge/components/chain-select.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { type FC, useMemo } from "react";
-import { Label } from "../../ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
-import { type SUPPORTED_CHAINS_IDS } from "@avail-project/nexus-core";
-import { cn } from "@/lib/utils";
-import { useNexus } from "../../nexus/NexusProvider";
-
-interface ChainSelectProps {
-  selectedChain: number;
-  disabled?: boolean;
-  hidden?: boolean;
-  className?: string;
-  label?: string;
-  handleSelect: (chainId: SUPPORTED_CHAINS_IDS) => void;
-}
-
-const ChainSelect: FC<ChainSelectProps> = ({
-  selectedChain,
-  disabled,
-  hidden = false,
-  className,
-  label,
-  handleSelect,
-}) => {
-  const { supportedChainsAndTokens } = useNexus();
-
-  const selectedChainData = useMemo(() => {
-    if (!supportedChainsAndTokens) return null;
-    return supportedChainsAndTokens.find((c) => c.id === selectedChain);
-  }, [selectedChain, supportedChainsAndTokens]);
-
-  console.log("SELECTED CHAIN DATA:", selectedChainData);
-
-  if (hidden) return null;
-  return (
-    <Select
-      value={selectedChain?.toString() ?? ""}
-      onValueChange={(value) => {
-        if (!disabled) {
-          handleSelect(Number.parseInt(value) as SUPPORTED_CHAINS_IDS);
-        }
-      }}
-    >
-      <div className="flex flex-col items-start gap-y-3 w-full">
-        {label && <Label className="text-sm font-semibold">{label}</Label>}
-        <SelectTrigger
-          disabled={disabled}
-          className="h-12! w-full text-base font-light"
-        >
-          <SelectValue>
-            {selectedChainData && (
-              <div
-                className={cn("flex items-center gap-x-2 w-full", className)}
-              >
-                <img
-                  src={selectedChainData?.logo}
-                  alt={selectedChainData?.name}
-                  width={24}
-                  height={24}
-                  className="rounded-full"
-                />
-                <p className="text-primary test-sm">
-                  {selectedChainData?.name}
-                </p>
-              </div>
-            )}
-          </SelectValue>
-        </SelectTrigger>
-      </div>
-
-      <SelectContent>
-        <SelectGroup className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-scroll no-scrollbar">
-          {supportedChainsAndTokens?.map((chain) => {
-            return (
-              <SelectItem key={chain.id} value={String(chain.id)}>
-                <div className="flex items-center gap-x-2 my-1">
-                  <img
-                    src={chain.logo}
-                    alt={chain?.name}
-                    width={24}
-                    height={24}
-                    className="rounded-full"
-                  />
-                  <p className="text-primary test-sm">{chain.name}</p>
-                </div>
-              </SelectItem>
-            );
-          })}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-};
-
-export default ChainSelect;
diff --git a/apps/citrea/src/components/fast-bridge/components/fee-breakdown.tsx b/apps/citrea/src/components/fast-bridge/components/fee-breakdown.tsx
deleted file mode 100644
index 93655ba..0000000
--- a/apps/citrea/src/components/fast-bridge/components/fee-breakdown.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { type FC } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { type ReadableIntent } from "@avail-project/nexus-core";
-import { Skeleton } from "../../ui/skeleton";
-import { useNexus } from "../../nexus/NexusProvider";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
-import { MessageCircleQuestion } from "lucide-react";
-
-interface FeeBreakdownProps {
-  intent: ReadableIntent;
-  isLoading?: boolean;
-}
-
-const FeeBreakdown: FC<FeeBreakdownProps> = ({ intent, isLoading = false }) => {
-  const { nexusSDK } = useNexus();
-  const feeSymbol =
-    intent.token?.displaySymbol ?? intent.token?.symbol ?? "USDC";
-
-  const feeRows = [
-    {
-      key: "caGas",
-      label: "Fast Bridge Gas Fees",
-      value: intent?.fees?.caGas,
-      description:
-        "The gas fee required for executing the fast bridge transaction on the destination chain.",
-    },
-    {
-      key: "gasSupplied",
-      label: "Gas Supplied",
-      value: intent?.fees?.gasSupplied,
-      description:
-        "The amount of gas tokens supplied to cover transaction costs on the destination chain.",
-    },
-    {
-      key: "solver",
-      label: "Solver Fees",
-      value: intent?.fees?.solver,
-      description:
-        "Fees paid to the solver that executes the bridge transaction and ensures fast completion.",
-    },
-    {
-      key: "protocol",
-      label: "Protocol Fees",
-      value: intent?.fees?.protocol,
-      description:
-        "Fees collected by the protocol for maintaining and operating the bridge infrastructure.",
-    },
-  ];
-
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="breakdown">
-        <div className="w-full flex items-start justify-between">
-          <p className="font-light text-base">Total fees</p>
-
-          <div className="flex flex-col items-end justify-end-safe gap-y-1">
-            {isLoading ? (
-              <Skeleton className="h-5 w-24" />
-            ) : (
-              <p className="font-light text-base min-w-max">
-                {nexusSDK?.utils?.formatTokenBalance(intent.fees?.total, {
-                  symbol: feeSymbol,
-                  decimals: intent?.token?.decimals,
-                })}
-              </p>
-            )}
-            <AccordionTrigger
-              containerClassName="w-fit"
-              className="p-0 items-center gap-x-1"
-              hideChevron={false}
-            >
-              <p className="text-sm font-light">View Breakup</p>
-            </AccordionTrigger>
-          </div>
-        </div>
-        <AccordionContent>
-          <div className="w-full flex flex-col items-center justify-between gap-y-3 bg-muted px-4 py-2 rounded-lg mt-2">
-            {feeRows.map(({ key, label, value, description }) => {
-              // if (Number.parseFloat(value ?? "0") <= 0) return null;
-              return (
-                <Tooltip key={key}>
-                  <div className="flex items-center w-full justify-between">
-                    <div className="flex items-center gap-x-2">
-                      <p className="text-sm font-light">{label}</p>
-                      <TooltipTrigger asChild>
-                        <MessageCircleQuestion className="size-4" />
-                      </TooltipTrigger>
-                    </div>
-                    {isLoading ? (
-                      <Skeleton className="h-4 w-20" />
-                    ) : (
-                      <p className="text-sm font-light">
-                        {nexusSDK?.utils?.formatTokenBalance(value, {
-                          symbol: feeSymbol,
-                          decimals: intent?.token?.decimals,
-                        })}
-                      </p>
-                    )}
-                  </div>
-                  <TooltipContent className="max-w-sm text-balance">
-                    <p className="text-sm font-light">{description}</p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default FeeBreakdown;
diff --git a/apps/citrea/src/components/fast-bridge/components/receipient-address.tsx b/apps/citrea/src/components/fast-bridge/components/receipient-address.tsx
deleted file mode 100644
index 0bb4192..0000000
--- a/apps/citrea/src/components/fast-bridge/components/receipient-address.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-import * as React from "react";
-import { Input } from "../../ui/input";
-import { Check, Edit } from "lucide-react";
-import { Button } from "../../ui/button";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type Address } from "viem";
-
-interface ReceipientAddressProps {
-  address?: Address;
-  onChange: (address: string) => void;
-}
-
-const ReceipientAddress: React.FC<ReceipientAddressProps> = ({
-  address,
-  onChange,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [isEditing, setIsEditing] = React.useState(false);
-  const fallbackTruncate = (value: string, head = 6, tail = 6) => {
-    if (!value) return "";
-    if (value.length <= head + tail) return value;
-    return `${value.slice(0, head)}...${value.slice(-tail)}`;
-  };
-  const displayAddress =
-    address && nexusSDK?.utils?.truncateAddress
-      ? nexusSDK.utils.truncateAddress(address, 6, 6)
-      : address
-        ? fallbackTruncate(address, 6, 6)
-        : "";
-  return (
-    <div className="w-full">
-      {isEditing ? (
-        <div className="flex items-center w-full justify-between gap-x-4">
-          <Input
-            value={address}
-            placeholder="Enter Recipient Address"
-            onChange={(e) => onChange(e.target.value)}
-            className="w-full text-base font-medium"
-          />
-          <Button
-            variant={"ghost"}
-            size={"icon"}
-            onClick={() => {
-              setIsEditing(false);
-            }}
-          >
-            <Check className="size-5" />
-          </Button>
-        </div>
-      ) : (
-        <div className="flex items-center w-full justify-between">
-          <p className="font-medium text-base">Recipient Address</p>
-          <div className="flex items-center gap-x-3 ">
-            <p className="font-medium text-base">{displayAddress}</p>
-
-            <Button
-              variant={"ghost"}
-              size={"icon"}
-              onClick={() => {
-                setIsEditing(true);
-              }}
-              className="px-0 size-5"
-            >
-              <Edit className="size-5" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ReceipientAddress;
diff --git a/apps/citrea/src/components/fast-bridge/components/recipient-address.tsx b/apps/citrea/src/components/fast-bridge/components/recipient-address.tsx
deleted file mode 100644
index 5a7fa6f..0000000
--- a/apps/citrea/src/components/fast-bridge/components/recipient-address.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client";
-import { type FC, useState } from "react";
-import { Input } from "../../ui/input";
-import { Check, Edit } from "lucide-react";
-import { Button } from "../../ui/button";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type Address } from "viem";
-
-interface RecipientAddressProps {
-  address?: Address;
-  onChange: (address: string) => void;
-  disabled?: boolean;
-}
-
-const RecipientAddress: FC<RecipientAddressProps> = ({
-  address,
-  onChange,
-  disabled,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [isEditing, setIsEditing] = useState(false);
-  const fallbackTruncate = (value: string, head = 6, tail = 6) => {
-    if (!value) return "";
-    if (value.length <= head + tail) return value;
-    return `${value.slice(0, head)}...${value.slice(-tail)}`;
-  };
-  const displayAddress =
-    address && nexusSDK?.utils?.truncateAddress
-      ? nexusSDK.utils.truncateAddress(address, 6, 6)
-      : address
-        ? fallbackTruncate(address, 6, 6)
-        : "";
-  return (
-    <div className="w-full">
-      {isEditing ? (
-        <div className="flex items-center w-full justify-between gap-x-4">
-          <Input
-            value={address}
-            placeholder="Enter Recipient Address"
-            onChange={(e) => onChange(e.target.value)}
-            className="w-full"
-          />
-          <Button
-            variant={"ghost"}
-            size={"icon"}
-            onClick={() => {
-              setIsEditing(false);
-            }}
-          >
-            <Check className="size-5" />
-          </Button>
-        </div>
-      ) : (
-        <div className="flex flex-col sm:flex-row items-start sm:items-center w-full justify-between">
-          <p className="font-light text-base">Recipient Address</p>
-          <div className="flex items-center gap-x-3 ">
-            {address && (
-              <p className="font-light text-base">{displayAddress}</p>
-            )}
-
-            <Button
-              variant={"ghost"}
-              size={"icon"}
-              onClick={() => {
-                setIsEditing(true);
-              }}
-              className="px-0 size-5"
-              disabled={disabled}
-            >
-              <Edit className="size-5" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RecipientAddress;
diff --git a/apps/citrea/src/components/fast-bridge/components/source-breakdown.tsx b/apps/citrea/src/components/fast-bridge/components/source-breakdown.tsx
deleted file mode 100644
index bbe5c84..0000000
--- a/apps/citrea/src/components/fast-bridge/components/source-breakdown.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  type ReadableIntent,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { Skeleton } from "../../ui/skeleton";
-import { useNexus } from "../../nexus/NexusProvider";
-
-interface SourceBreakdownProps {
-  intent?: ReadableIntent;
-  tokenSymbol: SUPPORTED_TOKENS;
-  isLoading?: boolean;
-}
-
-const SourceBreakdown = ({
-  intent,
-  tokenSymbol,
-  isLoading = false,
-}: SourceBreakdownProps) => {
-  const { nexusSDK } = useNexus();
-  const spendSymbol =
-    intent?.token.displaySymbol ?? intent?.token.symbol ?? tokenSymbol;
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="sources">
-        <div className="flex items-start justify-between gap-x-4 w-full">
-          {isLoading ? (
-            <>
-              <div className="flex flex-col items-start gap-y-1 min-w-fit">
-                <p className="text-base font-light">You Spend</p>
-                <Skeleton className="h-4 w-44" />
-              </div>
-              <div className="flex flex-col items-end gap-y-1 min-w-fit">
-                <Skeleton className="h-5 w-24" />
-                <div className="w-fit">
-                  <Skeleton className="h-4 w-24" />
-                </div>
-              </div>
-            </>
-          ) : (
-            intent?.sources && (
-              <>
-                <div className="flex flex-col items-start gap-y-1 min-w-fit">
-                  <p className="text-base font-light">You Spend</p>
-                  <p className="text-sm font-light">
-                    {`${spendSymbol.toUpperCase()} on ${
-                      intent?.sources?.length
-                    } ${intent?.sources?.length > 1 ? "chains" : "chain"}`}
-                  </p>
-                </div>
-
-                <div className="flex flex-col items-end gap-y-1 min-w-fit">
-                  <p className="text-base font-light">
-                    {nexusSDK?.utils?.formatTokenBalance(intent?.sourcesTotal, {
-                      symbol: spendSymbol,
-                      decimals: intent?.token?.decimals,
-                    })}
-                  </p>
-                  <AccordionTrigger
-                    containerClassName="w-fit"
-                    className="py-0 items-center gap-x-1"
-                    hideChevron={false}
-                  >
-                    <p className="text-sm font-light">View Sources</p>
-                  </AccordionTrigger>
-                </div>
-              </>
-            )
-          )}
-        </div>
-        {!isLoading && intent?.sources && (
-          <AccordionContent className="my-4 bg-muted pb-0 px-4 py-2 rounded-lg w-full">
-            <div className="flex flex-col items-center gap-y-3">
-              {intent?.sources?.map((source) => (
-                <div
-                  key={source.chainID}
-                  className="flex items-center justify-between w-full gap-x-2"
-                >
-                  <div className="flex items-center gap-x-2">
-                    <img
-                      src={source?.chainLogo}
-                      alt={source?.chainName}
-                      width={20}
-                      height={20}
-                      className="rounded-full"
-                    />
-                    <p className="text-base font-light">{source.chainName}</p>
-                  </div>
-
-                  <p className="text-base font-light">
-                    {nexusSDK?.utils?.formatTokenBalance(source.amount, {
-                      symbol: spendSymbol,
-                      decimals: intent?.token?.decimals,
-                    })}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </AccordionContent>
-        )}
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default SourceBreakdown;
diff --git a/apps/citrea/src/components/fast-bridge/components/transaction-progress.tsx b/apps/citrea/src/components/fast-bridge/components/transaction-progress.tsx
deleted file mode 100644
index f877513..0000000
--- a/apps/citrea/src/components/fast-bridge/components/transaction-progress.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Check, Circle, LoaderPinwheel } from "lucide-react";
-import { type FC, memo, useMemo } from "react";
-import {
-  type BridgeStepType,
-  type SwapStepType,
-} from "@avail-project/nexus-core";
-
-type ProgressStep = BridgeStepType | SwapStepType;
-
-interface TransactionProgressProps {
-  timer: number;
-  steps: Array<{ id: number; completed: boolean; step: ProgressStep }>;
-  viewIntentUrl?: string;
-  operationType?: string;
-  completed?: boolean;
-}
-
-export const getOperationText = (type: string) => {
-  switch (type) {
-    case "bridge":
-      return "Transaction";
-    case "transfer":
-      return "Transferring";
-    case "bridgeAndExecute":
-      return "Bridge & Execute";
-    case "swap":
-      return "Swapping";
-    default:
-      return "Processing";
-  }
-};
-
-type DisplayStep = { id: string; label: string; completed: boolean };
-
-const StepList: FC<{ steps: DisplayStep[]; currentIndex: number }> = memo(
-  ({ steps, currentIndex }) => {
-    return (
-      <div className="w-full mt-6 space-y-6">
-        {steps.map((s, idx) => {
-          const isCompleted = !!s.completed;
-          const isCurrent = currentIndex === -1 ? false : idx === currentIndex;
-
-          let rightIcon = <Circle className="size-5 text-muted-foreground" />;
-          if (isCompleted) {
-            rightIcon = <Check className="size-5 text-green-600" />;
-          } else if (isCurrent) {
-            rightIcon = (
-              <LoaderPinwheel className="size-5 animate-spin text-muted-foreground" />
-            );
-          }
-
-          return (
-            <div
-              key={s.id}
-              className="flex items-center justify-between w-full"
-            >
-              <div className="flex items-center gap-x-3">
-                <span className="text-base font-semibold">{s.label}</span>
-              </div>
-              {rightIcon}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-);
-StepList.displayName = "StepList";
-
-const TransactionProgress: FC<TransactionProgressProps> = ({
-  timer,
-  steps,
-  viewIntentUrl,
-  operationType = "bridge",
-  completed = false,
-}) => {
-  const totalSteps = Array.isArray(steps) ? steps.length : 0;
-  const completedSteps = Array.isArray(steps)
-    ? steps.reduce((acc, s) => acc + (s?.completed ? 1 : 0), 0)
-    : 0;
-  const rawPercent = totalSteps > 0 ? completedSteps / totalSteps : 0;
-  const percent = completed ? 1 : rawPercent;
-  const allCompleted = completed || percent >= 1;
-  const opText = getOperationText(operationType);
-  const headerText = allCompleted
-    ? `${opText} Completed`
-    : `${opText} In Progress...`;
-  const ctaText = allCompleted ? `View Explorer` : "View Intent";
-
-  const { effectiveSteps, currentIndex } = useMemo(() => {
-    const milestones = [
-      "Intent verified",
-      "Collected on sources",
-      "Filled on destination",
-    ];
-    const thresholds = milestones.map(
-      (_, idx) => (idx + 1) / milestones.length
-    );
-    const displaySteps: DisplayStep[] = milestones.map((label, idx) => ({
-      id: `M${idx}`,
-      label,
-      completed: idx === 0 ? timer > 0 : percent >= thresholds[idx],
-    }));
-    const current = displaySteps.findIndex((st) => !st.completed);
-    return { effectiveSteps: displaySteps, currentIndex: current };
-  }, [percent, timer, completed]);
-
-  return (
-    <div className="w-full flex flex-col items-center">
-      <div className="flex flex-col items-center gap-y-3">
-        {allCompleted ? (
-          <Check className="size-6 text-green-600" />
-        ) : (
-          <LoaderPinwheel className="size-6 animate-spin" />
-        )}
-        <p>{headerText}</p>
-        <div className="flex items-center justify-center w-full">
-          <span className="text-2xl font-semibold font-nexus-primary text-nexus-black">
-            {Math.floor(timer)}
-          </span>
-          <span className="text-base font-semibold font-nexus-primary text-nexus-black">
-            .
-          </span>
-          <span className="text-base font-semibold font-nexus-primary text-nexus-muted-secondary">
-            {String(Math.floor((timer % 1) * 1000)).padStart(3, "0")}s
-          </span>
-        </div>
-      </div>
-
-      <StepList steps={effectiveSteps} currentIndex={currentIndex} />
-
-      {viewIntentUrl && (
-        <a
-          href={viewIntentUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="mt-8 underline font-semibold"
-        >
-          {ctaText}
-        </a>
-      )}
-    </div>
-  );
-};
-
-export default TransactionProgress;
diff --git a/apps/citrea/src/components/fast-bridge/fast-bridge.tsx b/apps/citrea/src/components/fast-bridge/fast-bridge.tsx
deleted file mode 100644
index 6d6e107..0000000
--- a/apps/citrea/src/components/fast-bridge/fast-bridge.tsx
+++ /dev/null
@@ -1,470 +0,0 @@
-"use client";
-import { type FC, useEffect, useMemo, useRef, useState } from "react";
-import { Card, CardContent } from "../ui/card";
-import ChainSelect from "./components/chain-select";
-import TokenSelect from "./components/token-select";
-import { Button } from "../ui/button";
-import { X, CheckCircle2 } from "lucide-react";
-import { useNexus } from "../nexus/NexusProvider";
-import AmountInput from "./components/amount-input";
-import FeeBreakdown from "./components/fee-breakdown";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import TransactionProgress from "./components/transaction-progress";
-import AllowanceModal from "./components/allowance-modal";
-import useBridge from "./hooks/useBridge";
-import SourceBreakdown from "./components/source-breakdown";
-import {
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import { type Address } from "viem";
-import { Skeleton } from "../ui/skeleton";
-import RecipientAddress from "./components/recipient-address";
-import ViewHistory from "../view-history/view-history";
-import { toast } from "sonner";
-import Decimal from "decimal.js";
-
-interface FastBridgeProps {
-  connectedAddress?: Address;
-  isWalletConnected?: boolean;
-  onConnectWallet?: () => void;
-  mockIntent?: {
-    totalAmount?: string;
-    receiveAmount?: string;
-    totalGas?: string;
-  };
-  prefill?: {
-    token: SUPPORTED_TOKENS;
-    chainId: SUPPORTED_CHAINS_IDS;
-    amount?: string;
-    recipient?: Address;
-  };
-  onComplete?: () => void;
-  onStart?: () => void;
-  onError?: (message: string) => void;
-}
-
-const FastBridge: FC<FastBridgeProps> = ({
-  connectedAddress,
-  isWalletConnected,
-  onConnectWallet,
-  mockIntent,
-  onComplete,
-  onStart,
-  onError,
-  prefill,
-}) => {
-  const {
-    nexusSDK,
-    intent,
-    bridgableBalance,
-    allowance,
-    network,
-    fetchBridgableBalance,
-  } = useNexus();
-  const [historyRefreshNonce, setHistoryRefreshNonce] = useState(0);
-
-  const {
-    inputs,
-    setInputs,
-    timer,
-    loading,
-    refreshing,
-    isDialogOpen,
-    txError,
-    setTxError,
-    handleTransaction,
-    reset,
-    filteredBridgableBalance,
-    startTransaction,
-    setIsDialogOpen,
-    commitAmount,
-    lastExplorerUrl,
-    steps,
-    status,
-    areInputsValid,
-  } = useBridge({
-    prefill,
-    network: network ?? "mainnet",
-    connectedAddress,
-    nexusSDK,
-    intent,
-    bridgableBalance,
-    allowance,
-    onComplete: async () => {
-      if (onComplete) {
-        onComplete();
-      }
-      const sourcesText =
-        intent.current?.intent?.sources?.length &&
-        intent.current?.intent.sources.length > 0
-          ? intent.current.intent.sources.map((s) => s.chainName).join(", ")
-          : "N/A";
-      toast.success(
-        <div className="flex flex-col gap-2 w-full">
-          <div className="flex items-center gap-2">
-            <CheckCircle2 className="size-5 text-green-500" />
-            <span className="font-semibold">Bridge Successful!</span>
-          </div>
-          <div className="flex flex-col gap-1.5 text-sm text-muted-foreground">
-            <div>
-              <span className="font-medium">Source(s):</span> {sourcesText}
-            </div>
-            <div>
-              <span className="font-medium">Destination:</span>{" "}
-              {intent.current?.intent?.destination?.chainName || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Asset:</span>{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Amount Spent:</span>{" "}
-              {intent.current?.intent?.sourcesTotal
-                ? new Decimal(intent.current?.intent?.sourcesTotal).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Amount Received:</span>{" "}
-              {intent.current?.intent?.destination?.amount
-                ? new Decimal(
-                    intent.current?.intent?.destination?.amount,
-                  ).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Total Fees:</span>{" "}
-              {intent.current?.intent?.fees.total
-                ? new Decimal(intent.current?.intent?.fees.total).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            {lastExplorerUrl ? (
-              <div className="mt-2 pt-2 border-t">
-                <a
-                  href={lastExplorerUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-primary hover:underline font-medium"
-                >
-                  View on Explorer
-                </a>
-              </div>
-            ) : null}
-          </div>
-        </div>,
-        {
-          duration: Infinity, // Stay until dismissed
-          closeButton: true,
-          icon: null, // Remove default icon since we're adding our own
-        },
-      );
-      setHistoryRefreshNonce((prev) => prev + 1);
-    },
-    onStart,
-    onError: (message) => {
-      toast.error(message);
-      if (onError) {
-        onError(message);
-      }
-    },
-    fetchBalance: fetchBridgableBalance,
-  });
-  const isConnected = isWalletConnected ?? Boolean(connectedAddress);
-  const isSdkReady = Boolean(nexusSDK);
-  const showSdkDetails = isSdkReady;
-  const receiveSymbol =
-    intent?.current?.intent?.token.symbol ??
-    // @ts-expect-error - not possible
-    intent?.current?.intent?.token.displaySymbol ??
-    filteredBridgableBalance?.symbol;
-
-  const amountValue = useMemo(() => {
-    if (!inputs?.amount) return null;
-    const parsed = Number.parseFloat(inputs.amount);
-    return Number.isFinite(parsed) ? parsed : null;
-  }, [inputs?.amount]);
-
-  const hasValidAmount = useMemo(() => {
-    if (amountValue === null) return false;
-    return amountValue > 0;
-  }, [amountValue]);
-
-  const formatMockNumber = (value: number) => {
-    if (!Number.isFinite(value)) return "--";
-    const fixed = value.toFixed(6);
-    return fixed.replace(/\.?0+$/, "");
-  };
-
-  const formatWithToken = (value: string, token?: string) => {
-    if (!token) return value;
-    return `${value} ${token}`.trim();
-  };
-
-  const tokenSuffix =
-    inputs?.token ?? filteredBridgableBalance?.symbol ?? "USDC";
-
-  const mockPreview = useMemo(() => {
-    if (!hasValidAmount || amountValue === null) return null;
-    if (mockIntent) {
-      return {
-        totalAmount: mockIntent.totalAmount ?? "--",
-        receiveAmount: mockIntent.receiveAmount ?? "--",
-        totalGas: mockIntent.totalGas ?? "--",
-      };
-    }
-    const totalGas = amountValue * 0.001;
-    const totalAmount = amountValue + totalGas;
-    return {
-      totalAmount: formatWithToken(formatMockNumber(totalAmount), tokenSuffix),
-      receiveAmount: formatWithToken(
-        formatMockNumber(amountValue),
-        tokenSuffix,
-      ),
-      totalGas: formatWithToken(formatMockNumber(totalGas), tokenSuffix),
-    };
-  }, [amountValue, hasValidAmount, mockIntent, tokenSuffix]);
-
-  const showMockPreview = !isConnected && hasValidAmount && mockPreview;
-  const autoIntentTriggered = useRef(false);
-
-  useEffect(() => {
-    autoIntentTriggered.current = false;
-  }, [inputs?.amount, inputs?.chain, inputs?.token, inputs?.recipient]);
-
-  useEffect(() => {
-    if (!isConnected || !isSdkReady) return;
-    if (!areInputsValid) return;
-    if (intent.current) return;
-    // if (loading) return; // Removed to allow "10" fetch even if "1" is loading
-    if (autoIntentTriggered.current) return;
-    autoIntentTriggered.current = true;
-    void handleTransaction();
-  }, [
-    areInputsValid,
-    handleTransaction,
-    intent,
-    isConnected,
-    isSdkReady,
-    loading,
-  ]);
-  return (
-    <Card className="w-full max-w-xl">
-      <CardContent className="flex flex-col gap-y-4 w-full px-2 sm:px-6 relative">
-        {showSdkDetails && (
-          <ViewHistory
-            className="absolute -top-2 right-3"
-            refreshNonce={historyRefreshNonce}
-          />
-        )}
-        <ChainSelect
-          selectedChain={inputs?.chain}
-          handleSelect={(chain) =>
-            setInputs({
-              ...inputs,
-              chain,
-            })
-          }
-          label="To"
-          disabled={!!prefill?.chainId}
-        />
-        <TokenSelect
-          selectedChain={inputs?.chain}
-          selectedToken={inputs?.token}
-          handleTokenSelect={(token) => setInputs({ ...inputs, token })}
-          disabled={!!prefill?.token}
-        />
-        <AmountInput
-          amount={inputs?.amount}
-          onChange={(amount) => setInputs({ ...inputs, amount })}
-          bridgableBalance={filteredBridgableBalance}
-          onCommit={() => void commitAmount()}
-          disabled={refreshing || !!prefill?.amount}
-          inputs={inputs}
-          showBalanceDetails={showSdkDetails}
-        />
-        <RecipientAddress
-          address={inputs?.recipient}
-          onChange={(address) =>
-            setInputs({ ...inputs, recipient: address as `0x${string}` })
-          }
-          disabled={!!prefill?.recipient}
-        />
-        {showMockPreview && (
-          <div className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 space-y-3">
-            <div className="flex items-center justify-between">
-              <p className="text-base font-light">You spend</p>
-              <p className="text-base font-light">{mockPreview?.totalAmount}</p>
-            </div>
-            <div className="flex items-center justify-between">
-              <p className="text-base font-light">You receive</p>
-              <p className="text-base font-light">
-                {mockPreview?.receiveAmount}
-              </p>
-            </div>
-            <div className="flex items-center justify-between">
-              <p className="text-base font-light">Total gas</p>
-              <p className="text-base font-light">{mockPreview?.totalGas}</p>
-            </div>
-          </div>
-        )}
-
-        {showSdkDetails && intent?.current?.intent && (
-          <>
-            <SourceBreakdown
-              intent={intent?.current?.intent}
-              tokenSymbol={filteredBridgableBalance?.symbol as SUPPORTED_TOKENS}
-              isLoading={refreshing}
-            />
-
-            <div className="w-full flex items-start justify-between gap-x-4">
-              <p className="text-base font-light">You receive</p>
-              <div className="flex flex-col gap-y-1 min-w-fit">
-                {refreshing ? (
-                  <Skeleton className="h-5 w-28" />
-                ) : (
-                  <p className="text-base font-light text-right">
-                    {`${
-                      connectedAddress === inputs?.recipient
-                        ? intent?.current?.intent?.destination?.amount
-                        : inputs.amount
-                    } ${receiveSymbol}`}
-                  </p>
-                )}
-                {refreshing ? (
-                  <Skeleton className="h-4 w-36" />
-                ) : (
-                  <p className="text-sm font-light text-right">
-                    on {intent?.current?.intent?.destination?.chainName}
-                  </p>
-                )}
-              </div>
-            </div>
-            <FeeBreakdown
-              intent={intent?.current?.intent}
-              isLoading={refreshing}
-            />
-          </>
-        )}
-
-        {!intent.current && (
-          <Button
-            onClick={() => {
-              if (!isConnected) {
-                if (onConnectWallet) {
-                  onConnectWallet();
-                } else {
-                  toast.error("Wallet connection not available");
-                }
-              } else if (!isSdkReady) {
-                toast.info("Please wait, SDK is still initializing...");
-              } else if (!areInputsValid) {
-                toast.error(
-                  "Please enter a valid amount and recipient address",
-                );
-              } else {
-                // Connected, SDK ready, inputs valid - trigger transaction
-                void handleTransaction();
-              }
-            }}
-            disabled={
-              !isConnected
-                ? false
-                : !inputs?.amount ||
-                  !inputs?.recipient ||
-                  !inputs?.chain ||
-                  !inputs?.token ||
-                  loading ||
-                  Number(inputs?.amount) > 550
-            }
-          >
-            {!isConnected
-              ? "Connect Wallet"
-              : !isSdkReady
-                ? "Initializing..."
-                : !areInputsValid
-                  ? "Bridge"
-                  : status === "error" || txError
-                    ? "Retry"
-                    : "Fetching intent..."}
-          </Button>
-        )}
-
-        <Dialog
-          open={isDialogOpen}
-          onOpenChange={(open) => {
-            if (loading) return;
-            setIsDialogOpen(open);
-          }}
-        >
-          {intent.current && !isDialogOpen && (
-            <div className="w-full flex items-center gap-x-2 justify-between">
-              <Button variant={"destructive"} onClick={reset} className="w-1/2">
-                Deny
-              </Button>
-              <DialogTrigger asChild>
-                <Button
-                  onClick={startTransaction}
-                  className="w-1/2"
-                  disabled={refreshing}
-                >
-                  {refreshing ? "Refreshing..." : "Accept"}
-                </Button>
-              </DialogTrigger>
-            </div>
-          )}
-
-          <DialogContent>
-            <DialogHeader className="sr-only">
-              <DialogTitle>Transaction Progress</DialogTitle>
-            </DialogHeader>
-            {allowance.current ? (
-              <AllowanceModal
-                allowance={allowance}
-                callback={startTransaction}
-                onCloseCallback={reset}
-              />
-            ) : (
-              <TransactionProgress
-                timer={timer}
-                steps={steps}
-                viewIntentUrl={lastExplorerUrl}
-                operationType={"bridge"}
-                completed={status === "success"}
-              />
-            )}
-          </DialogContent>
-        </Dialog>
-
-        {txError && (
-          <div className="rounded-md border border-destructive bg-destructive/80 px-3 py-2 text-sm text-destructive-foreground flex items-start justify-between gap-x-3 mt-3 w-full">
-            <span className="flex-1 w-full">{txError}</span>
-            <Button
-              type="button"
-              size={"icon"}
-              variant={"ghost"}
-              onClick={() => {
-                reset();
-                setTxError(null);
-              }}
-              className="text-destructive-foreground/80 hover:text-destructive-foreground focus:outline-none"
-              aria-label="Dismiss error"
-            >
-              <X className="size-4" />
-            </Button>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-
-export default FastBridge;
diff --git a/apps/citrea/src/components/fast-bridge/hooks/useBridge.ts b/apps/citrea/src/components/fast-bridge/hooks/useBridge.ts
deleted file mode 100644
index 34f66bd..0000000
--- a/apps/citrea/src/components/fast-bridge/hooks/useBridge.ts
+++ /dev/null
@@ -1,386 +0,0 @@
-import {
-  type BridgeStepType,
-  NEXUS_EVENTS,
-  type NexusNetwork,
-  NexusSDK,
-  type OnAllowanceHookData,
-  type OnIntentHookData,
-  // SUPPORTED_CHAINS,
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-  type UserAsset,
-} from "@avail-project/nexus-core";
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useReducer,
-  type RefObject,
-} from "react";
-import { type Address, isAddress } from "viem";
-import {
-  useStopwatch,
-  usePolling,
-  useNexusError,
-  useTransactionSteps,
-  type TransactionStatus,
-} from "../../common";
-import config from "../../../../config";
-import { trackBridgeSubmit } from "../../../lib/posthog";
-import { SHORT_CHAIN_NAME } from "../../common/utils/constant";
-
-export interface FastBridgeState {
-  chain: SUPPORTED_CHAINS_IDS;
-  token: SUPPORTED_TOKENS;
-  amount?: string;
-  recipient?: `0x${string}`;
-}
-
-const ALLOWED_TOKENS = new Set([
-  "USDC",
-  "USDT",
-  "USDM",
-]) as Set<SUPPORTED_TOKENS>;
-
-interface UseBridgeProps {
-  network: NexusNetwork;
-  connectedAddress?: Address;
-  nexusSDK: NexusSDK | null;
-  intent: RefObject<OnIntentHookData | null>;
-  allowance: RefObject<OnAllowanceHookData | null>;
-  bridgableBalance: UserAsset[] | null;
-  prefill?: {
-    token: string;
-    chainId: number;
-    amount?: string;
-    recipient?: Address;
-  };
-  onComplete?: () => void;
-  onStart?: () => void;
-  onError?: (message: string) => void;
-  fetchBalance: () => Promise<void>;
-}
-
-type BridgeState = {
-  inputs: FastBridgeState;
-  status: TransactionStatus;
-};
-
-type Action =
-  | { type: "setInputs"; payload: Partial<FastBridgeState> }
-  | { type: "resetInputs" }
-  | { type: "setStatus"; payload: TransactionStatus };
-
-const buildInitialInputs = (
-  connectedAddress?: Address,
-  prefill?: {
-    token: string;
-    chainId: number;
-    amount?: string;
-    recipient?: Address;
-  },
-): FastBridgeState => {
-  const validToken =
-    prefill?.token &&
-      ALLOWED_TOKENS.has(prefill.token.toUpperCase() as SUPPORTED_TOKENS)
-      ? (prefill.token.toUpperCase() as SUPPORTED_TOKENS)
-      : config.nexusPrimaryToken || "USDC";
-
-  const validAmount = prefill?.amount
-    ? (() => {
-      const sanitized = prefill.amount.trim();
-      if (!sanitized || sanitized === "." || !/^\d*\.?\d*$/.test(sanitized))
-        return undefined;
-      const num = Number.parseFloat(sanitized);
-      return Number.isNaN(num) || num <= 0 || num > 1e9
-        ? undefined
-        : sanitized;
-    })()
-    : undefined;
-
-  const validRecipient =
-    prefill?.recipient && isAddress(prefill.recipient)
-      ? (prefill.recipient as `0x${string}`)
-      : connectedAddress;
-
-  return {
-    chain: config.chainId as SUPPORTED_CHAINS_IDS,
-    token: validToken as SUPPORTED_TOKENS,
-    amount: validAmount,
-    recipient: validRecipient,
-  };
-};
-
-const useBridge = ({
-  connectedAddress,
-  nexusSDK,
-  intent,
-  bridgableBalance,
-  prefill,
-  onComplete,
-  onStart,
-  onError,
-  fetchBalance,
-  allowance,
-}: UseBridgeProps) => {
-  const handleNexusError = useNexusError();
-  const initialState: BridgeState = {
-    inputs: buildInitialInputs(connectedAddress, prefill),
-    status: "idle",
-  };
-  function reducer(state: BridgeState, action: Action): BridgeState {
-    switch (action.type) {
-      case "setInputs":
-        return { ...state, inputs: { ...state.inputs, ...action.payload } };
-      case "resetInputs":
-        return {
-          ...state,
-          inputs: buildInitialInputs(connectedAddress, prefill),
-        };
-      case "setStatus":
-        return { ...state, status: action.payload };
-      default:
-        return state;
-    }
-  }
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const inputs = state.inputs;
-  const setInputs = (next: FastBridgeState | Partial<FastBridgeState>) => {
-    dispatch({ type: "setInputs", payload: next as Partial<FastBridgeState> });
-  };
-
-  const loading = state.status === "executing";
-  const [refreshing, setRefreshing] = useState(false);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [txError, setTxError] = useState<string | null>(null);
-  const [lastExplorerUrl, setLastExplorerUrl] = useState<string>("");
-  const commitLockRef = useRef<boolean>(false);
-  const txnIdRef = useRef(0);
-  const {
-    steps,
-    onStepsList,
-    onStepComplete,
-    reset: resetSteps,
-  } = useTransactionSteps<BridgeStepType>();
-
-  const areInputsValid = useMemo(() => {
-    const hasToken = inputs?.token !== undefined && inputs?.token !== null;
-    const hasChain = inputs?.chain !== undefined && inputs?.chain !== null;
-    const hasAmount = Boolean(inputs?.amount) && Number(inputs?.amount) > 0;
-    const hasValidrecipient =
-      Boolean(inputs?.recipient) && isAddress(inputs?.recipient as string);
-    return hasToken && hasChain && hasAmount && hasValidrecipient;
-  }, [inputs]);
-
-  const handleTransaction = async () => {
-    if (
-      !inputs?.amount ||
-      !inputs?.recipient ||
-      !inputs?.chain ||
-      !inputs?.token
-    ) {
-      console.error("Missing required inputs");
-      return;
-    }
-
-    if (Number(inputs.amount) > 550) {
-      setTxError("Amount exceeds maximum limit of 550");
-      return;
-    }
-    const currentTxnId = ++txnIdRef.current;
-    dispatch({ type: "setStatus", payload: "executing" });
-    setTxError(null);
-    onStart?.();
-
-    // Track bridge submit event with PostHog
-    trackBridgeSubmit({
-      chain: inputs.chain,
-      chainName: SHORT_CHAIN_NAME[inputs.chain] || `Chain ${inputs.chain}`,
-      tokenSymbol: inputs.token,
-      amount: inputs.amount,
-      fast_bridge: 'citrea',
-    });
-
-    try {
-      if (!nexusSDK) {
-        throw new Error("Nexus SDK not initialized");
-      }
-      const formattedAmount = nexusSDK.convertTokenReadableAmountToBigInt(
-        inputs?.amount,
-        inputs?.token,
-        inputs?.chain,
-      );
-      setLastExplorerUrl("");
-      const bridgeTxn = await nexusSDK.bridge(
-        {
-          token: inputs?.token,
-          amount: formattedAmount,
-          toChainId: inputs?.chain,
-          recipient: inputs?.recipient,
-        },
-        {
-          onEvent: (event) => {
-            if (currentTxnId !== txnIdRef.current) return;
-            if (event.name === NEXUS_EVENTS.STEPS_LIST) {
-              const list = Array.isArray(event.args) ? event.args : [];
-              onStepsList(list);
-            }
-            if (event.name === NEXUS_EVENTS.STEP_COMPLETE) {
-              console.log("STEP_EVENT", event);
-              if (event.args.type === "INTENT_HASH_SIGNED") {
-                stopwatch.start();
-              }
-              onStepComplete(event.args);
-            }
-          },
-        },
-      );
-      if (currentTxnId !== txnIdRef.current) return;
-
-      if (!bridgeTxn) {
-        throw new Error("Transaction rejected by user");
-      }
-      if (bridgeTxn) {
-        setLastExplorerUrl(bridgeTxn.explorerUrl);
-        await onSuccess();
-      }
-    } catch (error) {
-      if (currentTxnId !== txnIdRef.current) return;
-      const { message } = handleNexusError(error);
-      intent.current?.deny();
-      intent.current = null;
-      allowance.current = null;
-      setTxError(message);
-      onError?.(message);
-      setIsDialogOpen(false);
-      dispatch({ type: "setStatus", payload: "error" });
-    }
-  };
-
-  const onSuccess = async () => {
-    // Close dialog and stop timer on success
-    stopwatch.stop();
-    dispatch({ type: "setStatus", payload: "success" });
-    onComplete?.();
-    intent.current = null;
-    allowance.current = null;
-    dispatch({ type: "resetInputs" });
-    setRefreshing(false);
-    await fetchBalance();
-  };
-
-  const filteredBridgableBalance = useMemo(() => {
-    return bridgableBalance?.find((bal) => bal?.symbol === inputs?.token);
-  }, [bridgableBalance, inputs?.token]);
-
-  const refreshIntent = async () => {
-    setRefreshing(true);
-    try {
-      await intent.current?.refresh([]);
-    } catch (error) {
-      console.error("Transaction failed:", error);
-    } finally {
-      setRefreshing(false);
-    }
-  };
-
-  const reset = () => {
-    intent.current?.deny();
-    intent.current = null;
-    allowance.current = null;
-    dispatch({ type: "resetInputs" });
-    dispatch({ type: "setStatus", payload: "idle" });
-    setRefreshing(false);
-    stopwatch.stop();
-    stopwatch.reset();
-    resetSteps();
-  };
-
-  const startTransaction = () => {
-    // Reset timer for a fresh run
-    intent.current?.allow();
-    setIsDialogOpen(true);
-    setTxError(null);
-  };
-
-  const commitAmount = async () => {
-    if (commitLockRef.current) return;
-    if (loading || txError || !areInputsValid) return;
-
-    // Validate amount before proceeding
-    if (inputs?.amount) {
-      const amountStr = inputs.amount.trim();
-      if (!amountStr) return;
-
-      const amount = Number.parseFloat(amountStr);
-      if (Number.isNaN(amount) || amount <= 0) return;
-    }
-
-    commitLockRef.current = true;
-    try {
-      await handleTransaction();
-    } finally {
-      commitLockRef.current = false;
-    }
-  };
-
-  usePolling(Boolean(intent.current) && !isDialogOpen, refreshIntent, 15000);
-
-  const stopwatch = useStopwatch({ intervalMs: 100 });
-
-  useEffect(() => {
-    if (intent.current) {
-      // intent.current.deny();
-      intent.current = null;
-    }
-  }, [inputs]);
-
-  useEffect(() => {
-    if (!isDialogOpen) {
-      stopwatch.stop();
-      stopwatch.reset();
-      // Reset all transaction state when dialog closes
-      if (state.status === "success" || state.status === "error") {
-        resetSteps();
-        setLastExplorerUrl("");
-        dispatch({ type: "setStatus", payload: "idle" });
-      }
-    }
-  }, [isDialogOpen, stopwatch, state.status]);
-
-  useEffect(() => {
-    if (txError) {
-      setTxError(null);
-    }
-  }, [inputs]);
-
-  useEffect(() => {
-    if (connectedAddress && !inputs?.recipient) {
-      setInputs({ recipient: connectedAddress as `0x${string}` });
-    }
-  }, [connectedAddress, inputs?.recipient]);
-
-  return {
-    inputs,
-    setInputs,
-    timer: stopwatch.seconds,
-    setIsDialogOpen,
-    setTxError,
-    loading,
-    refreshing,
-    isDialogOpen,
-    txError,
-    handleTransaction,
-    reset,
-    filteredBridgableBalance,
-    startTransaction,
-    commitAmount,
-    lastExplorerUrl,
-    steps,
-    status: state.status,
-    areInputsValid,
-  };
-};
-
-export default useBridge;
diff --git a/apps/citrea/src/components/hero-section.tsx b/apps/citrea/src/components/hero-section.tsx
deleted file mode 100644
index 89ca4ff..0000000
--- a/apps/citrea/src/components/hero-section.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function HeroSection() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" style={{display: "none", width: "100%", marginLeft: "auto", marginRight: "auto", fontSize: "3em", fontWeight: "100"}}>
-      Bridge your unified USDC/USDT balances across 12+ chains, to Avalanche, instantly!
-    </div>
-  );
-}
diff --git a/apps/citrea/src/components/nexus/NexusProvider.tsx b/apps/citrea/src/components/nexus/NexusProvider.tsx
deleted file mode 100644
index 8fde99e..0000000
--- a/apps/citrea/src/components/nexus/NexusProvider.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-"use client";
-import {
-  type EthereumProvider,
-  type NexusNetwork,
-  NexusSDK,
-  type OnAllowanceHookData,
-  type OnIntentHookData,
-  type OnSwapIntentHookData,
-  type SupportedChainsAndTokensResult,
-  type SupportedChainsResult,
-  type UserAsset,
-} from "@avail-project/nexus-core";
-
-import {
-  createContext,
-  type RefObject,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useAccountEffect } from "wagmi";
-
-interface NexusContextType {
-  nexusSDK: NexusSDK | null;
-  bridgableBalance: UserAsset[] | null;
-  swapBalance: UserAsset[] | null;
-  intent: RefObject<OnIntentHookData | null>;
-  allowance: RefObject<OnAllowanceHookData | null>;
-  swapIntent: RefObject<OnSwapIntentHookData | null>;
-  exchangeRate: Record<string, number> | null;
-  supportedChainsAndTokens: SupportedChainsAndTokensResult | null;
-  swapSupportedChainsAndTokens: SupportedChainsResult | null;
-  network?: NexusNetwork;
-  loading: boolean;
-  handleInit: (provider: EthereumProvider) => Promise<void>;
-  fetchBridgableBalance: () => Promise<void>;
-  fetchSwapBalance: () => Promise<void>;
-  getFiatValue: (amount: number, token: string) => number;
-  initializeNexus: (provider: EthereumProvider) => Promise<void>;
-  deinitializeNexus: () => Promise<void>;
-  attachEventHooks: () => void;
-  setIntent: (data: OnIntentHookData | null) => void;
-  setAllowance: (data: OnAllowanceHookData | null) => void;
-}
-
-const NexusContext = createContext<NexusContextType | undefined>(undefined);
-
-type NexusProviderProps = {
-  children: React.ReactNode;
-  config?: {
-    network?: NexusNetwork;
-    debug?: boolean;
-  };
-};
-
-const defaultConfig: Required<NexusProviderProps["config"]> = {
-  network: "mainnet",
-  debug: false,
-};
-
-const NexusProvider = ({
-  children,
-  config = defaultConfig,
-}: NexusProviderProps) => {
-  const stableConfig = useMemo(
-    () => ({ ...defaultConfig, ...config }),
-    [config],
-  );
-
-  const sdkRef = useRef<NexusSDK | null>(null);
-  sdkRef.current ??= new NexusSDK({
-    ...stableConfig,
-  });
-  const sdk = sdkRef.current;
-
-  const [nexusSDK, setNexusSDK] = useState<NexusSDK | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [supportedChainsAndTokens, setSupportedChainsAndTokens] =
-    useState<SupportedChainsAndTokensResult | null>(
-      sdk.utils.getSupportedChains(
-        stableConfig.network === "testnet" ? 0 : undefined,
-      ) ?? null,
-    );
-  const [swapSupportedChainsAndTokens, setSwapSupportedChainsAndTokens] =
-    useState<SupportedChainsResult | null>(
-      sdk.utils.getSwapSupportedChainsAndTokens() ?? null,
-    );
-  const [bridgableBalance, setBridgableBalance] = useState<UserAsset[] | null>(
-    null,
-  );
-  const [swapBalance, setSwapBalance] = useState<UserAsset[] | null>(null);
-  const exchangeRate = useRef<Record<string, number> | null>(null);
-
-  const intent = useRef<OnIntentHookData | null>(null);
-  const allowance = useRef<OnAllowanceHookData | null>(null);
-  const swapIntent = useRef<OnSwapIntentHookData | null>(null);
-
-  useEffect(() => {
-    const list = sdk.utils.getSupportedChains(
-      stableConfig.network === "testnet" ? 0 : undefined,
-    );
-    setSupportedChainsAndTokens(list ?? null);
-    const swapList = sdk.utils.getSwapSupportedChainsAndTokens();
-    setSwapSupportedChainsAndTokens(swapList ?? null);
-  }, [sdk, stableConfig.network]);
-
-  const setupNexus = useCallback(async () => {
-    const list = sdk.utils.getSupportedChains(
-      stableConfig.network === "testnet" ? 0 : undefined,
-    );
-    setSupportedChainsAndTokens(list ?? null);
-    const swapList = sdk.utils.getSwapSupportedChainsAndTokens();
-    setSwapSupportedChainsAndTokens(swapList ?? null);
-    const [bridgeAbleBalanceResult, rates] = await Promise.allSettled([
-      sdk.getBalancesForBridge(),
-      sdk.utils.getCoinbaseRates(),
-    ]);
-    console.log("bridgeAbleBalanceResult", bridgeAbleBalanceResult);
-
-    if (bridgeAbleBalanceResult.status === "fulfilled") {
-      setBridgableBalance(bridgeAbleBalanceResult.value);
-    }
-
-    if (rates?.status === "fulfilled") {
-      // Coinbase returns "units per USD" (e.g., 1 USD = 0.00028 ETH).
-      // Convert to "USD per unit" (e.g., 1 ETH = ~$3514) for straightforward UI calculations.
-      const usdPerUnit: Record<string, number> = {};
-
-      for (const [symbol, value] of Object.entries(rates.value)) {
-        const unitsPerUsd = Number.parseFloat(String(value));
-        if (Number.isFinite(unitsPerUsd) && unitsPerUsd > 0) {
-          usdPerUnit[symbol.toUpperCase()] = 1 / unitsPerUsd;
-        }
-      }
-      exchangeRate.current = usdPerUnit;
-    }
-  }, [sdk, stableConfig.network]);
-
-  const initializeNexus = async (provider: EthereumProvider) => {
-    setLoading(true);
-    try {
-      if (sdk.isInitialized()) throw new Error("Nexus is already initialized");
-      await sdk.initialize(provider);
-      setNexusSDK(sdk);
-    } catch (error) {
-      console.error("Error initializing Nexus:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const deinitializeNexus = async () => {
-    try {
-      if (!nexusSDK) return;
-      await nexusSDK.deinit();
-      setNexusSDK(null);
-      setBridgableBalance(null);
-      setSwapBalance(null);
-      exchangeRate.current = null;
-      intent.current = null;
-      swapIntent.current = null;
-      allowance.current = null;
-      setLoading(false);
-    } catch (error) {
-      console.error("Error deinitializing Nexus:", error);
-    }
-  };
-
-  const attachEventHooks = () => {
-    sdk.setOnAllowanceHook((data: OnAllowanceHookData) => {
-      /**
-       * Useful when you want the user to select, min, max or a custom value
-       * Can use this to capture data and then show it on the UI
-       * @see - always call data.allow() to progress the flow, otherwise it will stay stuck here.
-       * const {allow, sources, deny} = data
-       * @example allow(['min', 'max', '0.5']), the array in allow function should match number of sources.
-       * You can skip setting this hook if you want, sdk will auto progress if this hook is not attached
-       */
-      allowance.current = data;
-    });
-
-    sdk.setOnIntentHook((data: OnIntentHookData) => {
-      /**
-       * Useful when you want to capture the intent, and display it on the UI (bridge, bridgeAndTransfer, bridgeAndExecute)
-       * const {allow, deny, intent, refresh} = data
-       * @see - always call data.allow() to progress the flow, otherwise it will stay stuck here.
-       * deny() to reject the intent
-       * refresh() to refresh the intent, best to call refresh in 15 second intervals
-       * data.intent -> details about the intent, useful when wanting to display info on UI
-       * You can skip setting this hook if you want, sdk will auto progress if this hook is not attached
-       */
-      intent.current = data;
-    });
-
-    sdk.setOnSwapIntentHook((data: OnSwapIntentHookData) => {
-      /**
-       * Same behaviour and function as setOnIntentHook, except this one is for swaps exclusively
-       */
-      swapIntent.current = data;
-    });
-  };
-
-  const handleInit = async (provider: EthereumProvider) => {
-    console.log("[NexusProvider] handleInit called");
-    console.log("[NexusProvider] SDK isInitialized:", sdk.isInitialized());
-    console.log("[NexusProvider] Loading:", loading);
-
-    if (sdk.isInitialized() || loading) {
-      console.log(
-        "[NexusProvider] Skipping init - already initialized or loading",
-      );
-      return;
-    }
-
-    if (!provider || typeof provider.request !== "function") {
-      console.error("[NexusProvider] Invalid provider:", provider);
-      throw new Error("Invalid EIP-1193 provider");
-    }
-
-    console.log("[NexusProvider] Calling initializeNexus...");
-    await initializeNexus(provider);
-
-    console.log("[NexusProvider] Calling setupNexus...");
-    await setupNexus();
-
-    console.log("[NexusProvider] Calling attachEventHooks...");
-    attachEventHooks();
-
-    console.log("[NexusProvider] handleInit complete!");
-  };
-
-  const fetchBridgableBalance = async () => {
-    try {
-      const updatedBalance = await sdk.getBalancesForBridge();
-      console.log("bridgeAbleBalanceResult", updatedBalance);
-      setBridgableBalance(updatedBalance);
-    } catch (error) {
-      console.error("Error fetching bridgable balance:", error);
-    }
-  };
-
-  const fetchSwapBalance = async () => {
-    try {
-      const updatedBalance = await sdk.getBalancesForSwap();
-      console.log("swapBalance", updatedBalance);
-      setSwapBalance(updatedBalance);
-    } catch (error) {
-      console.error("Error fetching swap balance:", error);
-    }
-  };
-
-  function getFiatValue(amount: number, token: string) {
-    const key = token.toUpperCase();
-    const rate = exchangeRate.current?.[key] ?? 1;
-    return rate * amount;
-  }
-
-  useAccountEffect({
-    onDisconnect() {
-      deinitializeNexus();
-    },
-  });
-
-  const setIntent = (data: OnIntentHookData | null) => {
-    intent.current = data;
-  };
-
-  const setAllowance = (data: OnAllowanceHookData | null) => {
-    allowance.current = data;
-  };
-
-  const value = useMemo(
-    () => ({
-      nexusSDK,
-      initializeNexus,
-      deinitializeNexus,
-      attachEventHooks,
-      intent,
-      allowance,
-      handleInit,
-      supportedChainsAndTokens,
-      swapSupportedChainsAndTokens,
-      bridgableBalance,
-      swapBalance: swapBalance,
-      network: config?.network,
-      loading,
-      fetchBridgableBalance,
-      fetchSwapBalance,
-      swapIntent,
-      exchangeRate: exchangeRate.current,
-      getFiatValue,
-      setIntent,
-      setAllowance,
-    }),
-    [
-      nexusSDK,
-      initializeNexus,
-      deinitializeNexus,
-      attachEventHooks,
-      handleInit,
-      swapBalance,
-      config,
-      loading,
-      fetchBridgableBalance,
-      fetchSwapBalance,
-      setIntent,
-      setAllowance,
-      supportedChainsAndTokens,
-      swapSupportedChainsAndTokens,
-    ],
-  );
-  return (
-    <NexusContext.Provider value={value}>{children}</NexusContext.Provider>
-  );
-};
-
-export function useNexus() {
-  const context = useContext(NexusContext);
-  if (!context) {
-    throw new Error("useNexus must be used within a NexusProvider");
-  }
-  return context;
-}
-
-export default NexusProvider;
diff --git a/apps/citrea/src/components/nexus/useNexus.ts b/apps/citrea/src/components/nexus/useNexus.ts
deleted file mode 100644
index 2dcd3f9..0000000
--- a/apps/citrea/src/components/nexus/useNexus.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { NexusContext } from "./NexusProvider";
-
-export function useNexus() {
-  const context = useContext(NexusContext);
-  if (!context) {
-    throw new Error("useNexus must be used within a NexusProvider");
-  }
-  return context;
-}
diff --git a/apps/citrea/src/components/ui/accordion.tsx b/apps/citrea/src/components/ui/accordion.tsx
deleted file mode 100644
index 75b4f79..0000000
--- a/apps/citrea/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  hideChevron = true,
-  containerClassName = "w-full",
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
-  hideChevron?: boolean;
-  containerClassName?: string;
-}) {
-  return (
-    <AccordionPrimitive.Header className={cn("flex", containerClassName)}>
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {!hideChevron && (
-          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-        )}
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/citrea/src/components/ui/badge.tsx b/apps/citrea/src/components/ui/badge.tsx
deleted file mode 100644
index fd3a406..0000000
--- a/apps/citrea/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
diff --git a/apps/citrea/src/components/ui/button.tsx b/apps/citrea/src/components/ui/button.tsx
deleted file mode 100644
index 71ab81f..0000000
--- a/apps/citrea/src/components/ui/button.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
diff --git a/apps/citrea/src/components/ui/card.tsx b/apps/citrea/src/components/ui/card.tsx
deleted file mode 100644
index d05bbc6..0000000
--- a/apps/citrea/src/components/ui/card.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
diff --git a/apps/citrea/src/components/ui/dialog.tsx b/apps/citrea/src/components/ui/dialog.tsx
deleted file mode 100644
index d9ccec9..0000000
--- a/apps/citrea/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
diff --git a/apps/citrea/src/components/ui/input.tsx b/apps/citrea/src/components/ui/input.tsx
deleted file mode 100644
index 0316cc4..0000000
--- a/apps/citrea/src/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };
diff --git a/apps/citrea/src/components/ui/label.tsx b/apps/citrea/src/components/ui/label.tsx
deleted file mode 100644
index fb5fbc3..0000000
--- a/apps/citrea/src/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/apps/citrea/src/components/ui/select.tsx b/apps/citrea/src/components/ui/select.tsx
deleted file mode 100644
index 91c5bdf..0000000
--- a/apps/citrea/src/components/ui/select.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};
diff --git a/apps/citrea/src/components/ui/separator.tsx b/apps/citrea/src/components/ui/separator.tsx
deleted file mode 100644
index be47ba4..0000000
--- a/apps/citrea/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Separator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="separator"
-      role="separator"
-      className={cn("bg-border my-2 h-px w-full", className)}
-      {...props}
-    />
-  );
-}
-
-export { Separator };
diff --git a/apps/citrea/src/components/ui/skeleton.tsx b/apps/citrea/src/components/ui/skeleton.tsx
deleted file mode 100644
index 32ea0ef..0000000
--- a/apps/citrea/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/apps/citrea/src/components/ui/tooltip.tsx b/apps/citrea/src/components/ui/tooltip.tsx
deleted file mode 100644
index 99aefa0..0000000
--- a/apps/citrea/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/citrea/src/components/view-history/hooks/useViewHistory.ts b/apps/citrea/src/components/view-history/hooks/useViewHistory.ts
deleted file mode 100644
index ea4cece..0000000
--- a/apps/citrea/src/components/view-history/hooks/useViewHistory.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { type RFF } from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-import { useCallback, useEffect, useState } from "react";
-
-const ITEMS_PER_PAGE = 10;
-
-function formatExpiryDate(timestamp: number) {
-  const date = new Date(timestamp * 1000);
-  const formatted = date.toLocaleString("en-US", {
-    month: "short",
-    day: "2-digit",
-    year: "numeric",
-  });
-  return formatted.replace(" ", ", ");
-}
-
-const useViewHistory = () => {
-  const { nexusSDK } = useNexus();
-  const [history, setHistory] = useState<RFF[] | null>(null);
-  const [displayedHistory, setDisplayedHistory] = useState<RFF[]>([]);
-  const [page, setPage] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [sentinelNode, setSentinelNode] = useState<HTMLDivElement | null>(null);
-
-  const observerTarget = useCallback((node: HTMLDivElement | null) => {
-    setSentinelNode(node);
-  }, []);
-
-  const fetchIntentHistory = useCallback(async () => {
-    if (!nexusSDK) return;
-
-    try {
-      const fetchedHistory = await nexusSDK.getMyIntents();
-      const normalizedHistory = fetchedHistory ?? [];
-
-      setHistory(normalizedHistory);
-      setDisplayedHistory(normalizedHistory.slice(0, ITEMS_PER_PAGE));
-      setPage(0);
-      setHasMore(normalizedHistory.length > ITEMS_PER_PAGE);
-      setIsLoadingMore(false);
-    } catch (error) {
-      console.error("Error fetching intent history:", error);
-    }
-  }, [nexusSDK]);
-
-  useEffect(() => {
-    if (!history) {
-      void fetchIntentHistory();
-    }
-  }, [history, fetchIntentHistory]);
-
-  const loadMore = useCallback(() => {
-    if (!history || isLoadingMore || !hasMore) return;
-    setIsLoadingMore(true);
-
-    setTimeout(() => {
-      const nextPage = page + 1;
-      const startIndex = nextPage * ITEMS_PER_PAGE;
-      const endIndex = startIndex + ITEMS_PER_PAGE;
-      const newItems = history.slice(startIndex, endIndex);
-
-      if (newItems.length > 0) {
-        setDisplayedHistory((prev) => [...prev, ...newItems]);
-        setPage(nextPage);
-        setHasMore(endIndex < history.length);
-      } else {
-        setHasMore(false);
-      }
-
-      setIsLoadingMore(false);
-    }, 300);
-  }, [history, page, isLoadingMore, hasMore]);
-
-  useEffect(() => {
-    if (!sentinelNode) {
-      return;
-    }
-
-    const rootElement = sentinelNode.parentElement;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
-          loadMore();
-        }
-      },
-      { threshold: 0.1, root: rootElement ?? null },
-    );
-
-    observer.observe(sentinelNode);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [sentinelNode, loadMore, hasMore, isLoadingMore, displayedHistory.length]);
-
-  const getStatus = (pastIntent: RFF) => {
-    if (pastIntent?.fulfilled) {
-      return "Fulfilled";
-    } else if (pastIntent?.deposited) {
-      return "Deposited";
-    } else if (pastIntent?.refunded) {
-      return "Refunded";
-    } else {
-      return "Failed";
-    }
-  };
-
-  return {
-    history,
-    displayedHistory,
-    page,
-    hasMore,
-    isLoadingMore,
-    getStatus,
-    observerTarget,
-    ITEMS_PER_PAGE,
-    formatExpiryDate,
-    fetchIntentHistory,
-  };
-};
-
-export default useViewHistory;
diff --git a/apps/citrea/src/components/walletConnect.tsx b/apps/citrea/src/components/walletConnect.tsx
deleted file mode 100644
index 2dcb18f..0000000
--- a/apps/citrea/src/components/walletConnect.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-"use client";
-import * as React from "react";
-import type { EthereumProvider } from "@avail-project/nexus-core";
-import { useAccount } from "wagmi";
-import { useNexus } from "./nexus/NexusProvider";
-import { toast } from "sonner";
-
-interface PreviewPanelProps {
-  children: React.ReactNode;
-}
-
-export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
-  const [loading, setLoading] = React.useState(false);
-  const [initError, setInitError] = React.useState<string | null>(null);
-  const { status, connector, address } = useAccount();
-  const { nexusSDK, handleInit, deinitializeNexus, setIntent, setAllowance } =
-    useNexus();
-  const prevAddressRef = React.useRef<string | undefined>(address);
-
-  const initializeNexus = React.useCallback(async () => {
-    if (loading || nexusSDK) return; // Prevent multiple calls
-
-    console.log("[Nexus Init] Starting initialization...");
-    console.log("[Nexus Init] Connector:", connector);
-    console.log("[Nexus Init] Connector name:", connector?.name);
-    console.log("[Nexus Init] Connector type:", connector?.type);
-
-    setLoading(true);
-    setInitError(null);
-
-    // Create a timeout promise
-    const timeoutPromise = new Promise((_, reject) => {
-      setTimeout(() => {
-        reject(new Error("Nexus initialization timed out after 30 seconds"));
-      }, 30000); // 30 second timeout
-    });
-
-    try {
-      if (!connector) {
-        throw new Error("No connector available");
-      }
-
-      console.log("[Nexus Init] Getting provider from connector...");
-      const provider = (await connector.getProvider()) as EthereumProvider;
-
-      console.log("[Nexus Init] Provider:", provider);
-      console.log("[Nexus Init] Provider type:", typeof provider);
-      console.log(
-        "[Nexus Init] Provider has request:",
-        typeof provider?.request === "function",
-      );
-
-      if (!provider) {
-        throw new Error("No provider available from connector");
-      }
-
-      if (typeof provider.request !== "function") {
-        throw new Error(
-          "Provider does not have a request method (not EIP-1193 compliant)",
-        );
-      }
-
-      console.log("[Nexus Init] Provider validated, calling handleInit...");
-
-      // Race between initialization and timeout
-      await Promise.race([handleInit(provider), timeoutPromise]);
-
-      console.log("[Nexus Init] Initialization successful!");
-    } catch (error) {
-      console.error("[Nexus Init] Initialization failed:", error);
-      const errorMessage = (error as Error)?.message || "Unknown error";
-      setInitError(errorMessage);
-      toast.error(`Failed to initialize Nexus: ${errorMessage}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [connector, handleInit, loading, nexusSDK]);
-
-  // Handle wallet disconnection - clear Nexus state and balances
-  React.useEffect(() => {
-    if (status === "disconnected" && nexusSDK) {
-      deinitializeNexus();
-      setIntent(null);
-      setAllowance(null);
-      prevAddressRef.current = undefined;
-    }
-    if (status === "disconnected") {
-      setInitError(null);
-    }
-  }, [status, nexusSDK, deinitializeNexus, setIntent, setAllowance]);
-
-  // Handle account change - reinitialize Nexus when account address changes
-  React.useEffect(() => {
-    if (
-      status === "connected" &&
-      address &&
-      address !== prevAddressRef.current
-    ) {
-      const previousAddress = prevAddressRef.current;
-      const currentAddress = address;
-      prevAddressRef.current = address;
-
-      // If account changed and Nexus is initialized, reinitialize with new account
-      if (nexusSDK && previousAddress !== undefined) {
-        // Account changed - deinitialize and reinitialize
-        deinitializeNexus().then(() => {
-          // Small delay to ensure deinit completes, then reinitialize
-          setTimeout(() => {
-            // Check if still connected and address hasn't changed again
-            if (
-              currentAddress === prevAddressRef.current &&
-              !loading &&
-              !initError
-            ) {
-              initializeNexus();
-            }
-          }, 100);
-        });
-      }
-    } else if (status === "connected" && address && !prevAddressRef.current) {
-      // First connection - set the address
-      prevAddressRef.current = address;
-    }
-  }, [
-    status,
-    nexusSDK,
-    address,
-    initError,
-    initializeNexus,
-    deinitializeNexus,
-    loading,
-  ]);
-
-  // Auto-initialize Nexus when wallet is connected and address is available
-  React.useEffect(() => {
-    if (
-      status === "connected" &&
-      !nexusSDK &&
-      !loading &&
-      !initError &&
-      address &&
-      connector
-    ) {
-      initializeNexus();
-    }
-  }, [
-    status,
-    nexusSDK,
-    initError,
-    address,
-    connector,
-    initializeNexus,
-    loading,
-  ]);
-
-  return (
-    <div className="flex items-center justify-center min-h-[400px] relative">
-      {children}
-    </div>
-  );
-}
diff --git a/apps/citrea/src/index.css b/apps/citrea/src/index.css
deleted file mode 100644
index 6a02ea1..0000000
--- a/apps/citrea/src/index.css
+++ /dev/null
@@ -1,152 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-body,
-#root {
-  height: 100svh;
-  width: 100svw;
-  overflow-x: hidden;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  /* button {
-    background-color: #f9f9f9;
-  } */
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/apps/citrea/src/lib/button-variants.ts b/apps/citrea/src/lib/button-variants.ts
deleted file mode 100644
index d87142c..0000000
--- a/apps/citrea/src/lib/button-variants.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { cva } from "class-variance-authority";
-
-const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export { buttonVariants };
diff --git a/apps/citrea/src/lib/posthog.ts b/apps/citrea/src/lib/posthog.ts
deleted file mode 100644
index aa51bd9..0000000
--- a/apps/citrea/src/lib/posthog.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import posthog from 'posthog-js';
-
-const DEFAULT_POSTHOG_KEY = 'phc_UD6lQU3PEw1d8oo8E17rJLmRAR7kxJbQ5OseHuCvi7N';
-const DEFAULT_POSTHOG_HOST = 'https://us.i.posthog.com';
-
-let isInitialized = false;
-
-/**
- * Initialize PostHog analytics
- */
-export function initPostHog(options?: {
-    apiKey?: string;
-    apiHost?: string;
-    debug?: boolean;
-}): void {
-    if (isInitialized) return;
-
-    const apiKey = options?.apiKey || DEFAULT_POSTHOG_KEY;
-    const apiHost = options?.apiHost || DEFAULT_POSTHOG_HOST;
-    const debug = options?.debug ?? true; // Always enable debug for troubleshooting
-
-    console.log('[PostHog] Initializing with host:', apiHost);
-
-    posthog.init(apiKey, {
-        api_host: apiHost,
-        person_profiles: 'identified_only',
-        autocapture: false,
-        capture_pageview: false,
-        capture_pageleave: true,
-        persistence: 'localStorage', // Use localStorage for persistence
-        loaded: (ph) => {
-            console.log('[PostHog] Loaded successfully');
-            if (debug) {
-                ph.debug();
-            }
-        },
-    });
-
-    isInitialized = true;
-}
-
-/**
- * Capture a bridge submit event
- */
-export interface BridgeSubmitEventProperties {
-    chain: string | number;
-    chainName: string;
-    tokenSymbol: string;
-    amount: string;
-    fast_bridge: 'megaeth' | 'citrea' | 'monad';
-}
-
-export function trackBridgeSubmit(properties: BridgeSubmitEventProperties): void {
-    if (!isInitialized) {
-        console.warn('[PostHog] Not initialized, initializing now...');
-        initPostHog();
-    }
-
-    console.log('[PostHog] Capturing event: nexus_fast_bridge_demo_submit', properties);
-    posthog.capture('nexus_fast_bridge_demo_submit', properties);
-}
-
-/**
- * Generic capture wrapper
- */
-export function capture(event: string, properties?: Record<string, unknown>): void {
-    if (!isInitialized) {
-        console.warn('[PostHog] Not initialized, initializing now...');
-        initPostHog();
-    }
-
-    console.log('[PostHog] Capturing event:', event, properties);
-    posthog.capture(event, properties);
-}
-
-export { posthog };
diff --git a/apps/citrea/src/lib/url-params.ts b/apps/citrea/src/lib/url-params.ts
deleted file mode 100644
index 2fb5962..0000000
--- a/apps/citrea/src/lib/url-params.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { type SUPPORTED_CHAINS_IDS, type SUPPORTED_TOKENS } from "@avail-project/nexus-core";
-import { isAddress } from "viem";
-
-const ALLOWED_TOKENS = new Set(["USDC", "USDT"]) as Set<SUPPORTED_TOKENS>;
-const FILTERED_CHAIN_ID = 728126428;
-
-interface BridgeParams {
-  to?: SUPPORTED_CHAINS_IDS;
-  token?: SUPPORTED_TOKENS;
-  recipient?: `0x${string}`;
-  amount?: string;
-}
-
-function isValidToken(token: string | null): token is SUPPORTED_TOKENS {
-  if (!token) return false;
-  const upperToken = token.toUpperCase().trim();
-  return ALLOWED_TOKENS.has(upperToken as SUPPORTED_TOKENS);
-}
-
-function isValidChain(chainStr: string | null): boolean {
-  if (!chainStr) return false;
-  const chainId = Number.parseInt(chainStr, 10);
-  if (!Number.isInteger(chainId) || chainId <= 0 || chainId > Number.MAX_SAFE_INTEGER) return false;
-  if (chainId === FILTERED_CHAIN_ID) return false;
-  return true;
-}
-
-function sanitizeAmount(amount: string | null): string | undefined {
-  if (!amount) return undefined;
-  const sanitized = amount.trim();
-  if (sanitized === "" || sanitized === ".") return undefined;
-  if (!/^\d*\.?\d*$/.test(sanitized)) return undefined;
-  const num = Number.parseFloat(sanitized);
-  if (Number.isNaN(num) || num <= 0) return undefined;
-  if (num > 1e9) return undefined;
-  return sanitized;
-}
-
-export function readBridgeParams(): BridgeParams {
-  const params = new URLSearchParams(window.location.search);
-  const toStr = params.get("to");
-  const tokenStr = params.get("token");
-  const recipient = params.get("recipient");
-  const amountStr = params.get("amount");
-
-  const to = toStr && toStr !== "self" && isValidChain(toStr) ? (Number.parseInt(toStr, 10) as SUPPORTED_CHAINS_IDS) : undefined;
-  const token = isValidToken(tokenStr) ? (tokenStr!.toUpperCase() as SUPPORTED_TOKENS) : undefined;
-  const sanitizedAmount = sanitizeAmount(amountStr);
-  const recipientAddress = recipient && isAddress(recipient) ? recipient : undefined;
-
-  return {
-    to,
-    token,
-    recipient: recipientAddress,
-    amount: sanitizedAmount,
-  };
-}
-
-export function writeBridgeParams(params: BridgeParams): void {
-  const url = new URL(window.location.href);
-
-  url.searchParams.delete("to");
-  url.searchParams.delete("token");
-  url.searchParams.delete("recipient");
-  url.searchParams.delete("amount");
-
-  if (params.to && isValidChain(String(params.to))) {
-    url.searchParams.set("to", String(params.to));
-  }
-  if (params.token && ALLOWED_TOKENS.has(params.token)) {
-    url.searchParams.set("token", params.token);
-  }
-  if (params.recipient && isAddress(params.recipient)) {
-    url.searchParams.set("recipient", params.recipient);
-  }
-  const sanitizedAmount = sanitizeAmount(params.amount ?? null);
-  if (sanitizedAmount) {
-    url.searchParams.set("amount", sanitizedAmount);
-  }
-
-  window.history.replaceState({}, "", url.toString());
-}
diff --git a/apps/citrea/src/lib/utils.ts b/apps/citrea/src/lib/utils.ts
deleted file mode 100644
index f9923e8..0000000
--- a/apps/citrea/src/lib/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_BASE_URL}${path}`;
-}
diff --git a/apps/citrea/src/main.tsx b/apps/citrea/src/main.tsx
index e98387c..0802495 100644
--- a/apps/citrea/src/main.tsx
+++ b/apps/citrea/src/main.tsx
@@ -1,46 +1,3 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import { initPostHog } from "./lib/posthog";
+import { bootstrapApp } from "@/bootstrap";
 
-// Initialize PostHog analytics
-initPostHog();
-
-// Clean up WalletConnect IndexedDB before app loads to prevent structure errors
-const cleanupWalletConnectSubscription = () => {
-  try {
-    const dbName = "WALLET_CONNECT_V2_INDEXED_DB";
-
-    // Delete the entire database to prevent structure errors
-    const deleteRequest = indexedDB.deleteDatabase(dbName);
-
-    deleteRequest.onsuccess = () => {
-      console.log(
-        "[WalletConnect] Database deleted successfully, will be recreated fresh",
-      );
-    };
-
-    deleteRequest.onerror = () => {
-      console.debug(
-        "[WalletConnect] Database deletion failed or DB doesn't exist",
-      );
-    };
-
-    deleteRequest.onblocked = () => {
-      console.debug("[WalletConnect] Database deletion blocked, may be in use");
-    };
-  } catch (error) {
-    // Ignore errors - this is a cleanup operation
-    console.debug("[WalletConnect] Cleanup skipped:", error);
-  }
-};
-
-// Run cleanup before rendering
-cleanupWalletConnectSubscription();
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+bootstrapApp();
diff --git a/apps/citrea/src/providers/web3Provider.tsx b/apps/citrea/src/providers/web3Provider.tsx
deleted file mode 100644
index f913430..0000000
--- a/apps/citrea/src/providers/web3Provider.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import React from "react";
-import { ConnectKitProvider, getDefaultConfig } from "connectkit";
-import { WagmiProvider, createConfig, http } from "wagmi";
-import {
-  mainnet,
-  scroll,
-  polygon,
-  optimism,
-  arbitrum,
-  base,
-  avalanche,
-  sophon,
-  kaia,
-  monad,
-  type Chain,
-} from "wagmi/chains";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import config from "../../config";
-
-const walletConnectProjectId = import.meta.env.VITE_WALLET_CONNECT_ID;
-
-const chain: Chain = {
-  id: config.chainId,
-  name: config.chainName,
-  nativeCurrency: {
-    name: config.chainNativeCurrency.name,
-    symbol: config.chainNativeCurrency.symbol,
-    decimals: config.chainNativeCurrency.decimals,
-  },
-  rpcUrls: {
-    default: { http: [config.chainRpcUrl] },
-  },
-  blockExplorers: {
-    default: { name: "Explorer", url: config.chainBlockExplorerUrl },
-  },
-  testnet: config.chainTestnet,
-};
-
-const megaeth: Chain = {
-  id: 4326,
-  name: "MegaETH Mainnet",
-  nativeCurrency: {
-    name: "Ether",
-    symbol: "ETH",
-    decimals: 18,
-  },
-  rpcUrls: {
-    default: { http: [import.meta.env.VITE_MEGAETH_RPC] },
-  },
-  blockExplorers: {
-    default: { name: "Explorer", url: "https://megaeth.blockscout.com" },
-  },
-  testnet: false,
-};
-
-//ideally we should add private rpcs for each, for now it fallbacks to default rpcs
-const transports = {
-  [mainnet.id]: http(import.meta.env.VITE_MAINNET_RPC),
-  [base.id]: http(import.meta.env.VITE_BASE_RPC),
-  [arbitrum.id]: http(import.meta.env.VITE_ARBITRUM_RPC),
-  [optimism.id]: http(import.meta.env.VITE_OPTIMISM_RPC),
-  [polygon.id]: http(import.meta.env.VITE_POLYGON_RPC),
-  [scroll.id]: http(import.meta.env.VITE_SCROLL_RPC),
-  [avalanche.id]: http(import.meta.env.VITE_AVALANCHE_RPC),
-  [sophon.id]: http(import.meta.env.VITE_SOPHON_RPC),
-  [kaia.id]: http(import.meta.env.VITE_KAIA_RPC),
-  [chain.id]: http(config.chainRpcUrl),
-  [monad.id]: http(import.meta.env.VITE_MONAD_RPC),
-  [megaeth.id]: http(import.meta.env.VITE_MEGAETH_RPC),
-};
-
-const defaultConfigParams = getDefaultConfig({
-  appName: config.appTitle ?? "Nexus Elements",
-  walletConnectProjectId,
-  chains: [
-    chain,
-    mainnet,
-    base,
-    sophon,
-    kaia,
-    arbitrum,
-    avalanche,
-    optimism,
-    polygon,
-    scroll,
-    monad,
-    megaeth,
-  ],
-  transports,
-  enableFamily: false,
-});
-
-const wagmiConfig = createConfig(defaultConfigParams);
-const queryClient = new QueryClient();
-
-const Web3Provider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <ConnectKitProvider theme="minimal">{children}</ConnectKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
-  );
-};
-
-export default Web3Provider;
diff --git a/apps/citrea/src/runtime.ts b/apps/citrea/src/runtime.ts
new file mode 100644
index 0000000..b03b1ac
--- /dev/null
+++ b/apps/citrea/src/runtime.ts
@@ -0,0 +1,35 @@
+import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
+import type { ChainFeatures } from "@/types/runtime";
+import config from "../config";
+
+export const appConfig = config;
+
+export const chainFeatures: ChainFeatures = {
+  slug: "citrea",
+  analyticsFastBridgeKey: "citrea",
+  maxBridgeAmount: 550,
+  walletInitDelayMs: 0,
+  showFluffeyMascot: false,
+  showPromoBanner: false,
+  pageDescription:
+    "Bridge USDC to Citrea instantly with Avail Fast Bridge. Leveraging Avail Nexus infrastructure, we provide a secure, decentralized path to move liquidity from 12+ chains including Ethereum and major L2s directly to Citrea.",
+  mapUsdmDisplaySymbolToUsdc: false,
+  mapUsdmToUsdcBalance: false,
+  tokenLogoOverrideBySymbol: {
+    USDM: "https://raw.githubusercontent.com/availproject/nexus-assets/refs/heads/main/tokens/usdm/logo.png",
+  },
+  denyIntentOnReset: true,
+  tokenDenyListByChainId: {
+    [SUPPORTED_CHAINS.CITREA]: ["cBTC"],
+  },
+  allowanceLogoOverrideByChainId: {
+    [SUPPORTED_CHAINS.CITREA]: "/citrea-chain-logo.webp",
+  },
+  amountInputUseCalculatedMaxHeader: false,
+  amountInputShowDestinationBadge: false,
+  amountInputUseSourceSymbolInBreakdown: false,
+  hideMegaethSourceForUsdm: true,
+  feeBreakdownHideGasSupplied: false,
+  feeBreakdownKeepZeroRows: false,
+  dialogShowCloseButton: true,
+};
diff --git a/apps/citrea/src/vite-env.d.ts b/apps/citrea/src/vite-env.d.ts
index 04436df..1a8b0eb 100644
--- a/apps/citrea/src/vite-env.d.ts
+++ b/apps/citrea/src/vite-env.d.ts
@@ -3,57 +3,56 @@
 import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
 
 export interface AppEnv {
-    readonly VITE_APP_BASE_PATH?: string;
-    readonly VITE_CONFIG_CHAIN_ID: number;
-    readonly VITE_CONFIG_CHAIN_NAME: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
-    readonly VITE_CONFIG_CHAIN_RPC_URL: string;
-    readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
-    readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
-    readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
-    readonly VITE_CONFIG_CHAIN_ICON_URL: string;
-    readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
-    readonly VITE_CONFIG_CHAIN_GIF_URL: string;
-    readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
-    readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
-    readonly VITE_CONFIG_APP_TITLE: string;
-    readonly VITE_CONFIG_APP_DESCRIPTION: string;
-    readonly VITE_CONFIG_PRIMARY_COLOR: string;
-    readonly VITE_CONFIG_SECONDARY_COLOR: string;
-    readonly VITE_CONFIG_NEXUS_NETWORK: 'mainnet' | 'testnet' | 'devnet';
-    readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
-    readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_APP_BASE_PATH?: string;
+  readonly VITE_CONFIG_APP_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
+  readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
+  readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
+  readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
 
-    readonly VITE_CONFIG_APP_META_TITLE: string;
-    readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
-    readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
-    readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
-    readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
-    readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
-    readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_TITLE: string;
+  readonly VITE_CONFIG_APP_TITLE: string;
+  readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
+  readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
+  readonly VITE_CONFIG_CHAIN_GIF_URL: string;
+  readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
+  readonly VITE_CONFIG_CHAIN_ICON_URL: string;
+  readonly VITE_CONFIG_CHAIN_ID: number;
+  readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
+  readonly VITE_CONFIG_CHAIN_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
+  readonly VITE_CONFIG_CHAIN_RPC_URL: string;
+  readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
+  readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
+  readonly VITE_CONFIG_NEXUS_NETWORK: "mainnet" | "testnet" | "devnet";
+  readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
+  readonly VITE_CONFIG_PRIMARY_COLOR: string;
+  readonly VITE_CONFIG_SECONDARY_COLOR: string;
 }
 
 declare global {
+  interface ImportMetaEnv extends AppEnv {
+    readonly VITE_ARBITRUM_RPC: string;
+    readonly VITE_AVALANCHE_RPC: string;
+    readonly VITE_BASE: string;
+    readonly VITE_BASE_RPC: string;
+    readonly VITE_KAIA_RPC: string;
+    readonly VITE_MAINNET_RPC: string;
+    readonly VITE_MEGAETH_RPC: string;
+    readonly VITE_MONAD_RPC: string;
+    readonly VITE_OPTIMISM_RPC: string;
+    readonly VITE_POLYGON_RPC: string;
+    readonly VITE_SCROLL_RPC: string;
+    readonly VITE_SOPHON_RPC: string;
+    readonly VITE_WALLET_CONNECT_ID: string;
+  }
 
-    interface ImportMetaEnv extends AppEnv {
-        readonly VITE_WALLET_CONNECT_ID: string;
-        readonly VITE_MAINNET_RPC: string;
-        readonly VITE_BASE_RPC: string;
-        readonly VITE_ARBITRUM_RPC: string;
-        readonly VITE_OPTIMISM_RPC: string;
-        readonly VITE_POLYGON_RPC: string;
-        readonly VITE_SCROLL_RPC: string;
-        readonly VITE_AVALANCHE_RPC: string;
-        readonly VITE_SOPHON_RPC: string;
-        readonly VITE_KAIA_RPC: string;
-        readonly VITE_MONAD_RPC: string;
-        readonly VITE_MEGAETH_RPC: string;
-        readonly VITE_BASE: string;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-    }
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
 }
diff --git a/apps/citrea/tsconfig.app.json b/apps/citrea/tsconfig.app.json
index afe17f6..c6a071f 100644
--- a/apps/citrea/tsconfig.app.json
+++ b/apps/citrea/tsconfig.app.json
@@ -24,7 +24,8 @@
 
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["../../packages/fast-bridge-app/src/*"],
+      "@fastbridge/runtime": ["./src/runtime.ts"]
     }
   },
   "include": ["src"]
diff --git a/apps/citrea/tsconfig.json b/apps/citrea/tsconfig.json
index fec8c8e..5bfdf37 100644
--- a/apps/citrea/tsconfig.json
+++ b/apps/citrea/tsconfig.json
@@ -8,6 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "strictNullChecks": true
   }
 }
diff --git a/apps/citrea/vite.config.ts b/apps/citrea/vite.config.ts
index 3ee235e..d3e526f 100644
--- a/apps/citrea/vite.config.ts
+++ b/apps/citrea/vite.config.ts
@@ -1,12 +1,12 @@
+import { writeFileSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
-import { writeFileSync } from "node:fs";
+import { defineConfig, loadEnv } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import { getConfig } from "./get-config";
 import type { AppEnv } from "./src/vite-env.d";
-import { getConfig } from "./getConfig";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -18,31 +18,31 @@ export default defineConfig(({ mode }) => {
   const config = getConfig(env);
 
   const manifestContent = {
-    "name": config.meta.title,
-    "short_name": config.appTitle,
-    "description": config.meta.description,
-    "start_url": base,
-    "display": "standalone",
-    "background_color": config.meta.backgroundColor,
-    "theme_color": config.meta.themeColor,
-    "orientation": "portrait-primary",
-    "icons": [
+    name: config.meta.title,
+    short_name: config.appTitle,
+    description: config.meta.description,
+    start_url: base,
+    display: "standalone",
+    background_color: config.meta.backgroundColor,
+    theme_color: config.meta.themeColor,
+    orientation: "portrait-primary",
+    icons: [
       {
-        "src": config.meta.faviconUrl,
-        "sizes": "31x32",
-        "type": "image/png",
-        "purpose": "any"
+        src: config.meta.faviconUrl,
+        sizes: "31x32",
+        type: "image/png",
+        purpose: "any",
       },
       {
-        "src": config.meta.imageUrl,
-        "sizes": "2444x1256",
-        "type": "image/png",
-        "purpose": "any"
-      }
-    ]
+        src: config.meta.imageUrl,
+        sizes: "2444x1256",
+        type: "image/png",
+        purpose: "any",
+      },
+    ],
   };
 
-  const outputPath = path.resolve(__dirname, 'dist', 'manifest.json');
+  const outputPath = path.resolve(__dirname, "dist", "manifest.json");
 
   return {
     base,
@@ -55,19 +55,19 @@ export default defineConfig(({ mode }) => {
       }),
       // Create manifest.json at build
       {
-        name: 'generate-manifest',
+        name: "generate-manifest",
         writeBundle() {
           try {
             writeFileSync(outputPath, JSON.stringify(manifestContent, null, 2));
             console.log(`Generated dynamic manifest.json at ${outputPath}`);
           } catch (err) {
-            console.error('Error generating manifest.json', err);
+            console.error("Error generating manifest.json", err);
           }
-        }
+        },
       },
       // Update title and meta of index.html at build
       {
-        name: 'html-transform',
+        name: "html-transform",
         transformIndexHtml(html) {
           // Replace placeholders with actual values
           return html
@@ -77,13 +77,14 @@ export default defineConfig(({ mode }) => {
             .replaceAll(/%= APP_FAVICON_URL =%/g, config.meta.faviconUrl)
             .replaceAll(/%= APP_THEME_COLOR =%/g, config.meta.themeColor)
             .replaceAll(/%= APP_META_IMAGE_URL =%/g, config.meta.imageUrl)
-            .replaceAll(/%= MANIFEST_URL =%/g, `${base}manifest.json`)
-        }
-      }
+            .replaceAll(/%= MANIFEST_URL =%/g, `${base}manifest.json`);
+        },
+      },
     ],
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "./src"),
+        "@": path.resolve(__dirname, "../../packages/fast-bridge-app/src"),
+        "@fastbridge/runtime": path.resolve(__dirname, "./src/runtime.ts"),
         buffer: "vite-plugin-node-polyfills/shims/buffer",
         global: "vite-plugin-node-polyfills/shims/global",
         process: "vite-plugin-node-polyfills/shims/process",
@@ -91,7 +92,7 @@ export default defineConfig(({ mode }) => {
     },
     envPrefix: ["VITE_"],
     build: {
-      emptyOutDir: true
-    }
-  }
+      emptyOutDir: true,
+    },
+  };
 });
diff --git a/apps/megaeth/README.md b/apps/megaeth/README.md
index 6438e99..cfdc4d4 100644
--- a/apps/megaeth/README.md
+++ b/apps/megaeth/README.md
@@ -1,13 +1,15 @@
-# Nexus fast bridge
+# Chain App Wrapper
 
-### Run locally
+This app is a thin wrapper around shared code in `packages/fast-bridge-app`.
 
-`npm run dev` to run locally.
+For architecture, onboarding, and customization:
+- `README.md` (repo root)
+- `docs/architecture.md`
+- `docs/adding-chains.md`
+- `docs/customization.md`
 
-### Build project
-
-`npm run build` to build the project.
-
-### Preview
-
-`npm run start` to preview and run
+Primary chain-specific files in this app:
+- `get-config.ts`
+- `src/runtime.ts`
+- `.env.megaeth`
+- `public/*` assets
diff --git a/apps/megaeth/config.ts b/apps/megaeth/config.ts
index b1e41eb..392c7b1 100644
--- a/apps/megaeth/config.ts
+++ b/apps/megaeth/config.ts
@@ -1,4 +1,4 @@
-import { getConfig } from "./getConfig";
+import { getConfig } from "./get-config";
 
 const config = getConfig(import.meta.env);
 
diff --git a/apps/megaeth/eslint.config.js b/apps/megaeth/eslint.config.js
index a6d1076..8401724 100644
--- a/apps/megaeth/eslint.config.js
+++ b/apps/megaeth/eslint.config.js
@@ -1,9 +1,9 @@
 import js from "@eslint/js";
-import globals from "globals";
+import { defineConfig, globalIgnores } from "eslint/config";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 import tseslint from "typescript-eslint";
-import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
   globalIgnores(["dist"]),
@@ -18,6 +18,9 @@ export default defineConfig([
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
   },
 ]);
diff --git a/apps/megaeth/get-config.ts b/apps/megaeth/get-config.ts
new file mode 100644
index 0000000..86a7ad6
--- /dev/null
+++ b/apps/megaeth/get-config.ts
@@ -0,0 +1,87 @@
+import type { AppEnv } from "./src/vite-env.d";
+
+const withFallback = <T>(value: T, fallbackValue: T): T =>
+  value || fallbackValue;
+
+export function getConfig(env: AppEnv) {
+  return {
+    chainId: Number(withFallback(env.VITE_CONFIG_CHAIN_ID, 1337)),
+    chainName: withFallback(env.VITE_CONFIG_CHAIN_NAME, "MegaETH"),
+    chainNativeCurrency: {
+      name: withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME, "MegaETH"),
+      symbol: withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL, "ETH"),
+      decimals: Number(
+        withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS, 18)
+      ),
+    },
+    chainRpcUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_RPC_URL,
+      "https://rpcs.avail.so/megaeth"
+    ),
+    chainBlockExplorerUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL,
+      "https://explorer.megaeth.systems/"
+    ),
+    chainTestnet: env.VITE_CONFIG_CHAIN_TESTNET,
+    useChainLogo: env.VITE_CONFIG_CHAIN_USE_CHAIN_LOGO,
+    chainIconUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_ICON_URL,
+      "/megaeth-favicon.svg"
+    ),
+    chainLogoUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_LOGO_URL,
+      "/megaeth-logo.svg"
+    ),
+    chainGifUrl: withFallback(env.VITE_CONFIG_CHAIN_GIF_URL, "/megaeth.gif"),
+    chainGifAlt: withFallback(env.VITE_CONFIG_CHAIN_GIF_ALT, "Fast MegaETH"),
+    heroText: withFallback(
+      env.VITE_CONFIG_CHAIN_HERO_TEXT,
+      "Move your assets to MegaETH faster than ever!"
+    ),
+
+    appTitle: withFallback(env.VITE_CONFIG_APP_TITLE, "MegaETH Fast Bridge"),
+    appDescription: withFallback(
+      env.VITE_CONFIG_APP_DESCRIPTION,
+      "MegaETH Fast Bridge"
+    ),
+
+    primaryColor: withFallback(env.VITE_CONFIG_PRIMARY_COLOR, "#19191A"),
+    secondaryColor: withFallback(env.VITE_CONFIG_SECONDARY_COLOR, "#ECE8E8"),
+    nexusNetwork: withFallback(env.VITE_CONFIG_NEXUS_NETWORK, "mainnet"),
+    nexusSupportedChain: Number(
+      withFallback(env.VITE_CONFIG_NEXUS_SUPPORTED_CHAIN, 1337)
+    ),
+    nexusPrimaryToken: withFallback(
+      env.VITE_CONFIG_NEXUS_PRIMARY_TOKEN,
+      "USDC"
+    ),
+
+    meta: {
+      title: withFallback(
+        env.VITE_CONFIG_APP_META_TITLE,
+        "MegaETH Fast Bridge - Powered by Avail Nexus"
+      ),
+      description: withFallback(
+        env.VITE_CONFIG_APP_META_DESCRIPTION,
+        "Move your unified USDC and USDT from 12 chains to MegaETH, faster than ever."
+      ),
+      canonicalUrl: withFallback(
+        env.VITE_CONFIG_APP_META_CANONICAL_URL,
+        "https://fastbridge.availproject.org/megaeth/"
+      ),
+      imageUrl: withFallback(
+        env.VITE_CONFIG_APP_META_IMAGE_URL,
+        "https://fastbridge.availproject.org/megaeth/megaeth-meta.png"
+      ),
+      faviconUrl: withFallback(
+        env.VITE_CONFIG_APP_META_FAVICON_URL,
+        "https://fastbridge.availproject.org/megaeth/faviconV2.png"
+      ),
+      themeColor: withFallback(env.VITE_CONFIG_APP_META_THEME_COLOR, "#19191A"),
+      backgroundColor: withFallback(
+        env.VITE_CONFIG_APP_META_BACKGROUND_COLOR,
+        "#ECE8E8"
+      ),
+    },
+  };
+}
diff --git a/apps/megaeth/getConfig.ts b/apps/megaeth/getConfig.ts
deleted file mode 100644
index 709f7f6..0000000
--- a/apps/megaeth/getConfig.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { AppEnv } from "./src/vite-env.d";
-
-export function getConfig(env: AppEnv) {
-    const config = {
-        chainId: Number(env.VITE_CONFIG_CHAIN_ID || 143),
-        chainName: env.VITE_CONFIG_CHAIN_NAME || "Monad",
-        chainNativeCurrency: {
-            name: env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME || "Monad",
-            symbol: env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL || "MON",
-            decimals: Number(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS || 18),
-        },
-        chainRpcUrl: env.VITE_CONFIG_CHAIN_RPC_URL || "https://rpcs.avail.so/monad",
-        chainBlockExplorerUrl:
-            env.VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL || "https://monadvision.com/",
-        chainTestnet: env.VITE_CONFIG_CHAIN_TESTNET || false,
-        useChainLogo: env.VITE_CONFIG_CHAIN_USE_CHAIN_LOGO || false,
-        chainIconUrl: env.VITE_CONFIG_CHAIN_ICON_URL || "/Monad_Logomark.svg",
-        chainLogoUrl: env.VITE_CONFIG_CHAIN_LOGO_URL || "/Monad_Logo.svg",
-        chainGifUrl: env.VITE_CONFIG_CHAIN_GIF_URL || "/salmonad.gif",
-        chainGifAlt: env.VITE_CONFIG_CHAIN_GIF_ALT || "Fast Salmonad",
-        heroText:
-            env.VITE_CONFIG_CHAIN_HERO_TEXT ||
-            "Move your assets to Monad faster than ever!",
-
-        appTitle: env.VITE_CONFIG_APP_TITLE || "Monad Fast Bridge",
-        appDescription: env.VITE_CONFIG_APP_DESCRIPTION || "Monad Fast Bridge",
-
-        primaryColor: env.VITE_CONFIG_PRIMARY_COLOR || "#19191A",
-        secondaryColor: env.VITE_CONFIG_SECONDARY_COLOR || "#ECE8E8",
-        nexusNetwork: env.VITE_CONFIG_NEXUS_NETWORK || "mainnet",
-        nexusSupportedChain:
-            Number(env.VITE_CONFIG_NEXUS_SUPPORTED_CHAIN) || 143,
-        nexusPrimaryToken: env.VITE_CONFIG_NEXUS_PRIMARY_TOKEN || "USDC",
-
-        meta: {
-            title:
-                env.VITE_CONFIG_APP_META_TITLE ||
-                "Monad Fast Bridge - Powered by Avail Nexus",
-            description:
-                env.VITE_CONFIG_APP_META_DESCRIPTION ||
-                "Move your unified USDC and USDT from 12 chains to Monad, faster than ever.",
-            canonicalUrl:
-                env.VITE_CONFIG_APP_META_CANONICAL_URL || "https://monadfastbridge.com",
-            imageUrl:
-                env.VITE_CONFIG_APP_META_IMAGE_URL ||
-                "https://monadfastbridge.com/MonadFBMeta.png",
-            faviconUrl:
-                env.VITE_CONFIG_APP_META_FAVICON_URL ||
-                "https://monadfastbridge.com/faviconV2.png",
-            themeColor: env.VITE_CONFIG_APP_META_THEME_COLOR || "#19191A",
-            backgroundColor: env.VITE_CONFIG_APP_META_BACKGROUND_COLOR || "#ECE8E8",
-        },
-    };
-
-    return config;
-}
\ No newline at end of file
diff --git a/apps/megaeth/index.html b/apps/megaeth/index.html
index 66cdf7a..87dc80c 100644
--- a/apps/megaeth/index.html
+++ b/apps/megaeth/index.html
@@ -1,77 +1,77 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--<meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://*.walletconnect.com https://*.walletconnect.org https://*.eth.merkle.io https://*.reown.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: blob: https://monadfastbridge.com https://availproject.org https://*.walletconnect.com https://*.walletconnect.org https:; connect-src 'self' https://api.coinbase.com https://rpcs.avail.so https://*.avail.so wss://*.avail.so ws://*.avail.so https://*.walletconnect.com https://*.walletconnect.org wss://*.walletconnect.com wss://*.walletconnect.org https://*.infura.io https://*.alchemy.com https://mainnet.infura.io https://polygon-rpc.com https://api.avax.network https://rpc.ankr.com https://*.ankr.com https://*.1inch.io https://*.1inch.exchange https://*.uniswap.org https://*.uniswap.io https://monadvision.com https://*.merkle.io https://*.arcana.network http://*.arcana.network https://cosmos01-testnet.arcana.network:26650 http://cosmos01-testnet.arcana.network:26650 wss://*.arcana.network ws://*.arcana.network wss://cosmos01-testnet.arcana.network:26650 ws://cosmos01-testnet.arcana.network:26650 https://mainnet.base.org https://*.base.org https://*.optimism.io https://mainnet.optimism.io https://*.arbitrum.io https://arb1.arbitrum.io https://*.scroll.io https://rpc.scroll.io https://*.polygon.technology https://*.avax.network https://*.sophon.xyz https://rpc.sophon.xyz https://*.kaia.io https://public-en.node.kaia.io https://*.bsc.com https://bsc-dataseed.binance.org https://*.binance.org https://*.tron.network https://*.trongrid.io https://*.sepolia.io https://sepolia.infura.io https://rpc.sepolia.org https://sepolia.optimism.io https://*.optimism-sepolia.io https://sepolia-rollup.arbitrum.io https://*.arbitrum-sepolia.io https://*.amoy.polygon.technology https://rpc-amoy.polygon.technology https://sepolia.base.org https://*.base-sepolia.org https://*.monad.xyz https://*.reown.com https://api.reown.com https://*.web3modal.org https://api.web3modal.org; frame-src 'self' https://*.walletconnect.com https://*.walletconnect.org https://*.reown.com https://*.family.co; manifest-src 'self'; form-action 'self'; base-uri 'self';"
     />-->
-    <link rel="icon" href="%= APP_FAVICON_URL =%" type="image/x-icon" />
-    <meta name="theme-color" content="%= APP_THEME_COLOR =%" />
-    <meta name="description" content="%= APP_DESCRIPTION =%" />
-    <link rel="apple-touch-icon" href="%= APP_FAVICON_URL =%" />
-    <link rel="manifest" href="%= MANIFEST_URL =%" />
+    <link rel="icon" href="%= APP_FAVICON_URL =%" type="image/x-icon">
+    <meta name="theme-color" content="%= APP_THEME_COLOR =%">
+    <meta name="description" content="%= APP_DESCRIPTION =%">
+    <link rel="apple-touch-icon" href="%= APP_FAVICON_URL =%">
+    <link rel="manifest" href="%= MANIFEST_URL =%">
     <title>%= APP_TITLE =%</title>
-    <link rel="canonical" href="%= APP_CANONICAL_URL =%" />
-    <meta name="title" content="%= APP_TITLE =%" />
+    <link rel="canonical" href="%= APP_CANONICAL_URL =%">
+    <meta name="title" content="%= APP_TITLE =%">
 
     <link
       rel="apple-touch-icon"
       sizes="180x180"
       type="image/png"
       href="%= APP_FAVICON_URL =%"
-    />
+    >
     <link
       rel="icon"
       sizes="16x16 32x32"
       type="image/png"
       href="%= APP_FAVICON_URL =%"
-    />
+    >
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:title" content="%= APP_TITLE =%" />
-    <meta property="og:description" content="%= APP_DESCRIPTION =%" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="%= APP_CANONICAL_URL =%" />
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="300" />
-    <meta property="og:image:height" content="157" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:title" content="%= APP_TITLE =%">
+    <meta property="og:description" content="%= APP_DESCRIPTION =%">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="%= APP_CANONICAL_URL =%">
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="300">
+    <meta property="og:image:height" content="157">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="600" />
-    <meta property="og:image:height" content="315" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="600">
+    <meta property="og:image:height" content="315">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="600" />
-    <meta property="og:image:height" content="600" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="600">
+    <meta property="og:image:height" content="600">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="627" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="627">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
     <!-- X (Twitter) -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="%= APP_CANONICAL_URL =%" />
-    <meta name="twitter:title" content="%= APP_TITLE =%" />
-    <meta name="twitter:description" content="%= APP_DESCRIPTION =%" />
-    <meta name="twitter:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta name="twitter:image:alt" content="%= APP_TITLE =%" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="%= APP_CANONICAL_URL =%">
+    <meta name="twitter:title" content="%= APP_TITLE =%">
+    <meta name="twitter:description" content="%= APP_DESCRIPTION =%">
+    <meta name="twitter:image" content="%= APP_META_IMAGE_URL =%">
+    <meta name="twitter:image:alt" content="%= APP_TITLE =%">
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
       href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Gloock&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
-    />
+    >
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/megaeth/package.json b/apps/megaeth/package.json
index f3961f1..6b87c63 100644
--- a/apps/megaeth/package.json
+++ b/apps/megaeth/package.json
@@ -11,8 +11,9 @@
     "preview": "vite preview --port 5173"
   },
   "dependencies": {
-    "@avail-project/nexus-core": "github:availproject/nexus-sdk#cca99c1a570a8598334e3e89453d39a27d70ede7",
+    "@avail-project/nexus-core": "1.1.2",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
diff --git a/apps/megaeth/src/App.tsx b/apps/megaeth/src/App.tsx
deleted file mode 100644
index 6e18e78..0000000
--- a/apps/megaeth/src/App.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Web3Provider from "@/providers/web3Provider";
-import { Toaster } from "@/components/ui/sonner";
-import Navbar from "@/components/navbar";
-import HeroSection from "@/components/hero-section";
-import FastBridgeShowcase from "@/components/fast-bridge-showcase";
-import NexusProvider from "@/components/nexus/NexusProvider";
-import config from "../config";
-
-// @ts-expect-error - Environment is not exported from @avail-project/nexus-core
-enum Environment {
-  FOLLY, // Dev with test-net tokens
-  CERISE, // Dev with main-net tokens
-  CORAL, // Test-net with main-net tokens
-  JADE, // Main-net with main-net tokens
-}
-
-export default function App() {
-  return (
-    <Web3Provider>
-      <NexusProvider
-        config={{
-          // network: {
-          //   NETWORK_HINT: Environment.CERISE,
-          //   COSMOS_GRPC_URL: "https://debugnet.availproject.org/grpc-web/",
-          //   COSMOS_REST_URL: "https://debugnet.availproject.org",
-          //   COSMOS_RPC_URL: "https://debugnet.availproject.org:26650",
-          //   COSMOS_WS_URL: "wss://debugnet.availproject.org:26650/websocket",
-          //   INTENT_EXPLORER_URL:
-          //     "https://explorer.nexus-cerise.availproject.org",
-          //   VSC_BASE_URL: "https://vsc-debugnet.availproject.org",
-          //   VSC_WS_URL: "wss://vsc-debugnet.availproject.org",
-          // },
-          network: "mainnet",
-          debug: true,
-        }}
-      >
-        <div className="font-sans min-h-screen overflow-x-hidden w-full">
-          <Navbar />
-          <div className="min-h-full w-full max-w-full flex gap-4 md:gap-16 overflow-x-hidden">
-            <div
-              className="absolute inset-0 z-0"
-              style={{
-                background: `radial-gradient(125% 125% at 50% 10%, #fff 50%, ${config.primaryColor} 125%)`,
-              }}
-            />
-            <main className="flex flex-col flex-1 min-w-0 max-w-full px-4 py-12 gap-8">
-              <HeroSection />
-              <FastBridgeShowcase />
-            </main>
-          </div>
-        </div>
-        <Toaster />
-      </NexusProvider>
-    </Web3Provider>
-  );
-}
diff --git a/apps/megaeth/src/components/common/hooks/useDebouncedCallback.ts b/apps/megaeth/src/components/common/hooks/useDebouncedCallback.ts
deleted file mode 100644
index d969b5a..0000000
--- a/apps/megaeth/src/components/common/hooks/useDebouncedCallback.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useStableCallback } from "./useStableCallback";
-
-type AnyFn = (...args: any[]) => any;
-
-export interface Debounced<T extends AnyFn> {
-  (...args: Parameters<T>): void;
-  cancel: () => void;
-  flush: () => void;
-}
-
-/**
- * Returns a debounced function that delays invoking `fn` until after `delay`
- * milliseconds have elapsed since the last call.
- */
-export function useDebouncedCallback<T extends AnyFn>(
-  fn: T,
-  delay: number
-): Debounced<T> {
-  const latest = useStableCallback(fn);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const lastArgsRef = useRef<Parameters<T> | null>(null);
-
-  const cancel = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  const flush = () => {
-    if (timerRef.current && lastArgsRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-       
-      latest(...lastArgsRef.current);
-      lastArgsRef.current = null;
-    }
-  };
-
-  // cancel when delay changes/unmounts
-  useEffect(() => cancel, [delay]);
-
-  return useMemo(() => {
-    const debounced = ((...args: Parameters<T>) => {
-      lastArgsRef.current = args;
-      cancel();
-      timerRef.current = setTimeout(() => {
-         
-        latest(...lastArgsRef.current!);
-        lastArgsRef.current = null;
-        timerRef.current = null;
-      }, delay);
-    }) as Debounced<T>;
-    debounced.cancel = cancel;
-    debounced.flush = flush;
-    return debounced;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delay, latest]);
-}
diff --git a/apps/megaeth/src/components/common/hooks/useDebouncedValue.ts b/apps/megaeth/src/components/common/hooks/useDebouncedValue.ts
deleted file mode 100644
index 3df2f0b..0000000
--- a/apps/megaeth/src/components/common/hooks/useDebouncedValue.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-import { useDebouncedCallback } from "./useDebouncedCallback";
-
-/**
- * Derives a debounced value from an input value and delay.
- */
-export function useDebouncedValue<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState<T>(value);
-  const setter = useDebouncedCallback((v: T) => setDebounced(v), delay);
-
-  useEffect(() => {
-    setter(value);
-    return setter.cancel;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, delay]);
-
-  return debounced;
-}
diff --git a/apps/megaeth/src/components/common/hooks/useInterval.ts b/apps/megaeth/src/components/common/hooks/useInterval.ts
deleted file mode 100644
index 2287075..0000000
--- a/apps/megaeth/src/components/common/hooks/useInterval.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useStableCallback } from "./useStableCallback";
-
-interface UseIntervalOptions {
-  enabled?: boolean;
-  immediate?: boolean;
-}
-
-/**
- * Declarative setInterval with pause/resume and latest-callback semantics.
- * Pass delay=null to pause.
- */
-export function useInterval(
-  callback: () => void,
-  delay: number | null,
-  options: UseIntervalOptions = {}
-) {
-  const { enabled = true, immediate = false } = options;
-  const savedCallback = useStableCallback(callback);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (!enabled || delay == null) return;
-    if (immediate) {
-      savedCallback();
-    }
-    intervalRef.current = setInterval(savedCallback, delay);
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [delay, enabled, immediate, savedCallback]);
-}
diff --git a/apps/megaeth/src/components/common/hooks/useNexusError.ts b/apps/megaeth/src/components/common/hooks/useNexusError.ts
deleted file mode 100644
index 3276d17..0000000
--- a/apps/megaeth/src/components/common/hooks/useNexusError.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NexusError } from "@avail-project/nexus-core";
-
-function handler(err: unknown) {
-  console.log("NEXUS-ERROR-OBJECT", err)
-  if (err instanceof NexusError) {
-    return {
-      code: err?.code,
-      message: err?.message,
-      context: err?.data?.context,
-      details: err?.data?.details,
-    };
-  } else {
-    console.error("Unexpected error:", err);
-    return {
-      code: "unexpected_error",
-      message: "Oops! Something went wrong. Please try again.",
-      context: undefined,
-      details: undefined,
-    };
-  }
-}
-export function useNexusError() {
-  return handler;
-}
diff --git a/apps/megaeth/src/components/common/hooks/usePolling.ts b/apps/megaeth/src/components/common/hooks/usePolling.ts
deleted file mode 100644
index 8b35ed8..0000000
--- a/apps/megaeth/src/components/common/hooks/usePolling.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useRef } from "react";
-import { useInterval } from "./useInterval";
-import { useStableCallback } from "./useStableCallback";
-
-/**
- * Declarative polling with in-flight protection (no overlap).
- * When enabled becomes true, an immediate run is executed,
- * followed by interval-based runs.
- */
-export function usePolling(
-  enabled: boolean,
-  fn: () => Promise<void> | void,
-  intervalMs: number
-) {
-  const inFlightRef = useRef(false);
-  const wrapped = useStableCallback(async () => {
-    if (inFlightRef.current) return;
-    try {
-      inFlightRef.current = true;
-      await fn();
-    } catch (error) {
-      console.error(error);
-    } finally {
-      inFlightRef.current = false;
-    }
-  });
-
-  useInterval(wrapped, enabled ? intervalMs : null, {
-    enabled,
-    immediate: enabled,
-  });
-}
diff --git a/apps/megaeth/src/components/common/hooks/useStopwatch.ts b/apps/megaeth/src/components/common/hooks/useStopwatch.ts
deleted file mode 100644
index 9350047..0000000
--- a/apps/megaeth/src/components/common/hooks/useStopwatch.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-interface UseStopwatchOptions {
-  running?: boolean;
-  intervalMs?: number;
-}
-
-/**
- * Simple stopwatch that increments elapsed seconds while running.
- * Designed to replace scattered timer effects.
- */
-export function useStopwatch(options: UseStopwatchOptions = {}) {
-  const { running = false, intervalMs = 100 } = options;
-  const [elapsedSeconds, setElapsedSeconds] = useState(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const reset = () => {
-    setElapsedSeconds(0);
-  };
-
-  const stop = () => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  const start = () => {
-    if (timerRef.current) return;
-    timerRef.current = setInterval(() => {
-      // 1s == 1000ms; we add fractional seconds per tick
-      setElapsedSeconds((prev) => prev + intervalMs / 1000);
-    }, intervalMs);
-  };
-
-  useEffect(() => {
-    if (running) {
-      start();
-    } else {
-      stop();
-    }
-    return stop;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [running, intervalMs]);
-
-  return {
-    seconds: elapsedSeconds,
-    start,
-    stop,
-    reset,
-    running: Boolean(timerRef.current),
-  };
-}
diff --git a/apps/megaeth/src/components/common/index.ts b/apps/megaeth/src/components/common/index.ts
deleted file mode 100644
index f5a855e..0000000
--- a/apps/megaeth/src/components/common/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from "./hooks/useStopwatch";
-export * from "./hooks/usePolling";
-export * from "./hooks/useInterval";
-export * from "./hooks/useStableCallback";
-export * from "./hooks/useDebouncedValue";
-export * from "./hooks/useDebouncedCallback";
-export * from "./hooks/useNexusError";
-export * from "./tx/types";
-export * from "./tx/steps";
-export * from "./tx/useTransactionSteps";
-export * from "./utils/constant";
diff --git a/apps/megaeth/src/components/common/tx/steps.ts b/apps/megaeth/src/components/common/tx/steps.ts
deleted file mode 100644
index 9d44a88..0000000
--- a/apps/megaeth/src/components/common/tx/steps.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { SwapStepType } from "@avail-project/nexus-core";
-import type { GenericStep } from "./types";
-import { getStepKey } from "./types";
-
-/**
- * Predefined expected steps for swaps to seed UI before events arrive.
- * Kept here to avoid duplication across exact-in and exact-out hooks.
- */
-export const SWAP_EXPECTED_STEPS: SwapStepType[] = [
-  { type: "SWAP_START", typeID: "SWAP_START" } as SwapStepType,
-  { type: "DETERMINING_SWAP", typeID: "DETERMINING_SWAP" } as SwapStepType,
-  {
-    type: "CREATE_PERMIT_FOR_SOURCE_SWAP",
-    typeID:
-      "CREATE_PERMIT_FOR_SOURCE_SWAP" as unknown as SwapStepType["typeID"],
-  } as SwapStepType,
-  {
-    type: "SOURCE_SWAP_BATCH_TX",
-    typeID: "SOURCE_SWAP_BATCH_TX",
-  } as SwapStepType,
-  {
-    type: "SOURCE_SWAP_HASH",
-    typeID: "SOURCE_SWAP_HASH" as unknown as SwapStepType["typeID"],
-  } as SwapStepType,
-  { type: "RFF_ID", typeID: "RFF_ID" } as SwapStepType,
-  {
-    type: "DESTINATION_SWAP_BATCH_TX",
-    typeID: "DESTINATION_SWAP_BATCH_TX",
-  } as SwapStepType,
-  {
-    type: "DESTINATION_SWAP_HASH",
-    typeID: "DESTINATION_SWAP_HASH" as unknown as SwapStepType["typeID"],
-  } as SwapStepType,
-  { type: "SWAP_COMPLETE", typeID: "SWAP_COMPLETE" } as SwapStepType,
-];
-
-export function seedSteps<T>(expected: T[]): Array<GenericStep<T>> {
-  return expected.map((st, index) => ({
-    id: index,
-    completed: false,
-    step: st,
-  }));
-}
-
-export function computeAllCompleted<T>(steps: Array<GenericStep<T>>): boolean {
-  return steps.length > 0 && steps.every((s) => s.completed);
-}
-
-/**
- * Replace the current list of steps with a new list, preserving completion
- * for any steps that were already marked completed (matched by key).
- */
-export function mergeStepsList<T>(
-  prev: Array<GenericStep<T>>,
-  list: T[]
-): Array<GenericStep<T>> {
-  const completedKeys = new Set<string>();
-  for (const prevStep of prev) {
-    if (prevStep.completed) {
-      completedKeys.add(getStepKey(prevStep.step));
-    }
-  }
-  const next: Array<GenericStep<T>> = [];
-  for (let index = 0; index < list.length; index++) {
-    const step = list[index];
-    const key = getStepKey(step);
-    next.push({
-      id: index,
-      completed: completedKeys.has(key),
-      step,
-    });
-  }
-  return next;
-}
-
-/**
- * Mark a step complete in-place; if the step doesn't yet exist, append it.
- */
-export function mergeStepComplete<T>(
-  prev: Array<GenericStep<T>>,
-  step: T
-): Array<GenericStep<T>> {
-  const key = getStepKey(step);
-  const updated: Array<GenericStep<T>> = [];
-  let found = false;
-  for (const s of prev) {
-    if (getStepKey(s.step) === key) {
-      updated.push({ ...s, completed: true, step: { ...s.step, ...step } });
-      found = true;
-    } else {
-      updated.push(s);
-    }
-  }
-  if (!found) {
-    updated.push({
-      id: updated.length,
-      completed: true,
-      step,
-    });
-  }
-  return updated;
-}
diff --git a/apps/megaeth/src/components/common/tx/types.ts b/apps/megaeth/src/components/common/tx/types.ts
deleted file mode 100644
index 7a2a7b1..0000000
--- a/apps/megaeth/src/components/common/tx/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type TransactionStatus =
-  | "idle"
-  | "preview"
-  | "awaiting-approval"
-  | "executing"
-  | "success"
-  | "error";
-
-export type GenericStep<TStep> = {
-  id: number;
-  completed: boolean;
-  step: TStep;
-};
-
-/**
- * Normalizes a step to a stable key. Prefers typeID, then type, otherwise JSON.
- */
-export function getStepKey(step: any): string {
-  if (!step) return "";
-  if (typeof step.typeID === "string" && step.typeID.length > 0) {
-    return step.typeID;
-  }
-  if (typeof step.type === "string" && step.type.length > 0) {
-    return step.type;
-  }
-  try {
-    return JSON.stringify(step);
-  } catch {
-    return String(step);
-  }
-}
diff --git a/apps/megaeth/src/components/common/tx/useTransactionSteps.ts b/apps/megaeth/src/components/common/tx/useTransactionSteps.ts
deleted file mode 100644
index eb74bd6..0000000
--- a/apps/megaeth/src/components/common/tx/useTransactionSteps.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import type { GenericStep } from "./types";
-import { getStepKey } from "./types";
-import {
-  computeAllCompleted,
-  mergeStepComplete,
-  mergeStepsList,
-  seedSteps,
-} from "./steps";
-
-interface UseTransactionStepsOptions<T> {
-  expected?: T[];
-}
-
-/**
- * Manages transaction steps with utilities to seed from expected steps,
- * replace the list on "steps list" events, and mark individual steps complete.
- */
-export function useTransactionSteps<
-  T extends { typeID?: string; type?: string }
->(options: UseTransactionStepsOptions<T> = {}) {
-  const { expected } = options;
-  const [steps, setSteps] = useState<Array<GenericStep<T>>>(() =>
-    expected ? seedSteps(expected) : []
-  );
-  const lastSignatureRef = useRef<string>("");
-
-  const onStepsList = (list: T[]) => {
-    const signature = list.map((step) => getStepKey(step)).join("|");
-    if (lastSignatureRef.current === signature) {
-      setSteps((prev) => mergeStepsList(prev, list));
-      return;
-    }
-    lastSignatureRef.current = signature;
-    setSteps((prev) => mergeStepsList(prev, list));
-  };
-
-  const onStepComplete = (step: T) => {
-    setSteps((prev) => mergeStepComplete(prev, step));
-  };
-
-  const seed = (expectedSteps: T[]) => {
-    setSteps(seedSteps(expectedSteps));
-  };
-
-  const reset = () => {
-    setSteps(expected ? seedSteps(expected) : []);
-    lastSignatureRef.current = "";
-  };
-
-  const allCompleted = useMemo(() => computeAllCompleted(steps), [steps]);
-
-  return {
-    steps,
-    allCompleted,
-    onStepsList,
-    onStepComplete,
-    seed,
-    reset,
-  };
-}
diff --git a/apps/megaeth/src/components/common/utils/constant.ts b/apps/megaeth/src/components/common/utils/constant.ts
deleted file mode 100644
index 8bc57a9..0000000
--- a/apps/megaeth/src/components/common/utils/constant.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
-import { formatUnits, parseUnits } from "viem";
-
-export const SHORT_CHAIN_NAME: Record<number, string> = {
-  [SUPPORTED_CHAINS.ETHEREUM]: "Ethereum",
-  [SUPPORTED_CHAINS.BASE]: "Base",
-  [SUPPORTED_CHAINS.ARBITRUM]: "Arbitrum",
-  [SUPPORTED_CHAINS.OPTIMISM]: "Optimism",
-  [SUPPORTED_CHAINS.POLYGON]: "Polygon",
-  [SUPPORTED_CHAINS.AVALANCHE]: "Avalanche",
-  [SUPPORTED_CHAINS.SCROLL]: "Scroll",
-  [SUPPORTED_CHAINS.KAIA]: "Kaia",
-  [SUPPORTED_CHAINS.BNB]: "BNB",
-  [SUPPORTED_CHAINS.MONAD]: "Monad",
-  [SUPPORTED_CHAINS.HYPEREVM]: "HyperEVM",
-  [SUPPORTED_CHAINS.MEGAETH]: "MegaETH",
-  4114: "Citrea",
-
-  [SUPPORTED_CHAINS.SEPOLIA]: "Sepolia",
-  [SUPPORTED_CHAINS.BASE_SEPOLIA]: "Base Sepolia",
-  [SUPPORTED_CHAINS.ARBITRUM_SEPOLIA]: "Arbitrum Sepolia",
-  [SUPPORTED_CHAINS.OPTIMISM_SEPOLIA]: "Optimism Sepolia",
-  [SUPPORTED_CHAINS.POLYGON_AMOY]: "Polygon Amoy",
-  [SUPPORTED_CHAINS.MONAD_TESTNET]: "Monad Testnet",
-} as const;
-
-export const TOKEN_IMAGES: Record<string, string> = {
-  USDC: "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png",
-  USDT: "https://coin-images.coingecko.com/coins/images/35023/large/USDT.png",
-  "USD₮0":
-    "https://coin-images.coingecko.com/coins/images/35023/large/USDT.png",
-  USDM: "https://assets.coingecko.com/coins/images/31719/large/usdm.png",
-  WETH: "https://assets.coingecko.com/coins/images/279/large/ethereum.png?1595348880",
-  USDS: "https://assets.coingecko.com/coins/images/39926/standard/usds.webp?1726666683",
-  SOPH: "https://assets.coingecko.com/coins/images/38680/large/sophon_logo_200.png",
-  KAIA: "https://assets.coingecko.com/asset_platforms/images/9672/large/kaia.png",
-  BNB: "https://assets.coingecko.com/coins/images/825/large/bnb-icon2_2x.png",
-  // Add ETH as fallback for any ETH-related tokens
-  ETH: "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png?1696501628",
-  // Add common token fallbacks
-  POL: "https://coin-images.coingecko.com/coins/images/32440/standard/polygon.png",
-  AVAX: "https://assets.coingecko.com/coins/images/12559/standard/Avalanche_Circle_RedWhite_Trans.png",
-  FUEL: "https://coin-images.coingecko.com/coins/images/279/large/ethereum.png",
-  HYPE: "https://assets.coingecko.com/asset_platforms/images/243/large/hyperliquid.png",
-  // Popular swap tokens
-  DAI: "https://coin-images.coingecko.com/coins/images/9956/large/Badge_Dai.png?1696509996",
-  UNI: "https://coin-images.coingecko.com/coins/images/12504/large/uni.jpg?1696512319",
-  AAVE: "https://coin-images.coingecko.com/coins/images/12645/large/AAVE.png?1696512452",
-  LDO: "https://coin-images.coingecko.com/coins/images/13573/large/Lido_DAO.png?1696513326",
-  PEPE: "https://coin-images.coingecko.com/coins/images/29850/large/pepe-token.jpeg?1696528776",
-  OP: "https://coin-images.coingecko.com/coins/images/25244/large/Optimism.png?1696524385",
-  ZRO: "https://coin-images.coingecko.com/coins/images/28206/large/ftxG9_TJ_400x400.jpeg?1696527208",
-  OM: "https://assets.coingecko.com/coins/images/12151/standard/OM_Token.png?1696511991",
-  KAITO:
-    "https://assets.coingecko.com/coins/images/54411/standard/Qm4DW488_400x400.jpg",
-};
-
-const DEFAULT_SAFETY_MARGIN = 0.01; // 1%
-
-/**
- * Compute an amount string for fraction buttons (25%, 50%, 75%, 100%).
- *
- * @param balanceStr - user's balance as a human decimal string (e.g. "12.345") OR as base-unit integer string if `balanceIsBaseUnits` true
- * @param fraction - fraction e.g. 0.25, 0.5, 0.75, 1
- * @param decimals - token decimals (6 for USDC/USDT, 18 for ETH)
- * @param safetyMargin - 0.01 for 1% default
- * @param balanceIsBaseUnits - if true, balanceStr is already base units integer string (wei / smallest unit)
- * @returns decimal string clipped to token decimals (rounded down)
- */
-export function computeAmountFromFraction(
-  balanceStr: string,
-  fraction: number,
-  decimals: number,
-  safetyMargin = DEFAULT_SAFETY_MARGIN,
-  balanceIsBaseUnits = false,
-): string {
-  if (!balanceStr) return "0";
-
-  // parse balance into base units (BigInt)
-  const balanceUnits: bigint = balanceIsBaseUnits
-    ? BigInt(balanceStr)
-    : parseUnits(balanceStr, decimals);
-
-  if (balanceUnits === BigInt(0)) return "0";
-
-  // Use an integer precision multiplier to avoid FP issues
-  const PREC = 1_000_000; // 1e6 precision for fraction & safety margin
-  const safetyMul = BigInt(Math.max(0, Math.floor((1 - safetyMargin) * PREC))); // (1 - safetyMargin) * PREC
-  const fractionMul = BigInt(Math.max(0, Math.floor(fraction * PREC))); // fraction * PREC
-
-  // Apply safety margin: floor(balance * (1 - safetyMargin))
-  const maxAfterSafety = (balanceUnits * safetyMul) / BigInt(PREC);
-
-  // Apply fraction and floor: floor(maxAfterSafety * fraction)
-  let desiredUnits = (maxAfterSafety * fractionMul) / BigInt(PREC);
-
-  // Extra clamp just in case
-  if (desiredUnits > balanceUnits) desiredUnits = balanceUnits;
-  if (desiredUnits < BigInt(0)) desiredUnits = BigInt(0);
-
-  // format back to human readable decimal string with token decimals (formatUnits truncates/keeps decimals)
-  // formatUnits will produce exactly decimals digits if fractional part exists; we'll strip trailing zeros.
-  const raw = formatUnits(desiredUnits, decimals);
-  // strip trailing zeros and possible trailing dot
-  return raw
-    .replace(/(\.\d*?[1-9])0+$/u, "$1")
-    .replace(/\.0+$/u, "")
-    .replace(/^\.$/u, "0");
-}
-
-export const usdFormatter = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
diff --git a/apps/megaeth/src/components/countdown-timer.tsx b/apps/megaeth/src/components/countdown-timer.tsx
deleted file mode 100644
index 5da085c..0000000
--- a/apps/megaeth/src/components/countdown-timer.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client";
-import * as React from "react";
-
-interface CountdownTimerProps {
-  targetDate: Date;
-}
-
-export const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) => {
-  const [timeLeft, setTimeLeft] = React.useState({
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-  });
-
-  React.useEffect(() => {
-    if (!targetDate || isNaN(targetDate.getTime())) {
-      console.error("Invalid target date provided to CountdownTimer");
-      return;
-    }
-
-    const calculateTimeLeft = () => {
-      const now = new Date().getTime();
-      const target = targetDate.getTime();
-      const difference = target - now;
-
-      if (difference > 0) {
-        setTimeLeft({
-          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-          hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-          minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
-          seconds: Math.floor((difference % (1000 * 60)) / 1000),
-        });
-      } else {
-        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
-      }
-    };
-
-    calculateTimeLeft();
-    const interval = setInterval(calculateTimeLeft, 1000);
-
-    return () => clearInterval(interval);
-  }, [targetDate]);
-
-  return (
-    <div className="flex flex-col items-center gap-4 mt-6">
-      <div className="flex gap-4 sm:gap-6 md:gap-8">
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.days).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Days
-          </div>
-        </div>
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.hours).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Hours
-          </div>
-        </div>
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.minutes).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Minutes
-          </div>
-        </div>
-        <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
-            {String(timeLeft.seconds).padStart(2, "0")}
-          </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
-            Seconds
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
diff --git a/apps/megaeth/src/components/fast-bridge-showcase.tsx b/apps/megaeth/src/components/fast-bridge-showcase.tsx
deleted file mode 100644
index 0ec7ddd..0000000
--- a/apps/megaeth/src/components/fast-bridge-showcase.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-import { useAccount } from "wagmi";
-import { ConnectKitButton } from "connectkit";
-import FastBridge from "./fast-bridge/fast-bridge";
-import { PreviewPanel } from "./walletConnect";
-
-const FastBridgeShowcase = () => {
-  const { address, isConnected } = useAccount();
-
-  return (
-    <PreviewPanel>
-      <ConnectKitButton.Custom>
-        {({ show }) => (
-          <FastBridge
-            connectedAddress={address}
-            isWalletConnected={isConnected}
-            onConnectWallet={show}
-          />
-        )}
-      </ConnectKitButton.Custom>
-    </PreviewPanel>
-  );
-};
-
-export default FastBridgeShowcase;
diff --git a/apps/megaeth/src/components/fast-bridge/components/allowance-modal.tsx b/apps/megaeth/src/components/fast-bridge/components/allowance-modal.tsx
deleted file mode 100644
index 75e38cf..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/allowance-modal.tsx
+++ /dev/null
@@ -1,345 +0,0 @@
-"use client";
-import React, {
-  type FC,
-  memo,
-  type RefObject,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { Button } from "../../ui/button";
-import { Input } from "../../ui/input";
-import { Label } from "../../ui/label";
-import {
-  type AllowanceHookSource,
-  type OnAllowanceHookData,
-  SUPPORTED_CHAINS,
-} from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-
-interface AllowanceModalProps {
-  allowance: RefObject<OnAllowanceHookData | null>;
-  callback?: () => void;
-  onCloseCallback?: () => void;
-}
-
-type AllowanceChoice = "min" | "max" | "custom";
-
-interface AllowanceOptionProps {
-  index: number;
-  name: string;
-  choice: AllowanceChoice;
-  selectedChoice?: AllowanceChoice;
-  onSelect: (index: number, choice: AllowanceChoice) => void;
-  title: string;
-  description?: string;
-  children?: React.ReactNode;
-  allowanceValue?: string;
-}
-
-const ALLOWANCE_CHOICES: Array<{
-  choice: AllowanceChoice;
-  title: string;
-  description: string;
-}> = [
-  {
-    choice: "min",
-    title: "Minimum",
-    description: "Grant the lowest allowance required for this action.",
-  },
-  {
-    choice: "max",
-    title: "Maximum",
-    description: "Approve once and skip future approvals for this token.",
-  },
-  {
-    choice: "custom",
-    title: "Custom amount",
-    description: "Specify an allowance that fits your threshold.",
-  },
-];
-
-const AllowanceOption: FC<AllowanceOptionProps> = ({
-  index,
-  name,
-  choice,
-  selectedChoice,
-  onSelect,
-  title,
-  description,
-  children,
-  allowanceValue,
-}) => {
-  const isActive = selectedChoice === choice;
-
-  return (
-    <Label className="block cursor-pointer">
-      <input
-        type="radio"
-        name={name}
-        value={choice}
-        checked={isActive}
-        onChange={() => onSelect(index, choice)}
-        className="peer sr-only"
-      />
-      <div className="flex flex-col gap-3 rounded-xl border border-border/40 bg-background/40 px-4 py-3 transition peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50 peer-checked:border-primary peer-checked:bg-primary/10 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center justify-between w-full">
-          <div>
-            <p className="text-sm font-medium leading-tight">{title}</p>
-            {description ? (
-              <p className="text-xs text-muted-foreground">{description}</p>
-            ) : null}
-          </div>
-          {allowanceValue && (
-            <p className="text-sm font-medium leading-tight">
-              {allowanceValue}
-            </p>
-          )}
-        </div>
-
-        {children}
-      </div>
-    </Label>
-  );
-};
-
-const AllowanceModal: FC<AllowanceModalProps> = ({
-  allowance,
-  callback,
-  onCloseCallback,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [selectedOption, setSelectedOption] = useState<AllowanceChoice[]>([]);
-  const [customValues, setCustomValues] = useState<string[]>([]);
-
-  const { sources, allow, deny } = allowance.current ?? {
-    sources: [],
-    allow: () => {},
-    deny: () => {},
-  };
-
-  const defaultChoices = useMemo<AllowanceChoice[]>(
-    () => Array.from({ length: sources.length }, () => "min"),
-    [sources.length],
-  );
-
-  const isCustomValueValid = (
-    value: string,
-    minimumRaw: bigint,
-    decimals: number,
-  ): boolean => {
-    if (!value || value.trim() === "") return false;
-    try {
-      const parsedValue = nexusSDK?.utils?.parseUnits(value, decimals);
-      if (parsedValue === undefined) return false;
-      return parsedValue >= minimumRaw;
-    } catch {
-      return false;
-    }
-  };
-
-  const hasValidationErrors = useMemo(() => {
-    return sources.some((source, index) => {
-      if (selectedOption[index] !== "custom") return false;
-      const value = customValues[index];
-      if (!value || value.trim() === "") return false;
-      return !isCustomValueValid(
-        value,
-        source.allowance.minimumRaw,
-        source.token.decimals,
-      );
-    });
-  }, [sources, selectedOption, customValues]);
-
-  const onClose = () => {
-    deny();
-    allowance.current = null;
-    onCloseCallback?.();
-  };
-
-  const onApprove = () => {
-    const processed = sources.map((_, i) => {
-      const opt = selectedOption[i];
-      if (opt === "min" || opt === "max") return opt;
-      const rawValue = customValues[i]?.trim();
-      if (!rawValue) return "min";
-      const parsed = Number(rawValue);
-      if (!Number.isFinite(parsed) || parsed < 0) return "min";
-      return rawValue;
-    });
-    try {
-      allow(processed);
-      allowance.current = null;
-      callback?.();
-    } catch (error) {
-      console.error("AllowanceModal onApprove error", error);
-      allowance.current = null;
-      onCloseCallback?.();
-    }
-  };
-
-  const handleChoiceChange = (index: number, value: AllowanceChoice) => {
-    setSelectedOption((prev) => {
-      const next = [...(prev.length ? prev : defaultChoices)];
-      next[index] = value;
-      return next;
-    });
-  };
-
-  const formatAmount = (value: string | bigint, source: AllowanceHookSource) =>
-    nexusSDK?.utils?.formatTokenBalance(value, {
-      symbol: source.token.symbol,
-      decimals: source.token.decimals,
-    }) ?? "—";
-
-  useEffect(() => {
-    setSelectedOption(defaultChoices);
-  }, [defaultChoices]);
-
-  useEffect(() => {
-    setCustomValues(Array.from({ length: sources.length }, () => ""));
-  }, [sources.length]);
-
-  return (
-    <>
-      <div className="space-y-1">
-        <p className="text-lg font-semibold tracking-tight">
-          Set Token Allowances
-        </p>
-        <p className="text-sm text-muted-foreground">
-          Review every required token and choose the minimum, an unlimited max,
-          or define a custom amount before approving.
-        </p>
-      </div>
-
-      <div className="space-y-4 py-2 max-h-[60vh] overflow-y-auto pr-1">
-        {sources?.map((source: AllowanceHookSource, index: number) => (
-          <div
-            key={`${source.token.symbol}-${index}`}
-            className="rounded-2xl border border-border/40 bg-muted/10 p-4 shadow-sm transition hover:border-border"
-          >
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div className="flex items-center gap-3">
-                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-background shadow-inner">
-                  <img
-                    src={source.chain.logo}
-                    alt={source.chain.name}
-                    width={24}
-                    height={24}
-                    className="rounded-full"
-                  />
-                </div>
-                <div>
-                  <p className="text-base font-semibold">
-                    {source.token.symbol}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {source.chain.name}
-                  </p>
-                </div>
-              </div>
-
-              <div className="text-right">
-                <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                  Current allowance
-                </p>
-                <p className="text-sm font-semibold">
-                  {formatAmount(source.allowance.currentRaw, source)}
-                </p>
-              </div>
-            </div>
-
-            <div className="mt-4 space-y-2">
-              {ALLOWANCE_CHOICES.map((choice) => {
-                if (choice.choice === "custom") {
-                  const customValue = customValues[index] ?? "";
-                  const isCustomSelected = selectedOption[index] === "custom";
-                  const showError =
-                    isCustomSelected &&
-                    customValue.trim() !== "" &&
-                    !isCustomValueValid(
-                      customValue,
-                      source.allowance.minimumRaw,
-                      source.token.decimals,
-                    );
-                  return (
-                    <AllowanceOption
-                      key={choice.choice}
-                      index={index}
-                      name={`allowance-${index}`}
-                      choice={choice.choice}
-                      selectedChoice={selectedOption[index]}
-                      onSelect={handleChoiceChange}
-                      title={choice.title}
-                      description={choice.description}
-                    >
-                      <div className="flex flex-col gap-1">
-                        <Input
-                          type="number"
-                          step="any"
-                          min="0"
-                          inputMode="decimal"
-                          placeholder="0.00"
-                          value={isCustomSelected ? customValue : ""}
-                          onChange={(e) => {
-                            const next = [...customValues];
-                            next[index] = e.target.value;
-                            setCustomValues(next);
-                          }}
-                          maxLength={source.token.decimals}
-                          className={`h-9 w-40 rounded-lg border bg-background/80 text-sm disabled:opacity-60 ${
-                            showError ? "border-destructive" : ""
-                          }`}
-                          disabled={!isCustomSelected}
-                        />
-                        {showError && (
-                          <p className="text-xs text-destructive">
-                            Min: {source.allowance.minimum}
-                          </p>
-                        )}
-                      </div>
-                    </AllowanceOption>
-                  );
-                }
-                return (
-                  <AllowanceOption
-                    key={choice.choice}
-                    index={index}
-                    name={`allowance-${index}`}
-                    choice={choice.choice}
-                    selectedChoice={selectedOption[index]}
-                    onSelect={handleChoiceChange}
-                    title={choice.title}
-                    description={choice.description}
-                    allowanceValue={
-                      choice.choice === "min"
-                        ? formatAmount(source.allowance.minimumRaw, source)
-                        : "Unlimited"
-                    }
-                  />
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="mt-4 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">
-        <Button variant="ghost" onClick={onClose} className="font-semibold">
-          Deny
-        </Button>
-        <Button
-          onClick={onApprove}
-          className="w-full sm:w-auto font-semibold"
-          disabled={hasValidationErrors}
-        >
-          Approve Selected
-        </Button>
-      </div>
-    </>
-  );
-};
-
-AllowanceModal.displayName = "AllowanceModal";
-
-export default memo(AllowanceModal);
diff --git a/apps/megaeth/src/components/fast-bridge/components/amount-input.tsx b/apps/megaeth/src/components/fast-bridge/components/amount-input.tsx
deleted file mode 100644
index e0fac43..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/amount-input.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import { type FC, Fragment, useEffect, useRef, useState } from "react";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { SUPPORTED_CHAINS, type UserAsset } from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type FastBridgeState } from "../hooks/useBridge";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { SHORT_CHAIN_NAME } from "../../common";
-import { LoaderCircle } from "lucide-react";
-
-interface AmountInputProps {
-  amount?: string;
-  onChange: (value: string) => void;
-  bridgableBalance?: UserAsset;
-  onCommit?: (value: string) => void;
-  disabled?: boolean;
-  inputs: FastBridgeState;
-  showBalanceDetails?: boolean;
-}
-
-const AmountInput: FC<AmountInputProps> = ({
-  amount,
-  onChange,
-  bridgableBalance,
-  onCommit,
-  disabled,
-  inputs,
-  showBalanceDetails = true,
-}) => {
-  const { nexusSDK, loading } = useNexus();
-  const commitTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const showBalanceDivider = showBalanceDetails && Boolean(bridgableBalance);
-  const [maxVal, setMaxVal] = useState("0");
-
-  const scheduleCommit = (val: string) => {
-    if (!onCommit || disabled) return;
-    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    commitTimerRef.current = setTimeout(() => {
-      onCommit(val);
-    }, 800);
-  };
-
-  const getMaxVal = async () => {
-    if (!showBalanceDetails || !nexusSDK || !inputs) return;
-    const maxBalAvailable = await nexusSDK?.calculateMaxForBridge({
-      token: inputs?.token,
-      toChainId: inputs?.chain,
-    });
-    if (!maxBalAvailable) return;
-    return maxBalAvailable.amount;
-  };
-
-  const onMaxClick = async () => {
-    if (!showBalanceDetails || !nexusSDK || !inputs) return;
-    const maxBalAvailable = await nexusSDK?.calculateMaxForBridge({
-      token: inputs?.token,
-      toChainId: inputs?.chain,
-      recipient: inputs?.recipient,
-    });
-    if (!maxBalAvailable) return;
-    onChange(maxBalAvailable.amount);
-    onCommit?.(maxBalAvailable.amount);
-  };
-
-  useEffect(() => {
-    const initMaxVal = async function () {
-      const v = await getMaxVal();
-      console.log("got max val in useeffect", v);
-      if (v) setMaxVal(v);
-    };
-
-    initMaxVal();
-  }, [nexusSDK, loading, inputs]);
-
-  useEffect(() => {
-    return () => {
-      if (commitTimerRef.current) {
-        clearTimeout(commitTimerRef.current);
-        commitTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-y-2 pb-2 w-full">
-      <div className="w-full flex sm:flex-row flex-col border border-border rounded-lg gap-y-2">
-        <Input
-          type="text"
-          inputMode="decimal"
-          value={amount ?? ""}
-          placeholder="Enter Amount"
-          onChange={(e) => {
-            let next = e.target.value.replaceAll(/[^0-9.]/g, "");
-            const parts = next.split(".");
-            if (parts.length > 2)
-              next = parts[0] + "." + parts.slice(1).join("");
-            if (next === ".") next = "0.";
-            onChange(next);
-            scheduleCommit(next);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              if (commitTimerRef.current) {
-                clearTimeout(commitTimerRef.current);
-                commitTimerRef.current = null;
-              }
-              onCommit?.(amount ?? "");
-            }
-          }}
-          className="w-full border-none bg-transparent rounded-r-none focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none py-0 px-3  h-12!"
-          aria-invalid={Boolean(amount) && Number.isNaN(Number(amount))}
-          disabled={disabled}
-        />
-        <div
-          className={`flex items-center justify-end-safe gap-x-2 sm:gap-x-4 w-fit px-2 ${
-            showBalanceDivider ? "border-l border-border" : ""
-          }`}
-        >
-          {showBalanceDetails && bridgableBalance && (
-            <p className="text-base font-medium min-w-max">
-              {nexusSDK?.utils?.formatTokenBalance(maxVal, {
-                symbol:
-                  bridgableBalance?.displaySymbol ?? bridgableBalance?.symbol,
-                decimals: bridgableBalance?.decimals,
-              })}
-            </p>
-          )}
-          {showBalanceDetails && loading && !bridgableBalance && (
-            <LoaderCircle className="size-4 animate-spin" />
-          )}
-          {showBalanceDetails && (
-            <Button
-              size={"sm"}
-              variant={"ghost"}
-              onClick={onMaxClick}
-              className="px-0 font-medium"
-              disabled={disabled}
-            >
-              MAX
-            </Button>
-          )}
-        </div>
-      </div>
-      {showBalanceDetails && (
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="balance-breakdown">
-            <AccordionTrigger
-              className="w-fit justify-end items-center py-0 mt-2 gap-x-0.5 cursor-pointer text-sm font-normal"
-              hideChevron={false}
-            >
-              View Balance Breakdown
-            </AccordionTrigger>
-            <AccordionContent className="pb-0 bg-muted rounded-lg mt-4">
-              <div className="space-y-1 py-2">
-                {bridgableBalance?.breakdown.map((chain) => {
-                  if (Number.parseFloat(chain.balance) === 0) return null;
-                  // if (
-                  //   bridgableBalance.symbol === "USDC" &&
-                  //   chain.chain.id === SUPPORTED_CHAINS.MEGAETH
-                  // )
-                  //   return null;
-                  return (
-                    <Fragment key={chain.chain.id}>
-                      <div
-                        className="flex items-center justify-between px-2 py-1 rounded-md"
-                        style={{
-                          opacity: chain.chain.id === inputs.chain ? 0.4 : 1,
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <div className="relative h-6 w-6">
-                            <img
-                              src={chain?.chain?.logo}
-                              alt={chain.chain.name}
-                              sizes="100%"
-                              className="rounded-full"
-                              loading="lazy"
-                              decoding="async"
-                              width="20"
-                              height="20"
-                            />
-                          </div>
-                          <span className="text-sm font-light sm:block hidden">
-                            {SHORT_CHAIN_NAME[chain.chain.id]}
-                          </span>
-                          {chain.chain.id === inputs.chain && (
-                            <div
-                              className="uppercase font-semibold text-[10px] rounded-[10px] px-2 py-1"
-                              style={{ background: "rgba(0, 0, 0, 0.2)" }}
-                            >
-                              Destination
-                            </div>
-                          )}
-                        </div>
-                        <p className="text-sm font-light text-right">
-                          {nexusSDK?.utils?.formatTokenBalance(chain.balance, {
-                            symbol: chain.symbol,
-                            decimals: bridgableBalance?.decimals,
-                          })}
-                        </p>
-                      </div>
-                    </Fragment>
-                  );
-                })}
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
-    </div>
-  );
-};
-
-export default AmountInput;
diff --git a/apps/megaeth/src/components/fast-bridge/components/fee-breakdown.tsx b/apps/megaeth/src/components/fast-bridge/components/fee-breakdown.tsx
deleted file mode 100644
index 63b17f0..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/fee-breakdown.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { type FC } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import {
-  SUPPORTED_CHAINS,
-  type ReadableIntent,
-} from "@avail-project/nexus-core";
-import { Skeleton } from "../../ui/skeleton";
-import { useNexus } from "../../nexus/NexusProvider";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
-import { MessageCircleQuestion } from "lucide-react";
-
-interface FeeBreakdownProps {
-  intent: ReadableIntent;
-  isLoading?: boolean;
-}
-
-const FeeBreakdown: FC<FeeBreakdownProps> = ({ intent, isLoading = false }) => {
-  const { nexusSDK } = useNexus();
-  const feeSymbol =
-    intent.token?.displaySymbol ?? intent.token?.symbol ?? "USDC";
-
-  const feeRows = [
-    {
-      key: "caGas",
-      label: "Fast Bridge Gas Fees",
-      value: intent?.fees.caGas,
-      description:
-        "The gas fee required for executing the fast bridge transaction on the destination chain.",
-    },
-    // {
-    //   key: "gasSupplied",
-    //   label: "Gas Supplied",
-    //   value: intent?.fees?.gasSupplied,
-    //   description:
-    //     "The amount of gas tokens supplied to cover transaction costs on the destination chain.",
-    // },
-    {
-      key: "solver",
-      label: "Solver Fees",
-      value: intent?.fees?.solver,
-      description:
-        "Fees paid to the solver that executes the bridge transaction and ensures fast completion.",
-    },
-    {
-      key: "protocol",
-      label: "Protocol Fees",
-      value: intent?.fees?.protocol,
-      description:
-        "Fees collected by the protocol for maintaining and operating the bridge infrastructure.",
-    },
-  ];
-
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="breakdown">
-        <div className="w-full flex items-start justify-between">
-          <p className="font-light text-base">Total fees</p>
-
-          <div className="flex flex-col items-end justify-end-safe gap-y-1">
-            {isLoading ? (
-              <Skeleton className="h-5 w-24" />
-            ) : (
-              <div className="flex flex-col items-end">
-                {
-                  // intent.destination.chainID === SUPPORTED_CHAINS.MEGAETH ? (
-                  //   <p className="font-bold text-base text-primary">0 Fees</p>
-                  // ) :
-                  <p className="font-light text-sm text-primary min-w-max">
-                    {nexusSDK?.utils?.formatTokenBalance(intent.fees?.total, {
-                      symbol:
-                        intent.token?.symbol === "USDM"
-                          ? "USDC"
-                          : intent.token?.symbol,
-                      decimals: intent?.token?.decimals,
-                    })}
-                  </p>
-                }
-              </div>
-            )}
-            <AccordionTrigger
-              containerClassName="w-fit"
-              className="p-0 items-center gap-x-1"
-              hideChevron={false}
-            >
-              <p className="text-sm font-light">View Breakup</p>
-            </AccordionTrigger>
-          </div>
-        </div>
-        <AccordionContent>
-          <div className="w-full flex flex-col items-center justify-between gap-y-3 bg-muted px-4 py-2 rounded-lg mt-2">
-            {feeRows.map(({ key, label, value, description }) => {
-              // if (Number.parseFloat(value ?? "0") <= 0) return null;
-              return (
-                <Tooltip key={key}>
-                  <div className="flex items-center w-full justify-between">
-                    <div className="flex items-center gap-x-2">
-                      <p className="text-sm font-light">{label}</p>
-                      <TooltipTrigger asChild>
-                        <MessageCircleQuestion className="size-4" />
-                      </TooltipTrigger>
-                    </div>
-                    {isLoading ? (
-                      <Skeleton className="h-4 w-20" />
-                    ) : (
-                      <div className="flex flex-col items-end">
-                        {intent.destination.chainID ===
-                          SUPPORTED_CHAINS.MEGAETH && key !== "caGas" ? (
-                          <p className="text-sm font-semibold text-primary">
-                            0 Fees
-                          </p>
-                        ) : (
-                          <p className="text-xs font-light text-primary">
-                            {nexusSDK?.utils?.formatTokenBalance(value, {
-                              symbol:
-                                intent.token?.symbol === "USDM"
-                                  ? "USDC"
-                                  : intent.token?.symbol,
-                              decimals: intent?.token?.decimals,
-                            })}
-                          </p>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                  <TooltipContent className="max-w-sm text-balance">
-                    <p className="text-sm font-light">{description}</p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default FeeBreakdown;
diff --git a/apps/megaeth/src/components/fast-bridge/components/receipient-address.tsx b/apps/megaeth/src/components/fast-bridge/components/receipient-address.tsx
deleted file mode 100644
index 0bb4192..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/receipient-address.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-import * as React from "react";
-import { Input } from "../../ui/input";
-import { Check, Edit } from "lucide-react";
-import { Button } from "../../ui/button";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type Address } from "viem";
-
-interface ReceipientAddressProps {
-  address?: Address;
-  onChange: (address: string) => void;
-}
-
-const ReceipientAddress: React.FC<ReceipientAddressProps> = ({
-  address,
-  onChange,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [isEditing, setIsEditing] = React.useState(false);
-  const fallbackTruncate = (value: string, head = 6, tail = 6) => {
-    if (!value) return "";
-    if (value.length <= head + tail) return value;
-    return `${value.slice(0, head)}...${value.slice(-tail)}`;
-  };
-  const displayAddress =
-    address && nexusSDK?.utils?.truncateAddress
-      ? nexusSDK.utils.truncateAddress(address, 6, 6)
-      : address
-        ? fallbackTruncate(address, 6, 6)
-        : "";
-  return (
-    <div className="w-full">
-      {isEditing ? (
-        <div className="flex items-center w-full justify-between gap-x-4">
-          <Input
-            value={address}
-            placeholder="Enter Recipient Address"
-            onChange={(e) => onChange(e.target.value)}
-            className="w-full text-base font-medium"
-          />
-          <Button
-            variant={"ghost"}
-            size={"icon"}
-            onClick={() => {
-              setIsEditing(false);
-            }}
-          >
-            <Check className="size-5" />
-          </Button>
-        </div>
-      ) : (
-        <div className="flex items-center w-full justify-between">
-          <p className="font-medium text-base">Recipient Address</p>
-          <div className="flex items-center gap-x-3 ">
-            <p className="font-medium text-base">{displayAddress}</p>
-
-            <Button
-              variant={"ghost"}
-              size={"icon"}
-              onClick={() => {
-                setIsEditing(true);
-              }}
-              className="px-0 size-5"
-            >
-              <Edit className="size-5" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ReceipientAddress;
diff --git a/apps/megaeth/src/components/fast-bridge/components/recipient-address.tsx b/apps/megaeth/src/components/fast-bridge/components/recipient-address.tsx
deleted file mode 100644
index 5a7fa6f..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/recipient-address.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-"use client";
-import { type FC, useState } from "react";
-import { Input } from "../../ui/input";
-import { Check, Edit } from "lucide-react";
-import { Button } from "../../ui/button";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type Address } from "viem";
-
-interface RecipientAddressProps {
-  address?: Address;
-  onChange: (address: string) => void;
-  disabled?: boolean;
-}
-
-const RecipientAddress: FC<RecipientAddressProps> = ({
-  address,
-  onChange,
-  disabled,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [isEditing, setIsEditing] = useState(false);
-  const fallbackTruncate = (value: string, head = 6, tail = 6) => {
-    if (!value) return "";
-    if (value.length <= head + tail) return value;
-    return `${value.slice(0, head)}...${value.slice(-tail)}`;
-  };
-  const displayAddress =
-    address && nexusSDK?.utils?.truncateAddress
-      ? nexusSDK.utils.truncateAddress(address, 6, 6)
-      : address
-        ? fallbackTruncate(address, 6, 6)
-        : "";
-  return (
-    <div className="w-full">
-      {isEditing ? (
-        <div className="flex items-center w-full justify-between gap-x-4">
-          <Input
-            value={address}
-            placeholder="Enter Recipient Address"
-            onChange={(e) => onChange(e.target.value)}
-            className="w-full"
-          />
-          <Button
-            variant={"ghost"}
-            size={"icon"}
-            onClick={() => {
-              setIsEditing(false);
-            }}
-          >
-            <Check className="size-5" />
-          </Button>
-        </div>
-      ) : (
-        <div className="flex flex-col sm:flex-row items-start sm:items-center w-full justify-between">
-          <p className="font-light text-base">Recipient Address</p>
-          <div className="flex items-center gap-x-3 ">
-            {address && (
-              <p className="font-light text-base">{displayAddress}</p>
-            )}
-
-            <Button
-              variant={"ghost"}
-              size={"icon"}
-              onClick={() => {
-                setIsEditing(true);
-              }}
-              className="px-0 size-5"
-              disabled={disabled}
-            >
-              <Edit className="size-5" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RecipientAddress;
diff --git a/apps/megaeth/src/components/fast-bridge/components/source-breakdown.tsx b/apps/megaeth/src/components/fast-bridge/components/source-breakdown.tsx
deleted file mode 100644
index 22eb114..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/source-breakdown.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  SUPPORTED_CHAINS,
-  type ReadableIntent,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { Skeleton } from "../../ui/skeleton";
-import { useNexus } from "../../nexus/NexusProvider";
-
-interface SourceBreakdownProps {
-  intent?: ReadableIntent;
-  tokenSymbol: SUPPORTED_TOKENS;
-  isLoading?: boolean;
-}
-
-const SourceBreakdown = ({
-  intent,
-  tokenSymbol,
-  isLoading = false,
-}: SourceBreakdownProps) => {
-  const { nexusSDK } = useNexus();
-  // const spendSymbol =
-  //   intent?.token.displaySymbol ?? intent?.token.symbol ?? tokenSymbol;
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="sources">
-        <div className="flex items-start justify-between gap-x-4 w-full">
-          {isLoading ? (
-            <>
-              <div className="flex flex-col items-start gap-y-1 min-w-fit">
-                <p className="text-base font-light">You Spend</p>
-                <Skeleton className="h-4 w-44" />
-              </div>
-              <div className="flex flex-col items-end gap-y-1 min-w-fit">
-                <Skeleton className="h-5 w-24" />
-                <div className="w-fit">
-                  <Skeleton className="h-4 w-24" />
-                </div>
-              </div>
-            </>
-          ) : (
-            intent?.sources && (
-              <>
-                <div className="flex flex-col items-start gap-y-1 min-w-fit">
-                  <p className="text-base font-light">You Spend</p>
-                  <p className="text-sm font-light">
-                    {`${intent.token.symbol.toUpperCase()} on ${
-                      intent?.sources?.length
-                    } ${intent?.sources?.length > 1 ? "chains" : "chain"}`}
-                  </p>
-                </div>
-
-                <div className="flex flex-col items-end gap-y-1 min-w-fit">
-                  <p className="text-base font-light">
-                    {nexusSDK?.utils?.formatTokenBalance(intent?.sourcesTotal, {
-                      symbol:
-                        intent.token.symbol === "USDM"
-                          ? "USDC"
-                          : intent.token.symbol,
-                      decimals: intent.token.decimals,
-                    })}
-                  </p>
-                  <AccordionTrigger
-                    containerClassName="w-fit"
-                    className="py-0 items-center gap-x-1"
-                    hideChevron={false}
-                  >
-                    <p className="text-sm font-light">View Sources</p>
-                  </AccordionTrigger>
-                </div>
-              </>
-            )
-          )}
-        </div>
-        {!isLoading && intent?.sources && (
-          <AccordionContent className="my-4 bg-muted pb-0 px-4 py-2 rounded-lg w-full">
-            <div className="flex flex-col items-center gap-y-3">
-              {intent?.sources?.map((source) => (
-                <div
-                  key={source.chain.id}
-                  className="flex items-center justify-between w-full gap-x-2"
-                >
-                  <div className="flex items-center gap-x-2">
-                    <img
-                      src={source?.chain.logo}
-                      alt={source?.chain.name}
-                      width={20}
-                      height={20}
-                      className="rounded-full"
-                    />
-                    <p className="text-base font-light">{source.chain.name}</p>
-                  </div>
-
-                  <p className="text-base font-light">
-                    {nexusSDK?.utils?.formatTokenBalance(source.amount, {
-                      symbol: source.token.symbol,
-                      decimals: source.token.decimals,
-                    })}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </AccordionContent>
-        )}
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default SourceBreakdown;
diff --git a/apps/megaeth/src/components/fast-bridge/components/token-select.tsx b/apps/megaeth/src/components/fast-bridge/components/token-select.tsx
deleted file mode 100644
index 8679b53..0000000
--- a/apps/megaeth/src/components/fast-bridge/components/token-select.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import {
-  SUPPORTED_CHAINS,
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
-import { Label } from "../../ui/label";
-import { useNexus } from "../../nexus/NexusProvider";
-import { useMemo } from "react";
-
-interface TokenSelectProps {
-  selectedToken?: SUPPORTED_TOKENS;
-  selectedChain: SUPPORTED_CHAINS_IDS;
-  handleTokenSelect: (token: SUPPORTED_TOKENS) => void;
-  isTestnet?: boolean;
-  disabled?: boolean;
-  label?: string;
-}
-
-const TokenSelect = ({
-  selectedToken,
-  selectedChain,
-  handleTokenSelect,
-  isTestnet = false,
-  disabled = false,
-  label,
-}: TokenSelectProps) => {
-  const { supportedChainsAndTokens } = useNexus();
-  const tokenData = useMemo(() => {
-    return supportedChainsAndTokens
-      ?.filter((chain) => chain.id === selectedChain)
-      .flatMap((chain) => chain.tokens);
-  }, [selectedChain, supportedChainsAndTokens]);
-
-  const selectedTokenData = tokenData?.find((token) => {
-    return token.symbol === selectedToken;
-  });
-
-  return (
-    <Select
-      value={selectedToken}
-      onValueChange={(value) =>
-        !disabled && handleTokenSelect(value as SUPPORTED_TOKENS)
-      }
-    >
-      <div className="flex flex-col items-start gap-y-1">
-        {label && <Label className="text-sm font-semibold">{label}</Label>}
-        <SelectTrigger
-          disabled={disabled}
-          className="w-full h-12! text-base font-light"
-        >
-          <SelectValue placeholder="Select a token" className="w-full">
-            {selectedChain && selectedTokenData && (
-              <div className="flex items-center gap-x-2 w-full">
-                <img
-                  src={selectedTokenData?.logo}
-                  alt={selectedTokenData?.symbol}
-                  width={24}
-                  height={24}
-                  className="rounded-full"
-                />
-                {selectedToken}
-              </div>
-            )}
-          </SelectValue>
-        </SelectTrigger>
-      </div>
-
-      <SelectContent>
-        <SelectGroup>
-          {tokenData?.map((token) => (
-            <SelectItem key={token.symbol} value={token.symbol}>
-              <div className="flex items-center gap-x-2 my-1">
-                <img
-                  src={token.logo}
-                  alt={token.symbol}
-                  width={24}
-                  height={24}
-                  className="rounded-full"
-                />
-                <div className="flex flex-col">
-                  <span>
-                    {isTestnet ? `${token.symbol} (Testnet)` : token.symbol}
-                  </span>
-                </div>
-              </div>
-            </SelectItem>
-          ))}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-};
-
-export default TokenSelect;
diff --git a/apps/megaeth/src/components/fast-bridge/fast-bridge.tsx b/apps/megaeth/src/components/fast-bridge/fast-bridge.tsx
deleted file mode 100644
index 24cd529..0000000
--- a/apps/megaeth/src/components/fast-bridge/fast-bridge.tsx
+++ /dev/null
@@ -1,526 +0,0 @@
-import { type FC, useEffect, useMemo, useRef, useState } from "react";
-import { Card, CardContent } from "../ui/card";
-import ChainSelect from "./components/chain-select";
-import TokenSelect from "./components/token-select";
-import { Button } from "../ui/button";
-import { X, CheckCircle2 } from "lucide-react";
-import { useNexus } from "../nexus/NexusProvider";
-import AmountInput from "./components/amount-input";
-import FeeBreakdown from "./components/fee-breakdown";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import TransactionProgress from "./components/transaction-progress";
-import AllowanceModal from "./components/allowance-modal";
-import useBridge from "./hooks/useBridge";
-import SourceBreakdown from "./components/source-breakdown";
-import {
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import { type Address } from "viem";
-import { Skeleton } from "../ui/skeleton";
-import RecipientAddress from "./components/recipient-address";
-import ViewHistory from "../view-history/view-history";
-import { toast } from "sonner";
-import Decimal from "decimal.js";
-import { EncryptedText } from "../ui/encrypted-text";
-import FluffeyMascot from "./components/fluffey-mascot";
-
-interface FastBridgeProps {
-  connectedAddress?: Address;
-  isWalletConnected?: boolean;
-  onConnectWallet?: () => void;
-  mockIntent?: {
-    totalAmount?: string;
-    receiveAmount?: string;
-    totalGas?: string;
-  };
-  prefill?: {
-    token: SUPPORTED_TOKENS;
-    chainId: SUPPORTED_CHAINS_IDS;
-    amount?: string;
-    recipient?: Address;
-  };
-  onComplete?: () => void;
-  onStart?: () => void;
-  onError?: (message: string) => void;
-}
-
-const FastBridge: FC<FastBridgeProps> = ({
-  connectedAddress,
-  isWalletConnected,
-  onConnectWallet,
-  mockIntent,
-  onComplete,
-  onStart,
-  onError,
-  prefill,
-}) => {
-  const {
-    nexusSDK,
-    intent,
-    bridgableBalance,
-    allowance,
-    network,
-    fetchBridgableBalance,
-  } = useNexus();
-  const [historyRefreshNonce, setHistoryRefreshNonce] = useState(0);
-
-  const {
-    inputs,
-    setInputs,
-    timer,
-    loading,
-    refreshing,
-    isDialogOpen,
-    txError,
-    setTxError,
-    handleTransaction,
-    reset,
-    filteredBridgableBalance,
-    startTransaction,
-    setIsDialogOpen,
-    commitAmount,
-    lastExplorerUrl,
-    steps,
-    status,
-    areInputsValid,
-  } = useBridge({
-    prefill,
-    network: network ?? "mainnet",
-    connectedAddress,
-    nexusSDK,
-    intent,
-    bridgableBalance,
-    allowance,
-    onComplete: async () => {
-      if (onComplete) {
-        onComplete();
-      }
-
-      const sourcesText =
-        intent.current?.intent?.sources?.length &&
-        intent.current?.intent.sources.length > 0
-          ? intent.current.intent.sources.map((s) => s.chainName).join(", ")
-          : "N/A";
-      toast.success(
-        <div className="flex flex-col gap-2 w-full">
-          <div className="flex items-center gap-2">
-            <CheckCircle2 className="size-5 text-green-500" />
-            <span className="font-semibold">Bridge Successful!</span>
-          </div>
-          <div className="flex flex-col gap-1.5 text-sm text-muted-foreground">
-            <div>
-              <span className="font-medium">Source(s):</span> {sourcesText}
-            </div>
-            <div>
-              <span className="font-medium">Destination:</span>{" "}
-              {intent.current?.intent?.destination?.chainName || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Asset:</span>{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Amount Spent:</span>{" "}
-              {intent.current?.intent?.sourcesTotal
-                ? new Decimal(intent.current?.intent?.sourcesTotal).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol
-                ? intent.current?.intent?.token.symbol.toUpperCase() === "USDM"
-                  ? "USDC"
-                  : intent.current?.intent?.token.symbol
-                : "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Amount Received:</span>{" "}
-              {intent.current?.intent?.destination?.amount
-                ? new Decimal(
-                    intent.current?.intent?.destination?.amount,
-                  ).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Total Fees:</span>{" "}
-              {intent.current?.intent?.fees.total
-                ? new Decimal(intent.current?.intent?.fees.total).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol
-                ? intent.current?.intent?.token.symbol.toUpperCase() === "USDM"
-                  ? "USDC"
-                  : intent.current?.intent?.token.symbol
-                : "Unknown"}
-            </div>
-            {lastExplorerUrl ? (
-              <div className="mt-2 pt-2 border-t">
-                <a
-                  href={lastExplorerUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-primary hover:underline font-medium"
-                >
-                  View on Explorer
-                </a>
-              </div>
-            ) : null}
-          </div>
-        </div>,
-        {
-          duration: Infinity, // Stay until dismissed
-          closeButton: true,
-          icon: null, // Remove default icon since we're adding our own
-        },
-      );
-      setHistoryRefreshNonce((prev) => prev + 1);
-    },
-    onStart,
-    onError: (message) => {
-      toast.error(message);
-      if (onError) {
-        onError(message);
-      }
-    },
-    fetchBalance: fetchBridgableBalance,
-  });
-  const isConnected = isWalletConnected ?? Boolean(connectedAddress);
-  const isSdkReady = Boolean(nexusSDK);
-  const showSdkDetails = isSdkReady;
-  const receiveSymbol =
-    intent?.current?.intent?.token.symbol ??
-    intent?.current?.intent?.token.displaySymbol ??
-    filteredBridgableBalance?.symbol;
-
-  const amountValue = useMemo(() => {
-    if (!inputs?.amount) return null;
-    const parsed = Number.parseFloat(inputs.amount);
-    return Number.isFinite(parsed) ? parsed : null;
-  }, [inputs?.amount]);
-
-  const hasValidAmount = useMemo(() => {
-    if (amountValue === null) return false;
-    return amountValue > 0;
-  }, [amountValue]);
-
-  const formatMockNumber = (value: number) => {
-    if (!Number.isFinite(value)) return "--";
-    const fixed = value.toFixed(6);
-    return fixed.replace(/\.?0+$/, "");
-  };
-
-  const formatWithToken = (value: string, token?: string) => {
-    if (!token) return value;
-    return `${value} ${token}`.trim();
-  };
-
-  const tokenSuffix =
-    inputs?.token ?? filteredBridgableBalance?.symbol ?? "USDC";
-
-  const mockPreview = useMemo(() => {
-    if (!hasValidAmount || amountValue === null) return null;
-    if (mockIntent) {
-      return {
-        totalAmount: mockIntent.totalAmount ?? "--",
-        receiveAmount: mockIntent.receiveAmount ?? "--",
-        totalGas: mockIntent.totalGas ?? "--",
-      };
-    }
-    const totalGas = amountValue * 0.001;
-    const totalAmount = amountValue + totalGas;
-    return {
-      totalAmount: formatWithToken(formatMockNumber(totalAmount), tokenSuffix),
-      receiveAmount: formatWithToken(
-        formatMockNumber(amountValue),
-        tokenSuffix,
-      ),
-      totalGas: formatWithToken(formatMockNumber(totalGas), tokenSuffix),
-    };
-  }, [amountValue, hasValidAmount, mockIntent, tokenSuffix]);
-
-  const showMockPreview = !isConnected && hasValidAmount && mockPreview;
-  const autoIntentTriggered = useRef(false);
-
-  useEffect(() => {
-    autoIntentTriggered.current = false;
-  }, [inputs?.amount, inputs?.chain, inputs?.token, inputs?.recipient]);
-
-  useEffect(() => {
-    if (!isConnected || !isSdkReady) return;
-    if (!areInputsValid) return;
-    if (intent.current) return;
-    // if (loading) return; // Removed to allow "10" fetch even if "1" is loading
-    if (autoIntentTriggered.current) return;
-    autoIntentTriggered.current = true;
-    void handleTransaction();
-  }, [
-    areInputsValid,
-    handleTransaction,
-    intent,
-    isConnected,
-    isSdkReady,
-    loading,
-  ]);
-  return (
-    <div className="flex flex-col gap-y-4 w-full max-w-xl">
-      <FluffeyMascot />
-      <div
-        className="relative z-10 w-full text-primary py-2.5 px-4 flex items-center justify-between rounded-lg shadow-sm"
-        style={{
-          background:
-            "linear-gradient(180deg, #F5AF94 0%, #FF8AA8 70%, #90D79F 75%, #7EAAD4 100%)",
-        }}
-      >
-        <div className="flex items-center gap-x-3">
-          <img
-            src="https://files.availproject.org/fastbridge/megaeth/megaeth-mascot-1.png"
-            className="w-10 -my-5 flex items-center justify-center shrink-0"
-            height={112}
-            width={40}
-            style={{ aspectRatio: "5/14" }}
-          />
-          <p className="font-medium text-sm">
-            <EncryptedText
-              text="Zero solver and protocol fees when bridging to MegaETH."
-              revealDelayMs={50}
-              flipDelayMs={25}
-              encryptedClassName="text-primary"
-              revealedClassName="text-primary"
-              charset="AEFHIJKLNPRSTUXYabcdefghijklmnopqrstuvwxyz"
-            />
-            <br />
-            <EncryptedText
-              text="48h window. Don't fade anon."
-              revealDelayMs={50}
-              flipDelayMs={25}
-              encryptedClassName="text-primary"
-              revealedClassName="text-primary"
-              charset="AEFHIJKLNPRSTUXYabcdefghijklmnopqrstuvwxyz"
-            />
-          </p>
-        </div>
-      </div>
-      <Card className="w-full relative z-10">
-        <CardContent className="flex flex-col gap-y-4 w-full px-2 sm:px-6 relative">
-          {showSdkDetails && (
-            <ViewHistory
-              className="absolute -top-2 right-3"
-              refreshNonce={historyRefreshNonce}
-            />
-          )}
-          <ChainSelect
-            selectedChain={inputs?.chain}
-            handleSelect={(chain) =>
-              setInputs({
-                ...inputs,
-                chain,
-              })
-            }
-            label="To"
-            disabled={!!prefill?.chainId}
-          />
-          <TokenSelect
-            selectedChain={inputs?.chain}
-            selectedToken={inputs?.token}
-            handleTokenSelect={(token) => setInputs({ ...inputs, token })}
-            disabled={!!prefill?.token}
-          />
-          <AmountInput
-            amount={inputs?.amount}
-            onChange={(amount) => setInputs({ ...inputs, amount })}
-            bridgableBalance={filteredBridgableBalance}
-            onCommit={() => void commitAmount()}
-            disabled={refreshing || !!prefill?.amount}
-            inputs={inputs}
-            showBalanceDetails={showSdkDetails}
-          />
-          <RecipientAddress
-            address={inputs?.recipient}
-            onChange={(address) =>
-              setInputs({ ...inputs, recipient: address as `0x${string}` })
-            }
-            disabled={!!prefill?.recipient}
-          />
-          {showMockPreview && (
-            <div className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 space-y-3">
-              <div className="flex items-center justify-between">
-                <p className="text-base font-light">You spend</p>
-                <p className="text-base font-light">
-                  {mockPreview?.totalAmount}
-                </p>
-              </div>
-              <div className="flex items-center justify-between">
-                <p className="text-base font-light">You receive</p>
-                <p className="text-base font-light">
-                  {mockPreview?.receiveAmount}
-                </p>
-              </div>
-              <div className="flex items-center justify-between">
-                <p className="text-base font-light">Total gas</p>
-                <p className="text-base font-light">{mockPreview?.totalGas}</p>
-              </div>
-            </div>
-          )}
-
-          {showSdkDetails && intent?.current?.intent && (
-            <>
-              <SourceBreakdown
-                intent={intent?.current?.intent}
-                tokenSymbol={
-                  filteredBridgableBalance?.symbol as SUPPORTED_TOKENS
-                }
-                isLoading={refreshing}
-              />
-
-              <div className="w-full flex items-start justify-between gap-x-4">
-                <p className="text-base font-light">You receive</p>
-                <div className="flex flex-col gap-y-1 min-w-fit">
-                  {refreshing ? (
-                    <Skeleton className="h-5 w-28" />
-                  ) : (
-                    <p className="text-base font-light text-right">
-                      {`${
-                        connectedAddress === inputs?.recipient
-                          ? intent?.current?.intent?.destination?.amount
-                          : inputs.amount
-                      } ${receiveSymbol}`}
-                    </p>
-                  )}
-                  {refreshing ? (
-                    <Skeleton className="h-4 w-36" />
-                  ) : (
-                    <p className="text-sm font-light text-right">
-                      on {intent?.current?.intent?.destination?.chainName}
-                    </p>
-                  )}
-                </div>
-              </div>
-              <FeeBreakdown
-                intent={intent?.current?.intent}
-                isLoading={refreshing}
-              />
-            </>
-          )}
-
-          {!intent.current && (
-            <Button
-              onClick={() => {
-                if (!isConnected) {
-                  if (onConnectWallet) {
-                    onConnectWallet();
-                  } else {
-                    toast.error("Wallet connection not available");
-                  }
-                } else if (!isSdkReady) {
-                  toast.info("Please wait, SDK is still initializing...");
-                } else if (!areInputsValid) {
-                  toast.error(
-                    "Please enter a valid amount and recipient address",
-                  );
-                } else {
-                  // Connected, SDK ready, inputs valid - trigger transaction
-                  void handleTransaction();
-                }
-              }}
-              disabled={
-                !isConnected
-                  ? false
-                  : !inputs?.amount ||
-                    !inputs?.recipient ||
-                    !inputs?.chain ||
-                    !inputs?.token ||
-                    loading ||
-                    Number(inputs?.amount) > 5000
-              }
-            >
-              {!isConnected
-                ? "Connect Wallet"
-                : !isSdkReady
-                  ? "Initializing..."
-                  : !areInputsValid
-                    ? "Bridge"
-                    : status === "error" || txError
-                      ? "Retry"
-                      : "Fetching intent..."}
-            </Button>
-          )}
-
-          <Dialog
-            open={isDialogOpen}
-            onOpenChange={(open) => {
-              if (loading) return;
-              setIsDialogOpen(open);
-            }}
-          >
-            {intent.current && !isDialogOpen && (
-              <div className="w-full flex items-center gap-x-2 justify-between">
-                <Button
-                  variant={"destructive"}
-                  onClick={reset}
-                  className="w-1/2"
-                >
-                  Deny
-                </Button>
-                <DialogTrigger asChild>
-                  <Button
-                    onClick={startTransaction}
-                    className="w-1/2"
-                    disabled={refreshing}
-                  >
-                    {refreshing ? "Refreshing..." : "Accept"}
-                  </Button>
-                </DialogTrigger>
-              </div>
-            )}
-
-            <DialogContent showCloseButton={false}>
-              <DialogHeader className="sr-only">
-                <DialogTitle>Transaction Progress</DialogTitle>
-              </DialogHeader>
-              {allowance.current ? (
-                <AllowanceModal
-                  allowance={allowance}
-                  callback={startTransaction}
-                  onCloseCallback={reset}
-                />
-              ) : (
-                <TransactionProgress
-                  timer={timer}
-                  steps={steps}
-                  viewIntentUrl={lastExplorerUrl}
-                  operationType={"bridge"}
-                  completed={status === "success"}
-                />
-              )}
-            </DialogContent>
-          </Dialog>
-
-          {txError && (
-            <div className="rounded-md border border-destructive bg-destructive/80 px-3 py-2 text-sm text-destructive-foreground flex items-start justify-between gap-x-3 mt-3 w-full">
-              <span className="flex-1 w-full">{txError}</span>
-              <Button
-                type="button"
-                size={"icon"}
-                variant={"ghost"}
-                onClick={() => {
-                  reset();
-                  setTxError(null);
-                }}
-                className="text-destructive-foreground/80 hover:text-destructive-foreground focus:outline-none"
-                aria-label="Dismiss error"
-              >
-                <X className="size-4" />
-              </Button>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default FastBridge;
diff --git a/apps/megaeth/src/components/fast-bridge/hooks/useBridge.ts b/apps/megaeth/src/components/fast-bridge/hooks/useBridge.ts
deleted file mode 100644
index cd48904..0000000
--- a/apps/megaeth/src/components/fast-bridge/hooks/useBridge.ts
+++ /dev/null
@@ -1,401 +0,0 @@
-import {
-  type BridgeStepType,
-  NEXUS_EVENTS,
-  type NexusNetwork,
-  NexusSDK,
-  type OnAllowanceHookData,
-  type OnIntentHookData,
-  // SUPPORTED_CHAINS,
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-  type UserAsset,
-} from "@avail-project/nexus-core";
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useReducer,
-  type RefObject,
-} from "react";
-import { type Address, isAddress } from "viem";
-import {
-  useStopwatch,
-  usePolling,
-  useNexusError,
-  useTransactionSteps,
-  type TransactionStatus,
-} from "../../common";
-import config from "../../../../config";
-import { trackBridgeSubmit } from "../../../lib/posthog";
-import { SHORT_CHAIN_NAME } from "../../common/utils/constant";
-
-export interface FastBridgeState {
-  chain: SUPPORTED_CHAINS_IDS;
-  token: SUPPORTED_TOKENS;
-  amount?: string;
-  recipient?: `0x${string}`;
-}
-
-const ALLOWED_TOKENS = new Set([
-  "USDC",
-  "USDT",
-  "USDM",
-]) as Set<SUPPORTED_TOKENS>;
-
-interface UseBridgeProps {
-  network: NexusNetwork;
-  connectedAddress?: Address;
-  nexusSDK: NexusSDK | null;
-  intent: RefObject<OnIntentHookData | null>;
-  allowance: RefObject<OnAllowanceHookData | null>;
-  bridgableBalance: UserAsset[] | null;
-  prefill?: {
-    token: string;
-    chainId: number;
-    amount?: string;
-    recipient?: Address;
-  };
-  onComplete?: () => void;
-  onStart?: () => void;
-  onError?: (message: string) => void;
-  fetchBalance: () => Promise<void>;
-}
-
-type BridgeState = {
-  inputs: FastBridgeState;
-  status: TransactionStatus;
-};
-
-type Action =
-  | { type: "setInputs"; payload: Partial<FastBridgeState> }
-  | { type: "resetInputs" }
-  | { type: "setStatus"; payload: TransactionStatus };
-
-const buildInitialInputs = (
-  connectedAddress?: Address,
-  prefill?: {
-    token: string;
-    chainId: number;
-    amount?: string;
-    recipient?: Address;
-  },
-): FastBridgeState => {
-  const validToken =
-    prefill?.token &&
-      ALLOWED_TOKENS.has(prefill.token.toUpperCase() as SUPPORTED_TOKENS)
-      ? (prefill.token.toUpperCase() as SUPPORTED_TOKENS)
-      : config.nexusPrimaryToken || "USDC";
-
-  const validAmount = prefill?.amount
-    ? (() => {
-      const sanitized = prefill.amount.trim();
-      if (!sanitized || sanitized === "." || !/^\d*\.?\d*$/.test(sanitized))
-        return undefined;
-      const num = Number.parseFloat(sanitized);
-      return Number.isNaN(num) || num <= 0 || num > 1e9
-        ? undefined
-        : sanitized;
-    })()
-    : undefined;
-
-  const validRecipient =
-    prefill?.recipient && isAddress(prefill.recipient)
-      ? (prefill.recipient as `0x${string}`)
-      : connectedAddress;
-
-  return {
-    chain: config.chainId as SUPPORTED_CHAINS_IDS,
-    token: validToken as SUPPORTED_TOKENS,
-    amount: validAmount,
-    recipient: validRecipient,
-  };
-};
-
-const useBridge = ({
-  connectedAddress,
-  nexusSDK,
-  intent,
-  bridgableBalance,
-  prefill,
-  onComplete,
-  onStart,
-  onError,
-  fetchBalance,
-  allowance,
-}: UseBridgeProps) => {
-  const handleNexusError = useNexusError();
-  const initialState: BridgeState = {
-    inputs: buildInitialInputs(connectedAddress, prefill),
-    status: "idle",
-  };
-  function reducer(state: BridgeState, action: Action): BridgeState {
-    switch (action.type) {
-      case "setInputs":
-        return { ...state, inputs: { ...state.inputs, ...action.payload } };
-      case "resetInputs":
-        return {
-          ...state,
-          inputs: buildInitialInputs(connectedAddress, prefill),
-        };
-      case "setStatus":
-        return { ...state, status: action.payload };
-      default:
-        return state;
-    }
-  }
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const inputs = state.inputs;
-  const setInputs = (next: FastBridgeState | Partial<FastBridgeState>) => {
-    dispatch({ type: "setInputs", payload: next as Partial<FastBridgeState> });
-  };
-
-  const loading = state.status === "executing";
-  const [refreshing, setRefreshing] = useState(false);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [txError, setTxError] = useState<string | null>(null);
-  const [lastExplorerUrl, setLastExplorerUrl] = useState<string>("");
-  const commitLockRef = useRef<boolean>(false);
-  const txnIdRef = useRef(0);
-  const {
-    steps,
-    onStepsList,
-    onStepComplete,
-    reset: resetSteps,
-  } = useTransactionSteps<BridgeStepType>();
-
-  const areInputsValid = useMemo(() => {
-    const hasToken = inputs?.token !== undefined && inputs?.token !== null;
-    const hasChain = inputs?.chain !== undefined && inputs?.chain !== null;
-    const hasAmount = Boolean(inputs?.amount) && Number(inputs?.amount) > 0;
-    const hasValidrecipient =
-      Boolean(inputs?.recipient) && isAddress(inputs?.recipient as string);
-    return hasToken && hasChain && hasAmount && hasValidrecipient;
-  }, [inputs]);
-
-  const resetIntent = () => {
-    intent.current = null;
-    allowance.current = null;
-  };
-
-  const handleTransaction = async () => {
-    const currentTxnId = ++txnIdRef.current;
-    if (!inputs.amount) {
-      setTxError("Amount is required");
-      return;
-    }
-    if (Number(inputs.amount) === 0) {
-      setTxError("Amount should be greater than 0");
-      return;
-    }
-    if (
-      !inputs?.amount ||
-      !inputs?.recipient ||
-      !inputs?.chain ||
-      !inputs?.token
-    ) {
-      console.error("Missing required inputs");
-      return;
-    }
-
-    if (Number(inputs.amount) > 5000) {
-      setTxError("Amount exceeds maximum limit of 5000");
-      return;
-    }
-    dispatch({ type: "setStatus", payload: "executing" });
-    setTxError(null);
-    onStart?.();
-
-    // Track bridge submit event with PostHog
-    trackBridgeSubmit({
-      chain: inputs.chain,
-      chainName: SHORT_CHAIN_NAME[inputs.chain] || `Chain ${inputs.chain}`,
-      tokenSymbol: inputs.token,
-      amount: inputs.amount,
-      fast_bridge: "megaeth",
-    });
-
-    try {
-      if (!nexusSDK) {
-        throw new Error("Nexus SDK not initialized");
-      }
-      const formattedAmount = nexusSDK.convertTokenReadableAmountToBigInt(
-        inputs?.amount,
-        inputs?.token,
-        inputs?.chain,
-      );
-      setLastExplorerUrl("");
-      const bridgeTxn = await nexusSDK.bridge(
-        {
-          token: inputs?.token,
-          amount: formattedAmount,
-          toChainId: inputs?.chain,
-          recipient: inputs?.recipient,
-        },
-        {
-          onEvent: (event) => {
-            if (currentTxnId !== txnIdRef.current) return;
-            if (event.name === NEXUS_EVENTS.STEPS_LIST) {
-              const list = Array.isArray(event.args) ? event.args : [];
-              onStepsList(list);
-            }
-            if (event.name === NEXUS_EVENTS.STEP_COMPLETE) {
-              console.log("STEP_EVENT", event);
-              if (event.args.type === "INTENT_HASH_SIGNED") {
-                stopwatch.start();
-              }
-              onStepComplete(event.args);
-            }
-          },
-        },
-      );
-      if (currentTxnId !== txnIdRef.current) return;
-
-      if (!bridgeTxn) {
-        throw new Error("Something went wrong, please try again");
-      }
-      if (bridgeTxn) {
-        setLastExplorerUrl(bridgeTxn.explorerUrl);
-        await onSuccess();
-      }
-    } catch (error) {
-      if (currentTxnId !== txnIdRef.current) return;
-      const { message } = handleNexusError(error);
-      // intent.current?.deny();
-      intent.current = null;
-      allowance.current = null;
-      console.log("NEXUS-ERROR-MESSAGE", message)
-      setTxError(message);
-      onError?.(message);
-      setIsDialogOpen(false);
-      dispatch({ type: "setStatus", payload: "error" });
-    }
-  };
-
-  const onSuccess = async () => {
-    // Close dialog and stop timer on success
-    stopwatch.stop();
-    dispatch({ type: "setStatus", payload: "success" });
-    onComplete?.();
-    intent.current = null;
-    allowance.current = null;
-    dispatch({ type: "resetInputs" });
-    setRefreshing(false);
-    await fetchBalance();
-  };
-
-  const filteredBridgableBalance = useMemo(() => {
-    return bridgableBalance?.find((bal) => inputs.token === 'USDM' ? bal?.symbol === 'USDC' : bal?.symbol === inputs?.token);
-  }, [bridgableBalance, inputs?.token]);
-
-  const refreshIntent = async () => {
-    setRefreshing(true);
-    try {
-      await intent.current?.refresh([]);
-    } catch (error) {
-      console.error("Transaction failed:", error);
-    } finally {
-      setRefreshing(false);
-    }
-  };
-
-  const reset = () => {
-    // intent.current?.deny();
-    intent.current = null;
-    allowance.current = null;
-    dispatch({ type: "resetInputs" });
-    dispatch({ type: "setStatus", payload: "idle" });
-    setRefreshing(false);
-    stopwatch.stop();
-    stopwatch.reset();
-    resetSteps();
-  };
-
-  const startTransaction = () => {
-    // Reset timer for a fresh run
-    intent.current?.allow();
-    setIsDialogOpen(true);
-    setTxError(null);
-  };
-
-  const commitAmount = async () => {
-    if (commitLockRef.current) return;
-    if (loading || txError || !areInputsValid) return resetIntent();
-
-    // Validate amount before proceeding
-    if (inputs?.amount) {
-      const amountStr = inputs.amount.trim();
-      if (!amountStr) return resetIntent();
-
-      const amount = Number.parseFloat(amountStr);
-      if (Number.isNaN(amount) || amount <= 0) return resetIntent();
-    }
-
-    commitLockRef.current = true;
-    try {
-      await handleTransaction();
-    } finally {
-      commitLockRef.current = false;
-    }
-  };
-
-  usePolling(Boolean(intent.current) && !isDialogOpen, refreshIntent, 15000);
-
-  const stopwatch = useStopwatch({ intervalMs: 100 });
-
-  useEffect(() => {
-    if (intent.current) {
-      // intent.current.deny();
-      intent.current = null;
-    }
-  }, [inputs]);
-
-  useEffect(() => {
-    if (!isDialogOpen) {
-      stopwatch.stop();
-      stopwatch.reset();
-      // Reset all transaction state when dialog closes
-      if (state.status === "success" || state.status === "error") {
-        resetSteps();
-        setLastExplorerUrl("");
-        dispatch({ type: "setStatus", payload: "idle" });
-      }
-    }
-  }, [isDialogOpen, stopwatch, state.status]);
-
-  useEffect(() => {
-    if (txError) {
-      setTxError(null);
-    }
-  }, [inputs]);
-
-  useEffect(() => {
-    if (connectedAddress && !inputs?.recipient) {
-      setInputs({ recipient: connectedAddress as `0x${string}` });
-    }
-  }, [connectedAddress, inputs?.recipient]);
-
-  return {
-    inputs,
-    setInputs,
-    timer: stopwatch.seconds,
-    setIsDialogOpen,
-    setTxError,
-    loading,
-    refreshing,
-    isDialogOpen,
-    txError,
-    handleTransaction,
-    reset,
-    filteredBridgableBalance,
-    startTransaction,
-    commitAmount,
-    lastExplorerUrl,
-    steps,
-    status: state.status,
-    areInputsValid,
-    resetIntent
-  };
-};
-
-export default useBridge;
diff --git a/apps/megaeth/src/components/hero-section.tsx b/apps/megaeth/src/components/hero-section.tsx
deleted file mode 100644
index 89ca4ff..0000000
--- a/apps/megaeth/src/components/hero-section.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function HeroSection() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" style={{display: "none", width: "100%", marginLeft: "auto", marginRight: "auto", fontSize: "3em", fontWeight: "100"}}>
-      Bridge your unified USDC/USDT balances across 12+ chains, to Avalanche, instantly!
-    </div>
-  );
-}
diff --git a/apps/megaeth/src/components/navbar.tsx b/apps/megaeth/src/components/navbar.tsx
deleted file mode 100644
index 22253e1..0000000
--- a/apps/megaeth/src/components/navbar.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-import { ConnectKitButton } from "connectkit";
-import config from "../../config";
-import AvailLogo from "/avail_logo.svg";
-
-export default function Navbar() {
-  return (
-    <nav className="relative border-b border-border z-10 w-full overflow-x-hidden">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
-        <div className="flex items-center justify-between h-16 min-w-0">
-          <div className="flex items-center min-w-0 shrink overflow-hidden">
-            {config.useChainLogo && (
-              <img
-                src={config.chainLogoUrl}
-                alt={config.chainName}
-                width={150}
-                height={40}
-                className="h-8 w-auto"
-              />
-            )}
-            {!config.useChainLogo && (
-              <div
-                className="text-2xl sm:text-3xl font-light truncate"
-                style={{
-                  marginLeft: "10px",
-                  textTransform: "uppercase",
-                  color: config.primaryColor,
-                  letterSpacing: "0.1em",
-                }}
-              >
-                {config.chainName}
-              </div>
-            )}
-            <div
-              className="hidden md:block text-xl"
-              style={{
-                marginLeft: "5px",
-                fontWeight: "100",
-                paddingTop: "5px",
-              }}
-            >
-              Fast Bridge by
-            </div>
-            <a
-              className="hidden md:block text-xl"
-              href="https://availproject.org"
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{
-                marginLeft: "5px",
-                fontWeight: "100",
-                paddingTop: "5px",
-              }}
-            >
-              <img src={AvailLogo} alt="Avail Logo" width={75} height={20} />
-            </a>
-          </div>
-
-          {/* Right side - Wallet connect only */}
-          <div className="flex items-center shrink-0">
-            <ConnectKitButton />
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}
diff --git a/apps/megaeth/src/components/nexus/NexusProvider.tsx b/apps/megaeth/src/components/nexus/NexusProvider.tsx
deleted file mode 100644
index 8fde99e..0000000
--- a/apps/megaeth/src/components/nexus/NexusProvider.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-"use client";
-import {
-  type EthereumProvider,
-  type NexusNetwork,
-  NexusSDK,
-  type OnAllowanceHookData,
-  type OnIntentHookData,
-  type OnSwapIntentHookData,
-  type SupportedChainsAndTokensResult,
-  type SupportedChainsResult,
-  type UserAsset,
-} from "@avail-project/nexus-core";
-
-import {
-  createContext,
-  type RefObject,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useAccountEffect } from "wagmi";
-
-interface NexusContextType {
-  nexusSDK: NexusSDK | null;
-  bridgableBalance: UserAsset[] | null;
-  swapBalance: UserAsset[] | null;
-  intent: RefObject<OnIntentHookData | null>;
-  allowance: RefObject<OnAllowanceHookData | null>;
-  swapIntent: RefObject<OnSwapIntentHookData | null>;
-  exchangeRate: Record<string, number> | null;
-  supportedChainsAndTokens: SupportedChainsAndTokensResult | null;
-  swapSupportedChainsAndTokens: SupportedChainsResult | null;
-  network?: NexusNetwork;
-  loading: boolean;
-  handleInit: (provider: EthereumProvider) => Promise<void>;
-  fetchBridgableBalance: () => Promise<void>;
-  fetchSwapBalance: () => Promise<void>;
-  getFiatValue: (amount: number, token: string) => number;
-  initializeNexus: (provider: EthereumProvider) => Promise<void>;
-  deinitializeNexus: () => Promise<void>;
-  attachEventHooks: () => void;
-  setIntent: (data: OnIntentHookData | null) => void;
-  setAllowance: (data: OnAllowanceHookData | null) => void;
-}
-
-const NexusContext = createContext<NexusContextType | undefined>(undefined);
-
-type NexusProviderProps = {
-  children: React.ReactNode;
-  config?: {
-    network?: NexusNetwork;
-    debug?: boolean;
-  };
-};
-
-const defaultConfig: Required<NexusProviderProps["config"]> = {
-  network: "mainnet",
-  debug: false,
-};
-
-const NexusProvider = ({
-  children,
-  config = defaultConfig,
-}: NexusProviderProps) => {
-  const stableConfig = useMemo(
-    () => ({ ...defaultConfig, ...config }),
-    [config],
-  );
-
-  const sdkRef = useRef<NexusSDK | null>(null);
-  sdkRef.current ??= new NexusSDK({
-    ...stableConfig,
-  });
-  const sdk = sdkRef.current;
-
-  const [nexusSDK, setNexusSDK] = useState<NexusSDK | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [supportedChainsAndTokens, setSupportedChainsAndTokens] =
-    useState<SupportedChainsAndTokensResult | null>(
-      sdk.utils.getSupportedChains(
-        stableConfig.network === "testnet" ? 0 : undefined,
-      ) ?? null,
-    );
-  const [swapSupportedChainsAndTokens, setSwapSupportedChainsAndTokens] =
-    useState<SupportedChainsResult | null>(
-      sdk.utils.getSwapSupportedChainsAndTokens() ?? null,
-    );
-  const [bridgableBalance, setBridgableBalance] = useState<UserAsset[] | null>(
-    null,
-  );
-  const [swapBalance, setSwapBalance] = useState<UserAsset[] | null>(null);
-  const exchangeRate = useRef<Record<string, number> | null>(null);
-
-  const intent = useRef<OnIntentHookData | null>(null);
-  const allowance = useRef<OnAllowanceHookData | null>(null);
-  const swapIntent = useRef<OnSwapIntentHookData | null>(null);
-
-  useEffect(() => {
-    const list = sdk.utils.getSupportedChains(
-      stableConfig.network === "testnet" ? 0 : undefined,
-    );
-    setSupportedChainsAndTokens(list ?? null);
-    const swapList = sdk.utils.getSwapSupportedChainsAndTokens();
-    setSwapSupportedChainsAndTokens(swapList ?? null);
-  }, [sdk, stableConfig.network]);
-
-  const setupNexus = useCallback(async () => {
-    const list = sdk.utils.getSupportedChains(
-      stableConfig.network === "testnet" ? 0 : undefined,
-    );
-    setSupportedChainsAndTokens(list ?? null);
-    const swapList = sdk.utils.getSwapSupportedChainsAndTokens();
-    setSwapSupportedChainsAndTokens(swapList ?? null);
-    const [bridgeAbleBalanceResult, rates] = await Promise.allSettled([
-      sdk.getBalancesForBridge(),
-      sdk.utils.getCoinbaseRates(),
-    ]);
-    console.log("bridgeAbleBalanceResult", bridgeAbleBalanceResult);
-
-    if (bridgeAbleBalanceResult.status === "fulfilled") {
-      setBridgableBalance(bridgeAbleBalanceResult.value);
-    }
-
-    if (rates?.status === "fulfilled") {
-      // Coinbase returns "units per USD" (e.g., 1 USD = 0.00028 ETH).
-      // Convert to "USD per unit" (e.g., 1 ETH = ~$3514) for straightforward UI calculations.
-      const usdPerUnit: Record<string, number> = {};
-
-      for (const [symbol, value] of Object.entries(rates.value)) {
-        const unitsPerUsd = Number.parseFloat(String(value));
-        if (Number.isFinite(unitsPerUsd) && unitsPerUsd > 0) {
-          usdPerUnit[symbol.toUpperCase()] = 1 / unitsPerUsd;
-        }
-      }
-      exchangeRate.current = usdPerUnit;
-    }
-  }, [sdk, stableConfig.network]);
-
-  const initializeNexus = async (provider: EthereumProvider) => {
-    setLoading(true);
-    try {
-      if (sdk.isInitialized()) throw new Error("Nexus is already initialized");
-      await sdk.initialize(provider);
-      setNexusSDK(sdk);
-    } catch (error) {
-      console.error("Error initializing Nexus:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const deinitializeNexus = async () => {
-    try {
-      if (!nexusSDK) return;
-      await nexusSDK.deinit();
-      setNexusSDK(null);
-      setBridgableBalance(null);
-      setSwapBalance(null);
-      exchangeRate.current = null;
-      intent.current = null;
-      swapIntent.current = null;
-      allowance.current = null;
-      setLoading(false);
-    } catch (error) {
-      console.error("Error deinitializing Nexus:", error);
-    }
-  };
-
-  const attachEventHooks = () => {
-    sdk.setOnAllowanceHook((data: OnAllowanceHookData) => {
-      /**
-       * Useful when you want the user to select, min, max or a custom value
-       * Can use this to capture data and then show it on the UI
-       * @see - always call data.allow() to progress the flow, otherwise it will stay stuck here.
-       * const {allow, sources, deny} = data
-       * @example allow(['min', 'max', '0.5']), the array in allow function should match number of sources.
-       * You can skip setting this hook if you want, sdk will auto progress if this hook is not attached
-       */
-      allowance.current = data;
-    });
-
-    sdk.setOnIntentHook((data: OnIntentHookData) => {
-      /**
-       * Useful when you want to capture the intent, and display it on the UI (bridge, bridgeAndTransfer, bridgeAndExecute)
-       * const {allow, deny, intent, refresh} = data
-       * @see - always call data.allow() to progress the flow, otherwise it will stay stuck here.
-       * deny() to reject the intent
-       * refresh() to refresh the intent, best to call refresh in 15 second intervals
-       * data.intent -> details about the intent, useful when wanting to display info on UI
-       * You can skip setting this hook if you want, sdk will auto progress if this hook is not attached
-       */
-      intent.current = data;
-    });
-
-    sdk.setOnSwapIntentHook((data: OnSwapIntentHookData) => {
-      /**
-       * Same behaviour and function as setOnIntentHook, except this one is for swaps exclusively
-       */
-      swapIntent.current = data;
-    });
-  };
-
-  const handleInit = async (provider: EthereumProvider) => {
-    console.log("[NexusProvider] handleInit called");
-    console.log("[NexusProvider] SDK isInitialized:", sdk.isInitialized());
-    console.log("[NexusProvider] Loading:", loading);
-
-    if (sdk.isInitialized() || loading) {
-      console.log(
-        "[NexusProvider] Skipping init - already initialized or loading",
-      );
-      return;
-    }
-
-    if (!provider || typeof provider.request !== "function") {
-      console.error("[NexusProvider] Invalid provider:", provider);
-      throw new Error("Invalid EIP-1193 provider");
-    }
-
-    console.log("[NexusProvider] Calling initializeNexus...");
-    await initializeNexus(provider);
-
-    console.log("[NexusProvider] Calling setupNexus...");
-    await setupNexus();
-
-    console.log("[NexusProvider] Calling attachEventHooks...");
-    attachEventHooks();
-
-    console.log("[NexusProvider] handleInit complete!");
-  };
-
-  const fetchBridgableBalance = async () => {
-    try {
-      const updatedBalance = await sdk.getBalancesForBridge();
-      console.log("bridgeAbleBalanceResult", updatedBalance);
-      setBridgableBalance(updatedBalance);
-    } catch (error) {
-      console.error("Error fetching bridgable balance:", error);
-    }
-  };
-
-  const fetchSwapBalance = async () => {
-    try {
-      const updatedBalance = await sdk.getBalancesForSwap();
-      console.log("swapBalance", updatedBalance);
-      setSwapBalance(updatedBalance);
-    } catch (error) {
-      console.error("Error fetching swap balance:", error);
-    }
-  };
-
-  function getFiatValue(amount: number, token: string) {
-    const key = token.toUpperCase();
-    const rate = exchangeRate.current?.[key] ?? 1;
-    return rate * amount;
-  }
-
-  useAccountEffect({
-    onDisconnect() {
-      deinitializeNexus();
-    },
-  });
-
-  const setIntent = (data: OnIntentHookData | null) => {
-    intent.current = data;
-  };
-
-  const setAllowance = (data: OnAllowanceHookData | null) => {
-    allowance.current = data;
-  };
-
-  const value = useMemo(
-    () => ({
-      nexusSDK,
-      initializeNexus,
-      deinitializeNexus,
-      attachEventHooks,
-      intent,
-      allowance,
-      handleInit,
-      supportedChainsAndTokens,
-      swapSupportedChainsAndTokens,
-      bridgableBalance,
-      swapBalance: swapBalance,
-      network: config?.network,
-      loading,
-      fetchBridgableBalance,
-      fetchSwapBalance,
-      swapIntent,
-      exchangeRate: exchangeRate.current,
-      getFiatValue,
-      setIntent,
-      setAllowance,
-    }),
-    [
-      nexusSDK,
-      initializeNexus,
-      deinitializeNexus,
-      attachEventHooks,
-      handleInit,
-      swapBalance,
-      config,
-      loading,
-      fetchBridgableBalance,
-      fetchSwapBalance,
-      setIntent,
-      setAllowance,
-      supportedChainsAndTokens,
-      swapSupportedChainsAndTokens,
-    ],
-  );
-  return (
-    <NexusContext.Provider value={value}>{children}</NexusContext.Provider>
-  );
-};
-
-export function useNexus() {
-  const context = useContext(NexusContext);
-  if (!context) {
-    throw new Error("useNexus must be used within a NexusProvider");
-  }
-  return context;
-}
-
-export default NexusProvider;
diff --git a/apps/megaeth/src/components/nexus/useNexus.ts b/apps/megaeth/src/components/nexus/useNexus.ts
deleted file mode 100644
index 2dcd3f9..0000000
--- a/apps/megaeth/src/components/nexus/useNexus.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { NexusContext } from "./NexusProvider";
-
-export function useNexus() {
-  const context = useContext(NexusContext);
-  if (!context) {
-    throw new Error("useNexus must be used within a NexusProvider");
-  }
-  return context;
-}
diff --git a/apps/megaeth/src/components/ui/accordion.tsx b/apps/megaeth/src/components/ui/accordion.tsx
deleted file mode 100644
index 75b4f79..0000000
--- a/apps/megaeth/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  hideChevron = true,
-  containerClassName = "w-full",
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
-  hideChevron?: boolean;
-  containerClassName?: string;
-}) {
-  return (
-    <AccordionPrimitive.Header className={cn("flex", containerClassName)}>
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {!hideChevron && (
-          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-        )}
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/megaeth/src/components/ui/badge.tsx b/apps/megaeth/src/components/ui/badge.tsx
deleted file mode 100644
index fd3a406..0000000
--- a/apps/megaeth/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
diff --git a/apps/megaeth/src/components/ui/bubbles-animation.tsx b/apps/megaeth/src/components/ui/bubbles-animation.tsx
deleted file mode 100644
index 6c4b772..0000000
--- a/apps/megaeth/src/components/ui/bubbles-animation.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef } from "react";
-
-/**
- * BubbleAnimation
- * Minimal React component that implements ONLY the floating bubble animation
- * from the referenced CodePen. Modified to render oblong (wider) bubbles.
- */
-export default function BubbleAnimation({
-  bubbleColor = "rgb(33, 150, 243)",
-  durationMs = 2000,
-  width = "max(500px, 50vw)", // wider
-  height = "max(200px, 20vw)", // shorter
-}) {
-  const wrapperRef = useRef(null);
-
-  useEffect(() => {
-    const wrapper = wrapperRef.current as HTMLElement | null;
-    if (!wrapper) return;
-
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const reduced = mediaQuery.matches;
-
-    const timeouts = new Set<number>();
-
-    const animateBubble = (x: number) => {
-      if (reduced) return;
-      const bubble = document.createElement("div");
-      bubble.className = "bubble";
-      bubble.style.left = `${x}px`;
-      bubble.style.backgroundColor = bubbleColor;
-      bubble.style.width = width;
-      bubble.style.height = height;
-      wrapper.appendChild(bubble);
-      const to = window.setTimeout(() => {
-        bubble.remove();
-        timeouts.delete(to);
-      }, durationMs);
-      timeouts.add(to);
-    };
-
-    const handleMove = (e: MouseEvent) => animateBubble(e.clientX);
-    window.addEventListener("mousemove", handleMove);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMove);
-      timeouts.forEach((id) => window.clearTimeout(id));
-      timeouts.clear();
-      Array.from(wrapper.children).forEach((el) => el.remove());
-    };
-  }, [bubbleColor, durationMs, width, height]);
-
-  return (
-    <div>
-      {/* Animation layer only */}
-      <div id="bubble-wrapper" ref={wrapperRef} aria-hidden="true" />
-
-      {/* Minimal styles for animation only */}
-      <style>{`
-        @keyframes wave {
-          from, to { transform: translate(-50%, 0%); }
-          50% { transform: translate(-50%, -20%); }
-        }
-        #bubble-wrapper {
-          position: fixed;
-          inset: 0;
-          overflow: hidden;
-          pointer-events: none;
-        }
-        .bubble {
-          position: absolute;
-          top: 100%;
-          left: 50%;
-          border-radius: 50% / 60%; /* creates oblong shape */
-          animation: wave 2s ease-in-out infinite;
-        }
-        @media (prefers-reduced-motion) {
-          .bubble { animation: none; display: none; }
-        }
-      `}</style>
-    </div>
-  );
-}
-
diff --git a/apps/megaeth/src/components/ui/card.tsx b/apps/megaeth/src/components/ui/card.tsx
deleted file mode 100644
index d05bbc6..0000000
--- a/apps/megaeth/src/components/ui/card.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
diff --git a/apps/megaeth/src/components/ui/dialog.tsx b/apps/megaeth/src/components/ui/dialog.tsx
deleted file mode 100644
index d9ccec9..0000000
--- a/apps/megaeth/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
diff --git a/apps/megaeth/src/components/ui/input.tsx b/apps/megaeth/src/components/ui/input.tsx
deleted file mode 100644
index 0316cc4..0000000
--- a/apps/megaeth/src/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };
diff --git a/apps/megaeth/src/components/ui/label.tsx b/apps/megaeth/src/components/ui/label.tsx
deleted file mode 100644
index fb5fbc3..0000000
--- a/apps/megaeth/src/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/apps/megaeth/src/components/ui/select.tsx b/apps/megaeth/src/components/ui/select.tsx
deleted file mode 100644
index 91c5bdf..0000000
--- a/apps/megaeth/src/components/ui/select.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};
diff --git a/apps/megaeth/src/components/ui/separator.tsx b/apps/megaeth/src/components/ui/separator.tsx
deleted file mode 100644
index be47ba4..0000000
--- a/apps/megaeth/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Separator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="separator"
-      role="separator"
-      className={cn("bg-border my-2 h-px w-full", className)}
-      {...props}
-    />
-  );
-}
-
-export { Separator };
diff --git a/apps/megaeth/src/components/ui/skeleton.tsx b/apps/megaeth/src/components/ui/skeleton.tsx
deleted file mode 100644
index 32ea0ef..0000000
--- a/apps/megaeth/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/apps/megaeth/src/components/ui/sonner.tsx b/apps/megaeth/src/components/ui/sonner.tsx
deleted file mode 100644
index f96a98d..0000000
--- a/apps/megaeth/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };
diff --git a/apps/megaeth/src/components/ui/tooltip.tsx b/apps/megaeth/src/components/ui/tooltip.tsx
deleted file mode 100644
index 99aefa0..0000000
--- a/apps/megaeth/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/megaeth/src/components/view-history/view-history.tsx b/apps/megaeth/src/components/view-history/view-history.tsx
deleted file mode 100644
index b58dd82..0000000
--- a/apps/megaeth/src/components/view-history/view-history.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Clock, LoaderPinwheel, SquareArrowOutUpRight } from "lucide-react";
-import { type RFF } from "@avail-project/nexus-core";
-import { cn } from "@/lib/utils";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import useViewHistory from "./hooks/useViewHistory";
-import { TOKEN_IMAGES } from "../common";
-
-const SourceChains = ({ sources }: { sources: RFF["sources"] }) => {
-  return (
-    <div className="flex items-center">
-      {sources?.map((source, index) => (
-        <div
-          key={source?.chain?.id}
-          className={cn(
-            "rounded-full transition-transform hover:scale-110",
-            index > 0 && "-ml-2",
-          )}
-          style={{ zIndex: sources.length - index }}
-        >
-          <img
-            src={source?.chain?.logo}
-            alt={source?.chain?.name}
-            width={24}
-            height={24}
-            className="rounded-full"
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const StatusBadge = ({ status }: { status: string }) => {
-  const getVariant = (status: string) => {
-    if (status === "Fulfilled") {
-      return "default";
-    } else if (status === "Deposited") {
-      return "secondary";
-    } else if (status === "Refunded") {
-      return "outline";
-    } else if (status === "Failed") {
-      return "destructive";
-    } else {
-      return "default";
-    }
-  };
-
-  return (
-    <Badge variant={getVariant(status)} className="px-3 py-1">
-      <p className="text-xs font-semibold tracking-wide">{status}</p>
-    </Badge>
-  );
-};
-
-const DestinationToken = ({
-  destination,
-}: {
-  destination: RFF["destinations"];
-}) => {
-  return (
-    <div className="flex items-center">
-      {destination.map((dest, index) => (
-        <div
-          key={dest.token.symbol}
-          className={cn(
-            "rounded-full transition-transform hover:scale-110",
-            index > 0 && "-ml-2",
-          )}
-          style={{ zIndex: destination.length - index }}
-        >
-          <img
-            src={TOKEN_IMAGES[dest.token.symbol]}
-            alt={dest.token.symbol}
-            width={24}
-            height={24}
-            className="rounded-full"
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const ViewHistory = ({
-  viewAsModal = true,
-  className,
-  refreshNonce,
-}: {
-  viewAsModal?: boolean;
-  className?: string;
-  refreshNonce?: number;
-}) => {
-  const {
-    history,
-    displayedHistory,
-    hasMore,
-    isLoadingMore,
-    getStatus,
-    observerTarget,
-    ITEMS_PER_PAGE,
-    formatExpiryDate,
-    fetchIntentHistory,
-  } = useViewHistory();
-
-  useEffect(() => {
-    if (!refreshNonce) return;
-    void fetchIntentHistory();
-  }, [refreshNonce, fetchIntentHistory]);
-
-  const renderHistoryContent = () => {
-    if (displayedHistory.length > 0) {
-      return (
-        <>
-          {displayedHistory?.map((pastIntent) => (
-            <Card
-              key={pastIntent.id}
-              className="p-4 hover:shadow-md transition-shadow duration-200 border-border/50 gap-3"
-            >
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex items-center gap-3">
-                  <DestinationToken destination={pastIntent?.destinations} />
-                  <div className="flex flex-col">
-                    <p className="text-sm font-medium">
-                      {pastIntent?.destinations
-                        .map((d) => d?.token?.symbol)
-                        .join(", ")}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      Intent #{pastIntent?.id}
-                    </p>
-                  </div>
-                </div>
-                <StatusBadge status={getStatus(pastIntent)} />
-              </div>
-
-              <Separator className="my-1" />
-
-              <div className="flex flex-col sm:flex-row  items-start sm:items-center justify-between gap-4">
-                <div className="flex items-center justify-between gap-x-3 flex-1 w-full sm:min-w-fit">
-                  <SourceChains sources={pastIntent?.sources} />
-                  <div className="flex items-center gap-2 text-muted-foreground">
-                    <div className="h-px w-8 bg-border" />
-                    <span className="text-xs">→</span>
-                    <div className="h-px w-8 bg-border" />
-                  </div>
-                  <div className="rounded-full hover:scale-110">
-                    <img
-                      src={pastIntent?.destinationChain?.logo ?? ""}
-                      alt={pastIntent?.destinationChain?.name}
-                      width={24}
-                      height={24}
-                      className="rounded-full"
-                    />
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between sm:justify-end  gap-x-2 w-full">
-                  <div className="text-left sm:text-right">
-                    <p className="text-xs text-muted-foreground">Expiry</p>
-                    <p className="text-xs font-medium">
-                      {formatExpiryDate(pastIntent?.expiry)}
-                    </p>
-                  </div>
-                  <a
-                    href={pastIntent?.explorerUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <Button variant="outline" size="icon">
-                      <SquareArrowOutUpRight className="size-4" />
-                    </Button>
-                  </a>
-                </div>
-              </div>
-            </Card>
-          ))}
-
-          {hasMore && (
-            <div ref={observerTarget} className="flex justify-center py-4">
-              {isLoadingMore && (
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <LoaderPinwheel className="size-4 animate-spin" />
-                  <span className="text-sm">Loading more...</span>
-                </div>
-              )}
-            </div>
-          )}
-
-          {!hasMore && displayedHistory?.length > ITEMS_PER_PAGE && (
-            <div className="flex justify-center py-4">
-              <p className="text-sm text-muted-foreground">
-                No more transactions to load
-              </p>
-            </div>
-          )}
-        </>
-      );
-    }
-
-    if (history === null) {
-      return (
-        <div className="flex flex-col items-center justify-center py-16 gap-4">
-          <div className="relative">
-            <div className="absolute inset-0 bg-primary/10 blur-xl rounded-full" />
-            <LoaderPinwheel className="relative animate-spin size-12 text-primary" />
-          </div>
-          <div className="text-center space-y-1">
-            <p className="text-base font-medium">Loading your history</p>
-            <p className="text-sm text-muted-foreground">
-              Fetching your past transactions...
-            </p>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex flex-col items-center justify-center py-16 gap-4">
-        <Clock className="size-16 text-muted-foreground/30" />
-        <div className="text-center space-y-1">
-          <p className="text-base font-medium">No history yet</p>
-          <p className="text-sm text-muted-foreground">
-            Your transaction history will appear here
-          </p>
-        </div>
-      </div>
-    );
-  };
-
-  if (!viewAsModal) {
-    return (
-      <div className="flex flex-col gap-y-3 max-h-96 no-scrollbar overflow-y-auto w-full max-w-md">
-        {renderHistoryContent()}
-      </div>
-    );
-  }
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn("relative group", className)}
-        >
-          <Clock className="size-5 text-primary transition-transform group-hover:scale-110" />
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl flex flex-col">
-        <DialogHeader>
-          <DialogTitle className="text-2xl font-semibold">
-            Transaction History
-          </DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-y-3 max-h-96 no-scrollbar overflow-y-auto w-full">
-          {renderHistoryContent()}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default ViewHistory;
diff --git a/apps/megaeth/src/favicon.ico b/apps/megaeth/src/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/apps/megaeth/src/favicon.ico and /dev/null differ
diff --git a/apps/megaeth/src/lib/button-variants.ts b/apps/megaeth/src/lib/button-variants.ts
deleted file mode 100644
index d87142c..0000000
--- a/apps/megaeth/src/lib/button-variants.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { cva } from "class-variance-authority";
-
-const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export { buttonVariants };
diff --git a/apps/megaeth/src/lib/posthog.ts b/apps/megaeth/src/lib/posthog.ts
deleted file mode 100644
index aa51bd9..0000000
--- a/apps/megaeth/src/lib/posthog.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import posthog from 'posthog-js';
-
-const DEFAULT_POSTHOG_KEY = 'phc_UD6lQU3PEw1d8oo8E17rJLmRAR7kxJbQ5OseHuCvi7N';
-const DEFAULT_POSTHOG_HOST = 'https://us.i.posthog.com';
-
-let isInitialized = false;
-
-/**
- * Initialize PostHog analytics
- */
-export function initPostHog(options?: {
-    apiKey?: string;
-    apiHost?: string;
-    debug?: boolean;
-}): void {
-    if (isInitialized) return;
-
-    const apiKey = options?.apiKey || DEFAULT_POSTHOG_KEY;
-    const apiHost = options?.apiHost || DEFAULT_POSTHOG_HOST;
-    const debug = options?.debug ?? true; // Always enable debug for troubleshooting
-
-    console.log('[PostHog] Initializing with host:', apiHost);
-
-    posthog.init(apiKey, {
-        api_host: apiHost,
-        person_profiles: 'identified_only',
-        autocapture: false,
-        capture_pageview: false,
-        capture_pageleave: true,
-        persistence: 'localStorage', // Use localStorage for persistence
-        loaded: (ph) => {
-            console.log('[PostHog] Loaded successfully');
-            if (debug) {
-                ph.debug();
-            }
-        },
-    });
-
-    isInitialized = true;
-}
-
-/**
- * Capture a bridge submit event
- */
-export interface BridgeSubmitEventProperties {
-    chain: string | number;
-    chainName: string;
-    tokenSymbol: string;
-    amount: string;
-    fast_bridge: 'megaeth' | 'citrea' | 'monad';
-}
-
-export function trackBridgeSubmit(properties: BridgeSubmitEventProperties): void {
-    if (!isInitialized) {
-        console.warn('[PostHog] Not initialized, initializing now...');
-        initPostHog();
-    }
-
-    console.log('[PostHog] Capturing event: nexus_fast_bridge_demo_submit', properties);
-    posthog.capture('nexus_fast_bridge_demo_submit', properties);
-}
-
-/**
- * Generic capture wrapper
- */
-export function capture(event: string, properties?: Record<string, unknown>): void {
-    if (!isInitialized) {
-        console.warn('[PostHog] Not initialized, initializing now...');
-        initPostHog();
-    }
-
-    console.log('[PostHog] Capturing event:', event, properties);
-    posthog.capture(event, properties);
-}
-
-export { posthog };
diff --git a/apps/megaeth/src/lib/transaction-utils.ts b/apps/megaeth/src/lib/transaction-utils.ts
deleted file mode 100644
index 32eab01..0000000
--- a/apps/megaeth/src/lib/transaction-utils.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export const getOperationText = (type: string) => {
-  switch (type) {
-    case "bridge":
-      return "Transaction";
-    case "transfer":
-      return "Transferring";
-    case "bridgeAndExecute":
-      return "Bridge & Execute";
-    case "swap":
-      return "Swapping";
-    default:
-      return "Processing";
-  }
-};
-
-export const getStatusText = (type: string, operationType: string) => {
-  const opText = getOperationText(operationType);
-
-  switch (type) {
-    case "INTENT_ACCEPTED":
-      return "Intent Accepted";
-    case "INTENT_HASH_SIGNED":
-      return "Signing Transaction";
-    case "INTENT_SUBMITTED":
-      return "Submitting Transaction";
-    case "INTENT_COLLECTION":
-      return "Collecting Confirmations";
-    case "INTENT_COLLECTION_COMPLETE":
-      return "Confirmations Complete";
-    case "APPROVAL":
-      return "Approving";
-    case "TRANSACTION_SENT":
-      return "Sending Transaction";
-    case "RECEIPT_RECEIVED":
-      return "Receipt Received";
-    case "TRANSACTION_CONFIRMED":
-    case "INTENT_FULFILLED":
-      return `${opText} Complete`;
-    default:
-      return `Processing ${opText}`;
-  }
-};
diff --git a/apps/megaeth/src/lib/url-params.ts b/apps/megaeth/src/lib/url-params.ts
deleted file mode 100644
index 2fb5962..0000000
--- a/apps/megaeth/src/lib/url-params.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { type SUPPORTED_CHAINS_IDS, type SUPPORTED_TOKENS } from "@avail-project/nexus-core";
-import { isAddress } from "viem";
-
-const ALLOWED_TOKENS = new Set(["USDC", "USDT"]) as Set<SUPPORTED_TOKENS>;
-const FILTERED_CHAIN_ID = 728126428;
-
-interface BridgeParams {
-  to?: SUPPORTED_CHAINS_IDS;
-  token?: SUPPORTED_TOKENS;
-  recipient?: `0x${string}`;
-  amount?: string;
-}
-
-function isValidToken(token: string | null): token is SUPPORTED_TOKENS {
-  if (!token) return false;
-  const upperToken = token.toUpperCase().trim();
-  return ALLOWED_TOKENS.has(upperToken as SUPPORTED_TOKENS);
-}
-
-function isValidChain(chainStr: string | null): boolean {
-  if (!chainStr) return false;
-  const chainId = Number.parseInt(chainStr, 10);
-  if (!Number.isInteger(chainId) || chainId <= 0 || chainId > Number.MAX_SAFE_INTEGER) return false;
-  if (chainId === FILTERED_CHAIN_ID) return false;
-  return true;
-}
-
-function sanitizeAmount(amount: string | null): string | undefined {
-  if (!amount) return undefined;
-  const sanitized = amount.trim();
-  if (sanitized === "" || sanitized === ".") return undefined;
-  if (!/^\d*\.?\d*$/.test(sanitized)) return undefined;
-  const num = Number.parseFloat(sanitized);
-  if (Number.isNaN(num) || num <= 0) return undefined;
-  if (num > 1e9) return undefined;
-  return sanitized;
-}
-
-export function readBridgeParams(): BridgeParams {
-  const params = new URLSearchParams(window.location.search);
-  const toStr = params.get("to");
-  const tokenStr = params.get("token");
-  const recipient = params.get("recipient");
-  const amountStr = params.get("amount");
-
-  const to = toStr && toStr !== "self" && isValidChain(toStr) ? (Number.parseInt(toStr, 10) as SUPPORTED_CHAINS_IDS) : undefined;
-  const token = isValidToken(tokenStr) ? (tokenStr!.toUpperCase() as SUPPORTED_TOKENS) : undefined;
-  const sanitizedAmount = sanitizeAmount(amountStr);
-  const recipientAddress = recipient && isAddress(recipient) ? recipient : undefined;
-
-  return {
-    to,
-    token,
-    recipient: recipientAddress,
-    amount: sanitizedAmount,
-  };
-}
-
-export function writeBridgeParams(params: BridgeParams): void {
-  const url = new URL(window.location.href);
-
-  url.searchParams.delete("to");
-  url.searchParams.delete("token");
-  url.searchParams.delete("recipient");
-  url.searchParams.delete("amount");
-
-  if (params.to && isValidChain(String(params.to))) {
-    url.searchParams.set("to", String(params.to));
-  }
-  if (params.token && ALLOWED_TOKENS.has(params.token)) {
-    url.searchParams.set("token", params.token);
-  }
-  if (params.recipient && isAddress(params.recipient)) {
-    url.searchParams.set("recipient", params.recipient);
-  }
-  const sanitizedAmount = sanitizeAmount(params.amount ?? null);
-  if (sanitizedAmount) {
-    url.searchParams.set("amount", sanitizedAmount);
-  }
-
-  window.history.replaceState({}, "", url.toString());
-}
diff --git a/apps/megaeth/src/lib/utils.ts b/apps/megaeth/src/lib/utils.ts
deleted file mode 100644
index f9923e8..0000000
--- a/apps/megaeth/src/lib/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_BASE_URL}${path}`;
-}
diff --git a/apps/megaeth/src/main.tsx b/apps/megaeth/src/main.tsx
index e98387c..0802495 100644
--- a/apps/megaeth/src/main.tsx
+++ b/apps/megaeth/src/main.tsx
@@ -1,46 +1,3 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import { initPostHog } from "./lib/posthog";
+import { bootstrapApp } from "@/bootstrap";
 
-// Initialize PostHog analytics
-initPostHog();
-
-// Clean up WalletConnect IndexedDB before app loads to prevent structure errors
-const cleanupWalletConnectSubscription = () => {
-  try {
-    const dbName = "WALLET_CONNECT_V2_INDEXED_DB";
-
-    // Delete the entire database to prevent structure errors
-    const deleteRequest = indexedDB.deleteDatabase(dbName);
-
-    deleteRequest.onsuccess = () => {
-      console.log(
-        "[WalletConnect] Database deleted successfully, will be recreated fresh",
-      );
-    };
-
-    deleteRequest.onerror = () => {
-      console.debug(
-        "[WalletConnect] Database deletion failed or DB doesn't exist",
-      );
-    };
-
-    deleteRequest.onblocked = () => {
-      console.debug("[WalletConnect] Database deletion blocked, may be in use");
-    };
-  } catch (error) {
-    // Ignore errors - this is a cleanup operation
-    console.debug("[WalletConnect] Cleanup skipped:", error);
-  }
-};
-
-// Run cleanup before rendering
-cleanupWalletConnectSubscription();
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+bootstrapApp();
diff --git a/apps/megaeth/src/providers/web3Provider.tsx b/apps/megaeth/src/providers/web3Provider.tsx
deleted file mode 100644
index f913430..0000000
--- a/apps/megaeth/src/providers/web3Provider.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import React from "react";
-import { ConnectKitProvider, getDefaultConfig } from "connectkit";
-import { WagmiProvider, createConfig, http } from "wagmi";
-import {
-  mainnet,
-  scroll,
-  polygon,
-  optimism,
-  arbitrum,
-  base,
-  avalanche,
-  sophon,
-  kaia,
-  monad,
-  type Chain,
-} from "wagmi/chains";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import config from "../../config";
-
-const walletConnectProjectId = import.meta.env.VITE_WALLET_CONNECT_ID;
-
-const chain: Chain = {
-  id: config.chainId,
-  name: config.chainName,
-  nativeCurrency: {
-    name: config.chainNativeCurrency.name,
-    symbol: config.chainNativeCurrency.symbol,
-    decimals: config.chainNativeCurrency.decimals,
-  },
-  rpcUrls: {
-    default: { http: [config.chainRpcUrl] },
-  },
-  blockExplorers: {
-    default: { name: "Explorer", url: config.chainBlockExplorerUrl },
-  },
-  testnet: config.chainTestnet,
-};
-
-const megaeth: Chain = {
-  id: 4326,
-  name: "MegaETH Mainnet",
-  nativeCurrency: {
-    name: "Ether",
-    symbol: "ETH",
-    decimals: 18,
-  },
-  rpcUrls: {
-    default: { http: [import.meta.env.VITE_MEGAETH_RPC] },
-  },
-  blockExplorers: {
-    default: { name: "Explorer", url: "https://megaeth.blockscout.com" },
-  },
-  testnet: false,
-};
-
-//ideally we should add private rpcs for each, for now it fallbacks to default rpcs
-const transports = {
-  [mainnet.id]: http(import.meta.env.VITE_MAINNET_RPC),
-  [base.id]: http(import.meta.env.VITE_BASE_RPC),
-  [arbitrum.id]: http(import.meta.env.VITE_ARBITRUM_RPC),
-  [optimism.id]: http(import.meta.env.VITE_OPTIMISM_RPC),
-  [polygon.id]: http(import.meta.env.VITE_POLYGON_RPC),
-  [scroll.id]: http(import.meta.env.VITE_SCROLL_RPC),
-  [avalanche.id]: http(import.meta.env.VITE_AVALANCHE_RPC),
-  [sophon.id]: http(import.meta.env.VITE_SOPHON_RPC),
-  [kaia.id]: http(import.meta.env.VITE_KAIA_RPC),
-  [chain.id]: http(config.chainRpcUrl),
-  [monad.id]: http(import.meta.env.VITE_MONAD_RPC),
-  [megaeth.id]: http(import.meta.env.VITE_MEGAETH_RPC),
-};
-
-const defaultConfigParams = getDefaultConfig({
-  appName: config.appTitle ?? "Nexus Elements",
-  walletConnectProjectId,
-  chains: [
-    chain,
-    mainnet,
-    base,
-    sophon,
-    kaia,
-    arbitrum,
-    avalanche,
-    optimism,
-    polygon,
-    scroll,
-    monad,
-    megaeth,
-  ],
-  transports,
-  enableFamily: false,
-});
-
-const wagmiConfig = createConfig(defaultConfigParams);
-const queryClient = new QueryClient();
-
-const Web3Provider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <ConnectKitProvider theme="minimal">{children}</ConnectKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
-  );
-};
-
-export default Web3Provider;
diff --git a/apps/megaeth/src/runtime.ts b/apps/megaeth/src/runtime.ts
new file mode 100644
index 0000000..867f767
--- /dev/null
+++ b/apps/megaeth/src/runtime.ts
@@ -0,0 +1,49 @@
+import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
+import type { ChainFeatures } from "@/types/runtime";
+import config from "../config";
+
+export const appConfig = config;
+
+export const chainFeatures: ChainFeatures = {
+  slug: "megaeth",
+  analyticsFastBridgeKey: "megaeth",
+  maxBridgeAmount: 5000,
+  walletInitDelayMs: 500,
+  showFluffeyMascot: true,
+  showPromoBanner: false,
+  promoBannerLine1: "Zero solver and protocol fees when bridging to MegaETH.",
+  promoBannerLine2: "Till Friday the 13th. Don't fade anon.",
+  promoBannerImageUrl:
+    "https://files.availproject.org/fastbridge/megaeth/megaeth-mascot-1.png",
+  pageDescription:
+    "Avail Fast Bridge for MegaETH enables instant, secure bridging of USDC and ETH to the MegaETH network. Powered by Avail Nexus, it supports seamless transfers from Ethereum, Base, Optimism, Arbitrum, and more, ensuring liquidity is unified without complex wrapping.",
+  showSupportCta: true,
+  supportCtaHref: "https://discord.com/invite/AvailProject",
+  supportCtaLine1: "Reach out to us if",
+  supportCtaLine2: "you face any issues",
+  mapUsdmDisplaySymbolToUsdc: true,
+  mapUsdmToUsdcBalance: true,
+  tokenLogoOverrideBySymbol: {
+    USDM: "https://mega.etherscan.io/token/images/usdm_32.png",
+  },
+  postBridgeWatchAsset: {
+    destinationChainId: SUPPORTED_CHAINS.MEGAETH,
+    tokenSymbol: "USDM",
+    walletAsset: {
+      address: "0xFAfDdbb3FC7688494971a79cc65DCa3EF82079E7",
+      symbol: "USDm",
+      decimals: 18,
+      image: "https://mega.etherscan.io/token/images/usdm_32.png",
+    },
+  },
+  denyIntentOnReset: false,
+  tokenDenyListByChainId: {},
+  allowanceLogoOverrideByChainId: {},
+  amountInputUseCalculatedMaxHeader: true,
+  amountInputShowDestinationBadge: true,
+  amountInputUseSourceSymbolInBreakdown: true,
+  hideMegaethSourceForUsdm: false,
+  feeBreakdownHideGasSupplied: true,
+  feeBreakdownKeepZeroRows: true,
+  dialogShowCloseButton: false,
+};
diff --git a/apps/megaeth/src/vite-env.d.ts b/apps/megaeth/src/vite-env.d.ts
index 04436df..1a8b0eb 100644
--- a/apps/megaeth/src/vite-env.d.ts
+++ b/apps/megaeth/src/vite-env.d.ts
@@ -3,57 +3,56 @@
 import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
 
 export interface AppEnv {
-    readonly VITE_APP_BASE_PATH?: string;
-    readonly VITE_CONFIG_CHAIN_ID: number;
-    readonly VITE_CONFIG_CHAIN_NAME: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
-    readonly VITE_CONFIG_CHAIN_RPC_URL: string;
-    readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
-    readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
-    readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
-    readonly VITE_CONFIG_CHAIN_ICON_URL: string;
-    readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
-    readonly VITE_CONFIG_CHAIN_GIF_URL: string;
-    readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
-    readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
-    readonly VITE_CONFIG_APP_TITLE: string;
-    readonly VITE_CONFIG_APP_DESCRIPTION: string;
-    readonly VITE_CONFIG_PRIMARY_COLOR: string;
-    readonly VITE_CONFIG_SECONDARY_COLOR: string;
-    readonly VITE_CONFIG_NEXUS_NETWORK: 'mainnet' | 'testnet' | 'devnet';
-    readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
-    readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_APP_BASE_PATH?: string;
+  readonly VITE_CONFIG_APP_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
+  readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
+  readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
+  readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
 
-    readonly VITE_CONFIG_APP_META_TITLE: string;
-    readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
-    readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
-    readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
-    readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
-    readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
-    readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_TITLE: string;
+  readonly VITE_CONFIG_APP_TITLE: string;
+  readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
+  readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
+  readonly VITE_CONFIG_CHAIN_GIF_URL: string;
+  readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
+  readonly VITE_CONFIG_CHAIN_ICON_URL: string;
+  readonly VITE_CONFIG_CHAIN_ID: number;
+  readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
+  readonly VITE_CONFIG_CHAIN_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
+  readonly VITE_CONFIG_CHAIN_RPC_URL: string;
+  readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
+  readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
+  readonly VITE_CONFIG_NEXUS_NETWORK: "mainnet" | "testnet" | "devnet";
+  readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
+  readonly VITE_CONFIG_PRIMARY_COLOR: string;
+  readonly VITE_CONFIG_SECONDARY_COLOR: string;
 }
 
 declare global {
+  interface ImportMetaEnv extends AppEnv {
+    readonly VITE_ARBITRUM_RPC: string;
+    readonly VITE_AVALANCHE_RPC: string;
+    readonly VITE_BASE: string;
+    readonly VITE_BASE_RPC: string;
+    readonly VITE_KAIA_RPC: string;
+    readonly VITE_MAINNET_RPC: string;
+    readonly VITE_MEGAETH_RPC: string;
+    readonly VITE_MONAD_RPC: string;
+    readonly VITE_OPTIMISM_RPC: string;
+    readonly VITE_POLYGON_RPC: string;
+    readonly VITE_SCROLL_RPC: string;
+    readonly VITE_SOPHON_RPC: string;
+    readonly VITE_WALLET_CONNECT_ID: string;
+  }
 
-    interface ImportMetaEnv extends AppEnv {
-        readonly VITE_WALLET_CONNECT_ID: string;
-        readonly VITE_MAINNET_RPC: string;
-        readonly VITE_BASE_RPC: string;
-        readonly VITE_ARBITRUM_RPC: string;
-        readonly VITE_OPTIMISM_RPC: string;
-        readonly VITE_POLYGON_RPC: string;
-        readonly VITE_SCROLL_RPC: string;
-        readonly VITE_AVALANCHE_RPC: string;
-        readonly VITE_SOPHON_RPC: string;
-        readonly VITE_KAIA_RPC: string;
-        readonly VITE_MONAD_RPC: string;
-        readonly VITE_MEGAETH_RPC: string;
-        readonly VITE_BASE: string;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-    }
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
 }
diff --git a/apps/megaeth/tsconfig.app.json b/apps/megaeth/tsconfig.app.json
index afe17f6..c6a071f 100644
--- a/apps/megaeth/tsconfig.app.json
+++ b/apps/megaeth/tsconfig.app.json
@@ -24,7 +24,8 @@
 
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["../../packages/fast-bridge-app/src/*"],
+      "@fastbridge/runtime": ["./src/runtime.ts"]
     }
   },
   "include": ["src"]
diff --git a/apps/megaeth/tsconfig.json b/apps/megaeth/tsconfig.json
index fec8c8e..5bfdf37 100644
--- a/apps/megaeth/tsconfig.json
+++ b/apps/megaeth/tsconfig.json
@@ -8,6 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "strictNullChecks": true
   }
 }
diff --git a/apps/megaeth/vite.config.ts b/apps/megaeth/vite.config.ts
index 778a7b7..de764ab 100644
--- a/apps/megaeth/vite.config.ts
+++ b/apps/megaeth/vite.config.ts
@@ -1,12 +1,12 @@
+import { writeFileSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
-import { writeFileSync } from "node:fs";
+import { defineConfig, loadEnv } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import { getConfig } from "./get-config";
 import type { AppEnv } from "./src/vite-env.d";
-import { getConfig } from "./getConfig";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -18,31 +18,31 @@ export default defineConfig(({ mode }) => {
   const config = getConfig(env);
 
   const manifestContent = {
-    "name": config.meta.title,
-    "short_name": config.appTitle,
-    "description": config.meta.description,
-    "start_url": base,
-    "display": "standalone",
-    "background_color": config.meta.backgroundColor,
-    "theme_color": config.meta.themeColor,
-    "orientation": "portrait-primary",
-    "icons": [
+    name: config.meta.title,
+    short_name: config.appTitle,
+    description: config.meta.description,
+    start_url: base,
+    display: "standalone",
+    background_color: config.meta.backgroundColor,
+    theme_color: config.meta.themeColor,
+    orientation: "portrait-primary",
+    icons: [
       {
-        "src": config.meta.faviconUrl,
-        "sizes": "31x32",
-        "type": "image/png",
-        "purpose": "any"
+        src: config.meta.faviconUrl,
+        sizes: "31x32",
+        type: "image/png",
+        purpose: "any",
       },
       {
-        "src": config.meta.imageUrl,
-        "sizes": "2444x1256",
-        "type": "image/png",
-        "purpose": "any"
-      }
-    ]
+        src: config.meta.imageUrl,
+        sizes: "2444x1256",
+        type: "image/png",
+        purpose: "any",
+      },
+    ],
   };
 
-  const outputPath = path.resolve(__dirname, 'dist', 'manifest.json');
+  const outputPath = path.resolve(__dirname, "dist", "manifest.json");
 
   return {
     base,
@@ -55,19 +55,19 @@ export default defineConfig(({ mode }) => {
       }),
       // Create manifest.json at build
       {
-        name: 'generate-manifest',
+        name: "generate-manifest",
         writeBundle() {
           try {
             writeFileSync(outputPath, JSON.stringify(manifestContent, null, 2));
             console.log(`Generated dynamic manifest.json at ${outputPath}`);
           } catch (err) {
-            console.error('Error generating manifest.json', err);
+            console.error("Error generating manifest.json", err);
           }
-        }
+        },
       },
       // Update title and meta of index.html at build
       {
-        name: 'html-transform',
+        name: "html-transform",
         transformIndexHtml(html) {
           // Replace placeholders with actual values
           return html
@@ -77,13 +77,14 @@ export default defineConfig(({ mode }) => {
             .replaceAll(/%= APP_FAVICON_URL =%/g, config.meta.faviconUrl)
             .replaceAll(/%= APP_THEME_COLOR =%/g, config.meta.themeColor)
             .replaceAll(/%= APP_META_IMAGE_URL =%/g, config.meta.imageUrl)
-            .replaceAll(/%= MANIFEST_URL =%/g, `${base}manifest.json`)
-        }
-      }
+            .replaceAll(/%= MANIFEST_URL =%/g, `${base}manifest.json`);
+        },
+      },
     ],
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "./src"),
+        "@": path.resolve(__dirname, "../../packages/fast-bridge-app/src"),
+        "@fastbridge/runtime": path.resolve(__dirname, "./src/runtime.ts"),
         buffer: "vite-plugin-node-polyfills/shims/buffer",
         global: "vite-plugin-node-polyfills/shims/global",
         process: "vite-plugin-node-polyfills/shims/process",
@@ -91,7 +92,7 @@ export default defineConfig(({ mode }) => {
     },
     envPrefix: ["VITE_"],
     build: {
-      emptyOutDir: true
-    }
-  }
+      emptyOutDir: true,
+    },
+  };
 });
diff --git a/apps/monad/README.md b/apps/monad/README.md
index 6438e99..3700e78 100644
--- a/apps/monad/README.md
+++ b/apps/monad/README.md
@@ -1,13 +1,15 @@
-# Nexus fast bridge
+# Chain App Wrapper
 
-### Run locally
+This app is a thin wrapper around shared code in `packages/fast-bridge-app`.
 
-`npm run dev` to run locally.
+For architecture, onboarding, and customization:
+- `README.md` (repo root)
+- `docs/architecture.md`
+- `docs/adding-chains.md`
+- `docs/customization.md`
 
-### Build project
-
-`npm run build` to build the project.
-
-### Preview
-
-`npm run start` to preview and run
+Primary chain-specific files in this app:
+- `get-config.ts`
+- `src/runtime.ts`
+- `.env.monad`
+- `public/*` assets
diff --git a/apps/monad/config.ts b/apps/monad/config.ts
index b1e41eb..392c7b1 100644
--- a/apps/monad/config.ts
+++ b/apps/monad/config.ts
@@ -1,4 +1,4 @@
-import { getConfig } from "./getConfig";
+import { getConfig } from "./get-config";
 
 const config = getConfig(import.meta.env);
 
diff --git a/apps/monad/eslint.config.js b/apps/monad/eslint.config.js
index a6d1076..8401724 100644
--- a/apps/monad/eslint.config.js
+++ b/apps/monad/eslint.config.js
@@ -1,9 +1,9 @@
 import js from "@eslint/js";
-import globals from "globals";
+import { defineConfig, globalIgnores } from "eslint/config";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
 import tseslint from "typescript-eslint";
-import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
   globalIgnores(["dist"]),
@@ -18,6 +18,9 @@ export default defineConfig([
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
   },
 ]);
diff --git a/apps/monad/get-config.ts b/apps/monad/get-config.ts
new file mode 100644
index 0000000..31044f2
--- /dev/null
+++ b/apps/monad/get-config.ts
@@ -0,0 +1,87 @@
+import type { AppEnv } from "./src/vite-env.d";
+
+const withFallback = <T>(value: T, fallbackValue: T): T =>
+  value || fallbackValue;
+
+export function getConfig(env: AppEnv) {
+  return {
+    chainId: Number(withFallback(env.VITE_CONFIG_CHAIN_ID, 143)),
+    chainName: withFallback(env.VITE_CONFIG_CHAIN_NAME, "Monad"),
+    chainNativeCurrency: {
+      name: withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME, "Monad"),
+      symbol: withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL, "MON"),
+      decimals: Number(
+        withFallback(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS, 18)
+      ),
+    },
+    chainRpcUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_RPC_URL,
+      "https://rpcs.avail.so/monad"
+    ),
+    chainBlockExplorerUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL,
+      "https://monadvision.com/"
+    ),
+    chainTestnet: env.VITE_CONFIG_CHAIN_TESTNET,
+    useChainLogo: env.VITE_CONFIG_CHAIN_USE_CHAIN_LOGO,
+    chainIconUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_ICON_URL,
+      "/Monad_Logomark.svg"
+    ),
+    chainLogoUrl: withFallback(
+      env.VITE_CONFIG_CHAIN_LOGO_URL,
+      "/Monad_Logo.svg"
+    ),
+    chainGifUrl: withFallback(env.VITE_CONFIG_CHAIN_GIF_URL, "/salmonad.gif"),
+    chainGifAlt: withFallback(env.VITE_CONFIG_CHAIN_GIF_ALT, "Fast Salmonad"),
+    heroText: withFallback(
+      env.VITE_CONFIG_CHAIN_HERO_TEXT,
+      "Move your assets to Monad faster than ever!"
+    ),
+
+    appTitle: withFallback(env.VITE_CONFIG_APP_TITLE, "Monad Fast Bridge"),
+    appDescription: withFallback(
+      env.VITE_CONFIG_APP_DESCRIPTION,
+      "Monad Fast Bridge"
+    ),
+
+    primaryColor: withFallback(env.VITE_CONFIG_PRIMARY_COLOR, "#836ef9"),
+    secondaryColor: withFallback(env.VITE_CONFIG_SECONDARY_COLOR, "#ffffff"),
+    nexusNetwork: withFallback(env.VITE_CONFIG_NEXUS_NETWORK, "mainnet"),
+    nexusSupportedChain: Number(
+      withFallback(env.VITE_CONFIG_NEXUS_SUPPORTED_CHAIN, 143)
+    ),
+    nexusPrimaryToken: withFallback(
+      env.VITE_CONFIG_NEXUS_PRIMARY_TOKEN,
+      "USDC"
+    ),
+
+    meta: {
+      title: withFallback(
+        env.VITE_CONFIG_APP_META_TITLE,
+        "Monad Fast Bridge - Powered by Avail Nexus"
+      ),
+      description: withFallback(
+        env.VITE_CONFIG_APP_META_DESCRIPTION,
+        "Move your unified USDC and USDT from 12 chains to Monad, faster than ever."
+      ),
+      canonicalUrl: withFallback(
+        env.VITE_CONFIG_APP_META_CANONICAL_URL,
+        "https://fastbridge.availproject.org/monad/"
+      ),
+      imageUrl: withFallback(
+        env.VITE_CONFIG_APP_META_IMAGE_URL,
+        "https://fastbridge.availproject.org/monad/MonadFBMeta.png"
+      ),
+      faviconUrl: withFallback(
+        env.VITE_CONFIG_APP_META_FAVICON_URL,
+        "https://fastbridge.availproject.org/monad/faviconV2.png"
+      ),
+      themeColor: withFallback(env.VITE_CONFIG_APP_META_THEME_COLOR, "#836ef9"),
+      backgroundColor: withFallback(
+        env.VITE_CONFIG_APP_META_BACKGROUND_COLOR,
+        "#ffffff"
+      ),
+    },
+  };
+}
diff --git a/apps/monad/getConfig.ts b/apps/monad/getConfig.ts
deleted file mode 100644
index f00eede..0000000
--- a/apps/monad/getConfig.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { AppEnv } from "./src/vite-env.d";
-
-export function getConfig(env: AppEnv) {
-    const config = {
-        chainId: Number(env.VITE_CONFIG_CHAIN_ID || 143),
-        chainName: env.VITE_CONFIG_CHAIN_NAME || "Monad",
-        chainNativeCurrency: {
-            name: env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME || "Monad",
-            symbol: env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL || "MON",
-            decimals: Number(env.VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS || 18),
-        },
-        chainRpcUrl: env.VITE_CONFIG_CHAIN_RPC_URL || "https://rpcs.avail.so/monad",
-        chainBlockExplorerUrl:
-            env.VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL || "https://monadvision.com/",
-        chainTestnet: env.VITE_CONFIG_CHAIN_TESTNET || false,
-        useChainLogo: env.VITE_CONFIG_CHAIN_USE_CHAIN_LOGO || false,
-        chainIconUrl: env.VITE_CONFIG_CHAIN_ICON_URL || "/Monad_Logomark.svg",
-        chainLogoUrl: env.VITE_CONFIG_CHAIN_LOGO_URL || "/Monad_Logo.svg",
-        chainGifUrl: env.VITE_CONFIG_CHAIN_GIF_URL || "/salmonad.gif",
-        chainGifAlt: env.VITE_CONFIG_CHAIN_GIF_ALT || "Fast Salmonad",
-        heroText:
-            env.VITE_CONFIG_CHAIN_HERO_TEXT ||
-            "Move your assets to Monad faster than ever!",
-
-        appTitle: env.VITE_CONFIG_APP_TITLE || "Monad Fast Bridge",
-        appDescription: env.VITE_CONFIG_APP_DESCRIPTION || "Monad Fast Bridge",
-
-        primaryColor: env.VITE_CONFIG_PRIMARY_COLOR || "#836ef9",
-        secondaryColor: env.VITE_CONFIG_SECONDARY_COLOR || "#ffffff",
-        nexusNetwork: env.VITE_CONFIG_NEXUS_NETWORK || "mainnet",
-        nexusSupportedChain:
-            Number(env.VITE_CONFIG_NEXUS_SUPPORTED_CHAIN) || 143,
-        nexusPrimaryToken: env.VITE_CONFIG_NEXUS_PRIMARY_TOKEN || "USDC",
-
-        meta: {
-            title:
-                env.VITE_CONFIG_APP_META_TITLE ||
-                "Monad Fast Bridge - Powered by Avail Nexus",
-            description:
-                env.VITE_CONFIG_APP_META_DESCRIPTION ||
-                "Move your unified USDC and USDT from 12 chains to Monad, faster than ever.",
-            canonicalUrl:
-                env.VITE_CONFIG_APP_META_CANONICAL_URL || "https://monadfastbridge.com",
-            imageUrl:
-                env.VITE_CONFIG_APP_META_IMAGE_URL ||
-                "https://monadfastbridge.com/MonadFBMeta.png",
-            faviconUrl:
-                env.VITE_CONFIG_APP_META_FAVICON_URL ||
-                "https://monadfastbridge.com/faviconV2.png",
-            themeColor: env.VITE_CONFIG_APP_META_THEME_COLOR || "#836ef9",
-            backgroundColor: env.VITE_CONFIG_APP_META_BACKGROUND_COLOR || "#ffffff",
-        },
-    };
-
-    return config;
-}
\ No newline at end of file
diff --git a/apps/monad/index.html b/apps/monad/index.html
index 66cdf7a..87dc80c 100644
--- a/apps/monad/index.html
+++ b/apps/monad/index.html
@@ -1,77 +1,77 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!--<meta
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://*.walletconnect.com https://*.walletconnect.org https://*.eth.merkle.io https://*.reown.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: blob: https://monadfastbridge.com https://availproject.org https://*.walletconnect.com https://*.walletconnect.org https:; connect-src 'self' https://api.coinbase.com https://rpcs.avail.so https://*.avail.so wss://*.avail.so ws://*.avail.so https://*.walletconnect.com https://*.walletconnect.org wss://*.walletconnect.com wss://*.walletconnect.org https://*.infura.io https://*.alchemy.com https://mainnet.infura.io https://polygon-rpc.com https://api.avax.network https://rpc.ankr.com https://*.ankr.com https://*.1inch.io https://*.1inch.exchange https://*.uniswap.org https://*.uniswap.io https://monadvision.com https://*.merkle.io https://*.arcana.network http://*.arcana.network https://cosmos01-testnet.arcana.network:26650 http://cosmos01-testnet.arcana.network:26650 wss://*.arcana.network ws://*.arcana.network wss://cosmos01-testnet.arcana.network:26650 ws://cosmos01-testnet.arcana.network:26650 https://mainnet.base.org https://*.base.org https://*.optimism.io https://mainnet.optimism.io https://*.arbitrum.io https://arb1.arbitrum.io https://*.scroll.io https://rpc.scroll.io https://*.polygon.technology https://*.avax.network https://*.sophon.xyz https://rpc.sophon.xyz https://*.kaia.io https://public-en.node.kaia.io https://*.bsc.com https://bsc-dataseed.binance.org https://*.binance.org https://*.tron.network https://*.trongrid.io https://*.sepolia.io https://sepolia.infura.io https://rpc.sepolia.org https://sepolia.optimism.io https://*.optimism-sepolia.io https://sepolia-rollup.arbitrum.io https://*.arbitrum-sepolia.io https://*.amoy.polygon.technology https://rpc-amoy.polygon.technology https://sepolia.base.org https://*.base-sepolia.org https://*.monad.xyz https://*.reown.com https://api.reown.com https://*.web3modal.org https://api.web3modal.org; frame-src 'self' https://*.walletconnect.com https://*.walletconnect.org https://*.reown.com https://*.family.co; manifest-src 'self'; form-action 'self'; base-uri 'self';"
     />-->
-    <link rel="icon" href="%= APP_FAVICON_URL =%" type="image/x-icon" />
-    <meta name="theme-color" content="%= APP_THEME_COLOR =%" />
-    <meta name="description" content="%= APP_DESCRIPTION =%" />
-    <link rel="apple-touch-icon" href="%= APP_FAVICON_URL =%" />
-    <link rel="manifest" href="%= MANIFEST_URL =%" />
+    <link rel="icon" href="%= APP_FAVICON_URL =%" type="image/x-icon">
+    <meta name="theme-color" content="%= APP_THEME_COLOR =%">
+    <meta name="description" content="%= APP_DESCRIPTION =%">
+    <link rel="apple-touch-icon" href="%= APP_FAVICON_URL =%">
+    <link rel="manifest" href="%= MANIFEST_URL =%">
     <title>%= APP_TITLE =%</title>
-    <link rel="canonical" href="%= APP_CANONICAL_URL =%" />
-    <meta name="title" content="%= APP_TITLE =%" />
+    <link rel="canonical" href="%= APP_CANONICAL_URL =%">
+    <meta name="title" content="%= APP_TITLE =%">
 
     <link
       rel="apple-touch-icon"
       sizes="180x180"
       type="image/png"
       href="%= APP_FAVICON_URL =%"
-    />
+    >
     <link
       rel="icon"
       sizes="16x16 32x32"
       type="image/png"
       href="%= APP_FAVICON_URL =%"
-    />
+    >
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:title" content="%= APP_TITLE =%" />
-    <meta property="og:description" content="%= APP_DESCRIPTION =%" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="%= APP_CANONICAL_URL =%" />
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="300" />
-    <meta property="og:image:height" content="157" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:title" content="%= APP_TITLE =%">
+    <meta property="og:description" content="%= APP_DESCRIPTION =%">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="%= APP_CANONICAL_URL =%">
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="300">
+    <meta property="og:image:height" content="157">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="600" />
-    <meta property="og:image:height" content="315" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="600">
+    <meta property="og:image:height" content="315">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="600" />
-    <meta property="og:image:height" content="600" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="600">
+    <meta property="og:image:height" content="600">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
-    <meta property="og:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="627" />
-    <meta property="og:image:alt" content="%= APP_TITLE =%" />
+    <meta property="og:image" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:secure_url" content="%= APP_META_IMAGE_URL =%">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="627">
+    <meta property="og:image:alt" content="%= APP_TITLE =%">
 
     <!-- X (Twitter) -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="%= APP_CANONICAL_URL =%" />
-    <meta name="twitter:title" content="%= APP_TITLE =%" />
-    <meta name="twitter:description" content="%= APP_DESCRIPTION =%" />
-    <meta name="twitter:image" content="%= APP_META_IMAGE_URL =%" />
-    <meta name="twitter:image:alt" content="%= APP_TITLE =%" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="%= APP_CANONICAL_URL =%">
+    <meta name="twitter:title" content="%= APP_TITLE =%">
+    <meta name="twitter:description" content="%= APP_DESCRIPTION =%">
+    <meta name="twitter:image" content="%= APP_META_IMAGE_URL =%">
+    <meta name="twitter:image:alt" content="%= APP_TITLE =%">
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
       href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Gloock&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
-    />
+    >
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/monad/package.json b/apps/monad/package.json
index 5ec2a3a..99711d9 100644
--- a/apps/monad/package.json
+++ b/apps/monad/package.json
@@ -11,8 +11,9 @@
     "preview": "vite preview --port 5173"
   },
   "dependencies": {
-    "@avail-project/nexus-core": "github:availproject/nexus-sdk#cca99c1a570a8598334e3e89453d39a27d70ede7",
+    "@avail-project/nexus-core": "1.1.2",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
@@ -27,6 +28,7 @@
     "connectkit": "^1.9.1",
     "decimal.js": "^10.6.0",
     "lucide-react": "^0.544.0",
+    "motion": "^12.29.2",
     "next-themes": "^0.4.6",
     "posthog-js": "^1.336.4",
     "react": "19.2.2",
diff --git a/apps/monad/src/App.tsx b/apps/monad/src/App.tsx
deleted file mode 100644
index 6e18e78..0000000
--- a/apps/monad/src/App.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Web3Provider from "@/providers/web3Provider";
-import { Toaster } from "@/components/ui/sonner";
-import Navbar from "@/components/navbar";
-import HeroSection from "@/components/hero-section";
-import FastBridgeShowcase from "@/components/fast-bridge-showcase";
-import NexusProvider from "@/components/nexus/NexusProvider";
-import config from "../config";
-
-// @ts-expect-error - Environment is not exported from @avail-project/nexus-core
-enum Environment {
-  FOLLY, // Dev with test-net tokens
-  CERISE, // Dev with main-net tokens
-  CORAL, // Test-net with main-net tokens
-  JADE, // Main-net with main-net tokens
-}
-
-export default function App() {
-  return (
-    <Web3Provider>
-      <NexusProvider
-        config={{
-          // network: {
-          //   NETWORK_HINT: Environment.CERISE,
-          //   COSMOS_GRPC_URL: "https://debugnet.availproject.org/grpc-web/",
-          //   COSMOS_REST_URL: "https://debugnet.availproject.org",
-          //   COSMOS_RPC_URL: "https://debugnet.availproject.org:26650",
-          //   COSMOS_WS_URL: "wss://debugnet.availproject.org:26650/websocket",
-          //   INTENT_EXPLORER_URL:
-          //     "https://explorer.nexus-cerise.availproject.org",
-          //   VSC_BASE_URL: "https://vsc-debugnet.availproject.org",
-          //   VSC_WS_URL: "wss://vsc-debugnet.availproject.org",
-          // },
-          network: "mainnet",
-          debug: true,
-        }}
-      >
-        <div className="font-sans min-h-screen overflow-x-hidden w-full">
-          <Navbar />
-          <div className="min-h-full w-full max-w-full flex gap-4 md:gap-16 overflow-x-hidden">
-            <div
-              className="absolute inset-0 z-0"
-              style={{
-                background: `radial-gradient(125% 125% at 50% 10%, #fff 50%, ${config.primaryColor} 125%)`,
-              }}
-            />
-            <main className="flex flex-col flex-1 min-w-0 max-w-full px-4 py-12 gap-8">
-              <HeroSection />
-              <FastBridgeShowcase />
-            </main>
-          </div>
-        </div>
-        <Toaster />
-      </NexusProvider>
-    </Web3Provider>
-  );
-}
diff --git a/apps/monad/src/components/common/hooks/useInterval.ts b/apps/monad/src/components/common/hooks/useInterval.ts
deleted file mode 100644
index 2287075..0000000
--- a/apps/monad/src/components/common/hooks/useInterval.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useStableCallback } from "./useStableCallback";
-
-interface UseIntervalOptions {
-  enabled?: boolean;
-  immediate?: boolean;
-}
-
-/**
- * Declarative setInterval with pause/resume and latest-callback semantics.
- * Pass delay=null to pause.
- */
-export function useInterval(
-  callback: () => void,
-  delay: number | null,
-  options: UseIntervalOptions = {}
-) {
-  const { enabled = true, immediate = false } = options;
-  const savedCallback = useStableCallback(callback);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (!enabled || delay == null) return;
-    if (immediate) {
-      savedCallback();
-    }
-    intervalRef.current = setInterval(savedCallback, delay);
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [delay, enabled, immediate, savedCallback]);
-}
diff --git a/apps/monad/src/components/common/hooks/useNexusError.ts b/apps/monad/src/components/common/hooks/useNexusError.ts
deleted file mode 100644
index b14851e..0000000
--- a/apps/monad/src/components/common/hooks/useNexusError.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NexusError } from "@avail-project/nexus-core";
-
-function handler(err: unknown) {
-  if (err instanceof NexusError) {
-    return {
-      code: err?.code,
-      message: err?.message,
-      context: err?.data?.context,
-      details: err?.data?.details,
-    };
-  } else {
-    console.error("Unexpected error:", err);
-    return {
-      code: "unexpected_error",
-      message: "Oops! Something went wrong. Please try again.",
-      context: undefined,
-      details: undefined,
-    };
-  }
-}
-export function useNexusError() {
-  return handler;
-}
diff --git a/apps/monad/src/components/common/hooks/useStableCallback.ts b/apps/monad/src/components/common/hooks/useStableCallback.ts
deleted file mode 100644
index b6d8cb2..0000000
--- a/apps/monad/src/components/common/hooks/useStableCallback.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useCallback, useRef } from "react";
-
-/**
- * Returns a stable function identity that always calls the latest implementation.
- * Useful when passing callbacks to memoized children without re-creating handlers.
- */
-export function useStableCallback<Args extends readonly unknown[], Return>(
-  fn: (...args: Args) => Return
-): (...args: Args) => Return {
-  const fnRef = useRef<(...args: Args) => Return>(fn);
-  fnRef.current = fn;
-
-   
-  const stable = useCallback(
-    ((...args: Args) => {
-      return fnRef.current(...args);
-    }) as (...args: Args) => Return,
-    []
-  );
-
-  return stable;
-}
diff --git a/apps/monad/src/components/common/index.ts b/apps/monad/src/components/common/index.ts
deleted file mode 100644
index f5a855e..0000000
--- a/apps/monad/src/components/common/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from "./hooks/useStopwatch";
-export * from "./hooks/usePolling";
-export * from "./hooks/useInterval";
-export * from "./hooks/useStableCallback";
-export * from "./hooks/useDebouncedValue";
-export * from "./hooks/useDebouncedCallback";
-export * from "./hooks/useNexusError";
-export * from "./tx/types";
-export * from "./tx/steps";
-export * from "./tx/useTransactionSteps";
-export * from "./utils/constant";
diff --git a/apps/monad/src/components/common/tx/types.ts b/apps/monad/src/components/common/tx/types.ts
deleted file mode 100644
index 7a2a7b1..0000000
--- a/apps/monad/src/components/common/tx/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type TransactionStatus =
-  | "idle"
-  | "preview"
-  | "awaiting-approval"
-  | "executing"
-  | "success"
-  | "error";
-
-export type GenericStep<TStep> = {
-  id: number;
-  completed: boolean;
-  step: TStep;
-};
-
-/**
- * Normalizes a step to a stable key. Prefers typeID, then type, otherwise JSON.
- */
-export function getStepKey(step: any): string {
-  if (!step) return "";
-  if (typeof step.typeID === "string" && step.typeID.length > 0) {
-    return step.typeID;
-  }
-  if (typeof step.type === "string" && step.type.length > 0) {
-    return step.type;
-  }
-  try {
-    return JSON.stringify(step);
-  } catch {
-    return String(step);
-  }
-}
diff --git a/apps/monad/src/components/fast-bridge-showcase.tsx b/apps/monad/src/components/fast-bridge-showcase.tsx
deleted file mode 100644
index 0ec7ddd..0000000
--- a/apps/monad/src/components/fast-bridge-showcase.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-import { useAccount } from "wagmi";
-import { ConnectKitButton } from "connectkit";
-import FastBridge from "./fast-bridge/fast-bridge";
-import { PreviewPanel } from "./walletConnect";
-
-const FastBridgeShowcase = () => {
-  const { address, isConnected } = useAccount();
-
-  return (
-    <PreviewPanel>
-      <ConnectKitButton.Custom>
-        {({ show }) => (
-          <FastBridge
-            connectedAddress={address}
-            isWalletConnected={isConnected}
-            onConnectWallet={show}
-          />
-        )}
-      </ConnectKitButton.Custom>
-    </PreviewPanel>
-  );
-};
-
-export default FastBridgeShowcase;
diff --git a/apps/monad/src/components/fast-bridge/components/amount-input.tsx b/apps/monad/src/components/fast-bridge/components/amount-input.tsx
deleted file mode 100644
index af8251f..0000000
--- a/apps/monad/src/components/fast-bridge/components/amount-input.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { type FC, Fragment, useEffect, useRef } from "react";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { SUPPORTED_CHAINS, type UserAsset } from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type FastBridgeState } from "../hooks/useBridge";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { SHORT_CHAIN_NAME } from "../../common";
-import { LoaderCircle } from "lucide-react";
-
-interface AmountInputProps {
-  amount?: string;
-  onChange: (value: string) => void;
-  bridgableBalance?: UserAsset;
-  onCommit?: (value: string) => void;
-  disabled?: boolean;
-  inputs: FastBridgeState;
-  showBalanceDetails?: boolean;
-}
-
-const AmountInput: FC<AmountInputProps> = ({
-  amount,
-  onChange,
-  bridgableBalance,
-  onCommit,
-  disabled,
-  inputs,
-  showBalanceDetails = true,
-}) => {
-  const { nexusSDK, loading } = useNexus();
-  const commitTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const showBalanceDivider = showBalanceDetails && Boolean(bridgableBalance);
-
-  const scheduleCommit = (val: string) => {
-    if (!onCommit || disabled) return;
-    if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    commitTimerRef.current = setTimeout(() => {
-      onCommit(val);
-    }, 800);
-  };
-
-  const onMaxClick = async () => {
-    if (!showBalanceDetails || !nexusSDK || !inputs) return;
-    const maxBalAvailable = await nexusSDK?.calculateMaxForBridge({
-      token: inputs?.token,
-      toChainId: inputs?.chain,
-      recipient: inputs?.recipient,
-    });
-    if (!maxBalAvailable) return;
-    onChange(maxBalAvailable.amount);
-    onCommit?.(maxBalAvailable.amount);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (commitTimerRef.current) {
-        clearTimeout(commitTimerRef.current);
-        commitTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-y-2 pb-2 w-full">
-      <div className="w-full flex sm:flex-row flex-col border border-border rounded-lg gap-y-2">
-        <Input
-          type="text"
-          inputMode="decimal"
-          value={amount ?? ""}
-          placeholder="Enter Amount"
-          onChange={(e) => {
-            let next = e.target.value.replaceAll(/[^0-9.]/g, "");
-            const parts = next.split(".");
-            if (parts.length > 2)
-              next = parts[0] + "." + parts.slice(1).join("");
-            if (next === ".") next = "0.";
-            onChange(next);
-            scheduleCommit(next);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              if (commitTimerRef.current) {
-                clearTimeout(commitTimerRef.current);
-                commitTimerRef.current = null;
-              }
-              onCommit?.(amount ?? "");
-            }
-          }}
-          className="w-full border-none bg-transparent rounded-r-none focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none py-0 px-3  h-12!"
-          aria-invalid={Boolean(amount) && Number.isNaN(Number(amount))}
-          disabled={disabled}
-        />
-        <div
-          className={`flex items-center justify-end-safe gap-x-2 sm:gap-x-4 w-fit px-2 ${
-            showBalanceDivider ? "border-l border-border" : ""
-          }`}
-        >
-          {showBalanceDetails && bridgableBalance && (
-            <p className="text-base font-medium min-w-max">
-              {nexusSDK?.utils?.formatTokenBalance(bridgableBalance?.balance, {
-                symbol:
-                  bridgableBalance?.displaySymbol ?? bridgableBalance?.symbol,
-                decimals: bridgableBalance?.decimals,
-              })}
-            </p>
-          )}
-          {showBalanceDetails && loading && !bridgableBalance && (
-            <LoaderCircle className="size-4 animate-spin" />
-          )}
-          {showBalanceDetails && (
-            <Button
-              size={"sm"}
-              variant={"ghost"}
-              onClick={onMaxClick}
-              className="px-0 font-medium"
-              disabled={disabled}
-            >
-              MAX
-            </Button>
-          )}
-        </div>
-      </div>
-      {showBalanceDetails && (
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="balance-breakdown">
-            <AccordionTrigger
-              className="w-fit justify-end items-center py-0 mt-2 gap-x-0.5 cursor-pointer text-sm font-normal"
-              hideChevron={false}
-            >
-              View Balance Breakdown
-            </AccordionTrigger>
-            <AccordionContent className="pb-0 bg-muted rounded-lg mt-4">
-              <div className="space-y-1 py-2">
-                {bridgableBalance?.breakdown.map((chain) => {
-                  if (Number.parseFloat(chain.balance) === 0) return null;
-                  if (
-                    bridgableBalance.symbol === "USDM" &&
-                    chain.chain.id === SUPPORTED_CHAINS.MEGAETH
-                  )
-                    return null;
-                  return (
-                    <Fragment key={chain.chain.id}>
-                      <div className="flex items-center justify-between px-2 py-1 rounded-md">
-                        <div className="flex items-center gap-2">
-                          <div className="relative h-6 w-6">
-                            <img
-                              src={chain?.chain?.logo}
-                              alt={chain.chain.name}
-                              sizes="100%"
-                              className="rounded-full"
-                              loading="lazy"
-                              decoding="async"
-                              width="20"
-                              height="20"
-                            />
-                          </div>
-                          <span className="text-sm font-light sm:block hidden">
-                            {SHORT_CHAIN_NAME[chain.chain.id]}
-                          </span>
-                        </div>
-                        <p className="text-sm font-light text-right">
-                          {nexusSDK?.utils?.formatTokenBalance(chain.balance, {
-                            symbol:
-                              bridgableBalance?.displaySymbol ??
-                              bridgableBalance?.symbol,
-                            decimals: bridgableBalance?.decimals,
-                          })}
-                        </p>
-                      </div>
-                    </Fragment>
-                  );
-                })}
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
-    </div>
-  );
-};
-
-export default AmountInput;
diff --git a/apps/monad/src/components/fast-bridge/components/balance-breakdown.tsx b/apps/monad/src/components/fast-bridge/components/balance-breakdown.tsx
deleted file mode 100644
index 6cdeec3..0000000
--- a/apps/monad/src/components/fast-bridge/components/balance-breakdown.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { type UserAsset } from "@avail-project/nexus-core";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-
-interface BalanceBreakdownProps {
-  assetBalances: UserAsset;
-}
-
-const BalanceBreakdown = ({ assetBalances }: BalanceBreakdownProps) => {
-  return (
-    <Accordion type="single" collapsible style={{ marginTop: "-0.5rem" }}>
-      <AccordionItem value="sources">
-        <div className="flex items-start justify-end gap-x-4 w-full">
-          {assetBalances && (
-            <div className="flex flex-col items-end gap-y-1 min-w-fit">
-              <AccordionTrigger
-                containerClassName="w-fit"
-                className="py-0 items-center gap-x-1"
-                hideChevron={false}
-              >
-                <p className="text-sm font-light">View Balance Breakdown</p>
-              </AccordionTrigger>
-            </div>
-          )}
-        </div>
-        {assetBalances && (
-          <AccordionContent className="my-4 bg-muted pb-0 px-4 py-2 rounded-lg w-full">
-            <div className="flex flex-col items-center gap-y-3">
-              {assetBalances?.breakdown?.map((individualBalance) => (
-                <div
-                  key={individualBalance.chain.id}
-                  className="flex items-center justify-between w-full gap-x-2"
-                >
-                  <div className="flex items-center gap-x-2">
-                    <img
-                      src={individualBalance.chain.logo}
-                      alt={individualBalance.chain.name}
-                      width={20}
-                      height={20}
-                      className="rounded-full"
-                    />
-                    <p className="text-sm font-light">
-                      {individualBalance.chain.name}
-                    </p>
-                  </div>
-
-                  <p className="text-sm font-light">
-                    {individualBalance.balance} {assetBalances.symbol}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </AccordionContent>
-        )}
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default BalanceBreakdown;
diff --git a/apps/monad/src/components/fast-bridge/components/chain-select.tsx b/apps/monad/src/components/fast-bridge/components/chain-select.tsx
deleted file mode 100644
index 3899cd2..0000000
--- a/apps/monad/src/components/fast-bridge/components/chain-select.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { type FC, useMemo } from "react";
-import { Label } from "../../ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
-import { type SUPPORTED_CHAINS_IDS } from "@avail-project/nexus-core";
-import { cn } from "@/lib/utils";
-import { useNexus } from "../../nexus/NexusProvider";
-
-interface ChainSelectProps {
-  selectedChain: number;
-  disabled?: boolean;
-  hidden?: boolean;
-  className?: string;
-  label?: string;
-  handleSelect: (chainId: SUPPORTED_CHAINS_IDS) => void;
-}
-
-const ChainSelect: FC<ChainSelectProps> = ({
-  selectedChain,
-  disabled,
-  hidden = false,
-  className,
-  label,
-  handleSelect,
-}) => {
-  const { supportedChainsAndTokens } = useNexus();
-
-  const selectedChainData = useMemo(() => {
-    if (!supportedChainsAndTokens) return null;
-    return supportedChainsAndTokens.find((c) => c.id === selectedChain);
-  }, [selectedChain, supportedChainsAndTokens]);
-
-  if (hidden) return null;
-  return (
-    <Select
-      value={selectedChain?.toString() ?? ""}
-      onValueChange={(value) => {
-        if (!disabled) {
-          handleSelect(Number.parseInt(value) as SUPPORTED_CHAINS_IDS);
-        }
-      }}
-    >
-      <div className="flex flex-col items-start gap-y-3 w-full">
-        {label && <Label className="text-sm font-semibold">{label}</Label>}
-        <SelectTrigger
-          disabled={disabled}
-          className="h-12! w-full text-base font-light"
-        >
-          <SelectValue>
-            {selectedChainData && (
-              <div
-                className={cn("flex items-center gap-x-2 w-full", className)}
-              >
-                <img
-                  src={selectedChainData?.logo}
-                  alt={selectedChainData?.name}
-                  width={24}
-                  height={24}
-                  className="rounded-full"
-                />
-                <p className="text-primary test-sm">
-                  {selectedChainData?.name}
-                </p>
-              </div>
-            )}
-          </SelectValue>
-        </SelectTrigger>
-      </div>
-
-      <SelectContent>
-        <SelectGroup className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-scroll no-scrollbar">
-          {supportedChainsAndTokens?.map((chain) => {
-            return (
-              <SelectItem key={chain.id} value={String(chain.id)}>
-                <div className="flex items-center gap-x-2 my-1">
-                  <img
-                    src={chain.logo}
-                    alt={chain?.name}
-                    width={24}
-                    height={24}
-                    className="rounded-full"
-                  />
-                  <p className="text-primary test-sm">{chain.name}</p>
-                </div>
-              </SelectItem>
-            );
-          })}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-};
-
-export default ChainSelect;
diff --git a/apps/monad/src/components/fast-bridge/components/receipient-address.tsx b/apps/monad/src/components/fast-bridge/components/receipient-address.tsx
deleted file mode 100644
index 0bb4192..0000000
--- a/apps/monad/src/components/fast-bridge/components/receipient-address.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-import * as React from "react";
-import { Input } from "../../ui/input";
-import { Check, Edit } from "lucide-react";
-import { Button } from "../../ui/button";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type Address } from "viem";
-
-interface ReceipientAddressProps {
-  address?: Address;
-  onChange: (address: string) => void;
-}
-
-const ReceipientAddress: React.FC<ReceipientAddressProps> = ({
-  address,
-  onChange,
-}) => {
-  const { nexusSDK } = useNexus();
-  const [isEditing, setIsEditing] = React.useState(false);
-  const fallbackTruncate = (value: string, head = 6, tail = 6) => {
-    if (!value) return "";
-    if (value.length <= head + tail) return value;
-    return `${value.slice(0, head)}...${value.slice(-tail)}`;
-  };
-  const displayAddress =
-    address && nexusSDK?.utils?.truncateAddress
-      ? nexusSDK.utils.truncateAddress(address, 6, 6)
-      : address
-        ? fallbackTruncate(address, 6, 6)
-        : "";
-  return (
-    <div className="w-full">
-      {isEditing ? (
-        <div className="flex items-center w-full justify-between gap-x-4">
-          <Input
-            value={address}
-            placeholder="Enter Recipient Address"
-            onChange={(e) => onChange(e.target.value)}
-            className="w-full text-base font-medium"
-          />
-          <Button
-            variant={"ghost"}
-            size={"icon"}
-            onClick={() => {
-              setIsEditing(false);
-            }}
-          >
-            <Check className="size-5" />
-          </Button>
-        </div>
-      ) : (
-        <div className="flex items-center w-full justify-between">
-          <p className="font-medium text-base">Recipient Address</p>
-          <div className="flex items-center gap-x-3 ">
-            <p className="font-medium text-base">{displayAddress}</p>
-
-            <Button
-              variant={"ghost"}
-              size={"icon"}
-              onClick={() => {
-                setIsEditing(true);
-              }}
-              className="px-0 size-5"
-            >
-              <Edit className="size-5" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ReceipientAddress;
diff --git a/apps/monad/src/components/fast-bridge/components/source-breakdown.tsx b/apps/monad/src/components/fast-bridge/components/source-breakdown.tsx
deleted file mode 100644
index bbe5c84..0000000
--- a/apps/monad/src/components/fast-bridge/components/source-breakdown.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {
-  type ReadableIntent,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../ui/accordion";
-import { Skeleton } from "../../ui/skeleton";
-import { useNexus } from "../../nexus/NexusProvider";
-
-interface SourceBreakdownProps {
-  intent?: ReadableIntent;
-  tokenSymbol: SUPPORTED_TOKENS;
-  isLoading?: boolean;
-}
-
-const SourceBreakdown = ({
-  intent,
-  tokenSymbol,
-  isLoading = false,
-}: SourceBreakdownProps) => {
-  const { nexusSDK } = useNexus();
-  const spendSymbol =
-    intent?.token.displaySymbol ?? intent?.token.symbol ?? tokenSymbol;
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="sources">
-        <div className="flex items-start justify-between gap-x-4 w-full">
-          {isLoading ? (
-            <>
-              <div className="flex flex-col items-start gap-y-1 min-w-fit">
-                <p className="text-base font-light">You Spend</p>
-                <Skeleton className="h-4 w-44" />
-              </div>
-              <div className="flex flex-col items-end gap-y-1 min-w-fit">
-                <Skeleton className="h-5 w-24" />
-                <div className="w-fit">
-                  <Skeleton className="h-4 w-24" />
-                </div>
-              </div>
-            </>
-          ) : (
-            intent?.sources && (
-              <>
-                <div className="flex flex-col items-start gap-y-1 min-w-fit">
-                  <p className="text-base font-light">You Spend</p>
-                  <p className="text-sm font-light">
-                    {`${spendSymbol.toUpperCase()} on ${
-                      intent?.sources?.length
-                    } ${intent?.sources?.length > 1 ? "chains" : "chain"}`}
-                  </p>
-                </div>
-
-                <div className="flex flex-col items-end gap-y-1 min-w-fit">
-                  <p className="text-base font-light">
-                    {nexusSDK?.utils?.formatTokenBalance(intent?.sourcesTotal, {
-                      symbol: spendSymbol,
-                      decimals: intent?.token?.decimals,
-                    })}
-                  </p>
-                  <AccordionTrigger
-                    containerClassName="w-fit"
-                    className="py-0 items-center gap-x-1"
-                    hideChevron={false}
-                  >
-                    <p className="text-sm font-light">View Sources</p>
-                  </AccordionTrigger>
-                </div>
-              </>
-            )
-          )}
-        </div>
-        {!isLoading && intent?.sources && (
-          <AccordionContent className="my-4 bg-muted pb-0 px-4 py-2 rounded-lg w-full">
-            <div className="flex flex-col items-center gap-y-3">
-              {intent?.sources?.map((source) => (
-                <div
-                  key={source.chainID}
-                  className="flex items-center justify-between w-full gap-x-2"
-                >
-                  <div className="flex items-center gap-x-2">
-                    <img
-                      src={source?.chainLogo}
-                      alt={source?.chainName}
-                      width={20}
-                      height={20}
-                      className="rounded-full"
-                    />
-                    <p className="text-base font-light">{source.chainName}</p>
-                  </div>
-
-                  <p className="text-base font-light">
-                    {nexusSDK?.utils?.formatTokenBalance(source.amount, {
-                      symbol: spendSymbol,
-                      decimals: intent?.token?.decimals,
-                    })}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </AccordionContent>
-        )}
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-export default SourceBreakdown;
diff --git a/apps/monad/src/components/fast-bridge/components/token-select.tsx b/apps/monad/src/components/fast-bridge/components/token-select.tsx
deleted file mode 100644
index e869231..0000000
--- a/apps/monad/src/components/fast-bridge/components/token-select.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import {
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
-import { Label } from "../../ui/label";
-import { useNexus } from "../../nexus/NexusProvider";
-import { useMemo } from "react";
-
-interface TokenSelectProps {
-  selectedToken?: SUPPORTED_TOKENS;
-  selectedChain: SUPPORTED_CHAINS_IDS;
-  handleTokenSelect: (token: SUPPORTED_TOKENS) => void;
-  isTestnet?: boolean;
-  disabled?: boolean;
-  label?: string;
-}
-
-const TokenSelect = ({
-  selectedToken,
-  selectedChain,
-  handleTokenSelect,
-  isTestnet = false,
-  disabled = false,
-  label,
-}: TokenSelectProps) => {
-  const { supportedChainsAndTokens } = useNexus();
-  const tokenData = useMemo(() => {
-    return supportedChainsAndTokens
-      ?.filter((chain) => chain.id === selectedChain)
-      .flatMap((chain) => chain.tokens);
-  }, [selectedChain, supportedChainsAndTokens]);
-
-  const selectedTokenData = tokenData?.find((token) => {
-    return token.symbol === selectedToken;
-  });
-
-  return (
-    <Select
-      value={selectedToken}
-      onValueChange={(value) =>
-        !disabled && handleTokenSelect(value as SUPPORTED_TOKENS)
-      }
-    >
-      <div className="flex flex-col items-start gap-y-1">
-        {label && <Label className="text-sm font-semibold">{label}</Label>}
-        <SelectTrigger
-          disabled={disabled}
-          className="w-full h-12! text-base font-light"
-        >
-          <SelectValue placeholder="Select a token" className="w-full">
-            {selectedChain && selectedTokenData && (
-              <div className="flex items-center gap-x-2 w-full">
-                <img
-                  src={selectedTokenData?.logo}
-                  alt={selectedTokenData?.symbol}
-                  width={24}
-                  height={24}
-                  className="rounded-full"
-                />
-                {selectedToken}
-              </div>
-            )}
-          </SelectValue>
-        </SelectTrigger>
-      </div>
-
-      <SelectContent>
-        <SelectGroup>
-          {tokenData?.map((token) => (
-            <SelectItem key={token.symbol} value={token.symbol}>
-              <div className="flex items-center gap-x-2 my-1">
-                <img
-                  src={token.logo}
-                  alt={token.symbol}
-                  width={24}
-                  height={24}
-                  className="rounded-full"
-                />
-                <div className="flex flex-col">
-                  <span>
-                    {isTestnet ? `${token.symbol} (Testnet)` : token.symbol}
-                  </span>
-                </div>
-              </div>
-            </SelectItem>
-          ))}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-};
-
-export default TokenSelect;
diff --git a/apps/monad/src/components/fast-bridge/components/transaction-progress.tsx b/apps/monad/src/components/fast-bridge/components/transaction-progress.tsx
deleted file mode 100644
index f877513..0000000
--- a/apps/monad/src/components/fast-bridge/components/transaction-progress.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Check, Circle, LoaderPinwheel } from "lucide-react";
-import { type FC, memo, useMemo } from "react";
-import {
-  type BridgeStepType,
-  type SwapStepType,
-} from "@avail-project/nexus-core";
-
-type ProgressStep = BridgeStepType | SwapStepType;
-
-interface TransactionProgressProps {
-  timer: number;
-  steps: Array<{ id: number; completed: boolean; step: ProgressStep }>;
-  viewIntentUrl?: string;
-  operationType?: string;
-  completed?: boolean;
-}
-
-export const getOperationText = (type: string) => {
-  switch (type) {
-    case "bridge":
-      return "Transaction";
-    case "transfer":
-      return "Transferring";
-    case "bridgeAndExecute":
-      return "Bridge & Execute";
-    case "swap":
-      return "Swapping";
-    default:
-      return "Processing";
-  }
-};
-
-type DisplayStep = { id: string; label: string; completed: boolean };
-
-const StepList: FC<{ steps: DisplayStep[]; currentIndex: number }> = memo(
-  ({ steps, currentIndex }) => {
-    return (
-      <div className="w-full mt-6 space-y-6">
-        {steps.map((s, idx) => {
-          const isCompleted = !!s.completed;
-          const isCurrent = currentIndex === -1 ? false : idx === currentIndex;
-
-          let rightIcon = <Circle className="size-5 text-muted-foreground" />;
-          if (isCompleted) {
-            rightIcon = <Check className="size-5 text-green-600" />;
-          } else if (isCurrent) {
-            rightIcon = (
-              <LoaderPinwheel className="size-5 animate-spin text-muted-foreground" />
-            );
-          }
-
-          return (
-            <div
-              key={s.id}
-              className="flex items-center justify-between w-full"
-            >
-              <div className="flex items-center gap-x-3">
-                <span className="text-base font-semibold">{s.label}</span>
-              </div>
-              {rightIcon}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-);
-StepList.displayName = "StepList";
-
-const TransactionProgress: FC<TransactionProgressProps> = ({
-  timer,
-  steps,
-  viewIntentUrl,
-  operationType = "bridge",
-  completed = false,
-}) => {
-  const totalSteps = Array.isArray(steps) ? steps.length : 0;
-  const completedSteps = Array.isArray(steps)
-    ? steps.reduce((acc, s) => acc + (s?.completed ? 1 : 0), 0)
-    : 0;
-  const rawPercent = totalSteps > 0 ? completedSteps / totalSteps : 0;
-  const percent = completed ? 1 : rawPercent;
-  const allCompleted = completed || percent >= 1;
-  const opText = getOperationText(operationType);
-  const headerText = allCompleted
-    ? `${opText} Completed`
-    : `${opText} In Progress...`;
-  const ctaText = allCompleted ? `View Explorer` : "View Intent";
-
-  const { effectiveSteps, currentIndex } = useMemo(() => {
-    const milestones = [
-      "Intent verified",
-      "Collected on sources",
-      "Filled on destination",
-    ];
-    const thresholds = milestones.map(
-      (_, idx) => (idx + 1) / milestones.length
-    );
-    const displaySteps: DisplayStep[] = milestones.map((label, idx) => ({
-      id: `M${idx}`,
-      label,
-      completed: idx === 0 ? timer > 0 : percent >= thresholds[idx],
-    }));
-    const current = displaySteps.findIndex((st) => !st.completed);
-    return { effectiveSteps: displaySteps, currentIndex: current };
-  }, [percent, timer, completed]);
-
-  return (
-    <div className="w-full flex flex-col items-center">
-      <div className="flex flex-col items-center gap-y-3">
-        {allCompleted ? (
-          <Check className="size-6 text-green-600" />
-        ) : (
-          <LoaderPinwheel className="size-6 animate-spin" />
-        )}
-        <p>{headerText}</p>
-        <div className="flex items-center justify-center w-full">
-          <span className="text-2xl font-semibold font-nexus-primary text-nexus-black">
-            {Math.floor(timer)}
-          </span>
-          <span className="text-base font-semibold font-nexus-primary text-nexus-black">
-            .
-          </span>
-          <span className="text-base font-semibold font-nexus-primary text-nexus-muted-secondary">
-            {String(Math.floor((timer % 1) * 1000)).padStart(3, "0")}s
-          </span>
-        </div>
-      </div>
-
-      <StepList steps={effectiveSteps} currentIndex={currentIndex} />
-
-      {viewIntentUrl && (
-        <a
-          href={viewIntentUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="mt-8 underline font-semibold"
-        >
-          {ctaText}
-        </a>
-      )}
-    </div>
-  );
-};
-
-export default TransactionProgress;
diff --git a/apps/monad/src/components/fast-bridge/fast-bridge.tsx b/apps/monad/src/components/fast-bridge/fast-bridge.tsx
deleted file mode 100644
index 6d6e107..0000000
--- a/apps/monad/src/components/fast-bridge/fast-bridge.tsx
+++ /dev/null
@@ -1,470 +0,0 @@
-"use client";
-import { type FC, useEffect, useMemo, useRef, useState } from "react";
-import { Card, CardContent } from "../ui/card";
-import ChainSelect from "./components/chain-select";
-import TokenSelect from "./components/token-select";
-import { Button } from "../ui/button";
-import { X, CheckCircle2 } from "lucide-react";
-import { useNexus } from "../nexus/NexusProvider";
-import AmountInput from "./components/amount-input";
-import FeeBreakdown from "./components/fee-breakdown";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import TransactionProgress from "./components/transaction-progress";
-import AllowanceModal from "./components/allowance-modal";
-import useBridge from "./hooks/useBridge";
-import SourceBreakdown from "./components/source-breakdown";
-import {
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-} from "@avail-project/nexus-core";
-import { type Address } from "viem";
-import { Skeleton } from "../ui/skeleton";
-import RecipientAddress from "./components/recipient-address";
-import ViewHistory from "../view-history/view-history";
-import { toast } from "sonner";
-import Decimal from "decimal.js";
-
-interface FastBridgeProps {
-  connectedAddress?: Address;
-  isWalletConnected?: boolean;
-  onConnectWallet?: () => void;
-  mockIntent?: {
-    totalAmount?: string;
-    receiveAmount?: string;
-    totalGas?: string;
-  };
-  prefill?: {
-    token: SUPPORTED_TOKENS;
-    chainId: SUPPORTED_CHAINS_IDS;
-    amount?: string;
-    recipient?: Address;
-  };
-  onComplete?: () => void;
-  onStart?: () => void;
-  onError?: (message: string) => void;
-}
-
-const FastBridge: FC<FastBridgeProps> = ({
-  connectedAddress,
-  isWalletConnected,
-  onConnectWallet,
-  mockIntent,
-  onComplete,
-  onStart,
-  onError,
-  prefill,
-}) => {
-  const {
-    nexusSDK,
-    intent,
-    bridgableBalance,
-    allowance,
-    network,
-    fetchBridgableBalance,
-  } = useNexus();
-  const [historyRefreshNonce, setHistoryRefreshNonce] = useState(0);
-
-  const {
-    inputs,
-    setInputs,
-    timer,
-    loading,
-    refreshing,
-    isDialogOpen,
-    txError,
-    setTxError,
-    handleTransaction,
-    reset,
-    filteredBridgableBalance,
-    startTransaction,
-    setIsDialogOpen,
-    commitAmount,
-    lastExplorerUrl,
-    steps,
-    status,
-    areInputsValid,
-  } = useBridge({
-    prefill,
-    network: network ?? "mainnet",
-    connectedAddress,
-    nexusSDK,
-    intent,
-    bridgableBalance,
-    allowance,
-    onComplete: async () => {
-      if (onComplete) {
-        onComplete();
-      }
-      const sourcesText =
-        intent.current?.intent?.sources?.length &&
-        intent.current?.intent.sources.length > 0
-          ? intent.current.intent.sources.map((s) => s.chainName).join(", ")
-          : "N/A";
-      toast.success(
-        <div className="flex flex-col gap-2 w-full">
-          <div className="flex items-center gap-2">
-            <CheckCircle2 className="size-5 text-green-500" />
-            <span className="font-semibold">Bridge Successful!</span>
-          </div>
-          <div className="flex flex-col gap-1.5 text-sm text-muted-foreground">
-            <div>
-              <span className="font-medium">Source(s):</span> {sourcesText}
-            </div>
-            <div>
-              <span className="font-medium">Destination:</span>{" "}
-              {intent.current?.intent?.destination?.chainName || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Asset:</span>{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Amount Spent:</span>{" "}
-              {intent.current?.intent?.sourcesTotal
-                ? new Decimal(intent.current?.intent?.sourcesTotal).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Amount Received:</span>{" "}
-              {intent.current?.intent?.destination?.amount
-                ? new Decimal(
-                    intent.current?.intent?.destination?.amount,
-                  ).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            <div>
-              <span className="font-medium">Total Fees:</span>{" "}
-              {intent.current?.intent?.fees.total
-                ? new Decimal(intent.current?.intent?.fees.total).toFixed()
-                : "NaN"}{" "}
-              {intent.current?.intent?.token.symbol || "Unknown"}
-            </div>
-            {lastExplorerUrl ? (
-              <div className="mt-2 pt-2 border-t">
-                <a
-                  href={lastExplorerUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-primary hover:underline font-medium"
-                >
-                  View on Explorer
-                </a>
-              </div>
-            ) : null}
-          </div>
-        </div>,
-        {
-          duration: Infinity, // Stay until dismissed
-          closeButton: true,
-          icon: null, // Remove default icon since we're adding our own
-        },
-      );
-      setHistoryRefreshNonce((prev) => prev + 1);
-    },
-    onStart,
-    onError: (message) => {
-      toast.error(message);
-      if (onError) {
-        onError(message);
-      }
-    },
-    fetchBalance: fetchBridgableBalance,
-  });
-  const isConnected = isWalletConnected ?? Boolean(connectedAddress);
-  const isSdkReady = Boolean(nexusSDK);
-  const showSdkDetails = isSdkReady;
-  const receiveSymbol =
-    intent?.current?.intent?.token.symbol ??
-    // @ts-expect-error - not possible
-    intent?.current?.intent?.token.displaySymbol ??
-    filteredBridgableBalance?.symbol;
-
-  const amountValue = useMemo(() => {
-    if (!inputs?.amount) return null;
-    const parsed = Number.parseFloat(inputs.amount);
-    return Number.isFinite(parsed) ? parsed : null;
-  }, [inputs?.amount]);
-
-  const hasValidAmount = useMemo(() => {
-    if (amountValue === null) return false;
-    return amountValue > 0;
-  }, [amountValue]);
-
-  const formatMockNumber = (value: number) => {
-    if (!Number.isFinite(value)) return "--";
-    const fixed = value.toFixed(6);
-    return fixed.replace(/\.?0+$/, "");
-  };
-
-  const formatWithToken = (value: string, token?: string) => {
-    if (!token) return value;
-    return `${value} ${token}`.trim();
-  };
-
-  const tokenSuffix =
-    inputs?.token ?? filteredBridgableBalance?.symbol ?? "USDC";
-
-  const mockPreview = useMemo(() => {
-    if (!hasValidAmount || amountValue === null) return null;
-    if (mockIntent) {
-      return {
-        totalAmount: mockIntent.totalAmount ?? "--",
-        receiveAmount: mockIntent.receiveAmount ?? "--",
-        totalGas: mockIntent.totalGas ?? "--",
-      };
-    }
-    const totalGas = amountValue * 0.001;
-    const totalAmount = amountValue + totalGas;
-    return {
-      totalAmount: formatWithToken(formatMockNumber(totalAmount), tokenSuffix),
-      receiveAmount: formatWithToken(
-        formatMockNumber(amountValue),
-        tokenSuffix,
-      ),
-      totalGas: formatWithToken(formatMockNumber(totalGas), tokenSuffix),
-    };
-  }, [amountValue, hasValidAmount, mockIntent, tokenSuffix]);
-
-  const showMockPreview = !isConnected && hasValidAmount && mockPreview;
-  const autoIntentTriggered = useRef(false);
-
-  useEffect(() => {
-    autoIntentTriggered.current = false;
-  }, [inputs?.amount, inputs?.chain, inputs?.token, inputs?.recipient]);
-
-  useEffect(() => {
-    if (!isConnected || !isSdkReady) return;
-    if (!areInputsValid) return;
-    if (intent.current) return;
-    // if (loading) return; // Removed to allow "10" fetch even if "1" is loading
-    if (autoIntentTriggered.current) return;
-    autoIntentTriggered.current = true;
-    void handleTransaction();
-  }, [
-    areInputsValid,
-    handleTransaction,
-    intent,
-    isConnected,
-    isSdkReady,
-    loading,
-  ]);
-  return (
-    <Card className="w-full max-w-xl">
-      <CardContent className="flex flex-col gap-y-4 w-full px-2 sm:px-6 relative">
-        {showSdkDetails && (
-          <ViewHistory
-            className="absolute -top-2 right-3"
-            refreshNonce={historyRefreshNonce}
-          />
-        )}
-        <ChainSelect
-          selectedChain={inputs?.chain}
-          handleSelect={(chain) =>
-            setInputs({
-              ...inputs,
-              chain,
-            })
-          }
-          label="To"
-          disabled={!!prefill?.chainId}
-        />
-        <TokenSelect
-          selectedChain={inputs?.chain}
-          selectedToken={inputs?.token}
-          handleTokenSelect={(token) => setInputs({ ...inputs, token })}
-          disabled={!!prefill?.token}
-        />
-        <AmountInput
-          amount={inputs?.amount}
-          onChange={(amount) => setInputs({ ...inputs, amount })}
-          bridgableBalance={filteredBridgableBalance}
-          onCommit={() => void commitAmount()}
-          disabled={refreshing || !!prefill?.amount}
-          inputs={inputs}
-          showBalanceDetails={showSdkDetails}
-        />
-        <RecipientAddress
-          address={inputs?.recipient}
-          onChange={(address) =>
-            setInputs({ ...inputs, recipient: address as `0x${string}` })
-          }
-          disabled={!!prefill?.recipient}
-        />
-        {showMockPreview && (
-          <div className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 space-y-3">
-            <div className="flex items-center justify-between">
-              <p className="text-base font-light">You spend</p>
-              <p className="text-base font-light">{mockPreview?.totalAmount}</p>
-            </div>
-            <div className="flex items-center justify-between">
-              <p className="text-base font-light">You receive</p>
-              <p className="text-base font-light">
-                {mockPreview?.receiveAmount}
-              </p>
-            </div>
-            <div className="flex items-center justify-between">
-              <p className="text-base font-light">Total gas</p>
-              <p className="text-base font-light">{mockPreview?.totalGas}</p>
-            </div>
-          </div>
-        )}
-
-        {showSdkDetails && intent?.current?.intent && (
-          <>
-            <SourceBreakdown
-              intent={intent?.current?.intent}
-              tokenSymbol={filteredBridgableBalance?.symbol as SUPPORTED_TOKENS}
-              isLoading={refreshing}
-            />
-
-            <div className="w-full flex items-start justify-between gap-x-4">
-              <p className="text-base font-light">You receive</p>
-              <div className="flex flex-col gap-y-1 min-w-fit">
-                {refreshing ? (
-                  <Skeleton className="h-5 w-28" />
-                ) : (
-                  <p className="text-base font-light text-right">
-                    {`${
-                      connectedAddress === inputs?.recipient
-                        ? intent?.current?.intent?.destination?.amount
-                        : inputs.amount
-                    } ${receiveSymbol}`}
-                  </p>
-                )}
-                {refreshing ? (
-                  <Skeleton className="h-4 w-36" />
-                ) : (
-                  <p className="text-sm font-light text-right">
-                    on {intent?.current?.intent?.destination?.chainName}
-                  </p>
-                )}
-              </div>
-            </div>
-            <FeeBreakdown
-              intent={intent?.current?.intent}
-              isLoading={refreshing}
-            />
-          </>
-        )}
-
-        {!intent.current && (
-          <Button
-            onClick={() => {
-              if (!isConnected) {
-                if (onConnectWallet) {
-                  onConnectWallet();
-                } else {
-                  toast.error("Wallet connection not available");
-                }
-              } else if (!isSdkReady) {
-                toast.info("Please wait, SDK is still initializing...");
-              } else if (!areInputsValid) {
-                toast.error(
-                  "Please enter a valid amount and recipient address",
-                );
-              } else {
-                // Connected, SDK ready, inputs valid - trigger transaction
-                void handleTransaction();
-              }
-            }}
-            disabled={
-              !isConnected
-                ? false
-                : !inputs?.amount ||
-                  !inputs?.recipient ||
-                  !inputs?.chain ||
-                  !inputs?.token ||
-                  loading ||
-                  Number(inputs?.amount) > 550
-            }
-          >
-            {!isConnected
-              ? "Connect Wallet"
-              : !isSdkReady
-                ? "Initializing..."
-                : !areInputsValid
-                  ? "Bridge"
-                  : status === "error" || txError
-                    ? "Retry"
-                    : "Fetching intent..."}
-          </Button>
-        )}
-
-        <Dialog
-          open={isDialogOpen}
-          onOpenChange={(open) => {
-            if (loading) return;
-            setIsDialogOpen(open);
-          }}
-        >
-          {intent.current && !isDialogOpen && (
-            <div className="w-full flex items-center gap-x-2 justify-between">
-              <Button variant={"destructive"} onClick={reset} className="w-1/2">
-                Deny
-              </Button>
-              <DialogTrigger asChild>
-                <Button
-                  onClick={startTransaction}
-                  className="w-1/2"
-                  disabled={refreshing}
-                >
-                  {refreshing ? "Refreshing..." : "Accept"}
-                </Button>
-              </DialogTrigger>
-            </div>
-          )}
-
-          <DialogContent>
-            <DialogHeader className="sr-only">
-              <DialogTitle>Transaction Progress</DialogTitle>
-            </DialogHeader>
-            {allowance.current ? (
-              <AllowanceModal
-                allowance={allowance}
-                callback={startTransaction}
-                onCloseCallback={reset}
-              />
-            ) : (
-              <TransactionProgress
-                timer={timer}
-                steps={steps}
-                viewIntentUrl={lastExplorerUrl}
-                operationType={"bridge"}
-                completed={status === "success"}
-              />
-            )}
-          </DialogContent>
-        </Dialog>
-
-        {txError && (
-          <div className="rounded-md border border-destructive bg-destructive/80 px-3 py-2 text-sm text-destructive-foreground flex items-start justify-between gap-x-3 mt-3 w-full">
-            <span className="flex-1 w-full">{txError}</span>
-            <Button
-              type="button"
-              size={"icon"}
-              variant={"ghost"}
-              onClick={() => {
-                reset();
-                setTxError(null);
-              }}
-              className="text-destructive-foreground/80 hover:text-destructive-foreground focus:outline-none"
-              aria-label="Dismiss error"
-            >
-              <X className="size-4" />
-            </Button>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-
-export default FastBridge;
diff --git a/apps/monad/src/components/fast-bridge/hooks/useBridge.ts b/apps/monad/src/components/fast-bridge/hooks/useBridge.ts
deleted file mode 100644
index 27ee49f..0000000
--- a/apps/monad/src/components/fast-bridge/hooks/useBridge.ts
+++ /dev/null
@@ -1,387 +0,0 @@
-import {
-  type BridgeStepType,
-  NEXUS_EVENTS,
-  type NexusNetwork,
-  NexusSDK,
-  type OnAllowanceHookData,
-  type OnIntentHookData,
-  // SUPPORTED_CHAINS,
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
-  type UserAsset,
-} from "@avail-project/nexus-core";
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useReducer,
-  type RefObject,
-} from "react";
-import { type Address, isAddress } from "viem";
-import {
-  useStopwatch,
-  usePolling,
-  useNexusError,
-  useTransactionSteps,
-  type TransactionStatus,
-} from "../../common";
-import config from "../../../../config";
-import { trackBridgeSubmit } from "../../../lib/posthog";
-import { SHORT_CHAIN_NAME } from "../../common/utils/constant";
-
-export interface FastBridgeState {
-  chain: SUPPORTED_CHAINS_IDS;
-  token: SUPPORTED_TOKENS;
-  amount?: string;
-  recipient?: `0x${string}`;
-}
-
-const ALLOWED_TOKENS = new Set([
-  "USDC",
-  "USDT",
-  "USDM",
-]) as Set<SUPPORTED_TOKENS>;
-
-interface UseBridgeProps {
-  network: NexusNetwork;
-  connectedAddress?: Address;
-  nexusSDK: NexusSDK | null;
-  intent: RefObject<OnIntentHookData | null>;
-  allowance: RefObject<OnAllowanceHookData | null>;
-  bridgableBalance: UserAsset[] | null;
-  prefill?: {
-    token: string;
-    chainId: number;
-    amount?: string;
-    recipient?: Address;
-  };
-  onComplete?: () => void;
-  onStart?: () => void;
-  onError?: (message: string) => void;
-  fetchBalance: () => Promise<void>;
-}
-
-type BridgeState = {
-  inputs: FastBridgeState;
-  status: TransactionStatus;
-};
-
-type Action =
-  | { type: "setInputs"; payload: Partial<FastBridgeState> }
-  | { type: "resetInputs" }
-  | { type: "setStatus"; payload: TransactionStatus };
-
-const buildInitialInputs = (
-  connectedAddress?: Address,
-  prefill?: {
-    token: string;
-    chainId: number;
-    amount?: string;
-    recipient?: Address;
-  },
-): FastBridgeState => {
-  const validToken =
-    prefill?.token &&
-      ALLOWED_TOKENS.has(prefill.token.toUpperCase() as SUPPORTED_TOKENS)
-      ? (prefill.token.toUpperCase() as SUPPORTED_TOKENS)
-      : config.nexusPrimaryToken || "USDC";
-
-  const validAmount = prefill?.amount
-    ? (() => {
-      const sanitized = prefill.amount.trim();
-      if (!sanitized || sanitized === "." || !/^\d*\.?\d*$/.test(sanitized))
-        return undefined;
-      const num = Number.parseFloat(sanitized);
-      return Number.isNaN(num) || num <= 0 || num > 1e9
-        ? undefined
-        : sanitized;
-    })()
-    : undefined;
-
-  const validRecipient =
-    prefill?.recipient && isAddress(prefill.recipient)
-      ? (prefill.recipient as `0x${string}`)
-      : connectedAddress;
-
-  return {
-    chain: config.chainId as SUPPORTED_CHAINS_IDS,
-    token: validToken as SUPPORTED_TOKENS,
-    amount: validAmount,
-    recipient: validRecipient,
-  };
-};
-
-const useBridge = ({
-  connectedAddress,
-  nexusSDK,
-  intent,
-  bridgableBalance,
-  prefill,
-  onComplete,
-  onStart,
-  onError,
-  fetchBalance,
-  allowance,
-}: UseBridgeProps) => {
-  const handleNexusError = useNexusError();
-  const initialState: BridgeState = {
-    inputs: buildInitialInputs(connectedAddress, prefill),
-    status: "idle",
-  };
-  function reducer(state: BridgeState, action: Action): BridgeState {
-    switch (action.type) {
-      case "setInputs":
-        return { ...state, inputs: { ...state.inputs, ...action.payload } };
-      case "resetInputs":
-        return {
-          ...state,
-          inputs: buildInitialInputs(connectedAddress, prefill),
-        };
-      case "setStatus":
-        return { ...state, status: action.payload };
-      default:
-        return state;
-    }
-  }
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const inputs = state.inputs;
-  const setInputs = (next: FastBridgeState | Partial<FastBridgeState>) => {
-    dispatch({ type: "setInputs", payload: next as Partial<FastBridgeState> });
-  };
-
-  const loading = state.status === "executing";
-  const [refreshing, setRefreshing] = useState(false);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [txError, setTxError] = useState<string | null>(null);
-  const [lastExplorerUrl, setLastExplorerUrl] = useState<string>("");
-  const commitLockRef = useRef<boolean>(false);
-  const txnIdRef = useRef(0);
-  const {
-    steps,
-    onStepsList,
-    onStepComplete,
-    reset: resetSteps,
-  } = useTransactionSteps<BridgeStepType>();
-
-  const areInputsValid = useMemo(() => {
-    const hasToken = inputs?.token !== undefined && inputs?.token !== null;
-    const hasChain = inputs?.chain !== undefined && inputs?.chain !== null;
-    const hasAmount = Boolean(inputs?.amount) && Number(inputs?.amount) > 0;
-    const hasValidrecipient =
-      Boolean(inputs?.recipient) && isAddress(inputs?.recipient as string);
-    return hasToken && hasChain && hasAmount && hasValidrecipient;
-  }, [inputs]);
-
-  const handleTransaction = async () => {
-    if (
-      !inputs?.amount ||
-      !inputs?.recipient ||
-      !inputs?.chain ||
-      !inputs?.token
-    ) {
-      console.error("Missing required inputs");
-      return;
-    }
-
-    if (Number(inputs.amount) > 550) {
-      setTxError("Amount exceeds maximum limit of 550");
-      return;
-    }
-    const currentTxnId = ++txnIdRef.current;
-    dispatch({ type: "setStatus", payload: "executing" });
-    setTxError(null);
-    onStart?.();
-    setLastExplorerUrl("");
-
-    // Track bridge submit event with PostHog
-    trackBridgeSubmit({
-      chain: inputs.chain,
-      chainName: SHORT_CHAIN_NAME[inputs.chain] || `Chain ${inputs.chain}`,
-      tokenSymbol: inputs.token,
-      amount: inputs.amount,
-      fast_bridge: 'monad',
-    });
-
-    try {
-      if (!nexusSDK) {
-        throw new Error("Nexus SDK not initialized");
-      }
-      const formattedAmount = nexusSDK.convertTokenReadableAmountToBigInt(
-        inputs?.amount,
-        inputs?.token,
-        inputs?.chain,
-      );
-      setLastExplorerUrl("");
-      const bridgeTxn = await nexusSDK.bridge(
-        {
-          token: inputs?.token,
-          amount: formattedAmount,
-          toChainId: inputs?.chain,
-          recipient: inputs?.recipient,
-        },
-        {
-          onEvent: (event) => {
-            if (currentTxnId !== txnIdRef.current) return;
-            if (event.name === NEXUS_EVENTS.STEPS_LIST) {
-              const list = Array.isArray(event.args) ? event.args : [];
-              onStepsList(list);
-            }
-            if (event.name === NEXUS_EVENTS.STEP_COMPLETE) {
-              console.log("STEP_EVENT", event);
-              if (event.args.type === "INTENT_HASH_SIGNED") {
-                stopwatch.start();
-              }
-              onStepComplete(event.args);
-            }
-          },
-        },
-      );
-      if (currentTxnId !== txnIdRef.current) return;
-
-      if (!bridgeTxn) {
-        throw new Error("Transaction rejected by user");
-      }
-      if (bridgeTxn) {
-        setLastExplorerUrl(bridgeTxn.explorerUrl);
-        await onSuccess();
-      }
-    } catch (error) {
-      if (currentTxnId !== txnIdRef.current) return;
-      const { message } = handleNexusError(error);
-      intent.current?.deny();
-      intent.current = null;
-      allowance.current = null;
-      setTxError(message);
-      onError?.(message);
-      setIsDialogOpen(false);
-      dispatch({ type: "setStatus", payload: "error" });
-    }
-  };
-
-  const onSuccess = async () => {
-    // Close dialog and stop timer on success
-    stopwatch.stop();
-    dispatch({ type: "setStatus", payload: "success" });
-    onComplete?.();
-    intent.current = null;
-    allowance.current = null;
-    dispatch({ type: "resetInputs" });
-    setRefreshing(false);
-    await fetchBalance();
-  };
-
-  const filteredBridgableBalance = useMemo(() => {
-    return bridgableBalance?.find((bal) => bal?.symbol === inputs?.token);
-  }, [bridgableBalance, inputs?.token]);
-
-  const refreshIntent = async () => {
-    setRefreshing(true);
-    try {
-      await intent.current?.refresh([]);
-    } catch (error) {
-      console.error("Transaction failed:", error);
-    } finally {
-      setRefreshing(false);
-    }
-  };
-
-  const reset = () => {
-    intent.current?.deny();
-    intent.current = null;
-    allowance.current = null;
-    dispatch({ type: "resetInputs" });
-    dispatch({ type: "setStatus", payload: "idle" });
-    setRefreshing(false);
-    stopwatch.stop();
-    stopwatch.reset();
-    resetSteps();
-  };
-
-  const startTransaction = () => {
-    // Reset timer for a fresh run
-    intent.current?.allow();
-    setIsDialogOpen(true);
-    setTxError(null);
-  };
-
-  const commitAmount = async () => {
-    if (commitLockRef.current) return;
-    if (loading || txError || !areInputsValid) return;
-
-    // Validate amount before proceeding
-    if (inputs?.amount) {
-      const amountStr = inputs.amount.trim();
-      if (!amountStr) return;
-
-      const amount = Number.parseFloat(amountStr);
-      if (Number.isNaN(amount) || amount <= 0) return;
-    }
-
-    commitLockRef.current = true;
-    try {
-      await handleTransaction();
-    } finally {
-      commitLockRef.current = false;
-    }
-  };
-
-  usePolling(Boolean(intent.current) && !isDialogOpen, refreshIntent, 15000);
-
-  const stopwatch = useStopwatch({ intervalMs: 100 });
-
-  useEffect(() => {
-    if (intent.current) {
-      // intent.current.deny();
-      intent.current = null;
-    }
-  }, [inputs]);
-
-  useEffect(() => {
-    if (!isDialogOpen) {
-      stopwatch.stop();
-      stopwatch.reset();
-      // Reset all transaction state when dialog closes
-      if (state.status === "success" || state.status === "error") {
-        resetSteps();
-        setLastExplorerUrl("");
-        dispatch({ type: "setStatus", payload: "idle" });
-      }
-    }
-  }, [isDialogOpen, stopwatch, state.status]);
-
-  useEffect(() => {
-    if (txError) {
-      setTxError(null);
-    }
-  }, [inputs]);
-
-  useEffect(() => {
-    if (connectedAddress && !inputs?.recipient) {
-      setInputs({ recipient: connectedAddress as `0x${string}` });
-    }
-  }, [connectedAddress, inputs?.recipient]);
-
-  return {
-    inputs,
-    setInputs,
-    timer: stopwatch.seconds,
-    setIsDialogOpen,
-    setTxError,
-    loading,
-    refreshing,
-    isDialogOpen,
-    txError,
-    handleTransaction,
-    reset,
-    filteredBridgableBalance,
-    startTransaction,
-    commitAmount,
-    lastExplorerUrl,
-    steps,
-    status: state.status,
-    areInputsValid,
-  };
-};
-
-export default useBridge;
diff --git a/apps/monad/src/components/hero-section.tsx b/apps/monad/src/components/hero-section.tsx
deleted file mode 100644
index 89ca4ff..0000000
--- a/apps/monad/src/components/hero-section.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function HeroSection() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" style={{display: "none", width: "100%", marginLeft: "auto", marginRight: "auto", fontSize: "3em", fontWeight: "100"}}>
-      Bridge your unified USDC/USDT balances across 12+ chains, to Avalanche, instantly!
-    </div>
-  );
-}
diff --git a/apps/monad/src/components/navbar.tsx b/apps/monad/src/components/navbar.tsx
deleted file mode 100644
index 22253e1..0000000
--- a/apps/monad/src/components/navbar.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-import { ConnectKitButton } from "connectkit";
-import config from "../../config";
-import AvailLogo from "/avail_logo.svg";
-
-export default function Navbar() {
-  return (
-    <nav className="relative border-b border-border z-10 w-full overflow-x-hidden">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
-        <div className="flex items-center justify-between h-16 min-w-0">
-          <div className="flex items-center min-w-0 shrink overflow-hidden">
-            {config.useChainLogo && (
-              <img
-                src={config.chainLogoUrl}
-                alt={config.chainName}
-                width={150}
-                height={40}
-                className="h-8 w-auto"
-              />
-            )}
-            {!config.useChainLogo && (
-              <div
-                className="text-2xl sm:text-3xl font-light truncate"
-                style={{
-                  marginLeft: "10px",
-                  textTransform: "uppercase",
-                  color: config.primaryColor,
-                  letterSpacing: "0.1em",
-                }}
-              >
-                {config.chainName}
-              </div>
-            )}
-            <div
-              className="hidden md:block text-xl"
-              style={{
-                marginLeft: "5px",
-                fontWeight: "100",
-                paddingTop: "5px",
-              }}
-            >
-              Fast Bridge by
-            </div>
-            <a
-              className="hidden md:block text-xl"
-              href="https://availproject.org"
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{
-                marginLeft: "5px",
-                fontWeight: "100",
-                paddingTop: "5px",
-              }}
-            >
-              <img src={AvailLogo} alt="Avail Logo" width={75} height={20} />
-            </a>
-          </div>
-
-          {/* Right side - Wallet connect only */}
-          <div className="flex items-center shrink-0">
-            <ConnectKitButton />
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-}
diff --git a/apps/monad/src/components/ui/accordion.tsx b/apps/monad/src/components/ui/accordion.tsx
deleted file mode 100644
index 75b4f79..0000000
--- a/apps/monad/src/components/ui/accordion.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  hideChevron = true,
-  containerClassName = "w-full",
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
-  hideChevron?: boolean;
-  containerClassName?: string;
-}) {
-  return (
-    <AccordionPrimitive.Header className={cn("flex", containerClassName)}>
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {!hideChevron && (
-          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-        )}
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/monad/src/components/ui/bubbles-animation.tsx b/apps/monad/src/components/ui/bubbles-animation.tsx
deleted file mode 100644
index 6c4b772..0000000
--- a/apps/monad/src/components/ui/bubbles-animation.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef } from "react";
-
-/**
- * BubbleAnimation
- * Minimal React component that implements ONLY the floating bubble animation
- * from the referenced CodePen. Modified to render oblong (wider) bubbles.
- */
-export default function BubbleAnimation({
-  bubbleColor = "rgb(33, 150, 243)",
-  durationMs = 2000,
-  width = "max(500px, 50vw)", // wider
-  height = "max(200px, 20vw)", // shorter
-}) {
-  const wrapperRef = useRef(null);
-
-  useEffect(() => {
-    const wrapper = wrapperRef.current as HTMLElement | null;
-    if (!wrapper) return;
-
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const reduced = mediaQuery.matches;
-
-    const timeouts = new Set<number>();
-
-    const animateBubble = (x: number) => {
-      if (reduced) return;
-      const bubble = document.createElement("div");
-      bubble.className = "bubble";
-      bubble.style.left = `${x}px`;
-      bubble.style.backgroundColor = bubbleColor;
-      bubble.style.width = width;
-      bubble.style.height = height;
-      wrapper.appendChild(bubble);
-      const to = window.setTimeout(() => {
-        bubble.remove();
-        timeouts.delete(to);
-      }, durationMs);
-      timeouts.add(to);
-    };
-
-    const handleMove = (e: MouseEvent) => animateBubble(e.clientX);
-    window.addEventListener("mousemove", handleMove);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMove);
-      timeouts.forEach((id) => window.clearTimeout(id));
-      timeouts.clear();
-      Array.from(wrapper.children).forEach((el) => el.remove());
-    };
-  }, [bubbleColor, durationMs, width, height]);
-
-  return (
-    <div>
-      {/* Animation layer only */}
-      <div id="bubble-wrapper" ref={wrapperRef} aria-hidden="true" />
-
-      {/* Minimal styles for animation only */}
-      <style>{`
-        @keyframes wave {
-          from, to { transform: translate(-50%, 0%); }
-          50% { transform: translate(-50%, -20%); }
-        }
-        #bubble-wrapper {
-          position: fixed;
-          inset: 0;
-          overflow: hidden;
-          pointer-events: none;
-        }
-        .bubble {
-          position: absolute;
-          top: 100%;
-          left: 50%;
-          border-radius: 50% / 60%; /* creates oblong shape */
-          animation: wave 2s ease-in-out infinite;
-        }
-        @media (prefers-reduced-motion) {
-          .bubble { animation: none; display: none; }
-        }
-      `}</style>
-    </div>
-  );
-}
-
diff --git a/apps/monad/src/components/ui/button.tsx b/apps/monad/src/components/ui/button.tsx
deleted file mode 100644
index 71ab81f..0000000
--- a/apps/monad/src/components/ui/button.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
diff --git a/apps/monad/src/components/ui/dialog.tsx b/apps/monad/src/components/ui/dialog.tsx
deleted file mode 100644
index d9ccec9..0000000
--- a/apps/monad/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
diff --git a/apps/monad/src/components/ui/input.tsx b/apps/monad/src/components/ui/input.tsx
deleted file mode 100644
index 0316cc4..0000000
--- a/apps/monad/src/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };
diff --git a/apps/monad/src/components/ui/label.tsx b/apps/monad/src/components/ui/label.tsx
deleted file mode 100644
index fb5fbc3..0000000
--- a/apps/monad/src/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
diff --git a/apps/monad/src/components/ui/select.tsx b/apps/monad/src/components/ui/select.tsx
deleted file mode 100644
index 91c5bdf..0000000
--- a/apps/monad/src/components/ui/select.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};
diff --git a/apps/monad/src/components/ui/separator.tsx b/apps/monad/src/components/ui/separator.tsx
deleted file mode 100644
index be47ba4..0000000
--- a/apps/monad/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Separator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="separator"
-      role="separator"
-      className={cn("bg-border my-2 h-px w-full", className)}
-      {...props}
-    />
-  );
-}
-
-export { Separator };
diff --git a/apps/monad/src/components/ui/sonner.tsx b/apps/monad/src/components/ui/sonner.tsx
deleted file mode 100644
index f96a98d..0000000
--- a/apps/monad/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };
diff --git a/apps/monad/src/components/ui/tooltip.tsx b/apps/monad/src/components/ui/tooltip.tsx
deleted file mode 100644
index 99aefa0..0000000
--- a/apps/monad/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/monad/src/components/view-history/hooks/useViewHistory.ts b/apps/monad/src/components/view-history/hooks/useViewHistory.ts
deleted file mode 100644
index ea4cece..0000000
--- a/apps/monad/src/components/view-history/hooks/useViewHistory.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { type RFF } from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
-import { useCallback, useEffect, useState } from "react";
-
-const ITEMS_PER_PAGE = 10;
-
-function formatExpiryDate(timestamp: number) {
-  const date = new Date(timestamp * 1000);
-  const formatted = date.toLocaleString("en-US", {
-    month: "short",
-    day: "2-digit",
-    year: "numeric",
-  });
-  return formatted.replace(" ", ", ");
-}
-
-const useViewHistory = () => {
-  const { nexusSDK } = useNexus();
-  const [history, setHistory] = useState<RFF[] | null>(null);
-  const [displayedHistory, setDisplayedHistory] = useState<RFF[]>([]);
-  const [page, setPage] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [sentinelNode, setSentinelNode] = useState<HTMLDivElement | null>(null);
-
-  const observerTarget = useCallback((node: HTMLDivElement | null) => {
-    setSentinelNode(node);
-  }, []);
-
-  const fetchIntentHistory = useCallback(async () => {
-    if (!nexusSDK) return;
-
-    try {
-      const fetchedHistory = await nexusSDK.getMyIntents();
-      const normalizedHistory = fetchedHistory ?? [];
-
-      setHistory(normalizedHistory);
-      setDisplayedHistory(normalizedHistory.slice(0, ITEMS_PER_PAGE));
-      setPage(0);
-      setHasMore(normalizedHistory.length > ITEMS_PER_PAGE);
-      setIsLoadingMore(false);
-    } catch (error) {
-      console.error("Error fetching intent history:", error);
-    }
-  }, [nexusSDK]);
-
-  useEffect(() => {
-    if (!history) {
-      void fetchIntentHistory();
-    }
-  }, [history, fetchIntentHistory]);
-
-  const loadMore = useCallback(() => {
-    if (!history || isLoadingMore || !hasMore) return;
-    setIsLoadingMore(true);
-
-    setTimeout(() => {
-      const nextPage = page + 1;
-      const startIndex = nextPage * ITEMS_PER_PAGE;
-      const endIndex = startIndex + ITEMS_PER_PAGE;
-      const newItems = history.slice(startIndex, endIndex);
-
-      if (newItems.length > 0) {
-        setDisplayedHistory((prev) => [...prev, ...newItems]);
-        setPage(nextPage);
-        setHasMore(endIndex < history.length);
-      } else {
-        setHasMore(false);
-      }
-
-      setIsLoadingMore(false);
-    }, 300);
-  }, [history, page, isLoadingMore, hasMore]);
-
-  useEffect(() => {
-    if (!sentinelNode) {
-      return;
-    }
-
-    const rootElement = sentinelNode.parentElement;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
-          loadMore();
-        }
-      },
-      { threshold: 0.1, root: rootElement ?? null },
-    );
-
-    observer.observe(sentinelNode);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [sentinelNode, loadMore, hasMore, isLoadingMore, displayedHistory.length]);
-
-  const getStatus = (pastIntent: RFF) => {
-    if (pastIntent?.fulfilled) {
-      return "Fulfilled";
-    } else if (pastIntent?.deposited) {
-      return "Deposited";
-    } else if (pastIntent?.refunded) {
-      return "Refunded";
-    } else {
-      return "Failed";
-    }
-  };
-
-  return {
-    history,
-    displayedHistory,
-    page,
-    hasMore,
-    isLoadingMore,
-    getStatus,
-    observerTarget,
-    ITEMS_PER_PAGE,
-    formatExpiryDate,
-    fetchIntentHistory,
-  };
-};
-
-export default useViewHistory;
diff --git a/apps/monad/src/components/view-history/view-history.tsx b/apps/monad/src/components/view-history/view-history.tsx
deleted file mode 100644
index b58dd82..0000000
--- a/apps/monad/src/components/view-history/view-history.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Clock, LoaderPinwheel, SquareArrowOutUpRight } from "lucide-react";
-import { type RFF } from "@avail-project/nexus-core";
-import { cn } from "@/lib/utils";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import useViewHistory from "./hooks/useViewHistory";
-import { TOKEN_IMAGES } from "../common";
-
-const SourceChains = ({ sources }: { sources: RFF["sources"] }) => {
-  return (
-    <div className="flex items-center">
-      {sources?.map((source, index) => (
-        <div
-          key={source?.chain?.id}
-          className={cn(
-            "rounded-full transition-transform hover:scale-110",
-            index > 0 && "-ml-2",
-          )}
-          style={{ zIndex: sources.length - index }}
-        >
-          <img
-            src={source?.chain?.logo}
-            alt={source?.chain?.name}
-            width={24}
-            height={24}
-            className="rounded-full"
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const StatusBadge = ({ status }: { status: string }) => {
-  const getVariant = (status: string) => {
-    if (status === "Fulfilled") {
-      return "default";
-    } else if (status === "Deposited") {
-      return "secondary";
-    } else if (status === "Refunded") {
-      return "outline";
-    } else if (status === "Failed") {
-      return "destructive";
-    } else {
-      return "default";
-    }
-  };
-
-  return (
-    <Badge variant={getVariant(status)} className="px-3 py-1">
-      <p className="text-xs font-semibold tracking-wide">{status}</p>
-    </Badge>
-  );
-};
-
-const DestinationToken = ({
-  destination,
-}: {
-  destination: RFF["destinations"];
-}) => {
-  return (
-    <div className="flex items-center">
-      {destination.map((dest, index) => (
-        <div
-          key={dest.token.symbol}
-          className={cn(
-            "rounded-full transition-transform hover:scale-110",
-            index > 0 && "-ml-2",
-          )}
-          style={{ zIndex: destination.length - index }}
-        >
-          <img
-            src={TOKEN_IMAGES[dest.token.symbol]}
-            alt={dest.token.symbol}
-            width={24}
-            height={24}
-            className="rounded-full"
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const ViewHistory = ({
-  viewAsModal = true,
-  className,
-  refreshNonce,
-}: {
-  viewAsModal?: boolean;
-  className?: string;
-  refreshNonce?: number;
-}) => {
-  const {
-    history,
-    displayedHistory,
-    hasMore,
-    isLoadingMore,
-    getStatus,
-    observerTarget,
-    ITEMS_PER_PAGE,
-    formatExpiryDate,
-    fetchIntentHistory,
-  } = useViewHistory();
-
-  useEffect(() => {
-    if (!refreshNonce) return;
-    void fetchIntentHistory();
-  }, [refreshNonce, fetchIntentHistory]);
-
-  const renderHistoryContent = () => {
-    if (displayedHistory.length > 0) {
-      return (
-        <>
-          {displayedHistory?.map((pastIntent) => (
-            <Card
-              key={pastIntent.id}
-              className="p-4 hover:shadow-md transition-shadow duration-200 border-border/50 gap-3"
-            >
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex items-center gap-3">
-                  <DestinationToken destination={pastIntent?.destinations} />
-                  <div className="flex flex-col">
-                    <p className="text-sm font-medium">
-                      {pastIntent?.destinations
-                        .map((d) => d?.token?.symbol)
-                        .join(", ")}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      Intent #{pastIntent?.id}
-                    </p>
-                  </div>
-                </div>
-                <StatusBadge status={getStatus(pastIntent)} />
-              </div>
-
-              <Separator className="my-1" />
-
-              <div className="flex flex-col sm:flex-row  items-start sm:items-center justify-between gap-4">
-                <div className="flex items-center justify-between gap-x-3 flex-1 w-full sm:min-w-fit">
-                  <SourceChains sources={pastIntent?.sources} />
-                  <div className="flex items-center gap-2 text-muted-foreground">
-                    <div className="h-px w-8 bg-border" />
-                    <span className="text-xs">→</span>
-                    <div className="h-px w-8 bg-border" />
-                  </div>
-                  <div className="rounded-full hover:scale-110">
-                    <img
-                      src={pastIntent?.destinationChain?.logo ?? ""}
-                      alt={pastIntent?.destinationChain?.name}
-                      width={24}
-                      height={24}
-                      className="rounded-full"
-                    />
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between sm:justify-end  gap-x-2 w-full">
-                  <div className="text-left sm:text-right">
-                    <p className="text-xs text-muted-foreground">Expiry</p>
-                    <p className="text-xs font-medium">
-                      {formatExpiryDate(pastIntent?.expiry)}
-                    </p>
-                  </div>
-                  <a
-                    href={pastIntent?.explorerUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <Button variant="outline" size="icon">
-                      <SquareArrowOutUpRight className="size-4" />
-                    </Button>
-                  </a>
-                </div>
-              </div>
-            </Card>
-          ))}
-
-          {hasMore && (
-            <div ref={observerTarget} className="flex justify-center py-4">
-              {isLoadingMore && (
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <LoaderPinwheel className="size-4 animate-spin" />
-                  <span className="text-sm">Loading more...</span>
-                </div>
-              )}
-            </div>
-          )}
-
-          {!hasMore && displayedHistory?.length > ITEMS_PER_PAGE && (
-            <div className="flex justify-center py-4">
-              <p className="text-sm text-muted-foreground">
-                No more transactions to load
-              </p>
-            </div>
-          )}
-        </>
-      );
-    }
-
-    if (history === null) {
-      return (
-        <div className="flex flex-col items-center justify-center py-16 gap-4">
-          <div className="relative">
-            <div className="absolute inset-0 bg-primary/10 blur-xl rounded-full" />
-            <LoaderPinwheel className="relative animate-spin size-12 text-primary" />
-          </div>
-          <div className="text-center space-y-1">
-            <p className="text-base font-medium">Loading your history</p>
-            <p className="text-sm text-muted-foreground">
-              Fetching your past transactions...
-            </p>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="flex flex-col items-center justify-center py-16 gap-4">
-        <Clock className="size-16 text-muted-foreground/30" />
-        <div className="text-center space-y-1">
-          <p className="text-base font-medium">No history yet</p>
-          <p className="text-sm text-muted-foreground">
-            Your transaction history will appear here
-          </p>
-        </div>
-      </div>
-    );
-  };
-
-  if (!viewAsModal) {
-    return (
-      <div className="flex flex-col gap-y-3 max-h-96 no-scrollbar overflow-y-auto w-full max-w-md">
-        {renderHistoryContent()}
-      </div>
-    );
-  }
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn("relative group", className)}
-        >
-          <Clock className="size-5 text-primary transition-transform group-hover:scale-110" />
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl flex flex-col">
-        <DialogHeader>
-          <DialogTitle className="text-2xl font-semibold">
-            Transaction History
-          </DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-y-3 max-h-96 no-scrollbar overflow-y-auto w-full">
-          {renderHistoryContent()}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default ViewHistory;
diff --git a/apps/monad/src/components/walletConnect.tsx b/apps/monad/src/components/walletConnect.tsx
deleted file mode 100644
index 2dcb18f..0000000
--- a/apps/monad/src/components/walletConnect.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-"use client";
-import * as React from "react";
-import type { EthereumProvider } from "@avail-project/nexus-core";
-import { useAccount } from "wagmi";
-import { useNexus } from "./nexus/NexusProvider";
-import { toast } from "sonner";
-
-interface PreviewPanelProps {
-  children: React.ReactNode;
-}
-
-export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
-  const [loading, setLoading] = React.useState(false);
-  const [initError, setInitError] = React.useState<string | null>(null);
-  const { status, connector, address } = useAccount();
-  const { nexusSDK, handleInit, deinitializeNexus, setIntent, setAllowance } =
-    useNexus();
-  const prevAddressRef = React.useRef<string | undefined>(address);
-
-  const initializeNexus = React.useCallback(async () => {
-    if (loading || nexusSDK) return; // Prevent multiple calls
-
-    console.log("[Nexus Init] Starting initialization...");
-    console.log("[Nexus Init] Connector:", connector);
-    console.log("[Nexus Init] Connector name:", connector?.name);
-    console.log("[Nexus Init] Connector type:", connector?.type);
-
-    setLoading(true);
-    setInitError(null);
-
-    // Create a timeout promise
-    const timeoutPromise = new Promise((_, reject) => {
-      setTimeout(() => {
-        reject(new Error("Nexus initialization timed out after 30 seconds"));
-      }, 30000); // 30 second timeout
-    });
-
-    try {
-      if (!connector) {
-        throw new Error("No connector available");
-      }
-
-      console.log("[Nexus Init] Getting provider from connector...");
-      const provider = (await connector.getProvider()) as EthereumProvider;
-
-      console.log("[Nexus Init] Provider:", provider);
-      console.log("[Nexus Init] Provider type:", typeof provider);
-      console.log(
-        "[Nexus Init] Provider has request:",
-        typeof provider?.request === "function",
-      );
-
-      if (!provider) {
-        throw new Error("No provider available from connector");
-      }
-
-      if (typeof provider.request !== "function") {
-        throw new Error(
-          "Provider does not have a request method (not EIP-1193 compliant)",
-        );
-      }
-
-      console.log("[Nexus Init] Provider validated, calling handleInit...");
-
-      // Race between initialization and timeout
-      await Promise.race([handleInit(provider), timeoutPromise]);
-
-      console.log("[Nexus Init] Initialization successful!");
-    } catch (error) {
-      console.error("[Nexus Init] Initialization failed:", error);
-      const errorMessage = (error as Error)?.message || "Unknown error";
-      setInitError(errorMessage);
-      toast.error(`Failed to initialize Nexus: ${errorMessage}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [connector, handleInit, loading, nexusSDK]);
-
-  // Handle wallet disconnection - clear Nexus state and balances
-  React.useEffect(() => {
-    if (status === "disconnected" && nexusSDK) {
-      deinitializeNexus();
-      setIntent(null);
-      setAllowance(null);
-      prevAddressRef.current = undefined;
-    }
-    if (status === "disconnected") {
-      setInitError(null);
-    }
-  }, [status, nexusSDK, deinitializeNexus, setIntent, setAllowance]);
-
-  // Handle account change - reinitialize Nexus when account address changes
-  React.useEffect(() => {
-    if (
-      status === "connected" &&
-      address &&
-      address !== prevAddressRef.current
-    ) {
-      const previousAddress = prevAddressRef.current;
-      const currentAddress = address;
-      prevAddressRef.current = address;
-
-      // If account changed and Nexus is initialized, reinitialize with new account
-      if (nexusSDK && previousAddress !== undefined) {
-        // Account changed - deinitialize and reinitialize
-        deinitializeNexus().then(() => {
-          // Small delay to ensure deinit completes, then reinitialize
-          setTimeout(() => {
-            // Check if still connected and address hasn't changed again
-            if (
-              currentAddress === prevAddressRef.current &&
-              !loading &&
-              !initError
-            ) {
-              initializeNexus();
-            }
-          }, 100);
-        });
-      }
-    } else if (status === "connected" && address && !prevAddressRef.current) {
-      // First connection - set the address
-      prevAddressRef.current = address;
-    }
-  }, [
-    status,
-    nexusSDK,
-    address,
-    initError,
-    initializeNexus,
-    deinitializeNexus,
-    loading,
-  ]);
-
-  // Auto-initialize Nexus when wallet is connected and address is available
-  React.useEffect(() => {
-    if (
-      status === "connected" &&
-      !nexusSDK &&
-      !loading &&
-      !initError &&
-      address &&
-      connector
-    ) {
-      initializeNexus();
-    }
-  }, [
-    status,
-    nexusSDK,
-    initError,
-    address,
-    connector,
-    initializeNexus,
-    loading,
-  ]);
-
-  return (
-    <div className="flex items-center justify-center min-h-[400px] relative">
-      {children}
-    </div>
-  );
-}
diff --git a/apps/monad/src/favicon.ico b/apps/monad/src/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/apps/monad/src/favicon.ico and /dev/null differ
diff --git a/apps/monad/src/index.css b/apps/monad/src/index.css
deleted file mode 100644
index 6a02ea1..0000000
--- a/apps/monad/src/index.css
+++ /dev/null
@@ -1,152 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-body,
-#root {
-  height: 100svh;
-  width: 100svw;
-  overflow-x: hidden;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  /* button {
-    background-color: #f9f9f9;
-  } */
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/apps/monad/src/lib/posthog.ts b/apps/monad/src/lib/posthog.ts
deleted file mode 100644
index aa51bd9..0000000
--- a/apps/monad/src/lib/posthog.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import posthog from 'posthog-js';
-
-const DEFAULT_POSTHOG_KEY = 'phc_UD6lQU3PEw1d8oo8E17rJLmRAR7kxJbQ5OseHuCvi7N';
-const DEFAULT_POSTHOG_HOST = 'https://us.i.posthog.com';
-
-let isInitialized = false;
-
-/**
- * Initialize PostHog analytics
- */
-export function initPostHog(options?: {
-    apiKey?: string;
-    apiHost?: string;
-    debug?: boolean;
-}): void {
-    if (isInitialized) return;
-
-    const apiKey = options?.apiKey || DEFAULT_POSTHOG_KEY;
-    const apiHost = options?.apiHost || DEFAULT_POSTHOG_HOST;
-    const debug = options?.debug ?? true; // Always enable debug for troubleshooting
-
-    console.log('[PostHog] Initializing with host:', apiHost);
-
-    posthog.init(apiKey, {
-        api_host: apiHost,
-        person_profiles: 'identified_only',
-        autocapture: false,
-        capture_pageview: false,
-        capture_pageleave: true,
-        persistence: 'localStorage', // Use localStorage for persistence
-        loaded: (ph) => {
-            console.log('[PostHog] Loaded successfully');
-            if (debug) {
-                ph.debug();
-            }
-        },
-    });
-
-    isInitialized = true;
-}
-
-/**
- * Capture a bridge submit event
- */
-export interface BridgeSubmitEventProperties {
-    chain: string | number;
-    chainName: string;
-    tokenSymbol: string;
-    amount: string;
-    fast_bridge: 'megaeth' | 'citrea' | 'monad';
-}
-
-export function trackBridgeSubmit(properties: BridgeSubmitEventProperties): void {
-    if (!isInitialized) {
-        console.warn('[PostHog] Not initialized, initializing now...');
-        initPostHog();
-    }
-
-    console.log('[PostHog] Capturing event: nexus_fast_bridge_demo_submit', properties);
-    posthog.capture('nexus_fast_bridge_demo_submit', properties);
-}
-
-/**
- * Generic capture wrapper
- */
-export function capture(event: string, properties?: Record<string, unknown>): void {
-    if (!isInitialized) {
-        console.warn('[PostHog] Not initialized, initializing now...');
-        initPostHog();
-    }
-
-    console.log('[PostHog] Capturing event:', event, properties);
-    posthog.capture(event, properties);
-}
-
-export { posthog };
diff --git a/apps/monad/src/lib/transaction-utils.ts b/apps/monad/src/lib/transaction-utils.ts
deleted file mode 100644
index 32eab01..0000000
--- a/apps/monad/src/lib/transaction-utils.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export const getOperationText = (type: string) => {
-  switch (type) {
-    case "bridge":
-      return "Transaction";
-    case "transfer":
-      return "Transferring";
-    case "bridgeAndExecute":
-      return "Bridge & Execute";
-    case "swap":
-      return "Swapping";
-    default:
-      return "Processing";
-  }
-};
-
-export const getStatusText = (type: string, operationType: string) => {
-  const opText = getOperationText(operationType);
-
-  switch (type) {
-    case "INTENT_ACCEPTED":
-      return "Intent Accepted";
-    case "INTENT_HASH_SIGNED":
-      return "Signing Transaction";
-    case "INTENT_SUBMITTED":
-      return "Submitting Transaction";
-    case "INTENT_COLLECTION":
-      return "Collecting Confirmations";
-    case "INTENT_COLLECTION_COMPLETE":
-      return "Confirmations Complete";
-    case "APPROVAL":
-      return "Approving";
-    case "TRANSACTION_SENT":
-      return "Sending Transaction";
-    case "RECEIPT_RECEIVED":
-      return "Receipt Received";
-    case "TRANSACTION_CONFIRMED":
-    case "INTENT_FULFILLED":
-      return `${opText} Complete`;
-    default:
-      return `Processing ${opText}`;
-  }
-};
diff --git a/apps/monad/src/lib/utils.ts b/apps/monad/src/lib/utils.ts
deleted file mode 100644
index f9923e8..0000000
--- a/apps/monad/src/lib/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_BASE_URL}${path}`;
-}
diff --git a/apps/monad/src/main.tsx b/apps/monad/src/main.tsx
index e98387c..0802495 100644
--- a/apps/monad/src/main.tsx
+++ b/apps/monad/src/main.tsx
@@ -1,46 +1,3 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import { initPostHog } from "./lib/posthog";
+import { bootstrapApp } from "@/bootstrap";
 
-// Initialize PostHog analytics
-initPostHog();
-
-// Clean up WalletConnect IndexedDB before app loads to prevent structure errors
-const cleanupWalletConnectSubscription = () => {
-  try {
-    const dbName = "WALLET_CONNECT_V2_INDEXED_DB";
-
-    // Delete the entire database to prevent structure errors
-    const deleteRequest = indexedDB.deleteDatabase(dbName);
-
-    deleteRequest.onsuccess = () => {
-      console.log(
-        "[WalletConnect] Database deleted successfully, will be recreated fresh",
-      );
-    };
-
-    deleteRequest.onerror = () => {
-      console.debug(
-        "[WalletConnect] Database deletion failed or DB doesn't exist",
-      );
-    };
-
-    deleteRequest.onblocked = () => {
-      console.debug("[WalletConnect] Database deletion blocked, may be in use");
-    };
-  } catch (error) {
-    // Ignore errors - this is a cleanup operation
-    console.debug("[WalletConnect] Cleanup skipped:", error);
-  }
-};
-
-// Run cleanup before rendering
-cleanupWalletConnectSubscription();
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+bootstrapApp();
diff --git a/apps/monad/src/runtime.ts b/apps/monad/src/runtime.ts
new file mode 100644
index 0000000..8489e92
--- /dev/null
+++ b/apps/monad/src/runtime.ts
@@ -0,0 +1,30 @@
+import type { ChainFeatures } from "@/types/runtime";
+import config from "../config";
+
+export const appConfig = config;
+
+export const chainFeatures: ChainFeatures = {
+  slug: "monad",
+  analyticsFastBridgeKey: "monad",
+  maxBridgeAmount: 550,
+  walletInitDelayMs: 0,
+  showFluffeyMascot: false,
+  showPromoBanner: false,
+  pageDescription:
+    "Experience the fastest way to bridge assets to Monad. Avail Fast Bridge facilitates instant stablecoin and token transfers from Ethereum, Base, Arbitrum, and Optimism. Built on Avail Nexus, it ensures your transition to the Monad ecosystem is secure and seamless.",
+  mapUsdmDisplaySymbolToUsdc: false,
+  mapUsdmToUsdcBalance: false,
+  tokenLogoOverrideBySymbol: {
+    USDM: "https://raw.githubusercontent.com/availproject/nexus-assets/refs/heads/main/tokens/usdm/logo.png",
+  },
+  denyIntentOnReset: true,
+  tokenDenyListByChainId: {},
+  allowanceLogoOverrideByChainId: {},
+  amountInputUseCalculatedMaxHeader: false,
+  amountInputShowDestinationBadge: false,
+  amountInputUseSourceSymbolInBreakdown: false,
+  hideMegaethSourceForUsdm: true,
+  feeBreakdownHideGasSupplied: false,
+  feeBreakdownKeepZeroRows: false,
+  dialogShowCloseButton: true,
+};
diff --git a/apps/monad/src/vite-env.d.ts b/apps/monad/src/vite-env.d.ts
index 04436df..1a8b0eb 100644
--- a/apps/monad/src/vite-env.d.ts
+++ b/apps/monad/src/vite-env.d.ts
@@ -3,57 +3,56 @@
 import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
 
 export interface AppEnv {
-    readonly VITE_APP_BASE_PATH?: string;
-    readonly VITE_CONFIG_CHAIN_ID: number;
-    readonly VITE_CONFIG_CHAIN_NAME: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
-    readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
-    readonly VITE_CONFIG_CHAIN_RPC_URL: string;
-    readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
-    readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
-    readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
-    readonly VITE_CONFIG_CHAIN_ICON_URL: string;
-    readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
-    readonly VITE_CONFIG_CHAIN_GIF_URL: string;
-    readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
-    readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
-    readonly VITE_CONFIG_APP_TITLE: string;
-    readonly VITE_CONFIG_APP_DESCRIPTION: string;
-    readonly VITE_CONFIG_PRIMARY_COLOR: string;
-    readonly VITE_CONFIG_SECONDARY_COLOR: string;
-    readonly VITE_CONFIG_NEXUS_NETWORK: 'mainnet' | 'testnet' | 'devnet';
-    readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
-    readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_APP_BASE_PATH?: string;
+  readonly VITE_CONFIG_APP_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
+  readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
+  readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
+  readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
 
-    readonly VITE_CONFIG_APP_META_TITLE: string;
-    readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
-    readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
-    readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
-    readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
-    readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
-    readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_TITLE: string;
+  readonly VITE_CONFIG_APP_TITLE: string;
+  readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
+  readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
+  readonly VITE_CONFIG_CHAIN_GIF_URL: string;
+  readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
+  readonly VITE_CONFIG_CHAIN_ICON_URL: string;
+  readonly VITE_CONFIG_CHAIN_ID: number;
+  readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
+  readonly VITE_CONFIG_CHAIN_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
+  readonly VITE_CONFIG_CHAIN_RPC_URL: string;
+  readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
+  readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
+  readonly VITE_CONFIG_NEXUS_NETWORK: "mainnet" | "testnet" | "devnet";
+  readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
+  readonly VITE_CONFIG_PRIMARY_COLOR: string;
+  readonly VITE_CONFIG_SECONDARY_COLOR: string;
 }
 
 declare global {
+  interface ImportMetaEnv extends AppEnv {
+    readonly VITE_ARBITRUM_RPC: string;
+    readonly VITE_AVALANCHE_RPC: string;
+    readonly VITE_BASE: string;
+    readonly VITE_BASE_RPC: string;
+    readonly VITE_KAIA_RPC: string;
+    readonly VITE_MAINNET_RPC: string;
+    readonly VITE_MEGAETH_RPC: string;
+    readonly VITE_MONAD_RPC: string;
+    readonly VITE_OPTIMISM_RPC: string;
+    readonly VITE_POLYGON_RPC: string;
+    readonly VITE_SCROLL_RPC: string;
+    readonly VITE_SOPHON_RPC: string;
+    readonly VITE_WALLET_CONNECT_ID: string;
+  }
 
-    interface ImportMetaEnv extends AppEnv {
-        readonly VITE_WALLET_CONNECT_ID: string;
-        readonly VITE_MAINNET_RPC: string;
-        readonly VITE_BASE_RPC: string;
-        readonly VITE_ARBITRUM_RPC: string;
-        readonly VITE_OPTIMISM_RPC: string;
-        readonly VITE_POLYGON_RPC: string;
-        readonly VITE_SCROLL_RPC: string;
-        readonly VITE_AVALANCHE_RPC: string;
-        readonly VITE_SOPHON_RPC: string;
-        readonly VITE_KAIA_RPC: string;
-        readonly VITE_MONAD_RPC: string;
-        readonly VITE_MEGAETH_RPC: string;
-        readonly VITE_BASE: string;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-    }
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
 }
diff --git a/apps/monad/tsconfig.app.json b/apps/monad/tsconfig.app.json
index afe17f6..c6a071f 100644
--- a/apps/monad/tsconfig.app.json
+++ b/apps/monad/tsconfig.app.json
@@ -24,7 +24,8 @@
 
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["../../packages/fast-bridge-app/src/*"],
+      "@fastbridge/runtime": ["./src/runtime.ts"]
     }
   },
   "include": ["src"]
diff --git a/apps/monad/tsconfig.json b/apps/monad/tsconfig.json
index fec8c8e..5bfdf37 100644
--- a/apps/monad/tsconfig.json
+++ b/apps/monad/tsconfig.json
@@ -8,6 +8,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "strictNullChecks": true
   }
 }
diff --git a/apps/monad/vite.config.ts b/apps/monad/vite.config.ts
index 34caa41..f2aae83 100644
--- a/apps/monad/vite.config.ts
+++ b/apps/monad/vite.config.ts
@@ -1,12 +1,12 @@
+import { writeFileSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
-import { writeFileSync } from "node:fs";
+import { defineConfig, loadEnv } from "vite";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import { getConfig } from "./get-config";
 import type { AppEnv } from "./src/vite-env.d";
-import { getConfig } from "./getConfig";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -18,31 +18,31 @@ export default defineConfig(({ mode }) => {
   const config = getConfig(env);
 
   const manifestContent = {
-    "name": config.meta.title,
-    "short_name": config.appTitle,
-    "description": config.meta.description,
-    "start_url": base,
-    "display": "standalone",
-    "background_color": config.meta.backgroundColor,
-    "theme_color": config.meta.themeColor,
-    "orientation": "portrait-primary",
-    "icons": [
+    name: config.meta.title,
+    short_name: config.appTitle,
+    description: config.meta.description,
+    start_url: base,
+    display: "standalone",
+    background_color: config.meta.backgroundColor,
+    theme_color: config.meta.themeColor,
+    orientation: "portrait-primary",
+    icons: [
       {
-        "src": config.meta.faviconUrl,
-        "sizes": "31x32",
-        "type": "image/png",
-        "purpose": "any"
+        src: config.meta.faviconUrl,
+        sizes: "31x32",
+        type: "image/png",
+        purpose: "any",
       },
       {
-        "src": config.meta.imageUrl,
-        "sizes": "2444x1256",
-        "type": "image/png",
-        "purpose": "any"
-      }
-    ]
+        src: config.meta.imageUrl,
+        sizes: "2444x1256",
+        type: "image/png",
+        purpose: "any",
+      },
+    ],
   };
 
-  const outputPath = path.resolve(__dirname, 'dist', 'manifest.json');
+  const outputPath = path.resolve(__dirname, "dist", "manifest.json");
 
   return {
     base,
@@ -55,19 +55,19 @@ export default defineConfig(({ mode }) => {
       }),
       // Create manifest.json at build
       {
-        name: 'generate-manifest',
+        name: "generate-manifest",
         writeBundle() {
           try {
             writeFileSync(outputPath, JSON.stringify(manifestContent, null, 2));
             console.log(`Generated dynamic manifest.json at ${outputPath}`);
           } catch (err) {
-            console.error('Error generating manifest.json', err);
+            console.error("Error generating manifest.json", err);
           }
-        }
+        },
       },
       // Update title and meta of index.html at build
       {
-        name: 'html-transform',
+        name: "html-transform",
         transformIndexHtml(html) {
           // Replace placeholders with actual values
           return html
@@ -77,13 +77,14 @@ export default defineConfig(({ mode }) => {
             .replaceAll(/%= APP_FAVICON_URL =%/g, config.meta.faviconUrl)
             .replaceAll(/%= APP_THEME_COLOR =%/g, config.meta.themeColor)
             .replaceAll(/%= APP_META_IMAGE_URL =%/g, config.meta.imageUrl)
-            .replaceAll(/%= MANIFEST_URL =%/g, `${base}manifest.json`)
-        }
-      }
+            .replaceAll(/%= MANIFEST_URL =%/g, `${base}manifest.json`);
+        },
+      },
     ],
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "./src"),
+        "@": path.resolve(__dirname, "../../packages/fast-bridge-app/src"),
+        "@fastbridge/runtime": path.resolve(__dirname, "./src/runtime.ts"),
         buffer: "vite-plugin-node-polyfills/shims/buffer",
         global: "vite-plugin-node-polyfills/shims/global",
         process: "vite-plugin-node-polyfills/shims/process",
@@ -91,7 +92,7 @@ export default defineConfig(({ mode }) => {
     },
     envPrefix: ["VITE_"],
     build: {
-      emptyOutDir: true
-    }
-  }
+      emptyOutDir: true,
+    },
+  };
 });
diff --git a/apps/root/index.html b/apps/root/index.html
index db822aa..4ec40d7 100644
--- a/apps/root/index.html
+++ b/apps/root/index.html
@@ -1,10 +1,55 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Fast Bridge</title>
-    <link rel="icon" type="image/png" href="/faviconV2.png" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Avail Fast Bridge | Bridge USDC & Stablecoins Across Chains</title>
+    <meta
+      name="description"
+      content="Bridge USDC, USDT, and stablecoins across 14+ chains in seconds. Avail Fast Bridge is a fast, secure multi-chain bridge tool powered by Avail Nexus infrastructure. No wrapping, no complexity."
+    >
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Avail Fast Bridge">
+    <meta
+      name="twitter:description"
+      content="Bridge USDC, USDT, and stablecoins across 14+ chains in seconds. Avail Fast Bridge is a fast, secure multi-chain bridge tool powered by Avail Nexus infrastructure. No wrapping, no complexity."
+    >
+    <meta
+      name="twitter:image"
+      content="https://fastbridge.availproject.org/metaimage.png"
+    >
+    <meta property="og:title" content="Avail Fast Bridge">
+    <meta
+      property="og:description"
+      content="Bridge USDC, USDT, and stablecoins across 14+ chains in seconds. Avail Fast Bridge is a fast, secure multi-chain bridge tool powered by Avail Nexus infrastructure. No wrapping, no complexity."
+    >
+    <meta
+      property="og:image"
+      content="https://fastbridge.availproject.org/metaimage.png"
+    >
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://fastbridge.availproject.org">
+    <meta name="twitter:site" content="@AvailProject">
+    <meta name="twitter:creator" content="@AvailProject">
+    <link rel="canonical" href="https://fastbridge.availproject.org">
+    <link rel="icon" type="image/png" href="/faviconV2.png">
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "Avail Fast Bridge",
+        "image": "https://fastbridge.availproject.org/metaimage.png",
+        "description": "Bridge USDC, USDT, and stablecoins across 14+ chains in seconds. Avail Fast Bridge is a fast, secure multi-chain bridge tool powered by Avail Nexus infrastructure.",
+        "applicationCategory": "FinanceApplication",
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "USD"
+        },
+        "operatingSystem": "Any",
+        "url": "https://fastbridge.availproject.org"
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/root/public/metaimage.png b/apps/root/public/metaimage.png
new file mode 100644
index 0000000..266d943
Binary files /dev/null and b/apps/root/public/metaimage.png differ
diff --git a/apps/root/public/robots.txt b/apps/root/public/robots.txt
new file mode 100644
index 0000000..25a6b1a
--- /dev/null
+++ b/apps/root/public/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://fastbridge.availproject.org/sitemap.xml
diff --git a/apps/root/public/sitemap.xml b/apps/root/public/sitemap.xml
new file mode 100644
index 0000000..31c98e6
--- /dev/null
+++ b/apps/root/public/sitemap.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://fastbridge.availproject.org/</loc>
+    <lastmod>2026-02-18</lastmod>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://fastbridge.availproject.org/megaeth/</loc>
+    <lastmod>2026-02-18</lastmod>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://fastbridge.availproject.org/citrea/</loc>
+    <lastmod>2026-02-18</lastmod>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://fastbridge.availproject.org/monad/</loc>
+    <lastmod>2026-02-18</lastmod>
+    <priority>0.8</priority>
+  </url>
+</urlset>
diff --git a/apps/root/src/App.tsx b/apps/root/src/app.tsx
similarity index 57%
rename from apps/root/src/App.tsx
rename to apps/root/src/app.tsx
index 74d51df..a9766ea 100644
--- a/apps/root/src/App.tsx
+++ b/apps/root/src/app.tsx
@@ -1,14 +1,13 @@
-import { useState, useEffect, useRef } from "react";
-import { motion } from "motion/react";
 import { ExternalLink } from "lucide-react";
-import { chains } from "./chains";
+import { motion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
 import AvailLogo from "/avail_logo.svg";
-import FloatingLogos from "./components/floating-logos";
-import AnimatedTitle from "./components/animated-title";
+import { chains } from "./chains";
 import ChainCard from "./components/chain-card";
-import { SOCIAL_LINKS } from "./lib/constant";
+import FloatingLogos from "./components/floating-logos";
 import SocialGlyph from "./components/social-glyph";
 import { AuroraText } from "./components/ui/aurora-text";
+import { SOCIAL_LINKS } from "./lib/constant";
 
 const socialLinkClassName =
   "inline-flex h-11 w-11 items-center justify-center rounded-full bg-[rgb(32,34,36)] text-white transition-[transform,background-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:-translate-y-0.5 hover:bg-black hover:shadow-[0_4px_12px_rgba(32,34,36,0.35)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--blue-500)] md:h-8 md:w-8";
@@ -36,84 +35,165 @@ export default function App() {
     <div className="relative z-[1] flex min-h-screen flex-col p-0">
       {/* Navbar */}
       <motion.nav
-        className="sticky top-0 z-[100] flex items-center justify-between border-b border-[var(--border-default)] bg-[var(--background-primary)] px-4 py-3 md:px-8 md:py-4"
-        initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
+        className="sticky top-0 z-[100] flex items-center justify-between border-[var(--border-default)] border-b bg-[var(--background-primary)] px-4 py-3 md:px-8 md:py-4"
+        initial={{ opacity: 0, y: -20 }}
         transition={{ duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }}
       >
         <motion.div
           className="flex cursor-pointer items-center gap-3 no-underline"
-          whileHover={{ scale: 1.02 }}
           transition={{ duration: 0.2 }}
+          whileHover={{ scale: 1.02 }}
         >
-          <img src={AvailLogo} alt="Avail" className="h-7 w-auto" />
+          <img
+            alt="Avail"
+            className="h-7 w-auto"
+            height={28}
+            src={AvailLogo}
+            width={120}
+          />
           <div className="h-6 w-px bg-[var(--border-default)]" />
-          <span className="hidden text-[15px] font-semibold tracking-[-0.01em] text-[var(--foreground-primary)] [font-family:var(--font-display)] md:inline">
-            Nexus Fast Bridge
+          <span className="hidden font-semibold text-[15px] text-[var(--foreground-primary)] tracking-[-0.01em] [font-family:var(--font-display)] md:inline">
+            Avail FastBridge
           </span>
         </motion.div>
       </motion.nav>
 
       {/* Hero Section */}
       <motion.section
-        ref={heroRef}
-        className="relative min-h-70 overflow-hidden border-b border-(--border-default) bg-(--background-primary) px-5 pb-10 pt-14 text-center md:min-h-90 md:px-8 md:pb-14 md:pt-20"
-        initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
+        className="relative min-h-70 overflow-hidden border-(--border-default) border-b bg-(--background-primary) px-5 pt-14 pb-10 text-center md:min-h-90 md:px-8 md:pt-20 md:pb-14"
+        initial={{ opacity: 0 }}
+        ref={heroRef}
         transition={{ duration: 0.5, delay: 0.1 }}
       >
         {/* Floating logos background */}
         <FloatingLogos mousePosition={mousePosition} />
 
-        <div className="relative z-2 mx-auto max-w-180 mt-12">
-          <h1 className="relative inline-flex flex-wrap items-center justify-center gap-0.5 text-[28px] leading-[1.15] font-bold tracking-[-0.02em] text-(--foreground-primary) [font-family:var(--font-display)] md:text-[clamp(52px,6vw,72px)]">
-            Avail <AuroraText>Fast Bridge</AuroraText>
+        <div className="relative z-2 mx-auto mt-12 max-w-180 bg-[radial-gradient(closest-side,var(--background-primary)_85%,transparent_100%)]">
+          <h1 className="relative inline-flex flex-wrap items-center justify-center gap-0.5 font-bold text-(--foreground-primary) text-[28px] leading-[1.15] tracking-[-0.02em] [font-family:var(--font-display)] md:text-[clamp(52px,6vw,72px)]">
+            <AuroraText>Avail FastBridge</AuroraText>
           </h1>
+          <h2 className="text-center font-medium text-[18px] text-[var(--foreground-primary)] md:text-[clamp(20px,3vw,32px)]">
+            Fast Crypto Bridge for Stables Across Chains
+          </h2>
           <motion.p
-            className="mx-auto mb-6 max-w-120 text-[15px] font-normal leading-[1.6] text-(--foreground-secondary) md:text-[17px] [font-family:var(--font-body)]!"
-            initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
+            className="mx-auto mb-6 max-w-140 text-balance p-4 text-center font-normal text-(--foreground-secondary) text-[15px] leading-[1.6] [font-family:var(--font-body)]! md:text-[17px]"
+            initial={{ opacity: 0, y: 20 }}
             transition={{ duration: 0.5, delay: 0.6 }}
           >
-            Bridge assets across chains with Avail&apos;s unified
-            infrastructure. Fast, secure, and seamless cross-chain transfers.
+            <strong>Avail FastBridge is fast.</strong> <br />
+            Bridge stablecoins like USDC, USDT and others across 15+ chains in
+            seconds with no wrapping and no complexity. It's a secure,
+            multi-chain bridge powered by Avail Nexus.
           </motion.p>
         </div>
       </motion.section>
 
       {/* Chain Grid */}
       <main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-8 md:px-8 md:py-12">
-        <div className="grid grid-cols-1 gap-4 md:gap-5 md:[grid-template-columns:repeat(auto-fit,minmax(340px,1fr))]">
+        <h2 className="mb-6 text-center font-bold text-2xl text-[var(--foreground-primary)]">
+          Bridge Stablecoins to Any Chain
+        </h2>
+        <div className="mb-16 grid grid-cols-1 gap-4 md:gap-5 md:[grid-template-columns:repeat(auto-fit,minmax(340px,1fr))]">
           {chains.map((chain, index) => {
-            return <ChainCard key={chain.slug} chain={chain} index={index} />;
+            return <ChainCard chain={chain} index={index} key={chain.slug} />;
           })}
         </div>
+
+        <section className="mx-auto max-w-4xl space-y-6 text-[var(--foreground-secondary)]">
+          <div className="space-y-6">
+            <h2 className="text-center font-bold text-2xl text-[var(--foreground-primary)] md:text-3xl">
+              Why Use Avail FastBridge as Your Multi-Chain Bridge
+            </h2>
+
+            <div className="space-y-6 text-[var(--foreground-secondary)] text-base leading-relaxed md:text-lg">
+              <p>
+                Avail FastBridge is the quickest way to move your assets between
+                chains. In a single transaction you can instantly{" "}
+                <strong>bridge USDC across multiple chains</strong>.
+              </p>
+
+              <p>
+                It&rsquo;s one of the few{" "}
+                <strong>multi-chain, and multi-transaction bridges</strong>{" "}
+                enabling you to move assets freely in a single transaction
+                between major ecosystems like Ethereum, Base, Arbitrum,
+                Optimism, and emerging L2s such as MegaETH, Citrea, and Monad.
+              </p>
+
+              <p>
+                Avail FastBridge specializes in{" "}
+                <strong>cross-chain bridging</strong> for quick and seamless{" "}
+                <strong>stablecoin transfers</strong>, ensuring your liquidity
+                is never fragmented. Experience the speed of a true{" "}
+                <strong>fast crypto bridge</strong> that eliminates the
+                complexities of wrapping and waiting.
+              </p>
+
+              <p>
+                Powered by Avail Nexus, providing uncompromised security and
+                seamless interoperability for the decentralized age.
+              </p>
+            </div>
+          </div>
+          <div className="grid gap-6 md:grid-cols-3">
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--background-secondary)] p-6 shadow-sm transition-all hover:shadow-md">
+              <h3 className="mb-3 font-semibold text-[var(--foreground-primary)] text-lg">
+                Supported Chains
+              </h3>
+              <p className="text-[var(--foreground-secondary)] text-sm leading-relaxed">
+                MegaETH, Citrea, Monad, Ethereum, Arbitrum, Optimism, Base,
+                Scroll, Polygon, Avalanche, and more.
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--background-secondary)] p-6 shadow-sm transition-all hover:shadow-md">
+              <h3 className="mb-3 font-semibold text-[var(--foreground-primary)] text-lg">
+                Supported Tokens
+              </h3>
+              <p className="text-[var(--foreground-secondary)] text-sm leading-relaxed">
+                USDC, USDT, USDM, ETH and native assets.
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--background-secondary)] p-6 shadow-sm transition-all hover:shadow-md">
+              <h3 className="mb-3 font-semibold text-[var(--foreground-primary)] text-lg">
+                Key Features
+              </h3>
+              <ul className="list-inside list-disc space-y-1 text-[var(--foreground-secondary)] text-sm leading-relaxed">
+                <li>Atomic settlement speed</li>
+                <li>Avail Nexus security</li>
+                <li>Zero slippage on stablecoins</li>
+              </ul>
+            </div>
+          </div>
+        </section>
       </main>
 
       {/* Footer */}
       <motion.footer
-        className="relative z-[1] border-t border-[var(--border-default)] bg-[var(--background-primary)] px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] md:px-8 md:py-6"
-        initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
+        className="relative z-[1] border-[var(--border-default)] border-t bg-[var(--background-primary)] px-4 pt-5 pb-[calc(1.25rem+env(safe-area-inset-bottom))] md:px-8 md:py-6"
+        initial={{ opacity: 0, y: 20 }}
         transition={{ duration: 0.5, delay: 0.6 }}
       >
         <div className="mx-auto w-full max-w-[460px] rounded-2xl border border-[var(--border-default)] bg-[var(--background-secondary)] px-4 py-4 md:hidden">
           <div className="flex items-center justify-center gap-2">
             <motion.span
-              className="text-sm text-[var(--foreground-muted)]"
-              initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
+              className="text-[var(--foreground-muted)] text-sm"
+              initial={{ opacity: 0 }}
               transition={{ delay: 0.8 }}
             >
               Powered by
             </motion.span>
             <motion.a
+              animate={{ opacity: 1, x: 0 }}
+              className="inline-flex min-h-11 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 font-medium text-[var(--foreground-primary)] text-sm no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-[var(--blue-500)] focus-visible:outline-offset-2"
               href="https://availproject.org"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex min-h-11 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 text-sm font-medium text-[var(--foreground-primary)] no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--blue-500)]"
               initial={{ opacity: 0, x: -10 }}
-              animate={{ opacity: 1, x: 0 }}
+              rel="noopener noreferrer"
+              target="_blank"
               transition={{ delay: 0.9 }}
               whileHover={{
                 scale: 1.05,
@@ -121,19 +201,25 @@ export default function App() {
               }}
               whileTap={{ scale: 0.98 }}
             >
-              <img src={AvailLogo} alt="Avail" className="h-4 w-auto" />
+              <img
+                alt="Avail"
+                className="h-4 w-auto"
+                height={16}
+                src={AvailLogo}
+                width={68}
+              />
               <ExternalLink size={12} />
             </motion.a>
           </div>
 
           <div className="mt-3 flex flex-wrap items-center justify-center gap-3">
             <motion.a
+              animate={{ opacity: 1, x: 0 }}
+              className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 font-medium text-[var(--foreground-primary)] text-sm no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-[var(--blue-500)] focus-visible:outline-offset-2"
               href="https://discord.com/invite/AvailProject"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 text-sm font-medium text-[var(--foreground-primary)] no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--blue-500)]"
               initial={{ opacity: 0, x: -10 }}
-              animate={{ opacity: 1, x: 0 }}
+              rel="noopener noreferrer"
+              target="_blank"
               transition={{ delay: 0.85 }}
               whileHover={{
                 scale: 1.05,
@@ -142,28 +228,30 @@ export default function App() {
               whileTap={{ scale: 0.98 }}
             >
               <img
-                src="/Discord-Symbol-Black.png"
                 alt=""
                 aria-hidden="true"
                 className="h-4 w-4 object-contain"
+                height={16}
+                src="/Discord-Symbol-Black.png"
+                width={16}
               />
               <span>Discord</span>
             </motion.a>
 
             <motion.div
+              animate={{ opacity: 1, x: 0 }}
               className="flex items-center gap-2 rounded-full border border-[var(--border-default)] bg-[var(--background-primary)] px-2 py-1.5"
               initial={{ opacity: 0, x: 10 }}
-              animate={{ opacity: 1, x: 0 }}
               transition={{ delay: 1 }}
             >
               {SOCIAL_LINKS.map((social) => (
                 <a
-                  key={social.id}
-                  href={social.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
                   aria-label={social.label}
                   className={socialLinkClassName}
+                  href={social.href}
+                  key={social.id}
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
                   <SocialGlyph id={social.id} />
                 </a>
@@ -174,12 +262,12 @@ export default function App() {
 
         <div className="mx-auto hidden w-full max-w-[1200px] md:grid md:grid-cols-[1fr_auto_1fr] md:items-center">
           <motion.a
+            animate={{ opacity: 1, x: 0 }}
+            className="inline-flex min-h-11 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 font-medium text-[var(--foreground-primary)] text-sm no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-[var(--blue-500)] focus-visible:outline-offset-2 md:justify-self-start"
             href="https://discord.com/invite/AvailProject"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex min-h-11 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 text-sm font-medium text-[var(--foreground-primary)] no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--blue-500)] md:justify-self-start"
             initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
+            rel="noopener noreferrer"
+            target="_blank"
             transition={{ delay: 0.85 }}
             whileHover={{
               scale: 1.05,
@@ -188,30 +276,32 @@ export default function App() {
             whileTap={{ scale: 0.98 }}
           >
             <img
-              src="/Discord-Symbol-Black.png"
               alt=""
               aria-hidden="true"
               className="h-3.5 w-3.5 object-contain"
+              height={14}
+              src="/Discord-Symbol-Black.png"
+              width={14}
             />
             <span>Discord</span>
           </motion.a>
 
           <div className="flex items-center justify-center gap-2 md:justify-self-center">
             <motion.span
-              className="text-sm text-[var(--foreground-muted)]"
-              initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
+              className="text-[var(--foreground-muted)] text-sm"
+              initial={{ opacity: 0 }}
               transition={{ delay: 0.8 }}
             >
               Powered by
             </motion.span>
             <motion.a
+              animate={{ opacity: 1, x: 0 }}
+              className="inline-flex min-h-11 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 font-medium text-[var(--foreground-primary)] text-sm no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-[var(--blue-500)] focus-visible:outline-offset-2"
               href="https://availproject.org"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex min-h-11 items-center gap-2 rounded-[100px] border border-[var(--border-default)] bg-[var(--background-primary)] px-[14px] py-2 text-sm font-medium text-[var(--foreground-primary)] no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] hover:border-[var(--blue-300)] hover:bg-[var(--background-tertiary)] hover:shadow-[0_4px_12px_hsla(214,92%,48%,0.15)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--blue-500)]"
               initial={{ opacity: 0, x: -10 }}
-              animate={{ opacity: 1, x: 0 }}
+              rel="noopener noreferrer"
+              target="_blank"
               transition={{ delay: 0.9 }}
               whileHover={{
                 scale: 1.05,
@@ -219,29 +309,35 @@ export default function App() {
               }}
               whileTap={{ scale: 0.98 }}
             >
-              <img src={AvailLogo} alt="Avail" className="h-4 w-auto" />
+              <img
+                alt="Avail"
+                className="h-4 w-auto"
+                height={16}
+                src={AvailLogo}
+                width={68}
+              />
               <ExternalLink size={12} />
             </motion.a>
           </div>
 
           <motion.div
+            animate={{ opacity: 1, x: 0 }}
             className="flex items-center gap-3 md:justify-self-end"
             initial={{ opacity: 0, x: 10 }}
-            animate={{ opacity: 1, x: 0 }}
             transition={{ delay: 1 }}
           >
-            <span className="text-sm leading-5 font-medium text-[rgb(167,167,167)]">
+            <span className="font-medium text-[rgb(167,167,167)] text-sm leading-5">
               Socials
             </span>
             <div className="flex items-center gap-2">
               {SOCIAL_LINKS.map((social) => (
                 <a
-                  key={`desktop-${social.id}`}
-                  href={social.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
                   aria-label={social.label}
                   className={socialLinkClassName}
+                  href={social.href}
+                  key={`desktop-${social.id}`}
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
                   <SocialGlyph id={social.id} />
                 </a>
diff --git a/apps/root/src/chains.ts b/apps/root/src/chains.ts
index 803398f..79a824c 100644
--- a/apps/root/src/chains.ts
+++ b/apps/root/src/chains.ts
@@ -1,15 +1,15 @@
+import chainList from "../../../chains.config.json";
+
 export interface ChainConfig {
-  slug: string;
-  name: string;
+  appDir: string;
+  basePath: string;
   description?: string;
+  iconUrl?: string;
+  logoUrl?: string;
+  name: string;
   primaryColor?: string;
   secondaryColor?: string;
-  basePath: string;
-  appDir: string;
-  logoUrl?: string;
-  iconUrl?: string;
+  slug: string;
 }
 
-import chainList from "../../../chains.config.json" assert { type: "json" };
-
 export const chains = chainList as ChainConfig[];
diff --git a/apps/root/src/components/animated-title.tsx b/apps/root/src/components/animated-title.tsx
index eaf978c..58e2160 100644
--- a/apps/root/src/components/animated-title.tsx
+++ b/apps/root/src/components/animated-title.tsx
@@ -1,20 +1,30 @@
 import { motion } from "motion/react";
+
 function AnimatedTitle({ text }: { text: string }) {
   const letters = text.split("");
+  const letterOccurrenceByValue = new Map<string, number>();
+  const letterEntries = letters.map((letter) => {
+    const occurrence = (letterOccurrenceByValue.get(letter) ?? 0) + 1;
+    letterOccurrenceByValue.set(letter, occurrence);
+    return {
+      key: `${letter}-${occurrence}`,
+      letter,
+    };
+  });
 
   return (
-    <h1 className="relative inline-flex flex-wrap items-center justify-center gap-[2px] text-[28px] leading-[1.15] font-bold tracking-[-0.02em] text-[var(--foreground-primary)] [font-family:var(--font-display)] md:[font-size:clamp(32px,5vw,52px)]">
-      {letters.map((letter, index) => (
+    <h1 className="relative inline-flex flex-wrap items-center justify-center gap-[2px] font-bold text-[28px] text-[var(--foreground-primary)] leading-[1.15] tracking-[-0.02em] [font-family:var(--font-display)] md:[font-size:clamp(32px,5vw,52px)]">
+      {letterEntries.map(({ key, letter }, index) => (
         <motion.span
-          key={index}
-          initial={{ opacity: 0, y: 30, rotateX: -90 }}
           animate={{ opacity: 1, y: 0, rotateX: 0 }}
+          className="inline-block"
+          initial={{ opacity: 0, y: 30, rotateX: -90 }}
+          key={key}
           transition={{
             duration: 0.5,
             delay: 0.2 + index * 0.04,
             ease: [0.25, 0.46, 0.45, 0.94],
           }}
-          className="inline-block"
           whileHover={{
             scale: 1.2,
             rotate: [0, -5, 5, 0],
diff --git a/apps/root/src/components/chain-card.tsx b/apps/root/src/components/chain-card.tsx
index b5f8768..f2c8593 100644
--- a/apps/root/src/components/chain-card.tsx
+++ b/apps/root/src/components/chain-card.tsx
@@ -1,7 +1,7 @@
 import { ArrowRight } from "lucide-react";
 import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
-import { useRef, useState } from "react";
-import { chains } from "../chains";
+import { useEffect, useRef, useState } from "react";
+import type { chains } from "../chains";
 
 function ChainCard({
   chain,
@@ -10,7 +10,7 @@ function ChainCard({
   chain: (typeof chains)[0];
   index: number;
 }) {
-  const [imageError, setImageError] = useState(false);
+  const [imageError, setImageError] = useState(!chain.logoUrl);
   const [isHovered, setIsHovered] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
   const primaryColor = chain.primaryColor ?? "#2563eb";
@@ -23,15 +23,17 @@ function ChainCard({
   const springConfig = { damping: 25, stiffness: 200 };
   const rotateX = useSpring(
     useTransform(mouseY, [-0.5, 0.5], [8, -8]),
-    springConfig,
+    springConfig
   );
   const rotateY = useSpring(
     useTransform(mouseX, [-0.5, 0.5], [-8, 8]),
-    springConfig,
+    springConfig
   );
 
   const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return;
+    if (!cardRef.current) {
+      return;
+    }
     const rect = cardRef.current.getBoundingClientRect();
     const x = (e.clientX - rect.left) / rect.width - 0.5;
     const y = (e.clientY - rect.top) / rect.height - 0.5;
@@ -45,12 +47,45 @@ function ChainCard({
     setIsHovered(false);
   };
 
+  useEffect(() => {
+    if (!chain.logoUrl) {
+      setImageError(true);
+      return;
+    }
+
+    let canceled = false;
+    const image = new Image();
+    image.onload = () => {
+      if (!canceled) {
+        setImageError(false);
+      }
+    };
+    image.onerror = () => {
+      if (!canceled) {
+        setImageError(true);
+      }
+    };
+    image.src = chain.logoUrl;
+
+    return () => {
+      canceled = true;
+    };
+  }, [chain.logoUrl]);
+
   // Determine if color is light or dark for fallback text
   const isLightColor = (hex: string) => {
-    const rgb = parseInt(hex.slice(1), 16);
-    const r = (rgb >> 16) & 0xff;
-    const g = (rgb >> 8) & 0xff;
-    const b = (rgb >> 0) & 0xff;
+    const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
+    if (normalized.length !== 6) {
+      return false;
+    }
+
+    const r = Number.parseInt(normalized.slice(0, 2), 16);
+    const g = Number.parseInt(normalized.slice(2, 4), 16);
+    const b = Number.parseInt(normalized.slice(4, 6), 16);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+      return false;
+    }
+
     const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
     return luma > 128;
   };
@@ -59,48 +94,48 @@ function ChainCard({
 
   return (
     <motion.div
+      animate={{ opacity: 1, y: 0, scale: 1 }}
       className="h-full"
       initial={{ opacity: 0, y: 30, scale: 0.95 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
+      style={{ perspective: 1000 }}
       transition={{
         duration: 0.5,
         delay: index * 0.1,
         ease: [0.25, 0.46, 0.45, 0.94],
       }}
-      style={{ perspective: 1000 }}
     >
       <motion.div
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={handleMouseLeave}
+        onMouseMove={handleMouseMove}
         ref={cardRef}
         style={{
           rotateX,
           rotateY,
           transformStyle: "preserve-3d",
         }}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={handleMouseLeave}
       >
         <a
+          className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-[var(--border-default)] bg-[var(--card-background)] p-5 text-inherit no-underline transition-[transform,box-shadow,border-color] duration-300 [transform-style:preserve-3d] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] hover:border-[var(--blue-300)] hover:shadow-[0_20px_50px_-12px_hsla(214,92%,48%,0.2),0_8px_24px_-8px_hsla(0,0%,0%,0.1)] focus-visible:outline-2 focus-visible:outline-[var(--blue-500)] focus-visible:outline-offset-2 md:min-h-[200px] md:p-6"
           href={chain.basePath}
-          className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-[var(--border-default)] bg-[var(--card-background)] p-5 text-inherit no-underline [transform-style:preserve-3d] transition-[transform,box-shadow,border-color] duration-300 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] hover:border-[var(--blue-300)] hover:shadow-[0_20px_50px_-12px_hsla(214,92%,48%,0.2),0_8px_24px_-8px_hsla(0,0%,0%,0.1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--blue-500)] md:min-h-[200px] md:p-6"
         >
           {/* Animated border glow */}
           <motion.div
-            className="pointer-events-none absolute -inset-[2px] rounded-[14px] border-2 border-[var(--blue-400)] opacity-0"
             animate={{
               opacity: isHovered ? 1 : 0,
             }}
+            className="pointer-events-none absolute -inset-[2px] rounded-[14px] border-2 border-[var(--blue-400)] opacity-0"
             transition={{ duration: 0.3 }}
           />
 
           <div className="flex flex-1 items-start gap-4 md:gap-5">
             {/* Chain Logo with bounce animation */}
             <motion.div
-              className="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border border-[var(--border-default)] bg-[var(--background-secondary)] p-2.5 transition-[background-color,border-color,transform] duration-300 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] group-hover:border-[var(--blue-200)] group-hover:bg-[var(--background-tertiary)] md:h-[72px] md:w-[72px] md:p-3"
               animate={{
                 scale: isHovered ? 1.1 : 1,
                 rotate: isHovered ? [0, -5, 5, 0] : 0,
               }}
+              className="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg border border-[var(--border-default)] bg-[var(--background-secondary)] p-2.5 transition-[background-color,border-color,transform] duration-300 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] group-hover:border-[var(--blue-200)] group-hover:bg-[var(--background-tertiary)] md:h-[72px] md:w-[72px] md:p-3"
               transition={{
                 scale: { duration: 0.3, ease: [0.34, 1.56, 0.64, 1] },
                 rotate: { duration: 0.5, ease: "easeInOut" },
@@ -108,14 +143,15 @@ function ChainCard({
             >
               {!imageError && chain.logoUrl ? (
                 <img
-                  src={chain.logoUrl}
                   alt={`${chain.name} logo`}
                   className="h-full w-full object-contain"
-                  onError={() => setImageError(true)}
+                  height={72}
+                  src={chain.logoUrl}
+                  width={72}
                 />
               ) : (
                 <div
-                  className="flex h-full w-full items-center justify-center rounded text-[28px] font-bold"
+                  className="flex h-full w-full items-center justify-center rounded font-bold text-[28px]"
                   style={{
                     background: primaryColor,
                     color: primaryIsLight ? "#111827" : "#ffffff",
@@ -129,20 +165,20 @@ function ChainCard({
             {/* Chain Info */}
             <div className="flex min-w-0 flex-1 flex-col gap-1.5">
               <motion.h3
-                className="m-0 text-lg font-semibold tracking-[-0.01em] text-[var(--foreground-primary)] [font-family:var(--font-display)] transition-transform duration-200 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] md:text-xl"
                 animate={{
                   x: isHovered ? 4 : 0,
                 }}
+                className="m-0 font-semibold text-[var(--foreground-primary)] text-lg tracking-[-0.01em] transition-transform duration-200 [font-family:var(--font-display)] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] md:text-xl"
                 transition={{ duration: 0.2 }}
               >
                 {chain.name}
               </motion.h3>
               {chain.description && (
                 <motion.p
-                  className="m-0 text-sm font-normal leading-[1.5] text-[var(--foreground-secondary)] transition-opacity duration-200"
                   animate={{
                     opacity: isHovered ? 1 : 0.8,
                   }}
+                  className="m-0 font-normal text-[var(--foreground-secondary)] text-sm leading-[1.5] transition-opacity duration-200"
                   transition={{ duration: 0.2 }}
                 >
                   {chain.description}
@@ -152,24 +188,24 @@ function ChainCard({
           </div>
 
           {/* Card Footer */}
-          <div className="mt-5 flex items-center justify-between border-t border-[var(--border-default)] pt-4">
+          <div className="mt-5 flex items-center justify-between border-[var(--border-default)] border-t pt-4">
             <motion.span
-              className="inline-flex items-center rounded px-2.5 py-1.5 text-xs font-medium text-[var(--foreground-muted)] [font-family:var(--font-mono)]"
               animate={{
                 backgroundColor: isHovered
                   ? "var(--background-tertiary)"
                   : "var(--background-secondary)",
               }}
+              className="inline-flex items-center rounded px-2.5 py-1.5 font-medium text-[var(--foreground-muted)] text-xs [font-family:var(--font-mono)]"
               transition={{ duration: 0.2 }}
             >
               {chain.basePath}
             </motion.span>
             <motion.div
-              className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--button-primary-background)] px-4 py-2.5 text-sm font-semibold text-[var(--button-primary-foreground)] transition-[background-color,transform,gap] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] group-hover:bg-[var(--blue-600)]"
               animate={{
                 scale: isHovered ? 1.05 : 1,
                 gap: isHovered ? 10 : 6,
               }}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--button-primary-background)] px-4 py-2.5 font-semibold text-[var(--button-primary-foreground)] text-sm transition-[background-color,transform,gap] duration-200 [transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)] group-hover:bg-[var(--blue-600)]"
               transition={{
                 duration: 0.2,
                 ease: [0.34, 1.56, 0.64, 1],
diff --git a/apps/root/src/components/floating-badge.tsx b/apps/root/src/components/floating-badge.tsx
index 5f5a063..6d093bd 100644
--- a/apps/root/src/components/floating-badge.tsx
+++ b/apps/root/src/components/floating-badge.tsx
@@ -4,9 +4,9 @@ import { motion } from "motion/react";
 function FloatingBadge() {
   return (
     <motion.div
-      className="inline-flex cursor-default items-center gap-2 rounded-full border border-[var(--blue-200)] bg-[var(--background-brand)] px-4 py-2 text-[13px] font-semibold text-[var(--foreground-brand)]"
-      initial={{ opacity: 0, scale: 0.8 }}
       animate={{ opacity: 1, scale: 1 }}
+      className="inline-flex cursor-default items-center gap-2 rounded-full border border-[var(--blue-200)] bg-[var(--background-brand)] px-4 py-2 font-semibold text-[13px] text-[var(--foreground-brand)]"
+      initial={{ opacity: 0, scale: 0.8 }}
       transition={{ duration: 0.5, delay: 0.8 }}
       whileHover={{ scale: 1.05 }}
     >
diff --git a/apps/root/src/components/floating-logos.tsx b/apps/root/src/components/floating-logos.tsx
index 402da6f..68cf500 100644
--- a/apps/root/src/components/floating-logos.tsx
+++ b/apps/root/src/components/floating-logos.tsx
@@ -1,21 +1,122 @@
-import { TOKEN_IMAGES } from "@/lib/constant";
 import { motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { TOKEN_IMAGES } from "@/lib/constant";
 
 interface FloatingLogoData {
+  homeX?: number;
+  homeY?: number;
   id: number;
-  x: number;
-  y: number;
-  size: number;
-  vx: number;
-  vy: number;
   imageUrl: string;
   name: string;
+  size: number;
   type: "chain" | "token";
-  homeX?: number;
-  homeY?: number;
+  vx: number;
+  vy: number;
+  x: number;
+  y: number;
 }
 
+const CURSOR_RADIUS = 60;
+const REPEL_FORCE = 2;
+const FRICTION = 0.96;
+const MAX_SPEED = 0.8;
+const RETURN_FORCE = 0.005;
+const MIN_LOGO_BOUNDARY = 5;
+const MAX_LOGO_BOUNDARY = 95;
+const BOUNDARY_PUSH = 0.02;
+
+const setLogoHomePosition = (logo: FloatingLogoData) => {
+  if (logo.homeX === undefined) {
+    logo.homeX = logo.x;
+  }
+  if (logo.homeY === undefined) {
+    logo.homeY = logo.y;
+  }
+};
+
+const applyCursorRepel = (
+  logo: FloatingLogoData,
+  mousePosition: { x: number; y: number },
+  width: number,
+  height: number
+) => {
+  const logoPx = (logo.x / 100) * width;
+  const logoPy = (logo.y / 100) * height;
+  const dx = logoPx - mousePosition.x;
+  const dy = logoPy - mousePosition.y;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  const influenceRadius = CURSOR_RADIUS + logo.size / 2;
+
+  if (distance >= influenceRadius || distance === 0) {
+    return;
+  }
+
+  const force = (influenceRadius - distance) / influenceRadius;
+  const angle = Math.atan2(dy, dx);
+  logo.vx += Math.cos(angle) * force * REPEL_FORCE;
+  logo.vy += Math.sin(angle) * force * REPEL_FORCE;
+};
+
+const applyAmbientDrift = (
+  logo: FloatingLogoData,
+  index: number,
+  time: number
+) => {
+  const noiseX = Math.sin(time + index * 2) * Math.cos(time * 0.7 + index);
+  const noiseY =
+    Math.cos(time * 0.8 + index * 1.5) * Math.sin(time * 0.6 + index * 0.8);
+  const jitter = (Math.random() - 0.5) * 0.03;
+
+  logo.vx += noiseX * 0.008 + jitter;
+  logo.vy += noiseY * 0.008 + jitter;
+};
+
+const applyReturnForce = (logo: FloatingLogoData) => {
+  const homeDx = (logo.homeX ?? logo.x) - logo.x;
+  const homeDy = (logo.homeY ?? logo.y) - logo.y;
+  logo.vx += homeDx * RETURN_FORCE;
+  logo.vy += homeDy * RETURN_FORCE;
+};
+
+const applyVelocity = (
+  logo: FloatingLogoData,
+  width: number,
+  height: number
+) => {
+  logo.x += (logo.vx / width) * 100;
+  logo.y += (logo.vy / height) * 100;
+};
+
+const applyFriction = (logo: FloatingLogoData) => {
+  logo.vx *= FRICTION;
+  logo.vy *= FRICTION;
+};
+
+const clampLogoSpeed = (logo: FloatingLogoData) => {
+  const speed = Math.sqrt(logo.vx * logo.vx + logo.vy * logo.vy);
+  if (speed <= MAX_SPEED) {
+    return;
+  }
+
+  logo.vx = (logo.vx / speed) * MAX_SPEED;
+  logo.vy = (logo.vy / speed) * MAX_SPEED;
+};
+
+const applyBoundaryForce = (logo: FloatingLogoData) => {
+  if (logo.x < MIN_LOGO_BOUNDARY) {
+    logo.vx += BOUNDARY_PUSH;
+  }
+  if (logo.x > MAX_LOGO_BOUNDARY) {
+    logo.vx -= BOUNDARY_PUSH;
+  }
+  if (logo.y < MIN_LOGO_BOUNDARY) {
+    logo.vy += BOUNDARY_PUSH;
+  }
+  if (logo.y > MAX_LOGO_BOUNDARY) {
+    logo.vy -= BOUNDARY_PUSH;
+  }
+};
+
 function FloatingLogos({
   mousePosition,
 }: {
@@ -38,9 +139,9 @@ function FloatingLogos({
       ...tokenSymbols,
       ...tokenSymbols,
     ].sort(() => Math.random() - 0.5);
-    shuffledTokens.forEach((symbol) => {
+    for (const symbol of shuffledTokens) {
       logos.push({
-        id: id++,
+        id,
         x: Math.random() * 110 - 15,
         y: Math.random() * 110 - 20,
         size: 24 + Math.random() * 28, // 24-52px, slightly smaller than chains
@@ -50,7 +151,8 @@ function FloatingLogos({
         name: symbol,
         type: "token",
       });
-    });
+      id += 1;
+    }
 
     logosRef.current = logos;
     forceUpdate({});
@@ -59,87 +161,24 @@ function FloatingLogos({
   // Animation loop with cursor collision and gentle random movement
   const animate = useCallback(() => {
     const container = containerRef.current;
-    if (!container) return;
+    if (!container) {
+      return;
+    }
 
     const rect = container.getBoundingClientRect();
     const logos = logosRef.current;
-    const cursorRadius = 60;
-    const repelForce = 2;
-    const friction = 0.96;
-    const maxSpeed = 0.8;
-    const returnForce = 0.005;
     const time = Date.now() * 0.0005;
 
-    logos.forEach((logo, index) => {
-      // Store original position as "home"
-      if (logo.homeX === undefined) logo.homeX = logo.x;
-      if (logo.homeY === undefined) logo.homeY = logo.y;
-
-      // Convert percentage to pixels for collision
-      const logoPx = (logo.x / 100) * rect.width;
-      const logoPy = (logo.y / 100) * rect.height;
-
-      // Calculate distance to cursor
-      const dx = logoPx - mousePosition.x;
-      const dy = logoPy - mousePosition.y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      // Cursor collision/repulsion (gentler)
-      if (distance < cursorRadius + logo.size / 2 && distance > 0) {
-        const force =
-          (cursorRadius + logo.size / 2 - distance) /
-          (cursorRadius + logo.size / 2);
-        const angle = Math.atan2(dy, dx);
-        logo.vx += Math.cos(angle) * force * repelForce;
-        logo.vy += Math.sin(angle) * force * repelForce;
-      }
-
-      // Gentle drift movement - very slow and subtle
-      const noiseX = Math.sin(time + index * 2) * Math.cos(time * 0.7 + index);
-      const noiseY =
-        Math.cos(time * 0.8 + index * 1.5) * Math.sin(time * 0.6 + index * 0.8);
-
-      // Minimal random jitter
-      const jitter = (Math.random() - 0.5) * 0.03;
-
-      logo.vx += noiseX * 0.008 + jitter;
-      logo.vy += noiseY * 0.008 + jitter;
-
-      // Gentle return-to-home force (keeps logos in view)
-      const homeDx = logo.homeX - logo.x;
-      const homeDy = logo.homeY - logo.y;
-      logo.vx += homeDx * returnForce;
-      logo.vy += homeDy * returnForce;
-
-      // Apply velocity
-      logo.x += (logo.vx / rect.width) * 100;
-      logo.y += (logo.vy / rect.height) * 100;
-
-      // Apply friction
-      logo.vx *= friction;
-      logo.vy *= friction;
-
-      // Clamp speed
-      const speed = Math.sqrt(logo.vx * logo.vx + logo.vy * logo.vy);
-      if (speed > maxSpeed) {
-        logo.vx = (logo.vx / speed) * maxSpeed;
-        logo.vy = (logo.vy / speed) * maxSpeed;
-      }
-
-      // Soft boundary constraints (gentle push back instead of bounce)
-      if (logo.x < 5) {
-        logo.vx += 0.02;
-      }
-      if (logo.x > 95) {
-        logo.vx -= 0.02;
-      }
-      if (logo.y < 5) {
-        logo.vy += 0.02;
-      }
-      if (logo.y > 95) {
-        logo.vy -= 0.02;
-      }
-    });
+    for (const [index, logo] of logos.entries()) {
+      setLogoHomePosition(logo);
+      applyCursorRepel(logo, mousePosition, rect.width, rect.height);
+      applyAmbientDrift(logo, index, time);
+      applyReturnForce(logo);
+      applyVelocity(logo, rect.width, rect.height);
+      applyFriction(logo);
+      clampLogoSpeed(logo);
+      applyBoundaryForce(logo);
+    }
 
     forceUpdate({});
     animationRef.current = requestAnimationFrame(animate);
@@ -156,32 +195,31 @@ function FloatingLogos({
 
   return (
     <div
-      ref={containerRef}
       className="pointer-events-none absolute inset-0 z-[1] hidden overflow-hidden md:block"
+      ref={containerRef}
     >
       {logosRef.current.map((logo) => (
         <motion.div
-          key={logo.id}
-          className={`pointer-events-none absolute overflow-hidden rounded-full transition-transform duration-100 linear will-change-[transform,left,top] motion-reduce:hidden ${
+          animate={{ opacity: 0.6, scale: 1 }}
+          className={`linear pointer-events-none absolute overflow-hidden rounded-full transition-transform duration-100 will-change-[transform,left,top] motion-reduce:hidden ${
             logo.type === "chain" ? "grayscale-[30%]" : "grayscale-[50%]"
           }`}
+          initial={{ opacity: 0, scale: 0 }}
+          key={logo.id}
           style={{
             left: `${logo.x}%`,
             top: `${logo.y}%`,
             width: logo.size,
             height: logo.size,
           }}
-          initial={{ opacity: 0, scale: 0 }}
-          animate={{ opacity: 0.6, scale: 1 }}
           transition={{ duration: 0.5, delay: Math.random() * 0.5 }}
         >
           <img
-            src={logo.imageUrl}
             alt={logo.name}
             className="h-full w-full object-cover"
-            onError={(e) => {
-              (e.target as HTMLImageElement).style.display = "none";
-            }}
+            height={Math.round(logo.size)}
+            src={logo.imageUrl}
+            width={Math.round(logo.size)}
           />
         </motion.div>
       ))}
diff --git a/apps/root/src/components/social-glyph.tsx b/apps/root/src/components/social-glyph.tsx
index 1a6e657..3eb335c 100644
--- a/apps/root/src/components/social-glyph.tsx
+++ b/apps/root/src/components/social-glyph.tsx
@@ -4,11 +4,11 @@ function SocialGlyph({ id }: { id: SocialId }) {
   if (id === "telegram") {
     return (
       <svg
-        width="15"
+        aria-hidden="true"
+        fill="none"
         height="14"
         viewBox="0 0 17 14"
-        fill="none"
-        aria-hidden="true"
+        width="15"
       >
         <path
           d="M 0.545 6.431 C 0.584 6.412 0.622 6.394 0.66 6.376 C 1.314 6.075 1.976 5.793 2.638 5.511 C 2.673 5.511 2.733 5.47 2.767 5.456 C 2.818 5.434 2.869 5.413 2.92 5.391 C 3.018 5.349 3.117 5.308 3.214 5.265 C 3.411 5.182 3.607 5.098 3.803 5.015 L 4.981 4.513 C 5.765 4.179 6.551 3.844 7.336 3.511 C 8.121 3.177 8.907 2.842 9.692 2.508 C 10.477 2.174 11.263 1.839 12.047 1.505 C 12.832 1.171 13.618 0.837 14.403 0.503 C 14.577 0.428 14.767 0.317 14.954 0.284 C 15.111 0.256 15.264 0.202 15.422 0.173 C 15.722 0.116 16.053 0.093 16.34 0.217 C 16.439 0.26 16.531 0.32 16.607 0.396 C 16.972 0.755 16.921 1.344 16.844 1.849 C 16.306 5.366 15.769 8.884 15.231 12.402 C 15.158 12.884 15.058 13.414 14.675 13.719 C 14.351 13.977 13.89 14.006 13.49 13.897 C 13.09 13.786 12.737 13.555 12.391 13.328 C 10.955 12.382 9.518 11.436 8.083 10.49 C 7.741 10.265 7.361 9.972 7.365 9.564 C 7.367 9.318 7.515 9.099 7.665 8.905 C 8.913 7.285 10.713 6.172 12.052 4.627 C 12.241 4.41 12.39 4.016 12.13 3.891 C 11.976 3.816 11.799 3.917 11.658 4.014 C 9.888 5.238 8.118 6.462 6.348 7.685 C 5.77 8.084 5.165 8.495 4.469 8.593 C 3.846 8.681 3.219 8.508 2.616 8.332 C 2.111 8.184 1.607 8.032 1.104 7.876 C 0.837 7.794 0.562 7.704 0.355 7.517 C 0.149 7.33 0.03 7.015 0.155 6.766 C 0.233 6.61 0.384 6.511 0.543 6.43 Z"
@@ -21,10 +21,12 @@ function SocialGlyph({ id }: { id: SocialId }) {
   if (id === "x") {
     return (
       <img
-        src="/social-x-framer.png"
         alt=""
         aria-hidden="true"
         className="h-[15px] w-[15px] object-contain"
+        height={15}
+        src="/social-x-framer.png"
+        width={15}
       />
     );
   }
@@ -32,11 +34,11 @@ function SocialGlyph({ id }: { id: SocialId }) {
   if (id === "linkedin") {
     return (
       <svg
-        width="14"
+        aria-hidden="true"
+        fill="none"
         height="14"
         viewBox="0 0 18 18"
-        fill="none"
-        aria-hidden="true"
+        width="14"
       >
         <path
           d="M-3.05176e-05 1.9911C-3.05176e-05 1.41389 0.202678 0.937695 0.608078 0.562526C1.01348 0.18734 1.54052 -0.000244141 2.18916 -0.000244141C2.82623 -0.000244141 3.34166 0.184448 3.73549 0.553868C4.14089 0.93482 4.3436 1.4312 4.3436 2.04305C4.3436 2.59716 4.14669 3.05891 3.75287 3.42833C3.34747 3.80928 2.81464 3.99975 2.15441 3.99975H2.13704C1.49996 3.99975 0.984531 3.80928 0.590703 3.42833C0.196875 3.04737 -3.05176e-05 2.56829 -3.05176e-05 1.9911ZM0.225838 17.1426V5.57551H4.08298V17.1426H0.225838ZM6.22005 17.1426H10.0772V10.6837C10.0772 10.2797 10.1235 9.96799 10.2162 9.74867C10.3783 9.35617 10.6245 9.02427 10.9546 8.753C11.2847 8.48171 11.6988 8.34607 12.1969 8.34607C13.4942 8.34607 14.1428 9.21764 14.1428 10.9608V17.1426H18V10.5106C18 8.80206 17.5946 7.50625 16.7838 6.62313C15.9729 5.74001 14.9015 5.29845 13.5695 5.29845C12.0753 5.29845 10.9112 5.93915 10.0772 7.22053V7.25516H10.0598L10.0772 7.22053V5.57551H6.22005C6.24321 5.94491 6.2548 7.09354 6.2548 9.0214C6.2548 10.9492 6.24321 13.6563 6.22005 17.1426Z"
@@ -48,11 +50,11 @@ function SocialGlyph({ id }: { id: SocialId }) {
 
   return (
     <svg
-      width="15"
+      aria-hidden="true"
+      fill="none"
       height="14"
       viewBox="0 0 19 14"
-      fill="none"
-      aria-hidden="true"
+      width="15"
     >
       <path
         d="M9.92077 13.4132L6.0227 13.3403C4.7606 13.315 3.49535 13.3656 2.25799 13.1026C0.375679 12.7097 0.242329 10.7829 0.102793 9.16669C-0.0894735 6.89452 -0.0150413 4.58111 0.347791 2.32791C0.552621 1.06362 1.35871 0.309215 2.60531 0.227121C6.81347 -0.0708093 11.0496 -0.0355014 15.2485 0.103494C15.6919 0.116236 16.1384 0.18588 16.5757 0.265153C18.7341 0.651791 18.7867 2.83525 18.9267 4.67332C19.0662 6.53035 19.0073 8.39691 18.7406 10.2413C18.5266 11.7684 18.1172 13.049 16.3896 13.1727C14.225 13.3343 12.11 13.4645 9.93933 13.423C9.93942 13.4132 9.92695 13.4132 9.92077 13.4132ZM7.62908 9.54701C9.2603 8.58989 10.8604 7.64873 12.4823 6.69804C10.848 5.74093 9.25097 4.79977 7.62908 3.84907V9.54701Z"
diff --git a/apps/root/src/components/ui/aurora-text.tsx b/apps/root/src/components/ui/aurora-text.tsx
index 8be2c10..35700ce 100644
--- a/apps/root/src/components/ui/aurora-text.tsx
+++ b/apps/root/src/components/ui/aurora-text.tsx
@@ -1,10 +1,11 @@
-import React, { memo } from "react"
+import type React from "react";
+import { memo } from "react";
 
 interface AuroraTextProps {
-  children: React.ReactNode
-  className?: string
-  colors?: string[]
-  speed?: number
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
 }
 
 export const AuroraText = memo(
@@ -21,21 +22,21 @@ export const AuroraText = memo(
       WebkitBackgroundClip: "text",
       WebkitTextFillColor: "transparent",
       animationDuration: `${10 / speed}s`,
-    }
+    };
 
     return (
       <span className={`relative inline-block ${className}`}>
         <span className="sr-only">{children}</span>
         <span
-          className="animate-aurora relative bg-size-[200%_auto] bg-clip-text text-transparent"
-          style={gradientStyle}
           aria-hidden="true"
+          className="relative animate-aurora bg-size-[200%_auto] bg-clip-text text-transparent"
+          style={gradientStyle}
         >
           {children}
         </span>
       </span>
-    )
+    );
   }
-)
+);
 
-AuroraText.displayName = "AuroraText"
+AuroraText.displayName = "AuroraText";
diff --git a/apps/root/src/index.css b/apps/root/src/index.css
index 73dd3af..c135cbe 100644
--- a/apps/root/src/index.css
+++ b/apps/root/src/index.css
@@ -1,5 +1,5 @@
 /* Nexus Fast Bridge Hub - Avail Design System (Light Theme) */
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
@@ -7,40 +7,40 @@
 @custom-variant dark (&:is(.dark *));
 
 @font-face {
-  font-family: 'Delight';
+  font-family: "Delight";
   src:
-    url('/delight/Web-TT/Delight-Regular.woff2') format('woff2'),
-    url('/delight/Web-TT/Delight-Regular.woff') format('woff');
+    url("/delight/Web-TT/Delight-Regular.woff2") format("woff2"),
+    url("/delight/Web-TT/Delight-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Delight';
+  font-family: "Delight";
   src:
-    url('/delight/Web-TT/Delight-Medium.woff2') format('woff2'),
-    url('/delight/Web-TT/Delight-Medium.woff') format('woff');
+    url("/delight/Web-TT/Delight-Medium.woff2") format("woff2"),
+    url("/delight/Web-TT/Delight-Medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Delight';
+  font-family: "Delight";
   src:
-    url('/delight/Web-TT/Delight-SemiBold.woff2') format('woff2'),
-    url('/delight/Web-TT/Delight-SemiBold.woff') format('woff');
+    url("/delight/Web-TT/Delight-SemiBold.woff2") format("woff2"),
+    url("/delight/Web-TT/Delight-SemiBold.woff") format("woff");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Delight';
+  font-family: "Delight";
   src:
-    url('/delight/Web-TT/Delight-Bold.woff2') format('woff2'),
-    url('/delight/Web-TT/Delight-Bold.woff') format('woff');
+    url("/delight/Web-TT/Delight-Bold.woff2") format("woff2"),
+    url("/delight/Web-TT/Delight-Bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
@@ -48,9 +48,9 @@
 
 :root {
   /* Typography */
-  --font-display: 'Delight', 'Geist', system-ui, -apple-system, sans-serif;
-  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+  --font-display: "Delight", "Geist", system-ui, -apple-system, sans-serif;
+  --font-body: "Geist", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", monospace;
 
   /* Border Radius */
   --radius-none-med: 0px;
@@ -173,14 +173,14 @@ html {
 }
 
 body {
-  font-family: var(--font-body);
-  background: var(--background-secondary);
-  color: var(--foreground-primary);
   min-height: 100vh;
-  line-height: 1.6;
+  overflow-x: hidden;
+  font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overflow-x: hidden;
+  line-height: 1.6;
+  color: var(--foreground-primary);
+  background: var(--background-secondary);
 }
 
 #root {
@@ -188,8 +188,8 @@ body {
 }
 
 ::selection {
-  background: hsla(214, 92%, 48%, 0.2);
   color: var(--foreground-primary);
+  background: hsla(214, 92%, 48%, 0.2);
 }
 
 @theme inline {
@@ -233,25 +233,25 @@ body {
   --radius-3xl: calc(var(--radius) + 12px);
   --radius-4xl: calc(var(--radius) + 16px);
   @keyframes aurora {
-  0% {
-    background-position: 0% 50%;
-    transform: rotate(-5deg) scale(0.9);
+    0% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
     }
-  25% {
-    background-position: 50% 100%;
-    transform: rotate(5deg) scale(1.1);
+    25% {
+      background-position: 50% 100%;
+      transform: rotate(5deg) scale(1.1);
     }
-  50% {
-    background-position: 100% 50%;
-    transform: rotate(-3deg) scale(0.95);
+    50% {
+      background-position: 100% 50%;
+      transform: rotate(-3deg) scale(0.95);
     }
-  75% {
-    background-position: 50% 0%;
-    transform: rotate(3deg) scale(1.05);
+    75% {
+      background-position: 50% 0%;
+      transform: rotate(3deg) scale(1.05);
     }
-  100% {
-    background-position: 0% 50%;
-    transform: rotate(-5deg) scale(0.9);
+    100% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
     }
   }
 }
@@ -297,4 +297,4 @@ body {
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/root/src/lib/utils.ts b/apps/root/src/lib/utils.ts
index bd0c391..365058c 100644
--- a/apps/root/src/lib/utils.ts
+++ b/apps/root/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/apps/root/src/main.tsx b/apps/root/src/main.tsx
index 7467839..5130dc6 100644
--- a/apps/root/src/main.tsx
+++ b/apps/root/src/main.tsx
@@ -1,9 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import App from "./App";
+import App from "./app";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  throw new Error("Root element with id 'root' was not found.");
+}
+
+ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
diff --git a/apps/root/tsconfig.app.json b/apps/root/tsconfig.app.json
index 2827d34..259782b 100644
--- a/apps/root/tsconfig.app.json
+++ b/apps/root/tsconfig.app.json
@@ -20,8 +20,8 @@
     "resolveJsonModule": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
-    },
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
+  "include": ["src"]
 }
diff --git a/apps/root/tsconfig.json b/apps/root/tsconfig.json
index 59578c3..5bfdf37 100644
--- a/apps/root/tsconfig.json
+++ b/apps/root/tsconfig.json
@@ -2,12 +2,13 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.node.json" }
   ],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
+      "@/*": ["./src/*"]
     },
-  },
+    "strictNullChecks": true
+  }
 }
diff --git a/apps/root/vite.config.ts b/apps/root/vite.config.ts
index 1f71a75..bb24aa1 100644
--- a/apps/root/vite.config.ts
+++ b/apps/root/vite.config.ts
@@ -1,13 +1,20 @@
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const chainsConfigPath = path.resolve(__dirname, "..", "..", "chains.config.json");
-const chains = JSON.parse(fs.readFileSync(chainsConfigPath, "utf8")) as Array<{ slug: string }>;
+const chainsConfigPath = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "chains.config.json"
+);
+const chains = JSON.parse(fs.readFileSync(chainsConfigPath, "utf8")) as Array<{
+  slug: string;
+}>;
 
 const baseDevPort = 5173;
 const proxy = Object.fromEntries(
@@ -21,7 +28,7 @@ const proxy = Object.fromEntries(
         changeOrigin: true,
       },
     ];
-  }),
+  })
 );
 
 export default defineConfig(({ command }) => {
diff --git a/biome.jsonc b/biome.jsonc
new file mode 100644
index 0000000..7c9e23c
--- /dev/null
+++ b/biome.jsonc
@@ -0,0 +1,44 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["ultracite/biome/core", "ultracite/biome/react"],
+  "overrides": [
+    {
+      "includes": ["packages/fast-bridge-app/src/**"],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "useAriaPropsForRole": "warn",
+            "useFocusableInteractive": "warn",
+            "useSemanticElements": "warn"
+          },
+          "complexity": {
+            "noExcessiveCognitiveComplexity": "warn",
+            "noForEach": "warn",
+            "noVoid": "warn"
+          },
+          "correctness": {
+            "useExhaustiveDependencies": "warn",
+            "useImageSize": "warn"
+          },
+          "performance": {
+            "noBarrelFile": "warn",
+            "noNamespaceImport": "warn",
+            "useTopLevelRegex": "warn"
+          },
+          "style": {
+            "useConsistentArrayType": "warn",
+            "useConsistentTypeDefinitions": "warn",
+            "noEnum": "warn",
+            "noNestedTernary": "warn",
+            "noNonNullAssertion": "warn",
+            "useFilenamingConvention": "warn"
+          },
+          "suspicious": {
+            "noArrayIndexKey": "warn",
+            "useIterableCallbackReturn": "warn"
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/chains.config.json b/chains.config.json
index 0f68557..94186c8 100644
--- a/chains.config.json
+++ b/chains.config.json
@@ -7,7 +7,7 @@
     "secondaryColor": "#ECE8E8",
     "basePath": "/megaeth/",
     "appDir": "apps/megaeth",
-    "logoUrl": "https://files.availproject.org/fastbridge/megaeth/megaeth-logo.svg",
+    "logoUrl": "https://files.availproject.org/fastbridge/megaeth/megaeth-favicon.svg",
     "iconUrl": "https://files.availproject.org/fastbridge/megaeth/megaeth-favicon.svg"
   },
   {
@@ -18,8 +18,8 @@
     "secondaryColor": "#ffffff",
     "basePath": "/citrea/",
     "appDir": "apps/citrea",
-    "logoUrl": "https://files.availproject.org/fastbridge/citrea/citrea.svg",
-    "iconUrl": "https://files.availproject.org/fastbridge/citrea/citrea.svg"
+    "logoUrl": "https://files.availproject.org/fastbridge/citrea/citrea-favicon.svg",
+    "iconUrl": "https://files.availproject.org/fastbridge/citrea/citrea-favicon.svg"
   },
   {
     "slug": "monad",
diff --git a/docs/adding-chains.md b/docs/adding-chains.md
new file mode 100644
index 0000000..6b79188
--- /dev/null
+++ b/docs/adding-chains.md
@@ -0,0 +1,88 @@
+# Adding a New Chain
+
+This guide is the canonical process for creating and shipping a new chain app.
+
+## Fast Path (Recommended)
+
+```bash
+pnpm chain:add <slug> --name "Chain Name"
+```
+
+Example:
+
+```bash
+pnpm chain:add sonic --name "Sonic"
+```
+
+### Useful options
+
+- `--description "..."`
+- `--base-path "/sonic/"`
+- `--primary "#hex"`
+- `--secondary "#hex"`
+- `--logo-url "https://..."`
+- `--icon-url "https://..."`
+- `--template monad`
+
+## What the Scaffold Command Does
+
+- Clones `apps/<template>` to `apps/<slug>`.
+- Updates app package name to `@fastbridge/<slug>`.
+- Sets `dev`/`build` scripts to call `prepare-env` with your slug.
+- Sets Vite default base path in `apps/<slug>/vite.config.ts`.
+- Applies default text branding updates in `apps/<slug>/get-config.ts`.
+- Creates/renames env file to `apps/<slug>/.env.<slug>`.
+- Appends and sorts entry in `chains.config.json`.
+- Runs `pnpm chains:sync`.
+
+## Post-Scaffold Checklist
+
+1. Update env values in `apps/<slug>/.env.<slug>`.
+Important keys include chain IDs, RPC URLs, explorer URL, colors, token defaults, and metadata.
+
+2. Tune behavior flags in `apps/<slug>/src/runtime.ts`.
+Use this for chain-specific UX/logic differences.
+
+3. Add or update chain assets in `apps/<slug>/public`.
+
+4. Smoke test locally:
+
+```bash
+pnpm --filter @fastbridge/<slug> dev
+pnpm --filter @fastbridge/<slug> build
+pnpm dev:all
+```
+
+5. Export deployment env:
+
+```bash
+pnpm vercel:env
+```
+
+Then sync the generated `<SLUG>_...` vars into your deployment provider.
+
+## Manual Path (When Not Using `chain:add`)
+
+If you edit chain list or app folders manually, always run:
+
+```bash
+pnpm chains:sync
+```
+
+This updates:
+- `apps/root/package.json` workspace devDependencies for all chain apps.
+- `turbo.json` `globalEnv` based on `.env.<slug>` keys.
+
+## Validation Before Merge
+
+- `chains.config.json` has correct `slug`, `basePath`, `appDir`.
+- `apps/<slug>/vite.config.ts` base path matches chain `basePath`.
+- `apps/<slug>/src/runtime.ts` exports valid `appConfig` and `chainFeatures`.
+- Root landing shows chain card correctly (`apps/root/src/chains.ts` reads `chains.config.json`).
+- `pnpm build:all` succeeds and chain bundle appears in `apps/root/public/<slug>`.
+
+## Common Pitfalls
+
+- Missing prefixed env vars in CI/deploy causes fallback defaults in `get-config.ts`.
+- Inconsistent `basePath` causes asset loading issues.
+- Adding new env keys without running `pnpm chains:sync` causes stale turbo env tracking.
diff --git a/docs/architecture.md b/docs/architecture.md
new file mode 100644
index 0000000..643339e
--- /dev/null
+++ b/docs/architecture.md
@@ -0,0 +1,130 @@
+# Fast Bridge Architecture
+
+This document explains how the monorepo is structured, how runtime configuration is injected, and which invariants keep multi-chain development maintainable.
+
+## Goals
+
+- Keep shared bridge logic in one place.
+- Keep chain apps as thin runtime wrappers.
+- Support chain-specific behavior without reintroducing copy-paste.
+- Make adding new chains predictable and scriptable.
+
+## Repository Layout
+
+- `packages/fast-bridge-app`
+Shared React app logic, components, hooks, and styles for all chains.
+
+- `apps/<slug>`
+Thin chain wrappers. Each app mostly provides:
+  - `get-config.ts` (env-driven app config)
+  - `src/runtime.ts` (`appConfig` + `chainFeatures` exports)
+  - `src/main.tsx` (boots shared app)
+  - chain-specific `public/` assets and `.env.<slug>`
+
+- `apps/root`
+Landing app that lists chains from `chains.config.json` and serves built bundles copied into `apps/root/public/<slug>`.
+
+- `chains.config.json`
+Registry of chains for scaffold/dev/build/root listing.
+
+- `scripts/*`
+Automation for env preparation, chain sync, chain scaffolding, dev orchestration, and bundle collection.
+
+## Runtime Injection Model
+
+Every chain app resolves shared imports with aliases in `apps/<slug>/vite.config.ts` and `apps/<slug>/tsconfig.app.json`:
+
+- `@/*` -> `../../packages/fast-bridge-app/src/*`
+- `@fastbridge/runtime` -> `./src/runtime.ts`
+
+That means shared code can do:
+
+```ts
+import { appConfig, chainFeatures } from "@fastbridge/runtime";
+```
+
+and receive chain-specific values from the current app wrapper.
+
+## Configuration Layers
+
+### 1) Chain Registry (`chains.config.json`)
+
+Used for:
+- Root landing chain cards.
+- `dev:all` dynamic package filtering.
+- Scaffolding and sync scripts.
+
+### 2) Env-driven App Config (`apps/<slug>/get-config.ts`)
+
+Defines chain identity and brand values (IDs, RPCs, metadata, colors, logos, SEO metadata). Runtime source is `.env.<slug>` locally or `<SLUG>_` prefixed env vars in deployment.
+
+### 3) Behavior Flags (`apps/<slug>/src/runtime.ts`)
+
+`chainFeatures` controls behavior differences without forking shared logic (examples: promo banners, token logo overrides, post-bridge wallet actions, and chain-specific page/support content).
+
+Source of truth for feature contract:
+- `packages/fast-bridge-app/src/types/runtime.ts`
+
+## Build and Env Flow
+
+### Local and CI chain env preparation
+
+- `scripts/prepare-env.mjs <slug>`
+  - If `apps/<slug>/.env.<slug>` exists, copy to `.env.production` and `.env.local`.
+  - Else read `<SLUG>_` prefixed process env vars and write stripped `VITE_*` keys.
+
+### Multi-chain dependency/env sync
+
+- `scripts/sync-chains.mjs`
+  - Ensures `apps/root/package.json` has all `@fastbridge/<slug>` workspace devDependencies.
+  - Updates `turbo.json` `globalEnv` from `.env.<slug>` keys (prefixed).
+
+### Scaffold
+
+- `scripts/chains-add.mjs`
+  - Clones a template app (default: `monad`).
+  - Renames package and scripts.
+  - Adds chain entry to `chains.config.json`.
+  - Runs `chains:sync` automatically.
+
+### Build output composition
+
+- `apps/root` build runs `scripts/collect-chains.mjs` before Vite build.
+- `collect-chains` copies each chain `dist` into `apps/root/public/<slug>`.
+
+### Deployment env export
+
+- `scripts/build-vercel-env.mjs` aggregates `.env.<slug>` files into `<SLUG>_KEY=VALUE` lines for deployment systems.
+
+## Key Invariants
+
+- Shared logic belongs in `packages/fast-bridge-app/src/**`.
+- Chain wrappers should stay thin. Prefer runtime flags over app forks.
+- Bridge intent lifecycle is input-driven: when amount/token/recipient/chain changes after an intent exists, shared flow must invalidate the current intent and return status to `idle` so a fresh intent can be created. Do not leave the flow in `executing` after invalidation.
+- Runtime-imported image URLs can be root-relative (`/x.svg`) but should be normalized with `withBasePath(...)` in shared code paths.
+- Tailwind must scan shared and wrapper sources:
+  - `packages/fast-bridge-app/src/index.css` uses `@source` directives.
+  - If files move, update these patterns.
+- If `.env.<slug>` keys change, run `pnpm chains:sync`.
+
+## Request/Build Flow Diagram
+
+```mermaid
+flowchart LR
+  A["apps/<slug>/src/main.tsx"] --> B["packages/fast-bridge-app/src/bootstrap.tsx"]
+  B --> C["shared components/hooks"]
+  C --> D["import @fastbridge/runtime"]
+  D --> E["apps/<slug>/src/runtime.ts"]
+  E --> F["apps/<slug>/get-config.ts + .env.<slug>"]
+
+  G["pnpm build:all"] --> H["chain app dist outputs"]
+  H --> I["scripts/collect-chains.mjs"]
+  I --> J["apps/root/public/<slug>"]
+  J --> K["apps/root/dist"]
+```
+
+## Where to Go Next
+
+- Chain onboarding details: `docs/adding-chains.md`
+- Behavior customization playbook: `docs/customization.md`
+- Agent operating conventions: `AGENTS.md`
diff --git a/docs/customization.md b/docs/customization.md
new file mode 100644
index 0000000..32319ef
--- /dev/null
+++ b/docs/customization.md
@@ -0,0 +1,174 @@
+# Chain Customization Playbook
+
+This guide explains how to implement chain-specific behavior at the same level as MegaETH and beyond, without reintroducing duplicated apps.
+
+## Customization Layers
+
+Use the lightest layer that solves the requirement.
+
+### Layer 1: Env/App Config (`appConfig`)
+
+Location:
+- `apps/<slug>/get-config.ts`
+- `apps/<slug>/.env.<slug>`
+
+Use for:
+- Chain identity and metadata.
+- RPC/explorer settings.
+- Brand colors and labels.
+- Default token/network values.
+
+### Layer 2: Behavior Flags (`chainFeatures`)
+
+Location:
+- `apps/<slug>/src/runtime.ts`
+- Type contract in `packages/fast-bridge-app/src/types/runtime.ts`
+
+Use for:
+- UI behavior toggles.
+- Per-chain logic branch selectors.
+- Feature differences like MegaETH promo, fee logic, wallet init timing.
+
+### Layer 3: New Shared Extension Points
+
+When existing flags are not enough:
+1. Add a new field to `ChainFeatures` and `defaultChainFeatures`.
+2. Consume it in shared code under `packages/fast-bridge-app/src/**`.
+3. Set per-chain values in each `apps/<slug>/src/runtime.ts`.
+
+This keeps one shared code path while supporting arbitrary chain differences.
+
+## Existing `chainFeatures` Flags
+
+Source of truth:
+- `packages/fast-bridge-app/src/types/runtime.ts`
+
+Current behavior map:
+
+- `analyticsFastBridgeKey`
+Used in PostHog tracking payload.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts`.
+
+- `maxBridgeAmount`
+Max allowed amount gate and default.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts` and `packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx`.
+
+- `walletInitDelayMs`
+Delays Nexus SDK auto-init after wallet connect.
+Consumed in `packages/fast-bridge-app/src/components/wallet-connect.tsx`.
+
+- `showFluffeyMascot`, `showPromoBanner`, `promoBannerLine1`, `promoBannerLine2`, `promoBannerImageUrl`
+Controls promo hero treatment (MegaETH pattern).
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx`.
+
+- `pageDescription`, `showSupportCta`, `supportCtaHref`, `supportCtaLine1`, `supportCtaLine2`
+Controls chain-specific page-level content and optional support CTA in the shared app shell.
+Consumed in `packages/fast-bridge-app/src/app.tsx`.
+
+- `postBridgeWatchAsset`
+Triggers optional wallet asset watch flow after a successful bridge for specific destination chain/token pairs.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx`.
+
+- `mapUsdmDisplaySymbolToUsdc`, `mapUsdmToUsdcBalance`
+Display and balance mapping behavior for USDM.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts`, `packages/fast-bridge-app/src/components/fast-bridge/components/fee-breakdown.tsx`, and `packages/fast-bridge-app/src/components/fast-bridge/components/source-breakdown.tsx`.
+
+- `tokenLogoOverrideBySymbol`
+Overrides token logo URLs by symbol at runtime.
+Consumed in `packages/fast-bridge-app/src/components/nexus/nexus-provider.tsx` and `packages/fast-bridge-app/src/components/view-history/view-history.tsx`.
+
+- `denyIntentOnReset`
+Controls intent reset behavior after flow interruption.
+When a user edits bridge inputs after an intent exists, shared flow invalidates that intent and transitions back to `idle` before re-fetching; this flag controls whether `deny()` is called during that reset.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts`.
+
+- `tokenDenyListByChainId`
+Per-chain token filtering in token selector.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/components/token-select.tsx`.
+
+- `allowanceLogoOverrideByChainId`
+Overrides chain logos in allowance modal.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/components/allowance-modal.tsx`.
+
+- `amountInputUseCalculatedMaxHeader`, `amountInputShowDestinationBadge`, `amountInputUseSourceSymbolInBreakdown`, `hideMegaethSourceForUsdm`
+Amount/balance-breakdown display behavior.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/components/amount-input.tsx`.
+
+- `feeBreakdownHideGasSupplied`, `feeBreakdownKeepZeroRows`, `feeBreakdownZeroForNonCaGasOnDestinationId`
+Fee rows and zero-fee behavior.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/components/fee-breakdown.tsx`.
+
+- `dialogShowCloseButton`
+Transaction dialog chrome behavior.
+Consumed in `packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx`.
+
+## MegaETH-Level Example
+
+`apps/megaeth/src/runtime.ts` demonstrates:
+- higher bridge cap (`maxBridgeAmount: 5000`)
+- delayed wallet init (`walletInitDelayMs: 500`)
+- chain-specific page description + support CTA
+- optional post-bridge wallet asset add flow
+- USDM behavior remapping
+- fee breakdown row overrides
+- dialog close button disabled
+
+Use this as the reference pattern for richer chain-specific behavior.
+
+## How to Add a New Customization (Beyond Current Flags)
+
+### Step 1: Extend type contract
+
+Edit `packages/fast-bridge-app/src/types/runtime.ts`:
+
+```ts
+export interface ChainFeatures {
+  ...
+  showExperimentalNotice?: boolean;
+}
+
+export const defaultChainFeatures: ChainFeatures = {
+  ...
+  showExperimentalNotice: false,
+};
+```
+
+### Step 2: Consume in shared code
+
+Add guarded logic in shared component/hook:
+
+```tsx
+import { chainFeatures } from "@fastbridge/runtime";
+
+{chainFeatures.showExperimentalNotice && <ExperimentalNotice />}
+```
+
+### Step 3: Configure per chain
+
+Set the flag in each chain runtime file (`apps/<slug>/src/runtime.ts`):
+
+```ts
+export const chainFeatures: ChainFeatures = {
+  ...,
+  showExperimentalNotice: true,
+};
+```
+
+### Step 4: Validate across chains
+
+```bash
+pnpm --filter @fastbridge/<slug> dev
+pnpm build:all
+```
+
+## Asset and Base Path Rules
+
+- `appConfig` image URLs can be external URLs or root-relative paths.
+- For runtime image URLs in shared React code, call `withBasePath(...)` from `packages/fast-bridge-app/src/lib/utils.ts` to support subpath hosting (`/monad/`, `/citrea/`, etc.).
+
+## Decision Rules for Maintainers
+
+- If only one chain differs and behavior is small: add/consume a flag.
+- If multiple related flags appear: group them under a coherent feature name.
+- If logic becomes deeply chain-specific and hard to read: create a strategy/helper in shared code, selected by `chainFeatures.slug` or explicit feature fields.
+- Do not copy shared components back into `apps/<slug>/src`.
diff --git a/docs/monorepo.md b/docs/monorepo.md
index 2bf7658..e360ec4 100644
--- a/docs/monorepo.md
+++ b/docs/monorepo.md
@@ -1,44 +1,11 @@
-# Fast Bridge Monorepo Plan
+# Monorepo Notes
 
-## Layout
-- `apps/root` – landing that lists chains and serves static bundles under subpaths.
-- `apps/monad` – bridge app (Vite) mounted at `/monad/`.
-- `apps/megaeth` – bridge app (Vite) mounted at `/megaeth/`.
-- `apps/citrea` – bridge app (Vite) mounted at `/citrea/`.
-- `chains.config.json` – source of truth for chain slugs, base paths, and app dirs.
-- `scripts/prepare-env.mjs` – filters env vars by prefix and writes `.env.production` for a chain app.
-- `scripts/collect-chains.mjs` – copies each chain app’s `dist` into `apps/root/public/<slug>` before building the root app.
-- `scripts/sync-chains.mjs` – keeps `apps/root` devDependencies in sync with chains and updates `turbo.json` globalEnv from `.env.<slug>` keys.
-- `pnpm-workspace.yaml` + `turbo.json` – workspace + pipeline wiring (root depends on chain builds via workspace devDependency).
+This file now points to the canonical documentation set.
 
-## Env strategy (per-chain prefixes)
-- In Vercel, set variables with prefixes per chain: e.g. `MONAD_VITE_CONFIG_CHAIN_ID`, `MONAD_VITE_WALLET_CONNECT_ID`, etc. Run `pnpm chains:sync` after adding `.env.<slug>` files to propagate new keys into `turbo.json`.
-- `prepare-env.mjs <slug>` strips the prefix and writes `VITE_*` keys to `apps/<slug>/.env.production` so Vite exposes only that chain’s vars.
-- For local dev, you can drop a `.env.monad` file in `apps/monad` (or set shell envs) and skip the script.
+- Main overview: `README.md`
+- Architecture details: `docs/architecture.md`
+- New chain onboarding: `docs/adding-chains.md`
+- Chain customization playbook: `docs/customization.md`
+- Agent workflow: `AGENTS.md`
 
-## Build/serve
-- Install once at repo root: `pnpm install`.
-- Dev root landing: `pnpm --filter root dev` (or `pnpm dev:root` at root package).
-- Dev monad app: `pnpm --filter @fastbridge/monad dev`.
-- Full build: `pnpm build:all` (runs Turborepo, builds chain apps, copies dists, builds root). Root `build` script calls `collect-chains` before `vite build`.
-- Local env options:
-  - Drop per-chain files: `apps/monad/.env.monad`, `apps/megaeth/.env.megaeth`, etc. The build prep script will copy them to `.env.production` automatically.
-  - Or export prefixed vars and rely on the prep script to strip prefixes: `source scripts/set-sample-env.sh` as a starting point, then override with real RPC/IDs.
-
-## Adding a new chain app
-1) Copy an existing chain app to `apps/<slug>` and update its `package.json` name, default base path, config defaults, and branding.
-2) Add an entry to `chains.config.json` with `slug`, `name`, `description`, `basePath`, and `appDir`.
-3) Prefix env vars in Vercel with `<SLUG>_` and ensure the app `build` script runs `node ../../scripts/prepare-env.mjs <slug> && vite build`.
-4) Run `pnpm chains:sync` to add the workspace dep to `apps/root` and refresh `turbo.json` globalEnv with the new `<SLUG>_` keys.
-5) Run `pnpm build:all` to verify the chain bundle is copied into `apps/root/public/<slug>`, then push env to Vercel via `pnpm vercel:env` and deploy.
-
-## Deployment (Vercel)
-- Single Vercel project at repo root. Build command: `pnpm build:all`; Output dir: `apps/root/dist`.
-- Rewrites (in `vercel.json` or project settings) for each chain to support SPA history:
-  - `{ "source": "/<slug>", "destination": "/<slug>/index.html" }`
-  - `{ "source": "/<slug>/(.*)", "destination": "/<slug>/index.html" }`
-- Ensure `VITE_APP_BASE_PATH` (or defaults in Vite config) matches the `basePath` in `chains.config.json` so assets load under subpaths.
-
-## Notes
-- Root app currently lists chains and links to each subpath; wallet/Nexus providers can be centralized later in a shared package and reused across chain apps.
-- Assets are copied from each chain’s `dist`; root `public` holds shared files like `faviconV2.png`.
+If these docs disagree, treat `docs/architecture.md` and `docs/customization.md` as source of truth for implementation patterns.
diff --git a/package.json b/package.json
index 290959c..f489e8d 100644
--- a/package.json
+++ b/package.json
@@ -4,14 +4,22 @@
   "private": true,
   "scripts": {
     "dev:root": "turbo run dev --filter=root",
-    "dev:all": "turbo run dev --parallel --filter=@fastbridge/monad --filter=@fastbridge/megaeth --filter=@fastbridge/citrea --filter=root",
+    "dev:all": "node scripts/dev-all.mjs",
     "build:all": "TURBO_CONCURRENCY=1 turbo run build",
     "clean": "turbo run clean --force",
     "vercel:env": "node scripts/build-vercel-env.mjs",
-    "chains:sync": "node scripts/sync-chains.mjs"
+    "chains:sync": "node scripts/sync-chains.mjs",
+    "chain:add": "node scripts/chains-add.mjs",
+    "check": "ultracite check",
+    "fix": "ultracite fix",
+    "precommit:fix-staged": "node scripts/precommit-fix-staged.mjs",
+    "prepare": "husky"
   },
   "packageManager": "pnpm@9.0.0",
   "devDependencies": {
-    "turbo": "^2.7.5"
+    "@biomejs/biome": "2.4.0",
+    "husky": "^9.1.7",
+    "turbo": "^2.7.5",
+    "ultracite": "7.2.3"
   }
 }
diff --git a/packages/fast-bridge-app/package.json b/packages/fast-bridge-app/package.json
new file mode 100644
index 0000000..193fad8
--- /dev/null
+++ b/packages/fast-bridge-app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@fastbridge/fast-bridge-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@avail-project/nexus-core": "github:availproject/nexus-sdk#fix/usdc-permit-issue-on-delegation",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@rainbow-me/rainbowkit": "^2.2.8",
+    "@tailwindcss/vite": "^4.1.16",
+    "@tanstack/react-query": "^5.90.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "connectkit": "^1.9.1",
+    "decimal.js": "^10.6.0",
+    "lucide-react": "^0.544.0",
+    "next-themes": "^0.4.6",
+    "posthog-js": "^1.336.4",
+    "react": "19.2.2",
+    "react-dom": "19.2.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "viem": "^2.37.9",
+    "vite-plugin-node-polyfills": "^0.24.0",
+    "wagmi": "^2.17.5",
+    "motion": "^12.29.2",
+    "tw-animate-css": "^1.4.0"
+  }
+}
diff --git a/packages/fast-bridge-app/src/app.tsx b/packages/fast-bridge-app/src/app.tsx
new file mode 100644
index 0000000..c559bc2
--- /dev/null
+++ b/packages/fast-bridge-app/src/app.tsx
@@ -0,0 +1,77 @@
+import { appConfig, chainFeatures } from "@fastbridge/runtime";
+import { motion } from "motion/react";
+import FastBridgeShowcase from "@/components/fast-bridge-showcase";
+import HeroSection from "@/components/hero-section";
+import Navbar from "@/components/navbar";
+import NexusProvider from "@/components/nexus/nexus-provider";
+import { Toaster } from "@/components/ui/sonner";
+import Web3Provider from "@/providers/web3-provider";
+
+export default function App() {
+  return (
+    <Web3Provider>
+      <NexusProvider
+        config={{
+          // network: {
+          //   NETWORK_HINT: Environment.CERISE,
+          //   COSMOS_GRPC_URL: "https://debugnet.availproject.org/grpc-web/",
+          //   COSMOS_REST_URL: "https://debugnet.availproject.org",
+          //   COSMOS_RPC_URL: "https://debugnet.availproject.org:26650",
+          //   COSMOS_WS_URL: "wss://debugnet.availproject.org:26650/websocket",
+          //   INTENT_EXPLORER_URL:
+          //     "https://explorer.nexus-cerise.availproject.org",
+          //   VSC_BASE_URL: "https://vsc-debugnet.availproject.org",
+          //   VSC_WS_URL: "wss://vsc-debugnet.availproject.org",
+          // },
+          network: "mainnet",
+          debug: true,
+        }}
+      >
+        <div className="min-h-screen w-full overflow-x-hidden font-sans">
+          <Navbar />
+          <div className="flex min-h-full w-full max-w-full gap-4 overflow-x-hidden md:gap-16">
+            <div
+              className="absolute inset-0 z-0"
+              style={{
+                background: `radial-gradient(125% 125% at 50% 10%, #fff 50%, ${appConfig.primaryColor} 125%)`,
+              }}
+            />
+            <main className="flex min-w-0 max-w-full flex-1 flex-col gap-8 px-4 py-12">
+              <HeroSection />
+              <FastBridgeShowcase />
+              {chainFeatures.pageDescription && (
+                <div className="mx-auto mt-8 max-w-2xl text-center text-[#19191A]/80 text-sm leading-relaxed">
+                  <p>{chainFeatures.pageDescription}</p>
+                </div>
+              )}
+            </main>
+          </div>
+        </div>
+        <Toaster />
+        {chainFeatures.showSupportCta && chainFeatures.supportCtaHref && (
+          <div className="sticky bottom-4 left-4 z-100 ml-4 inline-flex flex-wrap items-center justify-start gap-3">
+            <motion.a
+              animate={{ opacity: 1, x: 0 }}
+              className="inline-flex min-h-11 items-center gap-2 rounded border border-[#19191A] bg-transparent px-[14px] py-2 font-medium text-[#19191A] text-sm no-underline transition-[transform,background-color,border-color,box-shadow] duration-200 hover:bg-[#19191A] hover:text-white focus-visible:bg-[#19191A] focus-visible:text-white md:justify-self-start"
+              href={chainFeatures.supportCtaHref}
+              initial={{ opacity: 0, x: -10 }}
+              rel="noopener noreferrer"
+              target="_blank"
+              transition={{ delay: 0.85 }}
+              whileHover={{
+                scale: 1.05,
+                y: -2,
+              }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <span>
+                {chainFeatures.supportCtaLine1 ?? "Reach out to us if"} <br />
+                {chainFeatures.supportCtaLine2 ?? "you face any issues"}
+              </span>
+            </motion.a>
+          </div>
+        )}
+      </NexusProvider>
+    </Web3Provider>
+  );
+}
diff --git a/packages/fast-bridge-app/src/bootstrap.tsx b/packages/fast-bridge-app/src/bootstrap.tsx
new file mode 100644
index 0000000..302eec0
--- /dev/null
+++ b/packages/fast-bridge-app/src/bootstrap.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./app";
+import { initPostHog } from "./lib/posthog";
+import "./index.css";
+
+const cleanupWalletConnectSubscription = () => {
+  try {
+    const dbName = "WALLET_CONNECT_V2_INDEXED_DB";
+    const deleteRequest = indexedDB.deleteDatabase(dbName);
+
+    deleteRequest.onsuccess = () => {
+      console.log(
+        "[WalletConnect] Database deleted successfully, will be recreated fresh"
+      );
+    };
+
+    deleteRequest.onerror = () => {
+      console.debug(
+        "[WalletConnect] Database deletion failed or DB doesn't exist"
+      );
+    };
+
+    deleteRequest.onblocked = () => {
+      console.debug("[WalletConnect] Database deletion blocked, may be in use");
+    };
+  } catch (error) {
+    console.debug("[WalletConnect] Cleanup skipped:", error);
+  }
+};
+
+export function bootstrapApp() {
+  initPostHog();
+  cleanupWalletConnectSubscription();
+
+  const rootElement = document.getElementById("root");
+  if (!rootElement) {
+    throw new Error("Root element with id 'root' was not found.");
+  }
+
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/packages/fast-bridge-app/src/components/common/components/error-boundary.tsx b/packages/fast-bridge-app/src/components/common/components/error-boundary.tsx
new file mode 100644
index 0000000..a7e0424
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/components/error-boundary.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+  hasError: boolean;
+}
+
+/**
+ * Error boundary component that catches JavaScript errors in child components.
+ * Displays a fallback UI instead of crashing the entire widget.
+ *
+ * @example
+ * <ErrorBoundary
+ *   fallback={<div>Something went wrong</div>}
+ *   onError={(error) => console.error(error)}
+ * >
+ *   <MyComponent />
+ * </ErrorBoundary>
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center p-6 text-center">
+          <div className="mb-2 font-medium text-destructive">
+            Something went wrong
+          </div>
+          <p className="mb-4 text-muted-foreground text-sm">
+            An unexpected error occurred. Please try again.
+          </p>
+          <button
+            className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90"
+            onClick={() => this.setState({ hasError: false, error: null })}
+            type="button"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * A more specific error boundary for widget containers with reset capability.
+ */
+interface WidgetErrorBoundaryProps extends ErrorBoundaryProps {
+  onReset?: () => void;
+  widgetName?: string;
+}
+
+export class WidgetErrorBoundary extends Component<
+  WidgetErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: WidgetErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error(
+      `WidgetErrorBoundary [${this.props.widgetName ?? "Unknown"}]:`,
+      error,
+      errorInfo
+    );
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleReset = (): void => {
+    this.props.onReset?.();
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/5 p-6 text-center">
+          <div className="mb-2 font-medium text-destructive">
+            {this.props.widgetName
+              ? `${this.props.widgetName} encountered an error`
+              : "Widget error"}
+          </div>
+          <p className="mb-4 text-muted-foreground text-sm">
+            {this.state.error?.message || "An unexpected error occurred."}
+          </p>
+          <button
+            className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90"
+            onClick={this.handleReset}
+            type="button"
+          >
+            Reset widget
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/apps/monad/src/components/common/hooks/useDebouncedCallback.ts b/packages/fast-bridge-app/src/components/common/hooks/use-debounced-callback.ts
similarity index 64%
rename from apps/monad/src/components/common/hooks/useDebouncedCallback.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-debounced-callback.ts
index d969b5a..2c6818d 100644
--- a/apps/monad/src/components/common/hooks/useDebouncedCallback.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-debounced-callback.ts
@@ -1,19 +1,19 @@
-import { useEffect, useMemo, useRef } from "react";
-import { useStableCallback } from "./useStableCallback";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useStableCallback } from "./use-stable-callback";
 
-type AnyFn = (...args: any[]) => any;
+type UnknownFn = (...args: unknown[]) => unknown;
 
-export interface Debounced<T extends AnyFn> {
-  (...args: Parameters<T>): void;
+export interface Debounced<T extends UnknownFn> {
   cancel: () => void;
   flush: () => void;
+  (...args: Parameters<T>): void;
 }
 
 /**
  * Returns a debounced function that delays invoking `fn` until after `delay`
  * milliseconds have elapsed since the last call.
  */
-export function useDebouncedCallback<T extends AnyFn>(
+export function useDebouncedCallback<T extends UnknownFn>(
   fn: T,
   delay: number
 ): Debounced<T> {
@@ -21,33 +21,37 @@ export function useDebouncedCallback<T extends AnyFn>(
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const lastArgsRef = useRef<Parameters<T> | null>(null);
 
-  const cancel = () => {
+  const cancel = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
-  };
+  }, []);
 
-  const flush = () => {
+  const flush = useCallback(() => {
     if (timerRef.current && lastArgsRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
-       
+
       latest(...lastArgsRef.current);
       lastArgsRef.current = null;
     }
-  };
+  }, [latest]);
 
   // cancel when delay changes/unmounts
-  useEffect(() => cancel, [delay]);
+  useEffect(() => cancel, [cancel]);
 
   return useMemo(() => {
     const debounced = ((...args: Parameters<T>) => {
       lastArgsRef.current = args;
       cancel();
       timerRef.current = setTimeout(() => {
-         
-        latest(...lastArgsRef.current!);
+        const pendingArgs = lastArgsRef.current;
+        if (!pendingArgs) {
+          timerRef.current = null;
+          return;
+        }
+        latest(...pendingArgs);
         lastArgsRef.current = null;
         timerRef.current = null;
       }, delay);
@@ -55,6 +59,5 @@ export function useDebouncedCallback<T extends AnyFn>(
     debounced.cancel = cancel;
     debounced.flush = flush;
     return debounced;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [delay, latest]);
+  }, [cancel, delay, flush, latest]);
 }
diff --git a/apps/monad/src/components/common/hooks/useDebouncedValue.ts b/packages/fast-bridge-app/src/components/common/hooks/use-debounced-value.ts
similarity index 73%
rename from apps/monad/src/components/common/hooks/useDebouncedValue.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-debounced-value.ts
index 3df2f0b..6b6506d 100644
--- a/apps/monad/src/components/common/hooks/useDebouncedValue.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-debounced-value.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useDebouncedCallback } from "./useDebouncedCallback";
+import { useDebouncedCallback } from "./use-debounced-callback";
 
 /**
  * Derives a debounced value from an input value and delay.
@@ -11,8 +11,7 @@ export function useDebouncedValue<T>(value: T, delay: number): T {
   useEffect(() => {
     setter(value);
     return setter.cancel;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, delay]);
+  }, [setter, value]);
 
   return debounced;
 }
diff --git a/apps/citrea/src/components/common/hooks/useInterval.ts b/packages/fast-bridge-app/src/components/common/hooks/use-interval.ts
similarity index 88%
rename from apps/citrea/src/components/common/hooks/useInterval.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-interval.ts
index 2287075..fa21b5f 100644
--- a/apps/citrea/src/components/common/hooks/useInterval.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-interval.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useStableCallback } from "./useStableCallback";
+import { useStableCallback } from "./use-stable-callback";
 
 interface UseIntervalOptions {
   enabled?: boolean;
@@ -20,7 +20,9 @@ export function useInterval(
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    if (!enabled || delay == null) return;
+    if (!enabled || delay == null) {
+      return;
+    }
     if (immediate) {
       savedCallback();
     }
diff --git a/packages/fast-bridge-app/src/components/common/hooks/use-latest.ts b/packages/fast-bridge-app/src/components/common/hooks/use-latest.ts
new file mode 100644
index 0000000..c230bc2
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-latest.ts
@@ -0,0 +1,22 @@
+import { useLayoutEffect, useRef } from "react";
+
+/**
+ * Returns a ref that always contains the latest value.
+ * Useful for accessing current values in callbacks without causing re-renders.
+ *
+ * @example
+ * const countRef = useLatest(count);
+ * const handleClick = useCallback(() => {
+ *   console.log(countRef.current); // Always the latest count
+ * }, []); // No dependency needed!
+ */
+export function useLatest<T>(value: T): React.MutableRefObject<T> {
+  const ref = useRef<T>(value);
+
+  // Use useLayoutEffect to update synchronously before any effects run
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+
+  return ref;
+}
diff --git a/apps/citrea/src/components/common/hooks/useNexusError.ts b/packages/fast-bridge-app/src/components/common/hooks/use-nexus-error.ts
similarity index 59%
rename from apps/citrea/src/components/common/hooks/useNexusError.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-nexus-error.ts
index b14851e..52a8d3f 100644
--- a/apps/citrea/src/components/common/hooks/useNexusError.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-nexus-error.ts
@@ -8,15 +8,14 @@ function handler(err: unknown) {
       context: err?.data?.context,
       details: err?.data?.details,
     };
-  } else {
-    console.error("Unexpected error:", err);
-    return {
-      code: "unexpected_error",
-      message: "Oops! Something went wrong. Please try again.",
-      context: undefined,
-      details: undefined,
-    };
   }
+  console.error("Unexpected error:", err);
+  return {
+    code: "unexpected_error",
+    message: "Oops! Something went wrong. Please try again.",
+    context: undefined,
+    details: undefined,
+  };
 }
 export function useNexusError() {
   return handler;
diff --git a/apps/monad/src/components/common/hooks/usePolling.ts b/packages/fast-bridge-app/src/components/common/hooks/use-polling.ts
similarity index 81%
rename from apps/monad/src/components/common/hooks/usePolling.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-polling.ts
index 8b35ed8..0f97319 100644
--- a/apps/monad/src/components/common/hooks/usePolling.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-polling.ts
@@ -1,6 +1,6 @@
 import { useRef } from "react";
-import { useInterval } from "./useInterval";
-import { useStableCallback } from "./useStableCallback";
+import { useInterval } from "./use-interval";
+import { useStableCallback } from "./use-stable-callback";
 
 /**
  * Declarative polling with in-flight protection (no overlap).
@@ -14,7 +14,9 @@ export function usePolling(
 ) {
   const inFlightRef = useRef(false);
   const wrapped = useStableCallback(async () => {
-    if (inFlightRef.current) return;
+    if (inFlightRef.current) {
+      return;
+    }
     try {
       inFlightRef.current = true;
       await fn();
diff --git a/apps/megaeth/src/components/common/hooks/useStableCallback.ts b/packages/fast-bridge-app/src/components/common/hooks/use-stable-callback.ts
similarity index 99%
rename from apps/megaeth/src/components/common/hooks/useStableCallback.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-stable-callback.ts
index b6d8cb2..102ed2d 100644
--- a/apps/megaeth/src/components/common/hooks/useStableCallback.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-stable-callback.ts
@@ -10,7 +10,6 @@ export function useStableCallback<Args extends readonly unknown[], Return>(
   const fnRef = useRef<(...args: Args) => Return>(fn);
   fnRef.current = fn;
 
-   
   const stable = useCallback(
     ((...args: Args) => {
       return fnRef.current(...args);
diff --git a/apps/monad/src/components/common/hooks/useStopwatch.ts b/packages/fast-bridge-app/src/components/common/hooks/use-stopwatch.ts
similarity index 77%
rename from apps/monad/src/components/common/hooks/useStopwatch.ts
rename to packages/fast-bridge-app/src/components/common/hooks/use-stopwatch.ts
index 9350047..e1fa1d8 100644
--- a/apps/monad/src/components/common/hooks/useStopwatch.ts
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-stopwatch.ts
@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 interface UseStopwatchOptions {
-  running?: boolean;
   intervalMs?: number;
+  running?: boolean;
 }
 
 /**
@@ -14,24 +14,26 @@ export function useStopwatch(options: UseStopwatchOptions = {}) {
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const reset = () => {
+  const reset = useCallback(() => {
     setElapsedSeconds(0);
-  };
+  }, []);
 
-  const stop = () => {
+  const stop = useCallback(() => {
     if (timerRef.current) {
       clearInterval(timerRef.current);
       timerRef.current = null;
     }
-  };
+  }, []);
 
-  const start = () => {
-    if (timerRef.current) return;
+  const start = useCallback(() => {
+    if (timerRef.current) {
+      return;
+    }
     timerRef.current = setInterval(() => {
       // 1s == 1000ms; we add fractional seconds per tick
       setElapsedSeconds((prev) => prev + intervalMs / 1000);
     }, intervalMs);
-  };
+  }, [intervalMs]);
 
   useEffect(() => {
     if (running) {
@@ -40,8 +42,7 @@ export function useStopwatch(options: UseStopwatchOptions = {}) {
       stop();
     }
     return stop;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [running, intervalMs]);
+  }, [running, start, stop]);
 
   return {
     seconds: elapsedSeconds,
diff --git a/packages/fast-bridge-app/src/components/common/hooks/use-transaction-execution.ts b/packages/fast-bridge-app/src/components/common/hooks/use-transaction-execution.ts
new file mode 100644
index 0000000..6b78914
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-transaction-execution.ts
@@ -0,0 +1,489 @@
+import {
+  type BridgeStepType,
+  NEXUS_EVENTS,
+  type NexusSDK,
+  type OnAllowanceHookData,
+  type OnIntentHookData,
+} from "@avail-project/nexus-core";
+import {
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+  useCallback,
+  useRef,
+} from "react";
+import type { TransactionStatus } from "../tx/types";
+import type {
+  SourceSelectionValidation,
+  TransactionFlowEvent,
+  TransactionFlowExecutor,
+  TransactionFlowInputs,
+} from "../types/transaction-flow";
+
+interface NexusErrorInfo {
+  code: string;
+  context?: unknown;
+  details?: unknown;
+  message: string;
+}
+
+type NexusErrorHandler = (error: unknown) => NexusErrorInfo;
+
+interface UseTransactionExecutionProps {
+  allAvailableSourceChainIds: number[];
+  allowance: RefObject<OnAllowanceHookData | null>;
+  areInputsValid: boolean;
+  configuredMaxAmount?: string;
+  denyIntentOnReset?: boolean;
+  executeTransaction: TransactionFlowExecutor;
+  fetchBalance: () => Promise<void>;
+  getMaxForCurrentSelection: () => Promise<string | undefined>;
+  handleNexusError: NexusErrorHandler;
+  inputs: TransactionFlowInputs;
+  intent: RefObject<OnIntentHookData | null>;
+  loading: boolean;
+  nexusSDK: NexusSDK | null;
+  notifyHistoryRefresh?: () => void;
+  onComplete?: (explorerUrl?: string) => void | Promise<void>;
+  onError?: (message: string) => void;
+  onStart?: () => void;
+  onStepComplete: (step: BridgeStepType) => void;
+  onStepsList: (steps: BridgeStepType[]) => void;
+  operationName: "bridge" | "transfer";
+  resetInputs: () => void;
+  resetSteps: () => void;
+  setAppliedSourceSelectionKey: Dispatch<SetStateAction<string>>;
+  setIsDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setLastExplorerUrl: Dispatch<SetStateAction<string>>;
+  setRefreshing: Dispatch<SetStateAction<boolean>>;
+  setSelectedSourceChains: Dispatch<SetStateAction<number[] | null>>;
+  setStatus: (status: TransactionStatus) => void;
+  setTxError: Dispatch<SetStateAction<string | null>>;
+  sourceChainsForSdk?: number[];
+  sourceSelection: SourceSelectionValidation;
+  sourceSelectionKey: string;
+  stopwatch: {
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+  };
+  txError: string | null;
+}
+
+export function useTransactionExecution({
+  operationName,
+  nexusSDK,
+  intent,
+  allowance,
+  inputs,
+  configuredMaxAmount,
+  allAvailableSourceChainIds,
+  sourceChainsForSdk,
+  sourceSelectionKey,
+  sourceSelection,
+  loading,
+  txError,
+  areInputsValid,
+  executeTransaction,
+  getMaxForCurrentSelection,
+  onStepsList,
+  onStepComplete,
+  resetSteps,
+  setStatus,
+  resetInputs,
+  setRefreshing,
+  setIsDialogOpen,
+  setTxError,
+  setLastExplorerUrl,
+  setSelectedSourceChains,
+  setAppliedSourceSelectionKey,
+  stopwatch,
+  handleNexusError,
+  onStart,
+  onComplete,
+  onError,
+  fetchBalance,
+  notifyHistoryRefresh,
+  denyIntentOnReset = true,
+}: UseTransactionExecutionProps) {
+  const commitLockRef = useRef(false);
+  const runIdRef = useRef(0);
+
+  const setError = useCallback(
+    (message: string, status: TransactionStatus = "error") => {
+      setTxError(message);
+      onError?.(message);
+      setStatus(status);
+    },
+    [onError, setStatus, setTxError]
+  );
+
+  const refreshIntent = async (options?: { reportError?: boolean }) => {
+    if (!intent.current) {
+      return false;
+    }
+    const activeRunId = runIdRef.current;
+    setRefreshing(true);
+    try {
+      const updated = await intent.current.refresh(sourceChainsForSdk);
+      if (activeRunId !== runIdRef.current) {
+        return false;
+      }
+      if (updated) {
+        intent.current.intent = updated;
+      }
+      setAppliedSourceSelectionKey(sourceSelectionKey);
+      return true;
+    } catch (error) {
+      if (activeRunId !== runIdRef.current) {
+        return false;
+      }
+      console.error("Transaction failed:", error);
+      if (options?.reportError) {
+        const message = "Unable to refresh source selection. Please try again.";
+        setTxError(message);
+        onError?.(message);
+      }
+      return false;
+    } finally {
+      if (activeRunId === runIdRef.current) {
+        setRefreshing(false);
+      }
+    }
+  };
+
+  const onSuccess = async (explorerUrl?: string) => {
+    stopwatch.stop();
+    setStatus("success");
+    await onComplete?.(explorerUrl);
+    intent.current = null;
+    allowance.current = null;
+    resetInputs();
+    setRefreshing(false);
+    setSelectedSourceChains(null);
+    setAppliedSourceSelectionKey("ALL");
+    await fetchBalance();
+    notifyHistoryRefresh?.();
+  };
+
+  const validateTransactionInputs = () => {
+    if (
+      !(inputs?.amount && inputs?.recipient && inputs?.chain && inputs?.token)
+    ) {
+      console.error("Missing required inputs");
+      return null;
+    }
+    if (!nexusSDK) {
+      const message = "Nexus SDK not initialized";
+      setTxError(message);
+      onError?.(message);
+      return null;
+    }
+    if (allAvailableSourceChainIds.length === 0) {
+      setError(
+        "No eligible source chains available for the selected token and destination."
+      );
+      return null;
+    }
+
+    const parsedAmount = Number(inputs.amount);
+    if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+      setError("Enter a valid amount greater than 0.");
+      return null;
+    }
+
+    return {
+      sdk: nexusSDK,
+      token: inputs.token,
+      amountReadable: inputs.amount,
+      recipient: inputs.recipient,
+      chain: inputs.chain,
+      amountBigInt: nexusSDK.convertTokenReadableAmountToBigInt(
+        inputs.amount,
+        inputs.token,
+        inputs.chain
+      ),
+    };
+  };
+
+  const isWithinConfiguredLimit = (params: {
+    amountBigInt: bigint;
+    chain: number;
+    sdk: NexusSDK;
+    token: string;
+  }) => {
+    if (!configuredMaxAmount) {
+      return true;
+    }
+    const configuredMaxRaw = params.sdk.convertTokenReadableAmountToBigInt(
+      configuredMaxAmount,
+      params.token,
+      params.chain
+    );
+    if (params.amountBigInt <= configuredMaxRaw) {
+      return true;
+    }
+    setError(
+      `Amount exceeds maximum limit of ${configuredMaxAmount} ${params.token}.`
+    );
+    return false;
+  };
+
+  const validateSelectedSourcesLimit = async (params: {
+    amountBigInt: bigint;
+    chain: number;
+    currentRunId: number;
+    sdk: NexusSDK;
+    token: string;
+  }) => {
+    const maxForCurrentSelection = await getMaxForCurrentSelection();
+    if (params.currentRunId !== runIdRef.current) {
+      return { isStale: true, isValid: false };
+    }
+    if (!maxForCurrentSelection) {
+      setError(
+        `Unable to determine max ${operationName} amount for selected sources. Please try again.`
+      );
+      return { isStale: false, isValid: false };
+    }
+    const maxForSelectionRaw = params.sdk.convertTokenReadableAmountToBigInt(
+      maxForCurrentSelection,
+      params.token,
+      params.chain
+    );
+    if (params.amountBigInt <= maxForSelectionRaw) {
+      return { isStale: false, isValid: true };
+    }
+    setError(
+      `Selected sources can provide up to ${maxForCurrentSelection} ${params.token}. Reduce amount or enable more sources.`
+    );
+    return { isStale: false, isValid: false };
+  };
+
+  const applyStepsListEvent = (event: TransactionFlowEvent) => {
+    const list = Array.isArray(event.args) ? event.args : [];
+    onStepsList(list as BridgeStepType[]);
+  };
+
+  const applyStepCompleteEvent = (event: TransactionFlowEvent) => {
+    if (
+      !Array.isArray(event.args) &&
+      "type" in event.args &&
+      event.args.type === "INTENT_HASH_SIGNED"
+    ) {
+      stopwatch.start();
+    }
+    if (!Array.isArray(event.args)) {
+      onStepComplete(event.args as BridgeStepType);
+    }
+  };
+
+  const isRunStale = (currentRunId: number) =>
+    currentRunId !== runIdRef.current;
+
+  const createOnEventHandler =
+    (currentRunId: number) => (event: TransactionFlowEvent) => {
+      if (isRunStale(currentRunId)) {
+        return;
+      }
+      if (event.name === NEXUS_EVENTS.STEPS_LIST) {
+        applyStepsListEvent(event);
+        return;
+      }
+      if (event.name === NEXUS_EVENTS.STEP_COMPLETE) {
+        applyStepCompleteEvent(event);
+      }
+    };
+
+  const handleTransactionFailure = (params: {
+    currentRunId: number;
+    error: unknown;
+  }) => {
+    if (isRunStale(params.currentRunId)) {
+      return;
+    }
+    const { message, code, context, details } = handleNexusError(params.error);
+    console.error(`Fast ${operationName} transaction failed:`, {
+      code,
+      message,
+      context,
+      details,
+    });
+    if (denyIntentOnReset) {
+      intent.current?.deny();
+    }
+    intent.current = null;
+    allowance.current = null;
+    setTxError(message);
+    onError?.(message);
+    setIsDialogOpen(false);
+    setSelectedSourceChains(null);
+    setRefreshing(false);
+    stopwatch.stop();
+    stopwatch.reset();
+    resetSteps();
+    fetchBalance().catch((error) => {
+      console.error(
+        "Failed to refresh balance after transaction error:",
+        error
+      );
+    });
+    setStatus("error");
+  };
+
+  const handleTransaction = async () => {
+    if (commitLockRef.current) {
+      return;
+    }
+    commitLockRef.current = true;
+    const currentRunId = ++runIdRef.current;
+
+    try {
+      const validated = validateTransactionInputs();
+      if (!validated) {
+        return;
+      }
+      if (
+        !isWithinConfiguredLimit({
+          amountBigInt: validated.amountBigInt,
+          chain: validated.chain,
+          sdk: validated.sdk,
+          token: validated.token,
+        })
+      ) {
+        return;
+      }
+      const sourceLimit = await validateSelectedSourcesLimit({
+        amountBigInt: validated.amountBigInt,
+        chain: validated.chain,
+        currentRunId,
+        sdk: validated.sdk,
+        token: validated.token,
+      });
+      if (sourceLimit.isStale || !sourceLimit.isValid) {
+        return;
+      }
+
+      setStatus("executing");
+      setTxError(null);
+      onStart?.();
+      setLastExplorerUrl("");
+      setAppliedSourceSelectionKey(sourceSelectionKey);
+
+      const onEvent = createOnEventHandler(currentRunId);
+
+      const transactionResult = await executeTransaction({
+        token: validated.token,
+        amount: validated.amountBigInt,
+        amountReadable: validated.amountReadable,
+        toChainId: validated.chain,
+        recipient: validated.recipient,
+        sourceChains: sourceChainsForSdk,
+        onEvent,
+      });
+
+      if (isRunStale(currentRunId)) {
+        return;
+      }
+      if (!transactionResult) {
+        throw new Error("Transaction rejected by user");
+      }
+      setLastExplorerUrl(transactionResult.explorerUrl);
+      await onSuccess(transactionResult.explorerUrl);
+    } catch (error) {
+      handleTransactionFailure({ error, currentRunId });
+    } finally {
+      commitLockRef.current = false;
+    }
+  };
+
+  const reset = () => {
+    runIdRef.current += 1;
+    if (denyIntentOnReset) {
+      intent.current?.deny();
+    }
+    intent.current = null;
+    allowance.current = null;
+    resetInputs();
+    setStatus("idle");
+    setRefreshing(false);
+    setSelectedSourceChains(null);
+    setAppliedSourceSelectionKey("ALL");
+    setLastExplorerUrl("");
+    stopwatch.stop();
+    stopwatch.reset();
+    resetSteps();
+  };
+
+  const startTransaction = () => {
+    if (!intent.current) {
+      return;
+    }
+    if (allAvailableSourceChainIds.length === 0) {
+      const message =
+        "No eligible source chains available for the selected token and destination.";
+      setTxError(message);
+      onError?.(message);
+      return;
+    }
+    if (sourceSelection.isBelowRequired && inputs?.token) {
+      const message = `Selected sources are not enough. Add ${sourceSelection.missingToProceed} ${inputs.token} more to make this transaction.`;
+      setTxError(message);
+      onError?.(message);
+      return;
+    }
+    const refreshAndAllow = async () => {
+      const refreshed = await refreshIntent({ reportError: true });
+      if (!(refreshed && intent.current)) {
+        return;
+      }
+      intent.current.allow();
+      setIsDialogOpen(true);
+      setTxError(null);
+    };
+
+    refreshAndAllow().catch((error) => {
+      const { message } = handleNexusError(error);
+      setTxError(message);
+      onError?.(message);
+    });
+  };
+
+  const commitAmount = async () => {
+    if (intent.current || loading || txError || !areInputsValid) {
+      return;
+    }
+    await handleTransaction();
+  };
+
+  const invalidatePendingExecution = useCallback(() => {
+    runIdRef.current += 1;
+    commitLockRef.current = false;
+    if (intent.current) {
+      if (denyIntentOnReset) {
+        intent.current.deny();
+      }
+      intent.current = null;
+    }
+    allowance.current = null;
+    setStatus("idle");
+    setRefreshing(false);
+    setAppliedSourceSelectionKey("ALL");
+  }, [
+    allowance,
+    denyIntentOnReset,
+    intent,
+    setAppliedSourceSelectionKey,
+    setRefreshing,
+    setStatus,
+  ]);
+
+  return {
+    refreshIntent,
+    handleTransaction,
+    startTransaction,
+    commitAmount,
+    reset,
+    invalidatePendingExecution,
+  };
+}
diff --git a/packages/fast-bridge-app/src/components/common/hooks/use-transaction-flow.ts b/packages/fast-bridge-app/src/components/common/hooks/use-transaction-flow.ts
new file mode 100644
index 0000000..eadc5a0
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/hooks/use-transaction-flow.ts
@@ -0,0 +1,664 @@
+import type {
+  BridgeStepType,
+  NexusNetwork,
+  NexusSDK,
+  OnAllowanceHookData,
+  OnIntentHookData,
+  UserAsset,
+} from "@avail-project/nexus-core";
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+import { type Address, isAddress } from "viem";
+import type { TransactionStatus } from "../tx/types";
+import { useTransactionSteps } from "../tx/use-transaction-steps";
+import type {
+  SourceCoverageState,
+  TransactionFlowExecutor,
+  TransactionFlowInputs,
+  TransactionFlowPrefill,
+  TransactionFlowType,
+} from "../types/transaction-flow";
+import {
+  buildInitialInputs,
+  clampAmountToMax,
+  formatAmountForDisplay,
+  getCoverageDecimals,
+  MAX_AMOUNT_DEBOUNCE_MS,
+  normalizeMaxAmount,
+} from "../utils/transaction-flow";
+import { useDebouncedCallback } from "./use-debounced-callback";
+import { useNexusError } from "./use-nexus-error";
+import { usePolling } from "./use-polling";
+import { useStopwatch } from "./use-stopwatch";
+import { useTransactionExecution } from "./use-transaction-execution";
+
+interface BaseTransactionFlowProps {
+  allowance: RefObject<OnAllowanceHookData | null>;
+  bridgableBalance: UserAsset[] | null;
+  denyIntentOnReset?: boolean;
+  executeTransaction: TransactionFlowExecutor;
+  fetchBalance: () => Promise<void>;
+  intent: RefObject<OnIntentHookData | null>;
+  isSourceMenuOpen?: boolean;
+  mapUsdmToUsdcBalance?: boolean;
+  maxAmount?: string | number;
+  network: NexusNetwork;
+  nexusSDK: NexusSDK | null;
+  notifyHistoryRefresh?: () => void;
+  onComplete?: (explorerUrl?: string) => void | Promise<void>;
+  onError?: (message: string) => void;
+  onStart?: () => void;
+  prefill?: TransactionFlowPrefill;
+  type: TransactionFlowType;
+}
+
+export interface UseTransactionFlowProps extends BaseTransactionFlowProps {
+  connectedAddress?: Address;
+}
+
+interface State {
+  inputs: TransactionFlowInputs;
+  status: TransactionStatus;
+}
+
+type Action =
+  | { type: "setInputs"; payload: Partial<TransactionFlowInputs> }
+  | { type: "resetInputs" }
+  | { type: "setStatus"; payload: TransactionStatus };
+
+export function useTransactionFlow(props: UseTransactionFlowProps) {
+  const {
+    type,
+    network,
+    nexusSDK,
+    intent,
+    bridgableBalance,
+    prefill,
+    onComplete,
+    onStart,
+    onError,
+    fetchBalance,
+    allowance,
+    maxAmount,
+    isSourceMenuOpen = false,
+    notifyHistoryRefresh,
+    mapUsdmToUsdcBalance = false,
+    denyIntentOnReset = true,
+    executeTransaction,
+  } = props;
+
+  const connectedAddress = props.connectedAddress;
+  const operationName = type === "bridge" ? "bridge" : "transfer";
+  const handleNexusError = useNexusError();
+  const initialState: State = {
+    inputs: buildInitialInputs({ type, network, connectedAddress, prefill }),
+    status: "idle",
+  };
+
+  function reducer(state: State, action: Action): State {
+    switch (action.type) {
+      case "setInputs":
+        return { ...state, inputs: { ...state.inputs, ...action.payload } };
+      case "resetInputs":
+        return {
+          ...state,
+          inputs: buildInitialInputs({
+            type,
+            network,
+            connectedAddress,
+            prefill,
+          }),
+        };
+      case "setStatus":
+        if (state.status === action.payload) {
+          return state;
+        }
+        return { ...state, status: action.payload };
+      default:
+        return state;
+    }
+  }
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const inputs = state.inputs;
+  const setInputs = (
+    next: TransactionFlowInputs | Partial<TransactionFlowInputs>
+  ) => {
+    const payload = next as Partial<TransactionFlowInputs>;
+    const hasActualChange = Object.entries(payload).some(
+      ([key, value]) =>
+        state.inputs[key as keyof TransactionFlowInputs] !== value
+    );
+    if (!hasActualChange) {
+      return;
+    }
+    dispatch({
+      type: "setInputs",
+      payload,
+    });
+  };
+
+  const loading = state.status === "executing";
+  const [refreshing, setRefreshing] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [txError, setTxError] = useState<string | null>(null);
+  const [lastExplorerUrl, setLastExplorerUrl] = useState<string>("");
+  const previousConnectedAddressRef = useRef<Address | undefined>(
+    connectedAddress
+  );
+  const previousSelectedTokenRef = useRef(inputs?.token);
+  const lastInvalidationKeyRef = useRef<string>("");
+  const maxAmountRequestIdRef = useRef(0);
+  const [selectedSourceChains, setSelectedSourceChains] = useState<
+    number[] | null
+  >(null);
+  const [selectedSourcesMaxAmount, setSelectedSourcesMaxAmount] = useState<
+    string | null
+  >(null);
+  const [appliedSourceSelectionKey, setAppliedSourceSelectionKey] =
+    useState("ALL");
+  const {
+    steps,
+    onStepsList,
+    onStepComplete,
+    reset: resetSteps,
+  } = useTransactionSteps<BridgeStepType>();
+  const configuredMaxAmount = useMemo(
+    () => normalizeMaxAmount(maxAmount),
+    [maxAmount]
+  );
+
+  const areInputsValid = useMemo(() => {
+    const hasToken = inputs?.token !== undefined && inputs?.token !== null;
+    const hasChain = inputs?.chain !== undefined && inputs?.chain !== null;
+    const hasAmount = Boolean(inputs?.amount) && Number(inputs?.amount) > 0;
+    const hasValidRecipient =
+      Boolean(inputs?.recipient) && isAddress(inputs.recipient as string);
+    return hasToken && hasChain && hasAmount && hasValidRecipient;
+  }, [inputs]);
+
+  const filteredBridgableBalance = useMemo(() => {
+    return bridgableBalance?.find((bal) =>
+      inputs?.token === "USDM" && mapUsdmToUsdcBalance
+        ? bal?.symbol === "USDC"
+        : bal?.symbol === inputs?.token
+    );
+  }, [bridgableBalance, inputs?.token, mapUsdmToUsdcBalance]);
+
+  const availableSources = useMemo(() => {
+    const breakdown = filteredBridgableBalance?.breakdown ?? [];
+    const destinationChainId = inputs?.chain;
+    const nonZero = breakdown.filter((source) => {
+      if (Number.parseFloat(source.balance ?? "0") <= 0) {
+        return false;
+      }
+      if (typeof destinationChainId === "number") {
+        return source.chain.id !== destinationChainId;
+      }
+      return true;
+    });
+    const decimals = filteredBridgableBalance?.decimals;
+    if (!nexusSDK || typeof decimals !== "number") {
+      return nonZero.sort(
+        (a, b) => Number.parseFloat(b.balance) - Number.parseFloat(a.balance)
+      );
+    }
+    return nonZero.sort((a, b) => {
+      try {
+        const aRaw = nexusSDK.utils.parseUnits(a.balance ?? "0", decimals);
+        const bRaw = nexusSDK.utils.parseUnits(b.balance ?? "0", decimals);
+        if (aRaw === bRaw) {
+          return 0;
+        }
+        return aRaw > bRaw ? -1 : 1;
+      } catch {
+        return Number.parseFloat(b.balance) - Number.parseFloat(a.balance);
+      }
+    });
+  }, [
+    inputs?.chain,
+    filteredBridgableBalance?.breakdown,
+    filteredBridgableBalance?.decimals,
+    nexusSDK,
+  ]);
+
+  const allAvailableSourceChainIds = useMemo(
+    () => availableSources.map((source) => source.chain.id),
+    [availableSources]
+  );
+
+  const effectiveSelectedSourceChains = useMemo(() => {
+    if (selectedSourceChains && selectedSourceChains.length > 0) {
+      const availableSet = new Set(allAvailableSourceChainIds);
+      const filteredSelection = selectedSourceChains.filter((id) =>
+        availableSet.has(id)
+      );
+      if (filteredSelection.length > 0) {
+        return filteredSelection;
+      }
+    }
+    return allAvailableSourceChainIds;
+  }, [selectedSourceChains, allAvailableSourceChainIds]);
+
+  const sourceChainsForSdk =
+    effectiveSelectedSourceChains.length > 0
+      ? effectiveSelectedSourceChains
+      : undefined;
+
+  const sourceSelectionKey = useMemo(() => {
+    if (allAvailableSourceChainIds.length === 0) {
+      return "NONE";
+    }
+    if (!selectedSourceChains || selectedSourceChains.length === 0) {
+      return "ALL";
+    }
+    return [...effectiveSelectedSourceChains].sort((a, b) => a - b).join("|");
+  }, [
+    allAvailableSourceChainIds.length,
+    effectiveSelectedSourceChains,
+    selectedSourceChains,
+  ]);
+  const hasPendingSourceSelectionChanges =
+    sourceSelectionKey !== appliedSourceSelectionKey;
+  const intentSourceSpendAmount = intent.current?.intent?.sourcesTotal;
+
+  const getMaxForCurrentSelection = useCallback(async () => {
+    if (!(nexusSDK && inputs?.token && inputs?.chain)) {
+      return undefined;
+    }
+    const maxBalAvailable = await nexusSDK.calculateMaxForBridge({
+      token: inputs.token,
+      toChainId: inputs.chain,
+      recipient: inputs.recipient,
+      sourceChains: sourceChainsForSdk,
+    });
+    if (!maxBalAvailable?.amount) {
+      return "0";
+    }
+    return clampAmountToMax({
+      amount: maxBalAvailable.amount,
+      maxAmount: configuredMaxAmount,
+      nexusSDK,
+      token: inputs.token,
+      chainId: inputs.chain,
+    });
+  }, [
+    configuredMaxAmount,
+    inputs?.chain,
+    inputs?.recipient,
+    inputs?.token,
+    nexusSDK,
+    sourceChainsForSdk,
+  ]);
+
+  const toggleSourceChain = useCallback(
+    (chainId: number) => {
+      setSelectedSourceChains((prev) => {
+        if (allAvailableSourceChainIds.length === 0) {
+          return prev;
+        }
+        const current =
+          prev && prev.length > 0 ? prev : allAvailableSourceChainIds;
+        const next = current.includes(chainId)
+          ? current.filter((id) => id !== chainId)
+          : [...current, chainId];
+        if (next.length === 0) {
+          return current;
+        }
+        const isAllSelected =
+          next.length === allAvailableSourceChainIds.length &&
+          allAvailableSourceChainIds.every((id) => next.includes(id));
+        return isAllSelected ? null : next;
+      });
+    },
+    [allAvailableSourceChainIds]
+  );
+
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Computes source-coverage state from SDK intent, selected chains, and fallbacks.
+  const sourceSelection = useMemo(() => {
+    const amount =
+      intentSourceSpendAmount?.trim() ?? inputs?.amount?.trim() ?? "";
+    const decimals = getCoverageDecimals({
+      type,
+      token: inputs?.token,
+      chainId: inputs?.chain,
+      fallback: filteredBridgableBalance?.decimals,
+    });
+    const selectedChainSet = new Set(effectiveSelectedSourceChains);
+    const selectedTotalRaw =
+      !nexusSDK || typeof decimals !== "number"
+        ? BigInt(0)
+        : availableSources.reduce((sum, source) => {
+            if (!selectedChainSet.has(source.chain.id)) {
+              return sum;
+            }
+            try {
+              return (
+                sum + nexusSDK.utils.parseUnits(source.balance ?? "0", decimals)
+              );
+            } catch {
+              return sum;
+            }
+          }, BigInt(0));
+    const selectedTotal =
+      !nexusSDK || typeof decimals !== "number"
+        ? "0"
+        : formatAmountForDisplay(selectedTotalRaw, decimals, nexusSDK);
+    const baseSelection = {
+      selectedTotal,
+      requiredTotal: amount || "0",
+      requiredSafetyTotal: amount || "0",
+      missingToProceed: "0",
+      missingToSafety: "0",
+      coverageState: "healthy" as SourceCoverageState,
+      coverageToSafetyPercent: 100,
+      isBelowRequired: false,
+      isBelowSafetyBuffer: false,
+    };
+
+    if (!(nexusSDK && inputs?.token && inputs?.chain && amount)) {
+      return baseSelection;
+    }
+
+    try {
+      const requiredRaw = nexusSDK.convertTokenReadableAmountToBigInt(
+        amount,
+        inputs.token,
+        inputs.chain
+      );
+      if (requiredRaw <= BigInt(0)) {
+        return baseSelection;
+      }
+
+      const missingToProceedRaw =
+        selectedTotalRaw >= requiredRaw
+          ? BigInt(0)
+          : requiredRaw - selectedTotalRaw;
+      const missingToSafetyRaw = missingToProceedRaw;
+
+      const coverageState: SourceCoverageState =
+        selectedTotalRaw < requiredRaw ? "error" : "healthy";
+
+      let coverageBasisPoints = 10_000;
+      if (requiredRaw > BigInt(0) && selectedTotalRaw < requiredRaw) {
+        coverageBasisPoints = Number(
+          (selectedTotalRaw * BigInt(10_000)) / requiredRaw
+        );
+      }
+
+      return {
+        selectedTotal,
+        requiredTotal: amount,
+        requiredSafetyTotal: amount,
+        missingToProceed: formatAmountForDisplay(
+          missingToProceedRaw,
+          decimals,
+          nexusSDK
+        ),
+        missingToSafety: formatAmountForDisplay(
+          missingToSafetyRaw,
+          decimals,
+          nexusSDK
+        ),
+        coverageState,
+        coverageToSafetyPercent: coverageBasisPoints / 100,
+        isBelowRequired: coverageState === "error",
+        isBelowSafetyBuffer: coverageState === "error",
+      };
+    } catch {
+      return baseSelection;
+    }
+  }, [
+    type,
+    filteredBridgableBalance?.decimals,
+    nexusSDK,
+    inputs?.chain,
+    inputs?.amount,
+    inputs?.token,
+    intentSourceSpendAmount,
+    availableSources,
+    effectiveSelectedSourceChains,
+  ]);
+
+  const stopwatch = useStopwatch({ intervalMs: 100 });
+  const setStatus = useCallback(
+    (status: TransactionStatus) =>
+      dispatch({ type: "setStatus", payload: status }),
+    []
+  );
+
+  const resetInputs = useCallback(() => {
+    dispatch({ type: "resetInputs" });
+  }, []);
+
+  const {
+    refreshIntent,
+    handleTransaction,
+    startTransaction,
+    commitAmount,
+    reset,
+    invalidatePendingExecution,
+  } = useTransactionExecution({
+    operationName,
+    nexusSDK,
+    intent,
+    allowance,
+    inputs,
+    configuredMaxAmount,
+    allAvailableSourceChainIds,
+    sourceChainsForSdk,
+    sourceSelectionKey,
+    sourceSelection,
+    loading,
+    txError,
+    areInputsValid,
+    executeTransaction,
+    getMaxForCurrentSelection,
+    onStepsList,
+    onStepComplete,
+    resetSteps,
+    setStatus,
+    resetInputs,
+    setRefreshing,
+    setIsDialogOpen,
+    setTxError,
+    setLastExplorerUrl,
+    setSelectedSourceChains,
+    setAppliedSourceSelectionKey,
+    stopwatch,
+    handleNexusError,
+    onStart,
+    onComplete,
+    onError,
+    fetchBalance,
+    notifyHistoryRefresh,
+    denyIntentOnReset,
+  });
+
+  usePolling(
+    Boolean(intent.current) &&
+      !isDialogOpen &&
+      !isSourceMenuOpen &&
+      !hasPendingSourceSelectionChanges,
+    async () => {
+      await refreshIntent();
+    },
+    15_000
+  );
+
+  const debouncedRefreshMaxForSelection = useDebouncedCallback(
+    async (requestId: number) => {
+      try {
+        const maxForCurrentSelection = await getMaxForCurrentSelection();
+        if (requestId !== maxAmountRequestIdRef.current) {
+          return;
+        }
+        setSelectedSourcesMaxAmount(maxForCurrentSelection ?? "0");
+      } catch (error) {
+        if (requestId !== maxAmountRequestIdRef.current) {
+          return;
+        }
+        console.error("Unable to calculate max for selected sources:", error);
+        setSelectedSourcesMaxAmount("0");
+      }
+    },
+    MAX_AMOUNT_DEBOUNCE_MS
+  );
+
+  useEffect(() => {
+    debouncedRefreshMaxForSelection.cancel();
+    if (!(nexusSDK && inputs?.token && inputs?.chain)) {
+      maxAmountRequestIdRef.current += 1;
+      setSelectedSourcesMaxAmount(null);
+      return;
+    }
+    if (allAvailableSourceChainIds.length === 0) {
+      maxAmountRequestIdRef.current += 1;
+      setSelectedSourcesMaxAmount("0");
+      return;
+    }
+    const requestId = ++maxAmountRequestIdRef.current;
+    debouncedRefreshMaxForSelection(requestId);
+  }, [
+    allAvailableSourceChainIds.length,
+    debouncedRefreshMaxForSelection,
+    inputs?.chain,
+    inputs?.token,
+    nexusSDK,
+  ]);
+
+  useEffect(() => {
+    if (type !== "bridge" || !connectedAddress) {
+      return;
+    }
+    const hasLockedPrefillRecipient = Boolean(
+      prefill?.recipient && prefill.recipient !== connectedAddress
+    );
+    const previousConnectedAddress = previousConnectedAddressRef.current;
+    if (!previousConnectedAddress) {
+      previousConnectedAddressRef.current = connectedAddress;
+      if (!(hasLockedPrefillRecipient || inputs?.recipient)) {
+        dispatch({
+          type: "setInputs",
+          payload: { recipient: connectedAddress },
+        });
+      }
+      return;
+    }
+    if (connectedAddress === previousConnectedAddress) {
+      return;
+    }
+    previousConnectedAddressRef.current = connectedAddress;
+    if (hasLockedPrefillRecipient) {
+      return;
+    }
+    if (!inputs?.recipient || inputs.recipient === previousConnectedAddress) {
+      dispatch({ type: "setInputs", payload: { recipient: connectedAddress } });
+    }
+  }, [type, connectedAddress, inputs?.recipient, prefill?.recipient]);
+
+  useEffect(() => {
+    const hasInputs = Boolean(
+      inputs?.amount || inputs?.chain || inputs?.recipient || inputs?.token
+    );
+    if (!(hasInputs || intent.current)) {
+      lastInvalidationKeyRef.current = "";
+      return;
+    }
+    const invalidationKey = [
+      inputs?.amount ?? "",
+      inputs?.chain ?? "",
+      inputs?.recipient ?? "",
+      inputs?.token ?? "",
+      intent.current ? "intent" : "no-intent",
+    ].join("|");
+    if (lastInvalidationKeyRef.current === invalidationKey) {
+      return;
+    }
+    lastInvalidationKeyRef.current = invalidationKey;
+    invalidatePendingExecution();
+  }, [
+    inputs?.amount,
+    inputs?.chain,
+    inputs?.recipient,
+    inputs?.token,
+    intent,
+    invalidatePendingExecution,
+  ]);
+
+  useEffect(() => {
+    if (previousSelectedTokenRef.current === inputs?.token) {
+      return;
+    }
+    previousSelectedTokenRef.current = inputs?.token;
+    setSelectedSourceChains(null);
+  }, [inputs?.token]);
+
+  useEffect(() => {
+    if (!isDialogOpen) {
+      stopwatch.stop();
+      stopwatch.reset();
+      if (state.status === "success" || state.status === "error") {
+        resetSteps();
+        setLastExplorerUrl("");
+        setStatus("idle");
+      }
+    }
+  }, [
+    isDialogOpen,
+    resetSteps,
+    setStatus,
+    state.status,
+    stopwatch.reset,
+    stopwatch.stop,
+  ]);
+
+  useEffect(() => {
+    if (txError) {
+      setTxError(null);
+    }
+  }, [txError]);
+
+  return {
+    inputs,
+    setInputs,
+    timer: stopwatch.seconds,
+    setIsDialogOpen,
+    setTxError,
+    loading,
+    refreshing,
+    isDialogOpen,
+    txError,
+    handleTransaction,
+    reset,
+    filteredBridgableBalance,
+    startTransaction,
+    commitAmount,
+    lastExplorerUrl,
+    steps,
+    status: state.status,
+    availableSources,
+    selectedSourceChains: effectiveSelectedSourceChains,
+    toggleSourceChain,
+    isSourceSelectionInsufficient: sourceSelection.isBelowRequired,
+    isSourceSelectionBelowSafetyBuffer: sourceSelection.isBelowSafetyBuffer,
+    isSourceSelectionReadyForAccept:
+      sourceSelection.coverageState === "healthy",
+    sourceCoverageState: sourceSelection.coverageState,
+    sourceCoveragePercent: sourceSelection.coverageToSafetyPercent,
+    missingToProceed: sourceSelection.missingToProceed,
+    missingToSafety: sourceSelection.missingToSafety,
+    selectedTotal: sourceSelection.selectedTotal,
+    requiredTotal: sourceSelection.requiredTotal,
+    requiredSafetyTotal: sourceSelection.requiredSafetyTotal,
+    maxAvailableAmount: selectedSourcesMaxAmount ?? undefined,
+    isInputsValid: areInputsValid,
+  };
+}
diff --git a/apps/monad/src/components/common/tx/steps.ts b/packages/fast-bridge-app/src/components/common/tx/steps.ts
similarity index 87%
rename from apps/monad/src/components/common/tx/steps.ts
rename to packages/fast-bridge-app/src/components/common/tx/steps.ts
index 9d44a88..81ff2ee 100644
--- a/apps/monad/src/components/common/tx/steps.ts
+++ b/packages/fast-bridge-app/src/components/common/tx/steps.ts
@@ -34,7 +34,7 @@ export const SWAP_EXPECTED_STEPS: SwapStepType[] = [
   { type: "SWAP_COMPLETE", typeID: "SWAP_COMPLETE" } as SwapStepType,
 ];
 
-export function seedSteps<T>(expected: T[]): Array<GenericStep<T>> {
+export function seedSteps<T>(expected: T[]): GenericStep<T>[] {
   return expected.map((st, index) => ({
     id: index,
     completed: false,
@@ -42,7 +42,7 @@ export function seedSteps<T>(expected: T[]): Array<GenericStep<T>> {
   }));
 }
 
-export function computeAllCompleted<T>(steps: Array<GenericStep<T>>): boolean {
+export function computeAllCompleted<T>(steps: GenericStep<T>[]): boolean {
   return steps.length > 0 && steps.every((s) => s.completed);
 }
 
@@ -51,16 +51,16 @@ export function computeAllCompleted<T>(steps: Array<GenericStep<T>>): boolean {
  * for any steps that were already marked completed (matched by key).
  */
 export function mergeStepsList<T>(
-  prev: Array<GenericStep<T>>,
+  prev: GenericStep<T>[],
   list: T[]
-): Array<GenericStep<T>> {
+): GenericStep<T>[] {
   const completedKeys = new Set<string>();
   for (const prevStep of prev) {
     if (prevStep.completed) {
       completedKeys.add(getStepKey(prevStep.step));
     }
   }
-  const next: Array<GenericStep<T>> = [];
+  const next: GenericStep<T>[] = [];
   for (let index = 0; index < list.length; index++) {
     const step = list[index];
     const key = getStepKey(step);
@@ -77,11 +77,11 @@ export function mergeStepsList<T>(
  * Mark a step complete in-place; if the step doesn't yet exist, append it.
  */
 export function mergeStepComplete<T>(
-  prev: Array<GenericStep<T>>,
+  prev: GenericStep<T>[],
   step: T
-): Array<GenericStep<T>> {
+): GenericStep<T>[] {
   const key = getStepKey(step);
-  const updated: Array<GenericStep<T>> = [];
+  const updated: GenericStep<T>[] = [];
   let found = false;
   for (const s of prev) {
     if (getStepKey(s.step) === key) {
diff --git a/packages/fast-bridge-app/src/components/common/tx/types.ts b/packages/fast-bridge-app/src/components/common/tx/types.ts
new file mode 100644
index 0000000..a78edcd
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/tx/types.ts
@@ -0,0 +1,41 @@
+export type TransactionStatus =
+  | "idle"
+  | "preview"
+  | "awaiting-approval"
+  | "executing"
+  | "success"
+  | "error";
+
+export interface GenericStep<TStep> {
+  completed: boolean;
+  id: number;
+  step: TStep;
+}
+
+interface StepLike {
+  type?: unknown;
+  typeID?: unknown;
+}
+
+/**
+ * Normalizes a step to a stable key. Prefers typeID, then type, otherwise JSON.
+ */
+export function getStepKey(step: unknown): string {
+  if (!step) {
+    return "";
+  }
+
+  const stepLike = step as StepLike;
+
+  if (typeof stepLike.typeID === "string" && stepLike.typeID.length > 0) {
+    return stepLike.typeID;
+  }
+  if (typeof stepLike.type === "string" && stepLike.type.length > 0) {
+    return stepLike.type;
+  }
+  try {
+    return JSON.stringify(step);
+  } catch {
+    return String(step);
+  }
+}
diff --git a/apps/monad/src/components/common/tx/useTransactionSteps.ts b/packages/fast-bridge-app/src/components/common/tx/use-transaction-steps.ts
similarity index 75%
rename from apps/monad/src/components/common/tx/useTransactionSteps.ts
rename to packages/fast-bridge-app/src/components/common/tx/use-transaction-steps.ts
index eb74bd6..a4a2226 100644
--- a/apps/monad/src/components/common/tx/useTransactionSteps.ts
+++ b/packages/fast-bridge-app/src/components/common/tx/use-transaction-steps.ts
@@ -1,12 +1,12 @@
-import { useMemo, useRef, useState } from "react";
-import type { GenericStep } from "./types";
-import { getStepKey } from "./types";
+import { useCallback, useMemo, useRef, useState } from "react";
 import {
   computeAllCompleted,
   mergeStepComplete,
   mergeStepsList,
   seedSteps,
 } from "./steps";
+import type { GenericStep } from "./types";
+import { getStepKey } from "./types";
 
 interface UseTransactionStepsOptions<T> {
   expected?: T[];
@@ -17,15 +17,15 @@ interface UseTransactionStepsOptions<T> {
  * replace the list on "steps list" events, and mark individual steps complete.
  */
 export function useTransactionSteps<
-  T extends { typeID?: string; type?: string }
+  T extends { typeID?: string; type?: string },
 >(options: UseTransactionStepsOptions<T> = {}) {
   const { expected } = options;
-  const [steps, setSteps] = useState<Array<GenericStep<T>>>(() =>
+  const [steps, setSteps] = useState<GenericStep<T>[]>(() =>
     expected ? seedSteps(expected) : []
   );
   const lastSignatureRef = useRef<string>("");
 
-  const onStepsList = (list: T[]) => {
+  const onStepsList = useCallback((list: T[]) => {
     const signature = list.map((step) => getStepKey(step)).join("|");
     if (lastSignatureRef.current === signature) {
       setSteps((prev) => mergeStepsList(prev, list));
@@ -33,20 +33,20 @@ export function useTransactionSteps<
     }
     lastSignatureRef.current = signature;
     setSteps((prev) => mergeStepsList(prev, list));
-  };
+  }, []);
 
-  const onStepComplete = (step: T) => {
+  const onStepComplete = useCallback((step: T) => {
     setSteps((prev) => mergeStepComplete(prev, step));
-  };
+  }, []);
 
-  const seed = (expectedSteps: T[]) => {
+  const seed = useCallback((expectedSteps: T[]) => {
     setSteps(seedSteps(expectedSteps));
-  };
+  }, []);
 
-  const reset = () => {
+  const reset = useCallback(() => {
     setSteps(expected ? seedSteps(expected) : []);
     lastSignatureRef.current = "";
-  };
+  }, [expected]);
 
   const allCompleted = useMemo(() => computeAllCompleted(steps), [steps]);
 
diff --git a/packages/fast-bridge-app/src/components/common/types/transaction-flow.ts b/packages/fast-bridge-app/src/components/common/types/transaction-flow.ts
new file mode 100644
index 0000000..c54c172
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/types/transaction-flow.ts
@@ -0,0 +1,54 @@
+import type {
+  NexusSDK,
+  SUPPORTED_CHAINS_IDS,
+  SUPPORTED_TOKENS,
+} from "@avail-project/nexus-core";
+import type { Address } from "viem";
+
+export type TransactionFlowType = "bridge" | "transfer";
+
+export interface TransactionFlowInputs {
+  amount?: string;
+  chain: SUPPORTED_CHAINS_IDS;
+  recipient?: `0x${string}`;
+  token: SUPPORTED_TOKENS;
+}
+
+export interface TransactionFlowPrefill {
+  amount?: string;
+  chainId: number;
+  recipient?: Address;
+  token: string;
+}
+
+type BridgeOptions = NonNullable<Parameters<NexusSDK["bridge"]>[1]>;
+
+export type TransactionFlowEvent =
+  NonNullable<BridgeOptions["onEvent"]> extends (event: infer E) => void
+    ? E
+    : never;
+
+export type TransactionFlowOnEvent = NonNullable<BridgeOptions["onEvent"]>;
+
+export interface TransactionFlowExecuteParams {
+  amount: bigint;
+  amountReadable?: string;
+  onEvent: TransactionFlowOnEvent;
+  recipient: `0x${string}`;
+  sourceChains?: number[];
+  toChainId: SUPPORTED_CHAINS_IDS;
+  token: SUPPORTED_TOKENS;
+}
+
+export type TransactionFlowExecutor = (
+  params: TransactionFlowExecuteParams
+) => Promise<{ explorerUrl: string } | null>;
+
+export type SourceCoverageState = "healthy" | "warning" | "error";
+
+export interface SourceSelectionValidation {
+  coverageState: SourceCoverageState;
+  isBelowRequired: boolean;
+  missingToProceed: string;
+  missingToSafety: string;
+}
diff --git a/apps/monad/src/components/common/utils/constant.ts b/packages/fast-bridge-app/src/components/common/utils/constant.ts
similarity index 88%
rename from apps/monad/src/components/common/utils/constant.ts
rename to packages/fast-bridge-app/src/components/common/utils/constant.ts
index e601428..14f8172 100644
--- a/apps/monad/src/components/common/utils/constant.ts
+++ b/packages/fast-bridge-app/src/components/common/utils/constant.ts
@@ -1,6 +1,10 @@
 import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
 import { formatUnits, parseUnits } from "viem";
 
+const FRACTION_TRAILING_ZEROES_REGEX = /(\.\d*?[1-9])0+$/u;
+const DECIMAL_TRAILING_ZEROES_REGEX = /\.0+$/u;
+const ONLY_DOT_REGEX = /^\.$/u;
+
 export const SHORT_CHAIN_NAME: Record<number, string> = {
   [SUPPORTED_CHAINS.ETHEREUM]: "Ethereum",
   [SUPPORTED_CHAINS.BASE]: "Base",
@@ -31,7 +35,7 @@ export const TOKEN_IMAGES: Record<string, string> = {
   USDT: "https://coin-images.coingecko.com/coins/images/35023/large/USDT.png",
   "USD₮0":
     "https://coin-images.coingecko.com/coins/images/35023/large/USDT.png",
-  USDM: "https://assets.coingecko.com/coins/images/31719/large/usdm.png",
+  USDM: "https://raw.githubusercontent.com/availproject/nexus-assets/refs/heads/main/tokens/usdm/logo.png",
   WETH: "https://assets.coingecko.com/coins/images/279/large/ethereum.png?1595348880",
   USDS: "https://assets.coingecko.com/coins/images/39926/standard/usds.webp?1726666683",
   SOPH: "https://assets.coingecko.com/coins/images/38680/large/sophon_logo_200.png",
@@ -72,16 +76,20 @@ export function computeAmountFromFraction(
   fraction: number,
   decimals: number,
   safetyMargin = DEFAULT_SAFETY_MARGIN,
-  balanceIsBaseUnits = false,
+  balanceIsBaseUnits = false
 ): string {
-  if (!balanceStr) return "0";
+  if (!balanceStr) {
+    return "0";
+  }
 
   // parse balance into base units (BigInt)
   const balanceUnits: bigint = balanceIsBaseUnits
     ? BigInt(balanceStr)
     : parseUnits(balanceStr, decimals);
 
-  if (balanceUnits === BigInt(0)) return "0";
+  if (balanceUnits === BigInt(0)) {
+    return "0";
+  }
 
   // Use an integer precision multiplier to avoid FP issues
   const PREC = 1_000_000; // 1e6 precision for fraction & safety margin
@@ -95,17 +103,21 @@ export function computeAmountFromFraction(
   let desiredUnits = (maxAfterSafety * fractionMul) / BigInt(PREC);
 
   // Extra clamp just in case
-  if (desiredUnits > balanceUnits) desiredUnits = balanceUnits;
-  if (desiredUnits < BigInt(0)) desiredUnits = BigInt(0);
+  if (desiredUnits > balanceUnits) {
+    desiredUnits = balanceUnits;
+  }
+  if (desiredUnits < BigInt(0)) {
+    desiredUnits = BigInt(0);
+  }
 
   // format back to human readable decimal string with token decimals (formatUnits truncates/keeps decimals)
   // formatUnits will produce exactly decimals digits if fractional part exists; we'll strip trailing zeros.
   const raw = formatUnits(desiredUnits, decimals);
   // strip trailing zeros and possible trailing dot
   return raw
-    .replace(/(\.\d*?[1-9])0+$/u, "$1")
-    .replace(/\.0+$/u, "")
-    .replace(/^\.$/u, "0");
+    .replace(FRACTION_TRAILING_ZEROES_REGEX, "$1")
+    .replace(DECIMAL_TRAILING_ZEROES_REGEX, "")
+    .replace(ONLY_DOT_REGEX, "0");
 }
 
 export const usdFormatter = new Intl.NumberFormat("en-US", {
diff --git a/packages/fast-bridge-app/src/components/common/utils/transaction-flow.ts b/packages/fast-bridge-app/src/components/common/utils/transaction-flow.ts
new file mode 100644
index 0000000..266a836
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/common/utils/transaction-flow.ts
@@ -0,0 +1,139 @@
+import {
+  type NexusNetwork,
+  type NexusSDK,
+  SUPPORTED_CHAINS,
+  type SUPPORTED_CHAINS_IDS,
+  type SUPPORTED_TOKENS,
+} from "@avail-project/nexus-core";
+import type { Address } from "viem";
+
+const MAX_AMOUNT_REGEX = /^\d*\.?\d+$/;
+const TRAILING_ZEROES_REGEX = /0+$/;
+
+export const MAX_AMOUNT_DEBOUNCE_MS = 300;
+
+export const normalizeMaxAmount = (
+  maxAmount?: string | number
+): string | undefined => {
+  if (maxAmount === undefined || maxAmount === null) {
+    return undefined;
+  }
+  const value = String(maxAmount).trim();
+  if (!value || value === "." || !MAX_AMOUNT_REGEX.test(value)) {
+    return undefined;
+  }
+  const parsed = Number.parseFloat(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return undefined;
+  }
+  return value;
+};
+
+export const clampAmountToMax = ({
+  amount,
+  maxAmount,
+  nexusSDK,
+  token,
+  chainId,
+}: {
+  amount: string;
+  maxAmount?: string;
+  nexusSDK: NexusSDK;
+  token: SUPPORTED_TOKENS;
+  chainId: SUPPORTED_CHAINS_IDS;
+}): string => {
+  if (!maxAmount) {
+    return amount;
+  }
+  try {
+    const amountRaw = nexusSDK.convertTokenReadableAmountToBigInt(
+      amount,
+      token,
+      chainId
+    );
+    const maxRaw = nexusSDK.convertTokenReadableAmountToBigInt(
+      maxAmount,
+      token,
+      chainId
+    );
+    return amountRaw > maxRaw ? maxAmount : amount;
+  } catch {
+    return amount;
+  }
+};
+
+export const formatAmountForDisplay = (
+  amount: bigint,
+  decimals: number | undefined,
+  nexusSDK: NexusSDK
+): string => {
+  if (typeof decimals !== "number") {
+    return amount.toString();
+  }
+  const formatted = nexusSDK.utils.formatUnits(amount, decimals);
+  if (!formatted.includes(".")) {
+    return formatted;
+  }
+  const [whole, fraction] = formatted.split(".");
+  const trimmedFraction = fraction
+    .slice(0, 6)
+    .replace(TRAILING_ZEROES_REGEX, "");
+  if (!trimmedFraction && whole === "0" && amount > BigInt(0)) {
+    return "0.000001";
+  }
+  return trimmedFraction ? `${whole}.${trimmedFraction}` : whole;
+};
+
+export const buildInitialInputs = ({
+  type,
+  network,
+  connectedAddress,
+  prefill,
+}: {
+  type: "bridge" | "transfer";
+  network: NexusNetwork;
+  connectedAddress?: Address;
+  prefill?: {
+    token: string;
+    chainId: number;
+    amount?: string;
+    recipient?: Address;
+  };
+}) => {
+  return {
+    chain:
+      (prefill?.chainId as SUPPORTED_CHAINS_IDS) ??
+      (network === "testnet"
+        ? SUPPORTED_CHAINS.SEPOLIA
+        : SUPPORTED_CHAINS.ETHEREUM),
+    token: (prefill?.token as SUPPORTED_TOKENS) ?? "USDC",
+    amount: prefill?.amount ?? undefined,
+    recipient:
+      (prefill?.recipient as `0x${string}`) ??
+      (type === "bridge" ? connectedAddress : undefined),
+  };
+};
+
+export const getCoverageDecimals = ({
+  type,
+  token,
+  chainId,
+  fallback,
+}: {
+  type: "bridge" | "transfer";
+  token?: SUPPORTED_TOKENS;
+  chainId?: SUPPORTED_CHAINS_IDS;
+  fallback: number | undefined;
+}) => {
+  if (token === "USDM") {
+    return 18;
+  }
+  if (
+    type === "bridge" &&
+    token === "USDC" &&
+    chainId === SUPPORTED_CHAINS.BNB
+  ) {
+    return 18;
+  }
+  return fallback;
+};
diff --git a/apps/monad/src/components/countdown-timer.tsx b/packages/fast-bridge-app/src/components/countdown-timer.tsx
similarity index 59%
rename from apps/monad/src/components/countdown-timer.tsx
rename to packages/fast-bridge-app/src/components/countdown-timer.tsx
index 5da085c..cca6e4a 100644
--- a/apps/monad/src/components/countdown-timer.tsx
+++ b/packages/fast-bridge-app/src/components/countdown-timer.tsx
@@ -1,33 +1,35 @@
 "use client";
-import * as React from "react";
+import { useEffect, useState } from "react";
 
 interface CountdownTimerProps {
   targetDate: Date;
 }
 
-export const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) => {
-  const [timeLeft, setTimeLeft] = React.useState({
+export const CountdownTimer = ({ targetDate }: CountdownTimerProps) => {
+  const [timeLeft, setTimeLeft] = useState({
     days: 0,
     hours: 0,
     minutes: 0,
     seconds: 0,
   });
 
-  React.useEffect(() => {
-    if (!targetDate || isNaN(targetDate.getTime())) {
+  useEffect(() => {
+    if (!targetDate || Number.isNaN(targetDate.getTime())) {
       console.error("Invalid target date provided to CountdownTimer");
       return;
     }
 
     const calculateTimeLeft = () => {
-      const now = new Date().getTime();
+      const now = Date.now();
       const target = targetDate.getTime();
       const difference = target - now;
 
       if (difference > 0) {
         setTimeLeft({
           days: Math.floor(difference / (1000 * 60 * 60 * 24)),
-          hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+          hours: Math.floor(
+            (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+          ),
           minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
           seconds: Math.floor((difference % (1000 * 60)) / 1000),
         });
@@ -43,37 +45,37 @@ export const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) =>
   }, [targetDate]);
 
   return (
-    <div className="flex flex-col items-center gap-4 mt-6">
+    <div className="mt-6 flex flex-col items-center gap-4">
       <div className="flex gap-4 sm:gap-6 md:gap-8">
         <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
+          <div className="font-bold text-3xl sm:text-4xl md:text-5xl">
             {String(timeLeft.days).padStart(2, "0")}
           </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
+          <div className="text-muted-foreground text-xs uppercase tracking-wide sm:text-sm md:text-base">
             Days
           </div>
         </div>
         <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
+          <div className="font-bold text-3xl sm:text-4xl md:text-5xl">
             {String(timeLeft.hours).padStart(2, "0")}
           </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
+          <div className="text-muted-foreground text-xs uppercase tracking-wide sm:text-sm md:text-base">
             Hours
           </div>
         </div>
         <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
+          <div className="font-bold text-3xl sm:text-4xl md:text-5xl">
             {String(timeLeft.minutes).padStart(2, "0")}
           </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
+          <div className="text-muted-foreground text-xs uppercase tracking-wide sm:text-sm md:text-base">
             Minutes
           </div>
         </div>
         <div className="flex flex-col items-center">
-          <div className="text-3xl sm:text-4xl md:text-5xl font-bold">
+          <div className="font-bold text-3xl sm:text-4xl md:text-5xl">
             {String(timeLeft.seconds).padStart(2, "0")}
           </div>
-          <div className="text-xs sm:text-sm md:text-base text-muted-foreground uppercase tracking-wide">
+          <div className="text-muted-foreground text-xs uppercase tracking-wide sm:text-sm md:text-base">
             Seconds
           </div>
         </div>
@@ -81,4 +83,3 @@ export const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) =>
     </div>
   );
 };
-
diff --git a/apps/citrea/src/components/fast-bridge-showcase.tsx b/packages/fast-bridge-app/src/components/fast-bridge-showcase.tsx
similarity index 92%
rename from apps/citrea/src/components/fast-bridge-showcase.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge-showcase.tsx
index 0ec7ddd..acb8ae1 100644
--- a/apps/citrea/src/components/fast-bridge-showcase.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge-showcase.tsx
@@ -1,8 +1,8 @@
 "use client";
-import { useAccount } from "wagmi";
 import { ConnectKitButton } from "connectkit";
+import { useAccount } from "wagmi";
 import FastBridge from "./fast-bridge/fast-bridge";
-import { PreviewPanel } from "./walletConnect";
+import { PreviewPanel } from "./wallet-connect";
 
 const FastBridgeShowcase = () => {
   const { address, isConnected } = useAccount();
diff --git a/apps/monad/src/components/fast-bridge/components/allowance-modal.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/allowance-modal.tsx
similarity index 77%
rename from apps/monad/src/components/fast-bridge/components/allowance-modal.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/allowance-modal.tsx
index 35515d3..41042d9 100644
--- a/apps/monad/src/components/fast-bridge/components/allowance-modal.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/allowance-modal.tsx
@@ -1,21 +1,24 @@
 "use client";
+import {
+  type AllowanceHookSource,
+  CHAIN_METADATA,
+  type OnAllowanceHookData,
+} from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
 import React, {
   type FC,
   memo,
   type RefObject,
+  useCallback,
   useEffect,
   useMemo,
   useState,
 } from "react";
+import { withBasePath } from "@/lib/utils";
+import { useNexus } from "../../nexus/nexus-provider";
 import { Button } from "../../ui/button";
 import { Input } from "../../ui/input";
 import { Label } from "../../ui/label";
-import {
-  type AllowanceHookSource,
-  CHAIN_METADATA,
-  type OnAllowanceHookData,
-} from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
 
 interface AllowanceModalProps {
   allowance: RefObject<OnAllowanceHookData | null>;
@@ -26,15 +29,15 @@ interface AllowanceModalProps {
 type AllowanceChoice = "min" | "max" | "custom";
 
 interface AllowanceOptionProps {
+  allowanceValue?: string;
+  children?: React.ReactNode;
+  choice: AllowanceChoice;
+  description?: string;
   index: number;
   name: string;
-  choice: AllowanceChoice;
-  selectedChoice?: AllowanceChoice;
   onSelect: (index: number, choice: AllowanceChoice) => void;
+  selectedChoice?: AllowanceChoice;
   title: string;
-  description?: string;
-  children?: React.ReactNode;
-  allowanceValue?: string;
 }
 
 const ALLOWANCE_CHOICES: Array<{
@@ -75,23 +78,23 @@ const AllowanceOption: FC<AllowanceOptionProps> = ({
   return (
     <Label className="block cursor-pointer">
       <input
-        type="radio"
-        name={name}
-        value={choice}
         checked={isActive}
-        onChange={() => onSelect(index, choice)}
         className="peer sr-only"
+        name={name}
+        onChange={() => onSelect(index, choice)}
+        type="radio"
+        value={choice}
       />
-      <div className="flex flex-col gap-3 rounded-xl border border-border/40 bg-background/40 px-4 py-3 transition peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50 peer-checked:border-primary peer-checked:bg-primary/10 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center justify-between w-full">
+      <div className="flex flex-col gap-3 rounded-xl border border-border/40 bg-background/40 px-4 py-3 transition peer-checked:border-primary peer-checked:bg-primary/10 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex w-full items-center justify-between">
           <div>
-            <p className="text-sm font-medium leading-tight">{title}</p>
+            <p className="font-medium text-sm leading-tight">{title}</p>
             {description ? (
-              <p className="text-xs text-muted-foreground">{description}</p>
+              <p className="text-muted-foreground text-xs">{description}</p>
             ) : null}
           </div>
           {allowanceValue && (
-            <p className="text-sm font-medium leading-tight">
+            <p className="font-medium text-sm leading-tight">
               {allowanceValue}
             </p>
           )}
@@ -114,8 +117,8 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
 
   const { sources, allow, deny } = allowance.current ?? {
     sources: [],
-    allow: () => {},
-    deny: () => {},
+    allow: () => undefined,
+    deny: () => undefined,
   };
 
   const defaultChoices = useMemo<AllowanceChoice[]>(
@@ -123,33 +126,40 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
     [sources.length]
   );
 
-  const isCustomValueValid = (
-    value: string,
-    minimumRaw: bigint,
-    decimals: number
-  ): boolean => {
-    if (!value || value.trim() === "") return false;
-    try {
-      const parsedValue = nexusSDK?.utils?.parseUnits(value, decimals);
-      if (parsedValue === undefined) return false;
-      return parsedValue >= minimumRaw;
-    } catch {
-      return false;
-    }
-  };
+  const isCustomValueValid = useCallback(
+    (value: string, minimumRaw: bigint, decimals: number): boolean => {
+      if (!value || value.trim() === "") {
+        return false;
+      }
+      try {
+        const parsedValue = nexusSDK?.utils?.parseUnits(value, decimals);
+        if (parsedValue === undefined) {
+          return false;
+        }
+        return parsedValue >= minimumRaw;
+      } catch {
+        return false;
+      }
+    },
+    [nexusSDK?.utils]
+  );
 
   const hasValidationErrors = useMemo(() => {
     return sources.some((source, index) => {
-      if (selectedOption[index] !== "custom") return false;
+      if (selectedOption[index] !== "custom") {
+        return false;
+      }
       const value = customValues[index];
-      if (!value || value.trim() === "") return false;
+      if (!value || value.trim() === "") {
+        return false;
+      }
       return !isCustomValueValid(
         value,
         source.allowance.minimumRaw,
         source.token.decimals
       );
     });
-  }, [sources, selectedOption, customValues]);
+  }, [customValues, isCustomValueValid, selectedOption, sources]);
 
   const onClose = () => {
     deny();
@@ -160,11 +170,17 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
   const onApprove = () => {
     const processed = sources.map((_, i) => {
       const opt = selectedOption[i];
-      if (opt === "min" || opt === "max") return opt;
+      if (opt === "min" || opt === "max") {
+        return opt;
+      }
       const rawValue = customValues[i]?.trim();
-      if (!rawValue) return "min";
+      if (!rawValue) {
+        return "min";
+      }
       const parsed = Number(rawValue);
-      if (!Number.isFinite(parsed) || parsed < 0) return "min";
+      if (!Number.isFinite(parsed) || parsed < 0) {
+        return "min";
+      }
       return rawValue;
     });
     try {
@@ -203,47 +219,53 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
   return (
     <>
       <div className="space-y-1">
-        <p className="text-lg font-semibold tracking-tight">
+        <p className="font-semibold text-lg tracking-tight">
           Set Token Allowances
         </p>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           Review every required token and choose the minimum, an unlimited max,
           or define a custom amount before approving.
         </p>
       </div>
 
-      <div className="space-y-4 py-2 max-h-[60vh] overflow-y-auto pr-1">
+      <div className="max-h-[60vh] space-y-4 overflow-y-auto py-2 pr-1">
         {sources?.map((source: AllowanceHookSource, index: number) => (
           <div
-            key={`${source.token.symbol}-${index}`}
             className="rounded-2xl border border-border/40 bg-muted/10 p-4 shadow-sm transition hover:border-border"
+            key={`${source.token.symbol}-${index}`}
           >
             <div className="flex flex-wrap items-center justify-between gap-3">
               <div className="flex items-center gap-3">
                 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-background shadow-inner">
                   <img
-                    src={CHAIN_METADATA[source.chain.id]?.logo}
                     alt={source.chain.name}
-                    width={24}
-                    height={24}
                     className="rounded-full"
+                    height={24}
+                    src={
+                      withBasePath(
+                        chainFeatures.allowanceLogoOverrideByChainId?.[
+                          source.chain.id
+                        ] ?? CHAIN_METADATA[source.chain.id]?.logo
+                      ) || CHAIN_METADATA[source.chain.id]?.logo
+                    }
+                    width={24}
                   />
                 </div>
                 <div>
-                  <p className="text-base font-semibold">
+                  <p className="font-semibold text-base">
                     {source.token.symbol}
                   </p>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     {source.chain.name}
                   </p>
                 </div>
               </div>
 
               <div className="text-right">
-                <p className="text-xs uppercase tracking-wide text-muted-foreground">
+                <p className="text-muted-foreground text-xs uppercase tracking-wide">
                   Current allowance
                 </p>
-                <p className="text-sm font-semibold">
+                <p className="font-semibold text-sm">
                   {formatAmount(source.allowance.currentRaw, source)}
                 </p>
               </div>
@@ -264,36 +286,36 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
                     );
                   return (
                     <AllowanceOption
-                      key={choice.choice}
+                      choice={choice.choice}
+                      description={choice.description}
                       index={index}
+                      key={choice.choice}
                       name={`allowance-${index}`}
-                      choice={choice.choice}
-                      selectedChoice={selectedOption[index]}
                       onSelect={handleChoiceChange}
+                      selectedChoice={selectedOption[index]}
                       title={choice.title}
-                      description={choice.description}
                     >
                       <div className="flex flex-col gap-1">
                         <Input
-                          type="number"
-                          step="any"
-                          min="0"
+                          className={`h-9 w-40 rounded-lg border bg-background/80 text-sm disabled:opacity-60 ${
+                            showError ? "border-destructive" : ""
+                          }`}
+                          disabled={!isCustomSelected}
                           inputMode="decimal"
-                          placeholder="0.00"
-                          value={isCustomSelected ? customValue : ""}
+                          maxLength={source.token.decimals}
+                          min="0"
                           onChange={(e) => {
                             const next = [...customValues];
                             next[index] = e.target.value;
                             setCustomValues(next);
                           }}
-                          maxLength={source.token.decimals}
-                          className={`h-9 w-40 rounded-lg border bg-background/80 text-sm disabled:opacity-60 ${
-                            showError ? "border-destructive" : ""
-                          }`}
-                          disabled={!isCustomSelected}
+                          placeholder="0.00"
+                          step="any"
+                          type="number"
+                          value={isCustomSelected ? customValue : ""}
                         />
                         {showError && (
-                          <p className="text-xs text-destructive">
+                          <p className="text-destructive text-xs">
                             Min: {source.allowance.minimum}
                           </p>
                         )}
@@ -303,19 +325,19 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
                 }
                 return (
                   <AllowanceOption
-                    key={choice.choice}
-                    index={index}
-                    name={`allowance-${index}`}
-                    choice={choice.choice}
-                    selectedChoice={selectedOption[index]}
-                    onSelect={handleChoiceChange}
-                    title={choice.title}
-                    description={choice.description}
                     allowanceValue={
                       choice.choice === "min"
                         ? formatAmount(source.allowance.minimumRaw, source)
                         : "Unlimited"
                     }
+                    choice={choice.choice}
+                    description={choice.description}
+                    index={index}
+                    key={choice.choice}
+                    name={`allowance-${index}`}
+                    onSelect={handleChoiceChange}
+                    selectedChoice={selectedOption[index]}
+                    title={choice.title}
                   />
                 );
               })}
@@ -325,13 +347,13 @@ const AllowanceModal: FC<AllowanceModalProps> = ({
       </div>
 
       <div className="mt-4 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">
-        <Button variant="ghost" onClick={onClose} className="font-semibold">
+        <Button className="font-semibold" onClick={onClose} variant="ghost">
           Deny
         </Button>
         <Button
-          onClick={onApprove}
-          className="w-full sm:w-auto font-semibold"
+          className="w-full font-semibold sm:w-auto"
           disabled={hasValidationErrors}
+          onClick={onApprove}
         >
           Approve Selected
         </Button>
diff --git a/packages/fast-bridge-app/src/components/fast-bridge/components/amount-input.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/amount-input.tsx
new file mode 100644
index 0000000..3bfc33a
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/amount-input.tsx
@@ -0,0 +1,307 @@
+import { SUPPORTED_CHAINS, type UserAsset } from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
+import { LoaderCircle } from "lucide-react";
+import {
+  type FC,
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { SHORT_CHAIN_NAME } from "../../common/utils/constant";
+import {
+  clampAmountToMax,
+  normalizeMaxAmount,
+} from "../../common/utils/transaction-flow";
+import { useNexus } from "../../nexus/nexus-provider";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../ui/accordion";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+import type { FastBridgeState } from "../hooks/use-bridge";
+
+interface AmountInputProps {
+  amount?: string;
+  bridgableBalance?: UserAsset;
+  disabled?: boolean;
+  inputs: FastBridgeState;
+  maxAmount?: string | number;
+  maxAvailableAmount?: string;
+  onChange: (value: string) => void;
+  onCommit?: (value: string) => void;
+  showBalanceDetails?: boolean;
+}
+
+const AmountInput: FC<AmountInputProps> = ({
+  amount,
+  onChange,
+  bridgableBalance,
+  onCommit,
+  disabled,
+  inputs,
+  showBalanceDetails = true,
+  maxAmount,
+  maxAvailableAmount,
+}) => {
+  const { nexusSDK, loading } = useNexus();
+  const commitTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const showBalanceDivider = showBalanceDetails && Boolean(bridgableBalance);
+  const [maxVal, setMaxVal] = useState("0");
+  const balanceSymbol =
+    (bridgableBalance as { displaySymbol?: string } | undefined)
+      ?.displaySymbol ?? bridgableBalance?.symbol;
+  const normalizedMaxAmount = useMemo(
+    () => normalizeMaxAmount(maxAmount),
+    [maxAmount]
+  );
+
+  const applyMaxCap = useCallback(
+    (value: string) => {
+      if (!(nexusSDK && inputs?.token && inputs?.chain)) {
+        return value;
+      }
+      return clampAmountToMax({
+        amount: value,
+        maxAmount: normalizedMaxAmount,
+        nexusSDK,
+        token: inputs.token,
+        chainId: inputs.chain,
+      });
+    },
+    [inputs?.chain, inputs?.token, nexusSDK, normalizedMaxAmount]
+  );
+
+  const scheduleCommit = (val: string) => {
+    if (!onCommit || disabled) {
+      return;
+    }
+    if (commitTimerRef.current) {
+      clearTimeout(commitTimerRef.current);
+    }
+    commitTimerRef.current = setTimeout(() => {
+      onCommit(val);
+    }, 800);
+  };
+
+  const getMaxVal = useCallback(async () => {
+    if (maxAvailableAmount !== undefined) {
+      return applyMaxCap(maxAvailableAmount);
+    }
+    if (!(showBalanceDetails && nexusSDK && inputs)) {
+      return;
+    }
+    const maxBalAvailable = await nexusSDK.calculateMaxForBridge({
+      token: inputs.token,
+      toChainId: inputs.chain,
+      recipient: inputs.recipient,
+    });
+    if (!maxBalAvailable) {
+      return;
+    }
+    return applyMaxCap(maxBalAvailable.amount);
+  }, [applyMaxCap, inputs, maxAvailableAmount, nexusSDK, showBalanceDetails]);
+
+  const onMaxClick = async () => {
+    if (!showBalanceDetails) {
+      return;
+    }
+    if (maxAvailableAmount !== undefined) {
+      const capped = applyMaxCap(maxAvailableAmount);
+      onChange(capped);
+      onCommit?.(capped);
+      return;
+    }
+    if (!(nexusSDK && inputs)) {
+      return;
+    }
+    const maxBalAvailable = await nexusSDK.calculateMaxForBridge({
+      token: inputs.token,
+      toChainId: inputs.chain,
+      recipient: inputs.recipient,
+    });
+    if (!maxBalAvailable) {
+      return;
+    }
+    const capped = applyMaxCap(maxBalAvailable.amount);
+    onChange(capped);
+    onCommit?.(capped);
+  };
+
+  useEffect(() => {
+    const initMaxVal = async () => {
+      const value = await getMaxVal();
+      setMaxVal(value ?? "0");
+    };
+    initMaxVal().catch((error) => {
+      console.error("Failed to initialize max bridge amount:", error);
+    });
+  }, [getMaxVal]);
+
+  useEffect(() => {
+    return () => {
+      if (commitTimerRef.current) {
+        clearTimeout(commitTimerRef.current);
+        commitTimerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="flex w-full flex-col gap-y-2 pb-2">
+      <div className="flex w-full flex-col gap-y-2 rounded-lg border border-border sm:flex-row">
+        <Input
+          aria-invalid={Boolean(amount) && Number.isNaN(Number(amount))}
+          className="h-12! w-full rounded-r-none border-none bg-transparent px-3 py-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          disabled={disabled}
+          inputMode="decimal"
+          onChange={(e) => {
+            let next = e.target.value.replaceAll(/[^0-9.]/g, "");
+            const parts = next.split(".");
+            if (parts.length > 2) {
+              next = `${parts[0]}.${parts.slice(1).join("")}`;
+            }
+            if (next === ".") {
+              next = "0.";
+            }
+            onChange(next);
+            scheduleCommit(next);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              if (commitTimerRef.current) {
+                clearTimeout(commitTimerRef.current);
+                commitTimerRef.current = null;
+              }
+              onCommit?.(amount ?? "");
+            }
+          }}
+          placeholder="Enter Amount"
+          type="text"
+          value={amount ?? ""}
+        />
+        <div
+          className={`justify-end-safe flex w-fit items-center gap-x-2 px-2 sm:gap-x-4 ${
+            showBalanceDivider ? "border-border border-l" : ""
+          }`}
+        >
+          {showBalanceDetails && bridgableBalance && (
+            <p className="min-w-max font-medium text-base">
+              {chainFeatures.amountInputUseCalculatedMaxHeader
+                ? nexusSDK?.utils?.formatTokenBalance(maxVal, {
+                    symbol: balanceSymbol,
+                    decimals: bridgableBalance?.decimals,
+                  })
+                : nexusSDK?.utils?.formatTokenBalance(
+                    bridgableBalance?.balance,
+                    {
+                      symbol: balanceSymbol,
+                      decimals: bridgableBalance?.decimals,
+                    }
+                  )}
+            </p>
+          )}
+          {showBalanceDetails && loading && !bridgableBalance && (
+            <LoaderCircle className="size-4 animate-spin" />
+          )}
+          {showBalanceDetails && (
+            <Button
+              className="px-0 font-medium"
+              disabled={disabled}
+              onClick={onMaxClick}
+              size={"sm"}
+              variant={"ghost"}
+            >
+              MAX
+            </Button>
+          )}
+        </div>
+      </div>
+      {showBalanceDetails && (
+        <Accordion className="w-full" collapsible type="single">
+          <AccordionItem value="balance-breakdown">
+            <AccordionTrigger
+              className="mt-2 w-fit cursor-pointer items-center justify-end gap-x-0.5 py-0 font-normal text-sm"
+              hideChevron={false}
+            >
+              View Balance Breakdown
+            </AccordionTrigger>
+            <AccordionContent className="mt-4 rounded-lg bg-muted pb-0">
+              <div className="space-y-1 py-2">
+                {bridgableBalance?.breakdown.map((chain) => {
+                  if (Number.parseFloat(chain.balance) === 0) {
+                    return null;
+                  }
+                  if (
+                    chainFeatures.hideMegaethSourceForUsdm &&
+                    bridgableBalance.symbol === "USDM" &&
+                    chain.chain.id === SUPPORTED_CHAINS.MEGAETH
+                  ) {
+                    return null;
+                  }
+                  return (
+                    <Fragment key={chain.chain.id}>
+                      <div
+                        className="flex items-center justify-between rounded-md px-2 py-1"
+                        style={{
+                          opacity:
+                            chainFeatures.amountInputShowDestinationBadge &&
+                            chain.chain.id === inputs.chain
+                              ? 0.4
+                              : 1,
+                        }}
+                      >
+                        <div className="flex items-center gap-2">
+                          <div className="relative h-6 w-6">
+                            <img
+                              alt={chain.chain.name}
+                              className="rounded-full"
+                              decoding="async"
+                              height="20"
+                              loading="lazy"
+                              sizes="100%"
+                              src={chain?.chain?.logo}
+                              width="20"
+                            />
+                          </div>
+                          <span className="hidden font-light text-sm sm:block">
+                            {SHORT_CHAIN_NAME[chain.chain.id]}
+                          </span>
+                          {chainFeatures.amountInputShowDestinationBadge &&
+                            chain.chain.id === inputs.chain && (
+                              <div
+                                className="rounded-[10px] px-2 py-1 font-semibold text-[10px] uppercase"
+                                style={{ background: "rgba(0, 0, 0, 0.2)" }}
+                              >
+                                Destination
+                              </div>
+                            )}
+                        </div>
+                        <p className="text-right font-light text-sm">
+                          {nexusSDK?.utils?.formatTokenBalance(chain.balance, {
+                            symbol:
+                              chainFeatures.amountInputUseSourceSymbolInBreakdown
+                                ? chain.symbol
+                                : balanceSymbol,
+                            decimals: bridgableBalance?.decimals,
+                          })}
+                        </p>
+                      </div>
+                    </Fragment>
+                  );
+                })}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </div>
+  );
+};
+
+export default AmountInput;
diff --git a/apps/megaeth/src/components/fast-bridge/components/balance-breakdown.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/balance-breakdown.tsx
similarity index 69%
rename from apps/megaeth/src/components/fast-bridge/components/balance-breakdown.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/balance-breakdown.tsx
index 6cdeec3..f728d8c 100644
--- a/apps/megaeth/src/components/fast-bridge/components/balance-breakdown.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/balance-breakdown.tsx
@@ -1,4 +1,4 @@
-import { type UserAsset } from "@avail-project/nexus-core";
+import type { UserAsset } from "@avail-project/nexus-core";
 import {
   Accordion,
   AccordionContent,
@@ -12,43 +12,43 @@ interface BalanceBreakdownProps {
 
 const BalanceBreakdown = ({ assetBalances }: BalanceBreakdownProps) => {
   return (
-    <Accordion type="single" collapsible style={{ marginTop: "-0.5rem" }}>
+    <Accordion collapsible style={{ marginTop: "-0.5rem" }} type="single">
       <AccordionItem value="sources">
-        <div className="flex items-start justify-end gap-x-4 w-full">
+        <div className="flex w-full items-start justify-end gap-x-4">
           {assetBalances && (
-            <div className="flex flex-col items-end gap-y-1 min-w-fit">
+            <div className="flex min-w-fit flex-col items-end gap-y-1">
               <AccordionTrigger
+                className="items-center gap-x-1 py-0"
                 containerClassName="w-fit"
-                className="py-0 items-center gap-x-1"
                 hideChevron={false}
               >
-                <p className="text-sm font-light">View Balance Breakdown</p>
+                <p className="font-light text-sm">View Balance Breakdown</p>
               </AccordionTrigger>
             </div>
           )}
         </div>
         {assetBalances && (
-          <AccordionContent className="my-4 bg-muted pb-0 px-4 py-2 rounded-lg w-full">
+          <AccordionContent className="my-4 w-full rounded-lg bg-muted px-4 py-2 pb-0">
             <div className="flex flex-col items-center gap-y-3">
               {assetBalances?.breakdown?.map((individualBalance) => (
                 <div
+                  className="flex w-full items-center justify-between gap-x-2"
                   key={individualBalance.chain.id}
-                  className="flex items-center justify-between w-full gap-x-2"
                 >
                   <div className="flex items-center gap-x-2">
                     <img
-                      src={individualBalance.chain.logo}
                       alt={individualBalance.chain.name}
-                      width={20}
-                      height={20}
                       className="rounded-full"
+                      height={20}
+                      src={individualBalance.chain.logo}
+                      width={20}
                     />
-                    <p className="text-sm font-light">
+                    <p className="font-light text-sm">
                       {individualBalance.chain.name}
                     </p>
                   </div>
 
-                  <p className="text-sm font-light">
+                  <p className="font-light text-sm">
                     {individualBalance.balance} {assetBalances.symbol}
                   </p>
                 </div>
diff --git a/apps/megaeth/src/components/fast-bridge/components/chain-select.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/chain-select.tsx
similarity index 71%
rename from apps/megaeth/src/components/fast-bridge/components/chain-select.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/chain-select.tsx
index 3899cd2..850bbf9 100644
--- a/apps/megaeth/src/components/fast-bridge/components/chain-select.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/chain-select.tsx
@@ -1,4 +1,7 @@
+import type { SUPPORTED_CHAINS_IDS } from "@avail-project/nexus-core";
 import { type FC, useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { useNexus } from "../../nexus/nexus-provider";
 import { Label } from "../../ui/label";
 import {
   Select,
@@ -8,17 +11,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import { type SUPPORTED_CHAINS_IDS } from "@avail-project/nexus-core";
-import { cn } from "@/lib/utils";
-import { useNexus } from "../../nexus/NexusProvider";
 
 interface ChainSelectProps {
-  selectedChain: number;
+  className?: string;
   disabled?: boolean;
+  handleSelect: (chainId: SUPPORTED_CHAINS_IDS) => void;
   hidden?: boolean;
-  className?: string;
   label?: string;
-  handleSelect: (chainId: SUPPORTED_CHAINS_IDS) => void;
+  selectedChain: number;
 }
 
 const ChainSelect: FC<ChainSelectProps> = ({
@@ -32,39 +32,43 @@ const ChainSelect: FC<ChainSelectProps> = ({
   const { supportedChainsAndTokens } = useNexus();
 
   const selectedChainData = useMemo(() => {
-    if (!supportedChainsAndTokens) return null;
+    if (!supportedChainsAndTokens) {
+      return null;
+    }
     return supportedChainsAndTokens.find((c) => c.id === selectedChain);
   }, [selectedChain, supportedChainsAndTokens]);
 
-  if (hidden) return null;
+  if (hidden) {
+    return null;
+  }
   return (
     <Select
-      value={selectedChain?.toString() ?? ""}
       onValueChange={(value) => {
         if (!disabled) {
-          handleSelect(Number.parseInt(value) as SUPPORTED_CHAINS_IDS);
+          handleSelect(Number.parseInt(value, 10) as SUPPORTED_CHAINS_IDS);
         }
       }}
+      value={selectedChain?.toString() ?? ""}
     >
-      <div className="flex flex-col items-start gap-y-3 w-full">
-        {label && <Label className="text-sm font-semibold">{label}</Label>}
+      <div className="flex w-full flex-col items-start gap-y-3">
+        {label && <Label className="font-semibold text-sm">{label}</Label>}
         <SelectTrigger
+          className="h-12! w-full font-light text-base"
           disabled={disabled}
-          className="h-12! w-full text-base font-light"
         >
           <SelectValue>
             {selectedChainData && (
               <div
-                className={cn("flex items-center gap-x-2 w-full", className)}
+                className={cn("flex w-full items-center gap-x-2", className)}
               >
                 <img
-                  src={selectedChainData?.logo}
                   alt={selectedChainData?.name}
-                  width={24}
-                  height={24}
                   className="rounded-full"
+                  height={24}
+                  src={selectedChainData?.logo}
+                  width={24}
                 />
-                <p className="text-primary test-sm">
+                <p className="test-sm text-primary">
                   {selectedChainData?.name}
                 </p>
               </div>
@@ -74,19 +78,19 @@ const ChainSelect: FC<ChainSelectProps> = ({
       </div>
 
       <SelectContent>
-        <SelectGroup className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-scroll no-scrollbar">
+        <SelectGroup className="no-scrollbar grid max-h-[400px] grid-cols-2 gap-2 overflow-y-scroll">
           {supportedChainsAndTokens?.map((chain) => {
             return (
               <SelectItem key={chain.id} value={String(chain.id)}>
-                <div className="flex items-center gap-x-2 my-1">
+                <div className="my-1 flex items-center gap-x-2">
                   <img
-                    src={chain.logo}
                     alt={chain?.name}
-                    width={24}
-                    height={24}
                     className="rounded-full"
+                    height={24}
+                    src={chain.logo}
+                    width={24}
                   />
-                  <p className="text-primary test-sm">{chain.name}</p>
+                  <p className="test-sm text-primary">{chain.name}</p>
                 </div>
               </SelectItem>
             );
diff --git a/apps/monad/src/components/fast-bridge/components/fee-breakdown.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/fee-breakdown.tsx
similarity index 51%
rename from apps/monad/src/components/fast-bridge/components/fee-breakdown.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/fee-breakdown.tsx
index 93655ba..2cbf499 100644
--- a/apps/monad/src/components/fast-bridge/components/fee-breakdown.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/fee-breakdown.tsx
@@ -1,25 +1,41 @@
-import { type FC } from "react";
+import type {
+  ReadableIntent,
+  SUPPORTED_TOKENS,
+} from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
+import { MessageCircleQuestion } from "lucide-react";
+import type { FC } from "react";
+import { useNexus } from "../../nexus/nexus-provider";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../../ui/accordion";
-import { type ReadableIntent } from "@avail-project/nexus-core";
 import { Skeleton } from "../../ui/skeleton";
-import { useNexus } from "../../nexus/NexusProvider";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
-import { MessageCircleQuestion } from "lucide-react";
 
 interface FeeBreakdownProps {
   intent: ReadableIntent;
   isLoading?: boolean;
+  tokenSymbol: SUPPORTED_TOKENS;
 }
 
-const FeeBreakdown: FC<FeeBreakdownProps> = ({ intent, isLoading = false }) => {
+const FeeBreakdown: FC<FeeBreakdownProps> = ({
+  intent,
+  tokenSymbol,
+  isLoading = false,
+}) => {
   const { nexusSDK } = useNexus();
-  const feeSymbol =
-    intent.token?.displaySymbol ?? intent.token?.symbol ?? "USDC";
+  const displaySymbol =
+    chainFeatures.mapUsdmDisplaySymbolToUsdc &&
+    intent.token?.symbol?.toUpperCase() === "USDM"
+      ? "USDC"
+      : tokenSymbol;
+  const shouldForceZeroFees =
+    chainFeatures.feeBreakdownZeroForNonCaGasOnDestinationId !== undefined &&
+    intent.destination.chainID ===
+      chainFeatures.feeBreakdownZeroForNonCaGasOnDestinationId;
 
   const feeRows = [
     {
@@ -50,60 +66,75 @@ const FeeBreakdown: FC<FeeBreakdownProps> = ({ intent, isLoading = false }) => {
       description:
         "Fees collected by the protocol for maintaining and operating the bridge infrastructure.",
     },
-  ];
+  ].filter((row) =>
+    chainFeatures.feeBreakdownHideGasSupplied ? row.key !== "gasSupplied" : true
+  );
 
   return (
-    <Accordion type="single" collapsible className="w-full">
+    <Accordion className="w-full" collapsible type="single">
       <AccordionItem value="breakdown">
-        <div className="w-full flex items-start justify-between">
+        <div className="flex w-full items-start justify-between">
           <p className="font-light text-base">Total fees</p>
 
-          <div className="flex flex-col items-end justify-end-safe gap-y-1">
+          <div className="justify-end-safe flex flex-col items-end gap-y-1">
             {isLoading ? (
               <Skeleton className="h-5 w-24" />
             ) : (
-              <p className="font-light text-base min-w-max">
+              <p className="min-w-max font-light text-base">
                 {nexusSDK?.utils?.formatTokenBalance(intent.fees?.total, {
-                  symbol: feeSymbol,
+                  symbol: displaySymbol,
                   decimals: intent?.token?.decimals,
                 })}
               </p>
             )}
             <AccordionTrigger
+              className="items-center gap-x-1 p-0"
               containerClassName="w-fit"
-              className="p-0 items-center gap-x-1"
               hideChevron={false}
             >
-              <p className="text-sm font-light">View Breakup</p>
+              <p className="font-light text-sm">View Breakup</p>
             </AccordionTrigger>
           </div>
         </div>
         <AccordionContent>
-          <div className="w-full flex flex-col items-center justify-between gap-y-3 bg-muted px-4 py-2 rounded-lg mt-2">
+          <div className="mt-2 flex w-full flex-col items-center justify-between gap-y-3 rounded-lg bg-muted px-4 py-2">
             {feeRows.map(({ key, label, value, description }) => {
-              // if (Number.parseFloat(value ?? "0") <= 0) return null;
+              if (
+                !chainFeatures.feeBreakdownKeepZeroRows &&
+                Number.parseFloat(value ?? "0") <= 0
+              ) {
+                return null;
+              }
+              let feeValueNode = <Skeleton className="h-4 w-20" />;
+              if (!isLoading) {
+                if (shouldForceZeroFees && key !== "caGas") {
+                  feeValueNode = (
+                    <p className="font-semibold text-primary text-sm">0 Fees</p>
+                  );
+                } else {
+                  feeValueNode = (
+                    <p className="font-light text-sm">
+                      {nexusSDK?.utils?.formatTokenBalance(value, {
+                        symbol: displaySymbol,
+                        decimals: intent?.token?.decimals,
+                      })}
+                    </p>
+                  );
+                }
+              }
               return (
                 <Tooltip key={key}>
-                  <div className="flex items-center w-full justify-between">
+                  <div className="flex w-full items-center justify-between">
                     <div className="flex items-center gap-x-2">
-                      <p className="text-sm font-light">{label}</p>
+                      <p className="font-light text-sm">{label}</p>
                       <TooltipTrigger asChild>
                         <MessageCircleQuestion className="size-4" />
                       </TooltipTrigger>
                     </div>
-                    {isLoading ? (
-                      <Skeleton className="h-4 w-20" />
-                    ) : (
-                      <p className="text-sm font-light">
-                        {nexusSDK?.utils?.formatTokenBalance(value, {
-                          symbol: feeSymbol,
-                          decimals: intent?.token?.decimals,
-                        })}
-                      </p>
-                    )}
+                    {feeValueNode}
                   </div>
                   <TooltipContent className="max-w-sm text-balance">
-                    <p className="text-sm font-light">{description}</p>
+                    <p className="font-light text-sm">{description}</p>
                   </TooltipContent>
                 </Tooltip>
               );
diff --git a/apps/megaeth/src/components/fast-bridge/components/fluffey-mascot.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/fluffey-mascot.tsx
similarity index 85%
rename from apps/megaeth/src/components/fast-bridge/components/fluffey-mascot.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/fluffey-mascot.tsx
index 3e0d393..8b07c3b 100644
--- a/apps/megaeth/src/components/fast-bridge/components/fluffey-mascot.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/fluffey-mascot.tsx
@@ -3,12 +3,10 @@ import { useCallback, useEffect, useRef } from "react";
 
 // Fluffey SVG natural dimensions
 const SVG_WIDTH = 148;
-const SVG_HEIGHT = 419;
 
 // Rendered display size
 const DISPLAY_WIDTH = 300;
 const SCALE = DISPLAY_WIDTH / SVG_WIDTH;
-const DISPLAY_HEIGHT = Math.round(SVG_HEIGHT * SCALE);
 
 // Eye centers in SVG coordinate space (derived from the path data)
 const LEFT_EYE = { x: 43, y: 186.5 };
@@ -26,15 +24,16 @@ export default function FluffeyMascot() {
   const rafRef = useRef<number>(0);
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
 
     rafRef.current = requestAnimationFrame(() => {
       if (
-        !containerRef.current ||
-        !leftIrisRef.current ||
-        !rightIrisRef.current
-      )
+        !(containerRef.current && leftIrisRef.current && rightIrisRef.current)
+      ) {
         return;
+      }
 
       const rect = containerRef.current.getBoundingClientRect();
 
@@ -46,7 +45,9 @@ export default function FluffeyMascot() {
       const dy = e.clientY - eyeMidY;
       const dist = Math.sqrt(dx * dx + dy * dy);
 
-      if (dist === 0) return;
+      if (dist === 0) {
+        return;
+      }
 
       // Ramp factor: gradually increase with distance, max out far away
       const factor = Math.min(dist / 300, 1);
@@ -63,7 +64,9 @@ export default function FluffeyMascot() {
     window.addEventListener("mousemove", handleMouseMove);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
   }, [handleMouseMove]);
 
@@ -78,27 +81,23 @@ export default function FluffeyMascot() {
 
   return (
     <div
-      className="
-    fluffey-wrapper
-    fixed bottom-0
-    pointer-events-none
-    z-10
-  "
+      className="fluffey-wrapper pointer-events-none fixed bottom-0 z-10"
       style={{ width: DISPLAY_WIDTH }}
     >
       <div
-        ref={containerRef}
         className="relative"
+        ref={containerRef}
         style={{
           animation: "fluffyPopUp 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both",
         }}
       >
         {/* Irises behind Fluffey — visible through transparent eye holes */}
         <img
-          ref={leftIrisRef}
-          src="https://files.availproject.org/fastbridge/megaeth/Iris.svg"
           alt=""
           className="absolute"
+          height={IRIS_SIZE}
+          ref={leftIrisRef}
+          src="https://files.availproject.org/fastbridge/megaeth/Iris.svg"
           style={{
             width: IRIS_SIZE,
             height: IRIS_SIZE,
@@ -106,12 +105,14 @@ export default function FluffeyMascot() {
             top: leftIrisPos.top,
             zIndex: 1,
           }}
+          width={IRIS_SIZE}
         />
         <img
-          ref={rightIrisRef}
-          src="https://files.availproject.org/fastbridge/megaeth/Iris.svg"
           alt=""
           className="absolute"
+          height={IRIS_SIZE}
+          ref={rightIrisRef}
+          src="https://files.availproject.org/fastbridge/megaeth/Iris.svg"
           style={{
             width: IRIS_SIZE,
             height: IRIS_SIZE,
@@ -119,14 +120,17 @@ export default function FluffeyMascot() {
             top: rightIrisPos.top,
             zIndex: 1,
           }}
+          width={IRIS_SIZE}
         />
         {/* Fluffey body on top — eye holes are transparent cutouts */}
         <img
-          src="https://files.availproject.org/fastbridge/megaeth/Fluffey.svg"
           alt="Fluffey"
-          className="relative w-full h-full"
-          style={{ zIndex: 2 }}
+          className="relative h-full w-full"
           draggable={false}
+          height={DISPLAY_WIDTH}
+          src="https://files.availproject.org/fastbridge/megaeth/Fluffey.svg"
+          style={{ zIndex: 2 }}
+          width={DISPLAY_WIDTH}
         />
       </div>
     </div>
diff --git a/apps/monad/src/components/fast-bridge/components/recipient-address.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/recipient-address.tsx
similarity index 71%
rename from apps/monad/src/components/fast-bridge/components/recipient-address.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/recipient-address.tsx
index 5a7fa6f..ac6c659 100644
--- a/apps/monad/src/components/fast-bridge/components/recipient-address.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/recipient-address.tsx
@@ -1,15 +1,15 @@
 "use client";
-import { type FC, useState } from "react";
-import { Input } from "../../ui/input";
 import { Check, Edit } from "lucide-react";
+import { type FC, useState } from "react";
+import type { Address } from "viem";
+import { useNexus } from "../../nexus/nexus-provider";
 import { Button } from "../../ui/button";
-import { useNexus } from "../../nexus/NexusProvider";
-import { type Address } from "viem";
+import { Input } from "../../ui/input";
 
 interface RecipientAddressProps {
   address?: Address;
-  onChange: (address: string) => void;
   disabled?: boolean;
+  onChange: (address: string) => void;
 }
 
 const RecipientAddress: FC<RecipientAddressProps> = ({
@@ -20,52 +20,56 @@ const RecipientAddress: FC<RecipientAddressProps> = ({
   const { nexusSDK } = useNexus();
   const [isEditing, setIsEditing] = useState(false);
   const fallbackTruncate = (value: string, head = 6, tail = 6) => {
-    if (!value) return "";
-    if (value.length <= head + tail) return value;
+    if (!value) {
+      return "";
+    }
+    if (value.length <= head + tail) {
+      return value;
+    }
     return `${value.slice(0, head)}...${value.slice(-tail)}`;
   };
-  const displayAddress =
-    address && nexusSDK?.utils?.truncateAddress
-      ? nexusSDK.utils.truncateAddress(address, 6, 6)
-      : address
-        ? fallbackTruncate(address, 6, 6)
-        : "";
+  let displayAddress = "";
+  if (address && nexusSDK?.utils?.truncateAddress) {
+    displayAddress = nexusSDK.utils.truncateAddress(address, 6, 6);
+  } else if (address) {
+    displayAddress = fallbackTruncate(address, 6, 6);
+  }
   return (
     <div className="w-full">
       {isEditing ? (
-        <div className="flex items-center w-full justify-between gap-x-4">
+        <div className="flex w-full items-center justify-between gap-x-4">
           <Input
-            value={address}
-            placeholder="Enter Recipient Address"
-            onChange={(e) => onChange(e.target.value)}
             className="w-full"
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Enter Recipient Address"
+            value={address}
           />
           <Button
-            variant={"ghost"}
-            size={"icon"}
             onClick={() => {
               setIsEditing(false);
             }}
+            size={"icon"}
+            variant={"ghost"}
           >
             <Check className="size-5" />
           </Button>
         </div>
       ) : (
-        <div className="flex flex-col sm:flex-row items-start sm:items-center w-full justify-between">
+        <div className="flex w-full flex-col items-start justify-between sm:flex-row sm:items-center">
           <p className="font-light text-base">Recipient Address</p>
-          <div className="flex items-center gap-x-3 ">
+          <div className="flex items-center gap-x-3">
             {address && (
               <p className="font-light text-base">{displayAddress}</p>
             )}
 
             <Button
-              variant={"ghost"}
-              size={"icon"}
+              className="size-5 px-0"
+              disabled={disabled}
               onClick={() => {
                 setIsEditing(true);
               }}
-              className="px-0 size-5"
-              disabled={disabled}
+              size={"icon"}
+              variant={"ghost"}
             >
               <Edit className="size-5" />
             </Button>
diff --git a/packages/fast-bridge-app/src/components/fast-bridge/components/source-breakdown.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/source-breakdown.tsx
new file mode 100644
index 0000000..9c87809
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/source-breakdown.tsx
@@ -0,0 +1,330 @@
+import {
+  formatTokenBalance,
+  type ReadableIntent,
+  type SUPPORTED_TOKENS,
+  type UserAsset,
+} from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
+import { cn } from "@/lib/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../ui/accordion";
+import { Checkbox } from "../../ui/checkbox";
+import { Skeleton } from "../../ui/skeleton";
+
+type SourceCoverageState = "healthy" | "warning" | "error";
+
+interface SourceBreakdownProps {
+  availableSources: UserAsset["breakdown"];
+  intent?: ReadableIntent;
+  isLoading?: boolean;
+  isSourceSelectionInsufficient?: boolean;
+  missingToProceed?: string;
+  missingToSafety?: string;
+  onSourceMenuOpenChange?: (open: boolean) => void;
+  onToggleSourceChain: (chainId: number) => void;
+  requiredSafetyTotal?: string;
+  requiredTotal?: string;
+  selectedSourceChains: number[];
+  selectedTotal?: string;
+  sourceCoveragePercent?: number;
+  sourceCoverageState?: SourceCoverageState;
+  tokenSymbol: SUPPORTED_TOKENS;
+}
+
+function getCoverageToneClass(coverageState: SourceCoverageState): string {
+  if (coverageState === "error") {
+    return "text-rose-500";
+  }
+  if (coverageState === "warning") {
+    return "text-amber-500";
+  }
+  return "text-emerald-500";
+}
+
+function getCoverageSurfaceClass(coverageState: SourceCoverageState): string {
+  if (coverageState === "error") {
+    return "text-rose-950 dark:text-rose-200";
+  }
+  if (coverageState === "warning") {
+    return "text-amber-950 dark:text-amber-200";
+  }
+  return "text-emerald-950 dark:text-emerald-200";
+}
+
+const SourceBreakdown = ({
+  intent,
+  tokenSymbol,
+  isLoading = false,
+  availableSources,
+  selectedSourceChains,
+  onToggleSourceChain,
+  onSourceMenuOpenChange,
+  isSourceSelectionInsufficient = false,
+  sourceCoverageState = "healthy",
+  sourceCoveragePercent = 100,
+  missingToProceed,
+  selectedTotal,
+  requiredTotal,
+  requiredSafetyTotal,
+}: SourceBreakdownProps) => {
+  const displayTokenSymbol =
+    chainFeatures.mapUsdmDisplaySymbolToUsdc &&
+    intent?.token?.symbol?.toUpperCase() === "USDM"
+      ? "USDC"
+      : tokenSymbol;
+  const normalizedCoverage = Math.max(0, Math.min(100, sourceCoveragePercent));
+  const progressRadius = 16;
+  const progressCircumference = 2 * Math.PI * progressRadius;
+  const progressOffset =
+    progressCircumference - (normalizedCoverage / 100) * progressCircumference;
+  const showCoverageFeedback = Boolean(
+    selectedTotal && requiredTotal && requiredSafetyTotal
+  );
+  const shouldShowProceedMessage =
+    sourceCoverageState === "error" &&
+    Number.parseFloat(missingToProceed ?? "0") > 0;
+
+  const coverageToneClass = getCoverageToneClass(sourceCoverageState);
+  const coverageSurfaceClass = getCoverageSurfaceClass(sourceCoverageState);
+
+  return (
+    <Accordion
+      className="w-full"
+      collapsible
+      onValueChange={(value) => onSourceMenuOpenChange?.(value === "sources")}
+      type="single"
+    >
+      <AccordionItem value="sources">
+        <div className="flex w-full items-start justify-between gap-x-4">
+          {isLoading ? (
+            <>
+              <div className="flex min-w-fit flex-col items-start gap-y-1">
+                <p className="font-light text-base">You Spend</p>
+                <Skeleton className="h-4 w-44" />
+              </div>
+              <div className="flex min-w-fit flex-col items-end gap-y-1">
+                <Skeleton className="h-5 w-24" />
+                <div className="w-fit">
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+            </>
+          ) : (
+            intent?.sources && (
+              <>
+                <div className="flex min-w-fit flex-col items-start gap-y-1">
+                  <p className="font-light text-base">You Spend</p>
+                  <p className="font-light text-sm">
+                    {`${displayTokenSymbol} on ${
+                      intent?.sources?.length
+                    } ${intent?.sources?.length > 1 ? "chains" : "chain"}`}
+                  </p>
+                </div>
+
+                <div className="flex min-w-fit flex-col items-end gap-y-1">
+                  <p className="font-light text-base">
+                    {formatTokenBalance(intent?.sourcesTotal, {
+                      symbol: displayTokenSymbol,
+                      decimals: intent?.token?.decimals,
+                    })}
+                  </p>
+                  <AccordionTrigger
+                    className="items-center gap-x-1 py-0"
+                    containerClassName="w-fit"
+                    hideChevron={false}
+                  >
+                    <p className="font-light text-sm">View Sources</p>
+                  </AccordionTrigger>
+                </div>
+              </>
+            )
+          )}
+        </div>
+        {!isLoading && (
+          <AccordionContent className="my-4 w-full rounded-lg bg-muted px-4 py-2 pb-0">
+            {showCoverageFeedback && (
+              <div
+                className={cn(
+                  "mb-3 rounded-md py-2 text-sm",
+                  coverageSurfaceClass
+                )}
+              >
+                <div className="flex items-center gap-3">
+                  <div className="relative size-12 shrink-0">
+                    <svg
+                      aria-hidden="true"
+                      className="size-12 -rotate-90"
+                      viewBox="0 0 48 48"
+                    >
+                      <circle
+                        className="text-muted-foreground/30"
+                        cx="24"
+                        cy="24"
+                        fill="none"
+                        r={progressRadius}
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <circle
+                        className={coverageToneClass}
+                        cx="24"
+                        cy="24"
+                        fill="none"
+                        r={progressRadius}
+                        stroke="currentColor"
+                        strokeDasharray={progressCircumference}
+                        strokeDashoffset={progressOffset}
+                        strokeLinecap="round"
+                        strokeWidth="4"
+                      />
+                    </svg>
+                    <span className="absolute inset-0 flex items-center justify-center p-1 font-medium text-[10px]">
+                      {Math.round(normalizedCoverage)}%
+                    </span>
+                  </div>
+
+                  <div className="flex flex-col gap-y-0.5">
+                    <p className="font-medium">
+                      Available on selected chains:{" "}
+                      <span className="font-semibold">
+                        {formatTokenBalance(
+                          Number.parseFloat(selectedTotal ?? "0"),
+                          {
+                            symbol: displayTokenSymbol,
+                            decimals: intent?.token?.decimals,
+                          }
+                        )}
+                      </span>
+                    </p>
+                    <p className="font-medium">
+                      Required for this transaction:{" "}
+                      <span className="font-semibold">
+                        {formatTokenBalance(
+                          Number.parseFloat(requiredSafetyTotal ?? "0"),
+                          {
+                            symbol: displayTokenSymbol,
+                            decimals: intent?.token?.decimals,
+                          }
+                        )}
+                      </span>
+                    </p>
+                    {shouldShowProceedMessage && (
+                      <p>
+                        Need{" "}
+                        <span className="font-semibold">
+                          {missingToProceed} {displayTokenSymbol}
+                        </span>{" "}
+                        more on selected chains to continue.
+                      </p>
+                    )}
+                    {!isSourceSelectionInsufficient &&
+                      sourceCoverageState === "healthy" && (
+                        <p>
+                          You&apos;re all set. We&apos;ll only use what&apos;s
+                          needed from these selected chains.
+                        </p>
+                      )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {availableSources.length === 0 ? (
+              <p className="py-2 text-muted-foreground text-sm">
+                No source balances available for this token.
+              </p>
+            ) : (
+              <div className="flex flex-col items-center gap-y-3">
+                {availableSources.map((source) => {
+                  const chainId = source.chain.id;
+                  const isSelected = selectedSourceChains.includes(chainId);
+                  const isLastSelected = isSelected
+                    ? selectedSourceChains.length === 1
+                    : false;
+                  const willUseAmount = intent?.sources?.find(
+                    (s) => s.chainID === chainId
+                  )?.amount;
+
+                  return (
+                    <button
+                      className={cn(
+                        "flex w-full select-none items-center justify-between gap-x-2 text-left",
+                        isLastSelected
+                          ? "cursor-not-allowed opacity-80"
+                          : "cursor-pointer"
+                      )}
+                      disabled={isLastSelected}
+                      key={chainId}
+                      onClick={() => {
+                        if (isLastSelected) {
+                          return;
+                        }
+                        onToggleSourceChain(chainId);
+                      }}
+                      type="button"
+                    >
+                      <div className="flex items-center gap-x-2">
+                        <Checkbox
+                          aria-label={`Select ${source.chain.name} as a source`}
+                          checked={isSelected}
+                          disabled={isLastSelected}
+                          onCheckedChange={() => {
+                            if (isLastSelected) {
+                              return;
+                            }
+                            onToggleSourceChain(chainId);
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        <img
+                          alt={source.chain.name}
+                          className="rounded-full"
+                          height={20}
+                          src={source.chain.logo}
+                          width={20}
+                        />
+                        <p className="font-light text-base">
+                          {source.chain.name}
+                        </p>
+                      </div>
+
+                      <div className="flex min-w-fit flex-col items-end gap-y-0.5">
+                        <p className="font-light text-base">
+                          {formatTokenBalance(source.balance, {
+                            symbol: displayTokenSymbol,
+                            decimals: source.decimals,
+                          })}
+                        </p>
+                        {willUseAmount && (
+                          <p className="text-muted-foreground text-xs">
+                            Estimated to use:{" "}
+                            {formatTokenBalance(willUseAmount, {
+                              symbol: displayTokenSymbol,
+                              decimals: intent?.token?.decimals,
+                            })}
+                          </p>
+                        )}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
+            {availableSources.length > 0 && (
+              <div className="mt-3 space-y-1 text-muted-foreground text-xs">
+                <p>Keep at least 1 chain selected.</p>
+              </div>
+            )}
+          </AccordionContent>
+        )}
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default SourceBreakdown;
diff --git a/apps/citrea/src/components/fast-bridge/components/token-select.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/token-select.tsx
similarity index 78%
rename from apps/citrea/src/components/fast-bridge/components/token-select.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/token-select.tsx
index 48875e6..e18f0f7 100644
--- a/apps/citrea/src/components/fast-bridge/components/token-select.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/token-select.tsx
@@ -1,8 +1,11 @@
-import {
-  SUPPORTED_CHAINS,
-  type SUPPORTED_CHAINS_IDS,
-  type SUPPORTED_TOKENS,
+import type {
+  SUPPORTED_CHAINS_IDS,
+  SUPPORTED_TOKENS,
 } from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
+import { useMemo } from "react";
+import { useNexus } from "../../nexus/nexus-provider";
+import { Label } from "../../ui/label";
 import {
   Select,
   SelectContent,
@@ -11,17 +14,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import { Label } from "../../ui/label";
-import { useNexus } from "../../nexus/NexusProvider";
-import { useMemo } from "react";
 
 interface TokenSelectProps {
-  selectedToken?: SUPPORTED_TOKENS;
-  selectedChain: SUPPORTED_CHAINS_IDS;
+  disabled?: boolean;
   handleTokenSelect: (token: SUPPORTED_TOKENS) => void;
   isTestnet?: boolean;
-  disabled?: boolean;
   label?: string;
+  selectedChain: SUPPORTED_CHAINS_IDS;
+  selectedToken?: SUPPORTED_TOKENS;
 }
 
 const TokenSelect = ({
@@ -37,10 +37,11 @@ const TokenSelect = ({
     const data = supportedChainsAndTokens
       ?.filter((chain) => chain.id === selectedChain)
       .flatMap((chain) => chain.tokens);
-    if (selectedChain === SUPPORTED_CHAINS.CITREA) {
-      return data?.filter((token) => token.symbol !== "cBTC");
+    const denyList = chainFeatures.tokenDenyListByChainId?.[selectedChain];
+    if (!denyList?.length) {
+      return data;
     }
-    return data;
+    return data?.filter((token) => !denyList.includes(token.symbol));
   }, [selectedChain, supportedChainsAndTokens]);
 
   const selectedTokenData = tokenData?.find((token) => {
@@ -49,26 +50,26 @@ const TokenSelect = ({
 
   return (
     <Select
-      value={selectedToken}
       onValueChange={(value) =>
         !disabled && handleTokenSelect(value as SUPPORTED_TOKENS)
       }
+      value={selectedToken}
     >
       <div className="flex flex-col items-start gap-y-1">
-        {label && <Label className="text-sm font-semibold">{label}</Label>}
+        {label && <Label className="font-semibold text-sm">{label}</Label>}
         <SelectTrigger
+          className="h-12! w-full font-light text-base"
           disabled={disabled}
-          className="w-full h-12! text-base font-light"
         >
-          <SelectValue placeholder="Select a token" className="w-full">
+          <SelectValue className="w-full" placeholder="Select a token">
             {selectedChain && selectedTokenData && (
-              <div className="flex items-center gap-x-2 w-full">
+              <div className="flex w-full items-center gap-x-2">
                 <img
-                  src={selectedTokenData?.logo}
                   alt={selectedTokenData?.symbol}
-                  width={24}
-                  height={24}
                   className="rounded-full"
+                  height={24}
+                  src={selectedTokenData?.logo}
+                  width={24}
                 />
                 {selectedToken}
               </div>
@@ -81,13 +82,13 @@ const TokenSelect = ({
         <SelectGroup>
           {tokenData?.map((token) => (
             <SelectItem key={token.symbol} value={token.symbol}>
-              <div className="flex items-center gap-x-2 my-1">
+              <div className="my-1 flex items-center gap-x-2">
                 <img
-                  src={token.logo}
                   alt={token.symbol}
-                  width={24}
-                  height={24}
                   className="rounded-full"
+                  height={24}
+                  src={token.logo}
+                  width={24}
                 />
                 <div className="flex flex-col">
                   <span>
diff --git a/apps/megaeth/src/components/fast-bridge/components/transaction-progress.tsx b/packages/fast-bridge-app/src/components/fast-bridge/components/transaction-progress.tsx
similarity index 71%
rename from apps/megaeth/src/components/fast-bridge/components/transaction-progress.tsx
rename to packages/fast-bridge-app/src/components/fast-bridge/components/transaction-progress.tsx
index f877513..71b2014 100644
--- a/apps/megaeth/src/components/fast-bridge/components/transaction-progress.tsx
+++ b/packages/fast-bridge-app/src/components/fast-bridge/components/transaction-progress.tsx
@@ -1,21 +1,24 @@
-import { Check, Circle, LoaderPinwheel } from "lucide-react";
-import { type FC, memo, useMemo } from "react";
+import type { BridgeStepType, SwapStepType } from "@avail-project/nexus-core";
 import {
-  type BridgeStepType,
-  type SwapStepType,
-} from "@avail-project/nexus-core";
+  Check,
+  Circle,
+  LoaderPinwheel,
+  SquareArrowOutUpRight,
+} from "lucide-react";
+import { type FC, memo, useMemo } from "react";
+import { Button } from "../../ui/button";
 
 type ProgressStep = BridgeStepType | SwapStepType;
 
 interface TransactionProgressProps {
-  timer: number;
+  completed?: boolean;
+  operationType?: string;
   steps: Array<{ id: number; completed: boolean; step: ProgressStep }>;
+  timer: number;
   viewIntentUrl?: string;
-  operationType?: string;
-  completed?: boolean;
 }
 
-export const getOperationText = (type: string) => {
+const getOperationText = (type: string) => {
   switch (type) {
     case "bridge":
       return "Transaction";
@@ -30,12 +33,16 @@ export const getOperationText = (type: string) => {
   }
 };
 
-type DisplayStep = { id: string; label: string; completed: boolean };
+interface DisplayStep {
+  completed: boolean;
+  id: string;
+  label: string;
+}
 
 const StepList: FC<{ steps: DisplayStep[]; currentIndex: number }> = memo(
   ({ steps, currentIndex }) => {
     return (
-      <div className="w-full mt-6 space-y-6">
+      <div className="mt-6 w-full space-y-6">
         {steps.map((s, idx) => {
           const isCompleted = !!s.completed;
           const isCurrent = currentIndex === -1 ? false : idx === currentIndex;
@@ -51,11 +58,11 @@ const StepList: FC<{ steps: DisplayStep[]; currentIndex: number }> = memo(
 
           return (
             <div
+              className="flex w-full items-center justify-between"
               key={s.id}
-              className="flex items-center justify-between w-full"
             >
               <div className="flex items-center gap-x-3">
-                <span className="text-base font-semibold">{s.label}</span>
+                <span className="font-semibold text-base">{s.label}</span>
               </div>
               {rightIcon}
             </div>
@@ -85,7 +92,7 @@ const TransactionProgress: FC<TransactionProgressProps> = ({
   const headerText = allCompleted
     ? `${opText} Completed`
     : `${opText} In Progress...`;
-  const ctaText = allCompleted ? `View Explorer` : "View Intent";
+  const ctaText = allCompleted ? "View Explorer" : "View Intent";
 
   const { effectiveSteps, currentIndex } = useMemo(() => {
     const milestones = [
@@ -103,10 +110,10 @@ const TransactionProgress: FC<TransactionProgressProps> = ({
     }));
     const current = displaySteps.findIndex((st) => !st.completed);
     return { effectiveSteps: displaySteps, currentIndex: current };
-  }, [percent, timer, completed]);
+  }, [percent, timer]);
 
   return (
-    <div className="w-full flex flex-col items-center">
+    <div className="flex w-full flex-col items-center">
       <div className="flex flex-col items-center gap-y-3">
         {allCompleted ? (
           <Check className="size-6 text-green-600" />
@@ -114,30 +121,28 @@ const TransactionProgress: FC<TransactionProgressProps> = ({
           <LoaderPinwheel className="size-6 animate-spin" />
         )}
         <p>{headerText}</p>
-        <div className="flex items-center justify-center w-full">
-          <span className="text-2xl font-semibold font-nexus-primary text-nexus-black">
+        <div className="flex w-full items-center justify-center">
+          <span className="font-nexus-primary font-semibold text-2xl text-nexus-black">
             {Math.floor(timer)}
           </span>
-          <span className="text-base font-semibold font-nexus-primary text-nexus-black">
+          <span className="font-nexus-primary font-semibold text-base text-nexus-black">
             .
           </span>
-          <span className="text-base font-semibold font-nexus-primary text-nexus-muted-secondary">
+          <span className="font-nexus-primary font-semibold text-base text-nexus-muted-secondary">
             {String(Math.floor((timer % 1) * 1000)).padStart(3, "0")}s
           </span>
         </div>
       </div>
 
-      <StepList steps={effectiveSteps} currentIndex={currentIndex} />
+      <StepList currentIndex={currentIndex} steps={effectiveSteps} />
 
       {viewIntentUrl && (
-        <a
-          href={viewIntentUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="mt-8 underline font-semibold"
-        >
-          {ctaText}
-        </a>
+        <Button asChild className="mt-8" variant="outline">
+          <a href={viewIntentUrl} rel="noreferrer" target="_blank">
+            {ctaText}
+            <SquareArrowOutUpRight className="size-4" />
+          </a>
+        </Button>
       )}
     </div>
   );
diff --git a/packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx b/packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx
new file mode 100644
index 0000000..ba5c3fb
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/fast-bridge/fast-bridge.tsx
@@ -0,0 +1,727 @@
+"use client";
+import type {
+  SUPPORTED_CHAINS_IDS,
+  SUPPORTED_TOKENS,
+} from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
+import Decimal from "decimal.js";
+import { CheckCircle2, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import type { Address } from "viem";
+import { useWalletClient } from "wagmi";
+import { useNexus } from "../nexus/nexus-provider";
+import { Button } from "../ui/button";
+import { Card, CardContent } from "../ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import { EncryptedText } from "../ui/encrypted-text";
+import { Skeleton } from "../ui/skeleton";
+import ViewHistory from "../view-history/view-history";
+import AllowanceModal from "./components/allowance-modal";
+import AmountInput from "./components/amount-input";
+import ChainSelect from "./components/chain-select";
+import FeeBreakdown from "./components/fee-breakdown";
+import FluffeyMascot from "./components/fluffey-mascot";
+import RecipientAddress from "./components/recipient-address";
+import SourceBreakdown from "./components/source-breakdown";
+import TokenSelect from "./components/token-select";
+import TransactionProgress from "./components/transaction-progress";
+import useBridge from "./hooks/use-bridge";
+
+const TRAILING_ZEROES_REGEX = /\.?0+$/;
+
+const formatMockNumber = (value: number) => {
+  if (!Number.isFinite(value)) {
+    return "--";
+  }
+  const fixed = value.toFixed(6);
+  return fixed.replace(TRAILING_ZEROES_REGEX, "");
+};
+
+const formatWithToken = (value: string, token?: string) => {
+  if (!token) {
+    return value;
+  }
+  return `${value} ${token}`.trim();
+};
+
+const getDisplayTokenSymbol = (
+  tokenSymbol: string | undefined,
+  mapUsdmToUsdc: boolean
+) => {
+  if (!tokenSymbol) {
+    return "Unknown";
+  }
+  if (mapUsdmToUsdc && tokenSymbol.toUpperCase() === "USDM") {
+    return "USDC";
+  }
+  return tokenSymbol;
+};
+
+const getPrimaryButtonLabel = ({
+  isLoading,
+  isConnected,
+  isSdkReady,
+  isInputsValid,
+  hasError,
+}: {
+  hasError: boolean;
+  isLoading: boolean;
+  isConnected: boolean;
+  isInputsValid: boolean;
+  isSdkReady: boolean;
+}) => {
+  if (!isConnected) {
+    return "Connect Wallet";
+  }
+  if (!isSdkReady) {
+    return "Initializing...";
+  }
+  if (!isInputsValid) {
+    return "Bridge";
+  }
+  if (isLoading) {
+    return "Fetching intent...";
+  }
+  return hasError ? "Retry" : "Bridge";
+};
+
+interface FastBridgeProps {
+  connectedAddress?: Address;
+  isWalletConnected?: boolean;
+  mockIntent?: {
+    totalAmount?: string;
+    receiveAmount?: string;
+    totalGas?: string;
+  };
+  onComplete?: () => void;
+  onConnectWallet?: () => void;
+  onError?: (message: string) => void;
+  onStart?: () => void;
+  prefill?: {
+    token: SUPPORTED_TOKENS;
+    chainId: SUPPORTED_CHAINS_IDS;
+    amount?: string;
+    recipient?: Address;
+  };
+}
+
+interface BridgeSuccessToastData {
+  amountReceived: string;
+  amountSpent: string;
+  asset: string;
+  destination: string;
+  sources: string;
+  totalFees: string;
+}
+
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: This component coordinates bridge form state, SDK lifecycle, and transaction UI in one view.
+function FastBridge({
+  connectedAddress,
+  isWalletConnected,
+  onConnectWallet,
+  mockIntent,
+  onComplete,
+  onStart,
+  onError,
+  prefill,
+}: FastBridgeProps) {
+  const maxBridgeAmount = chainFeatures.maxBridgeAmount;
+  const mapUsdmToUsdc = chainFeatures.mapUsdmDisplaySymbolToUsdc;
+  const postBridgeWatchAsset = chainFeatures.postBridgeWatchAsset;
+
+  const {
+    nexusSDK,
+    intent,
+    bridgableBalance,
+    allowance,
+    network,
+    fetchBridgableBalance,
+  } = useNexus();
+  const { data: walletClient } = useWalletClient();
+  const [historyRefreshNonce, setHistoryRefreshNonce] = useState(0);
+  const [isSourceMenuOpen, setIsSourceMenuOpen] = useState(false);
+
+  const buildBridgeSuccessToastData =
+    useCallback((): BridgeSuccessToastData => {
+      const currentIntent = intent.current?.intent;
+      const sourcesText =
+        currentIntent?.sources && currentIntent.sources.length > 0
+          ? currentIntent.sources.map((source) => source.chainName).join(", ")
+          : "N/A";
+      const destination = currentIntent?.destination?.chainName ?? "Unknown";
+      const tokenSymbol = currentIntent?.token?.symbol;
+      const displaySymbol = getDisplayTokenSymbol(tokenSymbol, mapUsdmToUsdc);
+      const asset = tokenSymbol ?? "Unknown";
+      const amountSpent = currentIntent?.sourcesTotal
+        ? new Decimal(currentIntent.sourcesTotal).toFixed()
+        : "NaN";
+      const amountReceived = currentIntent?.destination?.amount
+        ? new Decimal(currentIntent.destination.amount).toFixed()
+        : "NaN";
+      const totalFees = currentIntent?.fees?.total
+        ? new Decimal(currentIntent.fees.total).toFixed()
+        : "NaN";
+
+      return {
+        sources: sourcesText,
+        destination,
+        asset,
+        amountSpent: `${amountSpent} ${displaySymbol}`,
+        amountReceived: `${amountReceived} ${asset}`,
+        totalFees: `${totalFees} ${displaySymbol}`,
+      };
+    }, [intent, mapUsdmToUsdc]);
+
+  const runPostBridgeWalletAction = useCallback(async () => {
+    const destinationChainId = Number(
+      intent.current?.intent?.destination?.chainID
+    );
+    const tokenSymbol = intent.current?.intent?.token?.symbol;
+    if (
+      !postBridgeWatchAsset ||
+      tokenSymbol?.toUpperCase() !==
+        postBridgeWatchAsset.tokenSymbol.toUpperCase() ||
+      destinationChainId !== postBridgeWatchAsset.destinationChainId
+    ) {
+      return;
+    }
+    try {
+      const currentChainId = await walletClient?.getChainId?.();
+      if (
+        currentChainId &&
+        currentChainId !== postBridgeWatchAsset.destinationChainId
+      ) {
+        await walletClient?.switchChain?.({
+          id: postBridgeWatchAsset.destinationChainId,
+        });
+      }
+      await walletClient?.watchAsset?.({
+        type: "ERC20",
+        options: {
+          address: postBridgeWatchAsset.walletAsset.address as Address,
+          symbol: postBridgeWatchAsset.walletAsset.symbol,
+          decimals: postBridgeWatchAsset.walletAsset.decimals,
+          image: postBridgeWatchAsset.walletAsset.image,
+        },
+      });
+    } catch (error) {
+      console.error("Failed to add token to wallet:", error);
+    }
+  }, [intent, postBridgeWatchAsset, walletClient]);
+
+  const showBridgeSuccessToast = useCallback((data: BridgeSuccessToastData) => {
+    toast.success(
+      <div className="flex w-full flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="size-5 text-green-500" />
+          <span className="font-semibold">Bridge Successful!</span>
+        </div>
+        <div className="flex flex-col gap-1.5 text-muted-foreground text-sm">
+          <div>
+            <span className="font-medium">Source(s):</span> {data.sources}
+          </div>
+          <div>
+            <span className="font-medium">Destination:</span> {data.destination}
+          </div>
+          <div>
+            <span className="font-medium">Asset:</span> {data.asset}
+          </div>
+          <div>
+            <span className="font-medium">Amount Spent:</span>{" "}
+            {data.amountSpent}
+          </div>
+          <div>
+            <span className="font-medium">Amount Received:</span>{" "}
+            {data.amountReceived}
+          </div>
+          <div>
+            <span className="font-medium">Total Fees:</span> {data.totalFees}
+          </div>
+        </div>
+      </div>,
+      {
+        duration: Number.POSITIVE_INFINITY,
+        closeButton: true,
+        icon: null,
+      }
+    );
+  }, []);
+
+  const {
+    inputs,
+    setInputs,
+    timer,
+    loading,
+    refreshing,
+    isDialogOpen,
+    txError,
+    setTxError,
+    handleTransaction,
+    reset,
+    filteredBridgableBalance,
+    startTransaction,
+    setIsDialogOpen,
+    commitAmount,
+    lastExplorerUrl,
+    steps,
+    status,
+    availableSources,
+    selectedSourceChains,
+    toggleSourceChain,
+    isSourceSelectionInsufficient,
+    isSourceSelectionReadyForAccept,
+    sourceCoverageState,
+    sourceCoveragePercent,
+    missingToProceed,
+    missingToSafety,
+    selectedTotal,
+    requiredTotal,
+    requiredSafetyTotal,
+    maxAvailableAmount,
+    isInputsValid,
+  } = useBridge({
+    prefill,
+    network: network ?? "mainnet",
+    connectedAddress,
+    nexusSDK,
+    intent,
+    bridgableBalance,
+    allowance,
+    onComplete: () => {
+      const toastData = buildBridgeSuccessToastData();
+      showBridgeSuccessToast(toastData);
+      if (onComplete) {
+        onComplete();
+      }
+      setHistoryRefreshNonce((prev) => prev + 1);
+      runPostBridgeWalletAction().catch((error) => {
+        console.error("Post-bridge wallet action failed:", error);
+      });
+    },
+    onStart,
+    onError: (message) => {
+      toast.error(message);
+      if (onError) {
+        onError(message);
+      }
+    },
+    fetchBalance: fetchBridgableBalance,
+    maxAmount: maxBridgeAmount,
+    isSourceMenuOpen,
+  });
+  const isConnected = isWalletConnected ?? Boolean(connectedAddress);
+  const isSdkReady = Boolean(nexusSDK);
+  const showSdkDetails = isSdkReady;
+  const receiveSymbol =
+    intent?.current?.intent?.token.symbol ?? filteredBridgableBalance?.symbol;
+
+  const amountValue = useMemo(() => {
+    if (!inputs?.amount) {
+      return null;
+    }
+    const parsed = Number.parseFloat(inputs.amount);
+    return Number.isFinite(parsed) ? parsed : null;
+  }, [inputs?.amount]);
+
+  const hasValidAmount = useMemo(() => {
+    if (amountValue === null) {
+      return false;
+    }
+    return amountValue > 0;
+  }, [amountValue]);
+
+  const tokenSuffix =
+    inputs?.token ?? filteredBridgableBalance?.symbol ?? "USDC";
+
+  const mockPreview = useMemo(() => {
+    if (!hasValidAmount || amountValue === null) {
+      return null;
+    }
+    if (mockIntent) {
+      return {
+        totalAmount: mockIntent.totalAmount ?? "--",
+        receiveAmount: mockIntent.receiveAmount ?? "--",
+        totalGas: mockIntent.totalGas ?? "--",
+      };
+    }
+    const totalGas = amountValue * 0.001;
+    const totalAmount = amountValue + totalGas;
+    return {
+      totalAmount: formatWithToken(formatMockNumber(totalAmount), tokenSuffix),
+      receiveAmount: formatWithToken(
+        formatMockNumber(amountValue),
+        tokenSuffix
+      ),
+      totalGas: formatWithToken(formatMockNumber(totalGas), tokenSuffix),
+    };
+  }, [amountValue, hasValidAmount, mockIntent, tokenSuffix]);
+
+  const showMockPreview = !isConnected && hasValidAmount && mockPreview;
+
+  const runHandleTransaction = useCallback(() => {
+    handleTransaction().catch((error) => {
+      console.error("Failed to handle transaction:", error);
+    });
+  }, [handleTransaction]);
+
+  const runCommitAmount = useCallback(() => {
+    commitAmount().catch((error) => {
+      console.error("Failed to commit amount:", error);
+    });
+  }, [commitAmount]);
+
+  useEffect(() => {
+    if (!intent.current?.intent) {
+      setIsSourceMenuOpen(false);
+    }
+  }, [intent.current?.intent]);
+
+  useEffect(() => {
+    if (!(isConnected && isSdkReady)) {
+      return;
+    }
+    if (
+      !(inputs?.amount && inputs?.chain && inputs?.token && inputs?.recipient)
+    ) {
+      return;
+    }
+    if (!isInputsValid) {
+      return;
+    }
+    if (status !== "idle" || txError) {
+      return;
+    }
+    // Wait for balance hydration before attempting auto intent creation.
+    if (!bridgableBalance) {
+      return;
+    }
+    if (availableSources.length === 0) {
+      return;
+    }
+    if (intent.current) {
+      return;
+    }
+    if (loading) {
+      return;
+    }
+    runHandleTransaction();
+  }, [
+    availableSources.length,
+    bridgableBalance,
+    inputs?.amount,
+    inputs?.chain,
+    inputs?.recipient,
+    inputs?.token,
+    isInputsValid,
+    intent,
+    isConnected,
+    isSdkReady,
+    loading,
+    runHandleTransaction,
+    status,
+    txError,
+  ]);
+  const hasStatusError = status === "error" || Boolean(txError);
+  const primaryButtonLabel = getPrimaryButtonLabel({
+    isLoading: loading,
+    isConnected,
+    isSdkReady,
+    isInputsValid,
+    hasError: hasStatusError,
+  });
+  const handlePrimaryButtonClick = () => {
+    if (!isConnected) {
+      if (onConnectWallet) {
+        onConnectWallet();
+      } else {
+        toast.error("Wallet connection not available");
+      }
+      return;
+    }
+    if (!isSdkReady) {
+      toast.info("Please wait, SDK is still initializing...");
+      return;
+    }
+    if (isInputsValid) {
+      runHandleTransaction();
+      return;
+    }
+    toast.error("Please enter a valid amount and recipient address");
+  };
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-y-4">
+      {chainFeatures.showFluffeyMascot && <FluffeyMascot />}
+      {chainFeatures.showPromoBanner && (
+        <div
+          className="relative z-10 flex w-full items-center justify-between rounded-lg px-4 py-2.5 text-primary shadow-sm"
+          style={{
+            background:
+              "linear-gradient(180deg, #F5AF94 0%, #FF8AA8 70%, #90D79F 75%, #7EAAD4 100%)",
+          }}
+        >
+          <div className="flex items-center gap-x-3">
+            <img
+              alt="Promo mascot"
+              className="-my-5 flex w-10 shrink-0 items-center justify-center"
+              height={112}
+              src={
+                chainFeatures.promoBannerImageUrl ??
+                "https://files.availproject.org/fastbridge/megaeth/megaeth-mascot-1.png"
+              }
+              style={{ aspectRatio: "5/14" }}
+              width={40}
+            />
+            <p className="font-medium text-sm">
+              <EncryptedText
+                charset="AEFHIJKLNPRSTUXYabcdefghijklmnopqrstuvwxyz"
+                encryptedClassName="text-primary"
+                flipDelayMs={25}
+                revealDelayMs={50}
+                revealedClassName="text-primary"
+                text={
+                  chainFeatures.promoBannerLine1 ??
+                  "Zero solver and protocol fees when bridging to MegaETH."
+                }
+              />
+              <br />
+              <EncryptedText
+                charset="AEFHIJKLNPRSTUXYabcdefghijklmnopqrstuvwxyz"
+                encryptedClassName="text-primary"
+                flipDelayMs={25}
+                revealDelayMs={50}
+                revealedClassName="text-primary"
+                text={
+                  chainFeatures.promoBannerLine2 ??
+                  "48h window. Don't fade anon."
+                }
+              />
+            </p>
+          </div>
+        </div>
+      )}
+      <Card className="relative z-10 w-full">
+        <CardContent className="relative flex w-full flex-col gap-y-4 px-2 sm:px-6">
+          {showSdkDetails && (
+            <ViewHistory
+              className="absolute -top-2 right-3"
+              refreshNonce={historyRefreshNonce}
+            />
+          )}
+          <ChainSelect
+            disabled={!!prefill?.chainId}
+            handleSelect={(chain) =>
+              setInputs({
+                ...inputs,
+                chain,
+              })
+            }
+            label="To"
+            selectedChain={inputs?.chain}
+          />
+          <TokenSelect
+            disabled={!!prefill?.token}
+            handleTokenSelect={(token) => setInputs({ ...inputs, token })}
+            selectedChain={inputs?.chain}
+            selectedToken={inputs?.token}
+          />
+          <AmountInput
+            amount={inputs?.amount}
+            bridgableBalance={filteredBridgableBalance}
+            disabled={refreshing || !!prefill?.amount}
+            inputs={inputs}
+            maxAmount={maxBridgeAmount}
+            maxAvailableAmount={maxAvailableAmount}
+            onChange={(amount) => setInputs({ ...inputs, amount })}
+            onCommit={runCommitAmount}
+            showBalanceDetails={showSdkDetails}
+          />
+          <RecipientAddress
+            address={inputs?.recipient}
+            disabled={!!prefill?.recipient}
+            onChange={(address) =>
+              setInputs({ ...inputs, recipient: address as `0x${string}` })
+            }
+          />
+          {showMockPreview && (
+            <div className="w-full space-y-3 rounded-lg border border-border bg-muted/30 px-4 py-3">
+              <div className="flex items-center justify-between">
+                <p className="font-light text-base">You spend</p>
+                <p className="font-light text-base">
+                  {mockPreview?.totalAmount}
+                </p>
+              </div>
+              <div className="flex items-center justify-between">
+                <p className="font-light text-base">You receive</p>
+                <p className="font-light text-base">
+                  {mockPreview?.receiveAmount}
+                </p>
+              </div>
+              <div className="flex items-center justify-between">
+                <p className="font-light text-base">Total gas</p>
+                <p className="font-light text-base">{mockPreview?.totalGas}</p>
+              </div>
+            </div>
+          )}
+
+          {showSdkDetails && intent?.current?.intent && (
+            <>
+              <SourceBreakdown
+                availableSources={availableSources}
+                intent={intent?.current?.intent}
+                isLoading={refreshing}
+                isSourceSelectionInsufficient={isSourceSelectionInsufficient}
+                missingToProceed={missingToProceed}
+                missingToSafety={missingToSafety}
+                onSourceMenuOpenChange={setIsSourceMenuOpen}
+                onToggleSourceChain={toggleSourceChain}
+                requiredSafetyTotal={requiredSafetyTotal}
+                requiredTotal={requiredTotal}
+                selectedSourceChains={selectedSourceChains}
+                selectedTotal={selectedTotal}
+                sourceCoveragePercent={sourceCoveragePercent}
+                sourceCoverageState={sourceCoverageState}
+                tokenSymbol={
+                  filteredBridgableBalance?.symbol as SUPPORTED_TOKENS
+                }
+              />
+
+              <div className="flex w-full items-start justify-between gap-x-4">
+                <p className="font-light text-base">You receive</p>
+                <div className="flex min-w-fit flex-col gap-y-1">
+                  {refreshing ? (
+                    <Skeleton className="h-5 w-28" />
+                  ) : (
+                    <p className="text-right font-light text-base">
+                      {`${
+                        connectedAddress === inputs?.recipient
+                          ? intent?.current?.intent?.destination?.amount
+                          : inputs.amount
+                      } ${receiveSymbol}`}
+                    </p>
+                  )}
+                  {refreshing ? (
+                    <Skeleton className="h-4 w-36" />
+                  ) : (
+                    <p className="text-right font-light text-sm">
+                      on {intent?.current?.intent?.destination?.chainName}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <FeeBreakdown
+                intent={intent?.current?.intent}
+                isLoading={refreshing}
+                tokenSymbol={
+                  filteredBridgableBalance?.symbol as SUPPORTED_TOKENS
+                }
+              />
+            </>
+          )}
+
+          {!intent.current && (
+            <Button
+              disabled={
+                isConnected
+                  ? !(
+                      inputs?.amount &&
+                      inputs?.recipient &&
+                      inputs?.chain &&
+                      inputs?.token
+                    ) ||
+                    loading ||
+                    Number(inputs?.amount) > maxBridgeAmount
+                  : false
+              }
+              onClick={handlePrimaryButtonClick}
+            >
+              {primaryButtonLabel}
+            </Button>
+          )}
+
+          <Dialog
+            onOpenChange={(open) => {
+              if (loading) {
+                return;
+              }
+              setIsDialogOpen(open);
+            }}
+            open={isDialogOpen}
+          >
+            {intent.current && !isDialogOpen && (
+              <div className="flex w-full items-center justify-between gap-x-2">
+                <Button
+                  className="w-1/2"
+                  onClick={reset}
+                  variant={"destructive"}
+                >
+                  Deny
+                </Button>
+                <DialogTrigger asChild>
+                  <Button
+                    className="w-1/2"
+                    disabled={refreshing || !isSourceSelectionReadyForAccept}
+                    onClick={startTransaction}
+                  >
+                    {refreshing ? "Refreshing..." : "Accept"}
+                  </Button>
+                </DialogTrigger>
+              </div>
+            )}
+
+            <DialogContent
+              showCloseButton={chainFeatures.dialogShowCloseButton}
+            >
+              <DialogHeader className="sr-only">
+                <DialogTitle>Transaction Progress</DialogTitle>
+              </DialogHeader>
+              {allowance.current ? (
+                <AllowanceModal
+                  allowance={allowance}
+                  callback={startTransaction}
+                  onCloseCallback={reset}
+                />
+              ) : (
+                <TransactionProgress
+                  completed={status === "success"}
+                  operationType={"bridge"}
+                  steps={steps}
+                  timer={timer}
+                  viewIntentUrl={lastExplorerUrl}
+                />
+              )}
+            </DialogContent>
+          </Dialog>
+
+          {txError && (
+            <div className="mt-3 flex w-full items-start justify-between gap-x-3 rounded-md border border-destructive bg-destructive/80 px-3 py-2 text-destructive-foreground text-sm">
+              <span className="w-full flex-1">{txError}</span>
+              <Button
+                aria-label="Dismiss error"
+                className="text-destructive-foreground/80 hover:text-destructive-foreground focus:outline-none"
+                onClick={() => {
+                  reset();
+                  setTxError(null);
+                }}
+                size={"icon"}
+                type="button"
+                variant={"ghost"}
+              >
+                <X className="size-4" />
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default FastBridge;
diff --git a/packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts b/packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts
new file mode 100644
index 0000000..b62c84c
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/fast-bridge/hooks/use-bridge.ts
@@ -0,0 +1,177 @@
+import type {
+  NexusNetwork,
+  NexusSDK,
+  OnAllowanceHookData,
+  OnIntentHookData,
+  SUPPORTED_CHAINS_IDS,
+  SUPPORTED_TOKENS,
+  UserAsset,
+} from "@avail-project/nexus-core";
+import { appConfig, chainFeatures } from "@fastbridge/runtime";
+import { type RefObject, useCallback } from "react";
+import { type Address, isAddress } from "viem";
+import { trackBridgeSubmit } from "../../../lib/posthog";
+import { useTransactionFlow } from "../../common/hooks/use-transaction-flow";
+import type {
+  TransactionFlowExecuteParams,
+  TransactionFlowInputs,
+  TransactionFlowPrefill,
+} from "../../common/types/transaction-flow";
+import { SHORT_CHAIN_NAME } from "../../common/utils/constant";
+import { notifyIntentHistoryRefresh } from "../../view-history/history-events";
+
+export type FastBridgeState = TransactionFlowInputs;
+
+const ALLOWED_TOKENS = new Set(["USDC", "USDT", "USDM"]);
+const DECIMAL_PREFILL_AMOUNT_REGEX = /^\d*\.?\d*$/;
+
+interface UseBridgeProps {
+  allowance: RefObject<OnAllowanceHookData | null>;
+  bridgableBalance: UserAsset[] | null;
+  connectedAddress?: Address;
+  fetchBalance: () => Promise<void>;
+  intent: RefObject<OnIntentHookData | null>;
+  isSourceMenuOpen?: boolean;
+  maxAmount?: string | number;
+  network: NexusNetwork;
+  nexusSDK: NexusSDK | null;
+  onComplete?: (explorerUrl?: string) => void | Promise<void>;
+  onError?: (message: string) => void;
+  onStart?: () => void;
+  prefill?: {
+    token: SUPPORTED_TOKENS;
+    chainId: SUPPORTED_CHAINS_IDS;
+    amount?: string;
+    recipient?: Address;
+  };
+}
+
+const sanitizePrefill = (
+  prefill: UseBridgeProps["prefill"],
+  connectedAddress?: Address
+): TransactionFlowPrefill => {
+  const tokenCandidate = (
+    prefill?.token ??
+    appConfig.nexusPrimaryToken ??
+    "USDC"
+  ).toUpperCase();
+  const token = ALLOWED_TOKENS.has(tokenCandidate)
+    ? tokenCandidate
+    : appConfig.nexusPrimaryToken || "USDC";
+
+  const amount = prefill?.amount
+    ? (() => {
+        const value = prefill.amount.trim();
+        if (
+          !value ||
+          value === "." ||
+          !DECIMAL_PREFILL_AMOUNT_REGEX.test(value)
+        ) {
+          return undefined;
+        }
+        const parsed = Number.parseFloat(value);
+        if (Number.isNaN(parsed) || parsed <= 0 || parsed > 1e9) {
+          return undefined;
+        }
+        return value;
+      })()
+    : undefined;
+
+  let recipient = connectedAddress;
+  if (prefill?.recipient) {
+    recipient = isAddress(prefill.recipient)
+      ? prefill.recipient
+      : connectedAddress;
+  }
+
+  return {
+    token,
+    chainId: appConfig.chainId,
+    amount,
+    recipient,
+  };
+};
+
+const useBridge = ({
+  network,
+  connectedAddress,
+  nexusSDK,
+  intent,
+  bridgableBalance,
+  prefill,
+  onComplete,
+  onStart,
+  onError,
+  fetchBalance,
+  allowance,
+  maxAmount,
+  isSourceMenuOpen = false,
+}: UseBridgeProps) => {
+  const executeTransaction = useCallback(
+    ({
+      token,
+      amount,
+      amountReadable,
+      toChainId,
+      recipient,
+      sourceChains,
+      onEvent,
+    }: TransactionFlowExecuteParams) => {
+      if (!nexusSDK) {
+        return null;
+      }
+
+      trackBridgeSubmit({
+        chain: toChainId,
+        chainName: SHORT_CHAIN_NAME[toChainId] || `Chain ${toChainId}`,
+        tokenSymbol: token,
+        amount: amountReadable ?? amount.toString(),
+        fast_bridge: chainFeatures.analyticsFastBridgeKey,
+      });
+
+      return nexusSDK.bridge(
+        {
+          token,
+          amount,
+          toChainId,
+          recipient: recipient ?? connectedAddress,
+          sourceChains,
+        },
+        { onEvent }
+      );
+    },
+    [connectedAddress, nexusSDK]
+  );
+
+  const flow = useTransactionFlow({
+    type: "bridge",
+    network,
+    connectedAddress,
+    nexusSDK,
+    intent,
+    bridgableBalance,
+    prefill: sanitizePrefill(prefill, connectedAddress),
+    onComplete,
+    onStart,
+    onError,
+    fetchBalance,
+    allowance,
+    maxAmount: maxAmount ?? chainFeatures.maxBridgeAmount,
+    isSourceMenuOpen,
+    notifyHistoryRefresh: notifyIntentHistoryRefresh,
+    mapUsdmToUsdcBalance: chainFeatures.mapUsdmToUsdcBalance ?? false,
+    denyIntentOnReset: chainFeatures.denyIntentOnReset ?? true,
+    executeTransaction,
+  });
+
+  return {
+    ...flow,
+    inputs: flow.inputs as FastBridgeState,
+    setInputs: flow.setInputs as (
+      next: FastBridgeState | Partial<FastBridgeState>
+    ) => void,
+    areInputsValid: flow.isInputsValid,
+  };
+};
+
+export default useBridge;
diff --git a/packages/fast-bridge-app/src/components/hero-section.tsx b/packages/fast-bridge-app/src/components/hero-section.tsx
new file mode 100644
index 0000000..99e9cbf
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/hero-section.tsx
@@ -0,0 +1,18 @@
+export default function HeroSection() {
+  return (
+    <div
+      className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8"
+      style={{
+        display: "none",
+        width: "100%",
+        marginLeft: "auto",
+        marginRight: "auto",
+        fontSize: "3em",
+        fontWeight: "100",
+      }}
+    >
+      Bridge your unified USDC/USDT balances across 12+ chains, to Avalanche,
+      instantly!
+    </div>
+  );
+}
diff --git a/apps/citrea/src/components/navbar.tsx b/packages/fast-bridge-app/src/components/navbar.tsx
similarity index 56%
rename from apps/citrea/src/components/navbar.tsx
rename to packages/fast-bridge-app/src/components/navbar.tsx
index 22253e1..0b002a2 100644
--- a/apps/citrea/src/components/navbar.tsx
+++ b/packages/fast-bridge-app/src/components/navbar.tsx
@@ -1,38 +1,39 @@
 "use client";
+import { appConfig } from "@fastbridge/runtime";
 import { ConnectKitButton } from "connectkit";
-import config from "../../config";
+import { withBasePath } from "@/lib/utils";
 import AvailLogo from "/avail_logo.svg";
 
 export default function Navbar() {
   return (
-    <nav className="relative border-b border-border z-10 w-full overflow-x-hidden">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
-        <div className="flex items-center justify-between h-16 min-w-0">
-          <div className="flex items-center min-w-0 shrink overflow-hidden">
-            {config.useChainLogo && (
+    <nav className="relative z-10 w-full overflow-x-hidden border-border border-b">
+      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 min-w-0 items-center justify-between">
+          <div className="flex min-w-0 shrink items-center overflow-hidden">
+            {appConfig.useChainLogo && (
               <img
-                src={config.chainLogoUrl}
-                alt={config.chainName}
-                width={150}
-                height={40}
+                alt={appConfig.chainName}
                 className="h-8 w-auto"
+                height={40}
+                src={withBasePath(appConfig.chainLogoUrl)}
+                width={150}
               />
             )}
-            {!config.useChainLogo && (
+            {!appConfig.useChainLogo && (
               <div
-                className="text-2xl sm:text-3xl font-light truncate"
+                className="truncate font-light text-2xl sm:text-3xl"
                 style={{
                   marginLeft: "10px",
                   textTransform: "uppercase",
-                  color: config.primaryColor,
+                  color: appConfig.primaryColor,
                   letterSpacing: "0.1em",
                 }}
               >
-                {config.chainName}
+                {appConfig.chainName}
               </div>
             )}
             <div
-              className="hidden md:block text-xl"
+              className="hidden text-xl md:block"
               style={{
                 marginLeft: "5px",
                 fontWeight: "100",
@@ -42,22 +43,22 @@ export default function Navbar() {
               Fast Bridge by
             </div>
             <a
-              className="hidden md:block text-xl"
+              className="hidden text-xl md:block"
               href="https://availproject.org"
-              target="_blank"
               rel="noopener noreferrer"
               style={{
                 marginLeft: "5px",
                 fontWeight: "100",
                 paddingTop: "5px",
               }}
+              target="_blank"
             >
-              <img src={AvailLogo} alt="Avail Logo" width={75} height={20} />
+              <img alt="Avail Logo" height={20} src={AvailLogo} width={75} />
             </a>
           </div>
 
           {/* Right side - Wallet connect only */}
-          <div className="flex items-center shrink-0">
+          <div className="flex shrink-0 items-center">
             <ConnectKitButton />
           </div>
         </div>
diff --git a/apps/monad/src/components/nexus/NexusProvider.tsx b/packages/fast-bridge-app/src/components/nexus/nexus-provider.tsx
similarity index 82%
rename from apps/monad/src/components/nexus/NexusProvider.tsx
rename to packages/fast-bridge-app/src/components/nexus/nexus-provider.tsx
index 8fde99e..52a6fcd 100644
--- a/apps/monad/src/components/nexus/NexusProvider.tsx
+++ b/packages/fast-bridge-app/src/components/nexus/nexus-provider.tsx
@@ -10,6 +10,7 @@ import {
   type SupportedChainsResult,
   type UserAsset,
 } from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
 
 import {
   createContext,
@@ -24,37 +25,37 @@ import {
 import { useAccountEffect } from "wagmi";
 
 interface NexusContextType {
-  nexusSDK: NexusSDK | null;
-  bridgableBalance: UserAsset[] | null;
-  swapBalance: UserAsset[] | null;
-  intent: RefObject<OnIntentHookData | null>;
   allowance: RefObject<OnAllowanceHookData | null>;
-  swapIntent: RefObject<OnSwapIntentHookData | null>;
+  attachEventHooks: () => void;
+  bridgableBalance: UserAsset[] | null;
+  deinitializeNexus: () => Promise<void>;
   exchangeRate: Record<string, number> | null;
-  supportedChainsAndTokens: SupportedChainsAndTokensResult | null;
-  swapSupportedChainsAndTokens: SupportedChainsResult | null;
-  network?: NexusNetwork;
-  loading: boolean;
-  handleInit: (provider: EthereumProvider) => Promise<void>;
   fetchBridgableBalance: () => Promise<void>;
   fetchSwapBalance: () => Promise<void>;
   getFiatValue: (amount: number, token: string) => number;
+  handleInit: (provider: EthereumProvider) => Promise<void>;
   initializeNexus: (provider: EthereumProvider) => Promise<void>;
-  deinitializeNexus: () => Promise<void>;
-  attachEventHooks: () => void;
-  setIntent: (data: OnIntentHookData | null) => void;
+  intent: RefObject<OnIntentHookData | null>;
+  loading: boolean;
+  network?: NexusNetwork;
+  nexusSDK: NexusSDK | null;
   setAllowance: (data: OnAllowanceHookData | null) => void;
+  setIntent: (data: OnIntentHookData | null) => void;
+  supportedChainsAndTokens: SupportedChainsAndTokensResult | null;
+  swapBalance: UserAsset[] | null;
+  swapIntent: RefObject<OnSwapIntentHookData | null>;
+  swapSupportedChainsAndTokens: SupportedChainsResult | null;
 }
 
 const NexusContext = createContext<NexusContextType | undefined>(undefined);
 
-type NexusProviderProps = {
+interface NexusProviderProps {
   children: React.ReactNode;
   config?: {
     network?: NexusNetwork;
     debug?: boolean;
   };
-};
+}
 
 const defaultConfig: Required<NexusProviderProps["config"]> = {
   network: "mainnet",
@@ -67,7 +68,7 @@ const NexusProvider = ({
 }: NexusProviderProps) => {
   const stableConfig = useMemo(
     () => ({ ...defaultConfig, ...config }),
-    [config],
+    [config]
   );
 
   const sdkRef = useRef<NexusSDK | null>(null);
@@ -78,18 +79,42 @@ const NexusProvider = ({
 
   const [nexusSDK, setNexusSDK] = useState<NexusSDK | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
+  const applyTokenLogos = useCallback(
+    (chains: SupportedChainsAndTokensResult | null) => {
+      if (!chains) {
+        return null;
+      }
+      const overrides = chainFeatures.tokenLogoOverrideBySymbol ?? {};
+      if (Object.keys(overrides).length === 0) {
+        return chains;
+      }
+      return chains.map((chain) => ({
+        ...chain,
+        tokens: chain.tokens.map((token) => ({
+          ...token,
+          logo:
+            overrides[token.symbol] ??
+            overrides[token.symbol.toUpperCase()] ??
+            token.logo,
+        })),
+      }));
+    },
+    []
+  );
   const [supportedChainsAndTokens, setSupportedChainsAndTokens] =
     useState<SupportedChainsAndTokensResult | null>(
-      sdk.utils.getSupportedChains(
-        stableConfig.network === "testnet" ? 0 : undefined,
-      ) ?? null,
+      applyTokenLogos(
+        sdk.utils.getSupportedChains(
+          stableConfig.network === "testnet" ? 0 : undefined
+        ) ?? null
+      )
     );
   const [swapSupportedChainsAndTokens, setSwapSupportedChainsAndTokens] =
     useState<SupportedChainsResult | null>(
-      sdk.utils.getSwapSupportedChainsAndTokens() ?? null,
+      sdk.utils.getSwapSupportedChainsAndTokens() ?? null
     );
   const [bridgableBalance, setBridgableBalance] = useState<UserAsset[] | null>(
-    null,
+    null
   );
   const [swapBalance, setSwapBalance] = useState<UserAsset[] | null>(null);
   const exchangeRate = useRef<Record<string, number> | null>(null);
@@ -100,18 +125,18 @@ const NexusProvider = ({
 
   useEffect(() => {
     const list = sdk.utils.getSupportedChains(
-      stableConfig.network === "testnet" ? 0 : undefined,
+      stableConfig.network === "testnet" ? 0 : undefined
     );
-    setSupportedChainsAndTokens(list ?? null);
+    setSupportedChainsAndTokens(applyTokenLogos(list ?? null));
     const swapList = sdk.utils.getSwapSupportedChainsAndTokens();
     setSwapSupportedChainsAndTokens(swapList ?? null);
-  }, [sdk, stableConfig.network]);
+  }, [applyTokenLogos, sdk, stableConfig.network]);
 
   const setupNexus = useCallback(async () => {
     const list = sdk.utils.getSupportedChains(
-      stableConfig.network === "testnet" ? 0 : undefined,
+      stableConfig.network === "testnet" ? 0 : undefined
     );
-    setSupportedChainsAndTokens(list ?? null);
+    setSupportedChainsAndTokens(applyTokenLogos(list ?? null));
     const swapList = sdk.utils.getSwapSupportedChainsAndTokens();
     setSwapSupportedChainsAndTokens(swapList ?? null);
     const [bridgeAbleBalanceResult, rates] = await Promise.allSettled([
@@ -137,12 +162,14 @@ const NexusProvider = ({
       }
       exchangeRate.current = usdPerUnit;
     }
-  }, [sdk, stableConfig.network]);
+  }, [applyTokenLogos, sdk, stableConfig.network]);
 
   const initializeNexus = async (provider: EthereumProvider) => {
     setLoading(true);
     try {
-      if (sdk.isInitialized()) throw new Error("Nexus is already initialized");
+      if (sdk.isInitialized()) {
+        throw new Error("Nexus is already initialized");
+      }
       await sdk.initialize(provider);
       setNexusSDK(sdk);
     } catch (error) {
@@ -154,7 +181,9 @@ const NexusProvider = ({
 
   const deinitializeNexus = async () => {
     try {
-      if (!nexusSDK) return;
+      if (!nexusSDK) {
+        return;
+      }
       await nexusSDK.deinit();
       setNexusSDK(null);
       setBridgableBalance(null);
@@ -210,7 +239,7 @@ const NexusProvider = ({
 
     if (sdk.isInitialized() || loading) {
       console.log(
-        "[NexusProvider] Skipping init - already initialized or loading",
+        "[NexusProvider] Skipping init - already initialized or loading"
       );
       return;
     }
@@ -272,46 +301,28 @@ const NexusProvider = ({
     allowance.current = data;
   };
 
-  const value = useMemo(
-    () => ({
-      nexusSDK,
-      initializeNexus,
-      deinitializeNexus,
-      attachEventHooks,
-      intent,
-      allowance,
-      handleInit,
-      supportedChainsAndTokens,
-      swapSupportedChainsAndTokens,
-      bridgableBalance,
-      swapBalance: swapBalance,
-      network: config?.network,
-      loading,
-      fetchBridgableBalance,
-      fetchSwapBalance,
-      swapIntent,
-      exchangeRate: exchangeRate.current,
-      getFiatValue,
-      setIntent,
-      setAllowance,
-    }),
-    [
-      nexusSDK,
-      initializeNexus,
-      deinitializeNexus,
-      attachEventHooks,
-      handleInit,
-      swapBalance,
-      config,
-      loading,
-      fetchBridgableBalance,
-      fetchSwapBalance,
-      setIntent,
-      setAllowance,
-      supportedChainsAndTokens,
-      swapSupportedChainsAndTokens,
-    ],
-  );
+  const value = {
+    nexusSDK,
+    initializeNexus,
+    deinitializeNexus,
+    attachEventHooks,
+    intent,
+    allowance,
+    handleInit,
+    supportedChainsAndTokens,
+    swapSupportedChainsAndTokens,
+    bridgableBalance,
+    swapBalance,
+    network: config?.network,
+    loading,
+    fetchBridgableBalance,
+    fetchSwapBalance,
+    swapIntent,
+    exchangeRate: exchangeRate.current,
+    getFiatValue,
+    setIntent,
+    setAllowance,
+  };
   return (
     <NexusContext.Provider value={value}>{children}</NexusContext.Provider>
   );
diff --git a/apps/monad/src/components/nexus/useNexus.ts b/packages/fast-bridge-app/src/components/nexus/use-nexus.ts
similarity index 81%
rename from apps/monad/src/components/nexus/useNexus.ts
rename to packages/fast-bridge-app/src/components/nexus/use-nexus.ts
index 2dcd3f9..df6c1ac 100644
--- a/apps/monad/src/components/nexus/useNexus.ts
+++ b/packages/fast-bridge-app/src/components/nexus/use-nexus.ts
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { NexusContext } from "./NexusProvider";
+import { NexusContext } from "./nexus-provider";
 
 export function useNexus() {
   const context = useContext(NexusContext);
diff --git a/packages/fast-bridge-app/src/components/ui/accordion.tsx b/packages/fast-bridge-app/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..a033ed7
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/accordion.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import {
+  Content as AccordionContentPrimitive,
+  Header as AccordionHeaderPrimitive,
+  Item as AccordionItemPrimitive,
+  Root as AccordionRootPrimitive,
+  Trigger as AccordionTriggerPrimitive,
+} from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: ComponentProps<typeof AccordionRootPrimitive>) {
+  return <AccordionRootPrimitive data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: ComponentProps<typeof AccordionItemPrimitive>) {
+  return (
+    <AccordionItemPrimitive
+      className={cn("border-b last:border-b-0", className)}
+      data-slot="accordion-item"
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  hideChevron = true,
+  containerClassName = "w-full",
+  ...props
+}: ComponentProps<typeof AccordionTriggerPrimitive> & {
+  hideChevron?: boolean;
+  containerClassName?: string;
+}) {
+  return (
+    <AccordionHeaderPrimitive className={cn("flex", containerClassName)}>
+      <AccordionTriggerPrimitive
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        data-slot="accordion-trigger"
+        {...props}
+      >
+        {children}
+        {!hideChevron && (
+          <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+        )}
+      </AccordionTriggerPrimitive>
+    </AccordionHeaderPrimitive>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof AccordionContentPrimitive>) {
+  return (
+    <AccordionContentPrimitive
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      data-slot="accordion-content"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionContentPrimitive>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/monad/src/components/ui/badge.tsx b/packages/fast-bridge-app/src/components/ui/badge.tsx
similarity index 52%
rename from apps/monad/src/components/ui/badge.tsx
rename to packages/fast-bridge-app/src/components/ui/badge.tsx
index fd3a406..514a3ce 100644
--- a/apps/monad/src/components/ui/badge.tsx
+++ b/packages/fast-bridge-app/src/components/ui/badge.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
@@ -14,7 +14,7 @@ const badgeVariants = cva(
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
         outline:
           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
@@ -23,7 +23,7 @@ const badgeVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 function Badge({
   className,
@@ -32,15 +32,15 @@ function Badge({
   ...props
 }: React.ComponentProps<"span"> &
   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+  const Comp = asChild ? Slot : "span";
 
   return (
     <Comp
-      data-slot="badge"
       className={cn(badgeVariants({ variant }), className)}
+      data-slot="badge"
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/apps/citrea/src/components/ui/bubbles-animation.tsx b/packages/fast-bridge-app/src/components/ui/bubbles-animation.tsx
similarity index 85%
rename from apps/citrea/src/components/ui/bubbles-animation.tsx
rename to packages/fast-bridge-app/src/components/ui/bubbles-animation.tsx
index 6c4b772..0f2f755 100644
--- a/apps/citrea/src/components/ui/bubbles-animation.tsx
+++ b/packages/fast-bridge-app/src/components/ui/bubbles-animation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 /**
  * BubbleAnimation
@@ -17,7 +17,9 @@ export default function BubbleAnimation({
 
   useEffect(() => {
     const wrapper = wrapperRef.current as HTMLElement | null;
-    if (!wrapper) return;
+    if (!wrapper) {
+      return;
+    }
 
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     const reduced = mediaQuery.matches;
@@ -25,7 +27,9 @@ export default function BubbleAnimation({
     const timeouts = new Set<number>();
 
     const animateBubble = (x: number) => {
-      if (reduced) return;
+      if (reduced) {
+        return;
+      }
       const bubble = document.createElement("div");
       bubble.className = "bubble";
       bubble.style.left = `${x}px`;
@@ -45,16 +49,20 @@ export default function BubbleAnimation({
 
     return () => {
       window.removeEventListener("mousemove", handleMove);
-      timeouts.forEach((id) => window.clearTimeout(id));
+      for (const id of timeouts) {
+        window.clearTimeout(id);
+      }
       timeouts.clear();
-      Array.from(wrapper.children).forEach((el) => el.remove());
+      for (const child of Array.from(wrapper.children)) {
+        child.remove();
+      }
     };
   }, [bubbleColor, durationMs, width, height]);
 
   return (
     <div>
       {/* Animation layer only */}
-      <div id="bubble-wrapper" ref={wrapperRef} aria-hidden="true" />
+      <div aria-hidden="true" id="bubble-wrapper" ref={wrapperRef} />
 
       {/* Minimal styles for animation only */}
       <style>{`
@@ -82,4 +90,3 @@ export default function BubbleAnimation({
     </div>
   );
 }
-
diff --git a/apps/megaeth/src/components/ui/button.tsx b/packages/fast-bridge-app/src/components/ui/button.tsx
similarity index 66%
rename from apps/megaeth/src/components/ui/button.tsx
rename to packages/fast-bridge-app/src/components/ui/button.tsx
index 71ab81f..11bebd2 100644
--- a/apps/megaeth/src/components/ui/button.tsx
+++ b/packages/fast-bridge-app/src/components/ui/button.tsx
@@ -1,20 +1,20 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
         "icon-sm": "size-8",
@@ -51,8 +51,8 @@ function Button({
 
   return (
     <Comp
-      data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
+      data-slot="button"
       {...props}
     />
   );
diff --git a/apps/monad/src/components/ui/card.tsx b/packages/fast-bridge-app/src/components/ui/card.tsx
similarity index 86%
rename from apps/monad/src/components/ui/card.tsx
rename to packages/fast-bridge-app/src/components/ui/card.tsx
index d05bbc6..f2b0c2e 100644
--- a/apps/monad/src/components/ui/card.tsx
+++ b/packages/fast-bridge-app/src/components/ui/card.tsx
@@ -1,84 +1,84 @@
-import * as React from "react"
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
         className
       )}
+      data-slot="card"
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="card-header"
       className={cn(
         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
+      data-slot="card-header"
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
+      className={cn("font-semibold leading-none", className)}
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="card-description"
       className={cn("text-muted-foreground text-sm", className)}
+      data-slot="card-description"
       {...props}
     />
-  )
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
         className
       )}
+      data-slot="card-action"
       {...props}
     />
-  )
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="card-content"
       className={cn("px-6", className)}
+      data-slot="card-content"
       {...props}
     />
-  )
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="card-footer"
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      data-slot="card-footer"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};
diff --git a/packages/fast-bridge-app/src/components/ui/checkbox.tsx b/packages/fast-bridge-app/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..6986450
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/checkbox.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  Indicator as CheckboxIndicatorPrimitive,
+  Root as CheckboxRootPrimitive,
+} from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: ComponentProps<typeof CheckboxRootPrimitive>) {
+  return (
+    <CheckboxRootPrimitive
+      className={cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      data-slot="checkbox"
+      {...props}
+    >
+      <CheckboxIndicatorPrimitive
+        className="grid place-content-center text-current transition-none"
+        data-slot="checkbox-indicator"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxIndicatorPrimitive>
+    </CheckboxRootPrimitive>
+  );
+}
+
+export { Checkbox };
diff --git a/packages/fast-bridge-app/src/components/ui/dialog.tsx b/packages/fast-bridge-app/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..e9588bc
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/dialog.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import {
+  Close as DialogClosePrimitive,
+  Content as DialogContentPrimitive,
+  Description as DialogDescriptionPrimitive,
+  Overlay as DialogOverlayPrimitive,
+  Portal as DialogPortalPrimitive,
+  Root as DialogRootPrimitive,
+  Title as DialogTitlePrimitive,
+  Trigger as DialogTriggerPrimitive,
+} from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({ ...props }: ComponentProps<typeof DialogRootPrimitive>) {
+  return <DialogRootPrimitive data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: ComponentProps<typeof DialogTriggerPrimitive>) {
+  return <DialogTriggerPrimitive data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: ComponentProps<typeof DialogPortalPrimitive>) {
+  return <DialogPortalPrimitive data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: ComponentProps<typeof DialogClosePrimitive>) {
+  return <DialogClosePrimitive data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof DialogOverlayPrimitive>) {
+  return (
+    <DialogOverlayPrimitive
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      )}
+      data-slot="dialog-overlay"
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: ComponentProps<typeof DialogContentPrimitive> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogContentPrimitive
+        className={cn(
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          className
+        )}
+        data-slot="dialog-content"
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogClosePrimitive
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+            data-slot="dialog-close"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogClosePrimitive>
+        )}
+      </DialogContentPrimitive>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      data-slot="dialog-header"
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof DialogTitlePrimitive>) {
+  return (
+    <DialogTitlePrimitive
+      className={cn("font-semibold text-lg leading-none", className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DialogDescriptionPrimitive>) {
+  return (
+    <DialogDescriptionPrimitive
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/apps/megaeth/src/components/ui/encrypted-text.tsx b/packages/fast-bridge-app/src/components/ui/encrypted-text.tsx
similarity index 61%
rename from apps/megaeth/src/components/ui/encrypted-text.tsx
rename to packages/fast-bridge-app/src/components/ui/encrypted-text.tsx
index 88e8e48..9bc0537 100644
--- a/apps/megaeth/src/components/ui/encrypted-text.tsx
+++ b/packages/fast-bridge-app/src/components/ui/encrypted-text.tsx
@@ -1,28 +1,29 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
 import { motion, useInView } from "motion/react";
+import type React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 
-type EncryptedTextProps = {
-  text: string;
-  className?: string;
-  /**
-   * Time in milliseconds between revealing each subsequent real character.
-   * Lower is faster. Defaults to 50ms per character.
-   */
-  revealDelayMs?: number;
+interface EncryptedTextProps {
   /** Optional custom character set to use for the gibberish effect. */
   charset?: string;
+  className?: string;
+  /** CSS class for styling the encrypted/scrambled characters */
+  encryptedClassName?: string;
   /**
    * Time in milliseconds between gibberish flips for unrevealed characters.
    * Lower is more jittery. Defaults to 50ms.
    */
   flipDelayMs?: number;
-  /** CSS class for styling the encrypted/scrambled characters */
-  encryptedClassName?: string;
+  /**
+   * Time in milliseconds between revealing each subsequent real character.
+   * Lower is faster. Defaults to 50ms per character.
+   */
+  revealDelayMs?: number;
   /** CSS class for styling the revealed characters */
   revealedClassName?: string;
-};
+  text: string;
+}
 
 const DEFAULT_CHARSET =
   "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?";
@@ -34,17 +35,42 @@ function generateRandomCharacter(charset: string): string {
 
 function generateGibberishPreservingSpaces(
   original: string,
-  charset: string,
+  charset: string
 ): string {
-  if (!original) return "";
+  if (!original) {
+    return "";
+  }
   let result = "";
-  for (let i = 0; i < original.length; i += 1) {
-    const ch = original[i];
+  for (const ch of original) {
     result += ch === " " ? " " : generateRandomCharacter(charset);
   }
   return result;
 }
 
+function shouldFlipCharacters(
+  now: number,
+  lastFlipTime: number,
+  flipDelayMs: number
+): boolean {
+  return now - lastFlipTime >= Math.max(0, flipDelayMs);
+}
+
+function refreshScrambleCharacters(params: {
+  charset: string;
+  currentRevealCount: number;
+  scrambleChars: string[];
+  text: string;
+}) {
+  const { text, currentRevealCount, scrambleChars, charset } = params;
+  for (let index = 0; index < text.length; index += 1) {
+    if (index < currentRevealCount) {
+      continue;
+    }
+    scrambleChars[index] =
+      text[index] === " " ? " " : generateRandomCharacter(charset);
+  }
+}
+
 export const EncryptedText: React.FC<EncryptedTextProps> = ({
   text,
   className,
@@ -61,12 +87,25 @@ export const EncryptedText: React.FC<EncryptedTextProps> = ({
   const animationFrameRef = useRef<number | null>(null);
   const startTimeRef = useRef<number>(0);
   const lastFlipTimeRef = useRef<number>(0);
+  const characterEntries = useMemo(() => {
+    const counts = new Map<string, number>();
+    return text.split("").map((character) => {
+      const nextCount = (counts.get(character) ?? 0) + 1;
+      counts.set(character, nextCount);
+      return {
+        character,
+        key: `${character}-${nextCount}`,
+      };
+    });
+  }, [text]);
   const scrambleCharsRef = useRef<string[]>(
-    text ? generateGibberishPreservingSpaces(text, charset).split("") : [],
+    text ? generateGibberishPreservingSpaces(text, charset).split("") : []
   );
 
   useEffect(() => {
-    if (!isInView) return;
+    if (!isInView) {
+      return;
+    }
 
     // Reset state for a fresh animation whenever dependencies change
     const initial = text
@@ -80,13 +119,15 @@ export const EncryptedText: React.FC<EncryptedTextProps> = ({
     let isCancelled = false;
 
     const update = (now: number) => {
-      if (isCancelled) return;
+      if (isCancelled) {
+        return;
+      }
 
       const elapsedMs = now - startTimeRef.current;
       const totalLength = text.length;
       const currentRevealCount = Math.min(
         totalLength,
-        Math.floor(elapsedMs / Math.max(1, revealDelayMs)),
+        Math.floor(elapsedMs / Math.max(1, revealDelayMs))
       );
 
       setRevealCount(currentRevealCount);
@@ -95,19 +136,13 @@ export const EncryptedText: React.FC<EncryptedTextProps> = ({
         return;
       }
 
-      // Re-randomize unrevealed scramble characters on an interval
-      const timeSinceLastFlip = now - lastFlipTimeRef.current;
-      if (timeSinceLastFlip >= Math.max(0, flipDelayMs)) {
-        for (let index = 0; index < totalLength; index += 1) {
-          if (index >= currentRevealCount) {
-            if (text[index] !== " ") {
-              scrambleCharsRef.current[index] =
-                generateRandomCharacter(charset);
-            } else {
-              scrambleCharsRef.current[index] = " ";
-            }
-          }
-        }
+      if (shouldFlipCharacters(now, lastFlipTimeRef.current, flipDelayMs)) {
+        refreshScrambleCharacters({
+          text,
+          currentRevealCount,
+          scrambleChars: scrambleCharsRef.current,
+          charset,
+        });
         lastFlipTimeRef.current = now;
       }
 
@@ -124,28 +159,29 @@ export const EncryptedText: React.FC<EncryptedTextProps> = ({
     };
   }, [isInView, text, revealDelayMs, charset, flipDelayMs]);
 
-  if (!text) return null;
+  if (!text) {
+    return null;
+  }
 
   return (
-    <motion.span
-      ref={ref}
-      className={cn(className)}
-      aria-label={text}
-      role="text"
-    >
-      {text.split("").map((char, index) => {
+    <motion.span aria-label={text} className={cn(className)} ref={ref}>
+      {characterEntries.map(({ character, key }, index) => {
         const isRevealed = index < revealCount;
-        const displayChar = isRevealed
-          ? char
-          : char === " "
-            ? " "
-            : (scrambleCharsRef.current[index] ??
-              generateRandomCharacter(charset));
+        let displayChar = character;
+        if (!isRevealed) {
+          if (character === " ") {
+            displayChar = " ";
+          } else {
+            displayChar =
+              scrambleCharsRef.current[index] ??
+              generateRandomCharacter(charset);
+          }
+        }
 
         return (
           <span
-            key={index}
             className={cn(isRevealed ? revealedClassName : encryptedClassName)}
+            key={key}
           >
             {displayChar}
           </span>
diff --git a/packages/fast-bridge-app/src/components/ui/input.tsx b/packages/fast-bridge-app/src/components/ui/input.tsx
new file mode 100644
index 0000000..fa4853a
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      className={cn(
+        "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      data-slot="input"
+      type={type}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/packages/fast-bridge-app/src/components/ui/label.tsx b/packages/fast-bridge-app/src/components/ui/label.tsx
new file mode 100644
index 0000000..e064499
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { Root as LabelRootPrimitive } from "@radix-ui/react-label";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: ComponentProps<typeof LabelRootPrimitive>) {
+  return (
+    <LabelRootPrimitive
+      className={cn(
+        "flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        className
+      )}
+      data-slot="label"
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/packages/fast-bridge-app/src/components/ui/select.tsx b/packages/fast-bridge-app/src/components/ui/select.tsx
new file mode 100644
index 0000000..7d4414c
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/select.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import {
+  Content as SelectContentPrimitive,
+  Group as SelectGroupPrimitive,
+  Icon as SelectIconPrimitive,
+  ItemIndicator as SelectItemIndicatorPrimitive,
+  Item as SelectItemPrimitive,
+  ItemText as SelectItemTextPrimitive,
+  Label as SelectLabelPrimitive,
+  Portal as SelectPortalPrimitive,
+  Root as SelectRootPrimitive,
+  ScrollDownButton as SelectScrollDownButtonPrimitive,
+  ScrollUpButton as SelectScrollUpButtonPrimitive,
+  Separator as SelectSeparatorPrimitive,
+  Trigger as SelectTriggerPrimitive,
+  Value as SelectValuePrimitive,
+  Viewport as SelectViewportPrimitive,
+} from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Select({ ...props }: ComponentProps<typeof SelectRootPrimitive>) {
+  return <SelectRootPrimitive data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: ComponentProps<typeof SelectGroupPrimitive>) {
+  return <SelectGroupPrimitive data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: ComponentProps<typeof SelectValuePrimitive>) {
+  return <SelectValuePrimitive data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: ComponentProps<typeof SelectTriggerPrimitive> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectTriggerPrimitive
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      data-size={size}
+      data-slot="select-trigger"
+      {...props}
+    >
+      {children}
+      <SelectIconPrimitive asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectIconPrimitive>
+    </SelectTriggerPrimitive>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: ComponentProps<typeof SelectContentPrimitive>) {
+  return (
+    <SelectPortalPrimitive>
+      <SelectContentPrimitive
+        className={cn(
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
+          position === "popper" &&
+            "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        data-slot="select-content"
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectViewportPrimitive
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectViewportPrimitive>
+        <SelectScrollDownButton />
+      </SelectContentPrimitive>
+    </SelectPortalPrimitive>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: ComponentProps<typeof SelectLabelPrimitive>) {
+  return (
+    <SelectLabelPrimitive
+      className={cn("px-2 py-1.5 text-muted-foreground text-xs", className)}
+      data-slot="select-label"
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof SelectItemPrimitive>) {
+  return (
+    <SelectItemPrimitive
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      data-slot="select-item"
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectItemIndicatorPrimitive>
+          <CheckIcon className="size-4" />
+        </SelectItemIndicatorPrimitive>
+      </span>
+      <SelectItemTextPrimitive>{children}</SelectItemTextPrimitive>
+    </SelectItemPrimitive>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof SelectSeparatorPrimitive>) {
+  return (
+    <SelectSeparatorPrimitive
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      data-slot="select-separator"
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectScrollUpButtonPrimitive>) {
+  return (
+    <SelectScrollUpButtonPrimitive
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      data-slot="select-scroll-up-button"
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectScrollUpButtonPrimitive>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: ComponentProps<typeof SelectScrollDownButtonPrimitive>) {
+  return (
+    <SelectScrollDownButtonPrimitive
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      data-slot="select-scroll-down-button"
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectScrollDownButtonPrimitive>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/packages/fast-bridge-app/src/components/ui/separator.tsx b/packages/fast-bridge-app/src/components/ui/separator.tsx
new file mode 100644
index 0000000..43b8a6e
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/separator.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({ className, ...props }: ComponentProps<"hr">) {
+  return (
+    <hr
+      className={cn("my-2 h-px w-full bg-border", className)}
+      data-slot="separator"
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/apps/monad/src/components/ui/skeleton.tsx b/packages/fast-bridge-app/src/components/ui/skeleton.tsx
similarity index 55%
rename from apps/monad/src/components/ui/skeleton.tsx
rename to packages/fast-bridge-app/src/components/ui/skeleton.tsx
index 32ea0ef..c9bce7d 100644
--- a/apps/monad/src/components/ui/skeleton.tsx
+++ b/packages/fast-bridge-app/src/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
+      className={cn("animate-pulse rounded-md bg-accent", className)}
       data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/apps/citrea/src/components/ui/sonner.tsx b/packages/fast-bridge-app/src/components/ui/sonner.tsx
similarity index 100%
rename from apps/citrea/src/components/ui/sonner.tsx
rename to packages/fast-bridge-app/src/components/ui/sonner.tsx
index f96a98d..14e7a85 100644
--- a/apps/citrea/src/components/ui/sonner.tsx
+++ b/packages/fast-bridge-app/src/components/ui/sonner.tsx
@@ -8,7 +8,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
       className="toaster group"
       style={
         {
@@ -17,6 +16,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-border": "var(--border)",
         } as React.CSSProperties
       }
+      theme={theme as ToasterProps["theme"]}
       {...props}
     />
   );
diff --git a/packages/fast-bridge-app/src/components/ui/tooltip.tsx b/packages/fast-bridge-app/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..542f6cb
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/ui/tooltip.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import {
+  Arrow as TooltipArrowPrimitive,
+  Content as TooltipContentPrimitive,
+  Portal as TooltipPortalPrimitive,
+  Provider as TooltipProviderPrimitive,
+  Root as TooltipRootPrimitive,
+  Trigger as TooltipTriggerPrimitive,
+} from "@radix-ui/react-tooltip";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: ComponentProps<typeof TooltipProviderPrimitive>) {
+  return (
+    <TooltipProviderPrimitive
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: ComponentProps<typeof TooltipRootPrimitive>) {
+  return (
+    <TooltipProvider>
+      <TooltipRootPrimitive data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: ComponentProps<typeof TooltipTriggerPrimitive>) {
+  return <TooltipTriggerPrimitive data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipContentPrimitive>) {
+  return (
+    <TooltipPortalPrimitive>
+      <TooltipContentPrimitive
+        className={cn(
+          "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=closed]:animate-out",
+          className
+        )}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        {...props}
+      >
+        {children}
+        <TooltipArrowPrimitive className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipContentPrimitive>
+    </TooltipPortalPrimitive>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/fast-bridge-app/src/components/view-history/history-events.ts b/packages/fast-bridge-app/src/components/view-history/history-events.ts
new file mode 100644
index 0000000..6febe3a
--- /dev/null
+++ b/packages/fast-bridge-app/src/components/view-history/history-events.ts
@@ -0,0 +1,8 @@
+export const INTENT_HISTORY_REFRESH_EVENT = "nexus:intent-history:refresh";
+
+export const notifyIntentHistoryRefresh = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.dispatchEvent(new Event(INTENT_HISTORY_REFRESH_EVENT));
+};
diff --git a/apps/megaeth/src/components/view-history/hooks/useViewHistory.ts b/packages/fast-bridge-app/src/components/view-history/hooks/use-view-history.ts
similarity index 59%
rename from apps/megaeth/src/components/view-history/hooks/useViewHistory.ts
rename to packages/fast-bridge-app/src/components/view-history/hooks/use-view-history.ts
index ea4cece..c1466db 100644
--- a/apps/megaeth/src/components/view-history/hooks/useViewHistory.ts
+++ b/packages/fast-bridge-app/src/components/view-history/hooks/use-view-history.ts
@@ -1,6 +1,7 @@
-import { type RFF } from "@avail-project/nexus-core";
-import { useNexus } from "../../nexus/NexusProvider";
+import type { RFF } from "@avail-project/nexus-core";
 import { useCallback, useEffect, useState } from "react";
+import { useNexus } from "../../nexus/nexus-provider";
+import { INTENT_HISTORY_REFRESH_EVENT } from "../history-events";
 
 const ITEMS_PER_PAGE = 10;
 
@@ -17,6 +18,7 @@ function formatExpiryDate(timestamp: number) {
 const useViewHistory = () => {
   const { nexusSDK } = useNexus();
   const [history, setHistory] = useState<RFF[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
   const [displayedHistory, setDisplayedHistory] = useState<RFF[]>([]);
   const [page, setPage] = useState(0);
   const [hasMore, setHasMore] = useState(true);
@@ -28,30 +30,54 @@ const useViewHistory = () => {
   }, []);
 
   const fetchIntentHistory = useCallback(async () => {
-    if (!nexusSDK) return;
-
+    if (!nexusSDK) {
+      return;
+    }
     try {
-      const fetchedHistory = await nexusSDK.getMyIntents();
-      const normalizedHistory = fetchedHistory ?? [];
-
-      setHistory(normalizedHistory);
-      setDisplayedHistory(normalizedHistory.slice(0, ITEMS_PER_PAGE));
+      const nextHistory = (await nexusSDK.getMyIntents()) ?? [];
+      setLoadError(null);
+      setHistory(nextHistory);
+      const firstPage = nextHistory.slice(0, ITEMS_PER_PAGE);
+      setDisplayedHistory(firstPage);
       setPage(0);
-      setHasMore(normalizedHistory.length > ITEMS_PER_PAGE);
-      setIsLoadingMore(false);
+      setHasMore(nextHistory.length > ITEMS_PER_PAGE);
     } catch (error) {
       console.error("Error fetching intent history:", error);
+      setLoadError("Please check your wallet connection and try again.");
+      setHistory([]);
+      setDisplayedHistory([]);
+      setPage(0);
+      setHasMore(false);
     }
   }, [nexusSDK]);
 
   useEffect(() => {
-    if (!history) {
-      void fetchIntentHistory();
+    fetchIntentHistory().catch((error) => {
+      console.error("Failed to fetch intent history:", error);
+    });
+  }, [fetchIntentHistory]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
     }
-  }, [history, fetchIntentHistory]);
+
+    const handleRefresh = () => {
+      fetchIntentHistory().catch((error) => {
+        console.error("Failed to refresh intent history:", error);
+      });
+    };
+
+    window.addEventListener(INTENT_HISTORY_REFRESH_EVENT, handleRefresh);
+    return () => {
+      window.removeEventListener(INTENT_HISTORY_REFRESH_EVENT, handleRefresh);
+    };
+  }, [fetchIntentHistory]);
 
   const loadMore = useCallback(() => {
-    if (!history || isLoadingMore || !hasMore) return;
+    if (!history || isLoadingMore || !hasMore) {
+      return;
+    }
     setIsLoadingMore(true);
 
     setTimeout(() => {
@@ -85,7 +111,7 @@ const useViewHistory = () => {
           loadMore();
         }
       },
-      { threshold: 0.1, root: rootElement ?? null },
+      { threshold: 0.1, root: rootElement ?? null }
     );
 
     observer.observe(sentinelNode);
@@ -93,31 +119,33 @@ const useViewHistory = () => {
     return () => {
       observer.disconnect();
     };
-  }, [sentinelNode, loadMore, hasMore, isLoadingMore, displayedHistory.length]);
+  }, [hasMore, isLoadingMore, loadMore, sentinelNode]);
 
   const getStatus = (pastIntent: RFF) => {
     if (pastIntent?.fulfilled) {
       return "Fulfilled";
-    } else if (pastIntent?.deposited) {
+    }
+    if (pastIntent?.deposited) {
       return "Deposited";
-    } else if (pastIntent?.refunded) {
+    }
+    if (pastIntent?.refunded) {
       return "Refunded";
-    } else {
-      return "Failed";
     }
+    return "Failed";
   };
 
   return {
     history,
+    loadError,
     displayedHistory,
     page,
     hasMore,
     isLoadingMore,
     getStatus,
     observerTarget,
+    refreshHistory: fetchIntentHistory,
     ITEMS_PER_PAGE,
     formatExpiryDate,
-    fetchIntentHistory,
   };
 };
 
diff --git a/apps/citrea/src/components/view-history/view-history.tsx b/packages/fast-bridge-app/src/components/view-history/view-history.tsx
similarity index 60%
rename from apps/citrea/src/components/view-history/view-history.tsx
rename to packages/fast-bridge-app/src/components/view-history/view-history.tsx
index b58dd82..8112927 100644
--- a/apps/citrea/src/components/view-history/view-history.tsx
+++ b/packages/fast-bridge-app/src/components/view-history/view-history.tsx
@@ -1,41 +1,50 @@
 "use client";
 
-import { useEffect } from "react";
+import type { RFF } from "@avail-project/nexus-core";
+import { chainFeatures } from "@fastbridge/runtime";
+import { Clock, LoaderPinwheel, SquareArrowOutUpRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
-  DialogTrigger,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
-import { Clock, LoaderPinwheel, SquareArrowOutUpRight } from "lucide-react";
-import { type RFF } from "@avail-project/nexus-core";
-import { cn } from "@/lib/utils";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import useViewHistory from "./hooks/useViewHistory";
-import { TOKEN_IMAGES } from "../common";
+import { cn } from "@/lib/utils";
+import { TOKEN_IMAGES } from "../common/utils/constant";
+import useViewHistory from "./hooks/use-view-history";
+
+const getDestinationTokenImage = (tokenSymbol: string) => {
+  const override =
+    chainFeatures.tokenLogoOverrideBySymbol?.[tokenSymbol] ??
+    chainFeatures.tokenLogoOverrideBySymbol?.[tokenSymbol.toUpperCase()];
+  return override ?? TOKEN_IMAGES[tokenSymbol];
+};
 
 const SourceChains = ({ sources }: { sources: RFF["sources"] }) => {
+  const sourceList = sources ?? [];
   return (
     <div className="flex items-center">
-      {sources?.map((source, index) => (
+      {sourceList.map((source, index) => (
         <div
-          key={source?.chain?.id}
           className={cn(
             "rounded-full transition-transform hover:scale-110",
-            index > 0 && "-ml-2",
+            index > 0 && "-ml-2"
           )}
-          style={{ zIndex: sources.length - index }}
+          key={source?.chain?.id}
+          style={{ zIndex: sourceList.length - index }}
         >
           <img
-            src={source?.chain?.logo}
             alt={source?.chain?.name}
-            width={24}
-            height={24}
             className="rounded-full"
+            height={24}
+            src={source?.chain?.logo}
+            width={24}
           />
         </div>
       ))}
@@ -47,20 +56,22 @@ const StatusBadge = ({ status }: { status: string }) => {
   const getVariant = (status: string) => {
     if (status === "Fulfilled") {
       return "default";
-    } else if (status === "Deposited") {
+    }
+    if (status === "Deposited") {
       return "secondary";
-    } else if (status === "Refunded") {
+    }
+    if (status === "Refunded") {
       return "outline";
-    } else if (status === "Failed") {
+    }
+    if (status === "Failed") {
       return "destructive";
-    } else {
-      return "default";
     }
+    return "default";
   };
 
   return (
-    <Badge variant={getVariant(status)} className="px-3 py-1">
-      <p className="text-xs font-semibold tracking-wide">{status}</p>
+    <Badge className="px-3 py-1" variant={getVariant(status)}>
+      <p className="font-semibold text-xs tracking-wide">{status}</p>
     </Badge>
   );
 };
@@ -74,19 +85,19 @@ const DestinationToken = ({
     <div className="flex items-center">
       {destination.map((dest, index) => (
         <div
-          key={dest.token.symbol}
           className={cn(
             "rounded-full transition-transform hover:scale-110",
-            index > 0 && "-ml-2",
+            index > 0 && "-ml-2"
           )}
+          key={dest.token.symbol}
           style={{ zIndex: destination.length - index }}
         >
           <img
-            src={TOKEN_IMAGES[dest.token.symbol]}
             alt={dest.token.symbol}
-            width={24}
-            height={24}
             className="rounded-full"
+            height={24}
+            src={getDestinationTokenImage(dest.token.symbol)}
+            width={24}
           />
         </div>
       ))}
@@ -103,22 +114,37 @@ const ViewHistory = ({
   className?: string;
   refreshNonce?: number;
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
   const {
     history,
+    loadError,
     displayedHistory,
     hasMore,
     isLoadingMore,
     getStatus,
     observerTarget,
+    refreshHistory,
     ITEMS_PER_PAGE,
     formatExpiryDate,
-    fetchIntentHistory,
   } = useViewHistory();
 
   useEffect(() => {
-    if (!refreshNonce) return;
-    void fetchIntentHistory();
-  }, [refreshNonce, fetchIntentHistory]);
+    if (!(viewAsModal && isOpen)) {
+      return;
+    }
+    refreshHistory().catch((error) => {
+      console.error("Failed to refresh history:", error);
+    });
+  }, [isOpen, refreshHistory, viewAsModal]);
+
+  useEffect(() => {
+    if (!refreshNonce) {
+      return;
+    }
+    refreshHistory().catch((error) => {
+      console.error("Failed to refresh history:", error);
+    });
+  }, [refreshHistory, refreshNonce]);
 
   const renderHistoryContent = () => {
     if (displayedHistory.length > 0) {
@@ -126,19 +152,19 @@ const ViewHistory = ({
         <>
           {displayedHistory?.map((pastIntent) => (
             <Card
+              className="gap-3 border-border/50 p-4 transition-shadow duration-200 hover:shadow-md"
               key={pastIntent.id}
-              className="p-4 hover:shadow-md transition-shadow duration-200 border-border/50 gap-3"
             >
               <div className="flex items-start justify-between gap-4">
                 <div className="flex items-center gap-3">
                   <DestinationToken destination={pastIntent?.destinations} />
                   <div className="flex flex-col">
-                    <p className="text-sm font-medium">
+                    <p className="font-medium text-sm">
                       {pastIntent?.destinations
                         .map((d) => d?.token?.symbol)
                         .join(", ")}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-muted-foreground text-xs">
                       Intent #{pastIntent?.id}
                     </p>
                   </div>
@@ -148,8 +174,8 @@ const ViewHistory = ({
 
               <Separator className="my-1" />
 
-              <div className="flex flex-col sm:flex-row  items-start sm:items-center justify-between gap-4">
-                <div className="flex items-center justify-between gap-x-3 flex-1 w-full sm:min-w-fit">
+              <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+                <div className="flex w-full flex-1 items-center justify-between gap-x-3 sm:min-w-fit">
                   <SourceChains sources={pastIntent?.sources} />
                   <div className="flex items-center gap-2 text-muted-foreground">
                     <div className="h-px w-8 bg-border" />
@@ -158,28 +184,28 @@ const ViewHistory = ({
                   </div>
                   <div className="rounded-full hover:scale-110">
                     <img
-                      src={pastIntent?.destinationChain?.logo ?? ""}
                       alt={pastIntent?.destinationChain?.name}
-                      width={24}
-                      height={24}
                       className="rounded-full"
+                      height={24}
+                      src={pastIntent?.destinationChain?.logo ?? ""}
+                      width={24}
                     />
                   </div>
                 </div>
 
-                <div className="flex items-center justify-between sm:justify-end  gap-x-2 w-full">
+                <div className="flex w-full items-center justify-between gap-x-2 sm:justify-end">
                   <div className="text-left sm:text-right">
-                    <p className="text-xs text-muted-foreground">Expiry</p>
-                    <p className="text-xs font-medium">
+                    <p className="text-muted-foreground text-xs">Expiry</p>
+                    <p className="font-medium text-xs">
                       {formatExpiryDate(pastIntent?.expiry)}
                     </p>
                   </div>
                   <a
                     href={pastIntent?.explorerUrl}
-                    target="_blank"
                     rel="noreferrer"
+                    target="_blank"
                   >
-                    <Button variant="outline" size="icon">
+                    <Button size="icon" variant="outline">
                       <SquareArrowOutUpRight className="size-4" />
                     </Button>
                   </a>
@@ -189,7 +215,7 @@ const ViewHistory = ({
           ))}
 
           {hasMore && (
-            <div ref={observerTarget} className="flex justify-center py-4">
+            <div className="flex justify-center py-4" ref={observerTarget}>
               {isLoadingMore && (
                 <div className="flex items-center gap-2 text-muted-foreground">
                   <LoaderPinwheel className="size-4 animate-spin" />
@@ -201,7 +227,7 @@ const ViewHistory = ({
 
           {!hasMore && displayedHistory?.length > ITEMS_PER_PAGE && (
             <div className="flex justify-center py-4">
-              <p className="text-sm text-muted-foreground">
+              <p className="text-muted-foreground text-sm">
                 No more transactions to load
               </p>
             </div>
@@ -212,14 +238,14 @@ const ViewHistory = ({
 
     if (history === null) {
       return (
-        <div className="flex flex-col items-center justify-center py-16 gap-4">
+        <div className="flex flex-col items-center justify-center gap-4 py-16">
           <div className="relative">
-            <div className="absolute inset-0 bg-primary/10 blur-xl rounded-full" />
-            <LoaderPinwheel className="relative animate-spin size-12 text-primary" />
+            <div className="absolute inset-0 rounded-full bg-primary/10 blur-xl" />
+            <LoaderPinwheel className="relative size-12 animate-spin text-primary" />
           </div>
-          <div className="text-center space-y-1">
-            <p className="text-base font-medium">Loading your history</p>
-            <p className="text-sm text-muted-foreground">
+          <div className="space-y-1 text-center">
+            <p className="font-medium text-base">Loading your history</p>
+            <p className="text-muted-foreground text-sm">
               Fetching your past transactions...
             </p>
           </div>
@@ -227,12 +253,34 @@ const ViewHistory = ({
       );
     }
 
+    if (loadError) {
+      return (
+        <div className="flex flex-col items-center justify-center gap-4 py-16">
+          <Clock className="size-16 text-muted-foreground/30" />
+          <div className="space-y-1 text-center">
+            <p className="font-medium text-base">Unable to load history</p>
+            <p className="text-muted-foreground text-sm">{loadError}</p>
+          </div>
+          <Button
+            onClick={() => {
+              refreshHistory().catch((error) => {
+                console.error("Failed to refresh history:", error);
+              });
+            }}
+            variant="outline"
+          >
+            Retry
+          </Button>
+        </div>
+      );
+    }
+
     return (
-      <div className="flex flex-col items-center justify-center py-16 gap-4">
+      <div className="flex flex-col items-center justify-center gap-4 py-16">
         <Clock className="size-16 text-muted-foreground/30" />
-        <div className="text-center space-y-1">
-          <p className="text-base font-medium">No history yet</p>
-          <p className="text-sm text-muted-foreground">
+        <div className="space-y-1 text-center">
+          <p className="font-medium text-base">No history yet</p>
+          <p className="text-muted-foreground text-sm">
             Your transaction history will appear here
           </p>
         </div>
@@ -242,30 +290,30 @@ const ViewHistory = ({
 
   if (!viewAsModal) {
     return (
-      <div className="flex flex-col gap-y-3 max-h-96 no-scrollbar overflow-y-auto w-full max-w-md">
+      <div className="no-scrollbar flex max-h-96 w-full max-w-md flex-col gap-y-3 overflow-y-auto">
         {renderHistoryContent()}
       </div>
     );
   }
 
   return (
-    <Dialog>
+    <Dialog onOpenChange={setIsOpen} open={isOpen}>
       <DialogTrigger asChild>
         <Button
-          variant="ghost"
+          className={cn("group relative", className)}
           size="icon"
-          className={cn("relative group", className)}
+          variant="ghost"
         >
           <Clock className="size-5 text-primary transition-transform group-hover:scale-110" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-2xl flex flex-col">
+      <DialogContent className="flex max-w-2xl flex-col">
         <DialogHeader>
-          <DialogTitle className="text-2xl font-semibold">
+          <DialogTitle className="font-semibold text-2xl">
             Transaction History
           </DialogTitle>
         </DialogHeader>
-        <div className="flex flex-col gap-y-3 max-h-96 no-scrollbar overflow-y-auto w-full">
+        <div className="no-scrollbar flex max-h-96 w-full flex-col gap-y-3 overflow-y-auto">
           {renderHistoryContent()}
         </div>
       </DialogContent>
diff --git a/apps/megaeth/src/components/walletConnect.tsx b/packages/fast-bridge-app/src/components/wallet-connect.tsx
similarity index 80%
rename from apps/megaeth/src/components/walletConnect.tsx
rename to packages/fast-bridge-app/src/components/wallet-connect.tsx
index f4db881..69b1216 100644
--- a/apps/megaeth/src/components/walletConnect.tsx
+++ b/packages/fast-bridge-app/src/components/wallet-connect.tsx
@@ -1,24 +1,28 @@
 "use client";
-import * as React from "react";
 import type { EthereumProvider } from "@avail-project/nexus-core";
-import { useAccount } from "wagmi";
-import { useNexus } from "./nexus/NexusProvider";
+import { chainFeatures } from "@fastbridge/runtime";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useAccount } from "wagmi";
+import { useNexus } from "./nexus/nexus-provider";
 
 interface PreviewPanelProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
-  const [loading, setLoading] = React.useState(false);
-  const [initError, setInitError] = React.useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [initError, setInitError] = useState<string | null>(null);
   const { status, connector, address } = useAccount();
   const { nexusSDK, handleInit, deinitializeNexus, setIntent, setAllowance } =
     useNexus();
-  const prevAddressRef = React.useRef<string | undefined>(address);
+  const prevAddressRef = useRef<string | undefined>(address);
 
-  const initializeNexus = React.useCallback(async () => {
-    if (loading || nexusSDK) return; // Prevent multiple calls
+  const initializeNexus = useCallback(async () => {
+    if (loading || nexusSDK) {
+      return; // Prevent multiple calls
+    }
 
     console.log("[Nexus Init] Starting initialization...");
     console.log("[Nexus Init] Connector:", connector);
@@ -32,7 +36,7 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
     const timeoutPromise = new Promise((_, reject) => {
       setTimeout(() => {
         reject(new Error("Nexus initialization timed out after 30 seconds"));
-      }, 30000); // 30 second timeout
+      }, 30_000); // 30 second timeout
     });
 
     try {
@@ -47,7 +51,7 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
       console.log("[Nexus Init] Provider type:", typeof provider);
       console.log(
         "[Nexus Init] Provider has request:",
-        typeof provider?.request === "function",
+        typeof provider?.request === "function"
       );
 
       if (!provider) {
@@ -56,7 +60,7 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
 
       if (typeof provider.request !== "function") {
         throw new Error(
-          "Provider does not have a request method (not EIP-1193 compliant)",
+          "Provider does not have a request method (not EIP-1193 compliant)"
         );
       }
 
@@ -77,7 +81,7 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
   }, [connector, handleInit, loading, nexusSDK]);
 
   // Handle wallet disconnection - clear Nexus state and balances
-  React.useEffect(() => {
+  useEffect(() => {
     if (status === "disconnected" && nexusSDK) {
       deinitializeNexus();
       setIntent(null);
@@ -90,7 +94,7 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
   }, [status, nexusSDK, deinitializeNexus, setIntent, setAllowance]);
 
   // Handle account change - reinitialize Nexus when account address changes
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       status === "connected" &&
       address &&
@@ -132,8 +136,8 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
   ]);
 
   // Auto-initialize Nexus when wallet is connected and address is available
-  React.useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
     if (
       status === "connected" &&
       !nexusSDK &&
@@ -142,9 +146,14 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
       address &&
       connector
     ) {
-      timeoutId = setTimeout(() => {
+      const delayMs = chainFeatures.walletInitDelayMs ?? 0;
+      if (delayMs > 0) {
+        timeoutId = setTimeout(() => {
+          initializeNexus();
+        }, delayMs);
+      } else {
         initializeNexus();
-      }, 500);
+      }
     }
 
     return () => {
@@ -163,7 +172,7 @@ export function PreviewPanel({ children }: Readonly<PreviewPanelProps>) {
   ]);
 
   return (
-    <div className="flex items-center justify-center min-h-[400px] relative">
+    <div className="relative flex min-h-[400px] items-center justify-center">
       {children}
     </div>
   );
diff --git a/apps/citrea/src/favicon.ico b/packages/fast-bridge-app/src/favicon.ico
similarity index 100%
rename from apps/citrea/src/favicon.ico
rename to packages/fast-bridge-app/src/favicon.ico
diff --git a/apps/megaeth/src/index.css b/packages/fast-bridge-app/src/index.css
similarity index 98%
rename from apps/megaeth/src/index.css
rename to packages/fast-bridge-app/src/index.css
index 8815c7d..7670b70 100644
--- a/apps/megaeth/src/index.css
+++ b/packages/fast-bridge-app/src/index.css
@@ -1,21 +1,11 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@source "./**/*.{js,jsx,ts,tsx}";
+@source "../../../apps/*/src/**/*.{js,jsx,ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -48,12 +38,24 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  font-synthesis: none;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.87);
+
+  color-scheme: light dark;
+  background-color: #242424;
+  text-rendering: optimizeLegibility;
 }
 
 body,
 #root {
-  height: 100svh;
   width: 100svw;
+  height: 100svh;
   overflow-x: hidden;
 }
 
@@ -143,18 +145,17 @@ body,
 }
 
 .fluffey-wrapper {
+  --fluffey-scale: 0.7;
+  --center-offset-x: -60px;
   position: fixed;
   bottom: 0;
   left: 50%;
 
-  --fluffey-scale: 0.7;
-  --center-offset-x: -60px;
+  display: block;
 
   transform: translateX(calc(-50% + var(--center-offset-x)));
   transform-origin: bottom center;
   scale: var(--fluffey-scale);
-
-  display: block;
 }
 
 @media (max-height: 1000px) {
@@ -194,7 +195,6 @@ body,
   }
 }
 
-
 @keyframes fluffyPopUp {
   0% {
     transform: translateY(100%);
@@ -206,7 +206,6 @@ body,
   }
 }
 
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
diff --git a/apps/monad/src/lib/button-variants.ts b/packages/fast-bridge-app/src/lib/button-variants.ts
similarity index 57%
rename from apps/monad/src/lib/button-variants.ts
rename to packages/fast-bridge-app/src/lib/button-variants.ts
index d87142c..3b9ccca 100644
--- a/apps/monad/src/lib/button-variants.ts
+++ b/packages/fast-bridge-app/src/lib/button-variants.ts
@@ -1,16 +1,16 @@
 import { cva } from "class-variance-authority";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
@@ -19,7 +19,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
       },
@@ -28,7 +28,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export { buttonVariants };
diff --git a/packages/fast-bridge-app/src/lib/posthog.ts b/packages/fast-bridge-app/src/lib/posthog.ts
new file mode 100644
index 0000000..2c21d98
--- /dev/null
+++ b/packages/fast-bridge-app/src/lib/posthog.ts
@@ -0,0 +1,84 @@
+import posthog from "posthog-js";
+
+const DEFAULT_POSTHOG_KEY = "phc_UD6lQU3PEw1d8oo8E17rJLmRAR7kxJbQ5OseHuCvi7N";
+const DEFAULT_POSTHOG_HOST = "https://us.i.posthog.com";
+
+let isInitialized = false;
+
+/**
+ * Initialize PostHog analytics
+ */
+export function initPostHog(options?: {
+  apiKey?: string;
+  apiHost?: string;
+  debug?: boolean;
+}): void {
+  if (isInitialized) {
+    return;
+  }
+
+  const apiKey = options?.apiKey || DEFAULT_POSTHOG_KEY;
+  const apiHost = options?.apiHost || DEFAULT_POSTHOG_HOST;
+  const debug = options?.debug ?? true; // Always enable debug for troubleshooting
+
+  console.log("[PostHog] Initializing with host:", apiHost);
+
+  posthog.init(apiKey, {
+    api_host: apiHost,
+    person_profiles: "identified_only",
+    autocapture: false,
+    capture_pageview: false,
+    capture_pageleave: true,
+    persistence: "localStorage", // Use localStorage for persistence
+    loaded: (ph) => {
+      console.log("[PostHog] Loaded successfully");
+      if (debug) {
+        ph.debug();
+      }
+    },
+  });
+
+  isInitialized = true;
+}
+
+/**
+ * Capture a bridge submit event
+ */
+export interface BridgeSubmitEventProperties {
+  amount: string;
+  chain: string | number;
+  chainName: string;
+  fast_bridge: "megaeth" | "citrea" | "monad";
+  tokenSymbol: string;
+}
+
+export function trackBridgeSubmit(
+  properties: BridgeSubmitEventProperties
+): void {
+  if (!isInitialized) {
+    console.warn("[PostHog] Not initialized, initializing now...");
+    initPostHog();
+  }
+
+  console.log(
+    "[PostHog] Capturing event: nexus_fast_bridge_demo_submit",
+    properties
+  );
+  posthog.capture("nexus_fast_bridge_demo_submit", properties);
+}
+
+/**
+ * Generic capture wrapper
+ */
+export function capture(
+  event: string,
+  properties?: Record<string, unknown>
+): void {
+  if (!isInitialized) {
+    console.warn("[PostHog] Not initialized, initializing now...");
+    initPostHog();
+  }
+
+  console.log("[PostHog] Capturing event:", event, properties);
+  posthog.capture(event, properties);
+}
diff --git a/apps/citrea/src/lib/transaction-utils.ts b/packages/fast-bridge-app/src/lib/transaction-utils.ts
similarity index 100%
rename from apps/citrea/src/lib/transaction-utils.ts
rename to packages/fast-bridge-app/src/lib/transaction-utils.ts
diff --git a/apps/monad/src/lib/url-params.ts b/packages/fast-bridge-app/src/lib/url-params.ts
similarity index 64%
rename from apps/monad/src/lib/url-params.ts
rename to packages/fast-bridge-app/src/lib/url-params.ts
index 2fb5962..f588843 100644
--- a/apps/monad/src/lib/url-params.ts
+++ b/packages/fast-bridge-app/src/lib/url-params.ts
@@ -1,38 +1,64 @@
-import { type SUPPORTED_CHAINS_IDS, type SUPPORTED_TOKENS } from "@avail-project/nexus-core";
+import type {
+  SUPPORTED_CHAINS_IDS,
+  SUPPORTED_TOKENS,
+} from "@avail-project/nexus-core";
 import { isAddress } from "viem";
 
 const ALLOWED_TOKENS = new Set(["USDC", "USDT"]) as Set<SUPPORTED_TOKENS>;
-const FILTERED_CHAIN_ID = 728126428;
+const FILTERED_CHAIN_ID = 728_126_428;
+const AMOUNT_PATTERN = /^\d*\.?\d*$/;
 
 interface BridgeParams {
+  amount?: string;
+  recipient?: `0x${string}`;
   to?: SUPPORTED_CHAINS_IDS;
   token?: SUPPORTED_TOKENS;
-  recipient?: `0x${string}`;
-  amount?: string;
 }
 
 function isValidToken(token: string | null): token is SUPPORTED_TOKENS {
-  if (!token) return false;
+  if (!token) {
+    return false;
+  }
   const upperToken = token.toUpperCase().trim();
   return ALLOWED_TOKENS.has(upperToken as SUPPORTED_TOKENS);
 }
 
 function isValidChain(chainStr: string | null): boolean {
-  if (!chainStr) return false;
+  if (!chainStr) {
+    return false;
+  }
   const chainId = Number.parseInt(chainStr, 10);
-  if (!Number.isInteger(chainId) || chainId <= 0 || chainId > Number.MAX_SAFE_INTEGER) return false;
-  if (chainId === FILTERED_CHAIN_ID) return false;
+  if (
+    !Number.isInteger(chainId) ||
+    chainId <= 0 ||
+    chainId > Number.MAX_SAFE_INTEGER
+  ) {
+    return false;
+  }
+  if (chainId === FILTERED_CHAIN_ID) {
+    return false;
+  }
   return true;
 }
 
 function sanitizeAmount(amount: string | null): string | undefined {
-  if (!amount) return undefined;
+  if (!amount) {
+    return undefined;
+  }
   const sanitized = amount.trim();
-  if (sanitized === "" || sanitized === ".") return undefined;
-  if (!/^\d*\.?\d*$/.test(sanitized)) return undefined;
+  if (sanitized === "" || sanitized === ".") {
+    return undefined;
+  }
+  if (!AMOUNT_PATTERN.test(sanitized)) {
+    return undefined;
+  }
   const num = Number.parseFloat(sanitized);
-  if (Number.isNaN(num) || num <= 0) return undefined;
-  if (num > 1e9) return undefined;
+  if (Number.isNaN(num) || num <= 0) {
+    return undefined;
+  }
+  if (num > 1e9) {
+    return undefined;
+  }
   return sanitized;
 }
 
@@ -43,10 +69,16 @@ export function readBridgeParams(): BridgeParams {
   const recipient = params.get("recipient");
   const amountStr = params.get("amount");
 
-  const to = toStr && toStr !== "self" && isValidChain(toStr) ? (Number.parseInt(toStr, 10) as SUPPORTED_CHAINS_IDS) : undefined;
-  const token = isValidToken(tokenStr) ? (tokenStr!.toUpperCase() as SUPPORTED_TOKENS) : undefined;
+  const to =
+    toStr && toStr !== "self" && isValidChain(toStr)
+      ? (Number.parseInt(toStr, 10) as SUPPORTED_CHAINS_IDS)
+      : undefined;
+  const token = isValidToken(tokenStr)
+    ? (tokenStr.toUpperCase() as SUPPORTED_TOKENS)
+    : undefined;
   const sanitizedAmount = sanitizeAmount(amountStr);
-  const recipientAddress = recipient && isAddress(recipient) ? recipient : undefined;
+  const recipientAddress =
+    recipient && isAddress(recipient) ? recipient : undefined;
 
   return {
     to,
diff --git a/packages/fast-bridge-app/src/lib/utils.ts b/packages/fast-bridge-app/src/lib/utils.ts
new file mode 100644
index 0000000..5498e25
--- /dev/null
+++ b/packages/fast-bridge-app/src/lib/utils.ts
@@ -0,0 +1,31 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+const EXTERNAL_URL_PATTERN = /^(?:[a-z][a-z\d+\-.]*:)?\/\//i;
+
+export function withBasePath(url: string | null | undefined): string {
+  if (!url) {
+    return "";
+  }
+  if (
+    EXTERNAL_URL_PATTERN.test(url) ||
+    url.startsWith("data:") ||
+    url.startsWith("blob:")
+  ) {
+    return url;
+  }
+
+  const baseUrl = import.meta.env.BASE_URL || "/";
+  const normalizedBase = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+  const normalizedUrl = url.startsWith("/") ? url.slice(1) : url;
+
+  return `${normalizedBase}${normalizedUrl}`;
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_BASE_URL}${path}`;
+}
diff --git a/packages/fast-bridge-app/src/main.tsx b/packages/fast-bridge-app/src/main.tsx
new file mode 100644
index 0000000..12a90cd
--- /dev/null
+++ b/packages/fast-bridge-app/src/main.tsx
@@ -0,0 +1,3 @@
+import { bootstrapApp } from "./bootstrap";
+
+bootstrapApp();
diff --git a/apps/monad/src/providers/web3Provider.tsx b/packages/fast-bridge-app/src/providers/web3-provider.tsx
similarity index 76%
rename from apps/monad/src/providers/web3Provider.tsx
rename to packages/fast-bridge-app/src/providers/web3-provider.tsx
index f913430..fa147f6 100644
--- a/apps/monad/src/providers/web3Provider.tsx
+++ b/packages/fast-bridge-app/src/providers/web3-provider.tsx
@@ -1,41 +1,41 @@
 "use client";
 
-import React from "react";
+import { appConfig } from "@fastbridge/runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConnectKitProvider, getDefaultConfig } from "connectkit";
-import { WagmiProvider, createConfig, http } from "wagmi";
+import type React from "react";
+import { createConfig, http, WagmiProvider } from "wagmi";
 import {
-  mainnet,
-  scroll,
-  polygon,
-  optimism,
   arbitrum,
-  base,
   avalanche,
-  sophon,
+  base,
+  type Chain,
   kaia,
+  mainnet,
   monad,
-  type Chain,
+  optimism,
+  polygon,
+  scroll,
+  sophon,
 } from "wagmi/chains";
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import config from "../../config";
 
 const walletConnectProjectId = import.meta.env.VITE_WALLET_CONNECT_ID;
 
 const chain: Chain = {
-  id: config.chainId,
-  name: config.chainName,
+  id: appConfig.chainId,
+  name: appConfig.chainName,
   nativeCurrency: {
-    name: config.chainNativeCurrency.name,
-    symbol: config.chainNativeCurrency.symbol,
-    decimals: config.chainNativeCurrency.decimals,
+    name: appConfig.chainNativeCurrency.name,
+    symbol: appConfig.chainNativeCurrency.symbol,
+    decimals: appConfig.chainNativeCurrency.decimals,
   },
   rpcUrls: {
-    default: { http: [config.chainRpcUrl] },
+    default: { http: [appConfig.chainRpcUrl] },
   },
   blockExplorers: {
-    default: { name: "Explorer", url: config.chainBlockExplorerUrl },
+    default: { name: "Explorer", url: appConfig.chainBlockExplorerUrl },
   },
-  testnet: config.chainTestnet,
+  testnet: appConfig.chainTestnet,
 };
 
 const megaeth: Chain = {
@@ -66,13 +66,13 @@ const transports = {
   [avalanche.id]: http(import.meta.env.VITE_AVALANCHE_RPC),
   [sophon.id]: http(import.meta.env.VITE_SOPHON_RPC),
   [kaia.id]: http(import.meta.env.VITE_KAIA_RPC),
-  [chain.id]: http(config.chainRpcUrl),
+  [chain.id]: http(appConfig.chainRpcUrl),
   [monad.id]: http(import.meta.env.VITE_MONAD_RPC),
   [megaeth.id]: http(import.meta.env.VITE_MEGAETH_RPC),
 };
 
 const defaultConfigParams = getDefaultConfig({
-  appName: config.appTitle ?? "Nexus Elements",
+  appName: appConfig.appTitle ?? "Nexus Elements",
   walletConnectProjectId,
   chains: [
     chain,
diff --git a/packages/fast-bridge-app/src/runtime-module.d.ts b/packages/fast-bridge-app/src/runtime-module.d.ts
new file mode 100644
index 0000000..58f3d2f
--- /dev/null
+++ b/packages/fast-bridge-app/src/runtime-module.d.ts
@@ -0,0 +1,6 @@
+declare module "@fastbridge/runtime" {
+  import type { AppConfig, ChainFeatures } from "./types/runtime";
+
+  export const appConfig: AppConfig;
+  export const chainFeatures: ChainFeatures;
+}
diff --git a/packages/fast-bridge-app/src/types/runtime.ts b/packages/fast-bridge-app/src/types/runtime.ts
new file mode 100644
index 0000000..eb6fe20
--- /dev/null
+++ b/packages/fast-bridge-app/src/types/runtime.ts
@@ -0,0 +1,98 @@
+export interface AppConfig {
+  appDescription: string;
+  appTitle: string;
+  chainBlockExplorerUrl: string;
+  chainGifAlt: string;
+  chainGifUrl: string;
+  chainIconUrl: string;
+  chainId: number;
+  chainLogoUrl: string;
+  chainName: string;
+  chainNativeCurrency: {
+    name: string;
+    symbol: string;
+    decimals: number;
+  };
+  chainRpcUrl: string;
+  chainTestnet: boolean;
+  heroText: string;
+  meta: {
+    title: string;
+    description: string;
+    canonicalUrl: string;
+    imageUrl: string;
+    faviconUrl: string;
+    themeColor: string;
+    backgroundColor: string;
+  };
+  nexusNetwork: string;
+  nexusPrimaryToken: string;
+  nexusSupportedChain: number;
+  primaryColor: string;
+  secondaryColor: string;
+  useChainLogo: boolean;
+}
+
+export interface ChainFeatures {
+  allowanceLogoOverrideByChainId?: Record<number, string>;
+  amountInputShowDestinationBadge?: boolean;
+  amountInputUseCalculatedMaxHeader?: boolean;
+  amountInputUseSourceSymbolInBreakdown?: boolean;
+  analyticsFastBridgeKey: string;
+  denyIntentOnReset?: boolean;
+  dialogShowCloseButton?: boolean;
+  feeBreakdownHideGasSupplied?: boolean;
+  feeBreakdownKeepZeroRows?: boolean;
+  feeBreakdownZeroForNonCaGasOnDestinationId?: number;
+  hideMegaethSourceForUsdm?: boolean;
+  mapUsdmDisplaySymbolToUsdc?: boolean;
+  mapUsdmToUsdcBalance?: boolean;
+  maxBridgeAmount: number;
+  pageDescription?: string;
+  postBridgeWatchAsset?: {
+    destinationChainId: number;
+    tokenSymbol: string;
+    walletAsset: {
+      address: string;
+      decimals: number;
+      image: string;
+      symbol: string;
+    };
+  };
+  promoBannerImageUrl?: string;
+  promoBannerLine1?: string;
+  promoBannerLine2?: string;
+  showFluffeyMascot?: boolean;
+  showPromoBanner?: boolean;
+  showSupportCta?: boolean;
+  slug: string;
+  supportCtaHref?: string;
+  supportCtaLine1?: string;
+  supportCtaLine2?: string;
+  tokenDenyListByChainId?: Record<number, string[]>;
+  tokenLogoOverrideBySymbol?: Record<string, string>;
+  walletInitDelayMs?: number;
+}
+
+export const defaultChainFeatures: ChainFeatures = {
+  slug: "default",
+  analyticsFastBridgeKey: "default",
+  maxBridgeAmount: 550,
+  walletInitDelayMs: 0,
+  showFluffeyMascot: false,
+  showPromoBanner: false,
+  showSupportCta: false,
+  mapUsdmDisplaySymbolToUsdc: false,
+  mapUsdmToUsdcBalance: false,
+  denyIntentOnReset: true,
+  tokenDenyListByChainId: {},
+  tokenLogoOverrideBySymbol: {},
+  allowanceLogoOverrideByChainId: {},
+  amountInputUseCalculatedMaxHeader: false,
+  amountInputShowDestinationBadge: false,
+  amountInputUseSourceSymbolInBreakdown: false,
+  hideMegaethSourceForUsdm: true,
+  feeBreakdownHideGasSupplied: false,
+  feeBreakdownKeepZeroRows: false,
+  dialogShowCloseButton: true,
+};
diff --git a/packages/fast-bridge-app/src/vite-env.d.ts b/packages/fast-bridge-app/src/vite-env.d.ts
new file mode 100644
index 0000000..1a8b0eb
--- /dev/null
+++ b/packages/fast-bridge-app/src/vite-env.d.ts
@@ -0,0 +1,58 @@
+/// <reference types="vite/client" />
+
+import { SUPPORTED_CHAINS } from "@avail-project/nexus-core";
+
+export interface AppEnv {
+  readonly VITE_APP_BASE_PATH?: string;
+  readonly VITE_CONFIG_APP_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_BACKGROUND_COLOR: string;
+  readonly VITE_CONFIG_APP_META_CANONICAL_URL: string;
+  readonly VITE_CONFIG_APP_META_DESCRIPTION: string;
+  readonly VITE_CONFIG_APP_META_FAVICON_URL: string;
+  readonly VITE_CONFIG_APP_META_IMAGE_URL: string;
+  readonly VITE_CONFIG_APP_META_THEME_COLOR: string;
+
+  readonly VITE_CONFIG_APP_META_TITLE: string;
+  readonly VITE_CONFIG_APP_TITLE: string;
+  readonly VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL: string;
+  readonly VITE_CONFIG_CHAIN_GIF_ALT: string;
+  readonly VITE_CONFIG_CHAIN_GIF_URL: string;
+  readonly VITE_CONFIG_CHAIN_HERO_TEXT: string;
+  readonly VITE_CONFIG_CHAIN_ICON_URL: string;
+  readonly VITE_CONFIG_CHAIN_ID: number;
+  readonly VITE_CONFIG_CHAIN_LOGO_URL: string;
+  readonly VITE_CONFIG_CHAIN_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS: number;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME: string;
+  readonly VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL: string;
+  readonly VITE_CONFIG_CHAIN_RPC_URL: string;
+  readonly VITE_CONFIG_CHAIN_TESTNET: boolean;
+  readonly VITE_CONFIG_CHAIN_USE_CHAIN_LOGO: boolean;
+  readonly VITE_CONFIG_NEXUS_NETWORK: "mainnet" | "testnet" | "devnet";
+  readonly VITE_CONFIG_NEXUS_PRIMARY_TOKEN: string;
+  readonly VITE_CONFIG_NEXUS_SUPPORTED_CHAIN: SUPPORTED_CHAINS;
+  readonly VITE_CONFIG_PRIMARY_COLOR: string;
+  readonly VITE_CONFIG_SECONDARY_COLOR: string;
+}
+
+declare global {
+  interface ImportMetaEnv extends AppEnv {
+    readonly VITE_ARBITRUM_RPC: string;
+    readonly VITE_AVALANCHE_RPC: string;
+    readonly VITE_BASE: string;
+    readonly VITE_BASE_RPC: string;
+    readonly VITE_KAIA_RPC: string;
+    readonly VITE_MAINNET_RPC: string;
+    readonly VITE_MEGAETH_RPC: string;
+    readonly VITE_MONAD_RPC: string;
+    readonly VITE_OPTIMISM_RPC: string;
+    readonly VITE_POLYGON_RPC: string;
+    readonly VITE_SCROLL_RPC: string;
+    readonly VITE_SOPHON_RPC: string;
+    readonly VITE_WALLET_CONNECT_ID: string;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+}
diff --git a/packages/fast-bridge-app/tsconfig.json b/packages/fast-bridge-app/tsconfig.json
new file mode 100644
index 0000000..b86f718
--- /dev/null
+++ b/packages/fast-bridge-app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dff0182..185da33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,18 +8,30 @@ importers:
 
   .:
     devDependencies:
+      '@biomejs/biome':
+        specifier: 2.4.0
+        version: 2.4.0
+      husky:
+        specifier: ^9.1.7
+        version: 9.1.7
       turbo:
         specifier: ^2.7.5
         version: 2.8.2
+      ultracite:
+        specifier: 7.2.3
+        version: 7.2.3
 
   apps/citrea:
     dependencies:
       '@avail-project/nexus-core':
-        specifier: github:availproject/nexus-sdk#cca99c1a570a8598334e3e89453d39a27d70ede7
-        version: https://codeload.github.com/availproject/nexus-sdk/tar.gz/cca99c1a570a8598334e3e89453d39a27d70ede7(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+        specifier: ^1.1.2
+        version: 1.1.2(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       '@radix-ui/react-accordion':
         specifier: ^1.2.12
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
@@ -40,13 +52,13 @@ importers:
         version: 2.2.10(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6))
       '@tailwindcss/vite':
         specifier: ^4.1.16
-        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       '@tanstack/react-query':
         specifier: ^5.90.2
         version: 5.90.20(react@19.2.2)
       '@vitejs/plugin-react':
         specifier: ^5.1.0
-        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -62,6 +74,9 @@ importers:
       lucide-react:
         specifier: ^0.544.0
         version: 0.544.0(react@19.2.2)
+      motion:
+        specifier: ^12.29.2
+        version: 12.30.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
@@ -88,7 +103,7 @@ importers:
         version: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       vite-plugin-node-polyfills:
         specifier: ^0.24.0
-        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       wagmi:
         specifier: ^2.17.5
         version: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)
@@ -128,16 +143,19 @@ importers:
         version: 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.8.3)
       vite:
         specifier: ^7.1.7
-        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
 
   apps/megaeth:
     dependencies:
       '@avail-project/nexus-core':
-        specifier: github:availproject/nexus-sdk#cca99c1a570a8598334e3e89453d39a27d70ede7
-        version: https://codeload.github.com/availproject/nexus-sdk/tar.gz/cca99c1a570a8598334e3e89453d39a27d70ede7(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+        specifier: 1.1.2
+        version: 1.1.2(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       '@radix-ui/react-accordion':
         specifier: ^1.2.12
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
@@ -158,13 +176,13 @@ importers:
         version: 2.2.10(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6))
       '@tailwindcss/vite':
         specifier: ^4.1.16
-        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       '@tanstack/react-query':
         specifier: ^5.90.2
         version: 5.90.20(react@19.2.2)
       '@vitejs/plugin-react':
         specifier: ^5.1.0
-        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -209,7 +227,7 @@ importers:
         version: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       vite-plugin-node-polyfills:
         specifier: ^0.24.0
-        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       wagmi:
         specifier: ^2.17.5
         version: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)
@@ -249,16 +267,19 @@ importers:
         version: 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.8.3)
       vite:
         specifier: ^7.1.7
-        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
 
   apps/monad:
     dependencies:
       '@avail-project/nexus-core':
-        specifier: github:availproject/nexus-sdk#cca99c1a570a8598334e3e89453d39a27d70ede7
-        version: https://codeload.github.com/availproject/nexus-sdk/tar.gz/cca99c1a570a8598334e3e89453d39a27d70ede7(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+        specifier: 1.1.2
+        version: 1.1.2(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       '@radix-ui/react-accordion':
         specifier: ^1.2.12
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
       '@radix-ui/react-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
@@ -279,13 +300,13 @@ importers:
         version: 2.2.10(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6))
       '@tailwindcss/vite':
         specifier: ^4.1.16
-        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       '@tanstack/react-query':
         specifier: ^5.90.2
         version: 5.90.20(react@19.2.2)
       '@vitejs/plugin-react':
         specifier: ^5.1.0
-        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -301,6 +322,9 @@ importers:
       lucide-react:
         specifier: ^0.544.0
         version: 0.544.0(react@19.2.2)
+      motion:
+        specifier: ^12.29.2
+        version: 12.30.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
@@ -327,7 +351,7 @@ importers:
         version: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
       vite-plugin-node-polyfills:
         specifier: ^0.24.0
-        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       wagmi:
         specifier: ^2.17.5
         version: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)
@@ -367,7 +391,7 @@ importers:
         version: 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.8.3)
       vite:
         specifier: ^7.1.7
-        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
 
   apps/root:
     dependencies:
@@ -407,7 +431,7 @@ importers:
         version: link:../monad
       '@tailwindcss/vite':
         specifier: ^4.1.16
-        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       '@types/node':
         specifier: ^24.6.0
         version: 24.10.9
@@ -419,7 +443,7 @@ importers:
         version: 19.2.3(@types/react@19.2.10)
       '@vitejs/plugin-react':
         specifier: ^5.1.0
-        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))
+        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
       shadcn:
         specifier: ^3.8.4
         version: 3.8.4(@types/node@24.10.9)(typescript@5.8.3)
@@ -434,7 +458,97 @@ importers:
         version: 5.8.3
       vite:
         specifier: ^7.1.7
-        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+        version: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
+
+  packages/fast-bridge-app:
+    dependencies:
+      '@avail-project/nexus-core':
+        specifier: github:availproject/nexus-sdk#fix/usdc-permit-issue-on-delegation
+        version: https://codeload.github.com/availproject/nexus-sdk/tar.gz/adc15ab4ae30c914cc0ebec979432bf9df9a4520(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.12
+        version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-label':
+        specifier: ^2.1.7
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.4(@types/react@19.2.10)(react@19.2.2)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      '@rainbow-me/rainbowkit':
+        specifier: ^2.2.8
+        version: 2.2.10(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))
+      '@tailwindcss/vite':
+        specifier: ^4.1.16
+        version: 4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+      '@tanstack/react-query':
+        specifier: ^5.90.2
+        version: 5.90.20(react@19.2.2)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.0
+        version: 5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      connectkit:
+        specifier: ^1.9.1
+        version: 1.9.1(@babel/core@7.29.0)(@tanstack/react-query@5.90.20(react@19.2.2))(react-dom@19.2.2(react@19.2.2))(react-is@16.13.1)(react@19.2.2)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))
+      decimal.js:
+        specifier: ^10.6.0
+        version: 10.6.0
+      lucide-react:
+        specifier: ^0.544.0
+        version: 0.544.0(react@19.2.2)
+      motion:
+        specifier: ^12.29.2
+        version: 12.30.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      posthog-js:
+        specifier: ^1.336.4
+        version: 1.336.4
+      react:
+        specifier: 19.2.2
+        version: 19.2.2
+      react-dom:
+        specifier: 19.2.2
+        version: 19.2.2(react@19.2.2)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.4.0
+      tailwindcss:
+        specifier: ^4.1.13
+        version: 4.1.18
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+      viem:
+        specifier: ^2.37.9
+        version: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      vite-plugin-node-polyfills:
+        specifier: ^0.24.0
+        version: 0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
+      wagmi:
+        specifier: ^2.17.5
+        version: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)
 
 packages:
 
@@ -448,9 +562,8 @@ packages:
     resolution: {integrity: sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA==}
     hasBin: true
 
-  '@avail-project/ca-common@https://codeload.github.com/availproject/ca-common/tar.gz/91801f57abd83929bc4d9af0a39815b9038234b5':
-    resolution: {tarball: https://codeload.github.com/availproject/ca-common/tar.gz/91801f57abd83929bc4d9af0a39815b9038234b5}
-    version: 1.0.0-beta.17
+  '@avail-project/ca-common@1.0.0':
+    resolution: {integrity: sha512-mKRWv/eT2jxZk7PGTeUOFy/QAqEzGHOyF7tVSJhB1wewlbKAZJ3+rXB7QaoyLAA3BY3P6aeMkOi48EfZxEExSA==}
     peerDependencies:
       '@cosmjs/proto-signing': ^0.34.0
       '@cosmjs/stargate': ^0.34.0
@@ -460,9 +573,13 @@ packages:
       msgpackr: ^1.11.4
       viem: ^2.31.7
 
-  '@avail-project/nexus-core@https://codeload.github.com/availproject/nexus-sdk/tar.gz/cca99c1a570a8598334e3e89453d39a27d70ede7':
-    resolution: {tarball: https://codeload.github.com/availproject/nexus-sdk/tar.gz/cca99c1a570a8598334e3e89453d39a27d70ede7}
-    version: 1.0.0
+  '@avail-project/nexus-core@1.1.2':
+    resolution: {integrity: sha512-TnDdZlvmJIOEDuD417B88sDuXRocnf1r8LGQB6Qbb6kPsf+mf09IhSTMrkYz3KEmfNSIrGdNnccgstEiX6+DGA==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
+  '@avail-project/nexus-core@https://codeload.github.com/availproject/nexus-sdk/tar.gz/adc15ab4ae30c914cc0ebec979432bf9df9a4520':
+    resolution: {tarball: https://codeload.github.com/availproject/nexus-sdk/tar.gz/adc15ab4ae30c914cc0ebec979432bf9df9a4520}
+    version: 1.1.1
     engines: {node: '>=18.0.0', npm: '>=9.0.0'}
 
   '@babel/code-frame@7.29.0':
@@ -617,9 +734,68 @@ packages:
   '@base-org/account@2.4.0':
     resolution: {integrity: sha512-A4Umpi8B9/pqR78D1Yoze4xHyQaujioVRqqO3d6xuDFw9VRtjg6tK3bPlwE0aW+nVH/ntllCpPa2PbI8Rnjcug==}
 
+  '@biomejs/biome@2.4.0':
+    resolution: {integrity: sha512-iluT61cORUDIC5i/y42ljyQraCemmmcgbMLLCnYO+yh+2hjTmcMFcwY8G0zTzWCsPb3t3AyKc+0t/VuhPZULUg==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@2.4.0':
+    resolution: {integrity: sha512-L+YpOtPSuU0etomfvFTPWRsa7+8ejaJL3yaROEoT/96HDJbR6OsvZQk0C8JUYou+XFdP+JcGxqZknkp4n934RA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@2.4.0':
+    resolution: {integrity: sha512-Aq+S7ffpb5ynTyLgtnEjG+W6xuTd2F7FdC7J6ShpvRhZwJhjzwITGF9vrqoOnw0sv1XWkt2Q1Rpg+hleg/Xg7Q==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@2.4.0':
+    resolution: {integrity: sha512-1rhDUq8sf7xX3tg7vbnU3WVfanKCKi40OXc4VleBMzRStmQHdeBY46aFP6VdwEomcVjyNiu+Zcr3LZtAdrZrjQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@biomejs/cli-linux-arm64@2.4.0':
+    resolution: {integrity: sha512-u2p54IhvNAWB+h7+rxCZe3reNfQYFK+ppDw+q0yegrGclFYnDPZAntv/PqgUacpC3uxTeuWFgWW7RFe3lHuxOA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@biomejs/cli-linux-x64-musl@2.4.0':
+    resolution: {integrity: sha512-Omo0xhl63z47X+CrE5viEWKJhejJyndl577VoXg763U/aoATrK3r5+8DPh02GokWPeODX1Hek00OtjjooGan9w==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+
+  '@biomejs/cli-linux-x64@2.4.0':
+    resolution: {integrity: sha512-WVFOhsnzhrbMGOSIcB9yFdRV2oG2KkRRhIZiunI9gJqSU3ax9ErdnTxRfJUxZUI9NbzVxC60OCXNcu+mXfF/Tw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+
+  '@biomejs/cli-win32-arm64@2.4.0':
+    resolution: {integrity: sha512-aqRwW0LJLV1v1NzyLvLWQhdLmDSAV1vUh+OBdYJaa8f28XBn5BZavo+WTfqgEzALZxlNfBmu6NGO6Al3MbCULw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@biomejs/cli-win32-x64@2.4.0':
+    resolution: {integrity: sha512-g47s+V+OqsGxbSZN3lpav6WYOk0PIc3aCBAq+p6dwSynL3K5MA6Cg6nkzDOlu28GEHwbakW+BllzHCJCxnfK5Q==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
+
   '@bufbuild/protobuf@2.11.0':
     resolution: {integrity: sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==}
 
+  '@clack/core@1.0.1':
+    resolution: {integrity: sha512-WKeyK3NOBwDOzagPR5H08rFk9D/WuN705yEbuZvKqlkmoLM2woKtXb10OO2k1NoSU4SFG947i2/SCYh+2u5e4g==}
+
+  '@clack/prompts@1.0.1':
+    resolution: {integrity: sha512-/42G73JkuYdyWZ6m8d/CJtBrGl1Hegyc7Fy78m5Ob+jF85TOUmLR5XLce/U3LxYAw0kJ8CT5aI99RIvPHcGp/Q==}
+
   '@coinbase/cdp-sdk@1.44.0':
     resolution: {integrity: sha512-0I5O1DzbchR91GAYQAU8lxx6q9DBvN0no9IBwrTKLHW8t5bABMg8dzQ/jrGRd6lr/QFJJW4L0ZSLGae5jsxGWw==}
 
@@ -3214,6 +3390,10 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@4.0.3:
+    resolution: {integrity: sha512-1pHv8LX9CpKut1Zp4EXey7Z8OfH11ONNH6Dhi2WDUt31VVZFXZzKwXcysBgqSumFCmR+0dqjMK5v5JiFHzi0+g==}
+    engines: {node: 20 || >=22}
+
   base-x@3.0.11:
     resolution: {integrity: sha512-xz7wQ8xDhdyP7tQxwdteLYeFfS68tSMNCZ/Y37WJ4bhGfKPpqEIlmIyueQHqOyoPhE6xNUqjzRr8ra0eF9VRvA==}
 
@@ -3264,6 +3444,10 @@ packages:
   brace-expansion@2.0.2:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
+  brace-expansion@5.0.2:
+    resolution: {integrity: sha512-Pdk8c9poy+YhOgVWw1JNN22/HcivgKWwpxKq04M/jTmHyCZn12WPJebZxdjSa5TmBqISrUSgNYU3eRORljfCCw==}
+    engines: {node: 20 || >=22}
+
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -3380,6 +3564,9 @@ packages:
     resolution: {integrity: sha512-Mz9QMT5fJe7bKI7MH31UilT5cEK5EHHRCccw/YRFsRY47AuNgaV6HY3rscp0/I4Q+tTW/5zoqpSeRRI54TkDWA==}
     engines: {node: '>= 0.10'}
 
+  citty@0.2.1:
+    resolution: {integrity: sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==}
+
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
@@ -4176,6 +4363,10 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
+  glob@13.0.6:
+    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
+    engines: {node: 18 || 20 || >=22}
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -4277,6 +4468,11 @@ packages:
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
 
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   iconv-lite@0.7.2:
     resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
     engines: {node: '>=0.10.0'}
@@ -4532,6 +4728,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsonfile@6.2.0:
     resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
@@ -4762,6 +4961,10 @@ packages:
     resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
     engines: {node: 20 || >=22}
 
+  minimatch@10.2.2:
+    resolution: {integrity: sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -4772,6 +4975,10 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@7.1.3:
+    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   mipd@0.0.7:
     resolution: {integrity: sha512-aAPZPNDQ3uMTdKbuO2YmAw2TxLHO0moa4YKAyETM/DTj5FloZo+a+8tU+iv4GmW+sOxKLSRwcSFuczk+Cpt6fg==}
     peerDependencies:
@@ -4911,6 +5118,11 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  nypm@0.6.5:
+    resolution: {integrity: sha512-K6AJy1GMVyfyMXRVB88700BJqNUkByijGJM8kEHpLdcAt+vSQAVfkWWHYzuRXHSY6xA2sNc5RjTj0p9rE2izVQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   obj-multiplex@1.0.0:
     resolution: {integrity: sha512-0GNJAOsHoBHeNTvl5Vt6IWnpUEcc3uSRxzBri7EDyIcMgYvnY2JL2qdeV5zTMjWQX5OHcD5amcW2HFfDh0gjIA==}
 
@@ -5079,12 +5291,19 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
+
   path-to-regexp@6.3.0:
     resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
 
   path-to-regexp@8.3.0:
     resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   pbkdf2@3.1.5:
     resolution: {integrity: sha512-Q3CG/cYvCO1ye4QKkuH7EXxs3VC/rI1/trd+qX2+PolbaKG0H+bgcZzrTt96mMyRtejk+JMCiLUn3y29W8qmFQ==}
     engines: {node: '>= 0.10'}
@@ -5886,6 +6105,15 @@ packages:
   uint8arrays@5.1.0:
     resolution: {integrity: sha512-vA6nFepEmlSKkMBnLBaUMVvAC4G3CTmO58C12y4sq6WPDOR7mOFYOi7GlrQ4djeSbP6JG9Pv9tJDM97PedRSww==}
 
+  ultracite@7.2.3:
+    resolution: {integrity: sha512-WKNS2sKAZe4BHu+JGbZebXvy/A1QagDaBnndrK/zwOJAze/mQ8jeHfdG2bPlv3qcJ5fdS3w2Kd7c/eIcH78HvA==}
+    hasBin: true
+    peerDependencies:
+      oxlint: ^1.0.0
+    peerDependenciesMeta:
+      oxlint:
+        optional: true
+
   uncrypto@0.1.3:
     resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
 
@@ -6276,6 +6504,11 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yaml@2.8.2:
+    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -6385,7 +6618,25 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.0.2
 
-  '@avail-project/ca-common@https://codeload.github.com/availproject/ca-common/tar.gz/91801f57abd83929bc4d9af0a39815b9038234b5(@cosmjs/proto-signing@0.34.1)(@cosmjs/stargate@0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10))(axios@1.13.4)(decimal.js@10.6.0)(google-protobuf@3.21.4)(long@5.3.2)(msgpackr@1.11.8)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))':
+  '@avail-project/ca-common@1.0.0(@cosmjs/proto-signing@0.34.1)(@cosmjs/stargate@0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10))(axios@1.13.4)(decimal.js@10.6.0)(google-protobuf@3.21.4)(long@5.3.2)(msgpackr@1.11.8)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))':
+    dependencies:
+      '@bufbuild/protobuf': 2.11.0
+      '@cosmjs/proto-signing': 0.34.1
+      '@cosmjs/stargate': 0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      '@improbable-eng/grpc-web': 0.15.0(google-protobuf@3.21.4)
+      '@improbable-eng/grpc-web-node-http-transport': 0.15.0(@improbable-eng/grpc-web@0.15.0(google-protobuf@3.21.4))
+      axios: 1.13.4
+      browser-headers: 0.4.1
+      decimal.js: 10.6.0
+      es-toolkit: 1.44.0
+      long: 5.3.2
+      msgpackr: 1.11.8
+      tslib: 2.8.1
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - google-protobuf
+
+  '@avail-project/ca-common@1.0.0(@cosmjs/proto-signing@0.34.1)(@cosmjs/stargate@0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10))(axios@1.13.4)(decimal.js@10.6.0)(google-protobuf@3.21.4)(long@5.3.2)(msgpackr@1.11.8)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))':
     dependencies:
       '@bufbuild/protobuf': 2.11.0
       '@cosmjs/proto-signing': 0.34.1
@@ -6403,9 +6654,9 @@ snapshots:
     transitivePeerDependencies:
       - google-protobuf
 
-  '@avail-project/nexus-core@https://codeload.github.com/availproject/nexus-sdk/tar.gz/cca99c1a570a8598334e3e89453d39a27d70ede7(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
+  '@avail-project/nexus-core@1.1.2(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
-      '@avail-project/ca-common': https://codeload.github.com/availproject/ca-common/tar.gz/91801f57abd83929bc4d9af0a39815b9038234b5(@cosmjs/proto-signing@0.34.1)(@cosmjs/stargate@0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10))(axios@1.13.4)(decimal.js@10.6.0)(google-protobuf@3.21.4)(long@5.3.2)(msgpackr@1.11.8)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))
+      '@avail-project/ca-common': 1.0.0(@cosmjs/proto-signing@0.34.1)(@cosmjs/stargate@0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10))(axios@1.13.4)(decimal.js@10.6.0)(google-protobuf@3.21.4)(long@5.3.2)(msgpackr@1.11.8)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))
       '@cosmjs/proto-signing': 0.34.1
       '@cosmjs/stargate': 0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10)
       '@metamask/safe-event-emitter': 3.1.2
@@ -6436,6 +6687,39 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@avail-project/nexus-core@https://codeload.github.com/availproject/nexus-sdk/tar.gz/adc15ab4ae30c914cc0ebec979432bf9df9a4520(@opentelemetry/api@1.9.0)(bufferutil@4.1.0)(google-protobuf@3.21.4)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@avail-project/ca-common': 1.0.0(@cosmjs/proto-signing@0.34.1)(@cosmjs/stargate@0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10))(axios@1.13.4)(decimal.js@10.6.0)(google-protobuf@3.21.4)(long@5.3.2)(msgpackr@1.11.8)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))
+      '@cosmjs/proto-signing': 0.34.1
+      '@cosmjs/stargate': 0.34.1(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      '@metamask/safe-event-emitter': 3.1.2
+      '@opentelemetry/api-logs': 0.208.0
+      '@opentelemetry/exporter-logs-otlp-http': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.0)
+      '@starkware-industries/starkware-crypto-utils': 0.2.1
+      '@tronweb3/tronwallet-abstract-adapter': 1.1.10(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      axios: 1.13.4
+      buffer: 6.0.3
+      decimal.js: 10.6.0
+      es-toolkit: 1.44.0
+      it-ws: 6.1.5(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      long: 5.3.2
+      msgpackr: 1.11.8
+      posthog-js: 1.336.4
+      tronweb: 6.1.1(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      tslib: 2.8.1
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - bufferutil
+      - debug
+      - encoding
+      - google-protobuf
+      - typescript
+      - utf-8-validate
+      - zod
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -6638,6 +6922,30 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@base-org/account@2.4.0(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@coinbase/cdp-sdk': 1.44.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
+      '@noble/hashes': 1.4.0
+      clsx: 1.2.1
+      eventemitter3: 5.0.1
+      idb-keyval: 6.2.1
+      ox: 0.6.9(typescript@5.8.3)(zod@3.25.76)
+      preact: 10.24.2
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      zustand: 5.0.3(@types/react@19.2.10)(react@19.2.2)(use-sync-external-store@1.4.0(react@19.2.2))
+    transitivePeerDependencies:
+      - '@types/react'
+      - bufferutil
+      - debug
+      - encoding
+      - fastestsmallesttextencoderdecoder
+      - immer
+      - react
+      - typescript
+      - use-sync-external-store
+      - utf-8-validate
+      - zod
+
   '@base-org/account@2.4.0(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@coinbase/cdp-sdk': 1.44.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
@@ -6662,8 +6970,54 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@biomejs/biome@2.4.0':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.4.0
+      '@biomejs/cli-darwin-x64': 2.4.0
+      '@biomejs/cli-linux-arm64': 2.4.0
+      '@biomejs/cli-linux-arm64-musl': 2.4.0
+      '@biomejs/cli-linux-x64': 2.4.0
+      '@biomejs/cli-linux-x64-musl': 2.4.0
+      '@biomejs/cli-win32-arm64': 2.4.0
+      '@biomejs/cli-win32-x64': 2.4.0
+
+  '@biomejs/cli-darwin-arm64@2.4.0':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.4.0':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.4.0':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.4.0':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.4.0':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.4.0':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.4.0':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.4.0':
+    optional: true
+
   '@bufbuild/protobuf@2.11.0': {}
 
+  '@clack/core@1.0.1':
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@clack/prompts@1.0.1':
+    dependencies:
+      '@clack/core': 1.0.1
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
   '@coinbase/cdp-sdk@1.44.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)':
     dependencies:
       '@solana-program/system': 0.10.0(@solana/kit@5.5.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10))
@@ -6700,6 +7054,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@coinbase/wallet-sdk@4.3.6(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@noble/hashes': 1.4.0
+      clsx: 1.2.1
+      eventemitter3: 5.0.1
+      idb-keyval: 6.2.1
+      ox: 0.6.9(typescript@5.8.3)(zod@3.25.76)
+      preact: 10.24.2
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      zustand: 5.0.3(@types/react@19.2.10)(react@19.2.2)(use-sync-external-store@1.4.0(react@19.2.2))
+    transitivePeerDependencies:
+      - '@types/react'
+      - bufferutil
+      - immer
+      - react
+      - typescript
+      - use-sync-external-store
+      - utf-8-validate
+      - zod
+
   '@coinbase/wallet-sdk@4.3.6(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@noble/hashes': 1.4.0
@@ -7006,15 +7380,23 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@gemini-wallet/core@0.3.2(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))':
+  '@gemini-wallet/core@0.3.2(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))':
     dependencies:
       '@metamask/rpc-errors': 7.0.2
       eventemitter3: 5.0.1
-      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
     transitivePeerDependencies:
       - supports-color
 
-  '@hono/node-server@1.19.9(hono@4.11.7)':
+  '@gemini-wallet/core@0.3.2(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))':
+    dependencies:
+      '@metamask/rpc-errors': 7.0.2
+      eventemitter3: 5.0.1
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@hono/node-server@1.19.9(hono@4.11.7)':
     dependencies:
       hono: 4.11.7
 
@@ -7261,7 +7643,7 @@ snapshots:
       '@noble/hashes': 1.8.0
       '@scure/base': 1.2.6
       '@types/debug': 4.1.12
-      debug: 4.3.4
+      debug: 4.4.3(supports-color@5.5.0)
       pony-cause: 2.1.11
       semver: 7.7.3
       uuid: 9.0.1
@@ -7275,7 +7657,7 @@ snapshots:
       '@noble/hashes': 1.8.0
       '@scure/base': 1.2.6
       '@types/debug': 4.1.12
-      debug: 4.3.4
+      debug: 4.4.3(supports-color@5.5.0)
       pony-cause: 2.1.11
       semver: 7.7.3
       uuid: 9.0.1
@@ -8304,6 +8686,25 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
+  '@rainbow-me/rainbowkit@2.2.10(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))':
+    dependencies:
+      '@tanstack/react-query': 5.90.20(react@19.2.2)
+      '@vanilla-extract/css': 1.17.3
+      '@vanilla-extract/dynamic': 2.1.4
+      '@vanilla-extract/sprinkles': 1.6.4(@vanilla-extract/css@1.17.3)
+      clsx: 2.1.1
+      cuer: 0.0.3(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)
+      react: 19.2.2
+      react-dom: 19.2.2(react@19.2.2)
+      react-remove-scroll: 2.6.2(@types/react@19.2.10)(react@19.2.2)
+      ua-parser-js: 1.0.41
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      wagmi: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@types/react'
+      - babel-plugin-macros
+      - typescript
+
   '@rainbow-me/rainbowkit@2.2.10(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(typescript@5.8.3)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6))':
     dependencies:
       '@tanstack/react-query': 5.90.20(react@19.2.2)
@@ -8334,6 +8735,17 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@reown/appkit-common@1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      big.js: 6.2.2
+      dayjs: 1.11.13
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - bufferutil
+      - typescript
+      - utf-8-validate
+      - zod
+
   '@reown/appkit-common@1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       big.js: 6.2.2
@@ -8345,6 +8757,41 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@reown/appkit-controllers@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-wallet': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
+      '@walletconnect/universal-provider': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      valtio: 1.13.2(@types/react@19.2.10)(react@19.2.2)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@reown/appkit-controllers@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8380,6 +8827,42 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@reown/appkit-pay@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-ui': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-utils': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@3.25.76)
+      lit: 3.3.0
+      valtio: 1.13.2(@types/react@19.2.10)(react@19.2.2)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@reown/appkit-pay@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8420,6 +8903,43 @@ snapshots:
     dependencies:
       buffer: 6.0.3
 
+  '@reown/appkit-scaffold-ui@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-ui': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-utils': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@3.25.76)
+      '@reown/appkit-wallet': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
+      lit: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - valtio
+      - zod
+
   '@reown/appkit-scaffold-ui@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@4.3.6)':
     dependencies:
       '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8457,6 +8977,41 @@ snapshots:
       - valtio
       - zod
 
+  '@reown/appkit-ui@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-wallet': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
+      lit: 3.3.0
+      qrcode: 1.5.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@reown/appkit-ui@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8492,6 +9047,44 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@reown/appkit-utils@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-polyfills': 1.7.8
+      '@reown/appkit-wallet': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/universal-provider': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      valtio: 1.13.2(@types/react@19.2.10)(react@19.2.2)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@reown/appkit-utils@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@4.3.6)':
     dependencies:
       '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8541,6 +9134,49 @@ snapshots:
       - typescript
       - utf-8-validate
 
+  '@reown/appkit@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-controllers': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-pay': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-polyfills': 1.7.8
+      '@reown/appkit-scaffold-ui': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@3.25.76)
+      '@reown/appkit-ui': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@reown/appkit-utils': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(valtio@1.13.2(@types/react@19.2.10)(react@19.2.2))(zod@3.25.76)
+      '@reown/appkit-wallet': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)
+      '@walletconnect/types': 2.21.0
+      '@walletconnect/universal-provider': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      bs58: 6.0.0
+      valtio: 1.13.2(@types/react@19.2.10)(react@19.2.2)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@reown/appkit@1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@reown/appkit-common': 1.7.8(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8677,6 +9313,16 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.57.1':
     optional: true
 
+  '@safe-global/safe-apps-provider@0.18.6(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@safe-global/safe-apps-sdk': 9.1.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      events: 3.3.0
+    transitivePeerDependencies:
+      - bufferutil
+      - typescript
+      - utf-8-validate
+      - zod
+
   '@safe-global/safe-apps-provider@0.18.6(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@safe-global/safe-apps-sdk': 9.1.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -8687,6 +9333,16 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@safe-global/safe-apps-sdk@9.1.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@safe-global/safe-gateway-typescript-sdk': 3.23.1
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    transitivePeerDependencies:
+      - bufferutil
+      - typescript
+      - utf-8-validate
+      - zod
+
   '@safe-global/safe-apps-sdk@9.1.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@safe-global/safe-gateway-typescript-sdk': 3.23.1
@@ -9199,7 +9855,7 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.28.6
       '@noble/curves': 1.9.7
-      '@noble/hashes': 1.4.0
+      '@noble/hashes': 1.8.0
       '@solana/buffer-layout': 4.0.1
       '@solana/codecs-numbers': 2.3.0(typescript@5.8.3)
       agentkeepalive: 4.6.0
@@ -9302,12 +9958,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))':
+  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
 
   '@tanstack/query-core@5.90.20': {}
 
@@ -9532,7 +10188,7 @@ snapshots:
     dependencies:
       '@vanilla-extract/css': 1.17.3
 
-  '@vitejs/plugin-react@5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))':
+  '@vitejs/plugin-react@5.1.3(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
@@ -9540,11 +10196,64 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.2
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@wagmi/connectors@6.2.0(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6))(zod@4.3.6)':
+  '@wagmi/connectors@6.2.0(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)))(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))(zod@3.25.76)':
+    dependencies:
+      '@base-org/account': 2.4.0(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@coinbase/wallet-sdk': 4.3.6(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@gemini-wallet/core': 0.3.2(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))
+      '@metamask/sdk': 0.33.1(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      '@safe-global/safe-apps-provider': 0.18.6(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@safe-global/safe-apps-sdk': 9.1.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@wagmi/core': 2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))
+      '@walletconnect/ethereum-provider': 2.21.1(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      cbw-sdk: '@coinbase/wallet-sdk@3.9.3'
+      porto: 0.2.35(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)))(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@tanstack/react-query'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - debug
+      - encoding
+      - expo-auth-session
+      - expo-crypto
+      - expo-web-browser
+      - fastestsmallesttextencoderdecoder
+      - immer
+      - ioredis
+      - react
+      - react-native
+      - supports-color
+      - uploadthing
+      - use-sync-external-store
+      - utf-8-validate
+      - wagmi
+      - zod
+
+  '@wagmi/connectors@6.2.0(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6))(zod@4.3.6)':
     dependencies:
       '@base-org/account': 2.4.0(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@4.3.6)
       '@coinbase/wallet-sdk': 4.3.6(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -9597,6 +10306,21 @@ snapshots:
       - wagmi
       - zod
 
+  '@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))':
+    dependencies:
+      eventemitter3: 5.0.1
+      mipd: 0.0.7(typescript@5.8.3)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      zustand: 5.0.0(@types/react@19.2.10)(react@19.2.2)(use-sync-external-store@1.4.0(react@19.2.2))
+    optionalDependencies:
+      '@tanstack/query-core': 5.90.20
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - react
+      - use-sync-external-store
+
   '@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))':
     dependencies:
       eventemitter3: 5.0.1
@@ -9612,6 +10336,50 @@ snapshots:
       - react
       - use-sync-external-store
 
+  '@walletconnect/core@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-provider': 1.0.14
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/jsonrpc-ws-connection': 1.0.16(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/relay-api': 1.0.11
+      '@walletconnect/relay-auth': 1.1.0
+      '@walletconnect/safe-json': 1.0.2
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.21.0
+      '@walletconnect/utils': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/window-getters': 1.0.1
+      es-toolkit: 1.33.0
+      events: 3.3.0
+      uint8arrays: 3.1.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - ioredis
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@walletconnect/core@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@walletconnect/heartbeat': 1.2.2
@@ -9656,6 +10424,50 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@walletconnect/core@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-provider': 1.0.14
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/jsonrpc-ws-connection': 1.0.16(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/relay-api': 1.0.11
+      '@walletconnect/relay-auth': 1.1.0
+      '@walletconnect/safe-json': 1.0.2
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.21.1
+      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/window-getters': 1.0.1
+      es-toolkit: 1.33.0
+      events: 3.3.0
+      uint8arrays: 3.1.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - ioredis
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@walletconnect/core@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@walletconnect/heartbeat': 1.2.2
@@ -9704,6 +10516,47 @@ snapshots:
     dependencies:
       tslib: 1.14.1
 
+  '@walletconnect/ethereum-provider@2.21.1(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@reown/appkit': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/jsonrpc-http-connection': 1.0.8
+      '@walletconnect/jsonrpc-provider': 1.0.14
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/sign-client': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/types': 2.21.1
+      '@walletconnect/universal-provider': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - react
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@walletconnect/ethereum-provider@2.21.1(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@reown/appkit': 1.7.8(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -9838,6 +10691,42 @@ snapshots:
     dependencies:
       tslib: 1.14.1
 
+  '@walletconnect/sign-client@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@walletconnect/core': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.21.0
+      '@walletconnect/utils': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - ioredis
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@walletconnect/sign-client@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@walletconnect/core': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -9874,6 +10763,42 @@ snapshots:
       - utf-8-validate
       - zod
 
+  '@walletconnect/sign-client@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@walletconnect/core': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.21.1
+      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - ioredis
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   '@walletconnect/sign-client@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@walletconnect/core': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
@@ -9881,9 +10806,150 @@ snapshots:
       '@walletconnect/heartbeat': 1.2.2
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/logger': 2.1.2
-      '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.21.1
-      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.21.1
+      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - ioredis
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
+  '@walletconnect/time@1.0.2':
+    dependencies:
+      tslib: 1.14.1
+
+  '@walletconnect/types@2.21.0':
+    dependencies:
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.1.2
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - ioredis
+      - uploadthing
+
+  '@walletconnect/types@2.21.1':
+    dependencies:
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.1.2
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - ioredis
+      - uploadthing
+
+  '@walletconnect/universal-provider@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
+    dependencies:
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/jsonrpc-http-connection': 1.0.8
+      '@walletconnect/jsonrpc-provider': 1.0.14
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/sign-client': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/types': 2.21.0
+      '@walletconnect/utils': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      es-toolkit: 1.33.0
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - encoding
+      - ioredis
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - zod
+
+  '@walletconnect/universal-provider@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
+    dependencies:
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/jsonrpc-http-connection': 1.0.8
+      '@walletconnect/jsonrpc-provider': 1.0.14
+      '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.1.2
+      '@walletconnect/sign-client': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      '@walletconnect/types': 2.21.0
+      '@walletconnect/utils': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      es-toolkit: 1.33.0
       events: 3.3.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -9904,23 +10970,26 @@ snapshots:
       - aws4fetch
       - bufferutil
       - db0
+      - encoding
       - ioredis
       - typescript
       - uploadthing
       - utf-8-validate
       - zod
 
-  '@walletconnect/time@1.0.2':
-    dependencies:
-      tslib: 1.14.1
-
-  '@walletconnect/types@2.21.0':
+  '@walletconnect/universal-provider@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
     dependencies:
       '@walletconnect/events': 1.0.1
-      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-http-connection': 1.0.8
+      '@walletconnect/jsonrpc-provider': 1.0.14
       '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/keyvaluestorage': 1.1.1
       '@walletconnect/logger': 2.1.2
+      '@walletconnect/sign-client': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      '@walletconnect/types': 2.21.1
+      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      es-toolkit: 1.33.0
       events: 3.3.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -9939,17 +11008,28 @@ snapshots:
       - '@vercel/functions'
       - '@vercel/kv'
       - aws4fetch
+      - bufferutil
       - db0
+      - encoding
       - ioredis
+      - typescript
       - uploadthing
+      - utf-8-validate
+      - zod
 
-  '@walletconnect/types@2.21.1':
+  '@walletconnect/universal-provider@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
       '@walletconnect/events': 1.0.1
-      '@walletconnect/heartbeat': 1.2.2
+      '@walletconnect/jsonrpc-http-connection': 1.0.8
+      '@walletconnect/jsonrpc-provider': 1.0.14
       '@walletconnect/jsonrpc-types': 1.0.4
+      '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/keyvaluestorage': 1.1.1
       '@walletconnect/logger': 2.1.2
+      '@walletconnect/sign-client': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      '@walletconnect/types': 2.21.1
+      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      es-toolkit: 1.33.0
       events: 3.3.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -9968,24 +11048,34 @@ snapshots:
       - '@vercel/functions'
       - '@vercel/kv'
       - aws4fetch
+      - bufferutil
       - db0
+      - encoding
       - ioredis
+      - typescript
       - uploadthing
+      - utf-8-validate
+      - zod
 
-  '@walletconnect/universal-provider@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
+  '@walletconnect/utils@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
     dependencies:
-      '@walletconnect/events': 1.0.1
-      '@walletconnect/jsonrpc-http-connection': 1.0.8
-      '@walletconnect/jsonrpc-provider': 1.0.14
-      '@walletconnect/jsonrpc-types': 1.0.4
+      '@noble/ciphers': 1.2.1
+      '@noble/curves': 1.8.1
+      '@noble/hashes': 1.7.1
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/keyvaluestorage': 1.1.1
-      '@walletconnect/logger': 2.1.2
-      '@walletconnect/sign-client': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      '@walletconnect/relay-api': 1.0.11
+      '@walletconnect/relay-auth': 1.1.0
+      '@walletconnect/safe-json': 1.0.2
+      '@walletconnect/time': 1.0.2
       '@walletconnect/types': 2.21.0
-      '@walletconnect/utils': 2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
-      es-toolkit: 1.33.0
-      events: 3.3.0
+      '@walletconnect/window-getters': 1.0.1
+      '@walletconnect/window-metadata': 1.0.1
+      bs58: 6.0.0
+      detect-browser: 5.3.0
+      query-string: 7.1.3
+      uint8arrays: 3.1.0
+      viem: 2.23.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -10005,27 +11095,31 @@ snapshots:
       - aws4fetch
       - bufferutil
       - db0
-      - encoding
       - ioredis
       - typescript
       - uploadthing
       - utf-8-validate
       - zod
 
-  '@walletconnect/universal-provider@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
+  '@walletconnect/utils@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
     dependencies:
-      '@walletconnect/events': 1.0.1
-      '@walletconnect/jsonrpc-http-connection': 1.0.8
-      '@walletconnect/jsonrpc-provider': 1.0.14
-      '@walletconnect/jsonrpc-types': 1.0.4
+      '@noble/ciphers': 1.2.1
+      '@noble/curves': 1.8.1
+      '@noble/hashes': 1.7.1
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/keyvaluestorage': 1.1.1
-      '@walletconnect/logger': 2.1.2
-      '@walletconnect/sign-client': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
-      '@walletconnect/types': 2.21.1
-      '@walletconnect/utils': 2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
-      es-toolkit: 1.33.0
-      events: 3.3.0
+      '@walletconnect/relay-api': 1.0.11
+      '@walletconnect/relay-auth': 1.1.0
+      '@walletconnect/safe-json': 1.0.2
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.21.0
+      '@walletconnect/window-getters': 1.0.1
+      '@walletconnect/window-metadata': 1.0.1
+      bs58: 6.0.0
+      detect-browser: 5.3.0
+      query-string: 7.1.3
+      uint8arrays: 3.1.0
+      viem: 2.23.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -10045,14 +11139,13 @@ snapshots:
       - aws4fetch
       - bufferutil
       - db0
-      - encoding
       - ioredis
       - typescript
       - uploadthing
       - utf-8-validate
       - zod
 
-  '@walletconnect/utils@2.21.0(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)':
+  '@walletconnect/utils@2.21.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)':
     dependencies:
       '@noble/ciphers': 1.2.1
       '@noble/curves': 1.8.1
@@ -10063,14 +11156,14 @@ snapshots:
       '@walletconnect/relay-auth': 1.1.0
       '@walletconnect/safe-json': 1.0.2
       '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.21.0
+      '@walletconnect/types': 2.21.1
       '@walletconnect/window-getters': 1.0.1
       '@walletconnect/window-metadata': 1.0.1
       bs58: 6.0.0
       detect-browser: 5.3.0
       query-string: 7.1.3
       uint8arrays: 3.1.0
-      viem: 2.23.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)
+      viem: 2.23.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -10154,6 +11247,11 @@ snapshots:
       typescript: 5.8.3
       zod: 3.25.76
 
+  abitype@1.0.8(typescript@5.8.3)(zod@3.25.76):
+    optionalDependencies:
+      typescript: 5.8.3
+      zod: 3.25.76
+
   abitype@1.0.8(typescript@5.8.3)(zod@4.3.6):
     optionalDependencies:
       typescript: 5.8.3
@@ -10299,6 +11397,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balanced-match@4.0.3: {}
+
   base-x@3.0.11:
     dependencies:
       safe-buffer: 5.2.1
@@ -10356,6 +11456,10 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
+  brace-expansion@5.0.2:
+    dependencies:
+      balanced-match: 4.0.3
+
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
@@ -10502,6 +11606,8 @@ snapshots:
       safe-buffer: 5.2.1
       to-buffer: 1.2.2
 
+  citty@0.2.1: {}
+
   class-variance-authority@0.7.1:
     dependencies:
       clsx: 2.1.1
@@ -10552,6 +11658,26 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  connectkit@1.9.1(@babel/core@7.29.0)(@tanstack/react-query@5.90.20(react@19.2.2))(react-dom@19.2.2(react@19.2.2))(react-is@16.13.1)(react@19.2.2)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)):
+    dependencies:
+      '@tanstack/react-query': 5.90.20(react@19.2.2)
+      buffer: 6.0.3
+      detect-browser: 5.3.0
+      family: 0.1.6(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))
+      framer-motion: 6.5.1(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      qrcode: 1.5.4
+      react: 19.2.2
+      react-dom: 19.2.2(react@19.2.2)
+      react-transition-state: 1.1.5(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      react-use-measure: 2.1.7(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
+      resize-observer-polyfill: 1.5.1
+      styled-components: 5.3.11(@babel/core@7.29.0)(react-dom@19.2.2(react@19.2.2))(react-is@16.13.1)(react@19.2.2)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      wagmi: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - react-is
+
   connectkit@1.9.1(@babel/core@7.29.0)(@tanstack/react-query@5.90.20(react@19.2.2))(react-dom@19.2.2(react@19.2.2))(react-is@16.13.1)(react@19.2.2)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)):
     dependencies:
       '@tanstack/react-query': 5.90.20(react@19.2.2)
@@ -11190,6 +12316,13 @@ snapshots:
 
   eyes@0.1.8: {}
 
+  family@0.1.6(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)):
+    optionalDependencies:
+      react: 19.2.2
+      react-dom: 19.2.2(react@19.2.2)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      wagmi: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)
+
   family@0.1.6(react-dom@19.2.2(react@19.2.2))(react@19.2.2)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)):
     optionalDependencies:
       react: 19.2.2
@@ -11385,6 +12518,12 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob@13.0.6:
+    dependencies:
+      minimatch: 10.2.2
+      minipass: 7.1.3
+      path-scurry: 2.0.2
+
   globals@14.0.0: {}
 
   globals@16.5.0: {}
@@ -11490,6 +12629,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  husky@9.1.7: {}
+
   iconv-lite@0.7.2:
     dependencies:
       safer-buffer: 2.1.2
@@ -11694,6 +12835,8 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonc-parser@3.3.1: {}
+
   jsonfile@6.2.0:
     dependencies:
       universalify: 2.0.1
@@ -11895,6 +13038,10 @@ snapshots:
     dependencies:
       '@isaacs/brace-expansion': 5.0.1
 
+  minimatch@10.2.2:
+    dependencies:
+      brace-expansion: 5.0.2
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -11905,6 +13052,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  minipass@7.1.3: {}
+
   mipd@0.0.7(typescript@5.8.3):
     optionalDependencies:
       typescript: 5.8.3
@@ -12058,6 +13207,12 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  nypm@0.6.5:
+    dependencies:
+      citty: 0.2.1
+      pathe: 2.0.3
+      tinyexec: 1.0.2
+
   obj-multiplex@1.0.0:
     dependencies:
       end-of-stream: 1.4.5
@@ -12195,14 +13350,42 @@ snapshots:
     transitivePeerDependencies:
       - zod
 
+  ox@0.6.7(typescript@5.8.3)(zod@3.25.76):
+    dependencies:
+      '@adraffy/ens-normalize': 1.11.1
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+      '@scure/bip32': 1.7.0
+      '@scure/bip39': 1.6.0
+      abitype: 1.2.3(typescript@5.8.3)(zod@3.25.76)
+      eventemitter3: 5.0.1
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - zod
+
   ox@0.6.7(typescript@5.8.3)(zod@4.3.6):
     dependencies:
       '@adraffy/ens-normalize': 1.11.1
-      '@noble/curves': 1.8.1
-      '@noble/hashes': 1.7.1
-      '@scure/bip32': 1.6.2
-      '@scure/bip39': 1.5.4
-      abitype: 1.0.8(typescript@5.8.3)(zod@4.3.6)
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+      '@scure/bip32': 1.7.0
+      '@scure/bip39': 1.6.0
+      abitype: 1.2.3(typescript@5.8.3)(zod@4.3.6)
+      eventemitter3: 5.0.1
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - zod
+
+  ox@0.6.9(typescript@5.8.3)(zod@3.25.76):
+    dependencies:
+      '@adraffy/ens-normalize': 1.11.1
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+      '@scure/bip32': 1.7.0
+      '@scure/bip39': 1.6.0
+      abitype: 1.2.3(typescript@5.8.3)(zod@3.25.76)
       eventemitter3: 5.0.1
     optionalDependencies:
       typescript: 5.8.3
@@ -12293,10 +13476,17 @@ snapshots:
 
   path-parse@1.0.7: {}
 
+  path-scurry@2.0.2:
+    dependencies:
+      lru-cache: 11.2.5
+      minipass: 7.1.3
+
   path-to-regexp@6.3.0: {}
 
   path-to-regexp@8.3.0: {}
 
+  pathe@2.0.3: {}
+
   pbkdf2@3.1.5:
     dependencies:
       create-hash: 1.2.0
@@ -12354,6 +13544,26 @@ snapshots:
       style-value-types: 5.0.0
       tslib: 2.8.1
 
+  porto@0.2.35(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)))(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)):
+    dependencies:
+      '@wagmi/core': 2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))
+      hono: 4.11.7
+      idb-keyval: 6.2.2
+      mipd: 0.0.7(typescript@5.8.3)
+      ox: 0.9.17(typescript@5.8.3)(zod@4.3.6)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+      zod: 4.3.6
+      zustand: 5.0.11(@types/react@19.2.10)(react@19.2.2)(use-sync-external-store@1.4.0(react@19.2.2))
+    optionalDependencies:
+      '@tanstack/react-query': 5.90.20(react@19.2.2)
+      react: 19.2.2
+      typescript: 5.8.3
+      wagmi: 2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - use-sync-external-store
+
   porto@0.2.35(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6)))(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6)):
     dependencies:
       '@wagmi/core': 2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))
@@ -12760,7 +13970,7 @@ snapshots:
       '@types/uuid': 8.3.4
       '@types/ws': 8.18.1
       buffer: 6.0.3
-      eventemitter3: 5.0.1
+      eventemitter3: 5.0.4
       uuid: 8.3.2
       ws: 8.19.0(bufferutil@4.1.0)(utf-8-validate@5.0.10)
     optionalDependencies:
@@ -13247,6 +14457,15 @@ snapshots:
     dependencies:
       multiformats: 13.4.2
 
+  ultracite@7.2.3:
+    dependencies:
+      '@clack/prompts': 1.0.1
+      commander: 14.0.3
+      deepmerge: 4.3.1
+      glob: 13.0.6
+      jsonc-parser: 3.3.1
+      nypm: 0.6.5
+
   uncrypto@0.1.3: {}
 
   undici-types@6.19.8: {}
@@ -13353,6 +14572,23 @@ snapshots:
 
   vary@1.1.2: {}
 
+  viem@2.23.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76):
+    dependencies:
+      '@noble/curves': 1.8.1
+      '@noble/hashes': 1.7.1
+      '@scure/bip32': 1.6.2
+      '@scure/bip39': 1.5.4
+      abitype: 1.0.8(typescript@5.8.3)(zod@3.25.76)
+      isows: 1.0.6(ws@8.18.0(bufferutil@4.1.0)(utf-8-validate@5.0.10))
+      ox: 0.6.7(typescript@5.8.3)(zod@3.25.76)
+      ws: 8.18.0(bufferutil@4.1.0)(utf-8-validate@5.0.10)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+      - zod
+
   viem@2.23.2(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6):
     dependencies:
       '@noble/curves': 1.8.1
@@ -13421,15 +14657,15 @@ snapshots:
       - utf-8-validate
       - zod
 
-  vite-plugin-node-polyfills@0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)):
+  vite-plugin-node-polyfills@0.24.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)):
     dependencies:
       '@rollup/plugin-inject': 5.0.5(rollup@4.57.1)
       node-stdlib-browser: 1.3.1
-      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite: 7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2)
     transitivePeerDependencies:
       - rollup
 
-  vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2):
+  vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -13442,9 +14678,55 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.6.1
       lightningcss: 1.30.2
+      yaml: 2.8.2
 
   vm-browserify@1.1.2: {}
 
+  wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76):
+    dependencies:
+      '@tanstack/react-query': 5.90.20(react@19.2.2)
+      '@wagmi/connectors': 6.2.0(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(@wagmi/core@2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)))(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))(zod@3.25.76))(zod@3.25.76)
+      '@wagmi/core': 2.22.1(@tanstack/query-core@5.90.20)(@types/react@19.2.10)(react@19.2.2)(typescript@5.8.3)(use-sync-external-store@1.4.0(react@19.2.2))(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76))
+      react: 19.2.2
+      use-sync-external-store: 1.4.0(react@19.2.2)
+      viem: 2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@3.25.76)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@tanstack/query-core'
+      - '@types/react'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bufferutil
+      - db0
+      - debug
+      - encoding
+      - expo-auth-session
+      - expo-crypto
+      - expo-web-browser
+      - fastestsmallesttextencoderdecoder
+      - immer
+      - ioredis
+      - react-native
+      - supports-color
+      - uploadthing
+      - utf-8-validate
+      - zod
+
   wagmi@2.19.5(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@19.2.2))(@types/react@19.2.10)(bufferutil@4.1.0)(react@19.2.2)(typescript@5.8.3)(utf-8-validate@5.0.10)(viem@2.45.1(bufferutil@4.1.0)(typescript@5.8.3)(utf-8-validate@5.0.10)(zod@4.3.6))(zod@4.3.6):
     dependencies:
       '@tanstack/react-query': 5.90.20(react@19.2.2)
@@ -13584,6 +14866,9 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yaml@2.8.2:
+    optional: true
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
diff --git a/scripts/build-vercel-env.mjs b/scripts/build-vercel-env.mjs
index 9ac40fc..b3e829e 100644
--- a/scripts/build-vercel-env.mjs
+++ b/scripts/build-vercel-env.mjs
@@ -9,6 +9,7 @@ const rootDir = path.resolve(
   path.dirname(fileURLToPath(import.meta.url)),
   ".."
 );
+const NEWLINE_SPLIT_REGEX = /\r?\n/;
 
 function parseArgs(argv) {
   let outputPath;
@@ -24,7 +25,7 @@ function parseArgs(argv) {
 
 function parseEnvFile(contents, sourceLabel) {
   const entries = [];
-  const lines = contents.split(/\r?\n/);
+  const lines = contents.split(NEWLINE_SPLIT_REGEX);
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
@@ -54,7 +55,7 @@ async function readEnvForChain(chain) {
   const envFileName = `.env.${slug}`;
   const candidates = [
     path.join(rootDir, chain.appDir, envFileName),
-    path.join(rootDir, envFileName)
+    path.join(rootDir, envFileName),
   ];
 
   for (const candidate of candidates) {
diff --git a/scripts/chains-add.mjs b/scripts/chains-add.mjs
new file mode 100755
index 0000000..032d54d
--- /dev/null
+++ b/scripts/chains-add.mjs
@@ -0,0 +1,345 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const rootDir = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const chainsPath = path.join(rootDir, "chains.config.json");
+const appsDir = path.join(rootDir, "apps");
+const HERO_TEXT_FALLBACK_REGEX = /heroText:\s*[\s\S]*?\|\|\s*"[^"]*",/;
+const DEV_SCRIPT_PORT_REGEX = /--port\s+(\d+)/;
+const VALID_SLUG_REGEX = /^[a-z0-9-]+$/;
+const VITE_BASE_FALLBACK_REGEX =
+  /const rawBase = env\.VITE_APP_BASE_PATH \|\| "[^"]+";/;
+const RUNTIME_SLUG_FIELD_REGEX = /slug:\s*"[^"]+"/;
+const RUNTIME_ANALYTICS_KEY_REGEX = /analyticsFastBridgeKey:\s*"[^"]+"/;
+
+function usage() {
+  console.log(
+    "Usage: node scripts/chains-add.mjs <slug> [options]\n\nOptions:\n  --name <name>             Display name (default: title-cased slug)\n  --description <text>      Card description\n  --base-path <path>        Base path (default: /<slug>/)\n  --primary <hex>           Primary color (default: #836ef9)\n  --secondary <hex>         Secondary color (default: #ffffff)\n  --logo-url <url>          Optional logo URL for root card\n  --icon-url <url>          Optional icon URL for root card\n  --template <slug>         Template app to clone (default: monad)\n"
+  );
+}
+
+function parseArgs(argv) {
+  const [first, ...rest] = argv;
+  if (!first || first === "-h" || first === "--help") {
+    return { help: true };
+  }
+
+  const options = {
+    slug: first,
+    template: "monad",
+  };
+
+  for (let i = 0; i < rest.length; i += 1) {
+    const arg = rest[i];
+    const next = rest[i + 1];
+    if (!arg.startsWith("--")) {
+      throw new Error(`Unexpected argument: ${arg}`);
+    }
+
+    switch (arg) {
+      case "--name":
+        options.name = next;
+        i += 1;
+        break;
+      case "--description":
+        options.description = next;
+        i += 1;
+        break;
+      case "--base-path":
+        options.basePath = next;
+        i += 1;
+        break;
+      case "--primary":
+        options.primaryColor = next;
+        i += 1;
+        break;
+      case "--secondary":
+        options.secondaryColor = next;
+        i += 1;
+        break;
+      case "--logo-url":
+        options.logoUrl = next;
+        i += 1;
+        break;
+      case "--icon-url":
+        options.iconUrl = next;
+        i += 1;
+        break;
+      case "--template":
+        options.template = next;
+        i += 1;
+        break;
+      default:
+        throw new Error(`Unknown option: ${arg}`);
+    }
+  }
+
+  return options;
+}
+
+function titleCaseFromSlug(slug) {
+  return slug
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function normalizeBasePath(basePath, slug) {
+  const value = (basePath || `/${slug}/`).trim();
+  const prefixed = value.startsWith("/") ? value : `/${value}`;
+  return prefixed.endsWith("/") ? prefixed : `${prefixed}/`;
+}
+
+async function readJson(filePath) {
+  const raw = await fs.readFile(filePath, "utf8");
+  return JSON.parse(raw);
+}
+
+async function writeJson(filePath, value) {
+  await fs.writeFile(filePath, `${JSON.stringify(value, null, 2)}\n`, "utf8");
+}
+
+async function pathExists(filePath) {
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function updateFallbackLiteral(source, field, nextLiteral) {
+  const regex = new RegExp(`(${field}\\s*:\\s*[^\\n]*\\|\\|\\s*)"[^"]*"`);
+  return source.replace(regex, `$1"${nextLiteral}"`);
+}
+
+function updateHeroFallback(source, nextLiteral) {
+  return source.replace(
+    HERO_TEXT_FALLBACK_REGEX,
+    `heroText:\n            env.VITE_CONFIG_CHAIN_HERO_TEXT ||\n            "${nextLiteral}",`
+  );
+}
+
+function inferUsedPorts(packageJsonObjects) {
+  const ports = new Set();
+  for (const pkg of packageJsonObjects) {
+    const devScript = pkg?.scripts?.dev;
+    if (typeof devScript !== "string") {
+      continue;
+    }
+    const match = devScript.match(DEV_SCRIPT_PORT_REGEX);
+    if (match) {
+      ports.add(Number(match[1]));
+    }
+  }
+  return ports;
+}
+
+function pickNextPort(usedPorts, start = 5173) {
+  let port = start;
+  while (usedPorts.has(port)) {
+    port += 1;
+  }
+  return port;
+}
+
+async function runScript(scriptPath) {
+  await new Promise((resolve, reject) => {
+    const child = spawn("node", [scriptPath], {
+      cwd: rootDir,
+      stdio: "inherit",
+      env: process.env,
+    });
+
+    child.on("exit", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(
+          new Error(`${path.basename(scriptPath)} failed with code ${code}`)
+        );
+      }
+    });
+    child.on("error", reject);
+  });
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    usage();
+    return;
+  }
+
+  const slug = args.slug.toLowerCase();
+  if (!VALID_SLUG_REGEX.test(slug)) {
+    throw new Error(
+      `Invalid slug: ${slug}. Use lowercase letters, numbers, and dashes.`
+    );
+  }
+
+  const name = args.name?.trim() || titleCaseFromSlug(slug);
+  const description =
+    args.description?.trim() ||
+    `Bridge from any chain to ${name}, in real time.`;
+  const primaryColor = args.primaryColor?.trim() || "#836ef9";
+  const secondaryColor = args.secondaryColor?.trim() || "#ffffff";
+  const basePath = normalizeBasePath(args.basePath, slug);
+  const templateSlug = (args.template || "monad").toLowerCase();
+
+  const templateAppDir = path.join(appsDir, templateSlug);
+  const targetAppDir = path.join(appsDir, slug);
+
+  const chains = await readJson(chainsPath);
+  if (!Array.isArray(chains)) {
+    throw new Error("chains.config.json must be an array.");
+  }
+
+  if (chains.some((chain) => chain.slug === slug)) {
+    throw new Error(`Chain '${slug}' already exists in chains.config.json.`);
+  }
+
+  if (!(await pathExists(templateAppDir))) {
+    throw new Error(
+      `Template app '${templateSlug}' does not exist at ${templateAppDir}.`
+    );
+  }
+
+  if (await pathExists(targetAppDir)) {
+    throw new Error(`Target app directory already exists: ${targetAppDir}`);
+  }
+
+  await fs.cp(templateAppDir, targetAppDir, { recursive: true });
+  await fs.rm(path.join(targetAppDir, "dist"), {
+    recursive: true,
+    force: true,
+  });
+  await fs.rm(path.join(targetAppDir, "node_modules"), {
+    recursive: true,
+    force: true,
+  });
+  await fs.rm(path.join(targetAppDir, ".turbo"), {
+    recursive: true,
+    force: true,
+  });
+  await fs.rm(path.join(targetAppDir, ".env.local"), { force: true });
+  await fs.rm(path.join(targetAppDir, ".env.production"), { force: true });
+
+  const templateEnvPath = path.join(targetAppDir, `.env.${templateSlug}`);
+  const targetEnvPath = path.join(targetAppDir, `.env.${slug}`);
+  if (await pathExists(templateEnvPath)) {
+    await fs.rename(templateEnvPath, targetEnvPath);
+  }
+
+  const usedPorts = inferUsedPorts(
+    await Promise.all(
+      chains.map((chain) => {
+        const packagePath = path.join(rootDir, chain.appDir, "package.json");
+        return readJson(packagePath);
+      })
+    )
+  );
+
+  const nextPort = pickNextPort(usedPorts);
+
+  const packagePath = path.join(targetAppDir, "package.json");
+  const targetPkg = await readJson(packagePath);
+  targetPkg.name = `@fastbridge/${slug}`;
+  targetPkg.scripts = targetPkg.scripts || {};
+  targetPkg.scripts.dev = `node ../../scripts/prepare-env.mjs ${slug} && vite --host --port ${nextPort}`;
+  targetPkg.scripts.build = `node ../../scripts/prepare-env.mjs ${slug} && vite build`;
+  await writeJson(packagePath, targetPkg);
+
+  const vitePath = path.join(targetAppDir, "vite.config.ts");
+  const viteRaw = await fs.readFile(vitePath, "utf8");
+  const viteNext = viteRaw.replace(
+    VITE_BASE_FALLBACK_REGEX,
+    `const rawBase = env.VITE_APP_BASE_PATH || "${basePath}";`
+  );
+  await fs.writeFile(vitePath, viteNext, "utf8");
+
+  const getConfigPath = path.join(targetAppDir, "get-config.ts");
+  const getConfigRaw = await fs.readFile(getConfigPath, "utf8");
+  let getConfigNext = getConfigRaw;
+  getConfigNext = updateFallbackLiteral(getConfigNext, "chainName", name);
+  getConfigNext = updateHeroFallback(
+    getConfigNext,
+    `Bridge from any chain to ${name}, in real time.`
+  );
+  getConfigNext = updateFallbackLiteral(
+    getConfigNext,
+    "appTitle",
+    `${name} Fast Bridge`
+  );
+  getConfigNext = updateFallbackLiteral(
+    getConfigNext,
+    "appDescription",
+    `Bridge from any chain to ${name}, in real time.`
+  );
+  getConfigNext = updateFallbackLiteral(
+    getConfigNext,
+    "primaryColor",
+    primaryColor
+  );
+  getConfigNext = updateFallbackLiteral(
+    getConfigNext,
+    "secondaryColor",
+    secondaryColor
+  );
+  getConfigNext = updateFallbackLiteral(
+    getConfigNext,
+    "title",
+    `${name} Fast Bridge - Powered by Avail Nexus`
+  );
+  getConfigNext = updateFallbackLiteral(
+    getConfigNext,
+    "description",
+    `Bridge from any chain to ${name}, in real time.`
+  );
+  await fs.writeFile(getConfigPath, getConfigNext, "utf8");
+
+  const runtimePath = path.join(targetAppDir, "src", "runtime.ts");
+  const runtimeRaw = await fs.readFile(runtimePath, "utf8");
+  const runtimeNext = runtimeRaw
+    .replace(RUNTIME_SLUG_FIELD_REGEX, `slug: "${slug}"`)
+    .replace(RUNTIME_ANALYTICS_KEY_REGEX, `analyticsFastBridgeKey: "${slug}"`);
+  await fs.writeFile(runtimePath, runtimeNext, "utf8");
+
+  const newChain = {
+    slug,
+    name,
+    description,
+    primaryColor,
+    secondaryColor,
+    basePath,
+    appDir: `apps/${slug}`,
+    ...(args.logoUrl ? { logoUrl: args.logoUrl } : {}),
+    ...(args.iconUrl ? { iconUrl: args.iconUrl } : {}),
+  };
+
+  const nextChains = [...chains, newChain].sort((a, b) =>
+    a.slug.localeCompare(b.slug)
+  );
+  await writeJson(chainsPath, nextChains);
+
+  await runScript(path.join(rootDir, "scripts", "sync-chains.mjs"));
+
+  console.log(`\nScaffolded chain '${slug}' at apps/${slug}`);
+  console.log("Next steps:");
+  console.log(`1. Update apps/${slug}/.env.${slug} values`);
+  console.log(`2. Run pnpm --filter @fastbridge/${slug} dev`);
+  console.log("3. Run pnpm vercel:env and sync deployment env vars");
+}
+
+main().catch((error) => {
+  console.error(error.message || error);
+  usage();
+  process.exit(1);
+});
diff --git a/scripts/collect-chains.mjs b/scripts/collect-chains.mjs
index a235e64..cdf0a3a 100644
--- a/scripts/collect-chains.mjs
+++ b/scripts/collect-chains.mjs
@@ -32,12 +32,16 @@ async function main() {
     try {
       await fs.access(distDir);
     } catch {
-      console.warn(`Missing dist for ${chain.slug} at ${distDir}. Build the chain app first.`);
+      console.warn(
+        `Missing dist for ${chain.slug} at ${distDir}. Build the chain app first.`
+      );
       continue;
     }
 
     await copyDist(distDir, targetDir);
-    console.log(`Copied ${chain.slug} dist -> ${path.relative(rootDir, targetDir)}`);
+    console.log(
+      `Copied ${chain.slug} dist -> ${path.relative(rootDir, targetDir)}`
+    );
   }
 }
 
diff --git a/scripts/dev-all.mjs b/scripts/dev-all.mjs
new file mode 100755
index 0000000..b2a92bb
--- /dev/null
+++ b/scripts/dev-all.mjs
@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const rootDir = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  ".."
+);
+const chainsPath = path.join(rootDir, "chains.config.json");
+
+async function main() {
+  const chainsRaw = await fs.readFile(chainsPath, "utf8");
+  const chains = JSON.parse(chainsRaw);
+  const filters = chains.flatMap((chain) => [
+    "--filter",
+    `@fastbridge/${chain.slug}`,
+  ]);
+
+  const child = spawn(
+    "pnpm",
+    ["turbo", "run", "dev", "--parallel", ...filters, "--filter", "root"],
+    {
+      cwd: rootDir,
+      stdio: "inherit",
+      env: process.env,
+      shell: process.platform === "win32",
+    }
+  );
+
+  child.on("exit", (code) => {
+    process.exit(code ?? 1);
+  });
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/precommit-fix-staged.mjs b/scripts/precommit-fix-staged.mjs
new file mode 100644
index 0000000..dce1152
--- /dev/null
+++ b/scripts/precommit-fix-staged.mjs
@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+import { execFileSync, spawnSync } from "node:child_process";
+
+const FIXABLE_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|jsonc?|css|scss|mdx?)$/i;
+
+function getStagedFiles() {
+  const output = execFileSync(
+    "git",
+    ["diff", "--cached", "--name-only", "--diff-filter=ACMR", "-z"],
+    { encoding: "utf8" }
+  );
+
+  return output
+    .split("\0")
+    .filter(Boolean)
+    .filter((file) => FIXABLE_FILE_PATTERN.test(file));
+}
+
+function run(command, args, options = {}) {
+  const result = spawnSync(command, args, {
+    stdio: "inherit",
+    shell: process.platform === "win32",
+    ...options,
+  });
+
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+  }
+}
+
+const files = getStagedFiles();
+
+if (files.length === 0) {
+  process.exit(0);
+}
+
+run("pnpm", ["ultracite", "fix", ...files]);
+run("git", ["add", "--", ...files], { shell: false });
diff --git a/scripts/prepare-env.mjs b/scripts/prepare-env.mjs
index a887de6..d3fb568 100644
--- a/scripts/prepare-env.mjs
+++ b/scripts/prepare-env.mjs
@@ -30,7 +30,9 @@ if (fs.existsSync(localEnvPath)) {
   fs.mkdirSync(envDir, { recursive: true });
   fs.writeFileSync(outputPathProd, contents, { encoding: "utf8" });
   fs.writeFileSync(outputPathLocal, contents, { encoding: "utf8" });
-  console.log(`Copied ${path.basename(localEnvPath)} to ${outputPathProd} and .env.local`);
+  console.log(
+    `Copied ${path.basename(localEnvPath)} to ${outputPathProd} and .env.local`
+  );
   process.exit(0);
 }
 
@@ -39,7 +41,9 @@ const entries = Object.entries(process.env).filter(([key]) =>
 );
 
 if (!entries.length) {
-  console.warn(`No environment variables found with prefix ${prefix} and no ${path.basename(localEnvPath)} present.`);
+  console.warn(
+    `No environment variables found with prefix ${prefix} and no ${path.basename(localEnvPath)} present.`
+  );
 }
 
 const lines = entries.map(([key, value]) => {
@@ -51,4 +55,6 @@ const envDir = path.dirname(outputPathProd);
 fs.mkdirSync(envDir, { recursive: true });
 fs.writeFileSync(outputPathProd, lines.join("\n"), { encoding: "utf8" });
 fs.writeFileSync(outputPathLocal, lines.join("\n"), { encoding: "utf8" });
-console.log(`Wrote ${lines.length} variables to ${outputPathProd} and .env.local`);
+console.log(
+  `Wrote ${lines.length} variables to ${outputPathProd} and .env.local`
+);
diff --git a/scripts/sync-chains.mjs b/scripts/sync-chains.mjs
index 4268409..ff59e3b 100644
--- a/scripts/sync-chains.mjs
+++ b/scripts/sync-chains.mjs
@@ -13,6 +13,7 @@ const rootDir = path.resolve(
 const chainsPath = path.join(rootDir, "chains.config.json");
 const rootPkgPath = path.join(rootDir, "apps", "root", "package.json");
 const turboPath = path.join(rootDir, "turbo.json");
+const NEWLINE_SPLIT_REGEX = /\r?\n/;
 
 async function readJson(filePath) {
   const raw = await fs.readFile(filePath, "utf8");
@@ -21,7 +22,7 @@ async function readJson(filePath) {
 
 function parseEnvFile(contents, sourceLabel) {
   const entries = [];
-  const lines = contents.split(/\r?\n/);
+  const lines = contents.split(NEWLINE_SPLIT_REGEX);
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const trimmed = line.trim();
@@ -49,7 +50,7 @@ async function readEnvKeysForChain(chain) {
   const envFileName = `.env.${slug}`;
   const candidates = [
     path.join(rootDir, chain.appDir, envFileName),
-    path.join(rootDir, envFileName)
+    path.join(rootDir, envFileName),
   ];
 
   for (const candidate of candidates) {
@@ -92,10 +93,16 @@ async function syncRootDeps(chains) {
         return acc;
       }, {});
     pkg.devDependencies = sorted;
-    await fs.writeFile(rootPkgPath, `${JSON.stringify(pkg, null, 2)}\n`, "utf8");
+    await fs.writeFile(
+      rootPkgPath,
+      `${JSON.stringify(pkg, null, 2)}\n`,
+      "utf8"
+    );
     console.log("Updated apps/root/package.json");
   } else {
-    console.log("apps/root/package.json already includes chain workspace deps.");
+    console.log(
+      "apps/root/package.json already includes chain workspace deps."
+    );
   }
 }
 
@@ -106,7 +113,9 @@ async function syncTurboEnv(chains) {
 
   for (const chain of chains) {
     const keys = await readEnvKeysForChain(chain);
-    keys.forEach((key) => envSet.add(key));
+    for (const key of keys) {
+      envSet.add(key);
+    }
   }
 
   const nextEnv = Array.from(envSet);
@@ -118,7 +127,11 @@ async function syncTurboEnv(chains) {
 
   if (changed) {
     turbo.globalEnv = nextEnv;
-    await fs.writeFile(turboPath, `${JSON.stringify(turbo, null, 2)}\n`, "utf8");
+    await fs.writeFile(
+      turboPath,
+      `${JSON.stringify(turbo, null, 2)}\n`,
+      "utf8"
+    );
     console.log(`Updated turbo.json globalEnv (${nextEnv.length} entries).`);
   } else {
     console.log("turbo.json globalEnv already up to date.");
@@ -129,7 +142,9 @@ async function main() {
   const chains = await readJson(chainsPath);
   await syncRootDeps(chains);
   await syncTurboEnv(chains);
-  console.log("Done. Next: run `pnpm vercel:env` to refresh env output, then deploy.");
+  console.log(
+    "Done. Next: run `pnpm vercel:env` to refresh env output, then deploy."
+  );
 }
 
 main().catch((err) => {
diff --git a/turbo.json b/turbo.json
index b304ceb..e222590 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,129 +1,130 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "globalEnv": [
-    "MONAD_VITE_OPTIMISM_RPC",
-    "MONAD_VITE_ARBITRUM_RPC",
-    "MONAD_VITE_MAINNET_RPC",
-    "MONAD_VITE_BASE_RPC",
-    "MONAD_VITE_KAIA_RPC",
-    "MONAD_VITE_SOPHON_RPC",
-    "MONAD_VITE_AVALANCHE_RPC",
-    "MONAD_VITE_SCROLL_RPC",
-    "MONAD_VITE_POLYGON_RPC",
-    "MONAD_VITE_BASE",
-    "MONAD_VITE_WALLET_CONNECT_ID",
-    "MONAD_VITE_CONFIG_CHAIN_ID",
-    "MONAD_VITE_CONFIG_CHAIN_NAME",
-    "MONAD_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME",
-    "MONAD_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL",
-    "MONAD_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS",
-    "MONAD_VITE_CONFIG_CHAIN_RPC_URL",
-    "MONAD_VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL",
-    "MONAD_VITE_CONFIG_CHAIN_TESTNET",
-    "MONAD_VITE_CONFIG_CHAIN_USE_CHAIN_LOGO",
-    "MONAD_VITE_CONFIG_CHAIN_ICON_URL",
-    "MONAD_VITE_CONFIG_CHAIN_LOGO_URL",
-    "MONAD_VITE_CONFIG_CHAIN_GIF_URL",
-    "MONAD_VITE_CONFIG_CHAIN_GIF_ALT",
-    "MONAD_VITE_CONFIG_CHAIN_HERO_TEXT",
-    "MONAD_VITE_CONFIG_APP_TITLE",
-    "MONAD_VITE_CONFIG_APP_DESCRIPTION",
-    "MONAD_VITE_CONFIG_PRIMARY_COLOR",
-    "MONAD_VITE_CONFIG_SECONDARY_COLOR",
-    "MONAD_VITE_CONFIG_NEXUS_NETWORK",
-    "MONAD_VITE_CONFIG_NEXUS_SUPPORTED_CHAIN",
-    "MONAD_VITE_CONFIG_NEXUS_PRIMARY_TOKEN",
-    "MONAD_VITE_CONFIG_APP_META_TITLE",
-    "MONAD_VITE_CONFIG_APP_META_DESCRIPTION",
-    "MONAD_VITE_CONFIG_APP_META_CANONICAL_URL",
-    "MONAD_VITE_CONFIG_APP_META_FAVICON_URL",
-    "MONAD_VITE_CONFIG_APP_META_THEME_COLOR",
-    "MONAD_VITE_CONFIG_APP_META_IMAGE_URL",
-    "MONAD_VITE_CONFIG_APP_META_BACKGROUND_COLOR",
-    "MEGAETH_VITE_OPTIMISM_RPC",
-    "MEGAETH_VITE_ARBITRUM_RPC",
-    "MEGAETH_VITE_MAINNET_RPC",
-    "MEGAETH_VITE_BASE_RPC",
-    "MEGAETH_VITE_KAIA_RPC",
-    "MEGAETH_VITE_SOPHON_RPC",
-    "MEGAETH_VITE_AVALANCHE_RPC",
-    "MEGAETH_VITE_SCROLL_RPC",
-    "MEGAETH_VITE_POLYGON_RPC",
-    "MEGAETH_VITE_MONAD_RPC",
-    "MEGAETH_VITE_MEGAETH_RPC",
-    "MEGAETH_VITE_BASE",
-    "MEGAETH_VITE_WALLET_CONNECT_ID",
-    "MEGAETH_VITE_CONFIG_CHAIN_ID",
-    "MEGAETH_VITE_CONFIG_CHAIN_NAME",
-    "MEGAETH_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME",
-    "MEGAETH_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL",
-    "MEGAETH_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS",
-    "MEGAETH_VITE_CONFIG_CHAIN_RPC_URL",
-    "MEGAETH_VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL",
-    "MEGAETH_VITE_CONFIG_CHAIN_TESTNET",
-    "MEGAETH_VITE_CONFIG_CHAIN_USE_CHAIN_LOGO",
-    "MEGAETH_VITE_CONFIG_CHAIN_ICON_URL",
-    "MEGAETH_VITE_CONFIG_CHAIN_LOGO_URL",
-    "MEGAETH_VITE_CONFIG_CHAIN_GIF_URL",
-    "MEGAETH_VITE_CONFIG_CHAIN_GIF_ALT",
-    "MEGAETH_VITE_CONFIG_CHAIN_HERO_TEXT",
-    "MEGAETH_VITE_CONFIG_APP_TITLE",
-    "MEGAETH_VITE_CONFIG_APP_DESCRIPTION",
-    "MEGAETH_VITE_CONFIG_PRIMARY_COLOR",
-    "MEGAETH_VITE_CONFIG_SECONDARY_COLOR",
-    "MEGAETH_VITE_CONFIG_NEXUS_NETWORK",
-    "MEGAETH_VITE_CONFIG_NEXUS_SUPPORTED_CHAIN",
-    "MEGAETH_VITE_CONFIG_NEXUS_PRIMARY_TOKEN",
-    "MEGAETH_VITE_CONFIG_APP_META_TITLE",
-    "MEGAETH_VITE_CONFIG_APP_META_DESCRIPTION",
-    "MEGAETH_VITE_CONFIG_APP_META_CANONICAL_URL",
-    "MEGAETH_VITE_CONFIG_APP_META_FAVICON_URL",
-    "MEGAETH_VITE_CONFIG_APP_META_THEME_COLOR",
-    "MEGAETH_VITE_CONFIG_APP_META_IMAGE_URL",
-    "MEGAETH_VITE_CONFIG_APP_META_BACKGROUND_COLOR",
-    "CITREA_VITE_OPTIMISM_RPC",
+    "CITREA_VITE_APP_BASE_PATH",
     "CITREA_VITE_ARBITRUM_RPC",
-    "CITREA_VITE_MAINNET_RPC",
-    "CITREA_VITE_BASE_RPC",
-    "CITREA_VITE_KAIA_RPC",
-    "CITREA_VITE_SOPHON_RPC",
     "CITREA_VITE_AVALANCHE_RPC",
-    "CITREA_VITE_SCROLL_RPC",
-    "CITREA_VITE_POLYGON_RPC",
-    "CITREA_VITE_MONAD_RPC",
-    "CITREA_VITE_MEGAETH_RPC",
     "CITREA_VITE_BASE",
-    "CITREA_VITE_APP_BASE_PATH",
-    "CITREA_VITE_WALLET_CONNECT_ID",
+    "CITREA_VITE_BASE_RPC",
+    "CITREA_VITE_CONFIG_APP_DESCRIPTION",
+    "CITREA_VITE_CONFIG_APP_META_BACKGROUND_COLOR",
+    "CITREA_VITE_CONFIG_APP_META_CANONICAL_URL",
+    "CITREA_VITE_CONFIG_APP_META_DESCRIPTION",
+    "CITREA_VITE_CONFIG_APP_META_FAVICON_URL",
+    "CITREA_VITE_CONFIG_APP_META_IMAGE_URL",
+    "CITREA_VITE_CONFIG_APP_META_THEME_COLOR",
+    "CITREA_VITE_CONFIG_APP_META_TITLE",
+    "CITREA_VITE_CONFIG_APP_TITLE",
+    "CITREA_VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL",
+    "CITREA_VITE_CONFIG_CHAIN_GIF_ALT",
+    "CITREA_VITE_CONFIG_CHAIN_GIF_URL",
+    "CITREA_VITE_CONFIG_CHAIN_HERO_TEXT",
+    "CITREA_VITE_CONFIG_CHAIN_ICON_URL",
     "CITREA_VITE_CONFIG_CHAIN_ID",
+    "CITREA_VITE_CONFIG_CHAIN_LOGO_URL",
     "CITREA_VITE_CONFIG_CHAIN_NAME",
+    "CITREA_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS",
     "CITREA_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME",
     "CITREA_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL",
-    "CITREA_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS",
     "CITREA_VITE_CONFIG_CHAIN_RPC_URL",
-    "CITREA_VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL",
     "CITREA_VITE_CONFIG_CHAIN_TESTNET",
     "CITREA_VITE_CONFIG_CHAIN_USE_CHAIN_LOGO",
-    "CITREA_VITE_CONFIG_CHAIN_ICON_URL",
-    "CITREA_VITE_CONFIG_CHAIN_LOGO_URL",
-    "CITREA_VITE_CONFIG_CHAIN_GIF_URL",
-    "CITREA_VITE_CONFIG_CHAIN_GIF_ALT",
-    "CITREA_VITE_CONFIG_CHAIN_HERO_TEXT",
-    "CITREA_VITE_CONFIG_APP_TITLE",
-    "CITREA_VITE_CONFIG_APP_DESCRIPTION",
-    "CITREA_VITE_CONFIG_PRIMARY_COLOR",
-    "CITREA_VITE_CONFIG_SECONDARY_COLOR",
     "CITREA_VITE_CONFIG_NEXUS_NETWORK",
-    "CITREA_VITE_CONFIG_NEXUS_SUPPORTED_CHAIN",
     "CITREA_VITE_CONFIG_NEXUS_PRIMARY_TOKEN",
-    "CITREA_VITE_CONFIG_APP_META_TITLE",
-    "CITREA_VITE_CONFIG_APP_META_DESCRIPTION",
-    "CITREA_VITE_CONFIG_APP_META_CANONICAL_URL",
-    "CITREA_VITE_CONFIG_APP_META_FAVICON_URL",
-    "CITREA_VITE_CONFIG_APP_META_THEME_COLOR",
-    "CITREA_VITE_CONFIG_APP_META_IMAGE_URL",
-    "CITREA_VITE_CONFIG_APP_META_BACKGROUND_COLOR"
+    "CITREA_VITE_CONFIG_NEXUS_SUPPORTED_CHAIN",
+    "CITREA_VITE_CONFIG_PRIMARY_COLOR",
+    "CITREA_VITE_CONFIG_SECONDARY_COLOR",
+    "CITREA_VITE_KAIA_RPC",
+    "CITREA_VITE_MAINNET_RPC",
+    "CITREA_VITE_MEGAETH_RPC",
+    "CITREA_VITE_MONAD_RPC",
+    "CITREA_VITE_OPTIMISM_RPC",
+    "CITREA_VITE_POLYGON_RPC",
+    "CITREA_VITE_SCROLL_RPC",
+    "CITREA_VITE_SOPHON_RPC",
+    "CITREA_VITE_WALLET_CONNECT_ID",
+    "MEGAETH_VITE_ARBITRUM_RPC",
+    "MEGAETH_VITE_AVALANCHE_RPC",
+    "MEGAETH_VITE_BASE",
+    "MEGAETH_VITE_BASE_RPC",
+    "MEGAETH_VITE_CONFIG_APP_DESCRIPTION",
+    "MEGAETH_VITE_CONFIG_APP_META_BACKGROUND_COLOR",
+    "MEGAETH_VITE_CONFIG_APP_META_CANONICAL_URL",
+    "MEGAETH_VITE_CONFIG_APP_META_DESCRIPTION",
+    "MEGAETH_VITE_CONFIG_APP_META_FAVICON_URL",
+    "MEGAETH_VITE_CONFIG_APP_META_IMAGE_URL",
+    "MEGAETH_VITE_CONFIG_APP_META_THEME_COLOR",
+    "MEGAETH_VITE_CONFIG_APP_META_TITLE",
+    "MEGAETH_VITE_CONFIG_APP_TITLE",
+    "MEGAETH_VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL",
+    "MEGAETH_VITE_CONFIG_CHAIN_GIF_ALT",
+    "MEGAETH_VITE_CONFIG_CHAIN_GIF_URL",
+    "MEGAETH_VITE_CONFIG_CHAIN_HERO_TEXT",
+    "MEGAETH_VITE_CONFIG_CHAIN_ICON_URL",
+    "MEGAETH_VITE_CONFIG_CHAIN_ID",
+    "MEGAETH_VITE_CONFIG_CHAIN_LOGO_URL",
+    "MEGAETH_VITE_CONFIG_CHAIN_NAME",
+    "MEGAETH_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS",
+    "MEGAETH_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME",
+    "MEGAETH_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL",
+    "MEGAETH_VITE_CONFIG_CHAIN_RPC_URL",
+    "MEGAETH_VITE_CONFIG_CHAIN_TESTNET",
+    "MEGAETH_VITE_CONFIG_CHAIN_USE_CHAIN_LOGO",
+    "MEGAETH_VITE_CONFIG_NEXUS_NETWORK",
+    "MEGAETH_VITE_CONFIG_NEXUS_PRIMARY_TOKEN",
+    "MEGAETH_VITE_CONFIG_NEXUS_SUPPORTED_CHAIN",
+    "MEGAETH_VITE_CONFIG_PRIMARY_COLOR",
+    "MEGAETH_VITE_CONFIG_SECONDARY_COLOR",
+    "MEGAETH_VITE_KAIA_RPC",
+    "MEGAETH_VITE_MAINNET_RPC",
+    "MEGAETH_VITE_MEGAETH_RPC",
+    "MEGAETH_VITE_MONAD_RPC",
+    "MEGAETH_VITE_OPTIMISM_RPC",
+    "MEGAETH_VITE_POLYGON_RPC",
+    "MEGAETH_VITE_SCROLL_RPC",
+    "MEGAETH_VITE_SOPHON_RPC",
+    "MEGAETH_VITE_WALLET_CONNECT_ID",
+    "MONAD_VITE_ARBITRUM_RPC",
+    "MONAD_VITE_AVALANCHE_RPC",
+    "MONAD_VITE_BASE",
+    "MONAD_VITE_BASE_RPC",
+    "MONAD_VITE_CONFIG_APP_DESCRIPTION",
+    "MONAD_VITE_CONFIG_APP_META_BACKGROUND_COLOR",
+    "MONAD_VITE_CONFIG_APP_META_CANONICAL_URL",
+    "MONAD_VITE_CONFIG_APP_META_DESCRIPTION",
+    "MONAD_VITE_CONFIG_APP_META_FAVICON_URL",
+    "MONAD_VITE_CONFIG_APP_META_IMAGE_URL",
+    "MONAD_VITE_CONFIG_APP_META_THEME_COLOR",
+    "MONAD_VITE_CONFIG_APP_META_TITLE",
+    "MONAD_VITE_CONFIG_APP_TITLE",
+    "MONAD_VITE_CONFIG_CHAIN_BLOCK_EXPLORER_URL",
+    "MONAD_VITE_CONFIG_CHAIN_GIF_ALT",
+    "MONAD_VITE_CONFIG_CHAIN_GIF_URL",
+    "MONAD_VITE_CONFIG_CHAIN_HERO_TEXT",
+    "MONAD_VITE_CONFIG_CHAIN_ICON_URL",
+    "MONAD_VITE_CONFIG_CHAIN_ID",
+    "MONAD_VITE_CONFIG_CHAIN_LOGO_URL",
+    "MONAD_VITE_CONFIG_CHAIN_NAME",
+    "MONAD_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_DECIMALS",
+    "MONAD_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_NAME",
+    "MONAD_VITE_CONFIG_CHAIN_NATIVE_CURRENCY_SYMBOL",
+    "MONAD_VITE_CONFIG_CHAIN_RPC_URL",
+    "MONAD_VITE_CONFIG_CHAIN_TESTNET",
+    "MONAD_VITE_CONFIG_CHAIN_USE_CHAIN_LOGO",
+    "MONAD_VITE_CONFIG_NEXUS_NETWORK",
+    "MONAD_VITE_CONFIG_NEXUS_PRIMARY_TOKEN",
+    "MONAD_VITE_CONFIG_NEXUS_SUPPORTED_CHAIN",
+    "MONAD_VITE_CONFIG_PRIMARY_COLOR",
+    "MONAD_VITE_CONFIG_SECONDARY_COLOR",
+    "MONAD_VITE_KAIA_RPC",
+    "MONAD_VITE_MAINNET_RPC",
+    "MONAD_VITE_OPTIMISM_RPC",
+    "MONAD_VITE_POLYGON_RPC",
+    "MONAD_VITE_SCROLL_RPC",
+    "MONAD_VITE_SOPHON_RPC",
+    "MONAD_VITE_WALLET_CONNECT_ID"
   ],
+  "globalDependencies": ["packages/fast-bridge-app/src/**"],
   "tasks": {
     "build": {
       "dependsOn": ["^build"],