Web SDKは公式コネクタを@0xsequence/connect-connectorsパッケージで提供していますが、追加のウォレットに対応するためにカスタムコネクタも統合可能です。このガイドでは、カスタムコネクタの作成と利用方法を説明します。

​
カスタムコネクタの作成

カスタムコネクタを作成する際は、既存のコネクタをベースにすることができます。例えば、Metamask 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;
  },
});

コネクタが他と重複しないよう、必ずユニークなidを設定してください。また、nameやlogoDark、logoLightなどの項目をカスタマイズすることで、Web SDK上での表示も調整できます。

wagmiのcreateConnector関数は初期化済みのコネクタを返す必要があります。Web SDKのコネクタはWagmiコネクタのラッパーなので、公式のWagmiコネクタがあればそれを利用し、必要に応じて独自に作成することも可能です。

カスタムコネクタの詳細な作成方法については、Wagmiのカスタムコネクタガイドもご参照ください。

​
カスタムコネクタの利用

カスタムコネクタを利用する場合、getDefaultConnectorsユーティリティ関数は使えません。代わりに、カスタム設定をWeb SDKに渡す必要があります。

まず、カスタムコネクタを含むコネクタのリストを作成し、Wagmiの設定に渡します：

import { getConnectWallets } from '@0xsequence/connect';
import { createConfig } from 'wagmi';

const projectAccessKey = '<your-project-access-key>';

const connectors = getConnectWallets(projectAccessKey, [
  google({
    defaultNetwork: 137,
    connect: {
      app: 'my-app',
      projectAccessKey: '<access-key>'
    }
  }),
  // ... other connectors
  myCustomConnector({ appName: 'my-app' }),
]);

const config = createConfig({
  transports,
  connectors,
  chains
})

次に、Web SDKの設定でsocialAuthOptionsまたはwalletAuthOptionsフィールドに、カスタムコネクタのidを指定して利用します：

const kitConfig = {
  signIn: {
    socialAuthOptions: ['google', 'facebook'],
    walletAuthOptions: ['metamask', 'my-custom-connector'],
  }
};

return (
  <WagmiProvider config={wagmiConfig}>
    <QueryClientProvider client={queryClient}>
      <SequenceConnect config={connectConfig}>
        <App />
      </SequenceConnect>
    </QueryClientProvider>
  </WagmiProvider>
);

​
カスタムコネクタの共有

カスタムコネクタを作成したら、プルリクエストでぜひご共有ください。他の開発者もあなたの成果を活用でき、Sequence Web SDKとのシームレスな統合が可能になります。

カスタムコネクタのエコシステムを広げて、みんなで盛り上げましょう！❤️