Fix amount bug after changing wallet for SwapCreateScene SwapInput

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
 

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<ExchangedFlipInputRef>(null)
-  const toInputRef = React.useRef<ExchangedFlipInputRef>(null)
+  const fromInputRef = React.useRef<SwapInputCardInputRef>(null)
+  const toInputRef = React.useRef<SwapInputCardInputRef>(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:

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<FlipInputRef, Props>((props: Props, r
   React.useImperativeHandle(ref, () => ({
     setAmounts: amounts => {
       setAmounts([amounts[0], amounts[1]])
+    },
+    triggerConvertValue: () => {
+      onNumericInputChange(amounts[primaryField])
     }
   }))
 

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<SwapInputCardInputRef, Props>((props
         const { displayAmount } = convertFromFiat(value)
         flipInputRef.current?.setAmounts([displayAmount, value])
       }
+    },
+    triggerConvertValue: () => {
+      flipInputRef.current?.triggerConvertValue()
     }
   }))