diff --git a/CHANGELOG.md b/CHANGELOG.md index ef22b94e311..1ab423c74fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - added: Close button (X) for `EdgeModals,` specifically if a desktop platform is detected. +- fixed: Incorrect `SwapInput` amounts on `SwapCreateScene` after changing wallet. ## 4.17.0 diff --git a/src/components/scenes/SwapCreateScene.tsx b/src/components/scenes/SwapCreateScene.tsx index ab8b9cb5c94..be0e4b6c16e 100644 --- a/src/components/scenes/SwapCreateScene.tsx +++ b/src/components/scenes/SwapCreateScene.tsx @@ -37,9 +37,8 @@ import { SwapVerticalIcon } from '../icons/ThemedIcons' import { WalletListModal, WalletListResult } from '../modals/WalletListModal' import { Airship, showToast, showWarning } from '../services/AirshipInstance' import { useTheme } from '../services/ThemeContext' -import { ExchangedFlipInputAmounts, ExchangedFlipInputRef } from '../themed/ExchangedFlipInput2' import { LineTextDivider } from '../themed/LineTextDivider' -import { SwapInput } from '../themed/SwapInput' +import { SwapInput, SwapInputCardAmounts, SwapInputCardInputRef } from '../themed/SwapInput' import { ButtonBox } from '../themed/ThemedButtons' export interface SwapCreateParams { @@ -72,8 +71,8 @@ export const SwapCreateScene = (props: Props) => { const [inputFiatAmount, setInputFiatAmount] = useState('0') const [inputNativeAmountFor, setInputNativeAmountFor] = useState<'from' | 'to'>('from') - const fromInputRef = React.useRef(null) - const toInputRef = React.useRef(null) + const fromInputRef = React.useRef(null) + const toInputRef = React.useRef(null) const swapRequestOptions = useSwapRequestOptions() @@ -283,6 +282,15 @@ export const SwapCreateScene = (props: Props) => { // Update the error state: ...getNewErrorInfo('asset') }) + + // Make sure to update the values if the wallet change is for the input + // field that has a native amount: + if (direction === 'from' && inputNativeAmountFor === 'from') { + fromInputRef.current?.triggerConvertValue() + } + if (direction === 'to' && inputNativeAmountFor === 'to') { + toInputRef.current?.triggerConvertValue() + } }) const handleMaxPress = useHandler(() => { @@ -341,7 +349,7 @@ export const SwapCreateScene = (props: Props) => { await showWalletListModal('to') }) - const handleFromAmountChange = useHandler((amounts: ExchangedFlipInputAmounts) => { + const handleFromAmountChange = useHandler((amounts: SwapInputCardAmounts) => { navigation.setParams({ ...route.params, // Update the error state: @@ -355,7 +363,7 @@ export const SwapCreateScene = (props: Props) => { toInputRef.current?.setAmount('crypto', '0') }) - const handleToAmountChange = useHandler((amounts: ExchangedFlipInputAmounts) => { + const handleToAmountChange = useHandler((amounts: SwapInputCardAmounts) => { navigation.setParams({ ...route.params, // Update the error state: diff --git a/src/components/themed/FlipInput2.tsx b/src/components/themed/FlipInput2.tsx index aa0947c9ac1..b36e0decab9 100644 --- a/src/components/themed/FlipInput2.tsx +++ b/src/components/themed/FlipInput2.tsx @@ -31,6 +31,7 @@ import { ButtonBox } from './ThemedButtons' export interface FlipInputRef { setAmounts: (value: string[]) => void + triggerConvertValue: () => void } export type FieldNum = 0 | 1 @@ -232,6 +233,9 @@ export const FlipInput2 = React.forwardRef((props: Props, r React.useImperativeHandle(ref, () => ({ setAmounts: amounts => { setAmounts([amounts[0], amounts[1]]) + }, + triggerConvertValue: () => { + onNumericInputChange(amounts[primaryField]) } })) diff --git a/src/components/themed/SwapInput.tsx b/src/components/themed/SwapInput.tsx index 77b3a58f0cb..b6ce2ba75ff 100644 --- a/src/components/themed/SwapInput.tsx +++ b/src/components/themed/SwapInput.tsx @@ -18,6 +18,7 @@ export type ExchangeFlipInputFields = 'fiat' | 'crypto' export interface SwapInputCardInputRef { setAmount: (field: ExchangeFlipInputFields, value: string) => void + triggerConvertValue: () => void } export interface SwapInputCardAmounts { @@ -184,6 +185,9 @@ const SwapInputComponent = React.forwardRef((props const { displayAmount } = convertFromFiat(value) flipInputRef.current?.setAmounts([displayAmount, value]) } + }, + triggerConvertValue: () => { + flipInputRef.current?.triggerConvertValue() } }))