From f5562569c5ecf67aabbd95bb3caa9dc8e9fe10c8 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Thu, 12 Dec 2024 10:09:03 +0100
Subject: [PATCH 1/4] fix: quick fix for the no address error

---
 shared/utils/formatAddress.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/shared/utils/formatAddress.ts b/shared/utils/formatAddress.ts
index 1bb3f387..91fab1ee 100644
--- a/shared/utils/formatAddress.ts
+++ b/shared/utils/formatAddress.ts
@@ -5,9 +5,7 @@ export const formatAddress = (
   first: number = 6,
   last: number = 4
 ): string => {
-  if (!checkAddress(address)) {
-    console.error("Invalid address!");
-  }
+  if (!address) return "";
 
   return `${address.slice(0, first)}...${address.slice(-last)}`;
 };

From 0643d6b93326269c48e7bc05ceca4d4853167029 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 16 Dec 2024 10:52:27 +0100
Subject: [PATCH 2/4] fix: issues with payment, status update and balance

---
 .../src/lib/dashboard/invoice-view.svelte     | 134 +++++++++++++++---
 .../src/lib/view-requests.svelte              |  30 ++--
 2 files changed, 133 insertions(+), 31 deletions(-)

diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
index 432f7dac..5a0b7736 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { toast } from "svelte-sonner";
+  import { getBalance } from "@wagmi/core";
   import type { GetAccountReturnType } from "@wagmi/core";
   import {
     approveErc20,
@@ -76,6 +77,8 @@
     | undefined;
 
   let status = checkStatus(requestData || request);
+  let hasEnoughBalance = false;
+  let userBalance = "0";
 
   const generateDetailParagraphs = (info: any) => {
     const fullName = [info?.firstName, info?.lastName]
@@ -130,7 +133,16 @@
     checkInvoice();
   });
 
-  $: request, checkInvoice();
+  $: {
+    request, account;
+    checkInvoice();
+  }
+
+  $: {
+    if (account && network && paymentCurrencies[0]) {
+      checkBalance();
+    }
+  }
 
   $: {
     account = account;
@@ -246,6 +258,8 @@
 
       statuses = [...statuses, "Payment confirmed"];
       isPaid = true;
+      await checkInvoice();
+      requestData = await _request?.refresh();
       loading = false;
       statuses = [];
       isRequestPayed = true;
@@ -356,6 +370,77 @@
       ? `${integerPart}.${decimalPart.substring(0, maxDecimalDigits)}`
       : value;
   }
+
+  async function checkBalance() {
+    try {
+      if (!address || !paymentCurrencies[0] || !network) {
+        console.log("Missing required parameters for balance check:", {
+          address,
+          paymentCurrency: paymentCurrencies[0],
+          network,
+        });
+        return;
+      }
+
+      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 = Number(balance.formatted).toFixed(4);
+        hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
+      } else {
+        const balance = await getBalance(wagmiConfig, {
+          address,
+          chainId: invoiceNetworkId,
+        });
+        userBalance = Number(balance.formatted).toFixed(4);
+        hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
+      }
+    } catch (err) {
+      console.error("Error checking balance:", err);
+      hasEnoughBalance = false;
+      userBalance = "0.0000";
+    }
+  }
+
+  const currentStatusIndex = statuses.length - 1;
+
+  async function handlePayment() {
+    try {
+      if (!correctChain) {
+        await switchNetworkIfNeeded(network || "mainnet");
+        return;
+      }
+      if (
+        !approved &&
+        paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20
+      ) {
+        await approve();
+        return;
+      }
+      await payTheRequest();
+    } catch (err) {
+      console.error("Error during payment process:", err);
+      toast.error("Payment process failed", {
+        description: String(err),
+      });
+    }
+  }
+
+  $: {
+    requestData, request;
+    status = checkStatus(requestData || request);
+  }
 </script>
 
 <div
@@ -591,26 +676,24 @@
     <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}
+      {:else if !isPayee && !unsupportedNetwork && !isPaid && !isRequestPayed}
+        {#if !hasEnoughBalance}
+          <div class="balance-warning">
+            Insufficient funds: {userBalance}
+            {paymentCurrencies[0]?.symbol || "ETH"}
+          </div>
+        {/if}
         <Button
           type="button"
-          text="Pay"
+          text={!correctChain
+            ? "Switch Network"
+            : !approved &&
+                paymentCurrencies[0]?.type === Types.RequestLogic.CURRENCY.ERC20
+              ? "Approve"
+              : "Pay Now"}
           padding="px-[12px] py-[6px]"
-          onClick={payTheRequest}
+          onClick={handlePayment}
+          disabled={!hasEnoughBalance}
         />
       {/if}
     </div>
@@ -907,4 +990,19 @@
   .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;
+  }
 </style>
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index d2001d19..fe2bfed8 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -45,16 +45,19 @@
   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 { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: CurrencyTypes.CurrencyInput[] = [];
 
-  let cipherProvider: CipherProviderTypes.ICipherProvider | undefined = requestNetwork?.getCipherProvider();
+  let cipherProvider: CipherProviderTypes.ICipherProvider | undefined =
+    requestNetwork?.getCipherProvider();
 
-  let sliderValueForDecryption = cipherProvider?.isDecryptionEnabled() ? "on" : "off";
+  let sliderValueForDecryption = cipherProvider?.isDecryptionEnabled()
+    ? "on"
+    : "off";
 
   let signer: `0x${string}` | undefined;
   let activeConfig = config ? config : defaultConfig;
@@ -390,17 +393,15 @@
     activeRequest = undefined;
   };
 
-  
-  $: sliderValueForDecryption, getRequests(); 
+  $: sliderValueForDecryption, getRequests();
 
   $: {
-    if(sliderValueForDecryption === 'on') {
+    if (sliderValueForDecryption === "on") {
       cipherProvider?.enableDecryption(true);
     } else {
       cipherProvider?.enableDecryption(false);
     }
   }
-
 </script>
 
 <div
@@ -443,11 +444,16 @@
         </Input>
         {#if cipherProvider}
           <div class="width: fit-content;">
-            <Switch bind:value={sliderValueForDecryption} label="Show encrypted requests" fontSize={14} design="slider" />
+            <Switch
+              bind:value={sliderValueForDecryption}
+              label="Show encrypted requests"
+              fontSize={14}
+              design="slider"
+            />
           </div>
         {/if}
       </div>
-      
+
       <Dropdown
         config={activeConfig}
         type="checkbox"
@@ -711,10 +717,8 @@
                 >
               </tr>
             {/each}
-          {:else}
-            {#if loading}
-              <DashboardSkeleton />
-            {/if}
+          {:else if loading}
+            <DashboardSkeleton />
           {/if}
         </tbody>
       </table>

From da90668e8bcbe5f7ecb9cd9d2c1d9aa7719c3c93 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Mon, 16 Dec 2024 23:20:13 +0100
Subject: [PATCH 3/4] fix: date picker bug, table fixes

---
 .../src/lib/create-invoice-form.svelte        |  2 +-
 .../src/lib/invoice/form-view.svelte          |  4 +-
 .../src/lib/invoice/form.svelte               | 18 +++++--
 .../src/lib/utils/resetForm.ts                |  2 +-
 .../src/lib/view-requests.svelte              | 49 +++++++++++++------
 shared/components/status-label.svelte         |  5 +-
 6 files changed, 54 insertions(+), 26 deletions(-)

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 906aa629..ab75aec0 100644
--- a/packages/create-invoice-form/src/lib/create-invoice-form.svelte
+++ b/packages/create-invoice-form/src/lib/create-invoice-form.svelte
@@ -115,7 +115,7 @@
     totalAmount: 0,
   };
 
-  $: cipherProvider = undefined;
+  $: cipherProvider = requestNetwork?.getCipherProvider();
 
   $: {
     if (wagmiConfig) {
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 0f9f0903..c5578509 100644
--- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form-view.svelte
@@ -457,7 +457,7 @@
   }
 
   .invoice-table-body-row th {
-    padding: 8px 0px 8px 8px;
+    padding: 12px 16px;
     font-weight: 500;
     white-space: nowrap;
   }
@@ -469,7 +469,7 @@
   }
 
   .invoice-table-body td {
-    padding: 8px 0px;
+    padding: 12px 16px;
   }
 
   .invoice-summary {
diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 998271d1..49923b6a 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -175,6 +175,16 @@
       return invoiceCurrency.hash === currency.hash;
     });
   }
+
+  $: if (!formData.issuedOn) {
+    formData.issuedOn = inputDateFormat(new Date());
+  }
+
+  $: if (!formData.dueDate) {
+    formData.dueDate = inputDateFormat(
+      new Date(new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000)
+    );
+  }
 </script>
 
 <form class="invoice-form">
@@ -585,17 +595,15 @@
       <Input
         id="issuedOn"
         type="date"
-        value={inputDateFormat(new Date())}
+        value={formData.issuedOn}
         label="Issued Date"
         {handleInput}
       />
       <Input
         id="dueDate"
         type="date"
-        min={inputDateFormat(formData.issuedOn)}
-        value={inputDateFormat(
-          new Date(new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000)
-        )}
+        min={formData.issuedOn}
+        value={formData.dueDate}
         label="Due Date"
         {handleInput}
       />
diff --git a/packages/create-invoice-form/src/lib/utils/resetForm.ts b/packages/create-invoice-form/src/lib/utils/resetForm.ts
index 74b75f35..7d655e0b 100644
--- a/packages/create-invoice-form/src/lib/utils/resetForm.ts
+++ b/packages/create-invoice-form/src/lib/utils/resetForm.ts
@@ -6,7 +6,7 @@ export function getInitialFormData() {
     payerAddress: "",
     payeeAddress: "",
     dueDate: "",
-    issuedOn: new Date().toISOString(),
+    issuedOn: "",
     miscellaneous: {
       labels: [],
       builderId: "",
diff --git a/packages/invoice-dashboard/src/lib/view-requests.svelte b/packages/invoice-dashboard/src/lib/view-requests.svelte
index caddfc34..4f2c2c15 100644
--- a/packages/invoice-dashboard/src/lib/view-requests.svelte
+++ b/packages/invoice-dashboard/src/lib/view-requests.svelte
@@ -53,8 +53,14 @@
   export let requestNetwork: RequestNetwork | null | undefined;
   export let currencies: CurrencyTypes.CurrencyInput[] = [];
 
-  let cipherProvider: CipherProviderTypes.ICipherProvider | undefined =
-    requestNetwork?.getCipherProvider();
+  let cipherProvider:
+    | (CipherProviderTypes.ICipherProvider & {
+        getSessionSignatures: (
+          signer: ethers.Signer,
+          walletAddress: `0x${string}`
+        ) => Promise<any>;
+      })
+    | undefined;
 
   let sliderValueForDecryption = JSON.parse(
     localStorage?.getItem("isDecryptionEnabled") ?? "false"
@@ -96,18 +102,27 @@
   let sortOrder = "desc";
   let sortColumn = "timestamp";
 
-  $: {
-    if (wagmiConfig) {
-      account = getAccount(wagmiConfig);
-    }
-  }
+  let previousAddress: string | undefined;
 
   $: {
-    if (account?.address) {
-      tick().then(() => {
-        enableDecryption();
-        getRequests();
-      });
+    if (wagmiConfig) {
+      const newAccount = getAccount(wagmiConfig);
+      if (newAccount?.address !== previousAddress) {
+        account = newAccount;
+        previousAddress = newAccount?.address;
+
+        if (newAccount?.address) {
+          tick().then(() => {
+            enableDecryption();
+            getRequests();
+          });
+        } else {
+          requests = [];
+          activeRequest = undefined;
+          previousWalletAddress = undefined;
+          previousNetwork = undefined;
+        }
+      }
     }
   }
 
@@ -116,9 +131,11 @@
   onMount(() => {
     unwatchAccount = watchAccount(wagmiConfig, {
       onChange(data) {
-        if (data?.address !== account?.address) {
+        if (data?.address !== previousAddress) {
           account = data;
-          if (account?.address) {
+          previousAddress = data?.address;
+
+          if (data?.address) {
             getRequests();
           } else {
             requests = [];
@@ -344,7 +361,7 @@
           BigInt(request.expectedAmount),
           currencyInfo?.decimals ?? 18
         ),
-        currencySymbol: currencyInfo!.symbol,
+        currencySymbol: currencyInfo?.symbol,
         paymentCurrencies,
       };
     }
@@ -851,7 +868,7 @@
   }
 
   .tabs ul li {
-    width: 100px;
+    width: 110px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
diff --git a/shared/components/status-label.svelte b/shared/components/status-label.svelte
index 3503b755..f045a599 100644
--- a/shared/components/status-label.svelte
+++ b/shared/components/status-label.svelte
@@ -43,12 +43,15 @@
 
 <style>
   .status-indicator {
-    text-align: center;
+    display: inline-flex;
+    align-items: center;
     padding: 6px 12px;
     text-align: center;
     width: fit-content;
     border-radius: 8px;
     font-weight: 500;
+    white-space: nowrap;
+    font-size: 14px;
   }
 
   .status-paid {

From a55f12ef2b1fa6350875141b0c3a1b06f0a23e70 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Tue, 17 Dec 2024 11:45:34 +0100
Subject: [PATCH 4/4] fix: change to big int

---
 .../src/lib/dashboard/invoice-view.svelte     |  6 ++--
 shared/utils/initCurrencyManager.ts           | 33 ++++++++++++++-----
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
index 627f5334..00cc6b28 100644
--- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
+++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte
@@ -510,7 +510,7 @@
           token: paymentCurrencies[0].address as `0x${string}`,
           chainId: invoiceNetworkId,
         });
-        const balanceNum = Number(balance.formatted);
+        const balanceNum = BigInt(balance.formatted);
         userBalance = formatBalance(balanceNum);
         hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
       } else {
@@ -518,7 +518,7 @@
           address,
           chainId: invoiceNetworkId,
         });
-        const balanceNum = Number(balance.formatted);
+        const balanceNum = BigInt(balance.formatted);
         userBalance = formatBalance(balanceNum);
         hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
       }
@@ -843,7 +843,7 @@
       {#if !hasEnoughBalance}
         <div class="balance-warning">
           Insufficient funds: {userBalance}
-          {paymentCurrencies[0]?.symbol || "ETH"}
+          {paymentCurrencies[0]?.symbol || "-"}
         </div>
       {/if}
       <Button
diff --git a/shared/utils/initCurrencyManager.ts b/shared/utils/initCurrencyManager.ts
index e11048a6..93acf6d5 100644
--- a/shared/utils/initCurrencyManager.ts
+++ b/shared/utils/initCurrencyManager.ts
@@ -62,14 +62,18 @@ const defaultCurrencyIds = [
 ];
 
 import { Types } from "@requestnetwork/request-client.js";
-import { formattedCurrencyConversionPairs } from './currencyConversionPairs'
+import { formattedCurrencyConversionPairs } from "./currencyConversionPairs";
 
 export function initializeCurrencyManager(
   customCurrencies: CurrencyTypes.CurrencyInput[] = []
 ): CurrencyManager {
   // If customCurrencies is provided, use only those
   if (customCurrencies?.length > 0) {
-    return new CurrencyManager(customCurrencies, {}, formattedCurrencyConversionPairs);
+    return new CurrencyManager(
+      customCurrencies,
+      {},
+      formattedCurrencyConversionPairs
+    );
   }
 
   // Otherwise, use default currencies
@@ -77,7 +81,11 @@ export function initializeCurrencyManager(
     (currency) => defaultCurrencyIds.includes(currency.id)
   );
 
-  return new CurrencyManager(defaultCurrencies, {}, formattedCurrencyConversionPairs);
+  return new CurrencyManager(
+    defaultCurrencies,
+    {},
+    formattedCurrencyConversionPairs
+  );
 }
 
 export function initializeCurrencyManagerWithCurrencyIDS(
@@ -88,13 +96,20 @@ export function initializeCurrencyManagerWithCurrencyIDS(
   });
 
   return {
-    currencyManager: new CurrencyManager(currencies, {}, formattedCurrencyConversionPairs),
+    currencyManager: new CurrencyManager(
+      currencies,
+      {},
+      formattedCurrencyConversionPairs
+    ),
     currencies,
   };
 }
 
-export const getCurrencySupportedNetworksForConversion = (currencyHash: string, currencyManager: any) : (string | undefined)[] => {
- return Object.keys(currencyManager.conversionPairs).filter((network) =>
-    currencyManager.conversionPairs[network][currencyHash]
- );
-}
\ No newline at end of file
+export const getCurrencySupportedNetworksForConversion = (
+  currencyHash: string,
+  currencyManager: any
+): (string | undefined)[] => {
+  return Object.keys(currencyManager.conversionPairs).filter(
+    (network) => currencyManager.conversionPairs[network][currencyHash]
+  );
+};