added debounce input

packages/widget/package.json

@@ -47,11 +47,13 @@
     "@web3-onboard/walletconnect": "^2.5.3",
     "ethers": "5.7.2",
     "events": "^3.3.0",
-    "lit": "3.0.0"
+    "lit": "3.0.0",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@open-wc/semantic-dom-diff": "^0.20.1",
     "@open-wc/testing-helpers": "^3.0.0",
+    "@types/lodash": "^4",
     "eslint": "^8.48.0",
     "eslint-plugin-lit": "^1.9.1",
     "happy-dom": "^13.3.1",

packages/widget/src/components/resource-amount-selector/resource-amount-selector.ts

@@ -21,7 +21,7 @@ import { tokenBalanceToNumber } from '../../utils/token';
 import type { DropdownOption } from '../common/dropdown/dropdown';
 import { BaseComponent } from '../common/base-component';
 import { styles } from './styles';
-
+import { debounce } from 'lodash';
 @customElement('sygma-resource-amount-selector')
 export class ResourceAmountSelector extends BaseComponent {
   static styles = styles;
@@ -67,25 +67,8 @@ export class ResourceAmountSelector extends BaseComponent {
     }
   };
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  private _debounceAmountChange(
-    callback: (...args: Event[]) => Promise<Event>,
-    wait: number
-  ) {
-    let timer: ReturnType<typeof setTimeout>;
-
-    return (...args: Event[]): Promise<Event> => {
-      clearTimeout(timer);
-      return new Promise((resolve) => {
-        timer = setTimeout(() => resolve(callback(...args)), wait);
-      });
-    };
-  }
-
-  _onInputAmountChangeHandler = (event: Event): void => {
-    let { value } = event.target as HTMLInputElement;
-    console.log('event', value);
 
+  _onInputAmountChangeHandler = (value: string): void => {
     if (value === '') {
       value = '0';
     }
@@ -105,6 +88,8 @@ export class ResourceAmountSelector extends BaseComponent {
     }
   };
 
+  debouncedHandler = debounce(this._onInputAmountChangeHandler, 300)
+
   requestUpdate(
     name?: PropertyKey,
     oldValue?: unknown,
@@ -217,14 +202,10 @@ export class ResourceAmountSelector extends BaseComponent {
               type="number"
               class="amountSelectorInput"
               placeholder="0.000"
-              @input=${
-                (event: Event) =>
-                  this._debounceAmountChange(
-                    this._onInputAmountChangeHandler(event),
-                    5000
-                  )
-                // this._onInputAmountChangeHandler
-              }
+              @input=${(_evt: any) => {
+                this.debouncedHandler(_evt.target.value)
+              }}
+              .disabled=${this.disabled}
               .value=${this.amount}
             />
             <section class="selectorSection">

packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts

@@ -180,7 +180,8 @@ export class FungibleTokenTransfer extends BaseComponent {
         <sygma-resource-amount-selector
           .sourceDomainConfig=${this.transferController.sourceDomainConfig}
           .disabled=${!this.transferController.sourceNetwork ||
-          !this.transferController.destinationNetwork}
+          !this.transferController.destinationNetwork ||
+         this.transferController.isBuildingTransactions}
           .resources=${this.transferController.supportedResources}
           .onResourceSelected=${this.transferController.onResourceSelected}
         >

yarn.lock

@@ -372,6 +372,7 @@ __metadata:
     "@polkadot/extension-dapp": "npm:^0.46.6"
     "@polkadot/keyring": "npm:^12.6.2"
     "@polkadot/util": "npm:^12.6.2"
+    "@types/lodash": "npm:^4"
     "@web3-onboard/core": "npm:^2.21.2"
     "@web3-onboard/injected-wallets": "npm:^2.10.11"
     "@web3-onboard/walletconnect": "npm:^2.5.3"
@@ -382,6 +383,7 @@ __metadata:
     happy-dom: "npm:^13.3.1"
     lit: "npm:3.0.0"
     lit-analyzer: "npm:^2.0.3"
+    lodash: "npm:^4.17.21"
     rollup-plugin-visualizer: "npm:^5.9.2"
     typescript: "npm:5.2.2"
     vite: "npm:4.4.11"
@@ -3966,6 +3968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.17.4
+  resolution: "@types/lodash@npm:4.17.4"
+  checksum: 0124c64cb9fe7a0f78b6777955abd05ef0d97844d49118652eae45f8fa57bfb7f5a7a9bccc0b5a84c0a6dc09631042e4590cb665acb9d58dfd5e6543c75341ec
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:*":
   version: 3.0.4
   resolution: "@types/mime@npm:3.0.4"
@@ -8951,7 +8960,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:~4.17.15":
+"lodash@npm:^4.17.21, lodash@npm:~4.17.15":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c