fix: sanitize <TradeAmountInput /> precision (#7126)

src/components/DeFi/components/AssetInput.tsx

@@ -19,6 +19,8 @@ import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
 import { useToggle } from 'hooks/useToggle/useToggle'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import { allowedDecimalSeparators } from 'state/slices/preferencesSlice/preferencesSlice'
+import { selectAssetById } from 'state/slices/selectors'
+import { useAppSelector } from 'state/store'
 import { colors } from 'theme/colors'
 
 import { Balance } from './Balance'
@@ -49,7 +51,7 @@ const CryptoInput = (props: InputProps) => {
 
 export type AssetInputProps = {
   accountId?: AccountId | undefined
-  assetId?: AssetId
+  assetId: AssetId
   assetSymbol: string
   assetIcon: string
   onChange?: (value: string, isFiat?: boolean) => void
@@ -108,6 +110,8 @@ export const AssetInput: React.FC<AssetInputProps> = ({
   const handleBlur = useCallback(() => setIsFocused(false), [])
   const handleFocus = useCallback(() => setIsFocused(true), [])
 
+  const asset = useAppSelector(state => selectAssetById(state, assetId))
+
   // Lower the decimal places when the integer is greater than 8 significant digits for better UI
   const cryptoAmountIntegerCount = bnOrZero(bnOrZero(cryptoAmount).toFixed(0)).precision(true)
   const formattedCryptoAmount = bnOrZero(cryptoAmountIntegerCount).isLessThanOrEqualTo(8)
@@ -164,6 +168,7 @@ export const AssetInput: React.FC<AssetInputProps> = ({
         <Stack spacing={0} flex={1} alignItems='flex-end'>
           <Skeleton isLoaded={!showInputSkeleton} width='full'>
             <NumberFormat
+              decimalScale={isFiat ? undefined : asset?.precision}
               customInput={CryptoInput}
               isNumericString={true}
               disabled={isReadOnly}
@@ -224,7 +229,7 @@ export const AssetInput: React.FC<AssetInputProps> = ({
           )}
         </Stack>
       )}
-      {handleAccountIdChange && assetId && (
+      {handleAccountIdChange && (
         <AccountDropdown
           {...(accountId ? { defaultAccountId: accountId } : {})}
           assetId={assetId}

src/components/Modals/Send/views/Details.tsx

@@ -199,7 +199,7 @@ export const Details = () => {
     [asset?.symbol, translate],
   )
 
-  if (!(asset && !isNil(amountCryptoPrecision) && !isNil(fiatAmount) && fiatSymbol)) {
+  if (!(assetId && asset && !isNil(amountCryptoPrecision) && !isNil(fiatAmount) && fiatSymbol)) {
     return null
   }
 
@@ -254,6 +254,8 @@ export const Details = () => {
           </Box>
           {fieldName === SendFormFields.AmountCryptoPrecision && (
             <TokenRow
+              isFiat={false}
+              assetId={assetId}
               control={control}
               fieldName={SendFormFields.AmountCryptoPrecision}
               onInputChange={handleInputChange}
@@ -265,6 +267,8 @@ export const Details = () => {
           )}
           {fieldName === SendFormFields.FiatAmount && (
             <TokenRow
+              isFiat
+              assetId={assetId}
               control={control}
               fieldName={SendFormFields.FiatAmount}
               onInputChange={handleInputChange}