DefiHub Apps - Wagmi Connector

A connector for the wagmi library.

Installation

yarn add wagmi

npm i wagmi

Integration steps

1. Import DefiHubConnector and include it in the wagmi client configuration options

import { defihub } from '@nextdefihub/apps-wagmi';

const chains = [];

const config = createConfig({
  connectors: [
    new defihub({
      chains,
      options: {
        allowedDomains: [/^app\.nextdefihub\.ai$/],
        debug: false,
      },
    }),
  ],
});

⚠️ Make sure to omit the autoConnect property or set it to false. Wagmi library automatically connects to the last used provider, but instead we want to automatically connect to the DefiHub if the app is loaded in the DefiHub Context. Autoconnect logic may be implemented via a separate hook.

2. Create an autoconnect hook

DefiHub Apps are loaded inside an iframe in the DefiHub Shell application and it is expected that the app automatically connects to the DefiHub shell.

import { useConnect } from 'wagmi';
import { useEffect } from 'react';

const AUTOCONNECTED_CONNECTOR_IDS = ['defihub'];

function useAutoConnect() {
  const { connect, connectors } = useConnect();

  useEffect(() => {
    AUTOCONNECTED_CONNECTOR_IDS.forEach((connector) => {
      const connectorInstance = connectors.find((c) => c.id === connector && c.ready);

      if (connectorInstance) {
        connect({ connector: connectorInstance });
      }
    });
  }, [connect, connectors]);
}

export { useAutoConnect };

This hook attempts to connect to the DefiHub Shell automatically on the app load. The hook can be extended with other connectors that use a similar iframe approach. It can also be extended with fallback logic such as the last used wallet if the connection to the DefiHub doesn't succeed.