invoice-dashboard.md

description	A dashboard for viewing and paying invoices in Request Network

Invoice Dashboard

Screenshot of @requestnetwork/invoice-dashboard 0.3.0

	🕹️ Try it out		https://invoicing.request.network
	▶️ Demo Video		#request-invoicing-demo-video
	🏗️ Integration Video		#request-invoicing-integration-video
	📦 View on NPM		https://www.npmjs.com/package/@requestnetwork/invoice-dashboard
	ℹ️ View Source		https://github.com/RequestNetwork/web-components/tree/main/packages/invoice-dashboard

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.

Installation

To install the component, use npm:

npm install @requestnetwork/invoice-dashboard

Usage

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.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/pages/index.tsx" %}

wagmiConfig.ts

The web component supports any wallet connector module built on top of wagmi. This provides the flexibility to use any wagmi-compatible wallet connector, such as RainbowKit.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/wagmiConfig.ts" %}

initializeRN.ts

Initialize the RequestNetwork object using an Ethers Signer or Viem WalletClient.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/initializeRN.ts" %}

config.ts

Use the config object to pass additional configuration options. Please replace the builderId with your own, arbitrarily chosen ID. This is used to track how many invoices your application creates.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/config.ts" %}

context.tsx

Use a context provider to reinitialize the Request Network instance when the wallet changes.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/context.tsx" %}

currencies.ts

A list of custom currencies to extend the default currency list.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/currencies.ts" %}

types.d.ts

Specify types to avoid TypeScript errors.

{% @github-files/github-code-block url="https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/types.d.ts" %}

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
wagmiConfig	WagmiConfig	Wallet connector config
currencies	Currency[]	A list of custom currencies