Hi so I made a context for providing Web3 details globally to make everything easier and in sync. It was working great and then something happened and suddenly the states for the context refuse to change.

This is the context

export const Web3Context = React.createContext<IWeb3Context>({
  contractAddress: CONTRACT_ADDRESS,
  provider: providerTemp,
  setProvider: () => {},
  signer: undefined,
  setSigner: () => {},
  contract: undefined,
  updateContract: () => {},
  account: 'Not Connected',
  updateAccount: () => {},
  connected: false,
  setConnected: () => {},
});

Context function

const Web3Provider: React.FC<Web3ProviderProps> = ({ children }) => {
  const [provider, setProvider] = useState(providerTemp);
  const [signer, setSigner] = useState(undefined);
  const [contract, setContract] = useState(
    new ethers.Contract(CONTRACT_ADDRESS, Chese.abi, providerTemp),
  );
  const [account, setAccount] = useState('Not Connected');
  const updateAccount = (accountTemp: string) => {
    setAccount(accountTemp);
  };
  const [connected, setConnected] = useState(false);
  const updateContract = (signer: ethers.providers.JsonRpcSigner) => {
    const yeah = new ethers.Contract(CONTRACT_ADDRESS, Chese.abi, signer);
    setContract(yeah);
  };
  const value = {
    CONTRACT_ADDRESS,
    provider,
    setProvider,
    signer,
    setSigner,
    contract,
    updateContract,
    account,
    updateAccount,
    connected,
    setConnected,
  };
  return <Web3Context.Provider value={value}>{children}</Web3Context.Provider>;
};

I believe something is causing rerenders somewhere and that is forcing everything back to defaults? In my navigation there is a "Connect Wallet" button that becomes an "Account" link when the connect state is true. When you click connect wallet it updates the whole context with multiple state updates one after another. And then the button switches to a Gatsby.js Link component to bring user to a new page.

For some reason, clicking connect wallet will connect the wallet with metamask and it does change the button into the account link which means that connect was set to true and rerendered the navigation and it stays that way until refresh.

{Web3Context.connected ? (
  <Link
    to="/account"
      className="text-white bg-gradient hover:text-white hover:bg-black hover:bg-none rounded-2xl px-4 py-3 my-0"
  >
   My Account
  </Link>
) : (
  <button
    onClick={connectWallet}
      className="text-white bg-gradient hover:text-white hover:bg-black hover:bg-none rounded-2xl px-4 py-3 my-0"
  >
    Connect Wallet
  </button>
)}

When I try to update any of the states that the context uses it seemingly fails and everything is default values.