Feat: support same currencies as checkout and fix currency display

packages/create-invoice-form/src/lib/utils/prepareRequest.ts

@@ -18,105 +18,112 @@ export const prepareRequestParams = ({
   currency,
   formData,
   invoiceTotals,
-}: IRequestParams): Types.ICreateRequestParameters => ({
-  requestInfo: {
-    currency: {
-      type: currency.type,
-      value: currency.address,
-      network: currency.network,
-    },
-    expectedAmount: parseUnits(
-      invoiceTotals.totalAmount.toFixed(2),
-      currency.decimals
-    ).toString(),
-    payee: {
-      type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-      value: formData.creatorId,
-    },
-    payer: {
-      type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-      value: formData.payerAddress,
-    },
-    timestamp: Utils.getCurrentTimestampInSecond(),
-  },
-  paymentNetwork: {
-    id: Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT,
-    parameters: {
-      paymentNetworkName: currency.network,
-      paymentAddress: formData.payeeAddress,
-      feeAddress: zeroAddress,
-      feeAmount: "0",
-    },
-  },
-  contentData: {
-    meta: {
-      format: "rnf_invoice",
-      version: "0.0.3",
-    },
-    miscellaneous:
-      formData.miscellaneous.labels.length > 0
-        ? formData.miscellaneous
-        : undefined,
-    creationDate: new Date(formData.issuedOn).toISOString(),
-    invoiceNumber: formData.invoiceNumber,
-    note: formData.note.length > 0 ? formData.note : undefined,
-    invoiceItems: formData.items.map((item) => ({
-      name: item.description,
-      quantity: Number(item.quantity),
-      unitPrice: parseUnits(
-        item.unitPrice.toString(),
-        currency.decimals
-      ).toString(),
-      discount: parseUnits(
-        item.discount.toString(),
+}: IRequestParams): Types.ICreateRequestParameters => {
+  const isERC20 = currency.type === Types.RequestLogic.CURRENCY.ERC20;
+
+  return {
+    requestInfo: {
+      currency: {
+        type: currency.type,
+        value: isERC20 ? currency.address : "eth",
+        network: currency.network,
+      },
+      expectedAmount: parseUnits(
+        invoiceTotals.totalAmount.toFixed(2),
         currency.decimals
       ).toString(),
-      tax: {
-        type: "percentage",
-        amount: item.tax.amount.toString(),
+      payee: {
+        type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
+        value: formData.creatorId,
+      },
+      payer: {
+        type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
+        value: formData.payerAddress,
       },
-      currency: currency.address,
-    })),
-    paymentTerms: {
-      dueDate: new Date(formData.dueDate).toISOString(),
+      timestamp: Utils.getCurrentTimestampInSecond(),
     },
-    buyerInfo: {
-      firstName: formData?.buyerInfo?.firstName || undefined,
-      lastName: formData?.buyerInfo?.lastName || undefined,
-      address: {
-        "country-name":
-          formData?.buyerInfo?.address?.["country-name"] || undefined,
-        locality: formData?.buyerInfo?.address?.locality || undefined,
-        "postal-code":
-          formData?.buyerInfo?.address?.["postal-code"] || undefined,
-        region: formData?.buyerInfo?.address?.region || undefined,
-        "street-address":
-          formData?.buyerInfo?.address?.["street-address"] || undefined,
+    paymentNetwork: {
+      id:
+        currency.type === Types.RequestLogic.CURRENCY.ETH
+          ? Types.Extension.PAYMENT_NETWORK_ID.ETH_FEE_PROXY_CONTRACT
+          : Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT,
+      parameters: {
+        paymentNetworkName: currency.network,
+        paymentAddress: formData.payeeAddress,
+        feeAddress: zeroAddress,
+        feeAmount: "0",
       },
-      businessName: formData?.buyerInfo?.businessName || undefined,
-      taxRegistration: formData?.buyerInfo?.taxRegistration || undefined,
-      email: formData?.buyerInfo?.email || undefined,
     },
-    sellerInfo: {
-      firstName: formData?.sellerInfo?.firstName || undefined,
-      lastName: formData?.sellerInfo?.lastName || undefined,
-      address: {
-        "country-name":
-          formData?.sellerInfo?.address?.["country-name"] || undefined,
-        locality: formData?.sellerInfo?.address?.locality || undefined,
-        "postal-code":
-          formData?.sellerInfo?.address?.["postal-code"] || undefined,
-        region: formData?.sellerInfo?.address?.region || undefined,
-        "street-address":
-          formData?.sellerInfo?.address?.["street-address"] || undefined,
+    contentData: {
+      meta: {
+        format: "rnf_invoice",
+        version: "0.0.3",
+      },
+      miscellaneous:
+        formData.miscellaneous.labels.length > 0
+          ? formData.miscellaneous
+          : undefined,
+      creationDate: new Date(formData.issuedOn).toISOString(),
+      invoiceNumber: formData.invoiceNumber,
+      note: formData.note.length > 0 ? formData.note : undefined,
+      invoiceItems: formData.items.map((item) => ({
+        name: item.description,
+        quantity: Number(item.quantity),
+        unitPrice: parseUnits(
+          item.unitPrice.toString(),
+          currency.decimals
+        ).toString(),
+        discount: parseUnits(
+          item.discount.toString(),
+          currency.decimals
+        ).toString(),
+        tax: {
+          type: "percentage",
+          amount: item.tax.amount.toString(),
+        },
+        currency: isERC20 ? currency.address : currency.symbol,
+      })),
+      paymentTerms: {
+        dueDate: new Date(formData.dueDate).toISOString(),
+      },
+      buyerInfo: {
+        firstName: formData?.buyerInfo?.firstName || undefined,
+        lastName: formData?.buyerInfo?.lastName || undefined,
+        address: {
+          "country-name":
+            formData?.buyerInfo?.address?.["country-name"] || undefined,
+          locality: formData?.buyerInfo?.address?.locality || undefined,
+          "postal-code":
+            formData?.buyerInfo?.address?.["postal-code"] || undefined,
+          region: formData?.buyerInfo?.address?.region || undefined,
+          "street-address":
+            formData?.buyerInfo?.address?.["street-address"] || undefined,
+        },
+        businessName: formData?.buyerInfo?.businessName || undefined,
+        taxRegistration: formData?.buyerInfo?.taxRegistration || undefined,
+        email: formData?.buyerInfo?.email || undefined,
       },
-      businessName: formData?.sellerInfo?.businessName || undefined,
-      taxRegistration: formData?.sellerInfo?.taxRegistration || undefined,
-      email: formData?.sellerInfo?.email || undefined,
+      sellerInfo: {
+        firstName: formData?.sellerInfo?.firstName || undefined,
+        lastName: formData?.sellerInfo?.lastName || undefined,
+        address: {
+          "country-name":
+            formData?.sellerInfo?.address?.["country-name"] || undefined,
+          locality: formData?.sellerInfo?.address?.locality || undefined,
+          "postal-code":
+            formData?.sellerInfo?.address?.["postal-code"] || undefined,
+          region: formData?.sellerInfo?.address?.region || undefined,
+          "street-address":
+            formData?.sellerInfo?.address?.["street-address"] || undefined,
+        },
+        businessName: formData?.sellerInfo?.businessName || undefined,
+        taxRegistration: formData?.sellerInfo?.taxRegistration || undefined,
+        email: formData?.sellerInfo?.email || undefined,
+      },
+    },
+    signer: {
+      type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
+      value: signer,
     },
-  },
-  signer: {
-    type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
-    value: signer,
-  },
-});
+  };
+};

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -1,49 +1,43 @@
 <script lang="ts">
+  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import {
-    Types,
-    type RequestNetwork,
-  } from "@requestnetwork/request-client.js";
-  import {
-    payRequest,
     approveErc20,
     hasErc20Approval,
+    payRequest,
   } from "@requestnetwork/payment-processor";
-  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
+  import {
+    Types,
+    type RequestNetwork,
+  } from "@requestnetwork/request-client.js";
   import { toast } from "svelte-sonner";
-
   // Components
-  import Button from "@requestnetwork/shared-components/button.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
+  import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
-
   // Icons
   import Check from "@requestnetwork/shared-icons/check.svelte";
   import Download from "@requestnetwork/shared-icons/download.svelte";
-
   // Utils
   import { formatDate } from "@requestnetwork/shared-utils/formatDate";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
-
   // Types
   import type { WalletState } from "@requestnetwork/shared-types/web3Onboard";
 
-  import { walletClientToSigner, exportToPDF } from "../../utils";
-  import { formatUnits } from "viem";
   import { onMount } from "svelte";
+  import { formatUnits } from "viem";
+  import { exportToPDF, walletClientToSigner } from "../../utils";
+  import { getCurrencyFromManager } from "../../utils/getCurrency";
 
   export let config;
   export let wallet: WalletState | undefined;
   export let requestNetwork: RequestNetwork | null | undefined;
-  export let request: Types.IRequestDataWithEvents | undefined;
+  export let request: Types.IRequestDataWithEvents;
   export let currencyManager: any;
   export let isRequestPayed: boolean;
 
   let network = request?.currencyInfo?.network || "mainnet";
   // FIXME: Use a non deprecated function
-  let currency = currencyManager.from(
-    request?.currencyInfo.value,
-    request?.currencyInfo.network
-  );
+  let currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
   let statuses: any = [];
   let isPaid = false;
   let loading = false;
@@ -104,10 +98,7 @@
     wallet = wallet;
     network = request?.currencyInfo?.network || "mainnet";
     // FIXME: Use a non deprecated function
-    currency = currencyManager.from(
-      request?.currencyInfo.value,
-      request?.currencyInfo.network
-    );
+    currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
   }
 
   const checkInvoice = async () => {
@@ -119,7 +110,12 @@
       );
       signer = walletClientToSigner(wallet);
       requestData = singleRequest?.getData();
-      approved = await checkApproval(requestData, signer);
+
+      if (requestData.currencyInfo.type === Types.RequestLogic.CURRENCY.ERC20) {
+        approved = await checkApproval(requestData, signer);
+      } else {
+        approved = true;
+      }
       isPaid = requestData?.balance?.balance! >= requestData?.expectedAmount;
       loading = false;
     } catch (err: any) {
@@ -200,8 +196,17 @@
   function getNetworkIdFromNetworkName(network: string): string {
     const networkIds: { [key: string]: string } = {
       mainnet: "0x1",
-      sepolia: "0xaa36a7",
       matic: "0x89",
+      bsc: "0x38",
+      xdai: "0x64",
+      avalanche: "0xa86a",
+      optimism: "0xa",
+      moonbeam: "0x504",
+      sepolia: "0xaa36a7",
+      fantom: "0xfa",
+      mantle: "0x1388",
+      zksyncera: "0x144",
+      base: "0x2105",
     };
     return networkIds[network];
   }
@@ -454,9 +459,7 @@
     </div>
   </div>
   {#if unsupportedNetwork}
-    <div class="unsupported-network">
-      Unsupported payment network: pn-eth-fee-proxy-contract
-    </div>
+    <div class="unsupported-network">Unsupported payment network!</div>
   {/if}
 </div>