Wallet connection not persisting across page navigation or reload

TypeScript SDK
1

Hello, I’m migrating to the fuels/connector.

I’ve set up the context in my app at the highest level as shown here:

export const App = () => {

  return (

    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
    >
      <FuelProvider
        theme="dark"
        fuelConfig={{
          connectors: defaultConnectors({
            devMode: true,
            wcProjectId: WC_PROJECT_ID,
            ethWagmiConfig: wagmiConfig,
          })
        }}
      >
        <BrowserRouter>
          <ChakraProvider theme={theme}>
        {/*... etc*/}
          </ChakraProvider>
        </BrowserRouter>
      </FuelProvider>
    </PersistQueryClientProvider >

  );
};

I tried with the basic query client exactly as used in the demo here: fuel-connectors/examples/react-app/src/main.tsx at main · FuelLabs/fuel-connectors · GitHub

export const App = () => {

  return (
    <QueryClientProvider client={queryClient}>
          <FuelProvider
            theme="dark"
            fuelConfig={{
              connectors: defaultConnectors({
                devMode: true,
                wcProjectId: WC_PROJECT_ID,
                ethWagmiConfig: wagmiConfig,
              })
            }}
          >
            <BrowserRouter>
              <ChakraProvider theme={theme}>
            {/*... etc*/}
              </ChakraProvider>
            </BrowserRouter>
          </FuelProvider>
    </QueryClientProvider/>
  );
};

I can connect my wallet without issue, however when I reload the app or navigate to a new page, the wallet connection state is lost.

I am using version ^0.27.1 for both fuels/connector and fuels/react

2

Can you please share your entire repo, I will try to reproduce it locally

3

We ended up fixing it with the following code:

useEffect(() => {
    const checkAndSetConnector = async () => {
      const hasConnector = await fuel.hasConnector();
      if (!hasConnector) {
        const savedConnector = Cookies.get("selectedConnector");
        const connectorToUse =
          savedConnector && connectors.find((c) => c.name === savedConnector)
            ? savedConnector
            : "Fuel Wallet";
        await fuel.selectConnector(connectorToUse);
      }
    };
    checkAndSetConnector();
  }, [fuel, connectors]);
  useEffect(() => {
    if (currentConnector) {
      Cookies.set("selectedConnector", currentConnector.name, { expires: 30 });
    }
  }, [currentConnector]);

It looks like the connector doesn’t persist and has to be reset manually, additionally we don’t see this behavior when using the metamask connector only on the official “Fuel Wallet” connector

1 Like