From a128f3f23bec26e662a1f3ed16d0b0e090751525 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Wed, 7 Aug 2024 14:33:32 +0200 Subject: [PATCH] fix: avoid from amount/token reset if they are disabled --- .../src/components/ChainSelect/useChainSelect.ts | 14 +++++++++++--- .../src/components/TokenList/useTokenSelect.ts | 10 ++++++++-- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/widget/src/components/ChainSelect/useChainSelect.ts b/packages/widget/src/components/ChainSelect/useChainSelect.ts index 62c9d3581..badfadf8f 100644 --- a/packages/widget/src/components/ChainSelect/useChainSelect.ts +++ b/packages/widget/src/components/ChainSelect/useChainSelect.ts @@ -2,16 +2,18 @@ import type { EVMChain } from '@lifi/sdk'; import { useChains } from '../../hooks/useChains.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; import { useToAddressReset } from '../../hooks/useToAddressReset.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useChainOrder } from '../../stores/chains/useChainOrder.js'; import type { FormType } from '../../stores/form/types.js'; import { FormKeyHelper } from '../../stores/form/types.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldController } from '../../stores/form/useFieldController.js'; +import type { DisabledUI } from '../../types/widget.js'; export const useChainSelect = (formType: FormType) => { + const { disabledUI } = useWidgetConfig(); const chainKey = FormKeyHelper.getChainKey(formType); const { onChange } = useFieldController({ name: chainKey }); - const { setFieldValue, getFieldValues } = useFieldActions(); const { chains, isLoading, getChainById } = useChains(formType); const [chainOrder, setChainOrder] = useChainOrder(formType); @@ -35,8 +37,14 @@ export const useChainSelect = (formType: FormType) => { isTouched: true, }); } - setFieldValue(FormKeyHelper.getTokenKey(formType), ''); - setFieldValue(FormKeyHelper.getAmountKey(formType), ''); + const tokenKey = FormKeyHelper.getTokenKey(formType); + if (!disabledUI?.includes(tokenKey as DisabledUI)) { + setFieldValue(tokenKey, ''); + } + const amountKey = FormKeyHelper.getAmountKey(formType); + if (!disabledUI?.includes(amountKey as DisabledUI)) { + setFieldValue(amountKey, ''); + } setFieldValue('tokenSearchFilter', ''); const [toChainId] = getFieldValues('toChain'); diff --git a/packages/widget/src/components/TokenList/useTokenSelect.ts b/packages/widget/src/components/TokenList/useTokenSelect.ts index f9941ab85..484992fb9 100644 --- a/packages/widget/src/components/TokenList/useTokenSelect.ts +++ b/packages/widget/src/components/TokenList/useTokenSelect.ts @@ -7,9 +7,10 @@ import { FormKeyHelper } from '../../stores/form/types.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldController } from '../../stores/form/useFieldController.js'; import { WidgetEvent } from '../../types/events.js'; +import type { DisabledUI } from '../../types/widget.js'; export const useTokenSelect = (formType: FormType, onClick?: () => void) => { - const { subvariant } = useWidgetConfig(); + const { subvariant, disabledUI } = useWidgetConfig(); const emitter = useWidgetEvents(); const { setFieldValue, getFieldValues } = useFieldActions(); const tokenKey = FormKeyHelper.getTokenKey(formType); @@ -26,12 +27,16 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => { isDirty: true, isTouched: true, }); - setFieldValue(FormKeyHelper.getAmountKey(formType), ''); + const amountKey = FormKeyHelper.getAmountKey(formType); + if (!disabledUI?.includes(amountKey as DisabledUI)) { + setFieldValue(amountKey, ''); + } const oppositeFormType = formType === 'from' ? 'to' : 'from'; const [selectedOppositeToken, selectedOppositeChainId] = getFieldValues( FormKeyHelper.getTokenKey(oppositeFormType), FormKeyHelper.getChainKey(oppositeFormType), ); + // TODO: remove when we enable same chain/token transfers if ( selectedOppositeToken === tokenAddress && selectedOppositeChainId === selectedChainId && @@ -73,6 +78,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => { }, [ chainOrderStore, + disabledUI, emitter, formType, getFieldValues,