Fix auto connect (#412)

scaffold-eth · Jul 7, 2023 · fb3fcd6 · fb3fcd6
1 parent cc1af9f
commit fb3fcd6
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 101 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useIsMounted } from "usehooks-ts";
 import { Address as AddressType, createWalletClient, http, parseEther } from "viem";
 import { useNetwork } from "wagmi";
 import { hardhat } from "wagmi/chains";
@@ -20,6 +21,8 @@ export const Faucet = () => {
   const [sendValue, setSendValue] = useState("");
 
   const { chain: ConnectedChain } = useNetwork();
+  const isMounted = useIsMounted();
+
   const localWalletClient = createWalletClient({
     chain: hardhat,
     transport: http(),
@@ -74,7 +77,7 @@ export const Faucet = () => {
   };
 
   // Render only on local chain
-  if (!ConnectedChain || ConnectedChain.id !== hardhat.id) {
+  if (ConnectedChain?.id !== hardhat.id || !isMounted()) {
     return null;
   }
 

diff --git a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useIsMounted } from "usehooks-ts";
 import { createWalletClient, http, parseEther } from "viem";
 import { useAccount, useNetwork } from "wagmi";
 import { hardhat } from "wagmi/chains";
@@ -15,7 +16,10 @@ const FAUCET_ADDRESS = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";
 export const FaucetButton = () => {
   const { address } = useAccount();
   const { balance } = useAccountBalance(address);
+
   const { chain: ConnectedChain } = useNetwork();
+  const isMounted = useIsMounted();
+
   const [loading, setLoading] = useState(false);
   const localWalletClient = createWalletClient({
     chain: hardhat,
@@ -40,7 +44,7 @@ export const FaucetButton = () => {
   };
 
   // Render only on local chain
-  if (!ConnectedChain || ConnectedChain.id !== hardhat.id) {
+  if (ConnectedChain?.id !== hardhat.id || !isMounted()) {
     return null;
   }
 

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -2,15 +2,13 @@ import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { useDisconnect, useSwitchNetwork } from "wagmi";
 import { ArrowLeftOnRectangleIcon, ArrowsRightLeftIcon, ChevronDownIcon } from "@heroicons/react/24/solid";
 import { Balance, BlockieAvatar } from "~~/components/scaffold-eth";
-import { useAutoConnect, useNetworkColor } from "~~/hooks/scaffold-eth";
+import { useNetworkColor } from "~~/hooks/scaffold-eth";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Custom Wagmi Connect Button (watch balance + custom design)
  */
 export const RainbowKitCustomConnectButton = () => {
-  useAutoConnect();
-
   const networkColor = useNetworkColor();
   const configuredNetwork = getTargetNetwork();
   const { disconnect } = useDisconnect();

diff --git a/packages/nextjs/hooks/scaffold-eth/index.ts b/packages/nextjs/hooks/scaffold-eth/index.ts
@@ -1,6 +1,5 @@
 export * from "./useAccountBalance";
 export * from "./useAnimationConfig";
-export * from "./useAutoConnect";
 export * from "./useBurnerWallet";
 export * from "./useDeployedContractInfo";
 export * from "./useNativeCurrencyPrice";

diff --git a/packages/nextjs/hooks/scaffold-eth/useAutoConnect.ts b/packages/nextjs/hooks/scaffold-eth/useAutoConnect.ts
diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
@@ -5,10 +5,7 @@ export type ScaffoldConfig = {
   pollingInterval: number;
   alchemyApiKey: string;
   walletConnectProjectId: string;
-  burnerWallet: {
-    enabled: boolean;
-    onlyLocal: boolean;
-  };
+  onlyLocalBurnerWallet: boolean;
   walletAutoConnect: boolean;
 };
 
@@ -32,13 +29,8 @@ const scaffoldConfig = {
   // .env.local for local testing, and in the Vercel/system env config for live apps.
   walletConnectProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "3a8170812b534d0ff9d794f19a901d64",
 
-  // Burner Wallet configuration
-  burnerWallet: {
-    // Set it to false to completely remove burner wallet from all networks
-    enabled: true,
-    // Only show the Burner Wallet when running on hardhat network
-    onlyLocal: true,
-  },
+  // Only show the Burner Wallet when running on hardhat network
+  onlyLocalBurnerWallet: true,
 
   /**
    * Auto connect:

diff --git a/packages/nextjs/services/web3/wagmi-burner/burnerWalletConfig.ts b/packages/nextjs/services/web3/wagmi-burner/burnerWalletConfig.ts
@@ -9,7 +9,7 @@ import {
 } from "~~/services/web3/wagmi-burner/BurnerConnector";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
-const burnerConfig = scaffoldConfig.burnerWallet;
+const { onlyLocalBurnerWallet } = scaffoldConfig;
 const targetNetwork = getTargetNetwork();
 export interface BurnerWalletOptions {
   chains: Chain[];
@@ -26,11 +26,7 @@ export const burnerWalletConfig = ({ chains }: BurnerWalletOptions): Wallet => (
   iconUrl: "https://avatars.githubusercontent.com/u/56928858?s=200&v=4",
   iconBackground: "#0c2f78",
   hidden: () => {
-    if (!burnerConfig.enabled) {
-      return true;
-    }
-
-    if (burnerConfig.onlyLocal) {
+    if (onlyLocalBurnerWallet) {
       return targetNetwork.id !== hardhat.id;
     }
 

diff --git a/packages/nextjs/services/web3/wagmiConfig.tsx b/packages/nextjs/services/web3/wagmiConfig.tsx
@@ -1,8 +1,9 @@
 import { createConfig } from "wagmi";
+import scaffoldConfig from "~~/scaffold.config";
 import { appChains, wagmiConnectors } from "~~/services/web3/wagmiConnectors";
 
 export const wagmiConfig = createConfig({
-  autoConnect: false,
+  autoConnect: scaffoldConfig.walletAutoConnect,
   connectors: wagmiConnectors,
   publicClient: appChains.publicClient,
 });
diff --git a/packages/nextjs/services/web3/wagmiConnectors.tsx b/packages/nextjs/services/web3/wagmiConnectors.tsx
@@ -16,11 +16,10 @@ import { burnerWalletConfig } from "~~/services/web3/wagmi-burner/burnerWalletCo
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 const configuredNetwork = getTargetNetwork();
-const burnerConfig = scaffoldConfig.burnerWallet;
+const { onlyLocalBurnerWallet } = scaffoldConfig;
 
 // We always want to have mainnet enabled (ENS resolution, ETH price, etc). But only once.
-const enabledChains =
-  (configuredNetwork.id as number) === 1 ? [configuredNetwork] : [configuredNetwork, chains.mainnet];
+const enabledChains = configuredNetwork.id === 1 ? [configuredNetwork] : [configuredNetwork, chains.mainnet];
 
 /**
  * Chains for the app
@@ -53,6 +52,9 @@ const wallets = [
   braveWallet(walletsOptions),
   coinbaseWallet({ ...walletsOptions, appName: "scaffold-eth-2" }),
   rainbowWallet(walletsOptions),
+  ...(configuredNetwork.id === chains.hardhat.id || !onlyLocalBurnerWallet
+    ? [burnerWalletConfig({ chains: [appChains.chains[0]] })]
+    : []),
 ];
 
 /**
@@ -61,6 +63,6 @@ const wallets = [
 export const wagmiConnectors = connectorsForWallets([
   {
     groupName: "Supported Wallets",
-    wallets: burnerConfig.enabled ? [...wallets, burnerWalletConfig({ chains: [appChains.chains[0]] })] : wallets,
+    wallets,
   },
 ]);