@requestnetwork/create-invoice-form
TypeScript icon, indicating that this package has built-in type declarations

0.7.0 • Public • Published

Request Network Create Invoice Form Web Component

npm version

A web component for integrating the Request Network's Create Invoice Form into a web application.

Introduction

The Create Invoice Form component allows users to create a 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/create-invoice-form

Usage

Usage in React

⚠️ WARNING: For NextJS 14.x , ensure you have the following configuration :

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

⚠️ WARNING: To use the Create Invoice Form in a React application, you must dynamically import @requestnetwork/create-invoice-form and use the component in your JSX file.

import("@requestnetwork/create-invoice-form");

ℹ️ INFO: The following example uses Web3 Onboard to connect a wallet but you can use any wallet connection method you prefer.

Configure the create-invoice-form web component by creating a reference to it, setting its properties, and passing the reference as a prop. It's not possible to pass objects into a web component as props directly. See StackOverflow for details .

import("@requestnetwork/create-invoice-form");
import { useEffect, useRef } from "react";
import { config } from "@/utils/config";
import { useAppContext } from "@/utils/context";
import { CreateInvoiceFormProps } from "@/types";

export default function CreateInvoiceForm() {
  const formRef = useRef<CreateInvoiceFormProps>(null);
  const { wallet, requestNetwork } = useAppContext();

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

      if (wallet && requestNetwork) {
        formRef.current.signer = wallet.accounts[0].address;
        formRef.current.requestNetwork = requestNetwork;
        formRef.current.currencies = currencies;
      }
    }
  }, [wallet, requestNetwork]);

  return (
    <div className="container m-auto  w-[100%]">
      <create-invoice-form ref={formRef} />
    </div>
  );
}

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

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

Please replace the builderId with your own, arbitrarily chosen ID. This is used to track how many invoices are created by your application.

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 Request
rnf_invoice format 0.3.0
Configure Logo and Colors
Minimal Chains and Currencies
Support Wallet Connectors other than Web3Onboard
Native Request
Conversion Request
Swap-to-Pay Request
Swap-to-Conversion Request
Escrow Request
Improved UI and UX
Auto-increment Invoice Number
Client Address List
Payment Recipient Address List
More Chains and Currencies
More Configuration Options
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.

Readme

Keywords

none

Package Sidebar

Install

npm i @requestnetwork/create-invoice-form

Weekly Downloads

101

Version

0.7.0

License

MIT

Unpacked Size

32.5 MB

Total Files

23

Last publish

Collaborators

  • mantisclone-requestnetwork
  • stef.req
  • aimensahnoun
  • benjlevesque
  • request-bot
  • adamdowson
  • yomarion