diff --git a/packages/widget/package.json b/packages/widget/package.json index e8becde6..3f9311f3 100644 --- a/packages/widget/package.json +++ b/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", diff --git a/packages/widget/src/components/resource-amount-selector/resource-amount-selector.ts b/packages/widget/src/components/resource-amount-selector/resource-amount-selector.ts index c9cb3d51..c1bfee04 100644 --- a/packages/widget/src/components/resource-amount-selector/resource-amount-selector.ts +++ b/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, - wait: number - ) { - let timer: ReturnType; - - return (...args: Event[]): Promise => { - 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} />
diff --git a/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts b/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts index 5f06b416..9b4b6fa2 100644 --- a/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts +++ b/packages/widget/src/components/transfer/fungible/fungible-token-transfer.ts @@ -180,7 +180,8 @@ export class FungibleTokenTransfer extends BaseComponent { diff --git a/yarn.lock b/yarn.lock index e718f972..83a2e50e 100644 --- a/yarn.lock +++ b/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