From 33c8d31bf2b0b07d60892b7d57cf89e5c071e864 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Sun, 24 Nov 2024 16:13:03 +0100
Subject: [PATCH 01/18] feat: added single-invoice web component

---
 package.json                                  |   1 +
 packages/payment-widget/tsconfig.json         |   6 +-
 packages/single-invoice/README.md             |  53 +
 packages/single-invoice/package.json          |  66 ++
 packages/single-invoice/src/lib/index.ts      |   1 +
 .../src/lib/react/SingleInvoice.d.ts          |  24 +
 .../src/lib/react/SingleInvoice.jsx           |  19 +
 .../single-invoice/src/lib/react/global.d.ts  |   8 +
 .../src/lib/single-invoice.svelte             | 943 ++++++++++++++++++
 .../single-invoice/src/lib/types/index.ts     |  61 ++
 .../src/lib/utils/capitalize.d.ts             |   1 +
 .../src/lib/utils/capitalize.ts               |   1 +
 .../src/lib/utils/chainlink.d.ts              |  10 +
 .../single-invoice/src/lib/utils/chainlink.ts |  40 +
 .../src/lib/utils/conversion.d.ts             |  13 +
 .../src/lib/utils/conversion.ts               |  50 +
 .../src/lib/utils/debounce.d.ts               |   1 +
 .../single-invoice/src/lib/utils/debounce.ts  |  11 +
 .../src/lib/utils/ethersAdapterProvider.d.ts  |   6 +
 .../src/lib/utils/formatAddress.d.ts          |   1 +
 .../src/lib/utils/formatAddress.ts            |  16 +
 .../src/lib/utils/generateInvoice.d.ts        |   6 +
 .../lib/utils/getConversionPaymentValues.d.ts |  42 +
 .../lib/utils/getConversionPaymentValues.ts   | 168 ++++
 .../single-invoice/src/lib/utils/index.d.ts   |   4 +
 .../single-invoice/src/lib/utils/index.ts     |   4 +
 .../src/lib/utils/loadScript.d.ts             |   1 +
 .../src/lib/utils/wallet-utils.d.ts           |   8 +
 .../src/lib/utils/wallet-utils.ts             |  38 +
 packages/single-invoice/svelte.config.js      |  11 +
 packages/single-invoice/tsconfig.json         |  23 +
 packages/single-invoice/tsconfig.react.json   |  15 +
 packages/single-invoice/vite.config.ts        |   5 +
 packages/single-invoice/vite.wc.config.ts     |  42 +
 shared/components/status-label.svelte         | 103 ++
 shared/utils/capitalize.ts                    |   2 +
 shared/utils/checkStatus.ts                   |  37 +
 37 files changed, 1838 insertions(+), 3 deletions(-)
 create mode 100644 packages/single-invoice/README.md
 create mode 100644 packages/single-invoice/package.json
 create mode 100644 packages/single-invoice/src/lib/index.ts
 create mode 100644 packages/single-invoice/src/lib/react/SingleInvoice.d.ts
 create mode 100644 packages/single-invoice/src/lib/react/SingleInvoice.jsx
 create mode 100644 packages/single-invoice/src/lib/react/global.d.ts
 create mode 100644 packages/single-invoice/src/lib/single-invoice.svelte
 create mode 100644 packages/single-invoice/src/lib/types/index.ts
 create mode 100644 packages/single-invoice/src/lib/utils/capitalize.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/capitalize.ts
 create mode 100644 packages/single-invoice/src/lib/utils/chainlink.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/chainlink.ts
 create mode 100644 packages/single-invoice/src/lib/utils/conversion.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/conversion.ts
 create mode 100644 packages/single-invoice/src/lib/utils/debounce.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/debounce.ts
 create mode 100644 packages/single-invoice/src/lib/utils/ethersAdapterProvider.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/formatAddress.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/formatAddress.ts
 create mode 100644 packages/single-invoice/src/lib/utils/generateInvoice.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/getConversionPaymentValues.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/getConversionPaymentValues.ts
 create mode 100644 packages/single-invoice/src/lib/utils/index.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/index.ts
 create mode 100644 packages/single-invoice/src/lib/utils/loadScript.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/wallet-utils.d.ts
 create mode 100644 packages/single-invoice/src/lib/utils/wallet-utils.ts
 create mode 100644 packages/single-invoice/svelte.config.js
 create mode 100644 packages/single-invoice/tsconfig.json
 create mode 100644 packages/single-invoice/tsconfig.react.json
 create mode 100644 packages/single-invoice/vite.config.ts
 create mode 100644 packages/single-invoice/vite.wc.config.ts
 create mode 100644 shared/components/status-label.svelte
 create mode 100644 shared/utils/capitalize.ts
 create mode 100644 shared/utils/checkStatus.ts

diff --git a/package.json b/package.json
index 016e1338..3643fb0b 100644
--- a/package.json
+++ b/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"
diff --git a/packages/payment-widget/tsconfig.json b/packages/payment-widget/tsconfig.json
index 3993679a..7766439c 100644
--- a/packages/payment-widget/tsconfig.json
+++ b/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"]
 }
diff --git a/packages/single-invoice/README.md b/packages/single-invoice/README.md
new file mode 100644
index 00000000..f919758d
--- /dev/null
+++ b/packages/single-invoice/README.md
@@ -0,0 +1,53 @@
+# Request Network Payment Widget Web Component
+
+A web component for accepting crypto payments using Request Network.
+
+## Introduction
+
+The Payment Widget web component is a pre-built component that allows users to offer crypto payment options using Request Network without having to implement it themselves. It is built using Svelte but compiled to a Web Component, making it usuable in any web environment, regardless of the framework.
+
+## Installation
+
+To install the component, use npm:
+
+```bash
+npm install @requestnetwork/payment-widget
+```
+
+## Usage
+
+### Usage in React
+
+```tsx
+import PaymentWidget from "@requestnetwork/payment-widget/react";
+
+export default function PaymentPage() {
+  return (
+    <PaymentWidget
+      sellerInfo={{
+        logo: "https://example.com/logo.png",
+        name: "Example Store",
+      }}
+      productInfo={{
+        name: "Digital Art Collection",
+        description: "A curated collection of digital artworks.",
+        image: "https://example.com/product-image.jpg",
+      }}
+      amountInUSD={1.5}
+      sellerAddress="0x1234567890123456789012345678901234567890"
+      supportedCurrencies={["ETH_MAINNET", "USDC_MAINNET", "USDC_MATIC"]}
+      persistRequest={true}
+      onPaymentSuccess={(request) => {
+        console.log(request);
+      }}
+      onError={(error) => {
+        console.error(error);
+      }}
+    />
+  );
+}
+```
+
+## Additional Information
+
+For more information, see the [Request Network documentation](https://docs.request.network/).
diff --git a/packages/single-invoice/package.json b/packages/single-invoice/package.json
new file mode 100644
index 00000000..46cb1a41
--- /dev/null
+++ b/packages/single-invoice/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@requestnetwork/single-invoice",
+  "version": "0.1.0",
+  "main": "./dist/web-component.umd.cjs",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "npm run package",
+    "build:wc": "vite build -c vite.wc.config.ts",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && npm run build:wc && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "clean": "rm -rf dist && rm -rf .svelte-kit",
+    "check-release-type": "bash ../../scripts/check-release-type.sh",
+    "publish-next-release": "bash ../../scripts/publish-next-release.sh"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "require": "./dist/web-component.umd.cjs",
+      "default": "./dist/web-component.js"
+    },
+    "./react": {
+      "types": "./dist/react/SingleInvoice.d.ts",
+      "default": "./dist/react/SingleInvoice.jsx"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.5.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sass": "^1.77.8",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.6.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@requestnetwork/payment-processor": "0.48.0",
+    "@requestnetwork/request-client.js": "0.50.0",
+    "@requestnetwork/web3-signature": "0.8.1",
+    "@web3modal/ethers5": "^5.0.11",
+    "ethers": "^5.7.2",
+    "vite-plugin-node-polyfills": "^0.22.0"
+  }
+}
diff --git a/packages/single-invoice/src/lib/index.ts b/packages/single-invoice/src/lib/index.ts
new file mode 100644
index 00000000..39307c45
--- /dev/null
+++ b/packages/single-invoice/src/lib/index.ts
@@ -0,0 +1 @@
+export { default as SingleInvoice } from "./single-invoice.svelte";
diff --git a/packages/single-invoice/src/lib/react/SingleInvoice.d.ts b/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
new file mode 100644
index 00000000..988e782b
--- /dev/null
+++ b/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
@@ -0,0 +1,24 @@
+import React from "react";
+
+export interface SingleInvoiceProps {
+  requestId: string;
+  config: IConfig;
+  wagmiConfig: WagmiConfig;
+  requestNetwork: RequestNetwork | null | undefined;
+  currencies: CurrencyTypes.CurrencyInput[];
+}
+
+/**
+ * SingleInvoice is a React component that displays a single invoice.
+ *
+ * @param {SingleInvoiceProps} props - The component props
+ * @returns {JSX.Element}
+ *
+ * @example
+ * <SingleInvoice
+ *   requestId="1234567890"
+ * />
+ */
+declare const SingleInvoice: React.FC<SingleInvoiceProps>;
+
+export default SingleInvoice;
diff --git a/packages/single-invoice/src/lib/react/SingleInvoice.jsx b/packages/single-invoice/src/lib/react/SingleInvoice.jsx
new file mode 100644
index 00000000..f1a986d4
--- /dev/null
+++ b/packages/single-invoice/src/lib/react/SingleInvoice.jsx
@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React, { useLayoutEffect, useRef } from "react";
+import("../web-component");
+
+export const SingleInvoice = (props) => {
+  const widgetRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (widgetRef.current) {
+      Object.entries(props).forEach(([key, value]) => {
+        widgetRef.current[key] = value;
+      });
+    }
+  }, [props, widgetRef?.current]);
+
+  return React.createElement("single-invoice", { ref: widgetRef });
+};
+
+export default SingleInvoice;
diff --git a/packages/single-invoice/src/lib/react/global.d.ts b/packages/single-invoice/src/lib/react/global.d.ts
new file mode 100644
index 00000000..a0e3e3cc
--- /dev/null
+++ b/packages/single-invoice/src/lib/react/global.d.ts
@@ -0,0 +1,8 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    "single-invoice": React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLElement>,
+      HTMLElement
+    >;
+  }
+}
diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
new file mode 100644
index 00000000..2fdd26bd
--- /dev/null
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -0,0 +1,943 @@
+<script lang="ts">
+  import { getAccount, watchAccount } from "@wagmi/core";
+  import { toast } from "svelte-sonner";
+  import type { GetAccountReturnType } from "@wagmi/core";
+  import {
+    approveErc20,
+    approveErc20ForProxyConversion,
+    hasErc20Approval,
+    hasErc20ApprovalForProxyConversion,
+    payRequest,
+  } from "@requestnetwork/payment-processor";
+  import {
+    Types,
+    type RequestNetwork,
+  } from "@requestnetwork/request-client.js";
+  import type { Config as WagmiConfig } from "@wagmi/core";
+  import { CurrencyTypes } from "@requestnetwork/types";
+  import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
+  import { CurrencyManager } from "@requestnetwork/currency";
+  import type { IConfig } from "@requestnetwork/shared-types";
+  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
+  // Components
+  import StatusLabel from "@requestnetwork/shared-components/status-label.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 { 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 { formatUnits } from "viem";
+  import { getConversionPaymentValues } from "./utils/getConversionPaymentValues";
+  import { getEthersSigner } from "./utils";
+
+  interface EntityInfo {
+    value: string;
+    isCompany?: boolean;
+    isEmail?: boolean;
+  }
+
+  interface BuyerInfo extends EntityInfo {}
+
+  interface SellerInfo extends EntityInfo {}
+
+  export let config: IConfig;
+  export let requestId: string;
+  export let requestNetwork: RequestNetwork | null | undefined;
+  export let currencies: CurrencyTypes.CurrencyInput[] = [];
+  export let wagmiConfig: WagmiConfig;
+
+  let account: GetAccountReturnType = wagmiConfig && getAccount(wagmiConfig);
+  let currencyManager: CurrencyManager;
+  let request: Types.IRequestDataWithEvents | null = null;
+  let network: string | undefined = request?.currencyInfo?.network || "mainnet";
+  let currency: CurrencyTypes.CurrencyDefinition | undefined =
+    getCurrencyFromManager(request.currencyInfo, currencyManager);
+  let paymentCurrencies: (CurrencyTypes.CurrencyDefinition | undefined)[] = [];
+  let statuses: any = [];
+  let isPaid = false;
+  let loading = false;
+  let requestData: any = null;
+  let signer: any = null;
+  let approved = false;
+  let address = account.address;
+  let firstItems: any;
+  let otherItems: any;
+  let sellerInfo: SellerInfo[] = [];
+  let buyerInfo: BuyerInfo[] = [];
+  let isPayee = request?.payee?.value.toLowerCase() === address?.toLowerCase();
+  let unsupportedNetwork = false;
+  let hexStringChain = "0x" + account?.chainId?.toString(16);
+  let correctChain =
+    hexStringChain === String(getNetworkIdFromNetworkName(network));
+  let paymentNetworkExtension:
+    | Types.Extension.IPaymentNetworkState<any>
+    | undefined;
+
+  let status = checkStatus(requestData || request);
+
+  $: requestId, getOneRequest();
+
+  const getOneRequest = async () => {
+    try {
+      loading = true;
+      const _request = await requestNetwork?.fromRequestId(requestId);
+      request = _request?.getData();
+    } catch (error) {
+      console.error("Failed to fetch request:", error);
+    } finally {
+      loading = false;
+    }
+  };
+
+  onMount(async () => {
+    await getOneRequest();
+    currencyManager = initializeCurrencyManager(currencies);
+  });
+
+  const generateDetailParagraphs = (info: any) => {
+    const fullName = [info?.firstName, info?.lastName]
+      .filter(Boolean)
+      .join(" ");
+    const fullAddress = [
+      info?.address?.["street-address"],
+      info?.address?.locality,
+      info?.address?.region,
+      info?.address?.["postal-code"],
+      info?.address?.["country-name"],
+    ]
+      .filter(Boolean)
+      .join(", ");
+
+    return [
+      ...(fullName ? [{ value: fullName }] : []),
+      ...(info?.businessName
+        ? [
+            {
+              value: info?.businessName,
+              isCompany: true,
+            },
+          ]
+        : []),
+      ...(info?.taxRegistration ? [{ value: info?.taxRegistration }] : []),
+      ...(fullAddress ? [{ value: fullAddress }] : []),
+      ...(info?.email ? [{ value: info?.email, isEmail: true }] : []),
+    ].filter((detail) => detail.value);
+  };
+
+  $: {
+    firstItems = request?.contentData
+      ? request?.contentData?.invoiceItems?.slice(0, 3)
+      : [];
+    otherItems = request?.contentData
+      ? request?.contentData?.invoiceItems?.slice(3)
+      : [];
+  }
+
+  $: {
+    sellerInfo = generateDetailParagraphs(request?.contentData.sellerInfo);
+    buyerInfo = generateDetailParagraphs(request?.contentData.buyerInfo);
+  }
+
+  onMount(() => {
+    checkInvoice();
+  });
+
+  $: request, checkInvoice();
+
+  $: {
+    account = account;
+    network = request?.currencyInfo?.network || "mainnet";
+    currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
+  }
+
+  const checkInvoice = async () => {
+    try {
+      unsupportedNetwork = false;
+      loading = true;
+      const singleRequest = await requestNetwork?.fromRequestId(
+        request!.requestId
+      );
+
+      signer = await getEthersSigner(wagmiConfig);
+
+      requestData = singleRequest?.getData();
+      paymentNetworkExtension = getPaymentNetworkExtension(requestData);
+
+      if (
+        paymentNetworkExtension?.id ===
+        Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY
+      ) {
+        paymentCurrencies =
+          paymentNetworkExtension?.values?.acceptedTokens?.map((token: any) =>
+            currencyManager.fromAddress(
+              token,
+              paymentNetworkExtension?.values?.network
+            )
+          );
+      } else if (
+        paymentNetworkExtension?.id ===
+        Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ETH_PROXY
+      ) {
+        paymentCurrencies = [
+          currencyManager.getNativeCurrency(
+            Types.RequestLogic.CURRENCY.ETH,
+            paymentNetworkExtension?.values?.network
+          ),
+        ];
+      } else if (
+        paymentNetworkExtension?.id ===
+          Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT ||
+        paymentNetworkExtension?.id ===
+          Types.Extension.PAYMENT_NETWORK_ID.ETH_FEE_PROXY_CONTRACT
+      ) {
+        paymentCurrencies = [currency];
+      } else {
+        throw new Error("Unsupported payment network");
+      }
+
+      network = paymentCurrencies[0]?.network || "mainnet";
+
+      if (paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20) {
+        approved = await checkApproval(requestData, paymentCurrencies, signer);
+      } else {
+        approved = true;
+      }
+
+      status = checkStatus(requestData || request);
+    } catch (err: any) {
+      console.error("Error while checking invoice: ", err);
+      if (String(err).includes("Unsupported payment")) {
+        unsupportedNetwork = true;
+      }
+    } finally {
+      loading = false;
+    }
+  };
+
+  const payTheRequest = async () => {
+    try {
+      loading = true;
+      const _request = await requestNetwork?.fromRequestId(
+        requestData?.requestId!
+      );
+
+      statuses = [...statuses, "Waiting for payment"];
+
+      let paymentSettings = undefined;
+      if (
+        paymentNetworkExtension?.id ===
+          Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY ||
+        paymentNetworkExtension?.id ===
+          Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ETH_PROXY
+      ) {
+        const { conversion } = await getConversionPaymentValues({
+          baseAmount: requestData?.expectedAmount,
+          denominationCurrency: currency!,
+          selectedPaymentCurrency: paymentCurrencies[0]!,
+          currencyManager,
+          provider: signer,
+          fromAddress: address,
+        });
+        paymentSettings = conversion;
+      }
+
+      const paymentTx = await payRequest(
+        requestData,
+        signer,
+        undefined,
+        undefined,
+        paymentSettings
+      );
+      await paymentTx.wait();
+
+      statuses = [...statuses, "Payment detected"];
+      while (requestData.balance?.balance! < requestData.expectedAmount) {
+        requestData = await _request?.refresh();
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+
+      statuses = [...statuses, "Payment confirmed"];
+      isPaid = true;
+      loading = false;
+      statuses = [];
+      isRequestPayed = true;
+    } catch (err) {
+      console.error("Something went wrong while paying : ", err);
+      loading = false;
+      statuses = [];
+    }
+  };
+
+  const checkApproval = async (
+    requestData: any,
+    paymentCurrencies: any[],
+    signer: any
+  ) => {
+    const approvalCheckers: { [key: string]: () => Promise<boolean> } = {
+      [Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT]: () =>
+        hasErc20Approval(requestData!, address!, signer),
+      [Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY]: () =>
+        hasErc20ApprovalForProxyConversion(
+          requestData!,
+          address!,
+          paymentCurrencies[0]?.address,
+          signer,
+          requestData.expectedAmount
+        ),
+    };
+
+    return (
+      (paymentNetworkExtension?.id &&
+        (await approvalCheckers[paymentNetworkExtension.id]?.())) ||
+      false
+    );
+  };
+
+  async function approve() {
+    try {
+      loading = true;
+
+      const approvers: { [key: string]: () => Promise<void> } = {
+        [Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT]:
+          async () => {
+            const approvalTx = await approveErc20(requestData!, signer);
+            await approvalTx.wait();
+            approved = true;
+          },
+        [Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY]: async () => {
+          const approvalTx = await approveErc20ForProxyConversion(
+            requestData!,
+            paymentCurrencies[0]?.address,
+            signer
+          );
+          await approvalTx.wait();
+          approved = true;
+        },
+      };
+
+      if (
+        paymentNetworkExtension?.id &&
+        approvers[paymentNetworkExtension.id]
+      ) {
+        await approvers[paymentNetworkExtension.id]();
+      }
+    } catch (err) {
+      console.error("Something went wrong while approving ERC20: ", err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function switchNetworkIfNeeded(network: string) {
+    try {
+      const targetNetworkId = String(getNetworkIdFromNetworkName(network));
+      await account.connector.switchChain({ chainId: Number(targetNetworkId) });
+      signer = await getEthersSigner(wagmiConfig);
+
+      correctChain = true;
+    } catch (err) {
+      console.error("Something went wrong while switching networks: ", err);
+    }
+  }
+
+  function getNetworkIdFromNetworkName(network: string): string {
+    const networkIds: { [key: string]: string } = {
+      mainnet: "0x1",
+      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];
+  }
+
+  // FIXME: Add rounding functionality
+  function truncateNumberString(
+    value: string,
+    maxDecimalDigits: number
+  ): string {
+    const [integerPart, decimalPart] = value.split(".");
+    return decimalPart
+      ? `${integerPart}.${decimalPart.substring(0, maxDecimalDigits)}`
+      : value;
+  }
+
+  let unwatchAccount: WatchAccountReturnType | undefined;
+
+  onMount(() => {
+    unwatchAccount = watchAccount(wagmiConfig, {
+      onChange(data) {
+        if (data?.address !== account?.address) {
+          account = data;
+          if (account?.address) {
+            getRequests();
+          } else {
+            requests = [];
+            activeRequest = undefined;
+            previousWalletAddress = undefined;
+            previousNetwork = undefined;
+          }
+        }
+      },
+    });
+  });
+
+  onDestroy(() => {
+    if (typeof unwatchAccount === "function") unwatchAccount();
+  });
+</script>
+
+<div
+  class="invoice-view"
+  style="
+--mainColor: {config.colors.main};
+--secondaryColor: {config.colors.secondary};"
+>
+  <div class="dates">
+    <p>Issued on: {formatDate(request?.contentData?.creationDate || "-")}</p>
+    <p>
+      Due by: {formatDate(request?.contentData?.paymentTerms?.dueDate || "-")}
+    </p>
+  </div>
+  <h2 class="invoice-number">
+    Invoice #{request?.contentData?.invoiceNumber || "-"}
+    <StatusLabel status={checkStatus(request)} />
+    <Tooltip text="Download PDF">
+      <Download
+        onClick={async () => {
+          try {
+            await exportToPDF(
+              request,
+              currency,
+              paymentCurrencies,
+              config.logo
+            );
+          } catch (error) {
+            toast.error(`Failed to export PDF`, {
+              description: `${error}`,
+              action: {
+                label: "X",
+                onClick: () => console.info("Close"),
+              },
+            });
+            console.error("Failed to export PDF:", error);
+          }
+        }}
+      />
+    </Tooltip>
+  </h2>
+  <div class="invoice-address">
+    <h2>From:</h2>
+    <p>{request?.payee?.value || "-"}</p>
+  </div>
+  {#if sellerInfo.length > 0}
+    <div class={`invoice-info`}>
+      {#each sellerInfo as { value, isCompany, isEmail }}
+        <p>
+          {#if isEmail}
+            <a href="mailto:{value}" class="email-link">{value}</a>
+          {:else if isCompany}
+            <span class="company-name">{value}</span>
+          {:else}
+            {value}
+          {/if}
+        </p>
+      {/each}
+    </div>
+  {/if}
+  <div class="invoice-border"></div>
+  <div class="invoice-address">
+    <h2>Billed to:</h2>
+    <p>{request?.payer?.value || "-"}</p>
+  </div>
+  {#if buyerInfo.length > 0}
+    <div class={`invoice-info`}>
+      {#each buyerInfo as { value, isCompany, isEmail }}
+        <p>
+          {#if isEmail}
+            <a href="mailto:{value}" class="email-link">{value}</a>
+          {:else if isCompany}
+            <span class="company-name">{value}</span>
+          {:else}
+            {value}
+          {/if}
+        </p>
+      {/each}
+    </div>
+  {/if}
+
+  <h3 class="invoice-info-payment">
+    <span style="font-weight: 500;">Payment Chain:</span>
+    {paymentCurrencies && paymentCurrencies.length > 0
+      ? paymentCurrencies[0]?.network || "-"
+      : ""}
+  </h3>
+  <h3 class="invoice-info-payment">
+    <span style="font-weight: 500;">Invoice Currency:</span>
+    {currency?.symbol || "-"}
+  </h3>
+
+  <h3 class="invoice-info-payment">
+    <span style="font-weight: 500;">Settlement Currency:</span>
+    {paymentCurrencies && paymentCurrencies.length > 0
+      ? paymentCurrencies[0]?.symbol || "-"
+      : ""}
+  </h3>
+
+  {#if request?.contentData?.invoiceItems}
+    <div class="table-container">
+      <table class="invoice-table">
+        <thead class="table-header">
+          <tr class="table-row">
+            <th scope="col" class="table-header-cell description"
+              >Description</th
+            >
+            <th scope="col" class="table-header-cell">Qty</th>
+            <th scope="col" class="table-header-cell">Unit Price</th>
+            <th scope="col" class="table-header-cell">Discount</th>
+            <th scope="col" class="table-header-cell">Tax</th>
+            <th scope="col" class="table-header-cell">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each firstItems as item, index (index)}
+            <tr class="table-row item-row">
+              <th scope="row" class="item-description">
+                <p class="truncate description-text">{item.name || "-"}</p>
+              </th>
+              <td>{item.quantity || "-"}</td>
+              <td
+                >{item.unitPrice
+                  ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
+                  : "-"}</td
+              >
+              <td
+                >{item.discount
+                  ? formatUnits(item.discount, currency?.decimals ?? 18)
+                  : "-"}</td
+              >
+              <td>{Number(item.tax.amount || "-")}</td>
+              <td
+                >{truncateNumberString(
+                  formatUnits(
+                    // @ts-expect-error
+                    calculateItemTotal(item),
+                    currency?.decimals ?? 18
+                  ),
+                  2
+                )}</td
+              >
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+    {#if otherItems.length > 0}
+      <Accordion title="View All">
+        <div class="table-container">
+          <table class="invoice-table">
+            <thead class="table-header hidden-header" style="display: none;">
+              <tr class="table-row">
+                <th scope="col" class="table-header-cell">Description</th>
+                <th scope="col" class="table-header-cell">Qty</th>
+                <th scope="col" class="table-header-cell">Unit Price</th>
+                <th scope="col" class="table-header-cell">Discount</th>
+                <th scope="col" class="table-header-cell">Tax</th>
+                <th scope="col" class="table-header-cell">Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each otherItems as item, index (index)}
+                <tr class="table-row item-row">
+                  <th scope="row" class="item-description">
+                    <p class="truncate description-text" style="margin: 4px 0;">
+                      {item.name || "-"}
+                    </p>
+                  </th>
+                  <td>{item.quantity || "-"}</td>
+                  <td
+                    >{item.unitPrice
+                      ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
+                      : "-"}</td
+                  >
+                  <td
+                    >{item.discount
+                      ? formatUnits(item.discount, currency?.decimals ?? 18)
+                      : "-"}</td
+                  >
+                  <td>{Number(item.tax.amount || "-")}</td>
+                  <td
+                    >{truncateNumberString(
+                      formatUnits(
+                        // @ts-expect-error
+                        calculateItemTotal(item),
+                        currency?.decimals ?? 18
+                      ),
+                      2
+                    )}</td
+                  >
+                </tr>
+              {/each}</tbody
+            >
+          </table>
+        </div>
+      </Accordion>
+    {/if}
+  {/if}
+  {#if request?.contentData.note}
+    <div class="note-container">
+      <p class="note-content">
+        <span class="note-title">Memo:</span> <br />
+        {request.contentData.note || "-"}
+      </p>
+    </div>
+  {/if}
+  <div class="labels-container">
+    {#if request?.contentData?.miscellaneous?.labels}
+      {#each request?.contentData?.miscellaneous?.labels as label, index (index)}
+        <div class="label">
+          {label || "-"}
+        </div>
+      {/each}
+    {/if}
+  </div>
+  <div class="status-container">
+    <div class="statuses">
+      {#if statuses.length > 0 && loading}
+        {#each statuses as status, index (index)}
+          <div class="status">
+            {status || "-"}
+            {#if (index === 0 && statuses.length === 2) || (index === 1 && statuses.length === 3)}
+              <i>
+                <Check />
+              </i>
+            {/if}
+          </div>
+        {/each}
+      {/if}
+    </div>
+
+    <div class="invoice-view-actions">
+      {#if loading}
+        <div class="loading">Loading...</div>
+      {:else if !correctChain && !isPayee}
+        <Button
+          type="button"
+          text="Switch Network"
+          padding="px-[12px] py-[6px]"
+          onClick={() => switchNetworkIfNeeded(network || "mainnet")}
+        />
+      {:else if !approved && !isPaid && !isPayee && !unsupportedNetwork}
+        <Button
+          type="button"
+          text="Approve"
+          padding="px-[12px] py-[6px]"
+          onClick={approve}
+        />
+      {:else if approved && !isPaid && !isPayee && !unsupportedNetwork}
+        <Button
+          type="button"
+          text="Pay"
+          padding="px-[12px] py-[6px]"
+          onClick={payTheRequest}
+        />
+      {/if}
+    </div>
+  </div>
+  {#if unsupportedNetwork}
+    <div class="unsupported-network">Unsupported payment network!</div>
+  {/if}
+</div>
+
+<style>
+  .invoice-view {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: white;
+    width: 100%;
+    height: fit-content;
+  }
+
+  .dates {
+    position: absolute;
+    right: 3.5rem;
+  }
+
+  .invoice-number {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .invoice-number svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  .invoice-address {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .invoice-address h2 {
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .invoice-address p {
+    font-size: 0.875rem;
+    margin: 0;
+  }
+
+  .invoice-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: fit-content;
+    color: #6e7480;
+    font-size: 16px;
+  }
+
+  .invoice-info p {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+  }
+
+  .invoice-info p span {
+    font-weight: 500;
+    color: #71717a;
+  }
+
+  .invoice-border {
+    border-bottom: 1px solid var(--mainColor);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+
+  .invoice-info-payment {
+    display: flex;
+    flex-direction: column;
+    text-transform: capitalize;
+    margin: 0;
+  }
+
+  .invoice-info-payment {
+    font-size: 1rem;
+    font-weight: 500;
+    color: #71717a;
+  }
+
+  .invoice-info-payment span {
+    color: black;
+  }
+
+  .table-container {
+    position: relative;
+    overflow-x: auto;
+  }
+
+  .invoice-table {
+    width: 100%;
+    text-align: left;
+    font-size: 0.875rem;
+  }
+
+  .table-header {
+    text-transform: uppercase;
+    background-color: #e0e0e0;
+  }
+
+  .table-row {
+    text-align: left;
+  }
+
+  .table-header-cell {
+    padding: 0.75rem 0.5rem;
+  }
+
+  @media only screen and (max-width: 880px) {
+    .table-header-cell {
+      white-space: nowrap;
+    }
+  }
+
+  .table-header-cell.description {
+    padding-left: 0.5rem;
+  }
+
+  .item-row {
+    border-bottom: 1px solid black;
+  }
+
+  .item-description {
+    padding-left: 0.5rem;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .truncate {
+    display: block;
+    width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .hidden-header {
+    opacity: 0;
+  }
+
+  .note-container {
+    background-color: #f5f5f5;
+    padding: 10px;
+  }
+
+  .note-content {
+    width: fit-content;
+    word-break: break-all;
+  }
+
+  .note-title {
+    font-weight: 600;
+  }
+
+  .labels-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    max-width: 300px;
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    color: white;
+    background-color: black;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+    cursor: pointer;
+  }
+
+  .status-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+    margin-top: 1rem;
+  }
+
+  .statuses {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .status {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-align: center;
+    border-radius: 0.5rem;
+    background-color: var(--mainColor);
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .invoice-view-actions {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :global(.invoice-view-actions button) {
+    padding: 6px 14px !important;
+    width: fit-content !important;
+    height: fit-content !important;
+  }
+
+  .loading {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-align: center;
+    border-radius: 0.5rem;
+    background-color: var(--mainColor);
+    color: white;
+    animation: pulse 1s infinite;
+  }
+
+  .unsupported-network {
+    font-size: 12px;
+    color: #e89e14ee;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .label {
+    background-color: var(--mainColor);
+  }
+
+  .label:hover {
+    background-color: var(--secondaryColor);
+  }
+
+  .bg-green {
+    background-color: #0bb489;
+  }
+
+  .bg-zinc {
+    background-color: #a1a1aa;
+  }
+
+  .bg-zinc-light {
+    background-color: #f4f4f5;
+  }
+
+  .company-name {
+    font-weight: 600 !important;
+  }
+
+  .email-link {
+    color: #6e7480;
+  }
+
+  .email-link:hover {
+    text-decoration: underline;
+  }
+</style>
diff --git a/packages/single-invoice/src/lib/types/index.ts b/packages/single-invoice/src/lib/types/index.ts
new file mode 100644
index 00000000..31e6289e
--- /dev/null
+++ b/packages/single-invoice/src/lib/types/index.ts
@@ -0,0 +1,61 @@
+import type { CURRENCY_ID, NETWORK_LABEL } from "../utils/currencies";
+
+export interface Address {
+  "street-address"?: string;
+  locality?: string;
+  region?: string;
+  "country-name"?: string;
+  "postal-code"?: string;
+}
+
+export interface SellerInfo {
+  logo?: string;
+  name?: string;
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+  businessName?: string;
+  phone?: string;
+  address?: Address;
+  taxRegistration?: string;
+  companyRegistration?: string;
+}
+
+export interface BuyerInfo {
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+  businessName?: string;
+  phone?: string;
+  address?: Address;
+  taxRegistration?: string;
+  companyRegistration?: string;
+}
+
+export type ProductInfo = {
+  name?: string;
+  description?: string;
+  image?: string;
+};
+
+export type AmountInUSD = number;
+
+export type CurrencyID = (typeof CURRENCY_ID)[keyof typeof CURRENCY_ID];
+export type SupportedCurrencies = [CurrencyID, ...CurrencyID[]];
+
+export type Currency = {
+  id: string;
+  hash: string;
+  address?: string;
+  network: keyof typeof NETWORK_LABEL;
+  decimals: number;
+  symbol: string;
+  type: "ERC20" | "ETH";
+  name?: string;
+};
+
+export type PaymentStep =
+  | "currency"
+  | "buyer-info"
+  | "confirmation"
+  | "complete";
diff --git a/packages/single-invoice/src/lib/utils/capitalize.d.ts b/packages/single-invoice/src/lib/utils/capitalize.d.ts
new file mode 100644
index 00000000..87012def
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/capitalize.d.ts
@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;
diff --git a/packages/single-invoice/src/lib/utils/capitalize.ts b/packages/single-invoice/src/lib/utils/capitalize.ts
new file mode 100644
index 00000000..ac21f51c
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/capitalize.ts
@@ -0,0 +1 @@
+export const capitalize = (str: string) => (str && str[0].toUpperCase() + str.slice(1)) || ""
diff --git a/packages/single-invoice/src/lib/utils/chainlink.d.ts b/packages/single-invoice/src/lib/utils/chainlink.d.ts
new file mode 100644
index 00000000..85bae116
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/chainlink.d.ts
@@ -0,0 +1,10 @@
+import { CurrencyTypes } from "@requestnetwork/types";
+import { BigNumber, providers } from "ethers";
+export declare const getChainlinkRate: (from: CurrencyTypes.CurrencyDefinition, to: CurrencyTypes.CurrencyDefinition, { network, provider, currencyManager, }: {
+    network: CurrencyTypes.EvmChainName;
+    provider: providers.Provider;
+    currencyManager: CurrencyTypes.ICurrencyManager;
+}) => Promise<{
+    value: BigNumber;
+    decimals: number;
+} | null>;
diff --git a/packages/single-invoice/src/lib/utils/chainlink.ts b/packages/single-invoice/src/lib/utils/chainlink.ts
new file mode 100644
index 00000000..a7c72b1f
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/chainlink.ts
@@ -0,0 +1,40 @@
+import { isISO4217Currency } from "@requestnetwork/currency";
+import { chainlinkConversionPath } from "@requestnetwork/smart-contracts";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { BigNumber, providers } from "ethers";
+
+export const getChainlinkRate = async (
+  from: CurrencyTypes.CurrencyDefinition,
+  to: CurrencyTypes.CurrencyDefinition,
+  {
+    network,
+    provider,
+    currencyManager,
+  }: {
+    network: CurrencyTypes.EvmChainName;
+    provider: providers.Provider;
+    currencyManager: CurrencyTypes.ICurrencyManager;
+  },
+) => {
+  try {
+    const chainlink = chainlinkConversionPath.connect(network, provider);
+    const path = currencyManager.getConversionPath(from, to, network);
+    if (!path) return null;
+    const result = await chainlink.getRate(path);
+    if (!result) return null;
+
+    // ChainlinkConversionPath uses 8 decimals for fiat.
+    const fromDecimals = isISO4217Currency(from) ? 8 : from.decimals;
+    const toDecimals = isISO4217Currency(to) ? 8 : to.decimals;
+    const value = result.rate
+      .mul(BigNumber.from(10).pow(fromDecimals))
+      .div(BigNumber.from(10).pow(toDecimals));
+    return {
+      value,
+      decimals: result.decimals.toString().length - 1,
+    };
+  } catch (e) {
+    console.error('Error fetching Chainlink rate:', e);
+    return null;
+  }
+};
diff --git a/packages/single-invoice/src/lib/utils/conversion.d.ts b/packages/single-invoice/src/lib/utils/conversion.d.ts
new file mode 100644
index 00000000..de34c35e
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/conversion.d.ts
@@ -0,0 +1,13 @@
+import { CurrencyTypes } from "@requestnetwork/types";
+import { providers } from "ethers";
+export declare const lowVolatilityTokens: string[];
+export declare const getSlippageMargin: (currency: CurrencyTypes.CurrencyInput) => 1.03 | 1.01;
+/**
+ * Get the conversion rate between two currencies.
+ */
+export declare const getConversionRate: ({ from, to, currencyManager, provider, }: {
+    from: CurrencyTypes.CurrencyDefinition;
+    to: CurrencyTypes.CurrencyDefinition;
+    currencyManager?: CurrencyTypes.ICurrencyManager;
+    provider?: providers.Provider;
+}) => Promise<number | undefined>;
diff --git a/packages/single-invoice/src/lib/utils/conversion.ts b/packages/single-invoice/src/lib/utils/conversion.ts
new file mode 100644
index 00000000..e42a6da3
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/conversion.ts
@@ -0,0 +1,50 @@
+import { isISO4217Currency } from "@requestnetwork/currency";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { EvmChainName } from "@requestnetwork/types/dist/currency-types";
+import { providers, utils } from "ethers";
+import { getChainlinkRate } from './chainlink'
+
+/**
+ * Maximum slippage (swap) or conversion evolution (conversion pn)
+ */
+const MAX_SLIPPAGE_DEFAULT = 1.03;
+const MAX_SLIPPAGE_LOW_VOLATILITY = 1.01;
+export const lowVolatilityTokens = ["DAI", "USDC", "USDT"];
+
+export const getSlippageMargin = (currency: CurrencyTypes.CurrencyInput) => {
+  return lowVolatilityTokens.includes(currency.symbol)
+    ? MAX_SLIPPAGE_LOW_VOLATILITY
+    : MAX_SLIPPAGE_DEFAULT;
+};
+
+/**
+ * Get the conversion rate between two currencies.
+ */
+export const getConversionRate = async ({
+  from,
+  to,
+  currencyManager,
+  provider,
+}: {
+  from: CurrencyTypes.CurrencyDefinition;
+  to: CurrencyTypes.CurrencyDefinition;
+  currencyManager?: CurrencyTypes.ICurrencyManager;
+  provider?: providers.Provider;
+}): Promise<number | undefined> => {
+  if (!isISO4217Currency(to) && currencyManager && provider) {
+    const network = to.network as EvmChainName;
+    try {
+      const chainlinkRate = await getChainlinkRate(from, to, {
+        network,
+        currencyManager,
+        provider,
+      });
+      if (chainlinkRate) {
+        return Number(utils.formatUnits(chainlinkRate.value, chainlinkRate.decimals))
+      }
+    } catch (e) {
+      console.error("Error getting chainlink rate", e);
+      throw e;
+    }
+  }
+};
diff --git a/packages/single-invoice/src/lib/utils/debounce.d.ts b/packages/single-invoice/src/lib/utils/debounce.d.ts
new file mode 100644
index 00000000..5a22f761
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/debounce.d.ts
@@ -0,0 +1 @@
+export declare const debounce: (func: Function, wait: number) => (...args: any[]) => void;
diff --git a/packages/single-invoice/src/lib/utils/debounce.ts b/packages/single-invoice/src/lib/utils/debounce.ts
new file mode 100644
index 00000000..1462f81b
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/debounce.ts
@@ -0,0 +1,11 @@
+export const debounce = (func: Function, wait: number) => {
+  let timeout: NodeJS.Timeout;
+  return (...args: any[]) => {
+    const later = () => {
+      clearTimeout(timeout);
+      func.apply(this, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
diff --git a/packages/single-invoice/src/lib/utils/ethersAdapterProvider.d.ts b/packages/single-invoice/src/lib/utils/ethersAdapterProvider.d.ts
new file mode 100644
index 00000000..e6b4285b
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/ethersAdapterProvider.d.ts
@@ -0,0 +1,6 @@
+import { providers } from "ethers";
+import type { Chain, Client, Transport } from "viem";
+export declare function clientToProvider(client: Client<Transport, Chain>): providers.JsonRpcProvider | providers.FallbackProvider;
+export declare function useEthersProvider({ chainId, }?: {
+    chainId?: number | undefined;
+}): providers.JsonRpcProvider | providers.FallbackProvider | undefined;
diff --git a/packages/single-invoice/src/lib/utils/formatAddress.d.ts b/packages/single-invoice/src/lib/utils/formatAddress.d.ts
new file mode 100644
index 00000000..8c3caee1
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/formatAddress.d.ts
@@ -0,0 +1 @@
+export declare const formatAddress: (address: string, first?: number, last?: number) => string;
diff --git a/packages/single-invoice/src/lib/utils/formatAddress.ts b/packages/single-invoice/src/lib/utils/formatAddress.ts
new file mode 100644
index 00000000..cf55278b
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/formatAddress.ts
@@ -0,0 +1,16 @@
+import { getAddress } from "viem";
+import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
+
+export const formatAddress = (
+  address: string,
+  first: number = 6,
+  last: number = 4
+): string => {
+  if (!checkAddress(address)) {
+    console.error("Invalid address!");
+  }
+
+  const checksumAddress = getAddress(address);
+
+  return `${checksumAddress.slice(0, first)}...${checksumAddress.slice(-last)}`;
+};
diff --git a/packages/single-invoice/src/lib/utils/generateInvoice.d.ts b/packages/single-invoice/src/lib/utils/generateInvoice.d.ts
new file mode 100644
index 00000000..b00d0a1b
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/generateInvoice.d.ts
@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        html2pdf: any;
+    }
+}
+export declare const exportToPDF: (invoice: any, currency: any, logo: string) => Promise<void>;
diff --git a/packages/single-invoice/src/lib/utils/getConversionPaymentValues.d.ts b/packages/single-invoice/src/lib/utils/getConversionPaymentValues.d.ts
new file mode 100644
index 00000000..02b4ebf6
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/getConversionPaymentValues.d.ts
@@ -0,0 +1,42 @@
+import { CurrencyManager } from "@requestnetwork/currency";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { BigNumber, BigNumberish, providers } from "ethers";
+export type SlippageLevel = "safe" | "risky";
+interface ConversionPaymentValues {
+    conversion: {
+        currency: CurrencyTypes.ICurrency;
+        maxToSpend: string;
+        currencyManager: CurrencyManager;
+    };
+    slippageLevel: SlippageLevel;
+    totalAmountInPaymentCurrency: {
+        value: number;
+        currency: CurrencyTypes.CurrencyDefinition;
+    };
+    safeBalance: {
+        value: number;
+        currency: CurrencyTypes.CurrencyDefinition;
+    };
+    rate: string;
+}
+export declare const formatUnits: (amount: BigNumber, token: CurrencyTypes.CurrencyDefinition) => string;
+export declare const toFixedDecimal: (numberToFormat: number, decimals?: number) => number;
+export declare const amountToFixedDecimal: (amount: BigNumberish, currency: CurrencyTypes.CurrencyDefinition, decimals?: number) => number;
+/**
+ * Converts a number, even floating, to a BigNumber
+ * @param amount Number to convert, may float
+ * @param token Token
+ */
+export declare const bigAmountify: (amount: number, token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">) => BigNumber;
+/**
+ * Utility method to compute various settings associated to a payment involving conversion only
+ */
+export declare const getConversionPaymentValues: ({ baseAmount, denominationCurrency, selectedPaymentCurrency, currencyManager, provider, fromAddress, }: {
+    baseAmount: number;
+    denominationCurrency: CurrencyTypes.CurrencyDefinition;
+    selectedPaymentCurrency: CurrencyTypes.CurrencyDefinition;
+    currencyManager: CurrencyManager;
+    provider?: providers.Provider;
+    fromAddress?: string;
+}) => Promise<ConversionPaymentValues | undefined>;
+export {};
diff --git a/packages/single-invoice/src/lib/utils/getConversionPaymentValues.ts b/packages/single-invoice/src/lib/utils/getConversionPaymentValues.ts
new file mode 100644
index 00000000..4afc8b6e
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/getConversionPaymentValues.ts
@@ -0,0 +1,168 @@
+import { CurrencyManager } from "@requestnetwork/currency";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { getAnyErc20Balance } from "@requestnetwork/payment-processor";
+import { BigNumber, BigNumberish, providers, utils } from "ethers";
+
+import { getConversionRate, getSlippageMargin } from './conversion'
+
+export type SlippageLevel = "safe" | "risky";
+
+interface ConversionPaymentValues {
+  conversion: {
+    currency: CurrencyTypes.ICurrency;
+    maxToSpend: string;
+    currencyManager: CurrencyManager;
+  };
+  slippageLevel: SlippageLevel;
+  totalAmountInPaymentCurrency: {
+    value: number;
+    currency: CurrencyTypes.CurrencyDefinition;
+  };
+  safeBalance: {
+    value: number;
+    currency: CurrencyTypes.CurrencyDefinition;
+  };
+  rate: string;
+}
+
+export const formatUnits = (
+  amount: BigNumber,
+  token: CurrencyTypes.CurrencyDefinition,
+): string => {
+  return utils.formatUnits(amount, token.decimals);
+};
+
+export const toFixedDecimal = (numberToFormat: number, decimals?: number) => {
+  const MAX_DECIMALS = decimals !== undefined ? decimals : 5;
+  return Number(numberToFormat.toFixed(MAX_DECIMALS));
+};
+
+export const amountToFixedDecimal = (
+  amount: BigNumberish,
+  currency: CurrencyTypes.CurrencyDefinition,
+  decimals?: number,
+) => {
+  return toFixedDecimal(
+    Number.parseFloat(formatUnits(BigNumber.from(amount), currency)),
+    decimals,
+  );
+};
+
+/**
+ * Converts a number, even floating, to a BigNumber
+ * @param amount Number to convert, may float
+ * @param token Token
+ */
+export const bigAmountify = (
+  amount: number,
+  token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">,
+): BigNumber => {
+  let [whole, decimals] = amount.toString().split(".");
+  let pow = "0";
+  let powSign = true;
+
+  if (decimals && decimals.includes("e")) {
+    powSign = !decimals.includes("e-");
+    [decimals, pow] = powSign ? decimals.split("e") : decimals.split("e-");
+    whole = whole;
+  }
+
+  const wholeBn = utils.parseUnits(whole, token.decimals);
+  const power = BigNumber.from(10).pow(pow);
+
+  if (decimals) {
+    const decimalsBn = utils
+      .parseUnits(decimals, token.decimals)
+      .div(BigNumber.from(10).pow(decimals.length));
+    return powSign
+      ? wholeBn.add(decimalsBn).mul(power)
+      : wholeBn.add(decimalsBn).div(power);
+  }
+  return wholeBn;
+};
+
+/**
+ * Utility method to compute various settings associated to a payment involving conversion only
+ */
+export const getConversionPaymentValues = async ({
+  baseAmount,
+  denominationCurrency,
+  selectedPaymentCurrency,
+  currencyManager,
+  provider,
+  fromAddress,
+}: {
+  baseAmount: number;
+  denominationCurrency: CurrencyTypes.CurrencyDefinition;
+  selectedPaymentCurrency: CurrencyTypes.CurrencyDefinition;
+  currencyManager: CurrencyManager;
+  provider?: providers.Provider;
+  fromAddress?: string;
+}): Promise<ConversionPaymentValues | undefined> => {
+  const conversionRate = await getConversionRate({
+    from: denominationCurrency,
+    to: selectedPaymentCurrency,
+    currencyManager,
+    provider,
+  });
+
+  const minConversionAmount = bigAmountify(
+    baseAmount * Number(conversionRate),
+    selectedPaymentCurrency,
+  );
+
+  const safeConversionAmount = bigAmountify(
+    baseAmount * Number(conversionRate) * getSlippageMargin(selectedPaymentCurrency),
+    selectedPaymentCurrency,
+  );
+
+  const userBalance = BigNumber.from(
+    fromAddress &&
+      provider &&
+      "address" in selectedPaymentCurrency &&
+      selectedPaymentCurrency.address
+      ? await getAnyErc20Balance(
+          selectedPaymentCurrency.address,
+          fromAddress,
+          provider,
+        )
+      : safeConversionAmount,
+  );
+
+  const hasEnoughForSlippage = userBalance.gte(safeConversionAmount);
+  const hasEnough = userBalance.gte(minConversionAmount);
+  const isRisky = hasEnough && !hasEnoughForSlippage;
+  const slippageLevel = isRisky ? "risky" : ("safe" as SlippageLevel);
+  const conversionAmount = isRisky ? userBalance : safeConversionAmount;
+
+  const conversion = {
+    currency: CurrencyManager.toStorageCurrency(selectedPaymentCurrency),
+    maxToSpend: conversionAmount.toString(),
+    currencyManager,
+  };
+
+  const totalAmountInPaymentCurrency = {
+    value: amountToFixedDecimal(
+      minConversionAmount,
+      selectedPaymentCurrency,
+      4,
+    ),
+    currency: selectedPaymentCurrency,
+  };
+  const safeBalance = {
+    value: amountToFixedDecimal(
+      safeConversionAmount,
+      selectedPaymentCurrency,
+      4,
+    ),
+    currency: selectedPaymentCurrency,
+  };
+
+  return {
+    conversion,
+    slippageLevel,
+    totalAmountInPaymentCurrency,
+    safeBalance,
+    rate: conversionRate,
+  };
+};
diff --git a/packages/single-invoice/src/lib/utils/index.d.ts b/packages/single-invoice/src/lib/utils/index.d.ts
new file mode 100644
index 00000000..97101620
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/index.d.ts
@@ -0,0 +1,4 @@
+export { debounce } from "./debounce";
+export { formatAddress } from "./formatAddress";
+export { publicClientToProvider, getEthersSigner } from "./wallet-utils";
+export { capitalize } from "./capitalize";
diff --git a/packages/single-invoice/src/lib/utils/index.ts b/packages/single-invoice/src/lib/utils/index.ts
new file mode 100644
index 00000000..97101620
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/index.ts
@@ -0,0 +1,4 @@
+export { debounce } from "./debounce";
+export { formatAddress } from "./formatAddress";
+export { publicClientToProvider, getEthersSigner } from "./wallet-utils";
+export { capitalize } from "./capitalize";
diff --git a/packages/single-invoice/src/lib/utils/loadScript.d.ts b/packages/single-invoice/src/lib/utils/loadScript.d.ts
new file mode 100644
index 00000000..4d5f7e32
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/loadScript.d.ts
@@ -0,0 +1 @@
+export declare const loadScript: (src: string) => Promise<void>;
diff --git a/packages/single-invoice/src/lib/utils/wallet-utils.d.ts b/packages/single-invoice/src/lib/utils/wallet-utils.d.ts
new file mode 100644
index 00000000..961786b6
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/wallet-utils.d.ts
@@ -0,0 +1,8 @@
+import { Config } from "@wagmi/core";
+import { providers } from "ethers";
+import type { Account, Chain, Client, Transport } from "viem";
+export declare const publicClientToProvider: (publicClient: any) => providers.JsonRpcProvider;
+export declare function clientToSigner(client: Client<Transport, Chain, Account>): providers.JsonRpcSigner;
+export declare function getEthersSigner(config: Config, { chainId }?: {
+    chainId?: number;
+}): Promise<providers.JsonRpcSigner | undefined>;
diff --git a/packages/single-invoice/src/lib/utils/wallet-utils.ts b/packages/single-invoice/src/lib/utils/wallet-utils.ts
new file mode 100644
index 00000000..e6aa563f
--- /dev/null
+++ b/packages/single-invoice/src/lib/utils/wallet-utils.ts
@@ -0,0 +1,38 @@
+import { Config, getConnectorClient } from "@wagmi/core";
+import { providers } from "ethers";
+import type { Account, Chain, Client, Transport } from "viem";
+
+export const publicClientToProvider = (publicClient: any) => {
+  const { chains, provider } = publicClient;
+  const network = {
+    chainId: parseInt(chains[0].id, 16),
+    name: chains[0].name,
+  };
+
+  return new providers.JsonRpcProvider(provider.url as string, network);
+};
+
+export function clientToSigner(client: Client<Transport, Chain, Account>) {
+  const { account, chain, transport } = client;
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  };
+
+  const provider = new providers.Web3Provider(transport, network);
+  const signer = provider.getSigner(account.address);
+  return signer;
+}
+
+export async function getEthersSigner(
+  config: Config,
+  { chainId }: { chainId?: number } = {}
+) {
+  try {
+    const client = await getConnectorClient(config, { chainId });
+    return clientToSigner(client);
+  } catch (e) {
+    console.log("Failed to obtain client from getConnectorClient");
+  }
+}
diff --git a/packages/single-invoice/svelte.config.js b/packages/single-invoice/svelte.config.js
new file mode 100644
index 00000000..919755ca
--- /dev/null
+++ b/packages/single-invoice/svelte.config.js
@@ -0,0 +1,11 @@
+import { vitePreprocess } from "@sveltejs/kit/vite";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  compilerOptions: {
+    customElement: true,
+  },
+};
+
+export default config;
diff --git a/packages/single-invoice/tsconfig.json b/packages/single-invoice/tsconfig.json
new file mode 100644
index 00000000..7766439c
--- /dev/null
+++ b/packages/single-invoice/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "typeRoots": ["./src/types", "./node_modules/@types"],
+    "baseUrl": ".",
+    "paths": {
+      "$src/*": ["src/*"],
+      "$utils/*": ["src/lib/utils/*"]
+    }
+  },
+  "include": ["src/**/*", "src/*.d.ts"]
+}
diff --git a/packages/single-invoice/tsconfig.react.json b/packages/single-invoice/tsconfig.react.json
new file mode 100644
index 00000000..f4c55ad0
--- /dev/null
+++ b/packages/single-invoice/tsconfig.react.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/react",
+    "declaration": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2017", "DOM"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "allowJs": true,
+    "noImplicitAny": false,
+    "strict": false
+  },
+  "include": ["src/lib/react/**/*"]
+}
diff --git a/packages/single-invoice/vite.config.ts b/packages/single-invoice/vite.config.ts
new file mode 100644
index 00000000..b1edb182
--- /dev/null
+++ b/packages/single-invoice/vite.config.ts
@@ -0,0 +1,5 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [sveltekit()],
+});
diff --git a/packages/single-invoice/vite.wc.config.ts b/packages/single-invoice/vite.wc.config.ts
new file mode 100644
index 00000000..2526415a
--- /dev/null
+++ b/packages/single-invoice/vite.wc.config.ts
@@ -0,0 +1,42 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+export default defineConfig({
+  define: {
+    global: "globalThis",
+  },
+  plugins: [
+    nodePolyfills({
+      include: ["buffer", "crypto"],
+      exclude: ["http", "stream", "zlib", "assert"],
+    }),
+    svelte({
+      compilerOptions: {
+        customElement: true,
+      },
+    }),
+  ],
+  build: {
+    emptyOutDir: false,
+    sourcemap: true,
+    target: "modules",
+    lib: {
+      entry: "./src/lib/index.ts",
+      name: "<<name>>",
+      fileName: "web-component",
+    },
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});
diff --git a/shared/components/status-label.svelte b/shared/components/status-label.svelte
new file mode 100644
index 00000000..3503b755
--- /dev/null
+++ b/shared/components/status-label.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { capitalize } from "../utils/capitalize";
+
+  export let status: string;
+
+  let statusClass = "";
+
+  $: {
+    switch (status.toLowerCase()) {
+      case "paid":
+        statusClass = "status-paid";
+        break;
+      case "partially paid":
+        statusClass = "status-partially-paid";
+        break;
+      case "accepted":
+        statusClass = "status-accepted";
+        break;
+      case "awaiting payment":
+        statusClass = "status-created";
+        break;
+      case "canceled":
+        statusClass = "status-canceled";
+        break;
+      case "rejected":
+        statusClass = "status-rejected";
+        break;
+      case "overdue":
+        statusClass = "status-overdue";
+        break;
+      case "pending":
+        statusClass = "status-pending";
+        break;
+      default:
+        statusClass = "status-created";
+    }
+  }
+</script>
+
+<div class={`status-indicator ${statusClass}`}>
+  {capitalize(status)}
+</div>
+
+<style>
+  .status-indicator {
+    text-align: center;
+    padding: 6px 12px;
+    text-align: center;
+    width: fit-content;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+
+  .status-paid {
+    color: #328965;
+    background-color: rgba(88, 225, 165, 0.15);
+  }
+
+  .status-partially-paid {
+    color: #328965;
+    background: linear-gradient(
+      135deg,
+      rgba(88, 225, 165, 0.2) 25%,
+      white 25%,
+      white 50%,
+      rgba(88, 225, 165, 0.2) 50%,
+      rgba(88, 225, 165, 0.2) 75%,
+      white 75%,
+      white 100%
+    );
+    background-size: 20px 20px;
+  }
+
+  .status-accepted {
+    color: #006ebe;
+    background-color: rgba(90, 186, 255, 0.15);
+  }
+
+  .status-created {
+    color: #c99101;
+    background-color: rgba(255, 197, 49, 0.15);
+  }
+
+  .status-canceled {
+    color: #212121;
+    background-color: rgba(37, 37, 37, 0.15);
+  }
+
+  .status-rejected {
+    color: #d9601c;
+    background-color: rgba(255, 135, 67, 0.15);
+  }
+
+  .status-overdue {
+    color: #d91c1c;
+    background-color: rgba(255, 49, 49, 0.15);
+  }
+
+  .status-pending {
+    color: #7b7b7b;
+    background-color: rgba(224, 224, 224, 0.15);
+  }
+</style>
diff --git a/shared/utils/capitalize.ts b/shared/utils/capitalize.ts
new file mode 100644
index 00000000..30824cd3
--- /dev/null
+++ b/shared/utils/capitalize.ts
@@ -0,0 +1,2 @@
+export const capitalize = (str: string) =>
+  (str && str[0].toUpperCase() + str.slice(1)) || "";
diff --git a/shared/utils/checkStatus.ts b/shared/utils/checkStatus.ts
new file mode 100644
index 00000000..2bba38e9
--- /dev/null
+++ b/shared/utils/checkStatus.ts
@@ -0,0 +1,37 @@
+import { capitalize } from "./capitalize";
+import { Types } from "@requestnetwork/request-client.js";
+
+export const checkStatus = (request: Types.IRequestDataWithEvents | null) => {
+  const balance = BigInt(request?.balance?.balance ?? 0);
+  const expectedAmount = BigInt(request?.expectedAmount ?? 0);
+  const today = new Date();
+  const dueDate = new Date(request?.contentData?.paymentTerms?.dueDate);
+  const isPaid = balance >= expectedAmount ? "Paid" : "Partially Paid";
+
+  const eventStatus = {
+    reject: "Rejected",
+    cancel: "Canceled",
+  };
+
+  for (const [event, status] of Object.entries(eventStatus)) {
+    if (
+      request?.events?.some(
+        (e: { name?: string }) => e?.name?.toLowerCase() === event.toLowerCase()
+      )
+    ) {
+      return capitalize(status);
+    }
+  }
+
+  if (dueDate < today) {
+    if (balance === BigInt(0)) {
+      return "Overdue";
+    }
+    return isPaid;
+  } else {
+    if (balance === BigInt(0)) {
+      return "Awaiting Payment";
+    }
+    return isPaid;
+  }
+};

From d3a2a49890940ae322ab73c5b1f803c9ff23d727 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Thu, 9 Jan 2025 14:18:45 +0100
Subject: [PATCH 02/18] feat: updated and cleaned single invoice component,
 removed unused variables, updated package.json, updated configs

---
 package-lock.json                             |   35 +
 packages/single-invoice/README.md             |   53 -
 packages/single-invoice/package.json          |   30 +-
 .../src/lib/react/SingleInvoice.d.ts          |   21 +-
 .../src/lib/single-invoice.svelte             | 1193 +++++++++++------
 .../single-invoice/src/lib/types/index.ts     |   61 -
 .../src/{lib => }/utils/capitalize.d.ts       |    0
 .../src/{lib => }/utils/capitalize.ts         |    0
 .../src/{lib => }/utils/chainlink.d.ts        |    0
 .../src/{lib => }/utils/chainlink.ts          |    0
 .../src/{lib => }/utils/conversion.d.ts       |    0
 .../src/{lib => }/utils/conversion.ts         |    0
 .../src/{lib => }/utils/debounce.d.ts         |    0
 .../src/{lib => }/utils/debounce.ts           |    0
 .../utils/ethersAdapterProvider.d.ts          |    0
 .../src/{lib => }/utils/formatAddress.d.ts    |    0
 .../src/{lib => }/utils/formatAddress.ts      |    0
 .../src/{lib => }/utils/generateInvoice.d.ts  |    0
 .../utils/getConversionPaymentValues.d.ts     |    0
 .../utils/getConversionPaymentValues.ts       |    0
 .../src/{lib => }/utils/index.d.ts            |    0
 .../src/{lib => }/utils/index.ts              |    0
 .../src/{lib => }/utils/loadScript.d.ts       |    0
 .../src/{lib => }/utils/wallet-utils.d.ts     |    0
 .../src/{lib => }/utils/wallet-utils.ts       |    0
 packages/single-invoice/svelte.config.js      |    8 +
 packages/single-invoice/vite.config.ts        |    1 +
 ...s.timestamp-1736352084979-555798874d03.mjs |   10 +
 packages/single-invoice/vite.wc.config.ts     |    5 -
 29 files changed, 906 insertions(+), 511 deletions(-)
 delete mode 100644 packages/single-invoice/README.md
 delete mode 100644 packages/single-invoice/src/lib/types/index.ts
 rename packages/single-invoice/src/{lib => }/utils/capitalize.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/capitalize.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/chainlink.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/chainlink.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/conversion.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/conversion.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/debounce.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/debounce.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/ethersAdapterProvider.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/formatAddress.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/formatAddress.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/generateInvoice.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/getConversionPaymentValues.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/getConversionPaymentValues.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/index.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/index.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/loadScript.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/wallet-utils.d.ts (100%)
 rename packages/single-invoice/src/{lib => }/utils/wallet-utils.ts (100%)
 create mode 100644 packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs

diff --git a/package-lock.json b/package-lock.json
index e32a86da..52edcd3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2964,6 +2964,10 @@
       "resolved": "shared/utils",
       "link": true
     },
+    "node_modules/@requestnetwork/single-invoice": {
+      "resolved": "packages/single-invoice",
+      "link": true
+    },
     "node_modules/@requestnetwork/smart-contracts": {
       "version": "0.43.0",
       "resolved": "https://registry.npmjs.org/@requestnetwork/smart-contracts/-/smart-contracts-0.43.0.tgz",
@@ -11436,6 +11440,37 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "packages/single-invoice": {
+      "name": "@requestnetwork/single-invoice",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@requestnetwork/payment-detection": "0.49.0",
+        "@requestnetwork/payment-processor": "0.52.0",
+        "@requestnetwork/request-client.js": "0.54.0",
+        "@wagmi/core": "^2.15.2",
+        "ethers": "^5.7.2",
+        "viem": "^2.21.53",
+        "wagmi": "^2.13.3"
+      },
+      "devDependencies": {
+        "@sveltejs/adapter-auto": "^2.0.0",
+        "@sveltejs/kit": "^1.27.4",
+        "@sveltejs/package": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^2.5.2",
+        "publint": "^0.1.9",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "svelte": "^4.0.5",
+        "svelte-check": "^3.6.0",
+        "typescript": "^5.0.0",
+        "vite": "^4.4.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "shared/components": {
       "name": "@requestnetwork/shared-components",
       "license": "MIT",
diff --git a/packages/single-invoice/README.md b/packages/single-invoice/README.md
deleted file mode 100644
index f919758d..00000000
--- a/packages/single-invoice/README.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Request Network Payment Widget Web Component
-
-A web component for accepting crypto payments using Request Network.
-
-## Introduction
-
-The Payment Widget web component is a pre-built component that allows users to offer crypto payment options using Request Network without having to implement it themselves. It is built using Svelte but compiled to a Web Component, making it usuable in any web environment, regardless of the framework.
-
-## Installation
-
-To install the component, use npm:
-
-```bash
-npm install @requestnetwork/payment-widget
-```
-
-## Usage
-
-### Usage in React
-
-```tsx
-import PaymentWidget from "@requestnetwork/payment-widget/react";
-
-export default function PaymentPage() {
-  return (
-    <PaymentWidget
-      sellerInfo={{
-        logo: "https://example.com/logo.png",
-        name: "Example Store",
-      }}
-      productInfo={{
-        name: "Digital Art Collection",
-        description: "A curated collection of digital artworks.",
-        image: "https://example.com/product-image.jpg",
-      }}
-      amountInUSD={1.5}
-      sellerAddress="0x1234567890123456789012345678901234567890"
-      supportedCurrencies={["ETH_MAINNET", "USDC_MAINNET", "USDC_MATIC"]}
-      persistRequest={true}
-      onPaymentSuccess={(request) => {
-        console.log(request);
-      }}
-      onError={(error) => {
-        console.error(error);
-      }}
-    />
-  );
-}
-```
-
-## Additional Information
-
-For more information, see the [Request Network documentation](https://docs.request.network/).
diff --git a/packages/single-invoice/package.json b/packages/single-invoice/package.json
index 46cb1a41..37efc677 100644
--- a/packages/single-invoice/package.json
+++ b/packages/single-invoice/package.json
@@ -32,35 +32,35 @@
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
+  "dependencies": {
+    "@requestnetwork/payment-detection": "0.49.0",
+    "@requestnetwork/payment-processor": "0.52.0",
+    "@requestnetwork/request-client.js": "0.54.0",
+    "@wagmi/core": "^2.15.2",
+    "ethers": "^5.7.2",
+    "viem": "^2.21.53",
+    "wagmi": "^2.13.3"
+  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.27.4",
+    "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^2.5.2",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "^1.77.8",
+    "publint": "^0.1.9",
     "svelte": "^4.0.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "svelte-check": "^3.6.0",
     "typescript": "^5.0.0",
     "vite": "^4.4.2"
   },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@requestnetwork/payment-processor": "0.48.0",
-    "@requestnetwork/request-client.js": "0.50.0",
-    "@requestnetwork/web3-signature": "0.8.1",
-    "@web3modal/ethers5": "^5.0.11",
-    "ethers": "^5.7.2",
-    "vite-plugin-node-polyfills": "^0.22.0"
   }
 }
diff --git a/packages/single-invoice/src/lib/react/SingleInvoice.d.ts b/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
index 988e782b..c56a2e01 100644
--- a/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
+++ b/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
@@ -1,22 +1,37 @@
 import React from "react";
+import { Config as WagmiConfig } from "@wagmi/core";
+import type { IConfig } from "@requestnetwork/shared-types";
+import type { RequestNetwork } from "@requestnetwork/request-client.js";
 
 export interface SingleInvoiceProps {
+  /** The unique identifier of the request/invoice to display */
   requestId: string;
+  /** Configuration object for the Request Network integration */
   config: IConfig;
+  /** Wagmi configuration for Web3 wallet interactions */
   wagmiConfig: WagmiConfig;
+  /** Instance of the Request Network client */
   requestNetwork: RequestNetwork | null | undefined;
-  currencies: CurrencyTypes.CurrencyInput[];
+  /** Currency manager instance for handling different currencies */
+  currencies?: CurrencyTypes.CurrencyInput[];
 }
 
 /**
- * SingleInvoice is a React component that displays a single invoice.
+ * SingleInvoice is a React component that displays and manages a single invoice from the Request Network.
+ *
+ * This component wraps the web component 'single-invoice' and handles the proper passing and updating
+ * of props to ensure the invoice display stays in sync with the provided data.
  *
  * @param {SingleInvoiceProps} props - The component props
  * @returns {JSX.Element}
  *
  * @example
  * <SingleInvoice
- *   requestId="1234567890"
+ *   requestId="01a12b0e600d233f4c18df593f51e7635d394ce3334387ebd0d3782c9976cbc66b"
+ *   config={config}
+ *   wagmiConfig={wagmiConfig}
+ *   requestNetwork={requestNetwork}
+ *   currencies={currencies}
  * />
  */
 declare const SingleInvoice: React.FC<SingleInvoiceProps>;
diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index 2fdd26bd..dfa24f8b 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -1,7 +1,9 @@
+<svelte:options customElement="single-invoice" />
+
 <script lang="ts">
-  import { getAccount, watchAccount } from "@wagmi/core";
+  import type { Config as WagmiConfig } from "@wagmi/core";
   import { toast } from "svelte-sonner";
-  import type { GetAccountReturnType } from "@wagmi/core";
+  import { getAccount,  getBalance } from "@wagmi/core";
   import {
     approveErc20,
     approveErc20ForProxyConversion,
@@ -13,30 +15,27 @@
     Types,
     type RequestNetwork,
   } from "@requestnetwork/request-client.js";
-  import type { Config as WagmiConfig } from "@wagmi/core";
-  import { CurrencyTypes } from "@requestnetwork/types";
+  import {  CurrencyTypes } from "@requestnetwork/types";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CurrencyManager } from "@requestnetwork/currency";
-  import type { IConfig } from "@requestnetwork/shared-types";
-  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
   // Components
   import StatusLabel from "@requestnetwork/shared-components/status-label.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 { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
   import { exportToPDF } from "@requestnetwork/shared-utils/generateInvoice";
+  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
-  import { onMount } from "svelte";
+  import { onMount, onDestroy, tick } from "svelte";
   import { formatUnits } from "viem";
-  import { getConversionPaymentValues } from "./utils/getConversionPaymentValues";
-  import { getEthersSigner } from "./utils";
+  import { getConversionPaymentValues } from "../utils/getConversionPaymentValues";
+  import { getEthersSigner } from "../utils";
 
   interface EntityInfo {
     value: string;
@@ -45,34 +44,34 @@
   }
 
   interface BuyerInfo extends EntityInfo {}
-
   interface SellerInfo extends EntityInfo {}
 
-  export let config: IConfig;
-  export let requestId: string;
+  export let config;
+  export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
+  export let requestId: string;
   export let currencies: CurrencyTypes.CurrencyInput[] = [];
-  export let wagmiConfig: WagmiConfig;
 
-  let account: GetAccountReturnType = wagmiConfig && getAccount(wagmiConfig);
+  let account = getAccount(wagmiConfig);
+  let address = account?.address;
   let currencyManager: CurrencyManager;
-  let request: Types.IRequestDataWithEvents | null = null;
-  let network: string | undefined = request?.currencyInfo?.network || "mainnet";
-  let currency: CurrencyTypes.CurrencyDefinition | undefined =
-    getCurrencyFromManager(request.currencyInfo, currencyManager);
+  let request: Types.IRequestDataWithEvents | undefined;
+  let loading = true;
+  let isRequestPayed = false;
+  let network: string | undefined;
+  let currency: CurrencyTypes.CurrencyDefinition | undefined;
   let paymentCurrencies: (CurrencyTypes.CurrencyDefinition | undefined)[] = [];
-  let statuses: any = [];
   let isPaid = false;
-  let loading = false;
   let requestData: any = null;
   let signer: any = null;
   let approved = false;
-  let address = account.address;
   let firstItems: any;
   let otherItems: any;
   let sellerInfo: SellerInfo[] = [];
   let buyerInfo: BuyerInfo[] = [];
-  let isPayee = request?.payee?.value.toLowerCase() === address?.toLowerCase();
+  let unknownCurrency = currency?.decimals === undefined;
+  let isPayee = false;
+  let shouldShowStatuses = false;
   let unsupportedNetwork = false;
   let hexStringChain = "0x" + account?.chainId?.toString(16);
   let correctChain =
@@ -80,27 +79,38 @@
   let paymentNetworkExtension:
     | Types.Extension.IPaymentNetworkState<any>
     | undefined;
+  let statuses: any[] = [
+    {
+      name: "CORRECT_NETWORK",
+      message: "Correct Network",
+      done: correctChain,
+    },
+    {
+      name: "SIGN_TRANSACTION",
+      message: "Sign Transaction",
+      done: false,
+    },
+    {
+      name: "PAYMENT_DETECTED",
+      message: "Payment Detected",
+      done: false,
+    },
+  ];
+
+  $: if (request && address) {
+    isPayee = request.payee?.value?.toLowerCase() === address.toLowerCase();
+
+    shouldShowStatuses =
+      !isPaid &&
+      !isPayee &&
+      request.payer?.value?.toLowerCase() === address.toLowerCase();
+  }
 
   let status = checkStatus(requestData || request);
+  let hasEnoughBalance = false;
+  let userBalance = "0";
 
-  $: requestId, getOneRequest();
-
-  const getOneRequest = async () => {
-    try {
-      loading = true;
-      const _request = await requestNetwork?.fromRequestId(requestId);
-      request = _request?.getData();
-    } catch (error) {
-      console.error("Failed to fetch request:", error);
-    } finally {
-      loading = false;
-    }
-  };
-
-  onMount(async () => {
-    await getOneRequest();
-    currencyManager = initializeCurrencyManager(currencies);
-  });
+  let isSigningTransaction = false;
 
   const generateDetailParagraphs = (info: any) => {
     const fullName = [info?.firstName, info?.lastName]
@@ -132,45 +142,67 @@
     ].filter((detail) => detail.value);
   };
 
-  $: {
-    firstItems = request?.contentData
-      ? request?.contentData?.invoiceItems?.slice(0, 3)
+  let currencyDetails = {
+    symbol: "",
+    decimals: 0,
+  };
+
+  $: if (request) {
+    firstItems = request.contentData
+      ? request.contentData?.invoiceItems?.slice(0, 3)
       : [];
-    otherItems = request?.contentData
-      ? request?.contentData?.invoiceItems?.slice(3)
+    otherItems = request.contentData
+      ? request.contentData?.invoiceItems?.slice(3)
       : [];
   }
 
-  $: {
-    sellerInfo = generateDetailParagraphs(request?.contentData.sellerInfo);
-    buyerInfo = generateDetailParagraphs(request?.contentData.buyerInfo);
+  $: if (request) {
+    sellerInfo = generateDetailParagraphs(request.contentData?.sellerInfo);
+    buyerInfo = generateDetailParagraphs(request.contentData?.buyerInfo);
   }
 
-  onMount(() => {
-    checkInvoice();
-  });
-
-  $: request, checkInvoice();
+  $: if (request && account && network && !unknownCurrency) {
+    checkBalance();
+  }
 
-  $: {
+  $: if (request) {
     account = account;
-    network = request?.currencyInfo?.network || "mainnet";
+    network = request.currencyInfo?.network || "mainnet";
     currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
   }
 
-  const checkInvoice = async () => {
+  const getOneRequest = async (requestId: string) => {
+    if (!requestId || !requestNetwork) {
+      return;
+    }
+
     try {
-      unsupportedNetwork = false;
       loading = true;
-      const singleRequest = await requestNetwork?.fromRequestId(
-        request!.requestId
-      );
+      unsupportedNetwork = false;
 
-      signer = await getEthersSigner(wagmiConfig);
+      const singleRequest = await requestNetwork?.fromRequestId(requestId);
+      if (!singleRequest) {
+        console.log("No request found");
+        return;
+      }
+
+      request = singleRequest.getData();
+      if (!request) {
+        console.log("No request data found");
+        return;
+      }
 
-      requestData = singleRequest?.getData();
+      signer = await getEthersSigner(wagmiConfig);
+      requestData = request;
       paymentNetworkExtension = getPaymentNetworkExtension(requestData);
 
+      // Set up currency and network information
+      currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
+      network = request?.currencyInfo?.network || "mainnet";
+
+      isPaid = requestData?.balance?.balance >= requestData?.expectedAmount;
+
+      // Handle payment currencies setup
       if (
         paymentNetworkExtension?.id ===
         Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY
@@ -205,31 +237,95 @@
 
       network = paymentCurrencies[0]?.network || "mainnet";
 
+      // Check ERC20 approval if needed
       if (paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20) {
         approved = await checkApproval(requestData, paymentCurrencies, signer);
       } else {
         approved = true;
       }
 
-      status = checkStatus(requestData || request);
-    } catch (err: any) {
-      console.error("Error while checking invoice: ", err);
-      if (String(err).includes("Unsupported payment")) {
+      // Build status flow based on conditions
+      const baseStatuses = [
+        {
+          name: "CORRECT_NETWORK",
+          message: "Correct Network",
+          done: correctChain,
+        },
+      ];
+
+      if (
+        paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20 &&
+        !approved
+      ) {
+        baseStatuses.push({
+          name: "APPROVE_ERC20",
+          message: "Approve ERC20",
+          done: false,
+        });
+      }
+
+      baseStatuses.push(
+        {
+          name: "SIGN_TRANSACTION",
+          message: "Sign Transaction",
+          done: false,
+        },
+        {
+          name: "PAYMENT_DETECTED",
+          message: "Payment Detected",
+          done: false,
+        }
+      );
+
+      statuses = baseStatuses;
+      status = checkStatus(requestData);
+      await checkBalance();
+    } catch (error) {
+      console.error("Failed to fetch request:", error);
+      if (String(error).includes("Unsupported payment")) {
         unsupportedNetwork = true;
       }
+      toast.error("Failed to fetch request");
     } finally {
       loading = false;
     }
   };
 
+  onMount(async () => {
+    // Initialize currency manager
+    currencyManager = initializeCurrencyManager(currencies);
+
+    // Fetch initial request data
+    if (requestId) {
+      await getOneRequest(requestId);
+    }
+  });
+
+  // Watch for changes in requestId
+  $: if (requestId) {
+    getOneRequest(requestId);
+  }
+
+  // Watch for payment status changes
+  $: if (isRequestPayed) {
+    getOneRequest(requestId);
+  }
+
   const payTheRequest = async () => {
     try {
       loading = true;
+      isSigningTransaction = true;
+
+      if (!requestNetwork || !requestData?.requestId) {
+        throw new Error("Request network or request data not available");
+      }
+
       const _request = await requestNetwork?.fromRequestId(
-        requestData?.requestId!
+        requestData.requestId
       );
-
-      statuses = [...statuses, "Waiting for payment"];
+      if (!_request) {
+        throw new Error("Could not fetch request details");
+      }
 
       let paymentSettings = undefined;
       if (
@@ -238,10 +334,14 @@
         paymentNetworkExtension?.id ===
           Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ETH_PROXY
       ) {
+        if (!currency || !paymentCurrencies[0]) {
+          throw new Error("Currency information not available");
+        }
+
         const { conversion } = await getConversionPaymentValues({
-          baseAmount: requestData?.expectedAmount,
-          denominationCurrency: currency!,
-          selectedPaymentCurrency: paymentCurrencies[0]!,
+          baseAmount: requestData.expectedAmount,
+          denominationCurrency: currency,
+          selectedPaymentCurrency: paymentCurrencies[0],
           currencyManager,
           provider: signer,
           fromAddress: address,
@@ -256,23 +356,53 @@
         undefined,
         paymentSettings
       );
+
+      // Update sign transaction status
+      const signStatus = statuses.find((s) => s.name === "SIGN_TRANSACTION");
+      if (signStatus) signStatus.done = true;
+      statuses = [...statuses];
+
       await paymentTx.wait();
 
-      statuses = [...statuses, "Payment detected"];
+      // Update payment detected status
+      const paymentStatus = statuses.find((s) => s.name === "PAYMENT_DETECTED");
+      if (paymentStatus) paymentStatus.done = true;
+      statuses = [...statuses];
+
       while (requestData.balance?.balance! < requestData.expectedAmount) {
         requestData = await _request?.refresh();
         await new Promise((resolve) => setTimeout(resolve, 1000));
       }
 
-      statuses = [...statuses, "Payment confirmed"];
+      requestData = await _request?.refresh();
+      request = requestData; // Update the parent request object
+
       isPaid = true;
-      loading = false;
-      statuses = [];
+      status = checkStatus(requestData);
       isRequestPayed = true;
     } catch (err) {
       console.error("Something went wrong while paying : ", err);
+
+      if (
+        String(err).includes("ACTION_REJECTED") ||
+        String(err).includes("User rejected")
+      ) {
+        toast.error("Transaction cancelled", {
+          description: "You rejected the transaction",
+        });
+      } else {
+        toast.error("Payment failed", {
+          description: err instanceof Error ? err.message : String(err),
+        });
+      }
+
+      statuses = statuses.map((status) => ({
+        ...status,
+        done: false,
+      }));
+    } finally {
       loading = false;
-      statuses = [];
+      isSigningTransaction = false;
     }
   };
 
@@ -281,29 +411,74 @@
     paymentCurrencies: any[],
     signer: any
   ) => {
-    const approvalCheckers: { [key: string]: () => Promise<boolean> } = {
-      [Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT]: () =>
-        hasErc20Approval(requestData!, address!, signer),
-      [Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY]: () =>
-        hasErc20ApprovalForProxyConversion(
+    try {
+      if (!paymentNetworkExtension?.id || !address || !signer) {
+        console.log("Missing required arguments for approval check:", {
+          network: paymentNetworkExtension?.id,
+          address,
+          signer: !!signer,
+        });
+        return false;
+      }
+
+      // Skip approval check if payment is not required
+      if (requestData?.balance?.balance >= requestData?.expectedAmount) {
+        console.log("Payment already completed, skipping approval check");
+        return true;
+      }
+
+      // Validate payment currency
+      if (!paymentCurrencies[0]?.address) {
+        console.error("Invalid payment currency:", paymentCurrencies[0]);
+        return false;
+      }
+
+      // Check if we're on the correct network
+      const chainId = await signer.getChainId();
+      const expectedChainId = getNetworkIdFromNetworkName(network);
+      const expectedChainIdNumber = parseInt(expectedChainId, 16);
+
+      if (chainId !== expectedChainIdNumber) {
+        console.error("Wrong network:", {
+          current: `0x${chainId.toString(16)}`,
+          expected: expectedChainId,
+        });
+        return false;
+      }
+
+      if (
+        paymentNetworkExtension.id ===
+        Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT
+      ) {
+        return await hasErc20Approval(requestData!, address!, signer).catch(
+          () => false
+        );
+      }
+
+      if (
+        paymentNetworkExtension.id ===
+        Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY
+      ) {
+        return await hasErc20ApprovalForProxyConversion(
           requestData!,
           address!,
           paymentCurrencies[0]?.address,
           signer,
           requestData.expectedAmount
-        ),
-    };
+        ).catch(() => false);
+      }
 
-    return (
-      (paymentNetworkExtension?.id &&
-        (await approvalCheckers[paymentNetworkExtension.id]?.())) ||
-      false
-    );
+      return false;
+    } catch (error) {
+      console.error("General approval check error:", error);
+      return false;
+    }
   };
 
   async function approve() {
     try {
       loading = true;
+      isSigningTransaction = true;
 
       const approvers: { [key: string]: () => Promise<void> } = {
         [Types.Extension.PAYMENT_NETWORK_ID.ERC20_FEE_PROXY_CONTRACT]:
@@ -329,10 +504,16 @@
       ) {
         await approvers[paymentNetworkExtension.id]();
       }
+
+      const approveStatus = statuses.find((s) => s.name === "APPROVE_ERC20");
+
+      if (approveStatus) approveStatus.done = true;
+      statuses = [...statuses];
     } catch (err) {
       console.error("Something went wrong while approving ERC20: ", err);
     } finally {
       loading = false;
+      isSigningTransaction = false;
     }
   }
 
@@ -343,8 +524,14 @@
       signer = await getEthersSigner(wagmiConfig);
 
       correctChain = true;
+
+      // Update network switch status
+      const networkStatus = statuses.find((s) => s.name === "CORRECT_NETWORK");
+      if (networkStatus) networkStatus.done = true;
     } catch (err) {
       console.error("Something went wrong while switching networks: ", err);
+      toast.error("Failed to switch network");
+      throw err;
     }
   }
 
@@ -377,183 +564,194 @@
       : value;
   }
 
-  let unwatchAccount: WatchAccountReturnType | undefined;
-
-  onMount(() => {
-    unwatchAccount = watchAccount(wagmiConfig, {
-      onChange(data) {
-        if (data?.address !== account?.address) {
-          account = data;
-          if (account?.address) {
-            getRequests();
-          } else {
-            requests = [];
-            activeRequest = undefined;
-            previousWalletAddress = undefined;
-            previousNetwork = undefined;
-          }
-        }
-      },
-    });
-  });
+  async function checkBalance() {
+    try {
+      if (!address || !paymentCurrencies[0] || !network) {
+        console.error("Missing required parameters for balance check:", {
+          address,
+          paymentCurrency: paymentCurrencies[0],
+          network,
+        });
+        return;
+      }
 
-  onDestroy(() => {
-    if (typeof unwatchAccount === "function") unwatchAccount();
-  });
+      const invoiceNetworkId = Number(getNetworkIdFromNetworkName(network));
+
+      if (account.chainId !== invoiceNetworkId) {
+        hasEnoughBalance = false;
+        console.log("Wrong network - balance check skipped");
+        return;
+      }
+
+      if (paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20) {
+        const balance = await getBalance(wagmiConfig, {
+          address,
+          token: paymentCurrencies[0].address as `0x${string}`,
+          chainId: invoiceNetworkId,
+        });
+        userBalance = balance.formatted;
+        hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
+      } else {
+        const balance = await getBalance(wagmiConfig, {
+          address,
+          chainId: invoiceNetworkId,
+        });
+        userBalance = balance.formatted;
+        hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
+      }
+    } catch (err) {
+      console.error("Error checking balance:", err);
+      hasEnoughBalance = false;
+      userBalance = "0";
+    }
+  }
+
+  const currentStatusIndex = statuses.length - 1;
+
+  async function handlePayment() {
+    try {
+      await switchNetworkIfNeeded(network || "mainnet");
+
+      if (
+        !approved &&
+        paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20
+      ) {
+        await approve();
+
+        const approveStatus = statuses.find((s) => s.name === "APPROVE_ERC20");
+        if (approveStatus) approveStatus.done = true;
+
+        return;
+      }
+
+      await payTheRequest();
+    } catch (err) {
+      console.error("Error during payment process:", err);
+      toast.error("Payment process failed", {
+        description: String(err),
+      });
+      // Reset statuses on error make them all false
+      statuses = statuses.map((status) => ({
+        ...status,
+        done: false,
+      }));
+    }
+  }
 </script>
 
-<div
-  class="invoice-view"
-  style="
---mainColor: {config.colors.main};
---secondaryColor: {config.colors.secondary};"
->
-  <div class="dates">
-    <p>Issued on: {formatDate(request?.contentData?.creationDate || "-")}</p>
-    <p>
-      Due by: {formatDate(request?.contentData?.paymentTerms?.dueDate || "-")}
-    </p>
-  </div>
-  <h2 class="invoice-number">
-    Invoice #{request?.contentData?.invoiceNumber || "-"}
-    <StatusLabel status={checkStatus(request)} />
-    <Tooltip text="Download PDF">
-      <Download
-        onClick={async () => {
-          try {
-            await exportToPDF(
-              request,
-              currency,
-              paymentCurrencies,
-              config.logo
-            );
-          } catch (error) {
-            toast.error(`Failed to export PDF`, {
-              description: `${error}`,
-              action: {
-                label: "X",
-                onClick: () => console.info("Close"),
-              },
-            });
-            console.error("Failed to export PDF:", error);
-          }
-        }}
-      />
-    </Tooltip>
-  </h2>
-  <div class="invoice-address">
-    <h2>From:</h2>
-    <p>{request?.payee?.value || "-"}</p>
-  </div>
-  {#if sellerInfo.length > 0}
-    <div class={`invoice-info`}>
-      {#each sellerInfo as { value, isCompany, isEmail }}
+{#if loading}
+  <div class="innerDrawer">Loading...</div>
+{:else if request}
+  <div
+    class="innerDrawer"
+    style="
+      --mainColor: {config.colors.main};
+      --secondaryColor: {config.colors.secondary};"
+  >
+    <div class="invoice-view">
+      <div class="dates">
         <p>
-          {#if isEmail}
-            <a href="mailto:{value}" class="email-link">{value}</a>
-          {:else if isCompany}
-            <span class="company-name">{value}</span>
-          {:else}
-            {value}
-          {/if}
+          Issued on: {formatDate(request?.contentData?.creationDate || "-")}
         </p>
-      {/each}
-    </div>
-  {/if}
-  <div class="invoice-border"></div>
-  <div class="invoice-address">
-    <h2>Billed to:</h2>
-    <p>{request?.payer?.value || "-"}</p>
-  </div>
-  {#if buyerInfo.length > 0}
-    <div class={`invoice-info`}>
-      {#each buyerInfo as { value, isCompany, isEmail }}
         <p>
-          {#if isEmail}
-            <a href="mailto:{value}" class="email-link">{value}</a>
-          {:else if isCompany}
-            <span class="company-name">{value}</span>
-          {:else}
-            {value}
-          {/if}
+          Due by: {formatDate(
+            request?.contentData?.paymentTerms?.dueDate || "-"
+          )}
         </p>
-      {/each}
-    </div>
-  {/if}
-
-  <h3 class="invoice-info-payment">
-    <span style="font-weight: 500;">Payment Chain:</span>
-    {paymentCurrencies && paymentCurrencies.length > 0
-      ? paymentCurrencies[0]?.network || "-"
-      : ""}
-  </h3>
-  <h3 class="invoice-info-payment">
-    <span style="font-weight: 500;">Invoice Currency:</span>
-    {currency?.symbol || "-"}
-  </h3>
-
-  <h3 class="invoice-info-payment">
-    <span style="font-weight: 500;">Settlement Currency:</span>
-    {paymentCurrencies && paymentCurrencies.length > 0
-      ? paymentCurrencies[0]?.symbol || "-"
-      : ""}
-  </h3>
-
-  {#if request?.contentData?.invoiceItems}
-    <div class="table-container">
-      <table class="invoice-table">
-        <thead class="table-header">
-          <tr class="table-row">
-            <th scope="col" class="table-header-cell description"
-              >Description</th
-            >
-            <th scope="col" class="table-header-cell">Qty</th>
-            <th scope="col" class="table-header-cell">Unit Price</th>
-            <th scope="col" class="table-header-cell">Discount</th>
-            <th scope="col" class="table-header-cell">Tax</th>
-            <th scope="col" class="table-header-cell">Amount</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each firstItems as item, index (index)}
-            <tr class="table-row item-row">
-              <th scope="row" class="item-description">
-                <p class="truncate description-text">{item.name || "-"}</p>
-              </th>
-              <td>{item.quantity || "-"}</td>
-              <td
-                >{item.unitPrice
-                  ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
-                  : "-"}</td
-              >
-              <td
-                >{item.discount
-                  ? formatUnits(item.discount, currency?.decimals ?? 18)
-                  : "-"}</td
-              >
-              <td>{Number(item.tax.amount || "-")}</td>
-              <td
-                >{truncateNumberString(
-                  formatUnits(
-                    // @ts-expect-error
-                    calculateItemTotal(item),
-                    currency?.decimals ?? 18
-                  ),
-                  2
-                )}</td
-              >
-            </tr>
+      </div>
+      <h2 class="invoice-number">
+        Invoice #{request?.contentData?.invoiceNumber || "-"}
+        <StatusLabel status={checkStatus(request)} />
+        <Tooltip text="Download PDF">
+          <Download
+            onClick={async () => {
+              try {
+                await exportToPDF(
+                  request,
+                  currency,
+                  paymentCurrencies,
+                  config.logo
+                );
+              } catch (error) {
+                toast.error(`Failed to export PDF`, {
+                  description: `${error}`,
+                  action: {
+                    label: "X",
+                    onClick: () => console.info("Close"),
+                  },
+                });
+                console.error("Failed to export PDF:", error);
+              }
+            }}
+          />
+        </Tooltip>
+      </h2>
+      <div class="invoice-address">
+        <h2>From:</h2>
+        <p>{request?.payee?.value || "-"}</p>
+      </div>
+      {#if sellerInfo.length > 0}
+        <div class={`invoice-info`}>
+          {#each sellerInfo as { value, isCompany, isEmail }}
+            <p>
+              {#if isEmail}
+                <a href="mailto:{value}" class="email-link">{value}</a>
+              {:else if isCompany}
+                <span class="company-name">{value}</span>
+              {:else}
+                {value}
+              {/if}
+            </p>
           {/each}
-        </tbody>
-      </table>
-    </div>
-    {#if otherItems.length > 0}
-      <Accordion title="View All">
+        </div>
+      {/if}
+      <div class="invoice-border"></div>
+      <div class="invoice-address">
+        <h2>Billed to:</h2>
+        <p>{request?.payer?.value || "-"}</p>
+      </div>
+      {#if buyerInfo.length > 0}
+        <div class={`invoice-info`}>
+          {#each buyerInfo as { value, isCompany, isEmail }}
+            <p>
+              {#if isEmail}
+                <a href="mailto:{value}" class="email-link">{value}</a>
+              {:else if isCompany}
+                <span class="company-name">{value}</span>
+              {:else}
+                {value}
+              {/if}
+            </p>
+          {/each}
+        </div>
+      {/if}
+
+      <h3 class="invoice-info-payment">
+        <span style="font-weight: 500;">Payment Chain:</span>
+        {paymentCurrencies && paymentCurrencies.length > 0
+          ? paymentCurrencies[0]?.network || "Unknown"
+          : ""}
+      </h3>
+      <h3 class="invoice-info-payment">
+        <span style="font-weight: 500;">Invoice Currency:</span>
+        {currency?.symbol || "Unknown"}
+      </h3>
+
+      <h3 class="invoice-info-payment">
+        <span style="font-weight: 500;">Settlement Currency:</span>
+        {paymentCurrencies && paymentCurrencies.length > 0
+          ? paymentCurrencies[0]?.symbol || "Unknown"
+          : ""}
+      </h3>
+
+      {#if request?.contentData?.invoiceItems}
         <div class="table-container">
           <table class="invoice-table">
-            <thead class="table-header hidden-header" style="display: none;">
+            <thead class="table-header">
               <tr class="table-row">
-                <th scope="col" class="table-header-cell">Description</th>
+                <th scope="col" class="table-header-cell description"
+                  >Description</th
+                >
                 <th scope="col" class="table-header-cell">Qty</th>
                 <th scope="col" class="table-header-cell">Unit Price</th>
                 <th scope="col" class="table-header-cell">Discount</th>
@@ -562,109 +760,250 @@
               </tr>
             </thead>
             <tbody>
-              {#each otherItems as item, index (index)}
+              {#each firstItems as item, index (index)}
                 <tr class="table-row item-row">
                   <th scope="row" class="item-description">
-                    <p class="truncate description-text" style="margin: 4px 0;">
-                      {item.name || "-"}
-                    </p>
+                    <p class="truncate description-text">{item.name || "-"}</p>
                   </th>
                   <td>{item.quantity || "-"}</td>
-                  <td
-                    >{item.unitPrice
-                      ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
-                      : "-"}</td
-                  >
-                  <td
-                    >{item.discount
+                  <td>
+                    {#if unknownCurrency}
+                      Unknown
+                    {:else}
+                      {item.unitPrice
+                        ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
+                        : "-"}
+                    {/if}
+                  </td>
+                  <td>
+                    {item.discount
                       ? formatUnits(item.discount, currency?.decimals ?? 18)
-                      : "-"}</td
-                  >
+                      : "-"}
+                  </td>
                   <td>{Number(item.tax.amount || "-")}</td>
-                  <td
-                    >{truncateNumberString(
-                      formatUnits(
-                        // @ts-expect-error
-                        calculateItemTotal(item),
-                        currency?.decimals ?? 18
-                      ),
-                      2
-                    )}</td
-                  >
+                  <td>
+                    {#if unknownCurrency}
+                      Unknown
+                    {:else}
+                      {truncateNumberString(
+                        formatUnits(
+                          calculateItemTotal(item),
+                          currency?.decimals ?? 18
+                        ),
+                        2
+                      )}
+                    {/if}
+                  </td>
                 </tr>
-              {/each}</tbody
-            >
+              {/each}
+            </tbody>
           </table>
         </div>
-      </Accordion>
-    {/if}
-  {/if}
-  {#if request?.contentData.note}
-    <div class="note-container">
-      <p class="note-content">
-        <span class="note-title">Memo:</span> <br />
-        {request.contentData.note || "-"}
-      </p>
-    </div>
-  {/if}
-  <div class="labels-container">
-    {#if request?.contentData?.miscellaneous?.labels}
-      {#each request?.contentData?.miscellaneous?.labels as label, index (index)}
-        <div class="label">
-          {label || "-"}
+        {#if otherItems.length > 0}
+          <Accordion title="View All">
+            <div class="table-container">
+              <table class="invoice-table">
+                <thead
+                  class="table-header hidden-header"
+                  style="display: none;"
+                >
+                  <tr class="table-row">
+                    <th scope="col" class="table-header-cell">Description</th>
+                    <th scope="col" class="table-header-cell">Qty</th>
+                    <th scope="col" class="table-header-cell">Unit Price</th>
+                    <th scope="col" class="table-header-cell">Discount</th>
+                    <th scope="col" class="table-header-cell">Tax</th>
+                    <th scope="col" class="table-header-cell">Amount</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each otherItems as item, index (index)}
+                    <tr class="table-row item-row">
+                      <th scope="row" class="item-description">
+                        <p
+                          class="truncate description-text"
+                          style="margin: 4px 0;"
+                        >
+                          {item.name || "-"}
+                        </p>
+                      </th>
+                      <td>{item.quantity || "-"}</td>
+                      <td>
+                        {#if unknownCurrency}
+                          Unknown
+                        {:else}
+                          {item.unitPrice
+                            ? formatUnits(
+                                item.unitPrice,
+                                currency?.decimals ?? 18
+                              )
+                            : "-"}
+                        {/if}
+                      </td>
+                      <td>
+                        {item.discount
+                          ? formatUnits(item.discount, currency?.decimals ?? 18)
+                          : "-"}
+                      </td>
+                      <td>{Number(item.tax.amount || "-")}</td>
+                      <td>
+                        {#if unknownCurrency}
+                          Unknown
+                        {:else}
+                          {truncateNumberString(
+                            formatUnits(
+                              calculateItemTotal(item),
+                              currency?.decimals ?? 18
+                            ),
+                            2
+                          )}
+                        {/if}
+                      </td>
+                    </tr>
+                  {/each}</tbody
+                >
+              </table>
+            </div>
+          </Accordion>
+        {/if}
+      {/if}
+      {#if request?.contentData?.note}
+        <div class="note-container">
+          <p class="note-content">
+            <span class="note-title">Memo:</span> <br />
+            {request.contentData?.note || "-"}
+          </p>
         </div>
-      {/each}
-    {/if}
-  </div>
-  <div class="status-container">
-    <div class="statuses">
-      {#if statuses.length > 0 && loading}
-        {#each statuses as status, index (index)}
-          <div class="status">
-            {status || "-"}
-            {#if (index === 0 && statuses.length === 2) || (index === 1 && statuses.length === 3)}
-              <i>
-                <Check />
-              </i>
+      {/if}
+      <div class="labels-container">
+        {#if request?.contentData?.miscellaneous?.labels}
+          {#each request?.contentData?.miscellaneous?.labels as label, index (index)}
+            <div class="label">
+              {label || "-"}
+            </div>
+          {/each}
+        {/if}
+      </div>
+      {#if shouldShowStatuses}
+        <div class="status-container">
+          <div class="statuses">
+            {#if statuses?.length > 0}
+              <ul class="status-list">
+                {#each statuses as status, index}
+                  <li
+                    class="status-item"
+                    style="width: {statuses.length === 3 ? '35%' : '45%'}"
+                  >
+                    <span
+                      class={`status-icon-wrapper ${status.done ? "bg-success" : "bg-waiting"}`}
+                    >
+                      {#if status.done}
+                        <svg
+                          width="24"
+                          height="25"
+                          viewBox="0 0 24 25"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M6 12.5L10.2426 16.7426L18.727 8.25732"
+                            stroke="#328965"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      {:else}
+                        <svg
+                          width="25"
+                          height="25"
+                          viewBox="0 0 25 25"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12.334 11.5V16.5M12.334 21.5C7.36342 21.5 3.33398 17.4706 3.33398 12.5C3.33398 7.52944 7.36342 3.5 12.334 3.5C17.3045 3.5 21.334 7.52944 21.334 12.5C21.334 17.4706 17.3045 21.5 12.334 21.5ZM12.3838 8.5V8.6L12.2842 8.6002V8.5H12.3838Z"
+                            stroke="#3D72FF"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      {/if}
+                    </span>
+                    <span class="status-text">{status.message}</span>
+                    <div
+                      class={`progress-line ${
+                        status.done || statuses[index + 1]?.done
+                          ? "bg-green"
+                          : "bg-blue"
+                      }`}
+                    ></div>
+                  </li>
+                {/each}
+              </ul>
             {/if}
           </div>
-        {/each}
+        </div>
       {/if}
-    </div>
-
-    <div class="invoice-view-actions">
-      {#if loading}
-        <div class="loading">Loading...</div>
-      {:else if !correctChain && !isPayee}
-        <Button
-          type="button"
-          text="Switch Network"
-          padding="px-[12px] py-[6px]"
-          onClick={() => switchNetworkIfNeeded(network || "mainnet")}
-        />
-      {:else if !approved && !isPaid && !isPayee && !unsupportedNetwork}
-        <Button
-          type="button"
-          text="Approve"
-          padding="px-[12px] py-[6px]"
-          onClick={approve}
-        />
-      {:else if approved && !isPaid && !isPayee && !unsupportedNetwork}
-        <Button
-          type="button"
-          text="Pay"
-          padding="px-[12px] py-[6px]"
-          onClick={payTheRequest}
-        />
+      <div class="invoice-view-actions">
+        {#if !isPayee && !unsupportedNetwork && !isPaid && !isRequestPayed && !isSigningTransaction && !unknownCurrency}
+          {#if !hasEnoughBalance && correctChain}
+            <div class="balance-warning">
+              Insufficient funds: {Number(userBalance).toFixed(4)}
+              {paymentCurrencies[0]?.symbol || "-"}
+            </div>
+          {/if}
+          <Button
+            type="button"
+            text={!correctChain
+              ? "Switch Network"
+              : !approved &&
+                  paymentCurrencies[0]?.type ===
+                    Types.RequestLogic.CURRENCY.ERC20
+                ? "Approve"
+                : "Pay Now"}
+            padding="px-[12px] py-[6px]"
+            onClick={handlePayment}
+            disabled={correctChain
+              ? !hasEnoughBalance || isSigningTransaction
+              : false}
+          />
+        {/if}
+      </div>
+
+      {#if unsupportedNetwork}
+        <div class="unsupported-network">Unsupported payment network!</div>
       {/if}
     </div>
   </div>
-  {#if unsupportedNetwork}
-    <div class="unsupported-network">Unsupported payment network!</div>
-  {/if}
-</div>
+{:else}
+  <div class="innerDrawer">No invoice found</div>
+{/if}
 
 <style>
+  .innerDrawer {
+    position: relative;
+    height: 100%;
+    padding: 1rem;
+    overflow: hidden;
+    background-color: white;
+    transition: all 300ms;
+    border-radius: 0.375rem;
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    border-top: 6px solid var(--mainColor);
+    width: 800px;
+    margin: 0 auto;
+  }
+
+  @media only screen and (max-width: 880px) {
+    .innerDrawer {
+      width: 600px;
+    }
+  }
+
   .invoice-view {
     display: flex;
     flex-direction: column;
@@ -756,50 +1095,61 @@
   .table-container {
     position: relative;
     overflow-x: auto;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
+    border-radius: 8px;
   }
 
   .invoice-table {
     width: 100%;
+    font-size: 14px;
+    line-height: 20px;
     text-align: left;
-    font-size: 0.875rem;
+    color: #6b7280;
+    border-radius: 8px;
+    overflow: hidden;
+    border-collapse: collapse;
+    border-spacing: 0;
   }
 
   .table-header {
+    line-height: 20px;
     text-transform: uppercase;
-    background-color: #e0e0e0;
+    background-color: #f6f6f7;
+    color: black;
+    border: none;
+    border-collapse: collapse;
   }
 
-  .table-row {
+  .table-header tr {
     text-align: left;
+    font-size: 14px;
   }
 
-  .table-header-cell {
-    padding: 0.75rem 0.5rem;
-  }
-
-  @media only screen and (max-width: 880px) {
-    .table-header-cell {
-      white-space: nowrap;
-    }
+  .table-header tr th {
+    padding: 12px 16px;
+    font-size: 11px;
+    white-space: nowrap;
+    border: none;
+    border-spacing: 0;
+    background-color: #f6f6f7;
   }
 
-  .table-header-cell.description {
-    padding-left: 0.5rem;
+  .table-row th,
+  .table-row td {
+    padding: 12px 16px;
   }
 
-  .item-row {
-    border-bottom: 1px solid black;
+  .table-row th p {
+    margin: 0;
   }
 
   .item-description {
-    padding-left: 0.5rem;
-    font-weight: 500;
-    white-space: nowrap;
+    width: 250px !important;
+    font-weight: normal;
   }
 
   .truncate {
-    display: block;
-    width: 150px;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -843,8 +1193,7 @@
   .status-container {
     display: flex;
     align-items: center;
-    gap: 10px;
-    justify-content: space-between;
+    justify-content: center;
     margin-top: 1rem;
   }
 
@@ -852,6 +1201,7 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
+    width: 100%;
   }
 
   .status {
@@ -867,6 +1217,78 @@
     gap: 0.25rem;
   }
 
+  .status-list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin-left: 85px;
+  }
+
+  .status-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-align: center;
+    width: 45%;
+  }
+
+  .status-list:has(:nth-child(3):last-child) .status-item {
+    width: 35%;
+  }
+
+  .status-item:first-child {
+    padding-left: 50px;
+  }
+
+  .status-item:first-child .status-text {
+    padding-left: 50px;
+  }
+
+  .status-item:last-child {
+    width: 20%;
+  }
+
+  .status-item:last-child .progress-line {
+    width: 170px;
+  }
+
+  .progress-line {
+    position: absolute;
+    left: 40%;
+    height: 8px;
+    z-index: 0;
+    transform: translateX(-50%);
+    width: 300px;
+    border-radius: 100px;
+    z-index: 10;
+  }
+
+  .status-icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 9999px;
+    padding: 4px;
+    position: relative;
+    z-index: 20;
+  }
+
+  .status-text {
+    font-size: 14px;
+    color: #272d41;
+    position: absolute;
+    top: -30px;
+    left: -30px;
+  }
+
+  .checkmark {
+    margin-left: 5px;
+    color: #58e1a5;
+  }
+
   .invoice-view-actions {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
@@ -875,6 +1297,7 @@
     display: flex;
     align-items: center;
     gap: 0.25rem;
+    justify-content: end;
   }
 
   :global(.invoice-view-actions button) {
@@ -883,17 +1306,6 @@
     height: fit-content !important;
   }
 
-  .loading {
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-align: center;
-    border-radius: 0.5rem;
-    background-color: var(--mainColor);
-    color: white;
-    animation: pulse 1s infinite;
-  }
-
   .unsupported-network {
     font-size: 12px;
     color: #e89e14ee;
@@ -917,10 +1329,22 @@
     background-color: var(--secondaryColor);
   }
 
+  .bg-blue {
+    background-color: #759aff;
+  }
+
   .bg-green {
     background-color: #0bb489;
   }
 
+  .bg-success {
+    background-color: #cdf6e4;
+  }
+
+  .bg-waiting {
+    background-color: #c7e7ff;
+  }
+
   .bg-zinc {
     background-color: #a1a1aa;
   }
@@ -940,4 +1364,25 @@
   .email-link:hover {
     text-decoration: underline;
   }
+
+  .balance-warning {
+    color: #ef4444;
+    font-size: 0.875rem;
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+    background-color: #fee2e2;
+    margin-right: 0.5rem;
+  }
+
+  :global(.invoice-view-actions button[disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: #71717a !important;
+  }
+
+  :global(.pay-button) {
+    padding: 8px 12px !important;
+    width: fit-content;
+    margin-left: auto;
+  }
 </style>
diff --git a/packages/single-invoice/src/lib/types/index.ts b/packages/single-invoice/src/lib/types/index.ts
deleted file mode 100644
index 31e6289e..00000000
--- a/packages/single-invoice/src/lib/types/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { CURRENCY_ID, NETWORK_LABEL } from "../utils/currencies";
-
-export interface Address {
-  "street-address"?: string;
-  locality?: string;
-  region?: string;
-  "country-name"?: string;
-  "postal-code"?: string;
-}
-
-export interface SellerInfo {
-  logo?: string;
-  name?: string;
-  email?: string;
-  firstName?: string;
-  lastName?: string;
-  businessName?: string;
-  phone?: string;
-  address?: Address;
-  taxRegistration?: string;
-  companyRegistration?: string;
-}
-
-export interface BuyerInfo {
-  email?: string;
-  firstName?: string;
-  lastName?: string;
-  businessName?: string;
-  phone?: string;
-  address?: Address;
-  taxRegistration?: string;
-  companyRegistration?: string;
-}
-
-export type ProductInfo = {
-  name?: string;
-  description?: string;
-  image?: string;
-};
-
-export type AmountInUSD = number;
-
-export type CurrencyID = (typeof CURRENCY_ID)[keyof typeof CURRENCY_ID];
-export type SupportedCurrencies = [CurrencyID, ...CurrencyID[]];
-
-export type Currency = {
-  id: string;
-  hash: string;
-  address?: string;
-  network: keyof typeof NETWORK_LABEL;
-  decimals: number;
-  symbol: string;
-  type: "ERC20" | "ETH";
-  name?: string;
-};
-
-export type PaymentStep =
-  | "currency"
-  | "buyer-info"
-  | "confirmation"
-  | "complete";
diff --git a/packages/single-invoice/src/lib/utils/capitalize.d.ts b/packages/single-invoice/src/utils/capitalize.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/capitalize.d.ts
rename to packages/single-invoice/src/utils/capitalize.d.ts
diff --git a/packages/single-invoice/src/lib/utils/capitalize.ts b/packages/single-invoice/src/utils/capitalize.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/capitalize.ts
rename to packages/single-invoice/src/utils/capitalize.ts
diff --git a/packages/single-invoice/src/lib/utils/chainlink.d.ts b/packages/single-invoice/src/utils/chainlink.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/chainlink.d.ts
rename to packages/single-invoice/src/utils/chainlink.d.ts
diff --git a/packages/single-invoice/src/lib/utils/chainlink.ts b/packages/single-invoice/src/utils/chainlink.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/chainlink.ts
rename to packages/single-invoice/src/utils/chainlink.ts
diff --git a/packages/single-invoice/src/lib/utils/conversion.d.ts b/packages/single-invoice/src/utils/conversion.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/conversion.d.ts
rename to packages/single-invoice/src/utils/conversion.d.ts
diff --git a/packages/single-invoice/src/lib/utils/conversion.ts b/packages/single-invoice/src/utils/conversion.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/conversion.ts
rename to packages/single-invoice/src/utils/conversion.ts
diff --git a/packages/single-invoice/src/lib/utils/debounce.d.ts b/packages/single-invoice/src/utils/debounce.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/debounce.d.ts
rename to packages/single-invoice/src/utils/debounce.d.ts
diff --git a/packages/single-invoice/src/lib/utils/debounce.ts b/packages/single-invoice/src/utils/debounce.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/debounce.ts
rename to packages/single-invoice/src/utils/debounce.ts
diff --git a/packages/single-invoice/src/lib/utils/ethersAdapterProvider.d.ts b/packages/single-invoice/src/utils/ethersAdapterProvider.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/ethersAdapterProvider.d.ts
rename to packages/single-invoice/src/utils/ethersAdapterProvider.d.ts
diff --git a/packages/single-invoice/src/lib/utils/formatAddress.d.ts b/packages/single-invoice/src/utils/formatAddress.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/formatAddress.d.ts
rename to packages/single-invoice/src/utils/formatAddress.d.ts
diff --git a/packages/single-invoice/src/lib/utils/formatAddress.ts b/packages/single-invoice/src/utils/formatAddress.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/formatAddress.ts
rename to packages/single-invoice/src/utils/formatAddress.ts
diff --git a/packages/single-invoice/src/lib/utils/generateInvoice.d.ts b/packages/single-invoice/src/utils/generateInvoice.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/generateInvoice.d.ts
rename to packages/single-invoice/src/utils/generateInvoice.d.ts
diff --git a/packages/single-invoice/src/lib/utils/getConversionPaymentValues.d.ts b/packages/single-invoice/src/utils/getConversionPaymentValues.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/getConversionPaymentValues.d.ts
rename to packages/single-invoice/src/utils/getConversionPaymentValues.d.ts
diff --git a/packages/single-invoice/src/lib/utils/getConversionPaymentValues.ts b/packages/single-invoice/src/utils/getConversionPaymentValues.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/getConversionPaymentValues.ts
rename to packages/single-invoice/src/utils/getConversionPaymentValues.ts
diff --git a/packages/single-invoice/src/lib/utils/index.d.ts b/packages/single-invoice/src/utils/index.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/index.d.ts
rename to packages/single-invoice/src/utils/index.d.ts
diff --git a/packages/single-invoice/src/lib/utils/index.ts b/packages/single-invoice/src/utils/index.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/index.ts
rename to packages/single-invoice/src/utils/index.ts
diff --git a/packages/single-invoice/src/lib/utils/loadScript.d.ts b/packages/single-invoice/src/utils/loadScript.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/loadScript.d.ts
rename to packages/single-invoice/src/utils/loadScript.d.ts
diff --git a/packages/single-invoice/src/lib/utils/wallet-utils.d.ts b/packages/single-invoice/src/utils/wallet-utils.d.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/wallet-utils.d.ts
rename to packages/single-invoice/src/utils/wallet-utils.d.ts
diff --git a/packages/single-invoice/src/lib/utils/wallet-utils.ts b/packages/single-invoice/src/utils/wallet-utils.ts
similarity index 100%
rename from packages/single-invoice/src/lib/utils/wallet-utils.ts
rename to packages/single-invoice/src/utils/wallet-utils.ts
diff --git a/packages/single-invoice/svelte.config.js b/packages/single-invoice/svelte.config.js
index 919755ca..ff60aa7c 100644
--- a/packages/single-invoice/svelte.config.js
+++ b/packages/single-invoice/svelte.config.js
@@ -1,8 +1,16 @@
+import adapter from "@sveltejs/adapter-auto";
 import { vitePreprocess } from "@sveltejs/kit/vite";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter(),
+    alias: {
+      $src: "./src",
+      $utils: "./src/utils",
+    },
+  },
   compilerOptions: {
     customElement: true,
   },
diff --git a/packages/single-invoice/vite.config.ts b/packages/single-invoice/vite.config.ts
index b1edb182..80864b9d 100644
--- a/packages/single-invoice/vite.config.ts
+++ b/packages/single-invoice/vite.config.ts
@@ -1,5 +1,6 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
+
 export default defineConfig({
   plugins: [sveltekit()],
 });
diff --git a/packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs b/packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs
new file mode 100644
index 00000000..6142a8e8
--- /dev/null
+++ b/packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs
@@ -0,0 +1,10 @@
+// vite.config.ts
+import { sveltekit } from "file:///Users/stefdev/Desktop/RN/web-components/node_modules/@sveltejs/kit/src/exports/vite/index.js";
+import { defineConfig } from "file:///Users/stefdev/Desktop/RN/web-components/node_modules/vite/dist/node/index.js";
+var vite_config_default = defineConfig({
+  plugins: [sveltekit()]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvc3RlZmRldi9EZXNrdG9wL1JOL3dlYi1jb21wb25lbnRzL3BhY2thZ2VzL3NpbmdsZS1pbnZvaWNlXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvc3RlZmRldi9EZXNrdG9wL1JOL3dlYi1jb21wb25lbnRzL3BhY2thZ2VzL3NpbmdsZS1pbnZvaWNlL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9zdGVmZGV2L0Rlc2t0b3AvUk4vd2ViLWNvbXBvbmVudHMvcGFja2FnZXMvc2luZ2xlLWludm9pY2Uvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tIFwiQHN2ZWx0ZWpzL2tpdC92aXRlXCI7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbc3ZlbHRla2l0KCldLFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQWtYLFNBQVMsaUJBQWlCO0FBQzVZLFNBQVMsb0JBQW9CO0FBRTdCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxVQUFVLENBQUM7QUFDdkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
diff --git a/packages/single-invoice/vite.wc.config.ts b/packages/single-invoice/vite.wc.config.ts
index 2526415a..41f3e837 100644
--- a/packages/single-invoice/vite.wc.config.ts
+++ b/packages/single-invoice/vite.wc.config.ts
@@ -1,16 +1,11 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 export default defineConfig({
   define: {
     global: "globalThis",
   },
   plugins: [
-    nodePolyfills({
-      include: ["buffer", "crypto"],
-      exclude: ["http", "stream", "zlib", "assert"],
-    }),
     svelte({
       compilerOptions: {
         customElement: true,

From 5d71ab16d37d974c963c76642edf718d5ea3e6f0 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 13 Jan 2025 17:19:52 +0100
Subject: [PATCH 03/18] fix: updated gitignore, added loading skeleton,
 resolved comments

---
 .gitignore                                    |   1 +
 .../src/lib/loading-skeleton.svelte           | 255 +++++++++++++++
 .../src/lib/single-invoice.svelte             | 308 +++++++++++++-----
 ...s.timestamp-1736352084979-555798874d03.mjs |  10 -
 4 files changed, 483 insertions(+), 91 deletions(-)
 create mode 100644 packages/single-invoice/src/lib/loading-skeleton.svelte
 delete mode 100644 packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs

diff --git a/.gitignore b/.gitignore
index ed6e2172..8748ae94 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 .turbo
 dist
 .svelte-kit
+vite.congig.ts.timestamp*
\ No newline at end of file
diff --git a/packages/single-invoice/src/lib/loading-skeleton.svelte b/packages/single-invoice/src/lib/loading-skeleton.svelte
new file mode 100644
index 00000000..fd9e344f
--- /dev/null
+++ b/packages/single-invoice/src/lib/loading-skeleton.svelte
@@ -0,0 +1,255 @@
+<script>
+  import Skeleton from "@requestnetwork/shared-components/skeleton.svelte";
+
+  export let config;
+
+  let skeletonConfig = {
+    colors: {
+      main: "#D9D9D9",
+      secondary: "#E7E7E7",
+    },
+  };
+</script>
+
+<div
+  class="innerDrawer"
+  style="
+--mainColor: {config.colors.main};
+--secondaryColor: {config.colors.secondary};"
+>
+  <div class="invoice-view">
+    <!-- Invoice Number and Status -->
+    <div class="invoice-header">
+      <div class="invoice-title">
+        <div style="width: 100px">
+          <Skeleton config={skeletonConfig} lineCount={1} />
+        </div>
+      </div>
+      <div class="invoice-dates">
+        <div style="width: 180px">
+          <Skeleton config={skeletonConfig} lineCount={1} />
+        </div>
+        <div style="width: 180px">
+          <Skeleton config={skeletonConfig} lineCount={1} />
+        </div>
+      </div>
+    </div>
+
+    <!-- From Address -->
+    <div class="invoice-section">
+      <div class="section-label">From:</div>
+      <div style="width: 400px">
+        <Skeleton config={skeletonConfig} lineCount={1} />
+      </div>
+    </div>
+
+    <div class="invoice-border"></div>
+
+    <!-- Billed to Address -->
+    <div class="invoice-section">
+      <div class="section-label">Billed to:</div>
+      <div style="width: 400px">
+        <Skeleton config={skeletonConfig} lineCount={1} />
+      </div>
+    </div>
+
+    <!-- Payment Details -->
+    <div class="invoice-section">
+      <div class="payment-row">
+        <div class="section-label">Payment Chain:</div>
+        <div style="width: 120px">
+          <Skeleton config={skeletonConfig} lineCount={1} />
+        </div>
+      </div>
+      <div class="payment-row">
+        <div class="section-label">Invoice Currency:</div>
+        <div style="width: 80px">
+          <Skeleton config={skeletonConfig} lineCount={1} />
+        </div>
+      </div>
+      <div class="payment-row">
+        <div class="section-label">Settlement Currency:</div>
+        <div style="width: 120px">
+          <Skeleton config={skeletonConfig} lineCount={1} />
+        </div>
+      </div>
+    </div>
+
+    <!-- Table with matched styles -->
+    <div class="table-container">
+      <table class="invoice-table">
+        <thead>
+          <tr>
+            <th class="th-description">DESCRIPTION</th>
+            <th class="th-qty">QTY</th>
+            <th class="th-price">UNIT PRICE</th>
+            <th class="th-discount">DISCOUNT</th>
+            <th class="th-tax">TAX</th>
+            <th class="th-amount">AMOUNT</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="td-description">
+              <div style="width: 200px">
+                <Skeleton config={skeletonConfig} lineCount={1} />
+              </div>
+            </td>
+            <td class="td-qty">
+              <div style="width: 40px">
+                <Skeleton config={skeletonConfig} lineCount={1} />
+              </div>
+            </td>
+            <td class="td-price">
+              <div style="width: 80px">
+                <Skeleton config={skeletonConfig} lineCount={1} />
+              </div>
+            </td>
+            <td class="td-discount">
+              <div style="width: 60px">
+                <Skeleton config={skeletonConfig} lineCount={1} />
+              </div>
+            </td>
+            <td class="td-tax">
+              <div style="width: 60px">
+                <Skeleton config={skeletonConfig} lineCount={1} />
+              </div>
+            </td>
+            <td class="td-amount">
+              <div style="width: 80px">
+                <Skeleton config={skeletonConfig} lineCount={1} />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<style>
+  .innerDrawer {
+    position: relative;
+    height: 100%;
+    padding: 1rem;
+    overflow: hidden;
+    background-color: white;
+    transition: all 300ms;
+    border-radius: 0.375rem;
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    border-top: 6px solid var(--mainColor);
+    width: 800px;
+    margin: 0 auto;
+  }
+
+  .invoice-view {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background-color: white;
+    width: 100%;
+    height: fit-content;
+  }
+
+  .invoice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 18px;
+  }
+
+  .invoice-dates {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    text-align: right;
+  }
+
+  .invoice-section {
+    margin-bottom: 24px;
+  }
+
+  .section-label {
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #4b5563;
+  }
+
+  .payment-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .table-container {
+    margin-top: 24px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .invoice-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+
+  .invoice-table th {
+    padding: 12px 16px;
+    font-size: 11px;
+    white-space: nowrap;
+    border: none;
+    border-spacing: 0;
+    background-color: #f6f6f7;
+    text-align: left;
+  }
+
+  .invoice-table td {
+    padding: 16px 24px;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+  }
+
+  .th-description {
+    width: 40%;
+  }
+
+  .th-qty,
+  .th-discount,
+  .th-tax {
+    width: 10%;
+  }
+
+  .th-price,
+  .th-amount {
+    width: 15%;
+  }
+
+  .td-description {
+    width: 40%;
+  }
+
+  .td-qty,
+  .td-discount,
+  .td-tax {
+    width: 10%;
+  }
+
+  .td-price,
+  .td-amount {
+    width: 15%;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  .invoice-border {
+    border-bottom: 1px solid var(--mainColor);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index dfa24f8b..cf152716 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -1,9 +1,13 @@
 <svelte:options customElement="single-invoice" />
 
 <script lang="ts">
-  import type { Config as WagmiConfig } from "@wagmi/core";
+  import type {
+    Config as WagmiConfig,
+    GetAccountReturnType,
+    WatchAccountReturnType,
+  } from "@wagmi/core";
   import { toast } from "svelte-sonner";
-  import { getAccount,  getBalance } from "@wagmi/core";
+  import { getAccount, getBalance, watchAccount } from "@wagmi/core";
   import {
     approveErc20,
     approveErc20ForProxyConversion,
@@ -15,7 +19,7 @@
     Types,
     type RequestNetwork,
   } from "@requestnetwork/request-client.js";
-  import {  CurrencyTypes } from "@requestnetwork/types";
+  import { CurrencyTypes } from "@requestnetwork/types";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   import { CurrencyManager } from "@requestnetwork/currency";
   // Components
@@ -36,6 +40,7 @@
   import { formatUnits } from "viem";
   import { getConversionPaymentValues } from "../utils/getConversionPaymentValues";
   import { getEthersSigner } from "../utils";
+  import SingleInvoiceSkeleton from "./loading-skeleton.svelte";
 
   interface EntityInfo {
     value: string;
@@ -98,12 +103,12 @@
   ];
 
   $: if (request && address) {
-    isPayee = request.payee?.value?.toLowerCase() === address.toLowerCase();
-
-    shouldShowStatuses =
-      !isPaid &&
-      !isPayee &&
-      request.payer?.value?.toLowerCase() === address.toLowerCase();
+    isPayee = request.payee?.value?.toLowerCase() === address?.toLowerCase();
+    network = request?.extensionsData[0]?.parameters?.network || "mainnet";
+    hexStringChain = "0x" + account?.chainId?.toString(16);
+    correctChain =
+      hexStringChain ===
+      String(getNetworkIdFromNetworkName(network || "mainnet"));
   }
 
   let status = checkStatus(requestData || request);
@@ -169,13 +174,10 @@
     account = account;
     network = request.currencyInfo?.network || "mainnet";
     currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
+    unknownCurrency = currency ? currency.decimals === undefined : false;
   }
 
   const getOneRequest = async (requestId: string) => {
-    if (!requestId || !requestNetwork) {
-      return;
-    }
-
     try {
       loading = true;
       unsupportedNetwork = false;
@@ -291,16 +293,68 @@
     }
   };
 
-  onMount(async () => {
+  let unwatchAccount: WatchAccountReturnType | undefined;
+
+  const handleWalletConnection = async () => {
+    account = getAccount(wagmiConfig);
+    if (requestId && requestNetwork) {
+      await getOneRequest(requestId);
+    }
+  };
+
+  const handleWalletDisconnection = () => {
+    account = undefined;
+    address = undefined;
+    request = undefined;
+    requestData = null;
+    signer = null;
+    approved = false;
+    isPayee = false;
+  };
+
+  const handleWalletChange = (
+    account: GetAccountReturnType,
+    previousAccount: GetAccountReturnType
+  ) => {
+    if (account?.address !== previousAccount?.address) {
+      handleWalletDisconnection();
+      handleWalletConnection();
+    } else if (account?.address) {
+      handleWalletConnection();
+    } else {
+      handleWalletDisconnection();
+    }
+  };
+
+  onMount(() => {
     // Initialize currency manager
     currencyManager = initializeCurrencyManager(currencies);
 
-    // Fetch initial request data
-    if (requestId) {
-      await getOneRequest(requestId);
+    // Set up account watching
+    unwatchAccount = watchAccount(wagmiConfig, {
+      onChange(
+        account: GetAccountReturnType,
+        previousAccount: GetAccountReturnType
+      ) {
+        tick().then(() => {
+          handleWalletChange(account, previousAccount);
+        });
+      },
+    });
+  });
+
+  onDestroy(() => {
+    if (typeof unwatchAccount === "function") {
+      unwatchAccount();
     }
   });
 
+  // Make address and chain reactive to account changes
+  $: if (account) {
+    address = account.address;
+    hexStringChain = "0x" + account.chainId?.toString(16);
+  }
+
   // Watch for changes in requestId
   $: if (requestId) {
     getOneRequest(requestId);
@@ -313,8 +367,8 @@
 
   const payTheRequest = async () => {
     try {
-      loading = true;
       isSigningTransaction = true;
+      shouldShowStatuses = true;
 
       if (!requestNetwork || !requestData?.requestId) {
         throw new Error("Request network or request data not available");
@@ -328,25 +382,43 @@
       }
 
       let paymentSettings = undefined;
+
+      // Handle conversion payments
       if (
         paymentNetworkExtension?.id ===
           Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY ||
         paymentNetworkExtension?.id ===
           Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ETH_PROXY
       ) {
-        if (!currency || !paymentCurrencies[0]) {
-          throw new Error("Currency information not available");
+        try {
+          if (!currency || !paymentCurrencies[0]) {
+            throw new Error("Missing currency information for conversion");
+          }
+
+          const { conversion } = await getConversionPaymentValues({
+            baseAmount: requestData.expectedAmount,
+            denominationCurrency: currency,
+            selectedPaymentCurrency: paymentCurrencies[0],
+            currencyManager,
+            provider: signer?.provider,
+            fromAddress: address,
+          });
+
+          paymentSettings = conversion;
+        } catch (conversionError) {
+          console.error("Conversion calculation failed:", conversionError);
+          toast.error("Failed to calculate conversion rate", {
+            description: "Please try again or use a different payment method",
+          });
+          throw conversionError;
         }
+      }
 
-        const { conversion } = await getConversionPaymentValues({
-          baseAmount: requestData.expectedAmount,
-          denominationCurrency: currency,
-          selectedPaymentCurrency: paymentCurrencies[0],
-          currencyManager,
-          provider: signer,
-          fromAddress: address,
-        });
-        paymentSettings = conversion;
+      // Update sign transaction status
+      const signStatus = statuses.find((s) => s.name === "SIGN_TRANSACTION");
+      if (signStatus) {
+        signStatus.done = false;
+        statuses = [...statuses];
       }
 
       const paymentTx = await payRequest(
@@ -358,31 +430,34 @@
       );
 
       // Update sign transaction status
-      const signStatus = statuses.find((s) => s.name === "SIGN_TRANSACTION");
-      if (signStatus) signStatus.done = true;
-      statuses = [...statuses];
+      if (signStatus) {
+        signStatus.done = true;
+        statuses = [...statuses];
+      }
 
       await paymentTx.wait();
 
       // Update payment detected status
       const paymentStatus = statuses.find((s) => s.name === "PAYMENT_DETECTED");
-      if (paymentStatus) paymentStatus.done = true;
-      statuses = [...statuses];
+      if (paymentStatus) {
+        paymentStatus.done = true;
+        statuses = [...statuses];
+      }
 
+      // Wait for payment confirmation
       while (requestData.balance?.balance! < requestData.expectedAmount) {
         requestData = await _request?.refresh();
         await new Promise((resolve) => setTimeout(resolve, 1000));
       }
 
       requestData = await _request?.refresh();
-      request = requestData; // Update the parent request object
-
       isPaid = true;
       status = checkStatus(requestData);
       isRequestPayed = true;
-    } catch (err) {
-      console.error("Something went wrong while paying : ", err);
 
+      toast.success("Payment successful!");
+    } catch (err) {
+      console.error("Payment failed:", err);
       if (
         String(err).includes("ACTION_REJECTED") ||
         String(err).includes("User rejected")
@@ -395,14 +470,9 @@
           description: err instanceof Error ? err.message : String(err),
         });
       }
-
-      statuses = statuses.map((status) => ({
-        ...status,
-        done: false,
-      }));
     } finally {
-      loading = false;
       isSigningTransaction = false;
+      shouldShowStatuses = false;
     }
   };
 
@@ -413,11 +483,6 @@
   ) => {
     try {
       if (!paymentNetworkExtension?.id || !address || !signer) {
-        console.log("Missing required arguments for approval check:", {
-          network: paymentNetworkExtension?.id,
-          address,
-          signer: !!signer,
-        });
         return false;
       }
 
@@ -477,7 +542,6 @@
 
   async function approve() {
     try {
-      loading = true;
       isSigningTransaction = true;
 
       const approvers: { [key: string]: () => Promise<void> } = {
@@ -512,30 +576,59 @@
     } catch (err) {
       console.error("Something went wrong while approving ERC20: ", err);
     } finally {
-      loading = false;
       isSigningTransaction = false;
     }
   }
 
   async function switchNetworkIfNeeded(network: string) {
     try {
-      const targetNetworkId = String(getNetworkIdFromNetworkName(network));
-      await account.connector.switchChain({ chainId: Number(targetNetworkId) });
-      signer = await getEthersSigner(wagmiConfig);
+      if (!network) {
+        throw new Error("Network is undefined");
+      }
+
+      const targetNetworkId = getNetworkIdFromNetworkName(network);
+      if (!targetNetworkId) {
+        throw new Error(`Unsupported network: ${network}`);
+      }
 
-      correctChain = true;
+      // Only switch if we're on a different network
+      if (account?.chainId !== parseInt(targetNetworkId, 16)) {
+        await account.connector?.switchChain({
+          chainId: parseInt(targetNetworkId, 16),
+        });
 
-      // Update network switch status
-      const networkStatus = statuses.find((s) => s.name === "CORRECT_NETWORK");
-      if (networkStatus) networkStatus.done = true;
+        // Wait for the network to switch and get new signer
+        await tick();
+        signer = await getEthersSigner(wagmiConfig);
+
+        // Update chain status
+        correctChain = true;
+        const networkStatus = statuses.find(
+          (s) => s.name === "CORRECT_NETWORK"
+        );
+        if (networkStatus) networkStatus.done = true;
+        statuses = [...statuses];
+      }
+
+      // Re-check approval after network switch
+      if (paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20) {
+        approved = await checkApproval(requestData, paymentCurrencies, signer);
+      }
     } catch (err) {
-      console.error("Something went wrong while switching networks: ", err);
-      toast.error("Failed to switch network");
+      console.error("Network switch failed:", err);
+      toast.error("Failed to switch network", {
+        description: err instanceof Error ? err.message : String(err),
+      });
       throw err;
     }
   }
 
   function getNetworkIdFromNetworkName(network: string): string {
+    if (!network) {
+      console.warn("Network name is undefined, defaulting to mainnet");
+      return "0x1"; // default to mainnet
+    }
+
     const networkIds: { [key: string]: string } = {
       mainnet: "0x1",
       matic: "0x89",
@@ -550,7 +643,9 @@
       zksyncera: "0x144",
       base: "0x2105",
     };
-    return networkIds[network];
+
+    const normalizedNetwork = network.toLowerCase();
+    return networkIds[normalizedNetwork] || "0x1"; // default to mainnet if network not found
   }
 
   // FIXME: Add rounding functionality
@@ -608,39 +703,88 @@
 
   const currentStatusIndex = statuses.length - 1;
 
-  async function handlePayment() {
+  const handlePayment = async () => {
     try {
-      await switchNetworkIfNeeded(network || "mainnet");
+      if (!correctChain) {
+        await switchNetworkIfNeeded(network || "mainnet");
+        return;
+      }
 
       if (
-        !approved &&
-        paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20
+        paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20 &&
+        !approved
       ) {
-        await approve();
-
-        const approveStatus = statuses.find((s) => s.name === "APPROVE_ERC20");
-        if (approveStatus) approveStatus.done = true;
-
+        await handleApproval();
         return;
       }
 
       await payTheRequest();
     } catch (err) {
-      console.error("Error during payment process:", err);
-      toast.error("Payment process failed", {
-        description: String(err),
-      });
-      // Reset statuses on error make them all false
-      statuses = statuses.map((status) => ({
-        ...status,
-        done: false,
-      }));
+      console.error("Payment action failed:", err);
+      if (
+        String(err).includes("ACTION_REJECTED") ||
+        String(err).includes("User rejected")
+      ) {
+        toast.error("Transaction cancelled", {
+          description: "You rejected the transaction",
+        });
+      } else {
+        toast.error("Payment failed", {
+          description: err instanceof Error ? err.message : String(err),
+        });
+      }
     }
-  }
+  };
+
+  const handleApproval = async () => {
+    try {
+      isSigningTransaction = true;
+
+      if (
+        paymentNetworkExtension?.id ===
+        Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY
+      ) {
+        await approveErc20ForProxyConversion(
+          requestData,
+          signer,
+          paymentCurrencies[0]
+        );
+      } else {
+        await approveErc20(requestData, signer);
+      }
+
+      approved = true;
+
+      // Update approval status if it exists
+      const approvalStatus = statuses.find((s) => s.name === "APPROVE_ERC20");
+      if (approvalStatus) {
+        approvalStatus.done = true;
+        statuses = [...statuses];
+      }
+    } catch (err) {
+      console.error("Approval failed:", err);
+      if (
+        String(err).includes("ACTION_REJECTED") ||
+        String(err).includes("User rejected")
+      ) {
+        toast.error("Transaction cancelled", {
+          description: "You rejected the transaction",
+        });
+      } else {
+        toast.error("Approval failed", {
+          description: err instanceof Error ? err.message : String(err),
+        });
+      }
+    } finally {
+      isSigningTransaction = false;
+    }
+  };
 </script>
 
 {#if loading}
-  <div class="innerDrawer">Loading...</div>
+  <SingleInvoiceSkeleton {config} />
+{:else if !requestId}
+  <div class="innerDrawer">Error: Missing required Request ID</div>
 {:else if request}
   <div
     class="innerDrawer"
@@ -1019,6 +1163,8 @@
   }
 
   .invoice-number {
+    margin: 0;
+    margin-bottom: 18px;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 700;
diff --git a/packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs b/packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs
deleted file mode 100644
index 6142a8e8..00000000
--- a/packages/single-invoice/vite.config.ts.timestamp-1736352084979-555798874d03.mjs
+++ /dev/null
@@ -1,10 +0,0 @@
-// vite.config.ts
-import { sveltekit } from "file:///Users/stefdev/Desktop/RN/web-components/node_modules/@sveltejs/kit/src/exports/vite/index.js";
-import { defineConfig } from "file:///Users/stefdev/Desktop/RN/web-components/node_modules/vite/dist/node/index.js";
-var vite_config_default = defineConfig({
-  plugins: [sveltekit()]
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvc3RlZmRldi9EZXNrdG9wL1JOL3dlYi1jb21wb25lbnRzL3BhY2thZ2VzL3NpbmdsZS1pbnZvaWNlXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvc3RlZmRldi9EZXNrdG9wL1JOL3dlYi1jb21wb25lbnRzL3BhY2thZ2VzL3NpbmdsZS1pbnZvaWNlL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9zdGVmZGV2L0Rlc2t0b3AvUk4vd2ViLWNvbXBvbmVudHMvcGFja2FnZXMvc2luZ2xlLWludm9pY2Uvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tIFwiQHN2ZWx0ZWpzL2tpdC92aXRlXCI7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbc3ZlbHRla2l0KCldLFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQWtYLFNBQVMsaUJBQWlCO0FBQzVZLFNBQVMsb0JBQW9CO0FBRTdCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxVQUFVLENBQUM7QUFDdkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

From 317fc672447e1a57eaf188e94c80346f0dfe02b4 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Wed, 15 Jan 2025 20:09:42 +0100
Subject: [PATCH 04/18] fix: decoupling utils, using new token list

---
 .../src/lib/react/SingleInvoice.d.ts          |   3 -
 .../src/lib/single-invoice.svelte             |  80 ++++++---
 .../src/utils/wallet-utils.d.ts               |   8 -
 shared/utils/chainlink.ts                     |  40 +++++
 shared/utils/conversion.ts                    |  50 ++++++
 shared/utils/debounce.ts                      |  11 ++
 shared/utils/formatAddress.ts                 |  11 +-
 shared/utils/getConversionPaymentValues.ts    | 170 ++++++++++++++++++
 .../src => shared}/utils/wallet-utils.ts      |   0
 9 files changed, 330 insertions(+), 43 deletions(-)
 delete mode 100644 packages/single-invoice/src/utils/wallet-utils.d.ts
 create mode 100644 shared/utils/chainlink.ts
 create mode 100644 shared/utils/conversion.ts
 create mode 100644 shared/utils/debounce.ts
 create mode 100644 shared/utils/getConversionPaymentValues.ts
 rename {packages/single-invoice/src => shared}/utils/wallet-utils.ts (100%)

diff --git a/packages/single-invoice/src/lib/react/SingleInvoice.d.ts b/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
index c56a2e01..959f3452 100644
--- a/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
+++ b/packages/single-invoice/src/lib/react/SingleInvoice.d.ts
@@ -12,8 +12,6 @@ export interface SingleInvoiceProps {
   wagmiConfig: WagmiConfig;
   /** Instance of the Request Network client */
   requestNetwork: RequestNetwork | null | undefined;
-  /** Currency manager instance for handling different currencies */
-  currencies?: CurrencyTypes.CurrencyInput[];
 }
 
 /**
@@ -31,7 +29,6 @@ export interface SingleInvoiceProps {
  *   config={config}
  *   wagmiConfig={wagmiConfig}
  *   requestNetwork={requestNetwork}
- *   currencies={currencies}
  * />
  */
 declare const SingleInvoice: React.FC<SingleInvoiceProps>;
diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index cf152716..dd515eaa 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -38,8 +38,8 @@
   import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
   import { onMount, onDestroy, tick } from "svelte";
   import { formatUnits } from "viem";
-  import { getConversionPaymentValues } from "../utils/getConversionPaymentValues";
-  import { getEthersSigner } from "../utils";
+  import { getConversionPaymentValues } from "@requestnetwork/shared-utils/getConversionPaymentValues";
+  import { getEthersSigner } from "@requestnetwork/shared-utils/wallet-utils";
   import SingleInvoiceSkeleton from "./loading-skeleton.svelte";
 
   interface EntityInfo {
@@ -55,7 +55,6 @@
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let requestId: string;
-  export let currencies: CurrencyTypes.CurrencyInput[] = [];
 
   let account = getAccount(wagmiConfig);
   let address = account?.address;
@@ -166,7 +165,13 @@
     buyerInfo = generateDetailParagraphs(request.contentData?.buyerInfo);
   }
 
-  $: if (request && account && network && !unknownCurrency) {
+  $: if (
+    request &&
+    account &&
+    network &&
+    !unknownCurrency &&
+    paymentCurrencies?.[0]
+  ) {
     checkBalance();
   }
 
@@ -177,6 +182,23 @@
     unknownCurrency = currency ? currency.decimals === undefined : false;
   }
 
+  onMount(async () => {
+    currencyManager = await initializeCurrencyManager();
+  });
+
+  onMount(() => {
+    unwatchAccount = watchAccount(wagmiConfig, {
+      onChange(
+        account: GetAccountReturnType,
+        previousAccount: GetAccountReturnType
+      ) {
+        tick().then(() => {
+          handleWalletChange(account, previousAccount);
+        });
+      },
+    });
+  });
+
   const getOneRequest = async (requestId: string) => {
     try {
       loading = true;
@@ -326,23 +348,6 @@
     }
   };
 
-  onMount(() => {
-    // Initialize currency manager
-    currencyManager = initializeCurrencyManager(currencies);
-
-    // Set up account watching
-    unwatchAccount = watchAccount(wagmiConfig, {
-      onChange(
-        account: GetAccountReturnType,
-        previousAccount: GetAccountReturnType
-      ) {
-        tick().then(() => {
-          handleWalletChange(account, previousAccount);
-        });
-      },
-    });
-  });
-
   onDestroy(() => {
     if (typeof unwatchAccount === "function") {
       unwatchAccount();
@@ -374,6 +379,15 @@
         throw new Error("Request network or request data not available");
       }
 
+      // Ensure we're on the correct network first
+      await switchNetworkIfNeeded(network || "mainnet");
+
+      // Get fresh signer after network switch
+      signer = await getEthersSigner(wagmiConfig);
+      if (!signer || !signer.provider) {
+        throw new Error("No signer or provider available");
+      }
+
       const _request = await requestNetwork?.fromRequestId(
         requestData.requestId
       );
@@ -383,7 +397,6 @@
 
       let paymentSettings = undefined;
 
-      // Handle conversion payments
       if (
         paymentNetworkExtension?.id ===
           Types.Extension.PAYMENT_NETWORK_ID.ANY_TO_ERC20_PROXY ||
@@ -395,20 +408,31 @@
             throw new Error("Missing currency information for conversion");
           }
 
+          // Verify ERC20 approval first if needed
+          if (
+            paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20 &&
+            !approved
+          ) {
+            await approve();
+          }
+
           const { conversion } = await getConversionPaymentValues({
             baseAmount: requestData.expectedAmount,
             denominationCurrency: currency,
             selectedPaymentCurrency: paymentCurrencies[0],
             currencyManager,
-            provider: signer?.provider,
+            provider: signer.provider,
             fromAddress: address,
           });
 
           paymentSettings = conversion;
         } catch (conversionError) {
-          console.error("Conversion calculation failed:", conversionError);
-          toast.error("Failed to calculate conversion rate", {
-            description: "Please try again or use a different payment method",
+          console.error("Conversion calculation failed:", {
+            error: conversionError,
+            currency,
+            paymentCurrency: paymentCurrencies[0],
+            network,
+            chainId: await signer.getChainId(),
           });
           throw conversionError;
         }
@@ -444,7 +468,6 @@
         statuses = [...statuses];
       }
 
-      // Wait for payment confirmation
       while (requestData.balance?.balance! < requestData.expectedAmount) {
         requestData = await _request?.refresh();
         await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -666,6 +689,7 @@
           address,
           paymentCurrency: paymentCurrencies[0],
           network,
+          paymentCurrencies,
         });
         return;
       }
@@ -701,8 +725,6 @@
     }
   }
 
-  const currentStatusIndex = statuses.length - 1;
-
   const handlePayment = async () => {
     try {
       if (!correctChain) {
diff --git a/packages/single-invoice/src/utils/wallet-utils.d.ts b/packages/single-invoice/src/utils/wallet-utils.d.ts
deleted file mode 100644
index 961786b6..00000000
--- a/packages/single-invoice/src/utils/wallet-utils.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Config } from "@wagmi/core";
-import { providers } from "ethers";
-import type { Account, Chain, Client, Transport } from "viem";
-export declare const publicClientToProvider: (publicClient: any) => providers.JsonRpcProvider;
-export declare function clientToSigner(client: Client<Transport, Chain, Account>): providers.JsonRpcSigner;
-export declare function getEthersSigner(config: Config, { chainId }?: {
-    chainId?: number;
-}): Promise<providers.JsonRpcSigner | undefined>;
diff --git a/shared/utils/chainlink.ts b/shared/utils/chainlink.ts
new file mode 100644
index 00000000..a7c72b1f
--- /dev/null
+++ b/shared/utils/chainlink.ts
@@ -0,0 +1,40 @@
+import { isISO4217Currency } from "@requestnetwork/currency";
+import { chainlinkConversionPath } from "@requestnetwork/smart-contracts";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { BigNumber, providers } from "ethers";
+
+export const getChainlinkRate = async (
+  from: CurrencyTypes.CurrencyDefinition,
+  to: CurrencyTypes.CurrencyDefinition,
+  {
+    network,
+    provider,
+    currencyManager,
+  }: {
+    network: CurrencyTypes.EvmChainName;
+    provider: providers.Provider;
+    currencyManager: CurrencyTypes.ICurrencyManager;
+  },
+) => {
+  try {
+    const chainlink = chainlinkConversionPath.connect(network, provider);
+    const path = currencyManager.getConversionPath(from, to, network);
+    if (!path) return null;
+    const result = await chainlink.getRate(path);
+    if (!result) return null;
+
+    // ChainlinkConversionPath uses 8 decimals for fiat.
+    const fromDecimals = isISO4217Currency(from) ? 8 : from.decimals;
+    const toDecimals = isISO4217Currency(to) ? 8 : to.decimals;
+    const value = result.rate
+      .mul(BigNumber.from(10).pow(fromDecimals))
+      .div(BigNumber.from(10).pow(toDecimals));
+    return {
+      value,
+      decimals: result.decimals.toString().length - 1,
+    };
+  } catch (e) {
+    console.error('Error fetching Chainlink rate:', e);
+    return null;
+  }
+};
diff --git a/shared/utils/conversion.ts b/shared/utils/conversion.ts
new file mode 100644
index 00000000..e42a6da3
--- /dev/null
+++ b/shared/utils/conversion.ts
@@ -0,0 +1,50 @@
+import { isISO4217Currency } from "@requestnetwork/currency";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { EvmChainName } from "@requestnetwork/types/dist/currency-types";
+import { providers, utils } from "ethers";
+import { getChainlinkRate } from './chainlink'
+
+/**
+ * Maximum slippage (swap) or conversion evolution (conversion pn)
+ */
+const MAX_SLIPPAGE_DEFAULT = 1.03;
+const MAX_SLIPPAGE_LOW_VOLATILITY = 1.01;
+export const lowVolatilityTokens = ["DAI", "USDC", "USDT"];
+
+export const getSlippageMargin = (currency: CurrencyTypes.CurrencyInput) => {
+  return lowVolatilityTokens.includes(currency.symbol)
+    ? MAX_SLIPPAGE_LOW_VOLATILITY
+    : MAX_SLIPPAGE_DEFAULT;
+};
+
+/**
+ * Get the conversion rate between two currencies.
+ */
+export const getConversionRate = async ({
+  from,
+  to,
+  currencyManager,
+  provider,
+}: {
+  from: CurrencyTypes.CurrencyDefinition;
+  to: CurrencyTypes.CurrencyDefinition;
+  currencyManager?: CurrencyTypes.ICurrencyManager;
+  provider?: providers.Provider;
+}): Promise<number | undefined> => {
+  if (!isISO4217Currency(to) && currencyManager && provider) {
+    const network = to.network as EvmChainName;
+    try {
+      const chainlinkRate = await getChainlinkRate(from, to, {
+        network,
+        currencyManager,
+        provider,
+      });
+      if (chainlinkRate) {
+        return Number(utils.formatUnits(chainlinkRate.value, chainlinkRate.decimals))
+      }
+    } catch (e) {
+      console.error("Error getting chainlink rate", e);
+      throw e;
+    }
+  }
+};
diff --git a/shared/utils/debounce.ts b/shared/utils/debounce.ts
new file mode 100644
index 00000000..1462f81b
--- /dev/null
+++ b/shared/utils/debounce.ts
@@ -0,0 +1,11 @@
+export const debounce = (func: Function, wait: number) => {
+  let timeout: NodeJS.Timeout;
+  return (...args: any[]) => {
+    const later = () => {
+      clearTimeout(timeout);
+      func.apply(this, args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
diff --git a/shared/utils/formatAddress.ts b/shared/utils/formatAddress.ts
index 91fab1ee..cf55278b 100644
--- a/shared/utils/formatAddress.ts
+++ b/shared/utils/formatAddress.ts
@@ -1,11 +1,16 @@
-import { checkAddress } from "./checkEthAddress";
+import { getAddress } from "viem";
+import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
 
 export const formatAddress = (
   address: string,
   first: number = 6,
   last: number = 4
 ): string => {
-  if (!address) return "";
+  if (!checkAddress(address)) {
+    console.error("Invalid address!");
+  }
 
-  return `${address.slice(0, first)}...${address.slice(-last)}`;
+  const checksumAddress = getAddress(address);
+
+  return `${checksumAddress.slice(0, first)}...${checksumAddress.slice(-last)}`;
 };
diff --git a/shared/utils/getConversionPaymentValues.ts b/shared/utils/getConversionPaymentValues.ts
new file mode 100644
index 00000000..fdd05a13
--- /dev/null
+++ b/shared/utils/getConversionPaymentValues.ts
@@ -0,0 +1,170 @@
+import { CurrencyManager } from "@requestnetwork/currency";
+import { CurrencyTypes } from "@requestnetwork/types";
+import { getAnyErc20Balance } from "@requestnetwork/payment-processor";
+import { BigNumber, BigNumberish, providers, utils } from "ethers";
+
+import { getConversionRate, getSlippageMargin } from "./conversion";
+
+export type SlippageLevel = "safe" | "risky";
+
+interface ConversionPaymentValues {
+  conversion: {
+    currency: CurrencyTypes.ICurrency;
+    maxToSpend: string;
+    currencyManager: CurrencyManager;
+  };
+  slippageLevel: SlippageLevel;
+  totalAmountInPaymentCurrency: {
+    value: number;
+    currency: CurrencyTypes.CurrencyDefinition;
+  };
+  safeBalance: {
+    value: number;
+    currency: CurrencyTypes.CurrencyDefinition;
+  };
+  rate: string;
+}
+
+export const formatUnits = (
+  amount: BigNumber,
+  token: CurrencyTypes.CurrencyDefinition
+): string => {
+  return utils.formatUnits(amount, token.decimals);
+};
+
+export const toFixedDecimal = (numberToFormat: number, decimals?: number) => {
+  const MAX_DECIMALS = decimals !== undefined ? decimals : 5;
+  return Number(numberToFormat.toFixed(MAX_DECIMALS));
+};
+
+export const amountToFixedDecimal = (
+  amount: BigNumberish,
+  currency: CurrencyTypes.CurrencyDefinition,
+  decimals?: number
+) => {
+  return toFixedDecimal(
+    Number.parseFloat(formatUnits(BigNumber.from(amount), currency)),
+    decimals
+  );
+};
+
+/**
+ * Converts a number, even floating, to a BigNumber
+ * @param amount Number to convert, may float
+ * @param token Token
+ */
+export const bigAmountify = (
+  amount: number,
+  token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">
+): BigNumber => {
+  let [whole, decimals] = amount.toString().split(".");
+  let pow = "0";
+  let powSign = true;
+
+  if (decimals && decimals.includes("e")) {
+    powSign = !decimals.includes("e-");
+    [decimals, pow] = powSign ? decimals.split("e") : decimals.split("e-");
+    whole = whole;
+  }
+
+  const wholeBn = utils.parseUnits(whole, token.decimals);
+  const power = BigNumber.from(10).pow(pow);
+
+  if (decimals) {
+    const decimalsBn = utils
+      .parseUnits(decimals, token.decimals)
+      .div(BigNumber.from(10).pow(decimals.length));
+    return powSign
+      ? wholeBn.add(decimalsBn).mul(power)
+      : wholeBn.add(decimalsBn).div(power);
+  }
+  return wholeBn;
+};
+
+/**
+ * Utility method to compute various settings associated to a payment involving conversion only
+ */
+export const getConversionPaymentValues = async ({
+  baseAmount,
+  denominationCurrency,
+  selectedPaymentCurrency,
+  currencyManager,
+  provider,
+  fromAddress,
+}: {
+  baseAmount: number;
+  denominationCurrency: CurrencyTypes.CurrencyDefinition;
+  selectedPaymentCurrency: CurrencyTypes.CurrencyDefinition;
+  currencyManager: CurrencyManager;
+  provider?: providers.Provider;
+  fromAddress?: string;
+}): Promise<ConversionPaymentValues | undefined> => {
+  const conversionRate = await getConversionRate({
+    from: denominationCurrency,
+    to: selectedPaymentCurrency,
+    currencyManager,
+    provider,
+  });
+
+  const minConversionAmount = bigAmountify(
+    baseAmount * Number(conversionRate),
+    selectedPaymentCurrency
+  );
+
+  const safeConversionAmount = bigAmountify(
+    baseAmount *
+      Number(conversionRate) *
+      getSlippageMargin(selectedPaymentCurrency),
+    selectedPaymentCurrency
+  );
+
+  const userBalance = BigNumber.from(
+    fromAddress &&
+      provider &&
+      "address" in selectedPaymentCurrency &&
+      selectedPaymentCurrency.address
+      ? await getAnyErc20Balance(
+          selectedPaymentCurrency.address,
+          fromAddress,
+          provider
+        )
+      : safeConversionAmount
+  );
+
+  const hasEnoughForSlippage = userBalance.gte(safeConversionAmount);
+  const hasEnough = userBalance.gte(minConversionAmount);
+  const isRisky = hasEnough && !hasEnoughForSlippage;
+  const slippageLevel = isRisky ? "risky" : ("safe" as SlippageLevel);
+  const conversionAmount = isRisky ? userBalance : safeConversionAmount;
+
+  const conversion = {
+    currency: CurrencyManager.toStorageCurrency(selectedPaymentCurrency),
+    maxToSpend: conversionAmount.toString(),
+    currencyManager,
+  };
+
+  const totalAmountInPaymentCurrency = {
+    value: amountToFixedDecimal(
+      minConversionAmount,
+      selectedPaymentCurrency,
+      4
+    ),
+    currency: selectedPaymentCurrency,
+  };
+  const safeBalance = {
+    value: amountToFixedDecimal(
+      safeConversionAmount,
+      selectedPaymentCurrency,
+      4
+    ),
+    currency: selectedPaymentCurrency,
+  };
+
+  return {
+    conversion,
+    slippageLevel,
+    totalAmountInPaymentCurrency,
+    safeBalance,
+    rate: conversionRate,
+  };
+};
diff --git a/packages/single-invoice/src/utils/wallet-utils.ts b/shared/utils/wallet-utils.ts
similarity index 100%
rename from packages/single-invoice/src/utils/wallet-utils.ts
rename to shared/utils/wallet-utils.ts

From 07234636147913b9b2a476d22fcc11eccd8f5afc Mon Sep 17 00:00:00 2001
From: MantisClone <david.huntmateo@request.network>
Date: Wed, 15 Jan 2025 15:01:24 -0500
Subject: [PATCH 05/18] Update README to include @requestnetwork/single-invoice
 in link cmds

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 35937e7d..b5925820 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,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
 ```
 

From a1ab4943e928ff4de960a691bb303b1a3b10d7bb Mon Sep 17 00:00:00 2001
From: MantisClone <david.huntmateo@request.network>
Date: Wed, 15 Jan 2025 16:13:00 -0500
Subject: [PATCH 06/18] add single-invoice to the publish github action

---
 .github/workflows/npm-publish.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/npm-publish.yaml b/.github/workflows/npm-publish.yaml
index ba6be25f..112f3e27 100644
--- a/.github/workflows/npm-publish.yaml
+++ b/.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

From 397c437f4e0feb9e2f56da004565039cd294b3a0 Mon Sep 17 00:00:00 2001
From: MantisClone <david.huntmateo@request.network>
Date: Wed, 15 Jan 2025 16:13:25 -0500
Subject: [PATCH 07/18] Add single-invoice to the README

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index b5925820..8e9c4b3f 100644
--- a/README.md
+++ b/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) |
 
 

From 0998eabbbe9140a01b148c18ca819c52f10e9e9c Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 11:33:54 +0100
Subject: [PATCH 08/18] fix: added single-invoice share and path prop

---
 .../src/lib/dashboard/invoice-view.svelte     | 31 ++++++++++++++++++-
 .../src/lib/react/InvoiceDashboard.d.ts       |  2 ++
 .../src/lib/view-requests.svelte              |  2 ++
 shared/icons/share.svelte                     | 21 +++++++++++++
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 shared/icons/share.svelte

diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
index 856a6343..d38917e8 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -22,6 +22,7 @@
   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";
@@ -49,6 +50,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 +514,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 +606,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 +656,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 +976,7 @@
   .invoice-number svg {
     width: 13px;
     height: 13px;
+    cursor: pointer;
   }
 
   .invoice-address {
diff --git a/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts b/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts
index 9067cf18..17a97049 100644
--- a/packages/invoice-dashboard/src/lib/react/InvoiceDashboard.d.ts
+++ b/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>;
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index 59d23d0b..1677055e 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -63,6 +63,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 +904,7 @@
             bind:currencyManager
             config={activeConfig}
             request={activeRequest}
+            {singleInvoicePath}
           />
         {/if}
       </Drawer>
diff --git a/shared/icons/share.svelte b/shared/icons/share.svelte
new file mode 100644
index 00000000..c81c637d
--- /dev/null
+++ b/shared/icons/share.svelte
@@ -0,0 +1,21 @@
+<script>
+  export let onClick = () => {};
+</script>
+
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  on:click|stopPropagation={onClick}
+  style="cursor: pointer;"
+>
+  <path
+    d="M16.2722 6.00791C16.6191 6.60134 17.263 7 18 7C19.1046 7 20 6.10457 20 5C20 3.89543 19.1046 3 18 3C16.8954 3 16 3.89543 16 5C16 5.36756 16.0991 5.71195 16.2722 6.00791ZM16.2722 6.00791L7.72784 10.9921M7.72784 10.9921C7.38092 10.3987 6.73701 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14C6.73701 14 7.38092 13.6013 7.72784 13.0079M7.72784 10.9921C7.90085 11.288 8 11.6324 8 12C8 12.3676 7.90085 12.712 7.72784 13.0079M7.72784 13.0079L16.2722 17.9921M16.2722 17.9921C16.6191 17.3987 17.263 17 18 17C19.1046 17 20 17.8954 20 19C20 20.1046 19.1046 21 18 21C16.8954 21 16 20.1046 16 19C16 18.6324 16.0991 18.288 16.2722 17.9921Z"
+    stroke="#4C5159"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

From f17559d4d6351ea1775b27d948467ab66a6e8bf4 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 12:18:26 +0100
Subject: [PATCH 09/18] chore: decouple utils folder

---
 .../src/lib/create-invoice-form.svelte        |   7 +-
 .../src/lib/invoice/form-view.svelte          |   8 +-
 .../src/lib/invoice/form.svelte               |   9 +-
 .../src/lib/dashboard/invoice-view.svelte     |  17 +-
 .../src/lib/view-requests.svelte              |  18 +-
 .../invoice-dashboard/src/utils/capitalize.ts |   1 -
 .../invoice-dashboard/src/utils/chainlink.ts  |  40 ----
 .../invoice-dashboard/src/utils/conversion.ts |  50 -----
 .../invoice-dashboard/src/utils/debounce.ts   |  11 --
 .../src/utils/formatAddress.ts                |  21 ---
 .../src/utils/getConversionPaymentValues.ts   | 171 ------------------
 packages/invoice-dashboard/src/utils/index.ts |   4 -
 .../src/utils/wallet-utils.ts                 |  38 ----
 .../lib/components/payment-complete.svelte    |   9 +-
 .../src/lib/components/wallet-info.svelte     |   2 +-
 .../src/lib/single-invoice.svelte             |  18 +-
 shared/utils/index.ts                         |  41 +++++
 17 files changed, 92 insertions(+), 373 deletions(-)
 delete mode 100644 packages/invoice-dashboard/src/utils/capitalize.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/chainlink.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/conversion.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/debounce.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/formatAddress.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/getConversionPaymentValues.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/index.ts
 delete mode 100644 packages/invoice-dashboard/src/utils/wallet-utils.ts
 create mode 100644 shared/utils/index.ts

diff --git a/packages/create-invoice-form/src/lib/create-invoice-form.svelte b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
index 603ff7a9..5f12fb06 100644
--- a/packages/create-invoice-form/src/lib/create-invoice-form.svelte
+++ b/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";
diff --git a/packages/create-invoice-form/src/lib/invoice/form-view.svelte b/packages/create-invoice-form/src/lib/invoice/form-view.svelte
index c5578509..12896448 100644
--- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte
+++ b/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;
diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 8f489a53..8f901659 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/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";
 
diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
index d38917e8..d3583668 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -24,15 +24,16 @@
   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;
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index 1677055e..6540fbc7 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/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 {
diff --git a/packages/invoice-dashboard/src/utils/capitalize.ts b/packages/invoice-dashboard/src/utils/capitalize.ts
deleted file mode 100644
index ac21f51c..00000000
--- a/packages/invoice-dashboard/src/utils/capitalize.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const capitalize = (str: string) => (str && str[0].toUpperCase() + str.slice(1)) || ""
diff --git a/packages/invoice-dashboard/src/utils/chainlink.ts b/packages/invoice-dashboard/src/utils/chainlink.ts
deleted file mode 100644
index a7c72b1f..00000000
--- a/packages/invoice-dashboard/src/utils/chainlink.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { isISO4217Currency } from "@requestnetwork/currency";
-import { chainlinkConversionPath } from "@requestnetwork/smart-contracts";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { BigNumber, providers } from "ethers";
-
-export const getChainlinkRate = async (
-  from: CurrencyTypes.CurrencyDefinition,
-  to: CurrencyTypes.CurrencyDefinition,
-  {
-    network,
-    provider,
-    currencyManager,
-  }: {
-    network: CurrencyTypes.EvmChainName;
-    provider: providers.Provider;
-    currencyManager: CurrencyTypes.ICurrencyManager;
-  },
-) => {
-  try {
-    const chainlink = chainlinkConversionPath.connect(network, provider);
-    const path = currencyManager.getConversionPath(from, to, network);
-    if (!path) return null;
-    const result = await chainlink.getRate(path);
-    if (!result) return null;
-
-    // ChainlinkConversionPath uses 8 decimals for fiat.
-    const fromDecimals = isISO4217Currency(from) ? 8 : from.decimals;
-    const toDecimals = isISO4217Currency(to) ? 8 : to.decimals;
-    const value = result.rate
-      .mul(BigNumber.from(10).pow(fromDecimals))
-      .div(BigNumber.from(10).pow(toDecimals));
-    return {
-      value,
-      decimals: result.decimals.toString().length - 1,
-    };
-  } catch (e) {
-    console.error('Error fetching Chainlink rate:', e);
-    return null;
-  }
-};
diff --git a/packages/invoice-dashboard/src/utils/conversion.ts b/packages/invoice-dashboard/src/utils/conversion.ts
deleted file mode 100644
index e42a6da3..00000000
--- a/packages/invoice-dashboard/src/utils/conversion.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { isISO4217Currency } from "@requestnetwork/currency";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { EvmChainName } from "@requestnetwork/types/dist/currency-types";
-import { providers, utils } from "ethers";
-import { getChainlinkRate } from './chainlink'
-
-/**
- * Maximum slippage (swap) or conversion evolution (conversion pn)
- */
-const MAX_SLIPPAGE_DEFAULT = 1.03;
-const MAX_SLIPPAGE_LOW_VOLATILITY = 1.01;
-export const lowVolatilityTokens = ["DAI", "USDC", "USDT"];
-
-export const getSlippageMargin = (currency: CurrencyTypes.CurrencyInput) => {
-  return lowVolatilityTokens.includes(currency.symbol)
-    ? MAX_SLIPPAGE_LOW_VOLATILITY
-    : MAX_SLIPPAGE_DEFAULT;
-};
-
-/**
- * Get the conversion rate between two currencies.
- */
-export const getConversionRate = async ({
-  from,
-  to,
-  currencyManager,
-  provider,
-}: {
-  from: CurrencyTypes.CurrencyDefinition;
-  to: CurrencyTypes.CurrencyDefinition;
-  currencyManager?: CurrencyTypes.ICurrencyManager;
-  provider?: providers.Provider;
-}): Promise<number | undefined> => {
-  if (!isISO4217Currency(to) && currencyManager && provider) {
-    const network = to.network as EvmChainName;
-    try {
-      const chainlinkRate = await getChainlinkRate(from, to, {
-        network,
-        currencyManager,
-        provider,
-      });
-      if (chainlinkRate) {
-        return Number(utils.formatUnits(chainlinkRate.value, chainlinkRate.decimals))
-      }
-    } catch (e) {
-      console.error("Error getting chainlink rate", e);
-      throw e;
-    }
-  }
-};
diff --git a/packages/invoice-dashboard/src/utils/debounce.ts b/packages/invoice-dashboard/src/utils/debounce.ts
deleted file mode 100644
index 1462f81b..00000000
--- a/packages/invoice-dashboard/src/utils/debounce.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const debounce = (func: Function, wait: number) => {
-  let timeout: NodeJS.Timeout;
-  return (...args: any[]) => {
-    const later = () => {
-      clearTimeout(timeout);
-      func.apply(this, args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-};
diff --git a/packages/invoice-dashboard/src/utils/formatAddress.ts b/packages/invoice-dashboard/src/utils/formatAddress.ts
deleted file mode 100644
index 9b91118e..00000000
--- a/packages/invoice-dashboard/src/utils/formatAddress.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getAddress } from "viem";
-
-export const formatAddress = (
-   address: string,
-   first: number = 6,
-   last: number = 4
-): string | '-' => {
-   if (!address || address.length === 0) {
-    // Consider using a proper logging service
-    console.warn("[formatAddress] No address provided");
-    return '-';
-   } else {
-    try {
-      const checksumAddress = getAddress(address);
-      return `${checksumAddress.slice(0, first)}...${checksumAddress.slice(-last)}`;
-    } catch (error) {
-      console.error("Invalid address: ", error);
-      return '-';
-    }
-  }
-};
diff --git a/packages/invoice-dashboard/src/utils/getConversionPaymentValues.ts b/packages/invoice-dashboard/src/utils/getConversionPaymentValues.ts
deleted file mode 100644
index f9d306d9..00000000
--- a/packages/invoice-dashboard/src/utils/getConversionPaymentValues.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { CurrencyManager } from "@requestnetwork/currency";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { getAnyErc20Balance } from "@requestnetwork/payment-processor";
-import { BigNumber, BigNumberish, providers, utils } from "ethers";
-
-import { getConversionRate, getSlippageMargin } from "./conversion";
-
-export type SlippageLevel = "safe" | "risky";
-
-interface ConversionPaymentValues {
-  conversion: {
-    currency: CurrencyTypes.ICurrency;
-    maxToSpend: string;
-    currencyManager: CurrencyManager;
-  };
-  slippageLevel: SlippageLevel;
-  totalAmountInPaymentCurrency: {
-    value: number;
-    currency: CurrencyTypes.CurrencyDefinition;
-  };
-  safeBalance: {
-    value: number;
-    currency: CurrencyTypes.CurrencyDefinition;
-  };
-  rate: string;
-}
-
-export const formatUnits = (
-  amount: BigNumber,
-  token: CurrencyTypes.CurrencyDefinition
-): string => {
-  return utils.formatUnits(amount, token.decimals);
-};
-
-export const toFixedDecimal = (numberToFormat: number, decimals?: number) => {
-  const MAX_DECIMALS = decimals !== undefined ? decimals : 5;
-  return Number(numberToFormat.toFixed(MAX_DECIMALS));
-};
-
-export const amountToFixedDecimal = (
-  amount: BigNumberish,
-  currency: CurrencyTypes.CurrencyDefinition,
-  decimals?: number
-) => {
-  return toFixedDecimal(
-    Number.parseFloat(formatUnits(BigNumber.from(amount), currency)),
-    decimals
-  );
-};
-
-/**
- * Converts a number, even floating, to a BigNumber
- * @param amount Number to convert, may float
- * @param token Token
- */
-export const bigAmountify = (
-  amount: number,
-  token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">
-): BigNumber => {
-  let [whole, decimals] = amount.toString().split(".");
-  let pow = "0";
-  let powSign = true;
-
-  if (decimals && decimals.includes("e")) {
-    powSign = !decimals.includes("e-");
-    [decimals, pow] = powSign ? decimals.split("e") : decimals.split("e-");
-    whole = whole;
-  }
-
-  const wholeBn = utils.parseUnits(whole, token.decimals);
-  const power = BigNumber.from(10).pow(pow);
-
-  if (decimals) {
-    const decimalsBn = utils
-      .parseUnits(decimals, token.decimals)
-      .div(BigNumber.from(10).pow(decimals.length));
-    return powSign
-      ? wholeBn.add(decimalsBn).mul(power)
-      : wholeBn.add(decimalsBn).div(power);
-  }
-  return wholeBn;
-};
-
-/**
- * Utility method to compute various settings associated to a payment involving conversion only
- */
-export const getConversionPaymentValues = async ({
-  baseAmount,
-  denominationCurrency,
-  selectedPaymentCurrency,
-  currencyManager,
-  provider,
-  fromAddress,
-}: {
-  baseAmount: number;
-  denominationCurrency: CurrencyTypes.CurrencyDefinition;
-  selectedPaymentCurrency: CurrencyTypes.CurrencyDefinition;
-  currencyManager: CurrencyManager;
-  provider?: providers.Provider;
-  fromAddress?: string;
-}): Promise<ConversionPaymentValues | undefined> => {
-  const conversionRate = await getConversionRate({
-    from: denominationCurrency,
-    to: selectedPaymentCurrency,
-    currencyManager,
-    provider,
-  });
-
-  const minConversionAmount = bigAmountify(
-    baseAmount * Number(conversionRate),
-    selectedPaymentCurrency
-  );
-  const safeConversionAmount = bigAmountify(
-    baseAmount *
-      Number(conversionRate) *
-      getSlippageMargin(selectedPaymentCurrency),
-    selectedPaymentCurrency
-  );
-
-  const userBalance = BigNumber.from(
-    fromAddress &&
-      provider &&
-      selectedPaymentCurrency.type === "ERC20" &&
-      "address" in selectedPaymentCurrency &&
-      selectedPaymentCurrency.address
-      ? await getAnyErc20Balance(
-          selectedPaymentCurrency.address,
-          fromAddress,
-          provider
-        )
-      : safeConversionAmount
-  );
-
-  const hasEnoughForSlippage = userBalance.gte(safeConversionAmount);
-  const hasEnough = userBalance.gte(minConversionAmount);
-  const isRisky = hasEnough && !hasEnoughForSlippage;
-
-  const slippageLevel = isRisky ? "risky" : ("safe" as SlippageLevel);
-  const conversionAmount = isRisky ? userBalance : safeConversionAmount;
-
-  const conversion = {
-    currency: CurrencyManager.toStorageCurrency(selectedPaymentCurrency),
-    maxToSpend: conversionAmount.toString(),
-    currencyManager,
-  };
-
-  const totalAmountInPaymentCurrency = {
-    value: amountToFixedDecimal(
-      minConversionAmount,
-      selectedPaymentCurrency,
-      4
-    ),
-    currency: selectedPaymentCurrency,
-  };
-  const safeBalance = {
-    value: amountToFixedDecimal(
-      safeConversionAmount,
-      selectedPaymentCurrency,
-      4
-    ),
-    currency: selectedPaymentCurrency,
-  };
-
-  return {
-    conversion,
-    slippageLevel,
-    totalAmountInPaymentCurrency,
-    safeBalance,
-    rate: conversionRate,
-  };
-};
diff --git a/packages/invoice-dashboard/src/utils/index.ts b/packages/invoice-dashboard/src/utils/index.ts
deleted file mode 100644
index 97101620..00000000
--- a/packages/invoice-dashboard/src/utils/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { debounce } from "./debounce";
-export { formatAddress } from "./formatAddress";
-export { publicClientToProvider, getEthersSigner } from "./wallet-utils";
-export { capitalize } from "./capitalize";
diff --git a/packages/invoice-dashboard/src/utils/wallet-utils.ts b/packages/invoice-dashboard/src/utils/wallet-utils.ts
deleted file mode 100644
index e6aa563f..00000000
--- a/packages/invoice-dashboard/src/utils/wallet-utils.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Config, getConnectorClient } from "@wagmi/core";
-import { providers } from "ethers";
-import type { Account, Chain, Client, Transport } from "viem";
-
-export const publicClientToProvider = (publicClient: any) => {
-  const { chains, provider } = publicClient;
-  const network = {
-    chainId: parseInt(chains[0].id, 16),
-    name: chains[0].name,
-  };
-
-  return new providers.JsonRpcProvider(provider.url as string, network);
-};
-
-export function clientToSigner(client: Client<Transport, Chain, Account>) {
-  const { account, chain, transport } = client;
-  const network = {
-    chainId: chain.id,
-    name: chain.name,
-    ensAddress: chain.contracts?.ensRegistry?.address,
-  };
-
-  const provider = new providers.Web3Provider(transport, network);
-  const signer = provider.getSigner(account.address);
-  return signer;
-}
-
-export async function getEthersSigner(
-  config: Config,
-  { chainId }: { chainId?: number } = {}
-) {
-  try {
-    const client = await getConnectorClient(config, { chainId });
-    return clientToSigner(client);
-  } catch (e) {
-    console.log("Failed to obtain client from getConnectorClient");
-  }
-}
diff --git a/packages/payment-widget/src/lib/components/payment-complete.svelte b/packages/payment-widget/src/lib/components/payment-complete.svelte
index 73e9fca3..d0d3b659 100644
--- a/packages/payment-widget/src/lib/components/payment-complete.svelte
+++ b/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";
 
diff --git a/packages/payment-widget/src/lib/components/wallet-info.svelte b/packages/payment-widget/src/lib/components/wallet-info.svelte
index 9cd28f57..c5b830db 100644
--- a/packages/payment-widget/src/lib/components/wallet-info.svelte
+++ b/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;
 
diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index dd515eaa..f055054e 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -30,16 +30,18 @@
   // Icons
   import Download from "@requestnetwork/shared-icons/download.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 { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
-  import { getCurrencyFromManager } from "@requestnetwork/shared-utils/getCurrency";
+  import {
+    formatDate,
+    checkStatus,
+    exportToPDF,
+    getEthersSigner,
+    calculateItemTotal,
+    getCurrencyFromManager,
+    initializeCurrencyManager,
+    getConversionPaymentValues,
+  } from "@requestnetwork/shared-utils/index";
   import { onMount, onDestroy, tick } from "svelte";
   import { formatUnits } from "viem";
-  import { getConversionPaymentValues } from "@requestnetwork/shared-utils/getConversionPaymentValues";
-  import { getEthersSigner } from "@requestnetwork/shared-utils/wallet-utils";
   import SingleInvoiceSkeleton from "./loading-skeleton.svelte";
 
   interface EntityInfo {
diff --git a/shared/utils/index.ts b/shared/utils/index.ts
new file mode 100644
index 00000000..7365b970
--- /dev/null
+++ b/shared/utils/index.ts
@@ -0,0 +1,41 @@
+export { capitalize } from "./capitalize";
+export { getChainlinkRate } from "./chainlink";
+export { checkAddress } from "./checkEthAddress";
+export { checkStatus } from "./checkStatus";
+export { config } from "./config";
+export {
+  getConversionRate,
+  getSlippageMargin,
+  lowVolatilityTokens,
+} from "./conversion";
+export {
+  currencyConversionPairs,
+  convertToCurrencyManagerFormat,
+  formattedCurrencyConversionPairs,
+} from "./currencyConversionPairs";
+export { debounce } from "./debounce";
+export { formatAddress } from "./formatAddress";
+export { formatDate, inputDateFormat } from "./formatDate";
+export { loadScript, exportToPDF } from "./generateInvoice";
+export {
+  formatUnits,
+  toFixedDecimal,
+  amountToFixedDecimal,
+  bigAmountify,
+  getConversionPaymentValues,
+  type SlippageLevel,
+} from "./getConversionPaymentValues";
+export { getCurrencyFromManager } from "./getCurrency";
+export { getNetworkIcon } from "./getNetworkIcon";
+export {
+  initializeCurrencyManager,
+  initializeCurrencyManagerWithCurrencyIDS,
+  initializeCreateInvoiceCurrencyManager,
+  getCurrencySupportedNetworksForConversion,
+} from "./initCurrencyManager";
+export { calculateInvoiceTotals, calculateItemTotal } from "./invoiceTotals";
+export {
+  publicClientToProvider,
+  clientToSigner,
+  getEthersSigner,
+} from "./wallet-utils";

From 4f04b6f9df1f5403761536e44922fee85e626815 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 12:22:55 +0100
Subject: [PATCH 10/18] fix: add check for no address in formatAddress function

---
 .../single-invoice/src/utils/capitalize.d.ts  |   1 -
 .../single-invoice/src/utils/capitalize.ts    |   1 -
 .../single-invoice/src/utils/chainlink.d.ts   |  10 --
 .../single-invoice/src/utils/chainlink.ts     |  40 -----
 .../single-invoice/src/utils/conversion.d.ts  |  13 --
 .../single-invoice/src/utils/conversion.ts    |  50 ------
 .../single-invoice/src/utils/debounce.d.ts    |   1 -
 packages/single-invoice/src/utils/debounce.ts |  11 --
 .../src/utils/ethersAdapterProvider.d.ts      |   6 -
 .../src/utils/formatAddress.d.ts              |   1 -
 .../single-invoice/src/utils/formatAddress.ts |  16 --
 .../src/utils/generateInvoice.d.ts            |   6 -
 .../src/utils/getConversionPaymentValues.d.ts |  42 -----
 .../src/utils/getConversionPaymentValues.ts   | 168 ------------------
 packages/single-invoice/src/utils/index.d.ts  |   4 -
 packages/single-invoice/src/utils/index.ts    |   4 -
 .../single-invoice/src/utils/loadScript.d.ts  |   1 -
 shared/utils/formatAddress.ts                 |   4 +
 18 files changed, 4 insertions(+), 375 deletions(-)
 delete mode 100644 packages/single-invoice/src/utils/capitalize.d.ts
 delete mode 100644 packages/single-invoice/src/utils/capitalize.ts
 delete mode 100644 packages/single-invoice/src/utils/chainlink.d.ts
 delete mode 100644 packages/single-invoice/src/utils/chainlink.ts
 delete mode 100644 packages/single-invoice/src/utils/conversion.d.ts
 delete mode 100644 packages/single-invoice/src/utils/conversion.ts
 delete mode 100644 packages/single-invoice/src/utils/debounce.d.ts
 delete mode 100644 packages/single-invoice/src/utils/debounce.ts
 delete mode 100644 packages/single-invoice/src/utils/ethersAdapterProvider.d.ts
 delete mode 100644 packages/single-invoice/src/utils/formatAddress.d.ts
 delete mode 100644 packages/single-invoice/src/utils/formatAddress.ts
 delete mode 100644 packages/single-invoice/src/utils/generateInvoice.d.ts
 delete mode 100644 packages/single-invoice/src/utils/getConversionPaymentValues.d.ts
 delete mode 100644 packages/single-invoice/src/utils/getConversionPaymentValues.ts
 delete mode 100644 packages/single-invoice/src/utils/index.d.ts
 delete mode 100644 packages/single-invoice/src/utils/index.ts
 delete mode 100644 packages/single-invoice/src/utils/loadScript.d.ts

diff --git a/packages/single-invoice/src/utils/capitalize.d.ts b/packages/single-invoice/src/utils/capitalize.d.ts
deleted file mode 100644
index 87012def..00000000
--- a/packages/single-invoice/src/utils/capitalize.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare const capitalize: (str: string) => string;
diff --git a/packages/single-invoice/src/utils/capitalize.ts b/packages/single-invoice/src/utils/capitalize.ts
deleted file mode 100644
index ac21f51c..00000000
--- a/packages/single-invoice/src/utils/capitalize.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const capitalize = (str: string) => (str && str[0].toUpperCase() + str.slice(1)) || ""
diff --git a/packages/single-invoice/src/utils/chainlink.d.ts b/packages/single-invoice/src/utils/chainlink.d.ts
deleted file mode 100644
index 85bae116..00000000
--- a/packages/single-invoice/src/utils/chainlink.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CurrencyTypes } from "@requestnetwork/types";
-import { BigNumber, providers } from "ethers";
-export declare const getChainlinkRate: (from: CurrencyTypes.CurrencyDefinition, to: CurrencyTypes.CurrencyDefinition, { network, provider, currencyManager, }: {
-    network: CurrencyTypes.EvmChainName;
-    provider: providers.Provider;
-    currencyManager: CurrencyTypes.ICurrencyManager;
-}) => Promise<{
-    value: BigNumber;
-    decimals: number;
-} | null>;
diff --git a/packages/single-invoice/src/utils/chainlink.ts b/packages/single-invoice/src/utils/chainlink.ts
deleted file mode 100644
index a7c72b1f..00000000
--- a/packages/single-invoice/src/utils/chainlink.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { isISO4217Currency } from "@requestnetwork/currency";
-import { chainlinkConversionPath } from "@requestnetwork/smart-contracts";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { BigNumber, providers } from "ethers";
-
-export const getChainlinkRate = async (
-  from: CurrencyTypes.CurrencyDefinition,
-  to: CurrencyTypes.CurrencyDefinition,
-  {
-    network,
-    provider,
-    currencyManager,
-  }: {
-    network: CurrencyTypes.EvmChainName;
-    provider: providers.Provider;
-    currencyManager: CurrencyTypes.ICurrencyManager;
-  },
-) => {
-  try {
-    const chainlink = chainlinkConversionPath.connect(network, provider);
-    const path = currencyManager.getConversionPath(from, to, network);
-    if (!path) return null;
-    const result = await chainlink.getRate(path);
-    if (!result) return null;
-
-    // ChainlinkConversionPath uses 8 decimals for fiat.
-    const fromDecimals = isISO4217Currency(from) ? 8 : from.decimals;
-    const toDecimals = isISO4217Currency(to) ? 8 : to.decimals;
-    const value = result.rate
-      .mul(BigNumber.from(10).pow(fromDecimals))
-      .div(BigNumber.from(10).pow(toDecimals));
-    return {
-      value,
-      decimals: result.decimals.toString().length - 1,
-    };
-  } catch (e) {
-    console.error('Error fetching Chainlink rate:', e);
-    return null;
-  }
-};
diff --git a/packages/single-invoice/src/utils/conversion.d.ts b/packages/single-invoice/src/utils/conversion.d.ts
deleted file mode 100644
index de34c35e..00000000
--- a/packages/single-invoice/src/utils/conversion.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CurrencyTypes } from "@requestnetwork/types";
-import { providers } from "ethers";
-export declare const lowVolatilityTokens: string[];
-export declare const getSlippageMargin: (currency: CurrencyTypes.CurrencyInput) => 1.03 | 1.01;
-/**
- * Get the conversion rate between two currencies.
- */
-export declare const getConversionRate: ({ from, to, currencyManager, provider, }: {
-    from: CurrencyTypes.CurrencyDefinition;
-    to: CurrencyTypes.CurrencyDefinition;
-    currencyManager?: CurrencyTypes.ICurrencyManager;
-    provider?: providers.Provider;
-}) => Promise<number | undefined>;
diff --git a/packages/single-invoice/src/utils/conversion.ts b/packages/single-invoice/src/utils/conversion.ts
deleted file mode 100644
index e42a6da3..00000000
--- a/packages/single-invoice/src/utils/conversion.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { isISO4217Currency } from "@requestnetwork/currency";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { EvmChainName } from "@requestnetwork/types/dist/currency-types";
-import { providers, utils } from "ethers";
-import { getChainlinkRate } from './chainlink'
-
-/**
- * Maximum slippage (swap) or conversion evolution (conversion pn)
- */
-const MAX_SLIPPAGE_DEFAULT = 1.03;
-const MAX_SLIPPAGE_LOW_VOLATILITY = 1.01;
-export const lowVolatilityTokens = ["DAI", "USDC", "USDT"];
-
-export const getSlippageMargin = (currency: CurrencyTypes.CurrencyInput) => {
-  return lowVolatilityTokens.includes(currency.symbol)
-    ? MAX_SLIPPAGE_LOW_VOLATILITY
-    : MAX_SLIPPAGE_DEFAULT;
-};
-
-/**
- * Get the conversion rate between two currencies.
- */
-export const getConversionRate = async ({
-  from,
-  to,
-  currencyManager,
-  provider,
-}: {
-  from: CurrencyTypes.CurrencyDefinition;
-  to: CurrencyTypes.CurrencyDefinition;
-  currencyManager?: CurrencyTypes.ICurrencyManager;
-  provider?: providers.Provider;
-}): Promise<number | undefined> => {
-  if (!isISO4217Currency(to) && currencyManager && provider) {
-    const network = to.network as EvmChainName;
-    try {
-      const chainlinkRate = await getChainlinkRate(from, to, {
-        network,
-        currencyManager,
-        provider,
-      });
-      if (chainlinkRate) {
-        return Number(utils.formatUnits(chainlinkRate.value, chainlinkRate.decimals))
-      }
-    } catch (e) {
-      console.error("Error getting chainlink rate", e);
-      throw e;
-    }
-  }
-};
diff --git a/packages/single-invoice/src/utils/debounce.d.ts b/packages/single-invoice/src/utils/debounce.d.ts
deleted file mode 100644
index 5a22f761..00000000
--- a/packages/single-invoice/src/utils/debounce.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare const debounce: (func: Function, wait: number) => (...args: any[]) => void;
diff --git a/packages/single-invoice/src/utils/debounce.ts b/packages/single-invoice/src/utils/debounce.ts
deleted file mode 100644
index 1462f81b..00000000
--- a/packages/single-invoice/src/utils/debounce.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const debounce = (func: Function, wait: number) => {
-  let timeout: NodeJS.Timeout;
-  return (...args: any[]) => {
-    const later = () => {
-      clearTimeout(timeout);
-      func.apply(this, args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-};
diff --git a/packages/single-invoice/src/utils/ethersAdapterProvider.d.ts b/packages/single-invoice/src/utils/ethersAdapterProvider.d.ts
deleted file mode 100644
index e6b4285b..00000000
--- a/packages/single-invoice/src/utils/ethersAdapterProvider.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { providers } from "ethers";
-import type { Chain, Client, Transport } from "viem";
-export declare function clientToProvider(client: Client<Transport, Chain>): providers.JsonRpcProvider | providers.FallbackProvider;
-export declare function useEthersProvider({ chainId, }?: {
-    chainId?: number | undefined;
-}): providers.JsonRpcProvider | providers.FallbackProvider | undefined;
diff --git a/packages/single-invoice/src/utils/formatAddress.d.ts b/packages/single-invoice/src/utils/formatAddress.d.ts
deleted file mode 100644
index 8c3caee1..00000000
--- a/packages/single-invoice/src/utils/formatAddress.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare const formatAddress: (address: string, first?: number, last?: number) => string;
diff --git a/packages/single-invoice/src/utils/formatAddress.ts b/packages/single-invoice/src/utils/formatAddress.ts
deleted file mode 100644
index cf55278b..00000000
--- a/packages/single-invoice/src/utils/formatAddress.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { getAddress } from "viem";
-import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
-
-export const formatAddress = (
-  address: string,
-  first: number = 6,
-  last: number = 4
-): string => {
-  if (!checkAddress(address)) {
-    console.error("Invalid address!");
-  }
-
-  const checksumAddress = getAddress(address);
-
-  return `${checksumAddress.slice(0, first)}...${checksumAddress.slice(-last)}`;
-};
diff --git a/packages/single-invoice/src/utils/generateInvoice.d.ts b/packages/single-invoice/src/utils/generateInvoice.d.ts
deleted file mode 100644
index b00d0a1b..00000000
--- a/packages/single-invoice/src/utils/generateInvoice.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare global {
-    interface Window {
-        html2pdf: any;
-    }
-}
-export declare const exportToPDF: (invoice: any, currency: any, logo: string) => Promise<void>;
diff --git a/packages/single-invoice/src/utils/getConversionPaymentValues.d.ts b/packages/single-invoice/src/utils/getConversionPaymentValues.d.ts
deleted file mode 100644
index 02b4ebf6..00000000
--- a/packages/single-invoice/src/utils/getConversionPaymentValues.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { CurrencyManager } from "@requestnetwork/currency";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { BigNumber, BigNumberish, providers } from "ethers";
-export type SlippageLevel = "safe" | "risky";
-interface ConversionPaymentValues {
-    conversion: {
-        currency: CurrencyTypes.ICurrency;
-        maxToSpend: string;
-        currencyManager: CurrencyManager;
-    };
-    slippageLevel: SlippageLevel;
-    totalAmountInPaymentCurrency: {
-        value: number;
-        currency: CurrencyTypes.CurrencyDefinition;
-    };
-    safeBalance: {
-        value: number;
-        currency: CurrencyTypes.CurrencyDefinition;
-    };
-    rate: string;
-}
-export declare const formatUnits: (amount: BigNumber, token: CurrencyTypes.CurrencyDefinition) => string;
-export declare const toFixedDecimal: (numberToFormat: number, decimals?: number) => number;
-export declare const amountToFixedDecimal: (amount: BigNumberish, currency: CurrencyTypes.CurrencyDefinition, decimals?: number) => number;
-/**
- * Converts a number, even floating, to a BigNumber
- * @param amount Number to convert, may float
- * @param token Token
- */
-export declare const bigAmountify: (amount: number, token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">) => BigNumber;
-/**
- * Utility method to compute various settings associated to a payment involving conversion only
- */
-export declare const getConversionPaymentValues: ({ baseAmount, denominationCurrency, selectedPaymentCurrency, currencyManager, provider, fromAddress, }: {
-    baseAmount: number;
-    denominationCurrency: CurrencyTypes.CurrencyDefinition;
-    selectedPaymentCurrency: CurrencyTypes.CurrencyDefinition;
-    currencyManager: CurrencyManager;
-    provider?: providers.Provider;
-    fromAddress?: string;
-}) => Promise<ConversionPaymentValues | undefined>;
-export {};
diff --git a/packages/single-invoice/src/utils/getConversionPaymentValues.ts b/packages/single-invoice/src/utils/getConversionPaymentValues.ts
deleted file mode 100644
index 4afc8b6e..00000000
--- a/packages/single-invoice/src/utils/getConversionPaymentValues.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { CurrencyManager } from "@requestnetwork/currency";
-import { CurrencyTypes } from "@requestnetwork/types";
-import { getAnyErc20Balance } from "@requestnetwork/payment-processor";
-import { BigNumber, BigNumberish, providers, utils } from "ethers";
-
-import { getConversionRate, getSlippageMargin } from './conversion'
-
-export type SlippageLevel = "safe" | "risky";
-
-interface ConversionPaymentValues {
-  conversion: {
-    currency: CurrencyTypes.ICurrency;
-    maxToSpend: string;
-    currencyManager: CurrencyManager;
-  };
-  slippageLevel: SlippageLevel;
-  totalAmountInPaymentCurrency: {
-    value: number;
-    currency: CurrencyTypes.CurrencyDefinition;
-  };
-  safeBalance: {
-    value: number;
-    currency: CurrencyTypes.CurrencyDefinition;
-  };
-  rate: string;
-}
-
-export const formatUnits = (
-  amount: BigNumber,
-  token: CurrencyTypes.CurrencyDefinition,
-): string => {
-  return utils.formatUnits(amount, token.decimals);
-};
-
-export const toFixedDecimal = (numberToFormat: number, decimals?: number) => {
-  const MAX_DECIMALS = decimals !== undefined ? decimals : 5;
-  return Number(numberToFormat.toFixed(MAX_DECIMALS));
-};
-
-export const amountToFixedDecimal = (
-  amount: BigNumberish,
-  currency: CurrencyTypes.CurrencyDefinition,
-  decimals?: number,
-) => {
-  return toFixedDecimal(
-    Number.parseFloat(formatUnits(BigNumber.from(amount), currency)),
-    decimals,
-  );
-};
-
-/**
- * Converts a number, even floating, to a BigNumber
- * @param amount Number to convert, may float
- * @param token Token
- */
-export const bigAmountify = (
-  amount: number,
-  token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">,
-): BigNumber => {
-  let [whole, decimals] = amount.toString().split(".");
-  let pow = "0";
-  let powSign = true;
-
-  if (decimals && decimals.includes("e")) {
-    powSign = !decimals.includes("e-");
-    [decimals, pow] = powSign ? decimals.split("e") : decimals.split("e-");
-    whole = whole;
-  }
-
-  const wholeBn = utils.parseUnits(whole, token.decimals);
-  const power = BigNumber.from(10).pow(pow);
-
-  if (decimals) {
-    const decimalsBn = utils
-      .parseUnits(decimals, token.decimals)
-      .div(BigNumber.from(10).pow(decimals.length));
-    return powSign
-      ? wholeBn.add(decimalsBn).mul(power)
-      : wholeBn.add(decimalsBn).div(power);
-  }
-  return wholeBn;
-};
-
-/**
- * Utility method to compute various settings associated to a payment involving conversion only
- */
-export const getConversionPaymentValues = async ({
-  baseAmount,
-  denominationCurrency,
-  selectedPaymentCurrency,
-  currencyManager,
-  provider,
-  fromAddress,
-}: {
-  baseAmount: number;
-  denominationCurrency: CurrencyTypes.CurrencyDefinition;
-  selectedPaymentCurrency: CurrencyTypes.CurrencyDefinition;
-  currencyManager: CurrencyManager;
-  provider?: providers.Provider;
-  fromAddress?: string;
-}): Promise<ConversionPaymentValues | undefined> => {
-  const conversionRate = await getConversionRate({
-    from: denominationCurrency,
-    to: selectedPaymentCurrency,
-    currencyManager,
-    provider,
-  });
-
-  const minConversionAmount = bigAmountify(
-    baseAmount * Number(conversionRate),
-    selectedPaymentCurrency,
-  );
-
-  const safeConversionAmount = bigAmountify(
-    baseAmount * Number(conversionRate) * getSlippageMargin(selectedPaymentCurrency),
-    selectedPaymentCurrency,
-  );
-
-  const userBalance = BigNumber.from(
-    fromAddress &&
-      provider &&
-      "address" in selectedPaymentCurrency &&
-      selectedPaymentCurrency.address
-      ? await getAnyErc20Balance(
-          selectedPaymentCurrency.address,
-          fromAddress,
-          provider,
-        )
-      : safeConversionAmount,
-  );
-
-  const hasEnoughForSlippage = userBalance.gte(safeConversionAmount);
-  const hasEnough = userBalance.gte(minConversionAmount);
-  const isRisky = hasEnough && !hasEnoughForSlippage;
-  const slippageLevel = isRisky ? "risky" : ("safe" as SlippageLevel);
-  const conversionAmount = isRisky ? userBalance : safeConversionAmount;
-
-  const conversion = {
-    currency: CurrencyManager.toStorageCurrency(selectedPaymentCurrency),
-    maxToSpend: conversionAmount.toString(),
-    currencyManager,
-  };
-
-  const totalAmountInPaymentCurrency = {
-    value: amountToFixedDecimal(
-      minConversionAmount,
-      selectedPaymentCurrency,
-      4,
-    ),
-    currency: selectedPaymentCurrency,
-  };
-  const safeBalance = {
-    value: amountToFixedDecimal(
-      safeConversionAmount,
-      selectedPaymentCurrency,
-      4,
-    ),
-    currency: selectedPaymentCurrency,
-  };
-
-  return {
-    conversion,
-    slippageLevel,
-    totalAmountInPaymentCurrency,
-    safeBalance,
-    rate: conversionRate,
-  };
-};
diff --git a/packages/single-invoice/src/utils/index.d.ts b/packages/single-invoice/src/utils/index.d.ts
deleted file mode 100644
index 97101620..00000000
--- a/packages/single-invoice/src/utils/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { debounce } from "./debounce";
-export { formatAddress } from "./formatAddress";
-export { publicClientToProvider, getEthersSigner } from "./wallet-utils";
-export { capitalize } from "./capitalize";
diff --git a/packages/single-invoice/src/utils/index.ts b/packages/single-invoice/src/utils/index.ts
deleted file mode 100644
index 97101620..00000000
--- a/packages/single-invoice/src/utils/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { debounce } from "./debounce";
-export { formatAddress } from "./formatAddress";
-export { publicClientToProvider, getEthersSigner } from "./wallet-utils";
-export { capitalize } from "./capitalize";
diff --git a/packages/single-invoice/src/utils/loadScript.d.ts b/packages/single-invoice/src/utils/loadScript.d.ts
deleted file mode 100644
index 4d5f7e32..00000000
--- a/packages/single-invoice/src/utils/loadScript.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export declare const loadScript: (src: string) => Promise<void>;
diff --git a/shared/utils/formatAddress.ts b/shared/utils/formatAddress.ts
index cf55278b..7b1fe993 100644
--- a/shared/utils/formatAddress.ts
+++ b/shared/utils/formatAddress.ts
@@ -6,6 +6,10 @@ export const formatAddress = (
   first: number = 6,
   last: number = 4
 ): string => {
+  if (!address) {
+    return "";
+  }
+
   if (!checkAddress(address)) {
     console.error("Invalid address!");
   }

From 90b56ffe4eb91578bc027a6180d11a7f95ceacd9 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 13:46:39 +0100
Subject: [PATCH 11/18] fix: payment error and decimal issue on dashboard

---
 packages/invoice-dashboard/src/lib/view-requests.svelte | 2 +-
 packages/single-invoice/src/lib/single-invoice.svelte   | 8 +++-----
 shared/utils/getConversionPaymentValues.ts              | 5 +++++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index 6540fbc7..0d0a7204 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -39,7 +39,6 @@
   import {
     debounce,
     checkStatus,
-    formatUnits,
     formatAddress,
     getEthersSigner,
     exportToPDF,
@@ -47,6 +46,7 @@
     config as defaultConfig,
     initializeCurrencyManager,
   } from "@requestnetwork/shared-utils/index";
+  import { formatUnits } from "viem";
   import { CurrencyManager } from "@requestnetwork/currency";
   import { onDestroy, onMount, tick } from "svelte";
   import { Drawer, InvoiceView } from "./dashboard";
diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index f055054e..98ac828f 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -410,7 +410,6 @@
             throw new Error("Missing currency information for conversion");
           }
 
-          // Verify ERC20 approval first if needed
           if (
             paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20 &&
             !approved
@@ -684,14 +683,13 @@
       : value;
   }
 
-  async function checkBalance() {
+  const checkBalance = async () => {
     try {
       if (!address || !paymentCurrencies[0] || !network) {
-        console.error("Missing required parameters for balance check:", {
+        console.log("Missing required parameters for balance check:", {
           address,
           paymentCurrency: paymentCurrencies[0],
           network,
-          paymentCurrencies,
         });
         return;
       }
@@ -725,7 +723,7 @@
       hasEnoughBalance = false;
       userBalance = "0";
     }
-  }
+  };
 
   const handlePayment = async () => {
     try {
diff --git a/shared/utils/getConversionPaymentValues.ts b/shared/utils/getConversionPaymentValues.ts
index fdd05a13..695ccffa 100644
--- a/shared/utils/getConversionPaymentValues.ts
+++ b/shared/utils/getConversionPaymentValues.ts
@@ -34,6 +34,7 @@ export const formatUnits = (
 
 export const toFixedDecimal = (numberToFormat: number, decimals?: number) => {
   const MAX_DECIMALS = decimals !== undefined ? decimals : 5;
+
   return Number(numberToFormat.toFixed(MAX_DECIMALS));
 };
 
@@ -58,6 +59,7 @@ export const bigAmountify = (
   token: Pick<CurrencyTypes.CurrencyDefinition, "decimals">
 ): BigNumber => {
   let [whole, decimals] = amount.toString().split(".");
+
   let pow = "0";
   let powSign = true;
 
@@ -78,6 +80,7 @@ export const bigAmountify = (
       ? wholeBn.add(decimalsBn).mul(power)
       : wholeBn.add(decimalsBn).div(power);
   }
+
   return wholeBn;
 };
 
@@ -121,6 +124,7 @@ export const getConversionPaymentValues = async ({
   const userBalance = BigNumber.from(
     fromAddress &&
       provider &&
+      selectedPaymentCurrency.type === "ERC20" &&
       "address" in selectedPaymentCurrency &&
       selectedPaymentCurrency.address
       ? await getAnyErc20Balance(
@@ -151,6 +155,7 @@ export const getConversionPaymentValues = async ({
     ),
     currency: selectedPaymentCurrency,
   };
+
   const safeBalance = {
     value: amountToFixedDecimal(
       safeConversionAmount,

From 4872241b26ea5fdcc62e428cc4d9a4131692bd74 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 16:14:50 +0100
Subject: [PATCH 12/18] feat: added encryption

---
 .../src/lib/single-invoice.svelte             | 205 +++++++++++++++++-
 1 file changed, 201 insertions(+), 4 deletions(-)

diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index 98ac828f..b3669ac5 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -27,6 +27,7 @@
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
+  import Modal from "@requestnetwork/shared-components/modal.svelte";
   // Icons
   import Download from "@requestnetwork/shared-icons/download.svelte";
   // Utils
@@ -43,6 +44,18 @@
   import { onMount, onDestroy, tick } from "svelte";
   import { formatUnits } from "viem";
   import SingleInvoiceSkeleton from "./loading-skeleton.svelte";
+  import { CipherProviderTypes } from "@requestnetwork/types";
+  import { ethers } from "ethers";
+
+  interface CipherProvider extends CipherProviderTypes.ICipherProvider {
+    getSessionSignatures: (
+      signer: ethers.Signer,
+      walletAddress: `0x${string}`,
+      domain: string,
+      statement: string
+    ) => Promise<any>;
+    disconnectWallet: () => void;
+  }
 
   interface EntityInfo {
     value: string;
@@ -103,6 +116,14 @@
     },
   ];
 
+  let cipherProvider: CipherProvider | undefined;
+  let loadSessionSignatures = false;
+  let isDecryptionEnabled = JSON.parse(
+    localStorage?.getItem("isDecryptionEnabled") ?? "false"
+  );
+
+  $: cipherProvider = requestNetwork?.getCipherProvider() as CipherProvider;
+
   $: if (request && address) {
     isPayee = request.payee?.value?.toLowerCase() === address?.toLowerCase();
     network = request?.extensionsData[0]?.parameters?.network || "mainnet";
@@ -201,11 +222,130 @@
     });
   });
 
+  const isRequestEncrypted = async (requestId: string) => {
+    try {
+      // Temporarily disable decryption to check raw request
+      cipherProvider?.enableDecryption(false);
+      const testRequest = await requestNetwork?.fromRequestId(requestId);
+      const data = testRequest?.getData();
+
+      // Check if the request has encrypted data
+      const hasEncryptedData = data?.extensionsData?.some(
+        (ext: any) => ext.value?.encryptedData
+      );
+
+      // Also check transactions for encryption
+      const hasEncryptedTransactions = data?.transactions?.some(
+        (tx: any) => tx.transaction?.encryptedData
+      );
+
+      return hasEncryptedData || hasEncryptedTransactions;
+    } catch (error) {
+      // If we get a decryption error, it means the request is encrypted
+      if (String(error).includes("Decryption is not available")) {
+        return true;
+      }
+      console.log("Error checking encryption status:", error);
+      return false;
+    }
+  };
+
+  const ensureDecryption = async () => {
+    if (!isDecryptionEnabled || !cipherProvider || !account?.address) {
+      return false;
+    }
+
+    try {
+      // First check if the request is actually encrypted
+      const encrypted = await isRequestEncrypted(requestId);
+      if (!encrypted) {
+        console.log("Request is not encrypted, skipping decryption setup");
+        return true;
+      }
+
+      console.log("Request is encrypted, setting up decryption");
+      const signer = await getEthersSigner(wagmiConfig);
+      if (!signer) return false;
+
+      // Check if we have a valid session first
+      const hasExistingSession =
+        localStorage.getItem("lit-wallet-sig") === "true";
+
+      if (hasExistingSession) {
+        // Try to use existing session
+        try {
+          cipherProvider.enableDecryption(true);
+          // Test if current session works with a request fetch
+          const testRequest = await requestNetwork?.fromRequestId(requestId);
+
+          // Only consider the session valid if we can actually decrypt the request
+          if (testRequest?.getData()) {
+            console.log("Using existing Lit Protocol session");
+            return true;
+          }
+        } catch (error) {
+          // If we get a decryption error, we need a new session
+          if (
+            String(error).includes("Decryption is not available") ||
+            String(error).includes("Failed to decrypt") ||
+            String(error).includes("LitNodeClient is not ready")
+          ) {
+            console.log("Existing session invalid, clearing...");
+            localStorage.removeItem("lit-wallet-sig");
+          } else {
+            // If it's some other error, keep the session
+            console.log("Error fetching request, but keeping session:", error);
+            return true;
+          }
+        }
+      }
+
+      // If we get here, we need a new session
+      console.log("Getting new Lit Protocol session");
+      loadSessionSignatures = true;
+
+      try {
+        await cipherProvider.getSessionSignatures(
+          signer,
+          account.address,
+          window.location.host,
+          "Sign in to Lit Protocol through Request Network"
+        );
+
+        localStorage.setItem("lit-wallet-sig", "true");
+        cipherProvider.enableDecryption(true);
+        return true;
+      } catch (error) {
+        console.error("Failed to get new session signatures:", error);
+        return false;
+      } finally {
+        loadSessionSignatures = false;
+      }
+    } catch (error) {
+      console.error("Failed to ensure decryption:", error);
+      return false;
+    }
+  };
+
   const getOneRequest = async (requestId: string) => {
     try {
       loading = true;
       unsupportedNetwork = false;
 
+      // Only attempt decryption setup if needed
+      if (isDecryptionEnabled) {
+        const encrypted = await isRequestEncrypted(requestId);
+        if (encrypted) {
+          const decryptionReady = await ensureDecryption();
+          if (!decryptionReady) {
+            throw new Error("Failed to initialize decryption");
+          }
+        } else {
+          // For non-encrypted requests, just disable decryption
+          cipherProvider?.enableDecryption(false);
+        }
+      }
+
       const singleRequest = await requestNetwork?.fromRequestId(requestId);
       if (!singleRequest) {
         console.log("No request found");
@@ -310,8 +450,18 @@
       console.error("Failed to fetch request:", error);
       if (String(error).includes("Unsupported payment")) {
         unsupportedNetwork = true;
+      } else if (String(error).includes("LitNodeClient is not ready")) {
+        toast.error("Decryption service not ready", {
+          description: "Please try again in a few seconds",
+        });
+      } else if (String(error).includes("Decryption is not available")) {
+        toast.error("Cannot decrypt request", {
+          description:
+            "Please try refreshing the page or reconnecting your wallet",
+        });
+      } else {
+        toast.error("Failed to fetch request");
       }
-      toast.error("Failed to fetch request");
     } finally {
       loading = false;
     }
@@ -321,6 +471,13 @@
 
   const handleWalletConnection = async () => {
     account = getAccount(wagmiConfig);
+
+    // Reset decryption state
+    if (cipherProvider) {
+      cipherProvider.disconnectWallet();
+      localStorage.removeItem("lit-wallet-sig");
+    }
+
     if (requestId && requestNetwork) {
       await getOneRequest(requestId);
     }
@@ -334,17 +491,26 @@
     signer = null;
     approved = false;
     isPayee = false;
+
+    // Clean up decryption state
+    if (cipherProvider) {
+      cipherProvider.disconnectWallet();
+      localStorage.removeItem("lit-wallet-sig");
+    }
   };
 
-  const handleWalletChange = (
+  const handleWalletChange = async (
     account: GetAccountReturnType,
     previousAccount: GetAccountReturnType
   ) => {
     if (account?.address !== previousAccount?.address) {
+      // Clean up previous wallet state
       handleWalletDisconnection();
-      handleWalletConnection();
+
+      // Initialize new wallet state
+      await handleWalletConnection();
     } else if (account?.address) {
-      handleWalletConnection();
+      await handleWalletConnection();
     } else {
       handleWalletDisconnection();
     }
@@ -354,6 +520,9 @@
     if (typeof unwatchAccount === "function") {
       unwatchAccount();
     }
+    if (cipherProvider) {
+      cipherProvider.disconnectWallet();
+    }
   });
 
   // Make address and chain reactive to account changes
@@ -1147,6 +1316,19 @@
   <div class="innerDrawer">No invoice found</div>
 {/if}
 
+{#if loadSessionSignatures}
+  <Modal {config} isOpen={true} title="Lit Protocol Signature Required">
+    <div class="modal-content">
+      <p>
+        This signature is required only once per session and will allow you to:
+      </p>
+      <ul>
+        <li>Access encrypted invoice details</li>
+      </ul>
+    </div>
+  </Modal>
+{/if}
+
 <style>
   .innerDrawer {
     position: relative;
@@ -1553,4 +1735,19 @@
     width: fit-content;
     margin-left: auto;
   }
+
+  .modal-content {
+    padding: 1rem;
+  }
+
+  .modal-content ul {
+    list-style-type: disc;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .modal-content li {
+    margin-bottom: 0.5rem;
+    color: #4b5563;
+  }
 </style>

From 4cb5573afb09da616047c5aa5b2bf442681f75a5 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 16:18:03 +0100
Subject: [PATCH 13/18] chore: add readme

---
 packages/single-invoice/README.md | 145 ++++++++++++++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 packages/single-invoice/README.md

diff --git a/packages/single-invoice/README.md b/packages/single-invoice/README.md
new file mode 100644
index 00000000..c35ff10d
--- /dev/null
+++ b/packages/single-invoice/README.md
@@ -0,0 +1,145 @@
+# Request Network Single Invoice Web Component
+
+[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice.svg)](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice)
+
+A web component for integrating a single Request Network invoice view into a web application.
+
+## Introduction
+
+The Single Invoice component allows users to view and pay a specific 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:
+
+```bash
+npm install @requestnetwork/single-invoice
+```
+
+## Usage
+
+### Usage in React
+
+#### [single-invoice.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/invoice/[id].tsx)
+
+You can directly pass props into the single-invoice web component without needing to create references or use workarounds.
+
+```tsx
+import Head from "next/head";
+import { config } from "@/utils/config";
+import { useAppContext } from "@/utils/context";
+import { useRouter } from "next/router";
+import { rainbowKitConfig as wagmiConfig } from "@/utils/connectWallet";
+import SingleInvoice from "@requestnetwork/single-invoice/react";
+
+export default function SingleInvoicePage() {
+  const router = useRouter();
+  const { requestNetwork } = useAppContext();
+  const { id } = router.query;
+
+  return (
+    <>
+      <Head>
+        <title>Request Invoice</title>
+      </Head>
+      <div className="container m-auto w-[100%]">
+        <SingleInvoice
+          config={config}
+          requestNetwork={requestNetwork}
+          wagmiConfig={wagmiConfig}
+          requestId={id as string}
+        />
+      </div>
+    </>
+  );
+}
+```
+
+#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)
+
+Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.
+
+```ts
+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);
+  }
+};
+```
+
+#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/wagmiConfig.ts)
+
+The wagmiConfig file configures wallet connections for the SingleInvoice component, using RainbowKit and supporting various wallets and blockchains.
+
+For more details see [Wagmi Docs](https://wagmi.sh/react/api/WagmiProvider#config)
+
+#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)
+
+Use the config object to pass additional configuration options to the single invoice component.
+
+```ts
+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](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/context.tsx) - Use a context provider to reinitialize the Request Network instance when the wallet changes.
+- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/types.d.ts) - Specify types to avoid TypeScript errors.
+
+## Features
+
+| Feature                              | Status |
+| ------------------------------------ | ------ |
+| ERC20 Payment                        | ✅     |
+| Native Payment                       | ✅     |
+| Conversion Payment                   | ✅     |
+| rnf_invoice format 0.3.0             | ✅     |
+| Configure Logo and Colors            | ✅     |
+| Compatible with all Wagmi connectors | ✅     |
+| Encrypted Invoice Support            | ✅     |
+| PDF Export                           | ✅     |
+| Detailed Payment Information         | ✅     |
+| Payment Status Tracking              | ✅     |
+| Network Auto-switching               | ✅     |
+| Swap-to-Pay Payment                  | ❌     |
+| Swap-to-Conversion Payment           | ❌     |
+| Escrow Payment                       | ❌     |
+| Declarative Payment                  | ❌     |
+| 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](https://docs.request.network/).

From ada077126c63672e09dfdf096b1d32d0fd249282 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 18:06:38 +0100
Subject: [PATCH 14/18] fix: remove debug comments

---
 packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
index d3583668..a985134a 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -608,7 +608,6 @@
     }
   }
 
-  // Add debug logging to see what's happening
   $: {
     const hexStringChain = "0x" + account?.chainId?.toString(16);
     const networkId = getNetworkIdFromNetworkName(network || "mainnet");

From ca8c8e275016933877c675d3a49514af0108cf94 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 18:15:46 +0100
Subject: [PATCH 15/18] chore: add token list to the readme

---
 packages/invoice-dashboard/README.md | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/invoice-dashboard/README.md b/packages/invoice-dashboard/README.md
index 27415024..66e69e3e 100644
--- a/packages/invoice-dashboard/README.md
+++ b/packages/invoice-dashboard/README.md
@@ -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
 

From a2efcb2a604bf362eeae0143fc35ca159d70416e Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 18:44:35 +0100
Subject: [PATCH 16/18] fix: remove decryption for non encrypted requests,
 whenchanging the wallets, share svg smaller

---
 .../src/lib/single-invoice.svelte             | 33 ++++++++++++++++---
 shared/icons/share.svelte                     |  6 ++--
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/single-invoice/src/lib/single-invoice.svelte b/packages/single-invoice/src/lib/single-invoice.svelte
index b3669ac5..5771e08e 100644
--- a/packages/single-invoice/src/lib/single-invoice.svelte
+++ b/packages/single-invoice/src/lib/single-invoice.svelte
@@ -229,12 +229,10 @@
       const testRequest = await requestNetwork?.fromRequestId(requestId);
       const data = testRequest?.getData();
 
-      // Check if the request has encrypted data
+      // Check both extensions and transactions for encrypted data
       const hasEncryptedData = data?.extensionsData?.some(
         (ext: any) => ext.value?.encryptedData
       );
-
-      // Also check transactions for encryption
       const hasEncryptedTransactions = data?.transactions?.some(
         (tx: any) => tx.transaction?.encryptedData
       );
@@ -245,6 +243,7 @@
       if (String(error).includes("Decryption is not available")) {
         return true;
       }
+      // For other errors, assume not encrypted
       console.log("Error checking encryption status:", error);
       return false;
     }
@@ -478,6 +477,17 @@
       localStorage.removeItem("lit-wallet-sig");
     }
 
+    // Only attempt decryption setup if needed
+    if (isDecryptionEnabled && requestId) {
+      const isEncrypted = await isRequestEncrypted(requestId);
+      if (isEncrypted) {
+        await ensureDecryption();
+      } else {
+        // For non-encrypted requests, just disable decryption
+        cipherProvider?.enableDecryption(false);
+      }
+    }
+
     if (requestId && requestNetwork) {
       await getOneRequest(requestId);
     }
@@ -508,7 +518,22 @@
       handleWalletDisconnection();
 
       // Initialize new wallet state
-      await handleWalletConnection();
+      account = getAccount(wagmiConfig);
+
+      // Only attempt decryption setup if the request is encrypted
+      if (isDecryptionEnabled && requestId) {
+        const isEncrypted = await isRequestEncrypted(requestId);
+        if (isEncrypted) {
+          await ensureDecryption();
+        } else {
+          // For non-encrypted requests, just disable decryption
+          cipherProvider?.enableDecryption(false);
+        }
+      }
+
+      if (requestId && requestNetwork) {
+        await getOneRequest(requestId);
+      }
     } else if (account?.address) {
       await handleWalletConnection();
     } else {
diff --git a/shared/icons/share.svelte b/shared/icons/share.svelte
index c81c637d..9d7a6cdd 100644
--- a/shared/icons/share.svelte
+++ b/shared/icons/share.svelte
@@ -3,9 +3,9 @@
 </script>
 
 <svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   on:click|stopPropagation={onClick}

From 21b3c3d24998843ac346f66472700ad4c488acdb Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 18:47:29 +0100
Subject: [PATCH 17/18] fix: share svg viewbox

---
 shared/icons/share.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/icons/share.svelte b/shared/icons/share.svelte
index 9d7a6cdd..e5bb19a6 100644
--- a/shared/icons/share.svelte
+++ b/shared/icons/share.svelte
@@ -5,7 +5,7 @@
 <svg
   width="20"
   height="20"
-  viewBox="0 0 20 20"
+  viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   on:click|stopPropagation={onClick}

From 547f2adf247c5d1d6185cf1cc79fd38e893a5b77 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 20 Jan 2025 18:50:14 +0100
Subject: [PATCH 18/18] chore: update create invoice form declaration file

---
 .../create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
index de0404b9..bc5a1885 100644
--- a/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
+++ b/packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts
@@ -8,7 +8,7 @@ export interface CreateInvoiceFormProps {
   config: IConfig;
   wagmiConfig: WagmiConfig;
   requestNetwork: RequestNetwork | null | undefined;
-  currencies: string[];
+  currencies?: string[];
 }
 
 /**