Skip to main content

Fund user wallets

Sections

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 20 or later
Immutable's Typescript SDK requires **Node v20** (Active LTS version) or **higher**. Node v20 can be installed via `nvm`.

To install nvm follow these instructions. Once installed, run:

nvm install --lts
  • (Optional) To enable Code Splitting (importing only the SDK modules you need) there are additional prerequisites.

Install the Immutable SDK​

Run the following command in your project root directory.

npm install -D @imtbl/sdk
# if necessary, install dependencies
npm install -D typescript ts-node
Troubleshooting

The Immutable SDK is still in early development. If experiencing complications, 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

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 { useEffect } from 'react';
import { checkout } from '@imtbl/sdk';

// create Checkout SDK
const checkoutSDK = new checkout.Checkout();

export function App() {
  // create Checkout SDK

  // Initialise widgets, create bridge widget and mount
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });
      const bridge = widgets.create(checkout.WidgetType.BRIDGE);
      bridge.mount('bridge');
    })();
  }, []);

  return <div id="bridge" />;
}

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 { useEffect } from 'react';
import { checkout } from '@imtbl/sdk';

// create Checkout SDK
const checkoutSDK = new checkout.Checkout();

export function App() {
  // Initialise widgets, create swap widget and mount
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });
      const swap = widgets.create(checkout.WidgetType.SWAP)
      swap.mount("swap");
    })();
  }, []);

  return (<div id="swap" />);
}

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 { useEffect } from 'react';
import { checkout } from '@imtbl/sdk';

// create Checkout SDK
const checkoutSDK = new checkout.Checkout();

export function App() {
    // Initialise widgets, create onramp widget and mount
    useEffect(() => {
        (async () => {
            const widgets = await checkoutSDK.widgets({
                config: { theme: checkout.WidgetTheme.DARK },
            });
            const onramp = widgets.create(checkout.WidgetType.ONRAMP)
            onramp.mount("onramp");
        })();
    }, [checkout]);

    return (<div id="onramp" />);
}

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