Skip to main content

Fund user wallets

Contents

Funding methods​

In order for users to fully participate in a game economy, such as by purchasing items, paying for transactions or trading with other users, they need to have the game's native currency, or other game-accepted currencies, in the wallets they have connected to the game. We have developed easy to use widgets that are designed to facilitate this process.

WidgetUse case
BridgeThe Bridge widget is ideal for users who have funds on L1 (e.g. Ethereum) and are looking to move some of the funds to zkEVM.

💡Example
An item is sold on zkEVM for 0.2 USDC and I have 3 USDC in my L1 wallet that I'd love to use for purchasing the item. I can use the Bridge widget to move my L1 USDC tokens to L2 and complete the purchase.
SwapThe Swap widget is ideal for users who have funds on zkEVM and are looking to swap tokens (e.g. USDC for IMX).

💡Example
An item is sold on zkEVM for 0.2 USDC and I already have 4 ETH in my zkEVM wallet that I'd love to use for purchasing the item. I can use the Swap widget to swap my ETH tokens for USDC tokens and complete the purchase.
On‑rampThe On-ramp widget is idea for users who want to funds their zkEVM wallets using fiat (e.g. EUR).

💡Example
An item is sold on zkEVM for 0.2 USDC and I do not have any funds on zkEVM on L1 (e.g. Ethereum). I can use the On-ramp widget to purchase USDC tokens using my Credit Card/Apple Pay/Google Pay and complete the purchase.

Setup​

note

The widgets are designed to be used client-side only and can be installed via CDN or package manager.

Prerequisites​

Node version

The Immutable SDK requires Node v18 (Active LTS version) or higher. Node v18 can be installed via nvm which allows to quickly install and use different versions of node via the command line.

The installation steps for nvm for Linux, Mac, and Windows Install & Update Script. You are now ready to install the Node LTS version:

nvm install --lts

Install the Immutable SDK​

Run the following command in your project root directory.

npm install -D @imtbl/sdk
Troubleshooting

The Immutable SDK is still in early development. Should complications arise during the installation, please use the following commands to ensure the most recent release of the SDK is correctly installed:

rm -Rf node_modules
npm cache clean --force
npm i

Dependencies​

npm install -D typescript ts-node

Initialisation​

Checkout widgets are designed to be used on client-side only. The window and document object are required.

// Import the checkoutWidgets module from the Immutable SDK package
import { checkoutWidgets } from '@imtbl/sdk';

// Load the Checkout Widgets with the default configurations
checkoutWidgets.CheckoutWidgets();

Versioning​

The Checkout Widgets follow the Semantic Versioning as per the Immutable SDK package.

To use a version different than the one loaded as part of the NPM package.

// Import the checkoutWidgets module from the Immutable SDK package
import { checkoutWidgets } from '@imtbl/sdk';

// Load the Checkout Widgets bundle version 1.2.3
checkoutWidgets.CheckoutWidgets({
  // ... other configurations
  // @ts-ignore
  version: {
    major: 1,
    minor: 2,
    patch: 3,
  },
});

Further details on the versioning property can be found in the Immutable SDK documentation.

After the Immutable Checkout module has been initialised (ref:

CheckoutWidgets
), the SDK automatically downloads the latest version of the widgets library. This step should be performed as soon as possible, in the lifecyle of your application, in order to ensure that the widgets will be immediately available.

Bundle loading​

The Checkout Widgets are built and released with every new Immutable SDK release following the Immutable SDK versioning. However, minor patches are automatically applied to ensure continued and seamless improvements to the product for our partners, thanks to the ability of our SDKs to load the widgets bundle independently by the NPM package version via the

CheckoutWidgets
function.

Therefore, as soon as the function

CheckoutWidgets
is called. The latest minor version of the Checkout Widgets bundle is fetched from https://cdn.jsdelivr.net.

note

Only minor and patch versions are seamlessly applied to prevent disruptions in the partner application.


Bridge​

Bridges facilitate communication between blockchains through the transfer of information and assets. The sample code code below gives a starting point for integrating the widget into your application.

💡Test ETH
Obtain test ETH from the Sepolia Faucet to test the Bridge widget.

bridge widgetbridge widget
// Import the checkoutWidgets module from the Immutable SDK package
import { checkoutWidgets } from '@imtbl/sdk';

// Add the Bridge component to your web application
<checkoutWidgets.BridgeReact />;

To learn more about this widget explore the Bridge Widget documentation.


Swap​

A token swap refers to exchanging one cryptocurrency token directly for another without using fiat money (e.g. USD). The sample code code below gives a starting point for integrating the widget into your application.

💡Test-IMX
Obtain Test-IMX from the Immutable Faucet to test the Swap widget.

swap widgetswap widget
// Import the checkoutWidgets module from the Immutable SDK package
import { checkoutWidgets } from '@imtbl/sdk';

// Add the Swap component to your web application
<checkoutWidgets.SwapReact />;

To learn more about this widget explore the Swap Widget documentation.


On-ramp​

On-ramping tokens refers to exchanging fiat currency (e.g. USD) directly to buy cryptocurrency. The sample code code below gives a starting point for integrating the widget into your application.

onramp widgetonramp widget
// Import the checkoutWidgets module from the Immutable SDK package
import { checkoutWidgets } from '@imtbl/sdk';

// Add the On-ramp component to your web application
<checkoutWidgets.OnRampReact />;

To learn more about this widget explore the On-ramp Widget documentation.