add external account connect button

latticexyz · Sep 3, 2024 · 2d78af7 · 2d78af7
1 parent 9c54df1
commit 2d78af7
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 21 deletions.
diff --git a/packages/explorer/src/app/(explorer)/Providers.tsx b/packages/explorer/src/app/(explorer)/Providers.tsx
@@ -1,26 +1,18 @@
 "use client";
 
-import { WagmiProvider } from "wagmi";
+import { WagmiProvider, createConfig, http } from "wagmi";
 import { injected, metaMask, safe } from "wagmi/connectors";
 import { ReactNode } from "react";
-import { RainbowKitProvider, darkTheme, getDefaultConfig } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createConfig, http } from "@wagmi/core";
-import { localhost, redstone } from "@wagmi/core/chains";
+import { anvil, localhost, redstone } from "@wagmi/core/chains";
 import { AppStoreProvider } from "../../store";
 
 const queryClient = new QueryClient();
 
-const config = getDefaultConfig({
-  appName: "World Explorer",
-  projectId: "368e129bd75ddd92d41f5bf7ac4cf1e6", // TODO: process.env.NEXT_PUBLIC_PROJECT_ID,
-  chains: [redstone, localhost],
-  ssr: true,
-});
-
 export const wagmiConfig = createConfig({
-  chains: [localhost, redstone],
+  chains: [localhost, redstone, anvil],
   connectors: [
     injected(),
     metaMask({
@@ -33,14 +25,16 @@ export const wagmiConfig = createConfig({
   transports: {
     [localhost.id]: http(),
     [redstone.id]: http(),
+    [anvil.id]: http(),
   },
+  ssr: true,
 });
 
 export function Providers({ children }: { children: ReactNode }) {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider config={config} theme={darkTheme()}>
+        <RainbowKitProvider theme={darkTheme()}>
           <AppStoreProvider>{children}</AppStoreProvider>
         </RainbowKitProvider>
       </QueryClientProvider>

diff --git a/packages/explorer/src/components/AccountSelect.tsx b/packages/explorer/src/components/AccountSelect.tsx
@@ -1,7 +1,12 @@
+import { CircleMinusIcon, CirclePlusIcon } from "lucide-react";
 import { Address, formatEther } from "viem";
-import { useBalance } from "wagmi";
+import { useAccount, useBalance, useDisconnect } from "wagmi";
+import { useEffect, useState } from "react";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ACCOUNTS } from "../consts";
+import { usePrevious } from "../hooks/usePrevious";
 import { useAppStore } from "../store";
+import { Button } from "./ui/Button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/Select";
 import { TruncatedHex } from "./ui/TruncatedHex";
 
@@ -11,6 +16,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 (
@@ -25,16 +31,59 @@ function AccountSelectItem({ address, name }: { address: Address; name: string }
 }
 
 export function AccountSelect() {
+  const [open, setOpen] = useState(false);
+  const { isConnected, address: connectedAddress } = useAccount();
+  const previousIsConnected = usePrevious(isConnected);
+  const { openConnectModal } = useConnectModal();
+  const { disconnect } = useDisconnect();
   const { account, setAccount } = useAppStore();
+  const accounts = [...ACCOUNTS, connectedAddress as Address].filter(Boolean);
+
+  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">
+    <Select value={account} onValueChange={setAccount} open={open} onOpenChange={setOpen}>
+      <SelectTrigger className="text-left" onClick={() => setOpen(true)}>
         <SelectValue placeholder="Account" />
       </SelectTrigger>
-      <SelectContent>
-        {ACCOUNTS.map((address, index) => {
-          return <AccountSelectItem key={address} address={address} name={`Account ${index + 1}`} />;
+      <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>
   );

diff --git a/packages/explorer/src/components/Navigation.tsx b/packages/explorer/src/components/Navigation.tsx
@@ -3,7 +3,6 @@
 import { Loader } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { LatestBlock } from "../components/LatestBlock";
 import { Separator } from "../components/ui/Separator";
 import { useWorldUrl } from "../hooks/useWorldUrl";
@@ -48,7 +47,6 @@ export function Navigation() {
         <div className="flex items-center gap-x-4">
           <LatestBlock />
           <AccountSelect />
-          <ConnectButton />
         </div>
       </div>
 

diff --git a/packages/explorer/src/hooks/usePrevious.ts b/packages/explorer/src/hooks/usePrevious.ts
@@ -0,0 +1,9 @@
+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;
+}