Next JS / React

Initialise a new Next JS application with Typescript and Tailwind CSS. You can read more on how to do that on the official Next JS website.

Or

Clone the starter template from github below:

git clone https://github.com/oneramp/offramp-next-dapp.git

Install all the required dependencies using:

npm install

This will install all the necessary packages including oneramp.

Or you can manually install it using:

npm install @oneramp/sdk

Now you can run the project using:

npm run dev

Initializing the package

Let's first set up the essentials. Import the necessary modules, including oneramp and various libraries. The useConnect hook is imported from a custom file called 'useConnect,' which handles wallet connections.

// pages/offramp.js
import React, { useState } from 'react';
import { ethers } from 'ethers';
import { RotatingSquare } from 'react-loader-spinner';
import useConnect from '../hooks/useConnect';
import { OneRamp } from '@oneramp/sdk';

const clientPub = 'YOUR_CLIENT_PUBLIC_KEY';
const secretKey = 'YOUR_SECRET_KEY';

Initialize several state variables using useState to keep track of loading indicators, error messages, blockchain explorer links, and user input, including the amount and phone number.

Additionally, declare two constants, clientPub and secretKey, which should be replaced with your OneRamp client credentials.

 const handleSubmit = async () => {
    setLoading(true);

    try {
      if (!amount || !phone) {
        alert('You need to fill in all fields');
        return;
      }

When a user clicks the "Off Ramp" button, the handleSubmit function is triggered. It sets the loading state to indicate that an action is in progress.

Next, it checks if the user has entered values for both the amount and phone number fields. If either field is empty, an alert is displayed, informing the user to fill in all the required fields, and the function exits.

 const { ethereum } = window;
 const provider = new ethers.BrowserProvider(ethereum);
 await provider.send('eth_requestAccounts', []);
 const signer = await provider.getSigner();

 const oneramp = new OneRamp('mumbai', clientPub, secretKey, provider, signer);

This section of handleSubmit, we connect to the user's Ethereum wallet, access the provider from the user's browser window and create an Ethereum provider using ethers.

After that, the code sends a request to the user's wallet to fetch their accounts, and it obtains a signer.

With these components in place, we create an instance of the OneRamp class, specifying the 'Mumbai' network, clientPub, secretKey, the provider, and the signer.

const result = await oneramp.offramp('usdt', Number(amount), phone.toString());

      if (result.success) {
        setLoading(false);
        setExplorer(`https://alfajores.celoscan.io/tx/${result.response.txHash}`);
        setAmount('');
        setPhone('');
      } else {
        setLoading(false);
        setError('Failed to make the transaction');
      }
    } catch (error) {
      console.error(error);
      setLoading(false);
      setError(error);
    }
  };

In the final part, the code initiates an off-ramp transaction using the offramp method provided by the OneRamp instance. If the transaction is successful, the UI is updated with the transaction details, and the input fields are cleared.

However, if there's an error, it is logged, the loading state is updated, and an error message is displayed.