fix: Settlement currencies filtering

packages/create-invoice-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/create-invoice-form",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "main": "./dist/web-component.umd.cjs",
   "scripts": {
     "dev": "vite dev",

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

@@ -214,16 +214,16 @@
   <div class="create-invoice-form-content">
     <InvoiceForm
       bind:formData
+      bind:currency
       config={activeConfig}
       bind:defaultCurrencies
+      bind:network
       {handleInvoiceCurrencyChange}
       {handleCurrencyChange}
       {handleNetworkChange}
       {networks}
       {currencyManager}
       {invoiceCurrency}
-      {currency}
-      {network}
     />
     <div class="invoice-view-wrapper">
       <InvoiceView

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

@@ -50,6 +50,7 @@
   };
 
   let showPayeeAddressInput = false;
+  let filteredSettlementCurrencies: CurrencyTypes.CurrencyDefinition[] = [];
 
   const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
     validationErrors[`${type}`].email = !isEmail(email);
@@ -146,6 +147,32 @@
   $: if (!showPayeeAddressInput && formData.creatorId) {
     formData.payeeAddress = formData.creatorId;
   }
+
+  $: {
+    // Filter settlement currencies whenever network, invoiceCurrency, or currencyManager changes
+    filteredSettlementCurrencies = defaultCurrencies.filter((currency) => {
+      if (!invoiceCurrency) {
+        return false;
+      }
+
+      // For ISO4217 currencies (like EUR)
+      if (invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217) {
+        const hasValidPath =
+          currencyManager?.getConversionPath(
+            invoiceCurrency,
+            currency,
+            currency.network
+          )?.length > 0;
+
+        return (
+          currency.type !== Types.RequestLogic.CURRENCY.ISO4217 && hasValidPath
+        );
+      }
+
+      // For other currency types (like ERC20)
+      return invoiceCurrency.hash === currency.hash;
+    });
+  }
 </script>
 
 <form class="invoice-form">
@@ -388,12 +415,10 @@
           selectedValue={network}
           options={networks
             .filter((networkItem) => networkItem)
-            .map((networkItem) => {
-              return {
-                value: networkItem,
-                label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
-              };
-            })}
+            .map((networkItem) => ({
+              value: networkItem,
+              label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
+            }))}
           onchange={handleNetworkChange}
         />
         <Dropdown
@@ -405,7 +430,6 @@
           options={defaultCurrencies
             ?.filter((curr) => {
               if (!curr) return false;
-
               return (
                 curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
                 (curr.network && curr.network === network)
@@ -423,36 +447,10 @@
           selectedValue={currency
             ? `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`
             : undefined}
-          options={defaultCurrencies
-            ?.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 ? `(${currency.network})` : ""}`,
-            })) ?? []}
+          options={filteredSettlementCurrencies.map((currency) => ({
+            value: currency,
+            label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
+          }))}
           onchange={handleCurrencyChange}
         />
       </div>