Getting started

1. Connect to MetaMask and get the provider

Before you can install and interact with the XRP Ledger Snap, you need to connect your DApp to MetaMask and retrieve the provider object.

Steps:

1. Install MetaMask: Ensure that the MetaMask extension is installed in your browser. You can download it here.

2. Connect to MetaMask:

   • In your DApp, prompt the user to connect their MetaMask wallet. This will give you access to the Ethereum provider, which is required to interact with Snaps.

Connect to MetaMask | MetaMask developer documentation

1. Verify that your provider has snaps support

async hasSnapsSupport(provider: MetaMaskInpageProvider): Promise<boolean> {
    try {
      await provider.request({
        method: 'wallet_getSnaps',
      });
      return true;
    } catch {
      return false;
    }
  }

Example:

template-snap-monorepo/packages/site/src/utils/metamask.ts at main · MetaMask/template-snap-monorepoGitHub

Full code from the site in the MetaMask Snap monorepo

import type {
  EIP6963AnnounceProviderEvent,
  MetaMaskInpageProvider,
} from '@metamask/providers';

/**
 * Check if the current provider supports snaps by calling `wallet_getSnaps`.
 *
 * @param provider - The provider to use to check for snaps support. Defaults to
 * `window.ethereum`.
 * @returns True if the provider supports snaps, false otherwise.
 */
export async function hasSnapsSupport(
  provider: MetaMaskInpageProvider = window.ethereum,
) {
  try {
    await provider.request({
      method: 'wallet_getSnaps',
    });

    return true;
  } catch {
    return false;
  }
}

/**
 * Get a MetaMask provider using EIP6963. This will return the first provider
 * reporting as MetaMask. If no provider is found after 500ms, this will
 * return null instead.
 *
 * @returns A MetaMask provider if found, otherwise null.
 */
export async function getMetaMaskEIP6963Provider() {
  return new Promise<MetaMaskInpageProvider | null>((rawResolve) => {
    // Timeout looking for providers after 500ms
    const timeout = setTimeout(() => {
      resolve(null);
    }, 500);

    /**
     * Resolve the promise with a MetaMask provider and clean up.
     *
     * @param provider - A MetaMask provider if found, otherwise null.
     */
    function resolve(provider: MetaMaskInpageProvider | null) {
      window.removeEventListener(
        'eip6963:announceProvider',
        onAnnounceProvider,
      );
      clearTimeout(timeout);
      rawResolve(provider);
    }

    /**
     * Listener for the EIP6963 announceProvider event.
     *
     * Resolves the promise if a MetaMask provider is found.
     *
     * @param event - The EIP6963 announceProvider event.
     * @param event.detail - The details of the EIP6963 announceProvider event.
     */
    function onAnnounceProvider({ detail }: EIP6963AnnounceProviderEvent) {
      if (!detail) {
        return;
      }

      const { info, provider } = detail;

      if (info.rdns.includes('io.metamask')) {
        resolve(provider);
      }
    }

    window.addEventListener('eip6963:announceProvider', onAnnounceProvider);

    window.dispatchEvent(new Event('eip6963:requestProvider'));
  });
}

/**
 * Get a provider that supports snaps. This will loop through all the detected
 * providers and return the first one that supports snaps.
 *
 * @returns The provider, or `null` if no provider supports snaps.
 */
export async function getSnapsProvider() {
  if (typeof window === 'undefined') {
    return null;
  }

  if (await hasSnapsSupport()) {
    return window.ethereum;
  }

  if (window.ethereum?.detected) {
    for (const provider of window.ethereum.detected) {
      if (await hasSnapsSupport(provider)) {
        return provider;
      }
    }
  }

  if (window.ethereum?.providers) {
    for (const provider of window.ethereum.providers) {
      if (await hasSnapsSupport(provider)) {
        return provider;
      }
    }
  }

  const eip6963Provider = await getMetaMaskEIP6963Provider();

  if (eip6963Provider && (await hasSnapsSupport(eip6963Provider))) {
    return eip6963Provider;
  }

  return null;
}

*If you are using typescript, you might want to install the package: @metamask/providers

2. Install the XRP Ledger Snap

Once you have connected to MetaMask and obtained the provider, you can proceed to install the XRP Ledger Snap. To install the XRP Ledger Snap call the wallet_requestSnaps method with the npm package of the XRP Ledger Snap: npm:@peersyst/xrpl-snap.

provider.request({
    method: 'wallet_requestSnaps',
    params: {
        ['npm:xrpl-snap']: {},
    },
})

3. Interact with the XRP Ledger Snap

Once the XRP Ledger Snap is installed, you can interact with the XRP Ledger directly from your DApp.

After installation, use the XRP Ledger Snap's API to interact with the XRP Ledger. Below is an example of how to fetch the balance of the connected account.

provider.request({
  method: 'wallet_invokeSnap',
  params: {
    snapId: 'npm:xrpl-snap',
    request: {
      method: 'xrpl_request',
      params: { 
          command: 'account_info', 
          account: 'rBSG8TXQ6nYw1ihh11wRVibnSZP1SeMx7w' // Add your account here
      },
    },
  },
});

To know more about the API of the Snap visit the API reference page

API Reference