Skip to main content

Invoke Wallets

At present, there are two kinds of wallets that are compatible with 4swap/Lake:

  • Mixin Messenger: A mobile wallet that is created by Mixin core team.
  • Fennec: A browser extension wallet created by Fox.ONE team.

If you are going to provide a web interface that supports any of these wallets, you need to integrate your web app with the wallets and invoke them to pay at the desired time.

Invoke Messenger#

To invoke the payment interface of Mixin Messenger is pretty simple:

At first, you need to get the code_url or code which indicates a multisig transfer need to confirm.

There are two ways to get it:

  1. Follow the API "/api/actions" to create a swap action
  2. Call the API https://api.mixin.one/payments to get a payment object which contains code_id
  3. Generate a transaction at your own backend and pass the code/code_url to the frontend.

Here I will show you the first ways:

Way 1#

const BTC_ASSET_ID = 'c6d0c728-2624-429b-8e0d-d9d19b6592fa';const ETH_ASSET_ID = '43d61dcd-e413-450d-80b8-101d5e903357';
async function pay() {  const follow_id = uuid.v4();
  // construct the memo  const memo = `3,${YOUR_USER_ID},${follow_id},${ETH_ASSET_ID},${''},${'0.0001'}`;
  // create action to swap from BTC to ETH  const resp = await http.post(`/actions`, {    data: {      action: memo,      amount: "0.0001",      asset_id: BTC_ASSET_ID,      // or leave broker_id empty      broker_id: '5dbdb169-d56d-4b5b-b066-9b0780691b14',    }  });
  // if your web app is running in Messenger's webview  // it will invoke the payment UI  window.location.href = `https://mixin.one/codes/${resp.code}`;
  // if your web also support to visit on desktop  // you may need to show the QrCode to the users like this:  // const qrCode = generateQrCode(`https://mixin.one/codes/${resp.coded}`)  // showQrCodeDialog();}

Way 2#

const BTC_ASSET_ID = 'c6d0c728-2624-429b-8e0d-d9d19b6592fa';const ETH_ASSET_ID = '43d61dcd-e413-450d-80b8-101d5e903357';
async function pay() {  const follow_id = uuid.v4();
  // construct the memo  const memo = `3,${YOUR_USER_ID},${follow_id},${ETH_ASSET_ID},${''},${'0.0001'}`;
  // create action to swap from BTC to ETH  const resp = await http.post(`https://api.mixin.one/payments`, {    data: {      BTC_ASSET_ID,      '0.0001',      memo,      trace_id: follow_id,      // read receivers and threshold from API `/api/information`      opponent_multisig: { receivers, threshold },    }  });
  // if your web app is running in Messenger's webview  // it will invoke the payment UI  window.location.href = resp.data.code_url;
  // if your web also support to visit on desktop  // you may need to show the QrCode to the users like this:  // const qrCode = generateQrCode(`https://mixin.one/codes/${resp.coded}`)  // showQrCodeDialog();}

Invoke Fennec#

Fennec is browser extension wallet, which stores encrypted keystores in the browser.

You don't need to call Mixin API to load assets, read profile or prepare a payment. Instead, Fennec provides its own API to do them all.

For more information, please read the demo's source code to figure out.

// fennec extlet ext = null;// fennec contextlet ctx = null;// tokenlet token = null;
async function load() {  // check the ext and get the context  if (window.__MIXIN__ && window.__MIXIN__.mixin_ext) {    ext = window.__MIXIN__.mixin_ext;    ctx = await ext.enable("demo");    if (ctx) {      token = await ctx.wallet.signToken({        payload: { from: "demo" }      });    }  }}
const BTC_ASSET_ID = 'c6d0c728-2624-429b-8e0d-d9d19b6592fa';const ETH_ASSET_ID = '43d61dcd-e413-450d-80b8-101d5e903357';
function pay() {  const follow_id = uuid.v4();
  // construct the memo  const memo = `3,${YOUR_USER_ID},${follow_id},${ETH_ASSET_ID},${''},${'0.0001'}`;
  // create action to swap from BTC to ETH  const resp = await http.post(`/actions`, {    data: {      action: memo,      amount: "0.0001",      asset_id: BTC_ASSET_ID,      // or leave broker_id empty      broker_id: '5dbdb169-d56d-4b5b-b066-9b0780691b14',    }  });
  ctx.wallet.multisigsPayment({ code: resp.code });}
Last updated on