Highlander •

Turning Onrampers Widget into a Dapp with the KeepKey-SDK

Name: KeepKey Hardware Wallet
Brand: KeepKey
Availability: InStock
Rating: 4.5 (250 reviews)

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:

Building a simple web application that embeds onrampers widget
Integrating the widget with KeepKeys SDK
Deploying the dapp to Vercel
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

onStart()

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>
);