Last Steps

Complete your integration with these final steps.

Add a Type Guard

If your wallet's walletInstance differs from the OPWallet type, implement a TypeScript type guard to enable proper type narrowing when using WalletConnect.

The type guard should check for a property unique to your wallet, one that doesn't exist in other supported wallets. This enables developers to safely access wallet-specific features.

Type Guard Naming Convention

Name your type guard is[YourWalletName]() for clarity and readability.

Example: For MyWallet Wallet, use isMyWallet().

This naming pattern makes code more intuitive and easier to read.

Suggested Implementation

The type guard function must perform verification that only your wallet instance can satisfy, ensuring no other wallet implementation passes the check.

If your wallet shares properties with an existing type guard, you must update both your type guard and the existing one to distinguish between them.

The following example demonstrates how to implement a type guard for MyWallet, which extends Unisat:

Addind a type guardtypescript

export function isMyWallet(walletInstance: Unisat|MyWallet|null): walletInstance is MyWallet {
    return typeof walletInstance == 'object' && (walletInstance as MyWallet)?.myWalletVersion !== undefined;
}

Add a Logo

Add your wallet's logo to your wallet's interface.ts file and export it. Then it can be used in the WalletConnect UI.

Format Requirements:

Base64-encoded.
Any format supported by the <img> tag: JPEG, PNG, or SVG.
Image size should be: 32x32, 64x64, 96x96 or 128x128.

The following example shows how to add a logo:

Add a logo to interface.tsTypescript

export const logo =
    'data:image/png;base64,' +
    'iA1a7XFZbDakFyN9mPJLpH3rWLRrJ5DkgJtHHnnkwHsyDPg72N85mCz/wlsWD2NaZxHFbb6mA6Bp' +
    'iSjtZWj/PkrHjrCKlM+iuT0sjzzymE7x/wNjSpXBVP9tBwAAAABJRU5ErkJggg==';