feat: add basic tx config layout

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/components/app-sidebar.tsx

@@ -3,10 +3,12 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
+  SidebarGroupLabel,
   SidebarHeader,
 } from "@/components/ui/sidebar";
-import ConnectionConfig from "@/components/connection-config";
 import { Badge } from "@/components/ui/badge";
+import ConnectionConfig from "@/components/connection-config";
+import TxConfig from "./tx-config";
 
 export function AppSidebar() {
   return (
@@ -20,9 +22,14 @@ export function AppSidebar() {
         </span>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarGroup />
-        <ConnectionConfig />
-        <SidebarGroup />
+        <SidebarGroup>
+          {/* <SidebarGroupLabel>Connection</SidebarGroupLabel> */}
+          <ConnectionConfig />
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Tx Config</SidebarGroupLabel>
+          <TxConfig />
+        </SidebarGroup>
       </SidebarContent>
       <SidebarFooter />
     </Sidebar>

src/components/tx-config/index.tsx

@@ -0,0 +1,17 @@
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+
+export default function TxConfig() {
+  return (
+    <div className="m-4">
+      <div className="flex items-center gap-2 mb-2">
+        <Switch id="tx-hex-mode" />
+        <Label className="text-sm">HEX</Label>
+      </div>
+      <div className="flex items-center gap-2 mb-2">
+        <Switch id="tx-script" />
+        <Label className="text-sm">Script</Label>
+      </div>
+    </div>
+  );
+}

src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };