Cross-chain Token Purchase

This page describes the repository with an example of the cross-chain token purchase.

In this example, we will take a look at a simple project which can be found here: GitHub

Cross-chain Token Purchase

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.

Cross-chain Token Purchase Demo

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.

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

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.

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.

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.