From d1158062a883d485b63862c381433dd6bb7adeb3 Mon Sep 17 00:00:00 2001
From: tapheret2 <tapheret2@users.noreply.github.com>
Date: Wed, 15 Jul 2026 12:01:01 +0700
Subject: [PATCH] feat: navbar wallet button and network switcher

See PR body.
---
 src/components/NavbarWallet.tsx | 46 +++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/NavbarWallet.tsx

diff --git a/src/components/NavbarWallet.tsx b/src/components/NavbarWallet.tsx
new file mode 100644
index 0000000..7c909a6
--- /dev/null
+++ b/src/components/NavbarWallet.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+
+/** Navbar wallet button + network switcher (GFI). */
+export function NavbarWallet({
+  address,
+  network,
+  networks = ["TESTNET", "PUBLIC"],
+  onConnect,
+  onSwitchNetwork,
+}: {
+  address?: string | null;
+  network?: string | null;
+  networks?: string[];
+  onConnect?: () => void;
+  onSwitchNetwork?: (n: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const short = address ? `${address.slice(0, 4)}…${address.slice(-4)}` : null;
+  return (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <button type="button" onClick={() => (address ? setOpen((v) => !v) : onConnect?.())}>
+        {short || "Connect wallet"}
+      </button>
+      {address ? (
+        <select
+          aria-label="Network"
+          value={network || networks[0]}
+          onChange={(e) => onSwitchNetwork?.(e.target.value)}
+        >
+          {networks.map((n) => (
+            <option key={n} value={n}>
+              {n}
+            </option>
+          ))}
+        </select>
+      ) : null}
+      {open && address ? (
+        <div role="status" style={{ fontSize: 12 }}>
+          {address}
+        </div>
+      ) : null}
+    </div>
+  );
+}