From deeb8b11debb58d8059498cfb59977019d41c2be Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 18 May 2020 12:31:55 +0200
Subject: [PATCH] InputBalance default formatting with 3 decimals (#2766)

* InputBalance default formatting with 3 decimals

* Cleanup reformatting
---
 .../react-components/src/InputBalance.tsx     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 35b86188f7..4239fb379c 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -34,15 +34,34 @@ interface Props extends BareProps {
 
 const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
 const TEN = new BN(10);
+const THOUSAND = new BN(1000);
+
+function reformat (value: string | BN, isDisabled?: boolean): string {
+  if (isBn(value)) {
+    let fmt = (value.mul(THOUSAND).div(TEN.pow(new BN(formatBalance.getDefaults().decimals))).toNumber() / 1000).toFixed(3);
+
+    while (fmt.length !== 1 && ['.', '0'].includes(fmt[fmt.length - 1])) {
+      const isLast = fmt.endsWith('.');
+
+      fmt = fmt.substr(0, fmt.length - 1);
+
+      if (isLast) {
+        break;
+      }
+    }
+
+    return fmt;
+  }
+
+  return formatBalance(value, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '');
+}
 
 function InputBalance ({ autoFocus, className, defaultValue: inDefault, help, isDisabled, isError, isFull, isZeroable, label, labelExtra, maxValue, onChange, onEnter, onEscape, placeholder, style, value, withEllipsis, withLabel, withMax }: Props): React.ReactElement<Props> {
   const [defaultValue, setDefaultValue] = useState<string | undefined>();
 
   useEffect((): void => {
     inDefault && setDefaultValue(
-      isBn(inDefault)
-        ? inDefault.div(TEN.pow(new BN(formatBalance.getDefaults().decimals))).toString()
-        : formatBalance(inDefault, { forceUnit: '-', withSi: false }).replace(',', isDisabled ? ',' : '')
+      reformat(inDefault, isDisabled)
     );
   }, [inDefault, isDisabled]);