add connect btn

packages/explorer/src/components/AccountSelect.tsx

@@ -1,8 +1,13 @@
+import { CircleMinusIcon, CirclePlusIcon } from "lucide-react";
 import { Address } from "viem";
-import { useBalance } from "wagmi";
+import { useAccount, useBalance, useDisconnect, useSwitchAccount } from "wagmi";
+import { useEffect, useState } from "react";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ACCOUNTS } from "../consts";
+import { usePrevious } from "../hooks/usePrevious";
 import { formatBalance } from "../lib/utils";
 import { useAppStore } from "../store";
+import { Button } from "./ui/Button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/Select";
 import { TruncatedHex } from "./ui/TruncatedHex";
 
@@ -12,6 +17,7 @@ function AccountSelectItem({ address, name }: { address: Address; name: string }
     query: {
       refetchInterval: 15000,
     },
+    chainId: Number(process.env.NEXT_PUBLIC_CHAIN_ID),
   });
   const balanceValue = balance.data?.value;
   return (
@@ -26,17 +32,77 @@ function AccountSelectItem({ address, name }: { address: Address; name: string }
 }
 
 export function AccountSelect() {
+  const [open, setOpen] = useState(false);
+  const { openConnectModal } = useConnectModal();
+  const { disconnect } = useDisconnect();
+  const { isConnected, address: connectedAddress } = useAccount();
+  const previousIsConnected = usePrevious(isConnected);
   const { account, setAccount } = useAppStore();
+  const accounts = [...ACCOUNTS, connectedAddress as Address].filter(Boolean);
+
+  ///////
+
+  const { connectors, switchAccount } = useSwitchAccount();
+  console.log({ connectors, switchAccount });
+
+  ///////
+
+  useEffect(() => {
+    if (!previousIsConnected && isConnected && account !== connectedAddress) {
+      setAccount(connectedAddress as Address);
+    }
+  }, [isConnected, connectedAddress, setAccount, account, previousIsConnected]);
+
   return (
-    <Select value={account} onValueChange={setAccount}>
-      <SelectTrigger className="w-[300px] text-left">
-        <SelectValue placeholder="Account" />
-      </SelectTrigger>
-      <SelectContent>
-        {ACCOUNTS.map((address, index) => {
-          return <AccountSelectItem key={address} address={address} name={`Account ${index + 1}`} />;
-        })}
-      </SelectContent>
-    </Select>
+    <>
+      <h1>Hello</h1>
+
+      {connectors.map((connector) => (
+        <Button key={connector.id} onClick={() => switchAccount({ connector })}>
+          {connector.name}
+        </Button>
+      ))}
+
+      <Select value={account} onValueChange={setAccount} open={open} onOpenChange={setOpen}>
+        <SelectTrigger className="text-left" onClick={() => setOpen(true)}>
+          <SelectValue placeholder="Account" />
+        </SelectTrigger>
+        <SelectContent className="max-h-[500px]">
+          {accounts.map((address, index) => {
+            const name = address === connectedAddress ? "Connected wallet" : `Test account ${index + 1}`;
+            return <AccountSelectItem key={address} address={address} name={name} />;
+          })}
+
+          {isConnected && (
+            <Button
+              variant="default"
+              size="sm"
+              className="mt-2 w-full font-mono"
+              onClick={() => {
+                disconnect();
+                setAccount(accounts[0] as Address);
+                setOpen(false);
+              }}
+            >
+              <CircleMinusIcon className="mr-2 inline-block h-4 w-4" /> Disconnect wallet
+            </Button>
+          )}
+
+          {!isConnected && openConnectModal && (
+            <Button
+              variant="default"
+              size="sm"
+              className="mt-2 w-full font-mono"
+              onClick={() => {
+                setOpen(false);
+                openConnectModal();
+              }}
+            >
+              <CirclePlusIcon className="mr-2 inline-block h-4 w-4" /> Connect wallet
+            </Button>
+          )}
+        </SelectContent>
+      </Select>
+    </>
   );
 }

packages/explorer/src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}