Allow manual entry on Swap page (#1096)

* Allow manual entry on Swap page * Format amount in AmountInput component itself
DistributedCollective · May 13, 2021 · 3c01e07 · 3c01e07
1 parent 13378e7
commit 3c01e07
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 13 deletions.
diff --git a/src/app/components/Form/AmountInput/index.tsx b/src/app/components/Form/AmountInput/index.tsx
@@ -6,10 +6,12 @@ import { fromWei } from '../../../../utils/blockchain/math-helpers';
 import { AssetRenderer } from '../../AssetRenderer';
 import { useAssetBalanceOf } from '../../../hooks/useAssetBalanceOf';
 import { Input } from '../Input';
+import { stringToFixedPrecision } from 'utils/display-text/format';
 
 interface Props {
   value: string;
   onChange: (value: string) => void;
+  decimalPrecision?: number;
   asset?: Asset;
   placeholder?: string;
   maxAmount?: string;
@@ -19,13 +21,14 @@ export function AmountInput({
   value,
   onChange,
   placeholder = '0.000000',
+  decimalPrecision = 6,
   asset,
   maxAmount,
 }: Props) {
   return (
     <>
       <Input
-        value={value}
+        value={stringToFixedPrecision(value, decimalPrecision)}
         onChange={onChange}
         type="number"
         placeholder={placeholder}

diff --git a/src/app/containers/SwapFormContainer/index.tsx b/src/app/containers/SwapFormContainer/index.tsx
@@ -181,7 +181,7 @@ export function SwapFormContainer() {
           </div>
           <div className="swap-form__amount">
             <AmountInput
-              value={weiToFixed(weiAmount, 6)}
+              value={amount}
               onChange={value => setAmount(value)}
               asset={sourceToken}
             />

diff --git a/src/app/pages/MarginTradePage/components/AddToMarginDialog/index.tsx b/src/app/pages/MarginTradePage/components/AddToMarginDialog/index.tsx
@@ -27,7 +27,6 @@ import { leverageFromMargin } from '../../../../../utils/blockchain/leverage-fro
 import { TradingPairDictionary } from '../../../../../utils/dictionaries/trading-pair-dictionary';
 import { TradingPosition } from '../../../../../types/trading-position';
 import type { ActiveLoan } from 'types/active-loan';
-import { stringToFixedPrecision } from 'utils/display-text/format';
 
 interface Props {
   item: ActiveLoan;
@@ -82,7 +81,7 @@ export function AddToMarginDialog(props: Props) {
           >
             <AmountInput
               onChange={value => setAmount(value)}
-              value={stringToFixedPrecision(amount, 6)}
+              value={amount}
               asset={tokenDetails.asset}
             />
           </FormGroup>

diff --git a/src/app/pages/MarginTradePage/components/ClosePositionDialog/index.tsx b/src/app/pages/MarginTradePage/components/ClosePositionDialog/index.tsx
@@ -23,7 +23,6 @@ import { DialogButton } from 'form/DialogButton';
 import { ErrorBadge } from 'form/ErrorBadge';
 import type { ActiveLoan } from 'types/active-loan';
 import { TxFeeCalculator } from '../TxFeeCalculator';
-import { stringToFixedPrecision } from 'utils/display-text/format';
 
 interface Props {
   item: ActiveLoan;
@@ -112,7 +111,7 @@ export function ClosePositionDialog(props: Props) {
           >
             <AmountInput
               onChange={value => setAmount(value)}
-              value={stringToFixedPrecision(amount, 6)}
+              value={amount}
               maxAmount={props.item.collateral}
             />
           </FormGroup>

diff --git a/src/app/pages/MarginTradePage/components/TradeForm/index.tsx b/src/app/pages/MarginTradePage/components/TradeForm/index.tsx
@@ -25,7 +25,6 @@ import { selectMarginTradePage } from '../../selectors';
 import { actions } from '../../slice';
 import { AvailableBalance } from '../../../../components/AvailableBalance';
 import { renderItemNH } from 'form/Select/renderers';
-import { stringToFixedPrecision } from 'utils/display-text/format';
 
 const pairs: Options<
   TradingPairType,
@@ -114,7 +113,7 @@ export function TradeForm() {
             label={t(translations.marginTradePage.tradeForm.labels.amount)}
           >
             <AmountInput
-              value={stringToFixedPrecision(amount, 6)}
+              value={amount}
               onChange={value => setAmount(value)}
               asset={collateral}
             />

diff --git a/src/app/pages/SpotTradingPage/components/TradeForm/index.tsx b/src/app/pages/SpotTradingPage/components/TradeForm/index.tsx
@@ -31,10 +31,7 @@ import { useSwapNetwork_conversionPath } from 'app/hooks/swap-network/useSwapNet
 import { Asset } from 'types/asset';
 import { SlippageDialog } from 'app/pages/BuySovPage/components/BuyForm/Dialogs/SlippageDialog';
 import { maxMinusFee } from 'utils/helpers';
-import {
-  stringToFixedPrecision,
-  weiToNumberFormat,
-} from 'utils/display-text/format';
+import { weiToNumberFormat } from 'utils/display-text/format';
 import { AssetsDictionary } from 'utils/dictionaries/assets-dictionary';
 import { TxDialog } from 'app/components/Dialogs/TxDialog';
 import { AvailableBalance } from 'app/components/AvailableBalance';
@@ -134,7 +131,7 @@ export function TradeForm() {
             label={t(translations.marginTradePage.tradeForm.labels.amount)}
           >
             <AmountInput
-              value={stringToFixedPrecision(amount, 6)}
+              value={amount}
               onChange={value => setAmount(value)}
               asset={sourceToken}
             />