fix initial network setup and new account setup

Author: AuroraLantean

README.md

@@ -79,14 +79,18 @@ bun run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. I use Firefox during development.
 
-For unknown reasons, NextJs cannot launch the app properly in the very first time. So you need to press `F5` on your keyboard to reload your web browser again after launching the NextJs, so the NextJs can work properly.
+If for unknown reasons, NextJs cannot launch the app properly in the very first time. You need to press `F5` on your keyboard to reload your web browser again after launching the NextJs, so the NextJs can work properly.
 
 Initially, the app should use the default web3 provider via Infura API to load the page.
-Then you should click on the `Connect to wallet` button on the top of the home page to connect your Web3 Wallet to this app.
+
+Go to your browser wallet to choose the account you want to connect to. Then come back to this app and click on the `Connect to wallet` button on the top of the home page to connect your Web3 Wallet to this app.
+
+Wagmi should prompt you to switch to the correct network with deployed contracts.
+If you want to use another account, go to your browser wallet to choose the account you want to connect to. Then come back to this app and click on `Disconnect` then `Connect to Wallet`
 
 Confirm your initial ETH balance and the token balance on the home page. This token is the token address set inside the ERC721 Sales smart contract during its deployment, or you can reset the token address after deployment.
 
-#### If you do not have the token that is accepted by the NFT Sales contract:
+#### If you do not have the tokens that is accepted by the NFT Sales contract:
 
 In the dropdown: choose the USDT or TokenX on Ethereum/Other Chain
 In the Radio buttons: choose `Mint Tokens To Guest`

components/carousel/CarouselDraggable.tsx

@@ -5,34 +5,35 @@ import { useEffect, useRef, useState } from "react";
 import BasicModal from "../modal/basicModal";
 import { useToast } from "../ui/use-toast";
 import { Button } from "../ui/button";
-import { changeChainType, getBaseURI, getSalesPrices, initializeDefaultProvider, initializeWallet, runAfterRainbowKit, updateAddrs, updateNftArray, updateNftStatus, useWeb3Store } from "@/store/web3Store";
+import { changeChainType, getBaseURI, getSalesPrices, initializeDefaultProvider, initializeWallet, updateChain, updateAddrs, updateNftArray, updateNftStatus, useWeb3Store, updateAccount, removeAccount, setupBlockchainData, blockchain } from "@/store/web3Store";
 import { useShallow } from 'zustand/react/shallow'
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { useAccount, useDisconnect, useNetwork, useSwitchNetwork } from "wagmi";
-import { capitalizeFirst } from "@/lib/utils";
+import { capitalizeFirst, delayFunc } from "@/lib/utils";
 import { handleAccountsChanged, handleChainChanged } from "@/lib/actions/ethers";
 
 const CARD_HEIGHT = 350;
 const MARGIN = 20;
-
+//TODO: https://sepolia.etherscan.io/tx/TXNHASH
+//TODO: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
 export const CarouselDraggable = () => {
   const compoName = 'CarouselDraggable'
   const lg = console.log;
   //const [ref, { width }] = useMeasure();ref={ref} 
   //lg("width=" + width)
   const [leftLimit, setLeftLimit] = useState(0);
+  //const [mesg, setMesg] = useState('');
   const carousel = useRef<HTMLDivElement>(null);
   const effectRan = useRef(false)
   const { toast } = useToast();
   const { disconnect } = useDisconnect()
 
-  const { account, isInitialized, isDefaultProvider, nftArray, nftStatuses, prices, baseURI, chainName, nativeAssetName, nativeAssetSymbol, tokenName, tokenSymbol, err } = useWeb3Store(
+  const { chainType, account, isInitialized, isDefaultProvider, nftArray, nftStatuses, prices, baseURI, chainName, previousChain, nativeAssetName, nativeAssetSymbol, tokenName, tokenSymbol, nftOriginalOwner, nftAddr, salesAddr, err } = useWeb3Store(
     useShallow((state) => ({ ...state }))
   )
   //TODO: disconnect then reconnect => should auto check balances
   //lg(compoName + '... effectRan.current:', effectRan.current, ' isDefaultProvider:', isDefaultProvider)
   //lg(compoName+ ' account:', account, "nftStatuses:", nftStatuses)
-  const blockchain = (process.env.NEXT_PUBLIC_BLOCKCHAIN || '').toLowerCase();
   useEffect(() => {
     lg(compoName + " useEffect runs, blockchain:", blockchain)
     if (blockchain || effectRan.current === true) {
@@ -53,38 +54,14 @@ export const CarouselDraggable = () => {
           toast({ description: `Failed: ${JSON.stringify(initOut.warn)}`, variant: 'destructive' })
           return true;
         }
-        toast({ description: "web3 initialized with the DefaultProvider!" });
-        lg("initOut:", initOut)
-
-        const nftsOut = await updateNftArray(nftIdMin, nftIdMax);
-        if (nftsOut.err) {
-          console.error("nftsOut.err:", nftsOut.err)
-          toast({ description: `${nftsOut.err}`, variant: 'destructive' })
-          return;
-        }
-
-        const { nftAddr, salesAddr, nftOriginalOwner, err: updateAddrsErr } = await updateAddrs(chainType);
-        if (updateAddrsErr) {
-          console.error("updateAddrsErr:", updateAddrsErr)
-          toast({ description: `${updateAddrsErr}`, variant: 'destructive' })
-          return;
-        }
-
-        const out2 = await getSalesPrices(chainType, nftsOut.nftIds, nftAddr, salesAddr);
-        if (out2.err) {
-          console.error("getSalesPrices err:", out2.err)
-          toast({ description: `${out2.err}`, variant: 'destructive' })
+        const out = await setupBlockchainData(nftIdMin, nftIdMax, chainType);
+        if (out.err) {
+          toast({ description: `${out.err}`, variant: 'destructive' })
           return;
         }
-        await getBaseURI(chainType, nftAddr);
 
-        const statuses = await updateNftStatus(chainType, account, nftOriginalOwner, nftAddr, salesAddr, nftIdMin, nftIdMax);
-        if (statuses.err) {
-          console.error("updateNftStatus err:", statuses.err)
-          toast({ description: `${statuses.err}`, variant: 'destructive' })
-          return;
-        }
-        lg("statuses:", statuses.arr)
+        toast({ description: "web3 initialized with the DefaultProvider on " + capitalizeFirst(initOut.chainName) });
+        lg("initOut:", initOut)
       }
       if (isDefaultProvider) {
         lg("isDefaultProvider already true")
@@ -98,29 +75,50 @@ export const CarouselDraggable = () => {
     }
   }, []);
 
-  //RainbowKit functions: to detect connected account and chain details
-  //const { address, isConnecting, isDisconnected } = useAccount();
   const { chain, chains } = useNetwork()
+  if (chain) {
+    //lg(`Wagmi() useNetwork(): ${chain.name}, chainId: ${chain.id}, previousChain: ${previousChain}`)
+    //NOT run useState as it will cause loop rendering!
+    const { decimals: nativeAssetDecimals, name: nativeAssetName, symbol: nativeAssetSymbol } = chain.nativeCurrency;
+
+    //this chain IS onConnect! https://wagmi.sh/react/hooks/useNetwork
+    if (previousChain !== chain.name) {
+      const run = async () => {
+        const out1 = await updateChain(chain.name, chain.id, nativeAssetName, nativeAssetSymbol, nativeAssetDecimals)
+
+        const out = await setupBlockchainData(nftIdMin, nftIdMax, out1.chainType);
+        if (out.err) {
+          toast({ description: `${out.err}`, variant: 'destructive' })
+          return;
+        }
+      }
+      run();
+    }
+  }
+
   const accountRB = useAccount({
     onConnect({ address, connector, isReconnected }) {
-      lg('Connected', address, connector, ', isReconnected:', isReconnected)
-      if (chain && address) {
-        lg(`Wagmi()... Connected to ${chain.name}, chainId: ${chain.id}`)
-        const { decimals: nativeAssetDecimals, name: nativeAssetName, symbol: nativeAssetSymbol } = chain.nativeCurrency;
-
-        window.ethereum.on('chainChanged', () => {
-          disconnect()
-          window.location.reload();
-        });
-        window.ethereum.on('accountsChanged', handleAccountsChanged);
+      lg('Wagmi useAccount onConnect', address, connector, ', isReconnected:', isReconnected)
+      if (address) {
+        const run = async () => {
+          await updateAccount(address)
 
-        if (chain.name.toLowerCase() !== blockchain) {
-          toast({ description: `Failed: connected chain is not expected! Click on the Network dropdown button, and click on ${capitalizeFirst(blockchain)}. Click on your account dropdown, then click on Disconnect. Then connect wallet again.`, variant: 'destructive' })
-          return true;
+          await delayFunc(2000);//wait for statemanagement to update the data to be used below
+          lg('nftOriginalOwner:', nftOriginalOwner)
+          const statuses = await updateNftStatus(chainType, address, nftOriginalOwner, nftAddr, salesAddr, nftIdMin, nftIdMax);
+          if (statuses.err) {
+            console.error("updateNftStatus err:", statuses.err)
+            return;
+          }
+          lg("statuses:", statuses.arr)
         }
-        runAfterRainbowKit(chain.name, chain.id, address, nativeAssetName, nativeAssetSymbol, nativeAssetDecimals)
+        run();
       }
     },
+    onDisconnect() {
+      console.log('Account disconnected')
+      removeAccount()
+    },
   })
 
   const connectToWallet = async () => {

constants/site_data.ts

@@ -2,7 +2,7 @@ import { parseIntSafe } from "@/lib/utils";
 
 export const APP_WIDTH_MIN = 350;
 export const chainTypeDefault = 'evm';
-export const localChainDefault = 'anvil';
+export const localChainDefault = 'Foundry'.toLowerCase();
 export const nftIdMin = 0;
 export const nftIdMax = 9;
 export type DragonT = {

lib/actions/ethers.ts

@@ -7,11 +7,10 @@ export const erc721JSON = contractsJSON[1];
 export const salesJSON = contractsJSON[2];
 export const ArrayOfStructsJSON = contractsJSON[3];
 import { arrayRange, asyncFor, capitalizeFirst, isEmpty, isEqualStr, parseFloatSafe } from "@/lib/utils";
-import { Web3InitOutT, balancesT, initBalancesDefault, web3InitDefault } from "@/store/web3Store";
+import { Web3InitOutT, balancesT, blockchain, initBalancesDefault, web3InitDefault } from "@/store/web3Store";
 import { localChainDefault } from "@/constants/site_data";
 
 const infuraApiKey = process.env.NEXT_PUBLIC_INFURA_APIKEY || '';
-const blockchain = (process.env.NEXT_PUBLIC_BLOCKCHAIN)?.toLowerCase() || localChainDefault.toLowerCase();
 const erc20_usdtAddr = process.env.NEXT_PUBLIC_ETHEREUM_USDT || erc20JSON.contractAddress;
 const erc20_usdcAddr = process.env.NEXT_PUBLIC_ETHEREUM_USDC || '';
 const erc721Addr = process.env.NEXT_PUBLIC_ETHEREUM_NFT || erc721JSON.contractAddress;
@@ -45,7 +44,8 @@ export const ethersDefaultProvider = async (): Promise<Web3InitOutT> => {
   let chainId = '', chainName = '', endpoint = ''
 
   const infuraChains = ['mainnet', 'sepolia', 'goerli', 'linea-goerli', 'polygon-mainnet', 'polygon-mumbai', 'optimism-mainnet', 'optimism-goerli', 'arbitrum-mainnet', 'arbitrum-goerli', 'avalanche-mainnet', 'avalanche-fuji', 'starknet-goerli'];
-  if (blockchain === localChainDefault) {
+  lg("blockchain:", blockchain)
+  if (blockchain === localChainDefault.toLowerCase()) {
     lg('------ Connect to a local network');
     endpoint = "http://localhost:8545";
     provider = new ethers.JsonRpcProvider(endpoint);
@@ -63,7 +63,13 @@ export const ethersDefaultProvider = async (): Promise<Web3InitOutT> => {
     endpoint = "https://" + blockchain + ".infura.io/v3/" + infuraApiKey;
     lg("Use read-only defaults on " + blockchain)
     //lg("endpoint:" + endpoint, ', infuraApiKey:', infuraApiKey);
-    provider = new ethers.InfuraProvider(blockchain, infuraApiKey);
+    try {
+      provider = new ethers.InfuraProvider(blockchain, infuraApiKey);
+    } catch (err) {
+      mesg = `Error @InfuraProvider. blockchain: ${blockchain}, err:${err}`
+      console.error(mesg);
+      return { ...web3InitDefault, err: mesg };
+    }
     //new AlchemyProvider(network, apiKey)
     //new QuickNodeProvider(network, token)
     chainName = blockchain;
@@ -101,29 +107,50 @@ export const initEvmWalletAfterLoad = async () =>
       return { ...web3InitDefault, err: err.message };
     }
   });
-export const afterWagmi = async (): Promise<Web3InitOutT> => {
-  const funcName = "initializeEvmWallet";
+export const setupProvider = async (): Promise<Web3InitOutT> => {
+  const funcName = "setupProvider";
   lg(funcName + "()...");
   provider = new ethers.BrowserProvider(window.ethereum)
+  lg(funcName + " ran successfully")
+  return {
+    ...web3InitDefault,
+  };
+}
+export const setupSigner = async (): Promise<Web3InitOutT> => {
+  const funcName = "setupSigner";
+  lg(funcName + "()...");
   signer = await provider.getSigner();
   lg(funcName + " ran successfully")
   return {
     ...web3InitDefault,
   };
 }
+export const removeSigner = async (): Promise<Web3InitOutT> => {
+  const funcName = "removeSigner";
+  lg(funcName + "()...");
+  signer = undefined;
+  return {
+    ...web3InitDefault,
+  };
+}
 export const initializeEvmWallet = async (): Promise<Web3InitOutT> => {
   const funcName = "initializeEvmWallet";
   lg(funcName + "()...");
   if (window.ethereum == null) {
     // If MetaMask is not installed, we use the default provider, which is backed by a variety of third-party services (such as INFURA). They do not have private keys installed so are only have read-only access
-    warning = "MetaMask not installed; using read-only defaults on sepolia test network";
+    warning = `MetaMask not installed; using read-only defaults on ${blockchain} test network`;
     console.warn(warning)
-    provider = ethers.getDefaultProvider("sepolia");
+    try {
+      provider = ethers.getDefaultProvider(blockchain);
+    } catch (err) {
+      console.error('Error getting default provider')
+      return { ...web3InitDefault, err: 'failed to get default provider' };
+    }
     return {
       ...web3InitDefault,
       warn: warning,
-      chainId: '11155111',//sepolia
-      chainName: 'sepolia',
+      chainId: getChainObj(blockchain).chainId,
+      chainName: blockchain,
     };
   } else {
     // Connect to the MetaMask EIP-1193 object. This is a standard protocol that allows Ethers access to make all read-only requests through MetaMask.
@@ -942,7 +969,7 @@ export const getEvmAddr = (ctrtName: addrName): string => {
 export const getDecimals = (addr: string) => {
   //lg('getDecimals. addr:', addr, "erc20JSON.contractAddress:", erc20JSON.contractAddress, isEqualStr(addr, erc20JSON.contractAddress), ', blockchain:', blockchain)
   let decimals = 18;
-  if (blockchain === localChainDefault) {
+  if (blockchain === localChainDefault.toLowerCase()) {
     switch (addr) {
       case erc20JSON.contractAddress:
         decimals = 6;

lib/utils.ts

@@ -76,7 +76,7 @@ export const parseIntSafe = (input: any) => {
   return out;
 }
 
-export const delayFunc = (delay: number): Promise<boolean> => new Promise((resolve, reject) => setTimeout(() => {
+export const delayFunc = async (delay: number): Promise<boolean> => new Promise((resolve, reject) => setTimeout(() => {
   console.log("delay:", delay);
   resolve(true)
 }, delay))

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "cp .env.dev .env.local && next dev",
+    "dev2": "cp .env.prod .env.local && next dev",
     "buildlocal": "cp .env.prod .env.local && next build",
     "build": "next build",
     "start": "next start",