feat: support half-written decimal numbers in BigNumberInput

2 files changed, 31 insertions, 1 deletions

diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 233e29cff..23a15305a 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
+import { BigNumberInput } from '../util/big_number';
 import { util } from '../util/util';
 
 import { ScalingInput } from './scaling_input';
@@ -41,7 +42,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps>
         let bigNumberValue;
         if (!_.isEmpty(value)) {
             try {
-                bigNumberValue = new BigNumber(event.target.value);
+                bigNumberValue = new BigNumberInput(event.target.value);
             } catch {
                 // We don't want to allow values that can't be a BigNumber, so don't even call onChange.
                 return;
diff --git a/packages/instant/src/util/big_number.ts b/packages/instant/src/util/big_number.ts
new file mode 100644
index 000000000..773eb0cb4
--- /dev/null
+++ b/packages/instant/src/util/big_number.ts
@@ -0,0 +1,29 @@
+import { BigNumber } from '@0x/utils';
+import * as _ from 'lodash';
+
+/**
+ *  A BigNumber extension that is more flexible about decimal strings.
+ *  Such as allowing:
+ *  new BigNumberInput(0.) => 0
+ *  new BigNumberInput(1.) => 1
+ *  new BigNumberInput(1..) => still throws
+ */
+export class BigNumberInput extends BigNumber {
+    private _hasDecimalPeriod: boolean;
+    constructor(bigNumberString: string) {
+        const hasDecimalPeriod = _.endsWith(bigNumberString, '.');
+        let internalString = bigNumberString;
+        if (hasDecimalPeriod) {
+            internalString = bigNumberString.slice(0, bigNumberString.length - 1);
+        }
+        super(internalString);
+        this._hasDecimalPeriod = hasDecimalPeriod;
+    }
+    public toString(): string {
+        const internalString = super.toString();
+        if (this._hasDecimalPeriod) {
+            return `${internalString}.`;
+        }
+        return internalString;
+    }
+}