The Invoice Dashboard component allows end-users to view and pay an invoice in Request Network. It is built using [Svelte](https://svelte.dev/) but compiled to a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), making it usable in any web environment, regardless of the framework.
## Installation
To install the component, use npm:
```bash
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**](https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/pages/index.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="" %}
#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/wagmiConfig.ts)
#### The web component supports any wallet connector module built on top of [wagmi](https://wagmi.sh/). This provides the flexibility to use any wagmi-compatible wallet connector, such as [RainbowKit](https://www.rainbowkit.com/docs/introduction#industry-standards).
{% @github-files/github-code-block url="" %}
#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/initializeRN.ts)
Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.
{% @github-files/github-code-block url="" %}
#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/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="" %}
#### [context.tsx](https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/context.tsx)
Use a context provider to reinitialize the Request Network instance when the wallet changes.
{% @github-files/github-code-block url="" %}
#### [currencies.ts](https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/utils/currencies.ts)
A list of custom currencies to extend the default currency list.
{% @github-files/github-code-block url="" %}
#### [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/01e44755b274d17c0718ca03f077d68a9fe8baec/types.d.ts)
Specify types to avoid TypeScript errors.
{% @github-files/github-code-block url="" %}
## 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](/advanced/request-network-sdk/sdk-api-reference/request-client.js/requestnetwork.md) | The RequestNetwork instance |
| wagmiConfig | WagmiConfig | Wallet connector config |
| currencies | Currency\[] | A list of custom currencies |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://legacy.docs.request.network/advanced/request-network-sdk/sdk-demo-apps/components/invoice-dashboard.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.