GuidesFrontend example guide
Add new wallets
Adding Support for a New Wallet
To add a new wallet to the project, follow these steps:
-
Update the
WalletTypes
Enum:- Open the
types.ts
file. - Add the new wallet type to the
WalletTypes
enum. This enum is used to identify different wallets.
export enum WalletTypes {Keplr = "Keplr",Leap = "Leap",MyNewWallet = "MyNewWallet", // Add your new wallet type here} - Open the
-
Create a New Wallet Class:
- Create a new class for your wallet that implements the
Wallet
interface. This class should contain the necessary methods to interact with the wallet, such as connecting, signing transactions, and getting account information. - Example:
import { Wallet } from "@/types";import { MyNewWalletClient } from "my-new-wallet-sdk";export class MyNewWallet implements Wallet {readonly client: MyNewWalletClient;constructor(client: MyNewWalletClient) {this.client = client;}// Implement other methods like enable, getAccount, sign, etc.} - Create a new class for your wallet that implements the
-
Create a Function to Retrieve the Wallet Client:
- Create a function similar to
getKeplrFromExtension
orgetLeapFromExtension
to retrieve the wallet client from the browser extension or other sources. - Example:
import { MyNewWalletClient } from "my-new-wallet-sdk";export const getMyNewWalletFromExtension = async (): Promise<MyNewWalletClient | undefined> => {if (typeof window === "undefined") {return undefined;}const myNewWallet = (window as any).myNewWallet; // Replace with the appropriate window objectif (myNewWallet) {return myNewWallet;}throw new Error("MyNewWallet not installed");}; - Create a function similar to
-
Update the
getWalletClient
Function:- Open the
getWalletClient.ts
file and add a new case for the new wallet type in the switch statement. - Example:
import { MyNewWallet, getMyNewWalletFromExtension } from "./wallets";export async function getWalletClient(walletId: WalletTypes) {switch (walletId) {case WalletTypes.Leap:const LeapClient = await getLeapFromExtension();if (!LeapClient) throw new Error("No Leap client found");return new Leap(LeapClient);case WalletTypes.Keplr:const KeplrClient = await getKeplrFromExtension();if (!KeplrClient) throw new Error("No Keplr client found");return new Keplr(KeplrClient);case WalletTypes.MyNewWallet: // Add a new case for your walletconst MyNewWalletClient = await getMyNewWalletFromExtension();if (!MyNewWalletClient) throw new Error("No MyNewWallet client found");return new MyNewWallet(MyNewWalletClient);default:throw new Error("Unsupported wallet type");}} - Open the
-
Test the Integration:
- Test the integration by selecting the new wallet type in your application and verifying that it can successfully connect, sign transactions, and retrieve account information.
By following these steps, you can add support for a new wallet to the project, making it available for users to connect and interact with the blockchain.