Hola, creé un contexto para proporcionar detalles de Web3 globalmente para que todo sea más fácil y sincronizado. Estaba funcionando muy bien y luego sucedió algo y, de repente, los estados del contexto se niegan a cambiar.
este es el contexto
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: () => {}, });Función de contexto
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>; }; Creo que algo está causando repeticiones en algún lugar y eso está obligando a que todo vuelva a los valores predeterminados. En mi navegación hay un botón "Conectar billetera" que se convierte en un enlace de "Cuenta" cuando el estado de connect es verdadero. Cuando hace clic en conectar billetera, actualiza todo el contexto con múltiples actualizaciones de estado una tras otra. Y luego el botón cambia a un componente de enlace Gatsby.js para llevar al usuario a una nueva página.
Por alguna razón, hacer clic en conectar billetera conectará la billetera con metamask y cambia el botón al enlace de la cuenta, lo que significa que la connect se configuró en verdadero y volvió a mostrar la navegación y permanece así hasta que se actualice.
{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> )}Cuando trato de actualizar cualquiera de los estados que usa el contexto, aparentemente falla y todo son valores predeterminados.
Lo averigué.
El onClick en mi botón era onClick={connectWallet} , lo que provocaba muchas representaciones y obligaba a que el contexto volviera a su valor predeterminado. Lo cambió a onClick={() => connectWallet()}
Estoy usando Gatsby. Tampoco estaba ajustando correctamente el proveedor de contexto, lo que estaba restableciendo el contexto entre los enlaces internos. Según los documentos de Gatsby .