@perawallet/onramp

Pera Onramp lets users top up in just a few clicks, offering the best rates for ALGO and stablecoins. Easily integrate it into your dApp with JavaScript SDK.

Quick Start

Start by installing @perawallet/onramp

npm install --save @perawallet/onramp

Create a PeraOnramp instance

import {PeraOnramp} from "@perawallet/onramp";

const peraOnramp = new PeraOnramp();

Tie it to a user action, and start the flow

peraOnramp
  .addFunds({
    accountAddress // A valid Algorand account address
  })
  .then(() => {
    // Successfully added funds
  })
  .catch(() => {
    // Failed to add funds
  });

Options

option	default	value
optInEnabled	false	boolean	optional
availableAssets	["ALGO", "USDC-A", "USDT-A"]	["ALGO", "USDC-A", "USDT-A"]	optional

Opt-in Flow

To be able to add funds to an Algorand account, the account needs to be opted-into to related asset (Except for Algo). Some users may not be opted in to USDC or USDT, in that case Pera Onramp also allows you to control your in-app opt-in flow by a simple configuration.

While creating a PeraOnramp instance, you can enable the opt-in functionality.

const peraOnramp = new PeraOnramp({
  // Enables the Opt-in flow
  optInEnabled: true
});

As a result of that configuration, users will be able to select the related asset they haven't opted-in to. The select action will fire an event that you can listen to it with peraOnramp.on()

peraOnramp.on({
  OPT_IN_REQUEST: ({accountAddress, assetID}) => {
    // You can close the modal, and reopen after opt-in done
    peraOnramp.close();

    // Create opt-in transactions, and send to wallet to sign
    console.log(accountAddress, assetID);
  }
});

Events

Besides the main addFunds promise, on method allows to subscribe couple of optional events.

event	type
OPT_IN_REQUEST	void	Once the users selects a non opted-in asset
ADD_FUNDS_COMPLETED	void	Funds added successfully
ADD_FUNDS_FAILED	void	Funds couldn't be added

peraOnramp.on({
  OPT_IN_REQUEST: ({accountAddress, assetID}) => {
    // You can close the modal, and reopen after opt-in done
    peraOnramp.close();

    // Create opt-in transactions, and send to wallet to sign
    console.log(accountAddress, assetID);
  },
  ADD_FUNDS_COMPLETED: () => {
    // You may display a toast
  },
  ADD_FUNDS_FAILED: () => {
    // You may display a toast
  }
});

Methods

`PeraOnramp.addFunds({ accountAddress }: AddFundsParams): Promise<PeraOnrampListenerPromiseResolve>`

Starts the fund adding flow.

`PeraOnramp.on(callbacks: Callbacks): void`

Sets a listener for specific events and runs a callback.

`PeraOnramp.close(): void`

Closes the fund adding flow, and rejects the peraOnramp.addFunds promise if exists.

Contributing

All contributions are welcomed! To get more information about the details, please read the contribution guide first.

@perawallet/onramp