# 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](https://metamask.io/).
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.

{% embed url="<https://docs.metamask.io/wallet/how-to/connect/>" %}

3. **Verify that your provider has&#x20;*****snaps*****&#x20;support**

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

Example:

{% embed url="<https://github.com/MetaMask/template-snap-monorepo/blob/main/packages/site/src/utils/metamask.ts>" %}

<details>

<summary>Full code from the site in the MetaMask Snap monorepo </summary>

```typescript
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;
}
```

</details>

<mark style="color:red;">\*</mark>If you are using typescript, you might want to install the package: `@metamask/providers`&#x20;

### **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`.

```javascript
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.&#x20;

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.

```javascript
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

{% content-ref url="publish-your-docs" %}
[publish-your-docs](https://snap-docs.xrplevm.org/development/publish-your-docs)
{% endcontent-ref %}