Merge pull request #73 from aabxtract/main

Fix network switching, banner fallback, and asset badge color scaling

Author: k-deejah

src/components/NetworkBanner.tsx

@@ -30,6 +30,13 @@ const CONFIG = {
     text: "text-ink-2",
     show: true,
   },
+  custom: {
+    label: null,
+    dot: "bg-ink-3",
+    bar: "bg-surface-2 border-b border-line",
+    text: "text-ink-2",
+    show: true,
+  },
 };
 
 interface NetworkBannerProps {
@@ -45,9 +52,11 @@ export function NetworkBanner({
   const { network } = useSorokit();
   if (!network) return null;
 
-  const cfg = CONFIG[network.name] ?? CONFIG.testnet;
+  const cfg = CONFIG[network.name] ?? CONFIG.custom;
   if (!alwaysShow && !cfg.show) return null;
 
+  const label = cfg.label ?? network.name;
+
   return (
     <div
       className={cn(
@@ -58,7 +67,7 @@ export function NetworkBanner({
     >
       <span className={cn("w-1.5 h-1.5 rounded-full shrink-0", cfg.dot)} />
       <span className={cfg.text}>
-        You are on <strong>{cfg.label}</strong>
+        You are on <strong>{label}</strong>
         {network.name !== "mainnet" && " — transactions use test funds only"}
       </span>
     </div>

src/components/NetworkSwitcher.tsx

@@ -1,4 +1,5 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useState } from "react";
 import { useSorokit } from "@/context/useSorokit";
 import { cn } from "@/lib/utils";
 import { HugeiconsIcon } from "@hugeicons/react";
@@ -14,23 +15,41 @@ const NETWORKS: { name: NetworkName; label: string; dot: string }[] = [
 
 export function NetworkSwitcher() {
   const { network, switchNetwork } = useSorokit();
+  const [isSwitching, setIsSwitching] = useState(false);
   const current = NETWORKS.find((n) => n.name === network?.name) ?? NETWORKS[1];
 
+  const handleSelect = async (name: NetworkName) => {
+    if (isSwitching) return;
+    setIsSwitching(true);
+    try {
+      await switchNetwork(name);
+    } finally {
+      setIsSwitching(false);
+    }
+  };
+
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <button className="inline-flex items-center gap-2 h-8 px-3.5 rounded-lg bg-surface-2 border border-line hover:border-line-2 transition-colors cursor-pointer text-[12px] text-ink-2 focus-visible:outline-none">
+        <button
+          disabled={isSwitching}
+          className="inline-flex items-center gap-2 h-8 px-3.5 rounded-lg bg-surface-2 border border-line hover:border-line-2 transition-colors cursor-pointer text-[12px] text-ink-2 focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+        >
           <span
             className={cn("w-1.5 h-1.5 rounded-full shrink-0", current.dot)}
           />
           {current.label}
-          <HugeiconsIcon
-            icon={ArrowDown01Icon}
-            size={10}
-            color="currentColor"
-            strokeWidth={2}
-            className="opacity-40 ml-0.5"
-          />
+          {isSwitching ? (
+            <span className="ml-0.5 h-3 w-3 animate-spin rounded-full border-2 border-ink-2 border-t-transparent" />
+          ) : (
+            <HugeiconsIcon
+              icon={ArrowDown01Icon}
+              size={10}
+              color="currentColor"
+              strokeWidth={2}
+              className="opacity-40 ml-0.5"
+            />
+          )}
         </button>
       </DropdownMenu.Trigger>
 
@@ -43,7 +62,8 @@ export function NetworkSwitcher() {
           {NETWORKS.map((net) => (
             <DropdownMenu.Item
               key={net.name}
-              onSelect={() => switchNetwork(net.name)}
+              disabled={isSwitching}
+              onSelect={() => handleSelect(net.name)}
               className={cn(
                 "flex items-center gap-2.5 px-3 py-2 rounded-lg text-[12px] cursor-pointer outline-none transition-colors",
                 network?.name === net.name

src/context/SorokitProvider.tsx

@@ -86,8 +86,16 @@ export function SorokitProvider({ client, children }: SorokitProviderProps) {
   const switchNetwork = useCallback(
     async (name: NetworkName) => {
       const { data, error } = await client.network.switchNetwork(name);
-      if (data) setNetwork(data);
-      if (error) setError(error);
+      if (error) {
+        setError(error);
+        return;
+      }
+      if (data) {
+        setNetwork(data);
+        setAddress(null);
+        setAccount(null);
+        setBalances([]);
+      }
     },
     [client],
   );