fix: update reactivity for invoiceCurrenyc and filtering

Author: sstefdev

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

@@ -58,53 +58,55 @@
 
   const handleNetworkChange = (newNetwork: string) => {
     if (newNetwork) {
-      const newCurrencies = currencyManager.knownCurrencies.filter(
-        (currency: CurrencyTypes.CurrencyDefinition) =>
-          currency.type === Types.RequestLogic.CURRENCY.ISO4217 ||
-          currency.network === newNetwork
-      );
-
       network = newNetwork;
-      defaultCurrencies = newCurrencies;
+
+      invoiceCurrency = undefined;
       currency = undefined;
+
+      defaultCurrencies = currencyManager.knownCurrencies.filter(
+        (curr: CurrencyTypes.CurrencyDefinition) =>
+          curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
+          curr.network === newNetwork
+      );
     }
   };
 
   let activeRequest: any = null;
   let canSubmit = false;
   let appStatus: APP_STATUS[] = [];
   let formData = getInitialFormData();
-  let defaultCurrencies = currencyManager.knownCurrencies.filter(
-    (currency: CurrencyTypes.CurrencyDefinition) =>
-      currency.type === Types.RequestLogic.CURRENCY.ISO4217 || network
-        ? currency.network === network
-        : true
-  );
+  let defaultCurrencies = currencyManager.knownCurrencies;
 
   const handleInvoiceCurrencyChange = (
     value: CurrencyTypes.CurrencyDefinition
   ) => {
-    invoiceCurrency = value;
-    network = undefined;
-    currency = undefined;
+    if (value !== invoiceCurrency) {
+      invoiceCurrency = value;
+      currency = undefined;
 
-    if (
-      invoiceCurrency &&
-      invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
-    ) {
-      networks = getCurrencySupportedNetworksForConversion(
-        invoiceCurrency.hash,
-        currencyManager
-      );
-    } else {
-      networks = extractUniqueNetworkNames();
+      if (value.type !== Types.RequestLogic.CURRENCY.ISO4217) {
+        network = value.network;
+      }
     }
   };
 
   const handleCurrencyChange = (value: CurrencyTypes.CurrencyDefinition) => {
     currency = value;
   };
 
+  $: {
+    if (invoiceCurrency) {
+      if (invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217) {
+        networks = getCurrencySupportedNetworksForConversion(
+          invoiceCurrency.hash,
+          currencyManager
+        );
+      } else {
+        networks = extractUniqueNetworkNames();
+      }
+    }
+  }
+
   let invoiceTotals = {
     amountWithoutTax: 0,
     totalTaxAmount: 0,

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

@@ -27,7 +27,6 @@
   export let formData: CustomFormData;
   export let handleInvoiceCurrencyChange: (value: string) => void;
   export let handleCurrencyChange: (value: string) => void;
-
   export let handleNetworkChange: (chainId: string) => void;
   export let networks;
   export let defaultCurrencies: any = [];
@@ -117,21 +116,6 @@
     }
   };
 
-  const filterSettlementCurrencies = (
-    currency: CurrencyTypes.CurrencyDefinition
-  ) => {
-    return invoiceCurrency
-      ? invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
-        ? currency.type !== Types.RequestLogic.CURRENCY.ISO4217 &&
-          currencyManager?.getConversionPath(
-            invoiceCurrency,
-            currency,
-            currency.network
-          )?.length > 0
-        : invoiceCurrency.hash === currency.hash
-      : false;
-  };
-
   const addInvoiceItem = () => {
     const newItem = {
       name: "",
@@ -418,10 +402,19 @@
             ? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
             : undefined}
           placeholder="Invoice currency (labeling)"
-          options={defaultCurrencies.map((currency) => ({
-            value: currency,
-            label: `${currency.symbol} ${currency?.network ? `(${currency?.network})` : ""}`,
-          }))}
+          options={defaultCurrencies
+            ?.filter((curr) => {
+              if (!curr) return false;
+
+              return (
+                curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
+                (curr.network && curr.network === network)
+              );
+            })
+            .map((currency) => ({
+              value: currency,
+              label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
+            })) ?? []}
           onchange={handleInvoiceCurrencyChange}
         />
         <Dropdown
@@ -431,11 +424,35 @@
             ? `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`
             : undefined}
           options={defaultCurrencies
-            .filter((currency) => filterSettlementCurrencies(currency))
+            ?.filter((curr) => {
+              if (!curr || !invoiceCurrency) return false;
+
+              if (
+                invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
+              ) {
+                return (
+                  (curr.type === Types.RequestLogic.CURRENCY.ERC20 ||
+                    curr.type === Types.RequestLogic.CURRENCY.ISO4217) &&
+                  curr.network === network
+                );
+              } else if (
+                invoiceCurrency.type === Types.RequestLogic.CURRENCY.ERC20
+              ) {
+                return (
+                  curr.type === Types.RequestLogic.CURRENCY.ERC20 &&
+                  curr.network === invoiceCurrency.network
+                );
+              } else {
+                return (
+                  curr.type === Types.RequestLogic.CURRENCY.ERC20 &&
+                  curr.network === invoiceCurrency.network
+                );
+              }
+            })
             .map((currency) => ({
               value: currency,
-              label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
-            }))}
+              label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
+            })) ?? []}
           onchange={handleCurrencyChange}
         />
       </div>