add Simple Bridge UI with related hooks and configuration updates (web-353)

CLAUDE.md

@@ -226,6 +226,12 @@ The database uses Drizzle ORM with PostgreSQL and follows these conventions:
 
 ## Code Quality & Patterns
 
+### Never Use eslint-disable
+
+**Rule**: Never use `// eslint-disable` or `// eslint-disable-next-line` to suppress linting errors.
+
+**Reason**: These directives hide problems instead of solving them. Always fix the root cause by refactoring the code to follow best practices. If a rule genuinely needs to be changed project-wide, update the ESLint configuration file instead.
+
 ### Non-Null Assertions
 
 **NEVER use the non-null assertion operator (`!`)** in TypeScript code. Instead, use `assert()` from `tsafe` with a descriptive message:

apps/torus-bridge/next.config.mjs

@@ -20,12 +20,7 @@ const config = {
   },
 
   // Use Turbopack for faster builds
-  turbopack: {
-    rules: {
-      "*.yaml": ["yaml-loader"],
-      "*.yml": ["yaml-loader"],
-    },
-  },
+  turbopack: {},
 
   transpilePackages: [
     "@torus-ts/api",
@@ -41,29 +36,9 @@ const config = {
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
 
-  webpack: (config, { isServer, webpack }) => {
+  webpack: (config, { isServer }) => {
+    // Optimize bundle splitting
     if (!isServer) {
-      // Replace node: protocol imports with their browser versions
-      config.plugins.push(
-        new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
-          resource.request = resource.request.replace(/^node:/, "");
-        }),
-      );
-
-      config.resolve.fallback = {
-        ...config.resolve.fallback,
-        fs: false,
-        net: false,
-        tls: false,
-        child_process: false,
-        util: fileURLToPath(new URL("util/", import.meta.url)),
-        crypto: fileURLToPath(new URL("crypto-browserify", import.meta.url)),
-        stream: fileURLToPath(new URL("stream-browserify", import.meta.url)),
-        events: fileURLToPath(new URL("events/", import.meta.url)),
-        process: fileURLToPath(new URL("process/browser", import.meta.url)),
-      };
-
-      // Optimize bundle splitting
       config.optimization.splitChunks = {
         chunks: "all",
         cacheGroups: {

apps/torus-bridge/package.json

@@ -41,7 +41,6 @@
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
     "starknet": "^6.24.1",
-    "yaml-loader": "^0.8.1",
     "zod": "catalog:"
   },
   "devDependencies": {

apps/torus-bridge/src/app/_components/chains/chain-metadata.ts

@@ -5,7 +5,7 @@ import { ChainMetadataSchema, mergeChainMetadataMap } from "@hyperlane-xyz/sdk";
 import { objFilter, objMap, promiseObjAll } from "@hyperlane-xyz/utils";
 import { tryAsync, trySync } from "@torus-network/torus-utils/try-catch";
 import { chainsTS } from "~/consts/chains";
-import chainsYaml from "~/consts/chains.yaml";
+import chainsJson from "~/consts/chains.json";
 import { config } from "~/consts/config";
 import { logger } from "~/utils/logger";
 import { z } from "zod";
@@ -18,7 +18,7 @@ export async function assembleChainMetadata(
   // Chains must include a cosmos chain or CosmosKit throws errors
   const [metadataParseError, parsedMetadata] = trySync(() =>
     z.record(z.string(), ChainMetadataSchema).safeParse({
-      ...(chainsYaml as ChainMap<ChainMetadata>),
+      ...(chainsJson as ChainMap<ChainMetadata>),
       ...chainsTS,
     }),
   );

apps/torus-bridge/src/app/_components/select-action-dialog.tsx

@@ -21,7 +21,7 @@ export function SelectActionDialog() {
       >
         <AlertDialogTrigger>
           <Logs className="h-4 w-4" />
-          Easy transaction selection menu
+          Bridge options menu
         </AlertDialogTrigger>
       </Button>
       <AlertDialogContent>
@@ -36,6 +36,7 @@ export function SelectActionDialog() {
             description={card.description}
             iconFrom={card.iconFrom}
             iconTo={card.iconTo}
+            priority={card.priority}
           />
         ))}
       </AlertDialogContent>
@@ -49,18 +50,29 @@ interface SelectCardProps {
   description: string;
   iconFrom: string;
   iconTo: string;
+  priority?: boolean;
 }
 
 function SelectCard(props: Readonly<SelectCardProps>) {
   return (
     <AlertDialogAction
       asChild
-      className="border-border bg-accent/20 hover:bg-accent/70 border px-5 py-10"
+      className={`border px-5 py-10 ${
+        props.priority
+          ? "border-blue-500 bg-blue-500/20 hover:bg-blue-500/30"
+          : "border-border bg-accent/20 hover:bg-accent/70"
+      }`}
     >
       <Link href={props.href} className="flex w-full">
         <div className="flex h-fit w-full justify-between gap-2">
           <div className="flex flex-col gap-1">
-            <span className="text-base font-bold text-white">{props.text}</span>
+            <span
+              className={`text-base font-bold ${
+                props.priority ? "text-blue-100" : "text-white"
+              }`}
+            >
+              {props.text}
+            </span>
             <span className="text-muted-foreground text-sm">
               {props.description}
             </span>
@@ -78,31 +90,39 @@ function SelectCard(props: Readonly<SelectCardProps>) {
 
 const SelectCardList = [
   {
-    href: "/?tab=torus&mode=bridge",
+    href: "/fast",
+    text: "🚀 Fast Bridge (Recommended)",
+    description: "Direct transfers: Base ⟷ Native Torus in one flow",
+    iconFrom: "/assets/icons/bridge/torus-base.svg",
+    iconTo: "/assets/icons/balance/torus.svg",
+    priority: true,
+  },
+  {
+    href: "/standard?tab=torus&mode=bridge",
     text: "Torus to Torus EVM",
     description: "Transfer your balance from Torus to Torus EVM",
-    iconFrom: "torus-balance-icon.svg",
-    iconTo: "torus-evm-balance-icon.svg",
+    iconFrom: "/assets/icons/balance/torus.svg",
+    iconTo: "/assets/icons/bridge/torus-evm.svg",
   },
   {
-    href: "/?tab=torus&mode=withdraw",
+    href: "/standard?tab=torus&mode=withdraw",
     text: "Torus EVM to Torus",
     description: "Transfer your balance from Torus EVM to Torus",
-    iconFrom: "torus-evm-balance-icon.svg",
-    iconTo: "torus-balance-icon.svg",
+    iconFrom: "/assets/icons/bridge/torus-evm.svg",
+    iconTo: "/assets/icons/balance/torus.svg",
   },
   {
-    href: "/?tab=base&from=torus&to=base",
+    href: "/standard?tab=base&from=torus&to=base",
     text: "Torus EVM to Base",
     description: "Transfer your balance from Torus EVM to Base",
-    iconFrom: "torus-evm-balance-icon.svg",
-    iconTo: "torus-base-balance-icon.svg",
+    iconFrom: "/assets/icons/bridge/torus-evm.svg",
+    iconTo: "/assets/icons/bridge/torus-base.svg",
   },
   {
-    href: "/?tab=base&from=base&to=torus",
+    href: "/standard?tab=base&from=base&to=torus",
     text: "Base to Torus EVM",
     description: "Transfer your balance from Base to Torus EVM",
-    iconFrom: "torus-base-balance-icon.svg",
-    iconTo: "torus-evm-balance-icon.svg",
+    iconFrom: "/assets/icons/bridge/torus-base.svg",
+    iconTo: "/assets/icons/bridge/torus-evm.svg",
   },
 ];