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

Feature

Status

Chains and Currencies

Chain

Currencies

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.

Disable swcMinify in next.config.mjs

To use the Invoice Dashboard in NextJS 14.x, you must set swcMinify: false in your next.config.mjs file. Without it, the Invoice Dashboard won't render.

https://github.com/RequestNetwork/invoicing-template/blob/main/next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
	reactStrictMode: true,
	swcMinify: false,
};

export default nextConfig;

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.

To use the Invoice Dashboard in a React application, you must dynamically import @requestnetwork/invoice-dashboard and use the component in your JSX file.

import("@requestnetwork/invoice-dashboard");

https://github.com/RequestNetwork/invoicing-template/blob/main/pages/index.tsx

import("@requestnetwork/invoice-dashboard");
import Head from "next/head";
import { useEffect, useRef } from "react";
import { config } from "@/utils/config";
import { useAppContext } from "@/utils/context";
import { InvoiceDashboardProps } from "@/types";
import { useConnectWallet } from "@web3-onboard/react";
import { currencies } from "@/utils/currencies";

export default function InvoiceDashboard() {
  const [{ wallet }] = useConnectWallet();
  const { requestNetwork } = useAppContext();
  const dashboardRef = useRef<InvoiceDashboardProps>(null);

  useEffect(() => {
    if (dashboardRef.current) {
      dashboardRef.current.config = config;

      if (wallet && requestNetwork) {
        dashboardRef.current.wallet = wallet;
        dashboardRef.current.requestNetwork = requestNetwork;
        dashboardRef.current.currencies = currencies;
      }
    }
  }, [wallet, requestNetwork]);

  return (
    <>
      <Head>
        <title>Request Invoicing</title>
      </Head>
      <div className="container m-auto  w-[100%]">
        <invoice-dashboard ref={dashboardRef} />
      </div>
    </>
  );
}

Supporting files

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

https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts

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
              : chain === "avalanche"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_AVALANCHE
              : chain === "base"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_BASE
              : chain === "bsc"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_BSC
              : chain === "celo"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_CELO
              : chain === "core"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_CORE
              : chain === "fantom"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_FANTOM
              : chain === "fuse"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_FUSE
              : chain === "mainnet"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MAINNET
              : chain === "matic"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MATIC
              : chain === "moonbeam"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_MOONBEAM
              : chain === "near"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_NEAR
              : chain === "near-testnet"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_NEAR_TESTNET
              : chain === "optimism"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_OPTIMISM
              : chain === "ronin"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_RONIN
              : chain === "sepolia"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_SEPOLIA
              : chain === "tombchain"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_TOMBCHAIN
              : chain === "xdai"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_XDAI
              : chain === "zksyncera"
              ? process.env.NEXT_PUBLIC_PAYMENTS_SUBGRAPH_URL_ZKSYNCERA
              : 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);
  }
};

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.

https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts

import { IConfig } from "./types";

export const config: IConfig = {
  builderId: "request-network", // Replace with your builder ID, arbitrarily chosen, used to identify your app
  dashboardLink: "/",
  logo: "/assets/logo-sm.svg",
  colors: {
    main: "#0BB489",
    secondary: "#58E1A5",
  },
};

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.

Props

Prop

Type

Description

PreviousCreate Invoice Form NextAdd Stakeholder

Last updated 15 days ago