EthersAppContext

How to use EthersAppContext & hooks

To get access to signer, provider, and account addresses you will need to use EthersAppContext.

Here's an example:

const ethersContext = useEthersContext();
// you now have access to signer, provider, account (address), etc...  See IEthersContext for details

You can then use hooks in your app:

// ---------------------
// 🏦 get your balance
// ---------------------
// This instance uses the provider from the context in useBalance internally
const [yourLocalBalance, update, status] = useBalance(ethersContext.account);
Z;

Here's how to change an update interval:

// normally the hooks update every block
const [yourLocalBalance, update, status] = useBalance(ethersContext.account);
// you can change the update schedule to every 10 blocks, the default is every 1 block:
const [yourLocalBalance, update, status] = useBalance(ethersContext.account, { blockNumberInterval: 10 });
// you can change the update schedule to every polling, min is 10000ms
const [yourLocalBalance, update, status] = useBalance(ethersContext.account, {
  refetchInterval: 100000,
  blockNumberInterval: undefined,
});
// you can use advanced react-query update options
const [yourLocalBalance, update, status] = useBalance(ethersContext.account, {
  blockNumberInterval: 1,
  query: { refetchOnWindowFocus: true },
});

An example of overriding the provider from the context:

// get an adaptor from a provider or signer
const [mainnetAdaptor] = useEthersAdaptorFromProviderOrSigners(exampleMainnetProvider);
// pass in the override variable
const [yourMainnetBalance] = useBalance(ethersContext.account, mergeDefaultUpdateOptions(), {
  adaptorEnabled: true,
  adaptor: mainnetAdaptor,
});

tip

Check out Scaffold-eth-typescript useScaffoldHooksExamples.tsx for more examples

How to pass a provider directly into EthersAppContext

You can pass a provider into EthersAppContext directly if you don't want to use EthersModalConnect and web3Modal.

This would be a way to override the default mechansim if you have your own login UI:

<EthersAppContext customGetEthersAppProviderLibrary={customFunction}>
  <YourMainPage />
</EthersAppContext>

In the above example, customFunction should be a function that returns a TEthersProvider.

// a simple example
export type TGetEthersAppProviderLibrary = () => TEthersProvider;

// a function that transforms a provider into a TEthersProvider
export type TGetEthersAppProviderLibrary = (
  provider: TEthersProvider | ExternalProvider | JsonRpcFetchFunc | any
) => TEthersProvider;

Using EthersAppContext with web3Modal

Ethers context will automatically give you a way to integrate web3Modal into your app.

🚩 1. Create your web3Config

You can check out the web3 modal Github repo for a detailed explanation.

You can also see an example in scaffold-eth-typescript web3ModalConfig.ts.

🚩 2. Create a function that returns a TEthersModalConnector

This function should have a signature that returns TEthersModalConnector, which is an interface that is implemented by EthersModalConnector.

type TCreateEthersModalConnector = (id?: string) => TEthersModalConnector | undefined;

For a more complete example, see scaffold-eth-typescript createLoginConnector.

// theme: can be 'light' or 'dark'
// web3Config: is for web3Modal configuration
// id: allows you to programatically to a provider defined for the modal, see the web3Modal for details.
const createLoginConnector: TCreateEthersModalConnector = useCallback(
  (id?: string) => {
    if (web3Config) {
      const connector = new EthersModalConnector({ ...web3Config, theme: currentTheme }, id);
      return connector;
    }
  },
  [web3Config, currentTheme]
);

You can find the details for EthersModalConnector in the API docs.

🚩 3. Create a login event handler

You can then call the function we created above in the event handler of your login button anywhere in your app.

  ...
  const ethersContext = useEthersContext();

  // to handle a login
  const handleLoginClick = (): void => {
    if (createLoginConnector != null && ethersContext?.openModal != null) {
      const connector = createLoginConnector();
      ethersContext.openModal(connector);
    }
  };

  // to handle a log out
  const handleLogoutClick = (): void => {
    if (ethersContext?.disconnectModal != null) {
      ethersContext.disconnectModal();
    }
  };