fix: currencies (#273)

Author: rodrigopavezi

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

@@ -43,6 +43,10 @@
   let secondaryColor = activeConfig.colors.secondary;
   let currencyManager = initializeCurrencyManager(currencies);
 
+  let invoiceCurrencyDropdown: { clear: () => void; };
+  let networkDropdown: { clear: () => void; };
+  let currencyDropdown: { clear: () => void; };
+
   const extractUniqueNetworkNames = (): string[] => {
     const networkSet = new Set<string>();
 
@@ -65,16 +69,33 @@
 
   const handleNetworkChange = (newNetwork: string) => {
     if (newNetwork) {
+      currencyDropdown.clear();
       network = newNetwork;
 
-      invoiceCurrency = undefined;
       currency = undefined;
 
-      defaultCurrencies = currencyManager.knownCurrencies.filter(
-        (curr: CurrencyTypes.CurrencyDefinition) =>
-          curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
-          curr.network === newNetwork
-      );
+      filteredSettlementCurrencies = currencyManager.knownCurrencies.filter((currency: CurrencyTypes.CurrencyDefinition) => {
+      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;
+    });;
     }
   };
 
@@ -83,36 +104,35 @@
   let appStatus: APP_STATUS[] = [];
   let formData = getInitialFormData();
   let defaultCurrencies = currencyManager.knownCurrencies;
+  let filteredSettlementCurrencies: CurrencyTypes.CurrencyDefinition[] = [];
 
   const handleInvoiceCurrencyChange = (
     value: CurrencyTypes.CurrencyDefinition
   ) => {
     if (value !== invoiceCurrency) {
+      networkDropdown.clear();
+      currencyDropdown.clear();
+
       invoiceCurrency = value;
       currency = undefined;
+      filteredSettlementCurrencies = [];
+      network = undefined;
+      networks = [];
 
-      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(
+        networks = (getCurrencySupportedNetworksForConversion(
           invoiceCurrency.hash,
           currencyManager
-        );
+        ) ?? []) as string[];
       } else {
         networks = extractUniqueNetworkNames();
       }
     }
-  }
+  };
+
+  const handleCurrencyChange = (value: CurrencyTypes.CurrencyDefinition) => {
+    currency = value;
+  };
 
   let invoiceTotals = {
     amountWithoutTax: 0,
@@ -272,17 +292,17 @@
   <div class="create-invoice-form-content">
     <InvoiceForm
       bind:formData
-      bind:currency
       config={activeConfig}
       bind:defaultCurrencies
-      bind:network
+      bind:filteredSettlementCurrencies
       {handleInvoiceCurrencyChange}
       {handleCurrencyChange}
       {handleNetworkChange}
-      {networks}
-      {currencyManager}
-      {invoiceCurrency}
+      bind:networks
       {cipherProvider}
+      bind:invoiceCurrencyDropdown
+      bind:networkDropdown
+      bind:currencyDropdown
     />
     <div class="invoice-view-wrapper">
       <InvoiceView

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   // Components
   import Button from "@requestnetwork/shared-components/button.svelte";
-  import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
   import Input from "@requestnetwork/shared-components/input.svelte";
   import Labels from "@requestnetwork/shared-components/labels.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
@@ -19,7 +18,6 @@
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
   import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
   import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
-  import { Types } from "@requestnetwork/request-client.js";
   import { CurrencyTypes, CipherProviderTypes } from "@requestnetwork/types";
   import isEmail from "validator/es/lib/isEmail";
 
@@ -31,15 +29,13 @@
   export let handleNetworkChange: (chainId: string) => void;
   export let networks;
   export let defaultCurrencies: any = [];
-  export let currencyManager: any;
-  export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
-  export let currency:
-    | CurrencyTypes.ERC20Currency
-    | CurrencyTypes.NativeCurrency
-    | undefined;
-  export let network: any;
+  export let filteredSettlementCurrencies: CurrencyTypes.CurrencyDefinition[] = [];
   export let cipherProvider: CipherProviderTypes.ICipherProvider | undefined;
 
+  export let invoiceCurrencyDropdown;
+  export let networkDropdown;
+  export let currencyDropdown;
+
   let validationErrors = {
     payeeAddress: false,
     clientAddress: false,
@@ -53,7 +49,6 @@
   };
 
   let showPayeeAddressInput = false;
-  let filteredSettlementCurrencies: CurrencyTypes.CurrencyDefinition[] = [];
 
   const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
     validationErrors[`${type}`].email = !isEmail(email);
@@ -160,32 +155,6 @@
     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;
-    });
-  }
-
   $: if (!formData.issuedOn) {
     formData.issuedOn = inputDateFormat(new Date());
   }
@@ -433,29 +402,26 @@
             </div>
           </Accordion>
         </div>
-
         <div class="searchable-dropdown-container">
           <SearchableDropdown
+            bind:this={invoiceCurrencyDropdown}
             getValue={(currency) => currency.value.symbol}
             getDisplayValue={(currency) =>
               `${currency.value.symbol} ${currency.value.network ? `(${currency.value.network})` : ""}`}
             placeholder="Invoice currency"
             items={defaultCurrencies
-              ?.filter((curr) => {
-                if (!curr) return false;
-                return (
-                  curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
-                  (curr.network && curr.network === network)
-                );
-              })
+              ?.filter((curr) => curr)
               .map((currency) => ({
                 value: currency,
                 label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
                 type: "invoiceCurrency",
               })) ?? []}
             onSelect={handleInvoiceCurrencyChange}
           />
+        </div>
+        <div class="searchable-dropdown-container"> 
           <SearchableDropdown
+            bind:this={networkDropdown}
             items={networks
               .filter((networkItem) => networkItem)
               .map((networkItem) => {
@@ -471,6 +437,7 @@
             onSelect={handleNetworkChange}
           />
           <SearchableDropdown
+            bind:this={currencyDropdown}
             items={filteredSettlementCurrencies.map((currency) => ({
               value: currency,
               type: "settlementCurrency",
@@ -481,6 +448,8 @@
               `${currency.value.symbol} (${currency.value.network})`}
             onSelect={handleCurrencyChange}
           />
+        </div>
+        <div>
           {#if cipherProvider}
             <Input
               type="checkbox"

shared/components/searchable-dropdown.svelte

@@ -74,6 +74,12 @@
   }
 
   $: if (!isOpen) selectedIndex = -1;
+
+  export function clear() {
+    searchTerm = "";
+    isOpen = false;
+    selectedIndex = -1;
+  }
 </script>
 
 {#if isOpen && !disabled}