diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx index 251d4ee14..cd4d3ac88 100644 --- 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 index 6ce26c4d0..dafc30d0d 100644 --- 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 index 005942655..91c66d87e 100644 --- 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 index 8f1972705..73184bf56 100644 --- 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 deleted file mode 100644 index 3d1755bbb..000000000 --- a/packages/nextjs/hooks/scaffold-eth/useAutoConnect.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { useEffect } from "react"; -import { useEffectOnce, useLocalStorage } from "usehooks-ts"; -import { Connector, useAccount, useConnect } from "wagmi"; -import { hardhat } from "wagmi/chains"; -import scaffoldConfig from "~~/scaffold.config"; -import { burnerWalletId, defaultBurnerChainId } from "~~/services/web3/wagmi-burner/BurnerConnector"; -import { getTargetNetwork } from "~~/utils/scaffold-eth"; - -const walletIdStorageKey = "scaffoldEth2.wallet"; - -/** - * This function will get the initial wallet connector (if any), the app will connect to - * @param previousWalletId - * @param connectors - * @returns - */ -const getInitialConnector = ( - previousWalletId: string, - connectors: Connector[], -): { connector: Connector | undefined; chainId?: number } | undefined => { - const burnerConfig = scaffoldConfig.burnerWallet; - const targetNetwork = getTargetNetwork(); - - const allowBurner = burnerConfig.enabled && (burnerConfig.onlyLocal ? targetNetwork.id === hardhat.id : true); - - if (!previousWalletId) { - // The user was not connected to a wallet - if (allowBurner && scaffoldConfig.walletAutoConnect) { - const connector = connectors.find(f => f.id === burnerWalletId); - return { connector, chainId: defaultBurnerChainId }; - } - } else { - // the user was connected to wallet - if (scaffoldConfig.walletAutoConnect) { - if (previousWalletId === burnerWalletId && !allowBurner) { - return; - } - - const connector = connectors.find(f => f.id === previousWalletId); - return { connector }; - } - } - - return undefined; -}; - -/** - * Automatically connect to a wallet/connector based on config and prior wallet - */ -export const useAutoConnect = (): void => { - const [walletId, setWalletId] = useLocalStorage(walletIdStorageKey, ""); - const connectState = useConnect(); - const accountState = useAccount(); - - useEffect(() => { - if (accountState.isConnected) { - // user is connected, set walletName - setWalletId(accountState.connector?.id ?? ""); - } else { - // user has disconnected, reset walletName - setWalletId(""); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [accountState.isConnected, accountState.connector?.name]); - - useEffectOnce(() => { - const initialConnector = getInitialConnector(walletId, connectState.connectors); - - if (initialConnector?.connector) { - connectState.connect({ connector: initialConnector.connector, chainId: initialConnector.chainId }); - } - }); -}; diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts index c14d65891..ae297bf25 100644 --- 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 index 8e7feb335..62cd85183 100644 --- 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 index 240aea0f0..8ff554de4 100644 --- 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 index e5eed2f11..9985dc6f1 100644 --- 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, }, ]);