Initialize

import { Face } from '@haechi-labs/face-sdk';
import { Kit, getMetaMask, getWalletConnect } from '@haechi-labs/face-kit';
import { LoginProvider } from '@haechi-labs/face-types';
import { klaytn } from "@wagmi/chains"; // or you can use viem/chains like `import { klaytn } from "viem/chains"`;

// Put the initialized face instance to Kit
const face = new Face(/* ... */);

const kit = new Kit(face, {
  providers: [ 
    /* You can set social providers you want use */ 
    LoginProvider.Google,
    LoginProvider.Apple,
    LoginProvider.Discord
  ],
  externalWalletOptions: {
    wallets: [
      getMetaMask(),
      getWalletConnect({
        options: { projectId: wcProjectId },
        chains: [
          /* 
             you must config chains to use in the WalletConnect.
             Otherwise, it will be set to default lists(BSC, BSC Testnet, Ethereum, Sepolia, Polygon, Mumbai).
             
             You can choose chains to use in "@wagmi/chains" or "viem/chains".
          */   
          klaytn,
          /*
             Also, you can config your custom chains that is not in "@wagmi/chains" or "viem/chains", as shown below.
          */
          { 
            id: 20197,
            name: "Sandverse",
            network: "Oasys Sandverse",
            rpcUrls: {
              default: { http: ["https://rpc.sandverse.oasys.games"]},
              public: { http: ["https://rpc.sandverse.oasys.games"]}
            },
          },
        ]
      })
    ],
    expanded: false,
  },
});