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.

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.

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.

initializeRN.ts

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

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.

context.tsx

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

currencies.ts

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

types.d.ts

Specify types to avoid TypeScript errors.

Props

PreviousCreate Invoice Form NextPayment Widget

Last updated 9 days ago

import { bsc, celo, base, fuse, zksync, fantom, coreDao, polygon, mainnet, sepolia, arbitrum, moonbeam, optimism, avalanche, gnosis, } from "wagmi/chains"; import { http } from "wagmi"; import { coinbaseWallet, injectedWallet, ledgerWallet, metaMaskWallet, safeWallet, trustWallet, walletConnectWallet, } from "@rainbow-me/rainbowkit/wallets"; import { getDefaultConfig } from "@rainbow-me/rainbowkit"; export const rainbowKitConfig = getDefaultConfig({ appName: "Request Invoicing", projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string, chains: [ bsc, celo, base, fuse, zksync, gnosis, fantom, coreDao, polygon, mainnet, sepolia, arbitrum, moonbeam, optimism, avalanche, ], transports: { [arbitrum.id]: http( process.env.NEXT_PUBLIC_RPC_URL_ARBITRUM_ONE || "https://arbitrum.llamarpc.com" ), [avalanche.id]: http( process.env.NEXT_PUBLIC_RPC_URL_AVALANCHE || "https://avalanche.drpc.org" ), [base.id]: http( process.env.NEXT_PUBLIC_RPC_URL_BASE || "https://base.llamarpc.com" ), [bsc.id]: http( process.env.NEXT_PUBLIC_RPC_URL_BSC || "https://bsc.llamarpc.com" ), [celo.id]: http( process.env.NEXT_PUBLIC_RPC_URL_CELO || "https://forno.celo.org" ), [coreDao.id]: http( process.env.NEXT_PUBLIC_RPC_URL_CORE || "https://rpc.coredao.org" ), [fantom.id]: http( process.env.NEXT_PUBLIC_RPC_URL_FANTOM || "https://endpoints.omniatech.io/v1/fantom/mainnet/public" ), [fuse.id]: http( process.env.NEXT_PUBLIC_RPC_URL_FUSE || "https://fuse.drpc.org" ), [mainnet.id]: http( process.env.NEXT_PUBLIC_RPC_URL_ETHEREUM || "https://eth.llamarpc.com" ), [polygon.id]: http( process.env.NEXT_PUBLIC_RPC_URL_POLYGON || "https://1rpc.io/matic" ), [moonbeam.id]: http( process.env.NEXT_PUBLIC_RPC_URL_MOONBEAM || "https://moonbeam-rpc.publicnode.com" ), [optimism.id]: http( process.env.NEXT_PUBLIC_RPC_URL_OPTIMISM || "https://optimism.llamarpc.com" ), [sepolia.id]: http( process.env.NEXT_PUBLIC_RPC_URL_SEPOLIA || "https://sepolia.drpc.org" ), [gnosis.id]: http( process.env.NEXT_PUBLIC_RPC_URL_XDAI || "https://gnosis.drpc.org" ), [zksync.id]: http( process.env.NEXT_PUBLIC_RPC_URL_ZKSYNCERA || "https://mainnet.era.zksync.io" ), }, wallets: [ { groupName: "Recommended", wallets: [injectedWallet, metaMaskWallet, walletConnectWallet], }, { groupName: "Others", wallets: [safeWallet, coinbaseWallet, ledgerWallet, trustWallet], }, ], ssr: true, });

import { RequestNetwork } from "@requestnetwork/request-client.js"; import { Web3SignatureProvider } from "@requestnetwork/web3-signature"; import { getTheGraphClient } from "@requestnetwork/payment-detection"; export const initializeRequestNetwork = (setter: any, walletClient: any) => { try { const web3SignatureProvider = new Web3SignatureProvider(walletClient); const requestNetwork = new RequestNetwork({ nodeConnectionConfig: { baseURL: "https://gnosis.gateway.request.network/", }, signatureProvider: web3SignatureProvider, httpConfig: { getConfirmationMaxRetry: 120, }, paymentOptions: { getSubgraphClient: (chain: string) => { // Ternary because cannot dynamically access environment variables in the browser const paymentsSubgraphUrl = chain === "arbitrum-one" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_ARBITRUM_ONE || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-arbitrum-one/api" : chain === "avalanche" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_AVALANCHE || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-avalanche/api" : chain === "base" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_BASE || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-base/api" : chain === "bsc" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_BSC || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-bsc/api" : chain === "celo" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_CELO || "https://api.studio.thegraph.com/query/67444/request-payments-celo/version/latest" : chain === "core" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_CORE || "https://thegraph.coredao.org/subgraphs/name/requestnetwork/request-payments-core" : chain === "fantom" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_FANTOM || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-fantom/api" : chain === "fuse" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_FUSE || "https://api.studio.thegraph.com/query/67444/request-payments-fuse/version/latest" : chain === "mainnet" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MAINNET || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-mainnet/api" : chain === "matic" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MATIC || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-matic/api" : chain === "moonbeam" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MOONBEAM || "https://api.studio.thegraph.com/query/67444/request-payments-moonbeam/version/latest" : chain === "optimism" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_OPTIMISM || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-optimism/api" : chain === "sepolia" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_SEPOLIA || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-sepolia/api" : chain === "xdai" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_XDAI || "https://api.studio.thegraph.com/query/67444/request-payments-xdai/version/latest" : chain === "zksyncera" ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_ZKSYNCERA || "https://subgraph.satsuma-prod.com/e2e4905ab7c8/request-network--434873/request-payments-zksyncera/api" : undefined; if (!paymentsSubgraphUrl) { throw new Error( `Cannot get subgraph client for unknown chain: ${chain}` ); } return getTheGraphClient(chain, paymentsSubgraphUrl); }, }, }); setter(requestNetwork); } catch (error) { console.error("Failed to initialize the Request Network:", error); setter(null); } };