Turning Onrampers Widget into a Dapp with the KeepKey-SDK

Deploying onboarding to keepkey desktop users in minutes

(TL:DR) view the code: https://github.com/BitHighlander/onramper-dapp

Technologies used

onramper: https://www.onramper.com/

keepkey-sdk: https://www.npmjs.com/package/@keepkey/keepkey-sdk

KeepKey Desktop: https://keepkey.com/get-started

KeepKey Template: https://github.com/BitHighlander/keepkey-template

This tutorial will cover:

1. Building a simple web application that embeds onrampers widget
2. Integrating the widget with KeepKeys SDK
3. Deploying the dapp to Vercel
4. Listing the Dapp in Keepkeys Dapp store

Step one

First we use the KeepKey template and deploy a sample dapp

Next we open the project in our IDE

Now we rename the dapp in the package.json file

Share the project to GitHub: https://github.com/BitHighlander/onramper-dapp

Step 2. Write the code:

You can view onrampers docs here: https://docs.onramper.com/docs/parameter-wallet

We use the pubkey page from the template that uses

and grabs the addresses from the KeepKey API

Next we write in the pubkeys to set state vars needed by the onboard widget

// get BTC address
// Unsigned TX
const addressInfo = {
  addressNList: [2147483732, 2147483648, 2147483648, 0, 0],
  coin: "Bitcoin",
  scriptType: "p2wpkh",
  showDisplay: false,
};

const responseBtc = await sdk.address.utxoGetAddress({
  address_n: addressInfo.addressNList,
  script_type: addressInfo.scriptType,
  coin: addressInfo.coin,
});
// eslint-disable-next-line no-console
console.log("responseBtc: ", responseBtc);

// get LTC address

// get OSMO address
const pubkeysNew =
  `ETH:${responseEth.address},` + `BTC:${responseBtc.address}`;
const urlOnramper = `https://buy.onramper.com?apiKey=pk_prod_OQ4CJ7wEyjVocOy3ibd45TUceLIlZHQlpugRV86g6SY0&wallets=${pubkeysNew}`;
// eslint-disable-next-line no-console
console.log("urlOnramper: ", urlOnramper);
setURL(urlOnramper);

And we wire in the widget the page itself

return (
  <Grid textAlign="center" gap={2}>
    <iframe
      src={url}
      height="540px"
      width="360px"
      title="Onramper widget"
      allow="accelerometer; autoplay; camera; gyroscope; payment"
    />
  </Grid>
);

And we are done!

Now we publish the app to Vercel.

For more detailed instructions view this tutorial.

Step 3. Deploy to Pioneer

For more info follow this tutorial: here

And the dapp is submitted!

And it is live in the Desktop Application!

And ready for users to use!

Do you have a widget or service you would like to see in the KeepKey Dapp store? Tweet us here.

https://twitter.com/KeepKeyDevs

(or add it yourself with this tutorial!)

undefined