From 71f6ec83c16ddc9cbeabdbb5334e0e4174c4edb9 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 14 Oct 2020 19:14:52 +0200
Subject: [PATCH] Adjust formatting with large balance values (#3871)

---
 packages/react-components/src/InputBalance.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx
index 91273caede..987a2a8284 100644
--- a/packages/react-components/src/InputBalance.tsx
+++ b/packages/react-components/src/InputBalance.tsx
@@ -41,8 +41,16 @@ const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
 function reformat (value: string | BN, isDisabled?: boolean): string {
   if (isBn(value)) {
     // format for 4 decimals (align with util)
-    let fmt = (value.mul(BN_TEN_THOUSAND).div(BN_TEN.pow(new BN(formatBalance.getDefaults().decimals))).toNumber() / 10000).toFixed(4);
+    const valStr = value
+      .mul(BN_TEN_THOUSAND)
+      .div(BN_TEN.pow(new BN(formatBalance.getDefaults().decimals)))
+      .toString()
+      .padStart(5, '0'); // 4 after decimal, 1 before, min 5
 
+    // dive using string format (the value may be too large for 2^53-1)
+    let fmt = `${valStr.substr(0, valStr.length - 4)}.${valStr.slice(-4)}`;
+
+    // remove all trailing 0's until the decimal
     while (fmt.length !== 1 && ['.', '0'].includes(fmt[fmt.length - 1])) {
       const isLast = fmt.endsWith('.');