3.0 Widget

The R3VL Widget is the quickest way to integrate the Reveel Protocol into your application natively.

Overview

The R3VL Widget is built with ReactJS but can be implemented as a Web Component thanks to the react-to-webcomponent library.

No matter which implementation or JS framework you are working with (Angular, Vue or just VanillaJS), this widget can be easily implemented with a simple HTML custom tag.

View live demo of the R3VL Widget.

Integrating the widget into your frontend

Add the package to your frontend app:

yarn add @r3vl/widget

--------- or ---------

npm install @r3vl/widget

This library can be used agnostically as a Web Compnent, but still uses ReactJS & React Dom libraries under the hood. Installing both is a requirement in order for the widget to function properly.

yarn add react react-dom

Then run this instruction anywhere in your code

import React from "react";
import * as ReactDOM from "react-dom/client";

import { registerPocComponentElement } from "@r3vl/widget";
import "@r3vl/widget/dist/style.css";

registerPocComponentElement(React, ReactDom);

For ReactJS/NextJS projects, it is required to pass React library as a property to the component:

import React from "react";

const Main = () => {
  return <R3vlWidget reactLibrary={React} />
}

For ReactJS projects, it is possible to use a custom provider so that users don't have to connect their wallet for a second time.

import React from "react";

const Main = () => {
  const provider = useProvider()

  return (
    <R3vlWidget 
      reactLibrary={React}
      customClient={{
        chainId: 1,
        provider,
        signer
      }}
    />
  )
}

You can interact with the widget in the R3vl public storybook link.

Here a live example of how to implement the R3VL Widget as a Web Component in a VanillaJS project

Using the Widget

The R3VL Widget closely mimics the UI and functionality of our web application.

Custom Styling (CSS)

At the moment the only way to customize the widget's look and feel is by overriding CSS rules on some classes defined for this specific purpose:

.r3vl-widget-wrapper { /* HTML element that wraps the entire widget functionality */ }
.r3vl-widget-tierWrapper {}
.r3vl-widget-btn {}
.r3vl-widget-inputText {}
.r3vl-widget-toggleSwitch {}
.r3vl-widget-dropdownItem {}
.error {}

NOTES:

• A project id is required for WalletConnect support, and can be set as a html/reactJS property:

  <R3vlWidget walletConnectProjectId="xxx" />

• Use one of the following two methods to access the smart contract address associated with a newly created Revenue Path

  • Listening "storage" DOM event:

    window.addEventListener("storage", () => localStorage.r3vlRevenuePathAddress)

  • For ReactJS implementation a callback function can be set as a prop:

    <R3vlWidget setRevenuePathAddress={(address: string) => log(address)} />