Initial commit with 🏗️ Scaffold-ETH 2 @ 1.0.2

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+// @refresh reset
+import { Balance } from "../Balance";
+import { AddressInfoDropdown } from "./AddressInfoDropdown";
+import { AddressQRCodeModal } from "./AddressQRCodeModal";
+import { RevealBurnerPKModal } from "./RevealBurnerPKModal";
+import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { Address } from "viem";
+import { useNetworkColor } from "~~/hooks/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
+
+/**
+ * Custom Wagmi Connect Button (watch balance + custom design)
+ */
+export const RainbowKitCustomConnectButton = () => {
+  const networkColor = useNetworkColor();
+  const { targetNetwork } = useTargetNetwork();
+
+  return (
+    <ConnectButton.Custom>
+      {({ account, chain, openConnectModal, mounted }) => {
+        const connected = mounted && account && chain;
+        const blockExplorerAddressLink = account
+          ? getBlockExplorerAddressLink(targetNetwork, account.address)
+          : undefined;
+
+        return (
+          <>
+            {(() => {
+              if (!connected) {
+                return (
+                  <button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
+                    Connect Wallet
+                  </button>
+                );
+              }
+
+              if (chain.unsupported || chain.id !== targetNetwork.id) {
+                return <WrongNetworkDropdown />;
+              }
+
+              return (
+                <>
+                  <div className="flex flex-col items-center mr-1">
+                    <Balance address={account.address as Address} className="min-h-0 h-auto" />
+                    <span className="text-xs" style={{ color: networkColor }}>
+                      {chain.name}
+                    </span>
+                  </div>
+                  <AddressInfoDropdown
+                    address={account.address as Address}
+                    displayName={account.displayName}
+                    ensAvatar={account.ensAvatar}
+                    blockExplorerAddressLink={blockExplorerAddressLink}
+                  />
+                  <AddressQRCodeModal address={account.address as Address} modalId="qrcode-modal" />
+                  <RevealBurnerPKModal />
+                </>
+              );
+            })()}
+          </>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};