Swap widget: Embed & customize

Keeper Swap Widget provides users of your website with a handy tool for exchanging tokens of the Waves ecosystem at the best price. The widget displays all exchange options and suggests the most profitable one in real time. Check the Demos!

By default, the widget uses built-in Signer to connect a user wallet: Keeper, WX Network, or Ledger. However, if Signer is already implemented on your website, you can pass the Signer object and the user address to the widget so the user don't have to log in twice.

What’s more, you can become our partner and receive a portion of fee from each exchange made in Keeper Swap Widget embedded in your website.

• Earn with Keeper Swap Widget

• How to embed widget

• Demos

• Widget settings

• Functions

Earn with Keeper Swap Widget

Keeper Swap Widget charges a fee for each exchange: 0.1% of the output amount. You can get a significant part of that fee. At the start, we pay 50% of fees to our partners!

How to become a partner:

1. Fill out the form to get your referral key.

2. Embed the widget on your website and specify the key as a referrer option when creating your widget, like this:

    KeeperSwapWidget.create(/* element */, {
      referrer: 'YOUR KEY',
      // other widget settings like toAssetIds, theme etc.
    });

3. Enjoy your income!

How to embed widget

1. Add the script to your site:

   <script src="https://swap-widget.keeper-wallet.app/lib/swap-widget.umd.js"></script>

2. Set up the widget:

    KeeperSwapWidget.create(/* element */, {
      /* widget settings */
    });

   For more examples, check out Demos section below.

3. The widget is ready to use!

Demos

Please note that connecting ledger will not work in these demos, because usb access is disallowed on codepen.

• Default layout

• Dark theme

• Initial asset pair

• Assets to swap to

• One asset to swap to

• Signer and address passed

Widget settings

• referrer: your referral key to get a part of fees

• theme: 'dark' theme (light one is default)

• initialFromAssetId, initialToAssetId: asset pair chosen by default

• toAssetIds: list of assets allowed to swap to: for example, you can allow users to buy the token of your project only

• useInternalSigner: false: specify the setting and call setWallet() function described below to use Signer implemented on your website instead of widget's built-in Signer. Here's the demo

Example:

KeeperSwapWidget.create(/* element */, {
   referrer: 'YOUR KEY',
   theme: 'dark',
   initialFromAssetId: '34N9YcEETLWn93qYQ64EsP1x89tSruJU44RrEMSXXEPJ',
   initialToAssetId: '8LQW8f7P5d5PZM7GtZEBgaqRPGSzS3DfPuiXrURJ4AJS',
   toAssetIds: [
      'C1iWsKGqLwjHUndiQ7iXpdmPum9PeCDFfyXBdJJosDRS',
      '8LQW8f7P5d5PZM7GtZEBgaqRPGSzS3DfPuiXrURJ4AJS',
      'D4TPjtzpsDEJFS1pUAkvh1tJJJMNWGcSrds9sveBoQka',
   ],
   useInternalSigner: false,
});

Widget functions

• setWallet()

  Use it to pass a user wallet to Keeper Swap Widget if Signer is implemented on your website.

  Connect the user wallet:

  const signer = new window.signer.Signer();
  signer.setProvider(/* ... */);
  
  const widget = KeeperSwapWidget.create(/* ... */);
  
  widget.setWallet({
    address,
    signer,
  });

  Disconnect the user wallet:

  widget.setWallet(null);

• destroy() is needed to remove the widget if it's no longer needed:

  widget.destroy();