From cf2ca74dea1794e4363264aac9aa47272456aa66 Mon Sep 17 00:00:00 2001
From: Armen Nikoyan <armen@nikoyan.com>
Date: Tue, 24 Sep 2024 00:34:42 +0400
Subject: [PATCH] fix(amount input): inconsistent decimals

---
 .../src/components/InputTransparent.tsx       |  2 -
 .../src/views/Bridge/Inputs/AmountInput.tsx   | 94 -------------------
 .../src/views/v2/Bridge/AmountInput/index.tsx |  9 +-
 3 files changed, 1 insertion(+), 104 deletions(-)
 delete mode 100644 wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx

diff --git a/wormhole-connect/src/components/InputTransparent.tsx b/wormhole-connect/src/components/InputTransparent.tsx
index f575850a3..1354b001f 100644
--- a/wormhole-connect/src/components/InputTransparent.tsx
+++ b/wormhole-connect/src/components/InputTransparent.tsx
@@ -40,7 +40,6 @@ type Props = {
   disabled?: boolean;
   value?: string | number;
   testId?: string;
-  pattern?: string;
 };
 
 const NUMBER_FORMAT_REGEX = /^\d*\.?\d*$/;
@@ -79,7 +78,6 @@ function InputTransparent(props: Props) {
       readOnly={props.disabled}
       value={props.value}
       data-testid={props.testId}
-      pattern={props.pattern}
     />
   );
 }
diff --git a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx b/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
deleted file mode 100644
index 582d045b9..000000000
--- a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useMemo, useRef } from 'react';
-import { useSelector } from 'react-redux';
-
-import { RootState } from 'store';
-import { toFixedDecimals } from 'utils/balance';
-import { NO_INPUT } from 'utils/style';
-
-import InputTransparent from 'components/InputTransparent';
-import Input from './Input';
-import config from 'config';
-import Price from 'components/Price';
-import { getTokenPrice, getUSDFormat } from 'utils';
-import { TransferSide } from 'config/types';
-
-type Props = {
-  handleAmountChange: (value: string) => void;
-  value: string;
-  disabled?: boolean;
-  label?: string;
-  side: TransferSide;
-};
-function AmountInput(props: Props) {
-  const amountEl = useRef(null);
-  const {
-    showValidationState: showErrors,
-    validations,
-    token,
-    isTransactionInProgress,
-  } = useSelector((state: RootState) => state.transferInput);
-  const {
-    usdPrices: { data },
-  } = useSelector((state: RootState) => state.tokenPrices);
-  const prices = data || {};
-
-  function handleAmountChange(
-    e:
-      | React.ChangeEvent<HTMLInputElement>
-      | React.ChangeEvent<HTMLTextAreaElement>
-      | undefined,
-  ) {
-    let value = e!.target.value;
-    const index = value.indexOf('.');
-    if (index > 0 && value.length - index - 8 > 0) {
-      value = toFixedDecimals(value, 8);
-    }
-
-    props.handleAmountChange(value);
-  }
-
-  const focus = () => {
-    if (amountEl.current) {
-      (amountEl.current as any).focus();
-    }
-  };
-
-  const price = useMemo(() => {
-    const tokenPrice = getTokenPrice(prices, config.tokens[token]) || 0;
-    if (!tokenPrice) return undefined;
-    return getUSDFormat(Number(props.value) * tokenPrice);
-  }, [props.value, token, prices]);
-
-  return (
-    <Input
-      label={props.label ?? 'Amount'}
-      error={!!(showErrors && validations.amount)}
-      editable
-      disabled
-      onClick={focus}
-      cursor="text"
-    >
-      {token ? (
-        <>
-          <InputTransparent
-            inputRef={amountEl}
-            placeholder="0.00"
-            type="number"
-            min={0}
-            step={0.1}
-            onChange={handleAmountChange}
-            disabled={isTransactionInProgress || props.disabled}
-            value={props.value}
-            testId={props.side + '-section-amount-input'}
-            pattern="[0-9]+([\.|,][0-9]{1,2})?"
-          />
-          {price && <Price>{price}</Price>}
-        </>
-      ) : (
-        <div>{NO_INPUT}</div>
-      )}
-    </Input>
-  );
-}
-
-export default AmountInput;
diff --git a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx
index a7885d3e8..3694cd45a 100644
--- a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx
+++ b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx
@@ -210,19 +210,12 @@ const AmountInput = (props: Props) => {
                 e.currentTarget.blur();
               },
               step: '0.1',
+              pattern: '[0-9]+([.|,][0-9]{1,2})?',
             }}
             placeholder="0"
             variant="standard"
             value={amount}
             onChange={handleChange}
-            onWheel={(e) => {
-              // IMPORTANT: We need to prevent the scroll behavior on number inputs.
-              // Otherwise it'll increase/decrease the value when user scrolls on the input control.
-              // See for details: https://github.com/mui/material-ui/issues/7960
-              if (e.target instanceof HTMLElement) {
-                e.target.blur();
-              }
-            }}
             InputProps={{
               disableUnderline: true,
               endAdornment: (