@requestnetwork/single-invoice

v0.1.3

Published

3 months ago

[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice.svg)](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice)

0High
0Medium
0Low

request-bot

yomarion

aimensahnoun

mantisclone-requestnetwork

rodrigopavezi-request

bassgeta-rn

Request Network Single Invoice Web Component

A web component for integrating a single Request Network invoice view into a web application.

Introduction

The Single Invoice component allows users to view and pay a specific request using the 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/single-invoice

Usage

Usage in React

single-invoice.tsx

You can directly pass props into the single-invoice web component without needing to create references or use workarounds.

import Head from "next/head";
import { config } from "@/utils/config";
import { useAppContext } from "@/utils/context";
import { useRouter } from "next/router";
import { rainbowKitConfig as wagmiConfig } from "@/utils/connectWallet";
import SingleInvoice from "@requestnetwork/single-invoice/react";

export default function SingleInvoicePage() {
  const router = useRouter();
  const { requestNetwork } = useAppContext();
  const { id } = router.query;

  return (
    <>
      <Head>
        <title>Request Invoice</title>
      </Head>
      <div className="container m-auto w-[100%]">
        <SingleInvoice
          config={config}
          requestNetwork={requestNetwork}
          wagmiConfig={wagmiConfig}
          requestId={id as string}
        />
      </div>
    </>
  );
}

initializeRN.ts

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

import { RequestNetwork } from "@requestnetwork/request-client.js";
import { Web3SignatureProvider } from "@requestnetwork/web3-signature";

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,
    });

    setter(requestNetwork);
  } catch (error) {
    console.error("Failed to initialize the Request Network:", error);
    setter(null);
  }
};

wagmiConfig.ts

The wagmiConfig file configures wallet connections for the SingleInvoice component, using RainbowKit and supporting various wallets and blockchains.

For more details see Wagmi Docs

config.ts

Use the config object to pass additional configuration options to the single invoice component.

import { IConfig } from "@requestnetwork/shared";

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

Supporting files

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.

Features

| Feature | Status | | ------------------------------------ | ------ | | ERC20 Payment | ✅ | | Native Payment | ✅ | | Conversion Payment | ✅ | | rnf_invoice format 0.3.0 | ✅ | | Configure Logo and Colors | ✅ | | Compatible with all Wagmi connectors | ✅ | | Encrypted Invoice Support | ✅ | | PDF Export | ✅ | | Detailed Payment Information | ✅ | | Payment Status Tracking | ✅ | | Network Auto-switching | ✅ | | Swap-to-Pay Payment | ❌ | | Swap-to-Conversion Payment | ❌ | | Escrow Payment | ❌ | | Declarative Payment | ❌ | | Attachments | ❌ |

Chains and Currencies

| Chain | Currencies | | -------- | ---------------------- | | Ethereum | USDC, USDT, DAI | | Polygon | USDC, USDT, DAI, USDCe | | Sepolia | USDC, FAU |

Additional Information

For more information, see the Request Network documentation.