Invoice Dashboard
A dashboard for viewing and paying invoices in Request Network
The Invoice Dashboard component allows end-users to view and pay an invoice in Request Network. It is built using Svelte but compiled to a Web Component, making it usable in any web environment, regardless of the framework.
Features
Feature | Status |
---|---|
ERC20 Payment | ✅ |
rnf_invoice format 0.3.0 | ✅ |
Configure Logo and Colors | ✅ |
Minimal Chains and Currencies | ✅ |
Chains and Currencies
Chain | Currencies |
---|---|
Ethereum | USDC, USDT, DAI |
Polygon | USDC, USDT, DAI, USDCe |
Sepolia | USDC, FAU |
Installation
To install the component, use npm:
Usage
Usage in React
To use the Invoice Dashboard in NextJS 14.x, you must set swcMinify: false
in your next.config.mjs
file. Without it, the Invoice Dashboard won't render.
To use the Invoice Dashboard in a React application, you must dynamically import @requestnetwork/invoice-dashboard
and use the component in your JSX file.
The Invoice Dashboard component is currently only compatible with Web3 Onboard because it takes a WalletState
as a prop. Future iterations will allow for other wallet connectors.
invoice-dashboard.tsx
Configure the invoice dashboard web component by creating a reference to it, setting its properties, and passing the reference as a prop.
Passing the props directly without creating a reference to the web component should be enabled in a future release. For more details, see web-components Issue #34.
Supporting files
initializeRN.ts - Initialize the
RequestNetwork
object using an EthersSigner
or ViemWalletClient
.
config.ts - Use the config object to pass additional configuration options to the invoice dashboard component. Please replace the
builderId
with your own, arbitrarily chosen ID. This is used to track how many invoices are created by your application.
context.tsx - Use a context provider to reinitialize the Request Network instance when the wallet changes.
types.d.ts - Specify types to avoid TypeScript errors.
Props
Prop | Type | Description |
---|---|---|
config | IConfig | Additional configuration parameters |
config.builderId | string | Unique builder ID, arbitrarily chosen, used for metrics |
config.dashboardLink | string | Path to dashboard page |
config.logo | string | Path to logo file |
config.colors.main | string | Color used for primary buttons and labels |
config.colors.secondary | string | Color used for borders and accents |
requestNetwork | The RequestNetwork instance | |
wallet | WalletState | Web3Onboard WalletState |
Last updated