Integrating Leap Wallet

This documentation provides a guide on integrating Leap Wallet into your Aptos/Movement application. By following these steps, you can seamlessly detect, connect, and interact with Leap

Detecting Leap Wallet

To integrate Leap Wallet into your Aptos/Movement application, we recommend using the @aptos-labs/wallet-standard package. This standardised package ensures consistent wallet detection and interaction across different wallet providers.

Prerequisites

Before you begin implementing wallet detection, you'll need to install the required package. Open your terminal and run one of the following commands based on your package manager:

# If you're using npm
npm install @aptos-labs/wallet-standard

# If you're using yarn
yarn add @aptos-labs/wallet-standard

Implementing Wallet Detection

Once you've installed the package, you can use the following code snippet to detect available Aptos/Movement wallets, including Leap:

import { getAptosWallets } from '@aptos-labs/wallet-standard'

// Fetch all available Aptos wallets
const wallets = getAptosWallets()
// Access the list of detected wallets
const aptosWallets = wallets.aptosWallets

After detecting the wallets, you can find the Leap wallet instance in the aptosWallets object. This will give you access to all wallet functions, including connect, which we'll explore in detail in the following sections.

Alternative Detection Method

You can also access the Leap wallet directly through the window object:

const leapWallet = window.leap?.aptos

This method provides direct access to the Leap wallet interface when available in the browser environment.

Note: Make sure to implement proper error handling and wallet availability checks in your application to ensure a smooth user experience.

Connecting to Leap Wallet

This section assumes you have completed the wallet detection steps outlined above and have access to the Leap wallet object.

Establishing Connection

To interact with Leap wallet, you'll need to establish a connection first. This will trigger a prompt asking the user for permission to connect your dApp with Leap wallet.

Creating the Wallet Adapter

To ensure seamless interaction, wrap the Leap wallet object with a StandardWalletAdapter:

import { AptosWallet, NetworkInfo } from '@aptos-labs/wallet-standard';

// Assuming leap is the detected Leap Wallet object
const adapter = leap.aptos as AptosWallet;

// Establish connection with specified network
await adapter.features['aptos:connect'].connect(SILENT_CONNECT, networkInfo);

Note: The networkInfo parameter specifies which Aptos/Movement network to connect to. We'll cover network configuration in detail in the "Network Management" section below.

Disconnecting

To terminate the connection with Leap wallet:

await adapter.features['aptos:disconnect'].disconnect()

Message Signing

Creating a Sign Message Payload

Before signing a message, create a payload that conforms to the AptosSignMessageInput type:

import { type AptosSignMessageInput } from "@aptos-labs/wallet-standard";

const messagePayload: AptosSignMessageInput = {
  message: "Welcome to Leap Wallet",
  address: true,
  nonce: "RandomNonceString",
};

Signing the Message

Use the adapter's signMessage function to sign your payload:

await adapter.features["aptos:signMessage"].signMessage(messagePayload);

Transaction Management

Setting Up the Aptos Client

First, initialize the Aptos client with your desired network configuration:

import { Aptos, Network, AptosConfig } from "@aptos-labs/ts-sdk";

const aptosConfig = new AptosConfig({
  network: Network.MAINNET,
});

const aptos = new Aptos(aptosConfig);

Creating and Signing Transactions

To create a transaction payload:

const transaction = await aptos.transaction.build.simple({
  sender: YOUR_ACCOUNT_ADDRESS,
  data: {
    function: "0x1::coin::transfer",
    typeArguments: ["0x1::aptos_coin::AptosCoin"],
    functionArguments: [
      "0x960dbc655b847cad38b6dd056913086e5e0475abc27152b81570fd302cb10c38",
      100,
    ],
  },
});

Option 1: Sign Now, Submit Later

If you need to sign a transaction and submit it later:

// Sign the transaction
const signedTx = await adapter.features["aptos:signTransaction"].signTransaction(transaction);

await aptos.transaction.submit.simple({
  senderAuthenticator: signedTx.args,
  transaction: transaction,
});

Option 2: Sign and Submit Immediately

For immediate signing and submission:

await adapter.features["aptos:signAndSubmitTransaction"].signAndSubmitTransaction(transaction);

Network Management

The Leap wallet adapter supports dynamic network switching. You can manage networks in two ways:

1. Specify Network During Connection

Pass the network information during the initial connection:

interface NetworkInfo {
  name: Network;
  chainId: number;
  url?: string;
}

await adapter.features["aptos:connect"].connect(SILENT_CONNECT, networkInfo);

2. Change Network After Connection

Switch networks on an already connected adapter:

await adapter.features['aptos:changeNetwork']!.changeNetwork(networkInfo);

Note: The NetworkInfo interface must conform to the specifications from @aptos-labs/wallet-standard.