Switch providers at run time for Ethereum Wallet connector?

TypeScript SDK
1

I would like to be able to switch from testnet and mainnet providers while using the ethereum wallet connector.

It looks like you have to define which provider to use at runtime, and it doesn’t matter if you specify the networks in advance. By default the ethereum wallet connector uses a testnet provider, if I use the customDefaultConnectors, then I successfully get an ethereum wallet connector with the mainnet provider, but there is no network switching allowed.

What would be the best approach to allow for network switching of the provider when using the Ethereum Wallet connector at run time?

import { ChakraProvider } from "@chakra-ui/react";
import { FluidProvider } from "./hooks/FluidProvider";
import AppRoutes from "./Routes";
import { BrowserRouter } from "react-router-dom";
import { theme } from "./styling/theme";
import { FuelProvider } from "@fuels/react";
import { defaultConnectors, WalletConnectConnector } from "@fuels/connectors";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { coinbaseWallet, walletConnect } from "@wagmi/connectors";
import { http, createConfig, injected } from "@wagmi/core";
import { mainnet, sepolia } from "@wagmi/core/chains";
import { CHAIN_IDS, Provider } from "fuels";

const queryClient = new QueryClient();

// ============================================================
// WalletConnect Connector configurations
// https://docs.walletconnect.com/web3modal/javascript/about
// ============================================================
const UI_CONFIG = {
  suggestBridge: false,
};
const WC_PROJECT_ID = "7fc8402a198551e4bd808ec43855cd89";
const METADATA = {
  name: "Fluid Protocol",
  description: "Fluid Protocol wallet connection",
  url: window.location.href,
  icons: ["https://connectors.fuel.network/logo_white.png"],
};
const NETWORKS = [
  {
    bridgeURL: "https://app-testnet.fuel.network/bridge?from=eth&to=fuel",
    chainId: CHAIN_IDS.fuel.testnet,
  },
  {
    bridgeURL: "https://app-mainnet.fuel.network/bridge?from=eth&to=fuel",
    chainId: CHAIN_IDS.fuel.mainnet,
  },
];
const wagmiConfig = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  connectors: [
    injected({ shimDisconnect: false }),
    walletConnect({
      projectId: WC_PROJECT_ID,
      metadata: METADATA,
      showQrModal: false,
    }),
    coinbaseWallet({
      appName: METADATA.name,
      appLogoUrl: METADATA.icons[0],
      darkMode: true,
      reloadOnDisconnect: true,
    }),
  ],
});

const customMainnetConnector = () => {
  const provider = Provider.create("https://mainnet.fuel.network/v1/graphql");

  return new WalletConnectConnector({
    projectId: WC_PROJECT_ID,
    wagmiConfig: wagmiConfig,
    chainId: CHAIN_IDS.fuel.mainnet,
    fuelProvider: provider,
  });
};

const customDefaultConnectors = () => {
  return [
    // ...defaultConnectors({
    //   wcProjectId: WC_PROJECT_ID,
    //   ethWagmiConfig: wagmiConfig,
    // }),
    customMainnetConnector(),
  ];
};

export const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <FuelProvider
        theme="dark"
        uiConfig={UI_CONFIG}
        networks={NETWORKS}
        fuelConfig={{
          connectors: defaultConnectors({
            wcProjectId: WC_PROJECT_ID,
            ethWagmiConfig: wagmiConfig,
          }),
        }}
      >
        <BrowserRouter>
          <ChakraProvider theme={theme}>
            <FluidProvider>
              <AppRoutes />
            </FluidProvider>
          </ChakraProvider>
        </BrowserRouter>
      </FuelProvider>
    </QueryClientProvider>
  );
};
2

Hi @diyahir our sincerest apologies for such a delayed response, this post seemed to have slipped through the cracks.

You’re suggestion is definitely the right path i.e. create two provider instances and alternate between them If you’d like to be able to switch between them.

// Define URLs for testnet and mainnet
const TESTNET_URL = 'https://testnet.fuel.network/v1/graphql';
const MAINNET_URL = 'https://mainnet.fuel.network/v1/graphql';

// Create providers for testnet and mainnet
const testnetProvider = await Provider.create(TESTNET_URL);
const mainnetProvider = await Provider.create(MAINNET_URL);

const customMainnetConnector = () => {

  return new WalletConnectConnector({
    projectId: WC_PROJECT_ID,
    wagmiConfig: wagmiConfig,
    chainId: CHAIN_IDS.fuel.mainnet,
    fuelProvider: mainnetProvider,
  });
};

const customTestnetConnector = () => {

  return new WalletConnectConnector({
    projectId: WC_PROJECT_ID,
    wagmiConfig: wagmiConfig,
    chainId: CHAIN_IDS.fuel.testnet,
    fuelProvider: testnetProvider,
  });
};

// Function to switch provider
function switchProvider(isMainnet: boolean) {
  wallet.provider = isMainnet ? mainnetProvider : testnetProvider;
}

Hope this helps, again our apologies for the delayed response.

1 Like
3

hi @diyahir for now we don’t support changing the provider of ethereum connector on runtime, is it possible for you to refresh the page and use a new connector with the network you want ? that’s its done on most apps, one page for each network

2 Likes