wagmi (Recommended)

Steps to integrate Apex into React Apps with wagmi

Suggest Edits

Introduction

This tutorial is a step-by-step guide on integrating Apex Wallet into your dapp using the wagmi library. This guide assumes you have a React application already set up and running.

You can find the latest version of Apex on the Chrome Webstore or visit our official site.

Step 1: Add wagmi as a dependency

Install wagmi (and its peers) as dependencies for your dapp.

yarn add wagmi ethers

npm install wagmi ethers

See wagmi documentation for more information

Step 2: Instantiate Apex & Wagmi Client

Create a new file in your src or root directory called walletConfig.ts. Here we’ll instantiate the Apex connector that will integrate into your dapp. Copy the code below.

import { chain, configureChains, Connector } from "wagmi";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { publicProvider } from "wagmi/providers/public";
import { createClient } from "wagmi";
import { useMemo } from "react";
import { InjectedConnector } from "wagmi/connectors/injected";
import { Ethereum, InjectedConnectorOptions } from "@wagmi/core";
import { Chain } from "wagmi";

type ExtendedEthereum = Ethereum & {
  isApexWallet?: boolean;
};

// API key for Ethereum node
const apiKey = process.env.ALCHEMY_ID;

/*
 * If the injected Apex provider is available this function will return
 * the Apex ethereum provider otherwise will return undefined.
 */
export function detectApexWalletProvider(): Ethereum | undefined {
  if (
    typeof window !== "undefined" &&
    window.ethereum !== undefined &&
    (window.ethereum as ExtendedEthereum)?.isApexWallet
  ) {
    return window.ethereum;
  }
  return window.ethereum?.providers?.find((p) => {
    return (p as ExtendedEthereum).isApexWallet;
  });
}

export class ApexConnector extends InjectedConnector {
  id = "apex";
  name = "Apex";
  ready = detectApexWalletProvider() !== undefined;
  constructor({
    chains,
    options,
  }: {
    chains?: Chain[];
    options?: InjectedConnectorOptions;
  }) {
    super({ chains, options });
    this.ready = true;
  }

  async getProvider(): Promise<Ethereum | undefined> {
    return detectApexWalletProvider();
  }
}

// Configure client and chains for connector support
export function useCreateProviders() {
  const providersConfig = useMemo(() => {
    const { chains, provider, webSocketProvider } = configureChains(
      // add other chains here
      [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
      [alchemyProvider({ apiKey }), publicProvider()]
    );

    // Set up connectors
    const connectors: Connector[] = [
      new ApexConnector({
        chains,
      }),
      // Add other connectors here. (See https://wagmi.sh/examples/connect-wallet)
    ];

    const client = createClient({
      autoConnect: true,
      connectors,
      provider,
      webSocketProvider,
    });

    return {
      client,
      chains,
      provider,
      webSocketProvider,
    };
  }, [apiKey]);

  return providersConfig;
}

📘

Already integrated with wagmi?

You can delete the react hook useCreateProviders function and just pass in a new ApexConnector({ chains }) where ever you declare your connectors. Also you can skip the rest of this tutorial!

Let's walk through what this code is doing:

  1. Declares a convenience type for window.ethereum.isApexWallet
  2. Gets the apiKey for your Alchemy RPC URL; you can optionally switch providers on line 60. See this
  3. Adds a quick helper function detectApexWalletProvider to detect if Apex Wallet is available and grab the provider.
  4. Declares a new class, ApexConnector, which overrides some of the functionality of wagmi's InjectedConnector
  5. Finally, the file declares a react hook to generate the wagmi client configuration used in the next step.
    a. *You may want to update the chains that on line 59.*
    b. On line 69 ☝️ you can also add Coinbase Wallet, WalletConnect, and Metamask by following this guide.

Step 3: Import and Setup WagmiConfig

In your App component file, or whatever parent component, import your code from Step 1, generate a provider config, and pass in the client.

import { WagmiConfig } from "wagmi";
import { ApexConnectButton } from "./ApexUI";
import { useCreateProviders } from "./walletConfig";

export function WagmiExampleDApp() {
  const providerConfig = useCreateProviders();
  // You can also get your chains, provider, and websocket provider here as well.
  return (
    <WagmiConfig client={providerConfig.client}>
      {/*Add your application components here*/}
      <ApexConnectButton />
    </WagmiConfig>
  );
}

What this code does.

  1. On line 6 get the providerConfig from the previous step.
    a. This hook also contains chains, providers, and WebSocket if you need to use it elsewhere.
  2. On line 9 wrap our App Components in WagmiConfig and pass in the providerConfig.client.
    a. This allows you to use all the powerful hooks defined by wagmi.
  3. Lastly, we add a sign-in component <ApexConnectButton />. This button component handles connecting, disconnecting, and sending the user to the Apex Download Page.
    a. You can find the button and the ApexUI file here.
    b. Or inspect the file to customize the sign In button to fit your DApp.

Additional Resources

🚧

Have a Question or Feedback?

Post in our discussion page!

Updated 9 months ago