feat: Add Single Invoice Web Component (#220)

Co-authored-by: MantisClone <david.huntmateo@request.network>

Author: sstefdev

.github/workflows/npm-publish.yaml

@@ -18,6 +18,7 @@ jobs:
           - '@requestnetwork/create-invoice-form'
           - '@requestnetwork/invoice-dashboard'
           - '@requestnetwork/payment-widget'
+          - '@requestnetwork/single-invoice'
     steps:
       - name: Checkout repository 🛎️
         uses: actions/checkout@v4

.gitignore

@@ -5,3 +5,4 @@ node_modules
 .turbo
 dist
 .svelte-kit
+vite.congig.ts.timestamp*

README.md

@@ -17,6 +17,7 @@ Usage depends on the component. See packages/\<package>/README.md
 | [@requestnetwork/create-invoice-form](packages/create-invoice-form/README.md) | [![npm version](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form) |
 | [@requestnetwork/invoice-dashboard](packages/invoice-dashboard/README.md) | [![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard) |
 | [@requestnetwork/payment-widget](packages/payment-widget/README.md) | [![npm version](https://badge.fury.io/js/%40requestnetwork%2Fpayment-widget.svg)](https://badge.fury.io/js/%40requestnetwork%2Fpayment-widget) |
+| [@requestnetwork/single-invoice](packages/single-invoice/README.md) | [![npm version](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice.svg)](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice) |
 | [@requestnetwork/shared](packages/shared/README.md) | [![npm version](https://badge.fury.io/js/%40requestnetwork%2Fshared.svg)](https://badge.fury.io/js/%40requestnetwork%2Fshared) |
 
 
@@ -45,7 +46,7 @@ npm run link:all --app-path=../rn-checkout
 cd <project>
 
 # Use local packages instead of the deployed ones
-npm link @requestnetwork/create-invoice-form @requestnetwork/invoice-dashboard
+npm link @requestnetwork/create-invoice-form @requestnetwork/invoice-dashboard @requestnetwork/single-invoice
 npm link @requestnetwork/payment-widget
 ```
 

package-lock.json

@@ -17,6 +17,7 @@
     "build:dashboard": "turbo run build --filter=@requestnetwork/invoice-dashboard",
     "build:stakeholder": "turbo run build --filter=@requestnetwork/add-stakeholder",
     "build:payment-widget": "turbo run build --filter=@requestnetwork/payment-widget",
+    "build:single-invoice": "turbo run build --filter=@requestnetwork/single-invoice",
     "link:react": "npm link $npm_config_app_path/node_modules/react $npm_config_app_path/node_modules/react-dom",
     "link:all": "npm run link:react --app-path=$npm_config_app_path && for d in packages/*; do (cd $d && npm link); done",
     "unlink:all": "for d in packages/*; do (cd $d && npm unlink); done"

package.json

@@ -16,13 +16,12 @@
   import { CurrencyTypes } from "@requestnetwork/types";
   // Utils
   import { getInitialFormData, prepareRequestParams } from "./utils";
-  import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
-  import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
   import {
+    config as defaultConfig,
+    calculateInvoiceTotals,
     getCurrencySupportedNetworksForConversion,
     initializeCreateInvoiceCurrencyManager,
-    initializeCurrencyManager,
-  } from "@requestnetwork/shared-utils/initCurrencyManager";
+  } from "@requestnetwork/shared-utils/index";
   // Components
   import { InvoiceForm, InvoiceView } from "./invoice";
   import Button from "@requestnetwork/shared-components/button.svelte";

packages/create-invoice-form/src/lib/create-invoice-form.svelte

@@ -11,9 +11,11 @@
   import { CurrencyTypes } from "@requestnetwork/types";
 
   // Utils
-  import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
-  import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
-  import { formatDate } from "@requestnetwork/shared-utils/formatDate";
+  import {
+    formatDate,
+    calculateItemTotal,
+    config as defaultConfig,
+  } from "@requestnetwork/shared-utils/index";
 
   export let defaultCurrencies;
   export let config: IConfig;

packages/create-invoice-form/src/lib/invoice/form-view.svelte

@@ -15,9 +15,12 @@
   import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";
 
   // Utils
-  import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
-  import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
-  import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
+  import {
+    checkAddress,
+    inputDateFormat,
+    calculateItemTotal,
+  } from "@requestnetwork/shared-utils/index";
+
   import { CurrencyTypes, CipherProviderTypes } from "@requestnetwork/types";
   import isEmail from "validator/es/lib/isEmail";
 

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -8,7 +8,7 @@ export interface CreateInvoiceFormProps {
   config: IConfig;
   wagmiConfig: WagmiConfig;
   requestNetwork: RequestNetwork | null | undefined;
-  currencies: string[];
+  currencies?: string[];
 }
 
 /**

packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts

@@ -167,11 +167,7 @@ export const config: IConfig = {
 
 ## Chains and Currencies
 
-| Chain    | Currencies             |
-| -------- | ---------------------- |
-| Ethereum | USDC, USDT, DAI        |
-| Polygon  | USDC, USDT, DAI, USDCe |
-| Sepolia  | USDC, FAU              |
+For a list of supported chains and currencies see [Token List](https://docs.request.network/building-blocks/token-list)
 
 ## Additional Information