Invoice Dashboard

A dashboard for viewing and paying invoices in Request Network

Screenshot of @requestnetwork/invoice-dashboard 0.3.0

🕹️ Try it out

▶️ Demo Video

🏗️ Integration Video

📦 View on NPM

ℹ️ View Source

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 Request	✅
rnf_invoice format 0.3.0	✅
Configure Logo and Colors	✅
Minimal Chains and Currencies	✅
Custom currency list	✅

Chains and Currencies

Chain	Currencies
Ethereum	USDC, USDT, DAI, AXS, AUDIO, RAI, SYLO, LDO, UST, MNT, MIR, INJ, OCEAN, ANKR, RLY, REQ, ETH
Polygon	USDC, USDT, DAI, MATIC
Sepolia	FAU, ETH, USDT, USDC
BNB Smart Chain	DAI, BUSD
Gnosis	USDC
Avalanche	USDC, USDT, AVAX
Optimism	USDC, USDT, DAI, ETH
Moonbeam	USDC (multichain), USDC (wormhole)
Fantom	FTM
Mantle	MNT
zkSync Era	ETH
Base	ETH

Installation

To install the component, use npm:

npm install @requestnetwork/invoice-dashboard

Usage

The Invoice Dashboard component is only compatible with Web3 Onboard because it takes a WalletState as a prop. Future iterations will allow for other wallet connectors. For status, see invoicing-template #31

Usage in React and Next.js

Follow the instructions below to add the Invoice Dashboard to a React or Next.js app.

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.

Supporting files

• initializeRN.ts - Initialize the RequestNetwork object using an Ethers Signer or Viem WalletClient.

• 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.

• currencies.ts - A list of custom currencies to extend the default currency list.

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	RequestNetwork	The RequestNetwork instance
wallet	WalletState	Web3Onboard WalletState
currencies	Currency[]	A list of custom currencies