# Cross-chain Token Purchase

In this example, we will take a look at a simple project which can be found here: [**GitHub**](https://github.com/xswap-link/Cross-Chain-Token-Purchase)

<figure><img src="/files/LrRdfQff9EgCu1JwH62G" alt=""><figcaption><p>Cross-chain Token Purchase</p></figcaption></figure>

## Overview

This application is extremely simple, to demonstrate how easy it is to integrate XPay. Assuming that the Dapp already has integration with the web3 wallet provider we will focus more on the XPay. For this example, the application is using RainboKit to connect the wallet. In the next section let's take a look at the XPay integration.

<figure><img src="/files/awvE2MRmXJlIxWM9zipn" alt=""><figcaption><p>Cross-chain Token Purchase Demo</p></figcaption></figure>

## Quick Start

To run the demo locally clone the repository, create a `.env` file by coping the `.env.sample`, and set the variables `VITE_INTEGRATOR_ID` (the framework requires the prefix VITE\_). If you don't have an integrator Id please [**Apply Here**](https://forms.gle/Y6kh19Bghtayt6FZ7)**.**

&#x20;Then using the npm package manager run the following command

```
npm install
```

After installing the dependencies start the dev server

```
npm run dev
```

## XPay Integration

In this demo, we use just one function from XPay, `openTransactionModal``.`

### openTransactionModal

Here is the function call from the project

```typescript
const transactions = await openTransactionModal({
  integratorId, // integrator Id from .env
  dstChain: "8453", // Base
  dstToken: "0x8fe815417913a93ea99049fc0718ee1647a2a07c", // XSWAP Token
});
```

Here we defined the `chain` and `token` that users will be able to buy as well as the `integratorId`. This function opens a modal for the user where they will be able to select the source chain and token for the transaction.&#x20;

Once the user approves the swap form, the modal will move to the execution view. The transactions contain optional approve and swap transactions which need to be signed by the user.&#x20;

After the swap transaction was confirmed on the source blockchain the cross-chain swap is in motion and we can monitor the transaction progress. Once the transaction is being delivered a notification will appear in the corner of the browser.

After the cross-chain message is delivered and executed the notification will change to green and disappear.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xswap.link/xswap/xpay/usage-examples/cross-chain-token-purchase.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.