Wallet Client Setup

Quickly setup a few thing to get you up and running in 15 minutes

We have released v1.0.0 of Elements with an improved UX and developer API. We recommend you to use v1.x. Here's the migration guide for v0.x users.

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

• network: key to set the network settings for the sdk (this is optional and by default set to mainnet)

  • We export a NETWORK key from elements which you can use to set this key

Here's the interface:

interface WalletClient {
  enable: (chainIds: string | string[]) => Promise<void>
  getAccount: (chainId: string) => Promise<Account>
  getSigner: (chainId: string) => Promise<Signer>
  network?: NETWORK
}

enum NETWORK {
  MAINNET = 'mainnet`
  TESTNET = 'testnet`
}

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, NETWORK } 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
              }
            },
            network: NETWORK.TESTNET // to enable testnet in elements
          }
        },
      }
    }, [client])

    return walletClient;
}