Skip to content

adding-new-wallets.mdx

Latest commit

 

History

History
133 lines (79 loc) · 10.6 KB

adding-new-wallets.mdx

File metadata and controls

133 lines (79 loc) · 10.6 KB
Raw

How to Integrate New Wallets into CosmosKit

Quickly Add Extension Wallets

  1. Copy files in Leap Extension to your package;

  2. Replace Leap with your wallet name (with first letter capitalized) globally;

  3. Replace leap with your wallet name (with first letter in lowercase) globally;

  4. Edit file client.ts, registry.ts, types.ts and utils.ts. Replace what is different from Leap with the new wallet specified methods/properties.

  5. Construct the MainWallet (class in main-wallet.ts) instance and put it into ChainProvider wallets property.

Quickly Add Mobile Wallets

For wallets support Wallet Connect v2.0

  1. Copy files in Keplr Mobile to your package;

  2. Replace Keplr with your wallet name (with first letter capitalized) globally;

  3. Replace keplr with your wallet name (with first letter in lowercase) globally;

  4. Edit file client.ts, registry.ts and types.ts. Replace what is different from Keplr with the new wallet specified methods/properties. For client.ts, the main replacement would happen in getAppUrl and the method parameter of sendCustomRequest

  5. Construct the MainWallet (class in main-wallet.ts) instance and put it into ChainProvider wallets property.

Add New Wallets from Scratch

1️⃣ Prepare basic information for wallet

Required properties

Key Type Description
name WalletName = string identifier
prettyName string display name
mode WalletMode = 'extension' | 'wallet-connect' wallet client type
mobileDisabled* boolean display on mobile or not
walletconnect { name: string; projectId: string; encoding?: BufferEncoding } only required when you are integrating mobile wallets based on walletconnect. If encoding is undefined, by default using hex to encode bytes

* <span style={{fontSize: '0.85rem'}}> Usually true when mode is wallet-connect, false when mode is extension.

Optional properties

Key Type Description
rejectMessage string | { source: string; target?: string } rejectMessage or rejectMessage.source is error message string thrown by wallet app/extension when user rejects, while rejectMessage.target is message returned by hooks. If not provided, target would be 'Request Rejected!'
connectEventNamesOnWindow string[] window event names to fire auto-connect
connectEventNamesOnClient string[] wallet client event names to fire auto-connect (make sure on and off methods are defined in WalletClient)
downloads DownloadInfo[] wallet app/extension download information
logo string | { major: string, minor: string } wallet logo url, display on default modal. For MetaMask Snaps, use logo: { major: METAMASK_LOGO, minor: WALLET_LOGO }
extends 'MetaMask' indicate it's a MetaMask Snap

Examples

2️⃣ Implement WalletClient

MainWallet is a class organizing all ChainWallets. It should extend MainWalletBase class, in which protected _chainWallets property stores all ChainWallets.

Required methods

Key Type Description
getSimpleAccount (chainId: string) => Promise<SimpleAccount> return account with address but without pubkey and algo

Optional methods

Key Type Description
getAccount (chainId: string) => Promise<WalletAccount>* return account with address, pubkey and algo
getOfflineSigner (chainId: string, preferredSignType?: SignType) => Promise<OfflineSigner> prioritize returning preferredSignType (by default amino) corresponding signer if it is available, otherwise return siger that is provided.
enable (chainIds: string | string[]) => Promise<void> give permission for the webpage to access wallet
addChain (chainInfo: ChainRecord) => Promise<void> add new Cosmos-SDK based blockchains that isn't natively integrated to wallet app/extension
on (type: string, listener: EventListenerOrEventListenerObject) => void add event listener
off (type: string, listener: EventListenerOrEventListenerObject) => void remove event listener

Examples

3️⃣ Extend ChainWalletBase

Create a ChainWallet class that extends ChainWalletBase. ChainWallet provides wallet information for a particular chain, e.g. address, offlineSigner, etc.

ChainWalletBase has implemented a bunch of methods such as wallet connection, sign, broadcast, etc. [learn more]. Therefore, normally you don't need to do any extra work inside ChainWallet. But feel free to overwrite these methods or add new methods/properties if customization is needed to meet new demand.

Examples

4️⃣ Extend MainWalletBase

Create a MainWallet class that extends MainWalletBase. MainWallet organizes all ChainWallets, which are stored in protected member _chainWallets.

Note: Class ChainWallet created in Step 3 is required in MainWalletBase construction.

Required methods

Key Type
initClient () => void | Promise<void>*

* <span style={{fontSize: '0.85rem'}}> WalletClient is the one implemented in Step 2.

Also, feel free to overwrite methods in MainWalletBase or add new methods/properties if necessary.

Examples

5️⃣ Get MainWallet instance

You can construct your MainWallet Instance according to your MainWallet construct method now. Usually the walletInfo object prepared in Step 1 is imported here as a construction argument.

Examples

Last but not least, append this instance to the wallets property of ChainProvider.

6️⃣ Don't Forget To Update Docs

Add Markdown File just like other wallets here.