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

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>
@@ -77,32 +89,40 @@ function SelectCard(props: Readonly<SelectCardProps>) {
 }
 
 const SelectCardList = [
+  {
+    href: "/simple",
+    text: "🚀 Simple 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: "/?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",
     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",
     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",
     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",
   },
 ];

apps/torus-bridge/src/app/_components/shared/sidebar-links.tsx

@@ -11,66 +11,125 @@ import {
   SelectValue,
 } from "@torus-ts/ui/components/select";
 import { getLinks } from "@torus-ts/ui/lib/data";
+import { cn } from "@torus-ts/ui/lib/utils";
 import { env } from "~/env";
 import { Check } from "lucide-react";
 import Link from "next/link";
-import { Suspense } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { Suspense, useCallback, useMemo } from "react";
 
-const links = getLinks(env("NEXT_PUBLIC_TORUS_CHAIN_ENV"));
+interface SidebarOptionProps {
+  option: {
+    title: string;
+    href: string;
+    isActive: boolean;
+  };
+}
 
-const navSidebarOptions = [
-  { title: "Wallet", href: links.wallet },
-  { title: "Base Bridge", href: "/" },
-] as const;
+function SidebarOption({ option }: SidebarOptionProps) {
+  const className = cn(
+    "w-full justify-between gap-2 border-none px-3 py-2 text-sm font-medium",
+    option.isActive
+      ? "bg-accent text-accent-foreground"
+      : "text-muted-foreground hover:text-foreground",
+  );
+
+  const checkClassName = cn(
+    "transition-opacity duration-200",
+    option.isActive ? "opacity-100" : "opacity-0",
+  );
+
+  return (
+    <Link
+      href={option.href}
+      prefetch={option.href.startsWith("/")}
+      target={option.href.startsWith("http") ? "_blank" : undefined}
+      rel={option.href.startsWith("http") ? "noopener noreferrer" : undefined}
+    >
+      <Button
+        variant="ghost"
+        className={className}
+        aria-current={option.isActive ? "page" : undefined}
+      >
+        {option.title}
+        <Check size={14} className={checkClassName} />
+      </Button>
+    </Link>
+  );
+}
 
 const Sidebar = () => {
-  const defaultView = navSidebarOptions[1].href;
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const baseOptions = useMemo(
+    () => [
+      {
+        title: "Wallet",
+        href: getLinks(env("NEXT_PUBLIC_TORUS_CHAIN_ENV")).wallet,
+      },
+      { title: "Simple Bridge", href: "/simple" },
+      { title: "Full Bridge", href: "/" },
+    ],
+    [],
+  );
+
+  const getActiveOptions = useCallback(
+    (pathname: string) =>
+      baseOptions.map((option) => ({
+        ...option,
+        isActive: option.href === pathname,
+      })),
+    [baseOptions],
+  );
+
+  const activeOptions = useMemo(
+    () => getActiveOptions(pathname),
+    [pathname, getActiveOptions],
+  );
+
+  const handleSelectChange = useCallback(
+    (value: string) => {
+      if (value.startsWith("http")) {
+        window.open(value, "_blank", "noopener,noreferrer");
+        return;
+      }
+
+      router.push(value);
+    },
+    [router],
+  );
 
   return (
     <>
-      <Select value={defaultView}>
+      <Select value={pathname} onValueChange={handleSelectChange}>
         <SelectTrigger className="w-full lg:hidden">
           <SelectValue placeholder="Select a view" />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            {navSidebarOptions.map((view) => (
-              <SelectItem value={view.href} key={view.href}>
-                {view.title}
+            {activeOptions.map((option) => (
+              <SelectItem value={option.href} key={option.href}>
+                {option.title}
               </SelectItem>
             ))}
           </SelectGroup>
         </SelectContent>
       </Select>
 
       <div className="hidden max-h-fit w-full min-w-fit flex-col gap-6 lg:flex">
-        <Card className="flex flex-col gap-1.5 p-5">
-          {navSidebarOptions.map((view) => {
-            return (
-              <Link href={view.href} key={view.href} prefetch>
-                <Button
-                  variant="ghost"
-                  className={`w-full justify-between gap-4 border-none px-3 text-base ${view.title === "Base Bridge" ? "bg-accent" : ""}`}
-                >
-                  {view.title}
-                  <Check
-                    size={16}
-                    className={`${view.title === "Base Bridge" ? "opacity-100" : "opacity-0"} transition`}
-                  />
-                </Button>
-              </Link>
-            );
-          })}
+        <Card className="flex flex-col gap-0 p-4">
+          {activeOptions.map((option) => (
+            <SidebarOption key={option.href} option={option} />
+          ))}
         </Card>
       </div>
     </>
   );
 };
 
-export const SidebarLinks = () => {
-  return (
-    <Suspense>
-      <Sidebar />
-    </Suspense>
-  );
-};
+export const SidebarLinks = () => (
+  <Suspense fallback={null}>
+    <Sidebar />
+  </Suspense>
+);