3.0 Widget
The R3VL Widget is the quickest way to integrate the Reveel Protocol into your application natively.
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.
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
}}
/>
)
}
Here a live example of how to implement the R3VL Widget as a Web Component in a VanillaJS project
The R3VL Widget closely mimics the UI and functionality of our web application.
%200.23.20.png?alt=media&token=9880aab7-5387-4f93-8e8c-4cabae0886bc)
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 {}
- 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)} />
Last modified 3mo ago