feat: Add Single Invoice Web Component

.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.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"

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

@@ -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/invoice/form-view.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.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/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -22,16 +22,18 @@
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
   // Icons
   import Download from "@requestnetwork/shared-icons/download.svelte";
+  import Share from "@requestnetwork/shared-icons/share.svelte";
   // Utils
-  import { formatDate } from "@requestnetwork/shared-utils/formatDate";
-  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
-  import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
-  import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
-  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
-  import { onMount } from "svelte";
+  import {
+    exportToPDF,
+    formatDate,
+    checkStatus,
+    getEthersSigner,
+    calculateItemTotal,
+    getCurrencyFromManager,
+    getConversionPaymentValues,
+  } from "@requestnetwork/shared-utils/index";
   import { formatUnits } from "viem";
-  import { getConversionPaymentValues } from "../../utils/getConversionPaymentValues";
-  import { getEthersSigner } from "../../utils";
 
   interface EntityInfo {
     value: string;
@@ -49,6 +51,7 @@
   export let currencyManager: any;
   export let isRequestPayed: boolean;
   export let wagmiConfig: any;
+  export let singleInvoicePath: string;
 
   let network: string | undefined = request?.currencyInfo?.network || "mainnet";
   let currency: CurrencyTypes.CurrencyDefinition | undefined =
@@ -512,7 +515,12 @@
       zksyncera: "0x144",
       base: "0x2105",
     };
-    return networkIds[network];
+
+    const networkId = networkIds[network];
+    if (!networkId) {
+      console.warn(`Unknown network: ${network}`);
+    }
+    return networkId;
   }
 
   // FIXME: Add rounding functionality
@@ -599,6 +607,16 @@
       }));
     }
   }
+
+  // Add debug logging to see what's happening
+  $: {
+    const hexStringChain = "0x" + account?.chainId?.toString(16);
+    const networkId = getNetworkIdFromNetworkName(network || "mainnet");
+
+    correctChain =
+      hexStringChain.toLowerCase() === String(networkId).toLowerCase() ||
+      Number(hexStringChain) === Number(networkId);
+  }
 </script>
 
 <div
@@ -639,6 +657,17 @@
         }}
       />
     </Tooltip>
+    {#if singleInvoicePath}
+      <Tooltip text="Share Invoice">
+        <Share
+          onClick={() => {
+            const shareUrl = `${window.location.origin}${singleInvoicePath}/${request.requestId}`;
+            navigator.clipboard.writeText(shareUrl);
+            toast.success("Share link copied to clipboard!");
+          }}
+        />
+      </Tooltip>
+    {/if}
   </h2>
   <div class="invoice-address">
     <h2>From:</h2>
@@ -948,6 +977,7 @@
   .invoice-number svg {
     width: 13px;
     height: 13px;
+    cursor: pointer;
   }
 
   .invoice-address {

packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts

@@ -8,6 +8,7 @@ export interface InvoiceDashboardProps {
   config: IConfig;
   wagmiConfig: WagmiConfig;
   requestNetwork: RequestNetwork | null | undefined;
+  singleInvoicePath: string;
 }
 /**
  * InvoiceDashboard is a React component that integrates with the Request Network to manage and display invoices.
@@ -24,6 +25,7 @@ export interface InvoiceDashboardProps {
  *   config={config}
  *   wagmiConfig={wagmiConfig}
  *   requestNetwork={requestNetwork}
+ *   singleInvoicePath={singleInvoicePath}
  * />
  */
 declare const InvoiceDashboard: React.FC<InvoiceDashboardProps>;

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

@@ -36,18 +36,22 @@
   import type { IConfig } from "@requestnetwork/shared-types";
   import type { RequestNetwork } from "@requestnetwork/request-client.js";
   // Utils
-  import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
-  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
-  import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
-  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
+  import {
+    debounce,
+    checkStatus,
+    formatUnits,
+    formatAddress,
+    getEthersSigner,
+    exportToPDF,
+    getCurrencyFromManager,
+    config as defaultConfig,
+    initializeCurrencyManager,
+  } from "@requestnetwork/shared-utils/index";
   import { CurrencyManager } from "@requestnetwork/currency";
   import { onDestroy, onMount, tick } from "svelte";
-  import { formatUnits } from "viem";
-  import { debounce, formatAddress, getEthersSigner } from "../utils";
   import { Drawer, InvoiceView } from "./dashboard";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CipherProviderTypes, CurrencyTypes } from "@requestnetwork/types";
-  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { ethers } from "ethers";
 
   interface CipherProvider extends CipherProviderTypes.ICipherProvider {
@@ -63,6 +67,7 @@
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
+  export let singleInvoicePath: string;
 
   let cipherProvider: CipherProvider | undefined;
 
@@ -903,6 +908,7 @@
             bind:currencyManager
             config={activeConfig}
             request={activeRequest}
+            {singleInvoicePath}
           />
         {/if}
       </Drawer>

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

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
-  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
-  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
+  import {
+    exportToPDF,
+    getCurrencyFromManager,
+    initializeCurrencyManager,
+  } from "@requestnetwork/shared-utils/index";
+
   import Toaster from "@requestnetwork/shared-components/sonner.svelte";
   import { toast } from "svelte-sonner";
 

packages/payment-widget/src/lib/components/wallet-info.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import type { Web3Modal } from "@web3modal/ethers5";
-  import { formatAddress } from "@requestnetwork/shared-utils/formatAddress";
+  import { formatAddress } from "@requestnetwork/shared-utils/index";
   export let web3Modal: Web3Modal | null;
   export let isConnected: boolean = false;
 

packages/payment-widget/tsconfig.json

@@ -16,8 +16,8 @@
     "baseUrl": ".",
     "paths": {
       "$src/*": ["src/*"],
-      "$utils/*": ["src/lib/utils/*"],
-    },
+      "$utils/*": ["src/lib/utils/*"]
+    }
   },
-  "include": ["src/**/*", "src/*.d.ts"],
+  "include": ["src/**/*", "src/*.d.ts"]
 }