Sequence Kit provides official connectors via the @0xsequence/kit-connectors package. However, you can also integrate custom connectors with Sequence Kit to support additional wallets. This guide will walk you through creating and using custom connectors.

Creating a Custom Connector

To create a custom connector, you can use an existing connector as a basis. For example, the Metamask Connector is a good starting point. Here's an example of how to create a custom connector:

export const myCustomConnector = (options: MyCustomConnectorOptions) => ({
  id: 'my-custom-connector',
  name: 'My Custom Connector',
  logoDark: MyCustomLogoDark,
  logoLight: MyCustomLogoLight,
  createConnector: () => {
    const connector = myCustomConnector(options);
    return connector;
  },
});

Make sure to provide a unique id for your connector to avoid conflicts with other connectors. You can also customize fields such as name, logoDark, and logoLight to control how the connector appears in Sequence Kit.

The createConnector function should return an initialized connector. Sequence Kit connectors are wrappers of Wagmi connectors, so you can use an official Wagmi connector if available, or create your own if needed.

For more details on creating custom connectors, refer to Wagmi's guide on Custom Connectors.

When using custom connectors, you can't rely on the getDefaultConnectors utility function. Instead, you need to pass custom configurations to Sequence Kit.

First, create a list of connectors, including your custom connector, and provide it to the Wagmi configuration:

import { getKitConnectWallets } from '@0xsequence/kit';
 
const connectors = getKitConnectWallets([
  google({
    defaultNetwork: 137,
    connect: {
      app: 'my-app',
      projectAccessKey: '<access-key>'
    }
  }),
  // ... other connectors
  myCustomConnector({ appName: 'my-app' }),
]);
 
const config = createConfig({
  transports,
  connectors,
  chains
})

Next, use your custom connector by specifying its id in either the socialAuthOptions or walletAuthOptions field of the Sequence Kit configuration:

const kitConfig = {
  signIn: {
    socialAuthOptions: ['google', 'facebook'],
    walletAuthOptions: ['metamask', 'my-custom-connector'],
  }
};
 
return (
  <WagmiConfig config={wagmiConfig}>
    <QueryClientProvider client={queryClient}>
      <KitProvider config={kitConfig}>
        <App />
      </KitProvider>
    </QueryClientProvider>
  </WagmiConfig>
);

Feel free to contribute your custom connectors by creating a pull request. This way, others can benefit from your work and enjoy seamless integration with Sequence Kit.

Share the love ❤️ by expanding the ecosystem of custom connectors!