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 = client!.getOfflineSignerDirect!(chainId)
const aminoSigner = client!.getOfflineSignerAmino!(chainId)
return {
signDirect: async (address, signDoc) => {
const result = await signer.signDirect(address, signDoc)
return {
signature: new Uint8Array(Buffer.from(result.signature.signature, 'base64')),
signed: result.signed
}
},
signAmino: async (address, signDoc) => {
const result = await aminoSigner.signAmino(address, signDoc)
return {
signature: new Uint8Array(Buffer.from(res.signature.signature, 'base64')),
signed: res.signed
}
}
}
},
}
}, [client])
return walletClient;
}