Comment on page
Wallet Client Setup

Quickly setup a few thing to get you up and running in 15 minutes
Elements requires a few methods to work. For this purpose, elements needs you to pass in a wallet client.
WalletClient
This is an object that has the following methods that the liquidity components use:
enable: function that enables chain(s) on the wallet.
getAccount: function that returns the account for a given chain id
getSigner: function that returns a signer for a given chain id
Here's the interface:
interface WalletClient {
  enable: (chainIds: string | string[]) => Promise<void>
  getAccount: (chainId: string) => Promise<Account>
  getSigner: (chainId: string) => Promise<Signer>
}
Setup
You can do a custom implementation of wallet client. We have created examples of wallet clients with the most common wallet adapters in cosmos.
Cosmos Kit
import { type WalletClient } from '@leapwallet/elements'
import { useWalletClient } from '@cosmos-kit/react'
​
const useElementsWalletClient = (): WalletClient => {
    const { client } = useWalletClient()
​
    const walletClient: WalletClient = useMemo(() => {
      return {
        enable: (chainIds: string | string[]) => {
          return client!.enable!(chainIds)
        },
        getAccount: async (chainId: string) => {
          await client!.enable!(chainId)
          const result = await client!.getAccount!(chainId)
          return {
            bech32Address: result.address,
            pubKey: result.pubkey,
            isNanoLedger: result.isNanoLedger
          }
        },
        getSigner: async (chainId: string) => {
          const signer = await client!.getOfflineSignerDirect(chainId)
          const aminoSigner = await client!.getOfflineSignerAmino!(chainId)
          
          return {
            signDirect: async (signerAddress: string, signDoc: any) => {
              const result = await signer.signDirect(signerAddress, signDoc)
              return {
                signature: new Uint8Array(Buffer.from(result.signature.signature, 'base64')),
                signed: result.signed,
              }
            },
            signAmino: async (address: string, signDoc: SignAminoDoc) => {
              const res = await aminoSigner.signAmino(chainId, address, signDoc)
              return {
                signature: new Uint8Array.from(Buffer.from(res.signature.signature, 'base64')),
                signed: res.signed
              }
            }
          }
        },
      }
    }, [client])
​
    return walletClient;
}
Elements - Previous
Getting Started
Next - Elements
Liquidity Modal Component
Last modified 2d ago