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

FeatureStatus

ERC20 Request

Configure Logo and Colors

Minimal Chains and Currencies

Custom currency list

Chains and Currencies

ChainCurrencies

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

PropTypeDescription

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

currencies

Currency[]

A list of custom currencies

Last updated