feat: implement the invoicing format (#101)

Author: aimensahnoun

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/web-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "description": "Request Network Web Components",
   "main": "index.js",

packages/payment-widget/src/lib/components/payment-confirmation.svelte

@@ -17,6 +17,8 @@
 
   export let selectedCurrency: Currency;
   export let amountInUSD: number;
+  export let sellerName: string | undefined;
+  export let productName: string | undefined;
   export let sellerAddress: string;
   export let currentPaymentStep: PaymentStep;
   export let web3Modal: Web3Modal | null;
@@ -200,6 +202,8 @@
         try {
           const requestParameters = prepareRequestParameters({
             currency: selectedCurrency,
+            productName,
+            sellerName,
             sellerAddress,
             payerAddress,
             amountInCrypto,

packages/payment-widget/src/lib/env.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly WEB3MODAL_PROJECT_ID: string
+  readonly VITE_WEB3MODAL_PROJECT_ID: string;
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+  readonly env: ImportMetaEnv;
 }

packages/payment-widget/src/lib/payment-widget.svelte

@@ -194,6 +194,8 @@
       />
     {:else if selectedCurrency && currentPaymentStep === "confirmation"}
       <PaymentConfirmation
+        sellerName={sellerInfo.name}
+        productName={productInfo.name}
         {amountInUSD}
         {sellerAddress}
         {web3Modal}

packages/payment-widget/src/lib/utils/request.ts

@@ -23,6 +23,8 @@ export const prepareRequestParameters = ({
   amountInUSD,
   createdWith,
   builderId,
+  productName,
+  sellerName,
 }: {
   currency: Currency;
   sellerAddress: string;
@@ -32,20 +34,22 @@ export const prepareRequestParameters = ({
   amountInUSD: number;
   builderId: string;
   createdWith: string;
+  productName: string | undefined;
+  sellerName: string | undefined;
 }) => {
   const isERC20 = currency.type === Types.RequestLogic.CURRENCY.ERC20;
   const currencyValue = isERC20 ? currency.address : "eth";
-
+  const amount = utils
+    .parseUnits(amountInCrypto.toFixed(currency.decimals), currency.decimals)
+    .toString();
   return {
     requestInfo: {
       currency: {
         type: currency.type,
         value: currencyValue,
         network: currency.network,
       },
-      expectedAmount: utils
-        .parseUnits(amountInCrypto.toString(), currency.decimals)
-        .toString(),
+      expectedAmount: amount,
       payee: {
         type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
         value: sellerAddress,
@@ -69,15 +73,44 @@ export const prepareRequestParameters = ({
       },
     },
     contentData: {
-      paymentCurrency: {
-        type: currency.type,
-        value: currencyValue,
-        network: currency.network,
+      meta: {
+        format: "rnf_invoice",
+        version: "0.0.3",
+      },
+      creationDate: new Date().toISOString(),
+      invoiceNumber: "rn-checkout",
+      note: `Sale made with ${currency.symbol} on ${currency.network} for amount of ${amountInUSD} USD with an exchange rate of ${exchangeRate}`,
+      invoiceItems: [
+        {
+          name: productName || "",
+          quantity: 1,
+          unitPrice: amount,
+          discount: "0",
+          tax: {
+            type: "percentage",
+            amount: "0",
+          },
+          currency: currencyValue,
+        },
+      ],
+
+      paymentTerms: {
+        dueDate: new Date().toISOString(),
+      },
+      sellerInfo: {
+        businessName: sellerName || undefined,
+      },
+      miscellaneous: {
+        exchangeRate: exchangeRate.toString(),
+        amountInUSD: amountInUSD.toString(),
+        createdWith,
+        builderId,
+        paymentCurrency: {
+          type: currency.type,
+          value: currencyValue,
+          network: currency.network,
+        },
       },
-      exchangeRate: exchangeRate.toString(),
-      amountInUSD: amountInUSD.toString(),
-      createdWith,
-      builderId,
     },
     signer: {
       type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
@@ -164,7 +197,7 @@ export const handleRequestPayment = async ({
     await inMemoryRequestNetwork.createRequest(requestParameters);
 
   const signer = await ethersProvider!.getSigner();
-  const confirmationBlocks = getConfirmations(targetChain!.chainId);
+  const confirmationBlocks = 1;
   if (isERC20) {
     const requestData = inMemoryRequest.inMemoryInfo?.requestData!;
 
@@ -217,25 +250,26 @@ export const handleRequestPayment = async ({
 
 function getChainFromNetwork(network: string): (typeof chains)[0] | undefined {
   const networkLower = network.toLowerCase();
-  return chains.find(
-    (chain) =>
-      chain.name.toLowerCase() === networkLower ||
-      chain.currency.toLowerCase() === networkLower
-  );
-}
-
-const getConfirmations = (chainId: number): number => {
-  switch (chainId) {
-    case 137: // Polygon
-      return 15;
-    case 56: // Binance Smart Chain
-    case 43114: // Avalanche
-    case 250: // Fantom
-      return 5;
+  switch (networkLower) {
+    case "mainnet":
+    case "ethereum":
+      return chains.find((chain) => chain.name.toLowerCase() === "ethereum");
+    case "bsc":
+    case "binance smart chain":
+      return chains.find(
+        (chain) => chain.name.toLowerCase() === "binance smart chain"
+      );
+    case "zksyncera":
+    case "zksync era":
+      return chains.find((chain) => chain.name.toLowerCase() === "zksync era");
     default:
-      return 2;
+      return chains.find(
+        (chain) =>
+          chain.name.toLowerCase() === networkLower ||
+          chain.currency.toLowerCase() === networkLower
+      );
   }
-};
+}
 
 function getNetworkParams(chain: (typeof chains)[0]): any {
   return {

packages/payment-widget/src/lib/utils/walletConnector.ts

@@ -2,7 +2,7 @@ import { chains } from "./chains";
 import { createWeb3Modal, defaultConfig } from "@web3modal/ethers5";
 
 export const initWalletConnector = () => {
-  const projectId = import.meta.env.WEB3MODAL_PROJECT_ID;
+  const projectId = import.meta.env.VITE_WEB3MODAL_PROJECT_ID;
 
   const metadata = {
     name: "Request Checkout",