check input dai amount for safety

* init code style guide
* init big number util file

STYLEGUIDE.md

@@ -0,0 +1,9 @@
+# Maker Style Guide
+
+### Components
+
+### State
+
+### JS Hygiene
+
+[Clean Code](https://github.com/ryanmcdermott/clean-code-javascript)

src/components/CDPCreateScreens/CDPCreateDeposit.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { Box, Grid, Text, Input, Card } from '@makerdao/ui-components-core';
+import { greaterThanOrEqual } from 'utils/bignumber';
 import { TextBlock } from 'components/Typography';
 import TwoColumnCardsLayout from 'layouts/TwoColumnCardsLayout';
 import { getUsdPrice, calcCDPParams, cdpParamsAreValid } from 'utils/ui';
@@ -14,8 +15,14 @@ function OpenCDPForm({
   handleInputChange,
   daiAvailable
 }) {
-  const userHasSufficientGemBalance =
-    parseFloat(selectedIlk.userGemBalance) >= parseFloat(cdpParams.gemsToLock);
+  const userHasSufficientGemBalance = greaterThanOrEqual(
+    selectedIlk.userGemBalance,
+    cdpParams.gemsToLock
+  );
+  const userCanDrawDaiAmount = greaterThanOrEqual(
+    daiAvailable,
+    cdpParams.daiToDraw
+  );
 
   const fields = [
     [
@@ -72,6 +79,9 @@ function OpenCDPForm({
         after="DAI"
         width="250px"
         type="number"
+        errorMessage={
+          userCanDrawDaiAmount ? null : lang.cdp_create.draw_too_much_dai
+        }
         value={cdpParams.daiToDraw}
         onChange={handleInputChange}
       />,
@@ -171,6 +181,7 @@ const CDPCreateDeposit = ({ selectedIlk, cdpParams, dispatch }) => {
   } = calcCDPParams({ ilkData: selectedIlk.data, gemsToLock, daiToDraw });
 
   function handleInputChange({ target }) {
+    if (parseFloat(target.value) < 0) return;
     dispatch({
       type: `form/set-${target.name}`,
       payload: { value: target.value }

src/languages/_english.json

@@ -52,6 +52,7 @@
     "proxy_title": "Creating a proxy",
     "proxy_text": "Before creating your first CDP, you must create a personal proxy contract.",
     "insufficient_ilk_balance": "Insufficient {0} balance",
+    "draw_too_much_dai": "CDP below liquidation threshold",
     "stability_fee_description": "The fee that is added to the total outstanding DAI debt when a liquidation occurs.",
     "liquidation_ratio_description": "The collateral-to-dai ratio at which a CDP becomes vulnerable to liquidation.",
     "liquidation_penalty_description": "The fee that is added to the total outstanding DAI debt when a liquidation occurs."

src/utils/bignumber.js

@@ -0,0 +1,29 @@
+import BigNumber from 'bignumber.js';
+
+export function greaterThan(numberOne, numberTwo) {
+  return (
+    BigNumber(numberOne.toString()).comparedTo(
+      BigNumber(numberTwo.toString())
+    ) === 1
+  );
+}
+
+export function greaterThanOrEqual(numberOne, numberTwo) {
+  return (
+    BigNumber(numberOne.toString()).comparedTo(
+      BigNumber(numberTwo.toString())
+    ) >= 0
+  );
+}
+
+export function multiply(numberOne, numberTwo) {
+  return BigNumber(numberOne.toString())
+    .times(BigNumber(numberTwo.toString()))
+    .toString();
+}
+
+export function divide(numberOne, numberTwo) {
+  return BigNumber(numberOne.toString())
+    .dividedBy(BigNumber(numberTwo.toString()))
+    .toString();
+}

src/utils/ui.js

@@ -1,3 +1,5 @@
+import { greaterThanOrEqual } from './bignumber';
+
 export function prettifyNumber(_num = null, truncate = false) {
   if (_num === null) return null;
   let symbol = ' ';
@@ -74,7 +76,26 @@ export function getUsdPrice(ilkData) {
   return parseFloat(ilkData.feedValueUSD.toString());
 }
 
-export function cdpParamsAreValid({ gemsToLock, daiToDraw }, userGemBalance) {
-  if (parseFloat(gemsToLock) > parseFloat(userGemBalance)) return false;
-  return !!gemsToLock && !!daiToDraw;
+export function cdpParamsAreValid(
+  { gemsToLock, daiToDraw },
+  userGemBalance,
+  ilkData
+) {
+  // must not open empty cdp
+  if (!gemsToLock) return false; // we technically can do this, but TODO figure out if we should
+  // must lock collateral in order to draw dai
+  if (!!daiToDraw && !gemsToLock) return false;
+  // must be positive
+  if (parseFloat(daiToDraw) < 0 || parseFloat(gemsToLock) < 0) return false;
+  // must have enough tokens
+  if (greaterThanOrEqual(gemsToLock, userGemBalance)) return false;
+
+  const daiAvailable = calcDaiAvailable({
+    gemsToLock: parseFloat(gemsToLock),
+    price: getUsdPrice(ilkData),
+    liquidationRatio: parseFloat(ilkData.liquidationRatio)
+  });
+  // must open a cdp above the liquidation threshold
+  if (greaterThanOrEqual(daiAvailable, daiToDraw)) return false;
+  return true;
 }