Connect send page with exchange utils (#75)

* Connect send page with exchange utils

* Add exchangeRate and fix txId

src/components/AddressInputPanel/index.js

@@ -9,6 +9,13 @@ class AddressInputPanel extends Component {
     title: PropTypes.string,
     description: PropTypes.string,
     extraText: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    onChange() {},
+    value: '',
   };
 
   render() {
@@ -16,6 +23,8 @@ class AddressInputPanel extends Component {
       title,
       description,
       extraText,
+      onChange,
+      value
     } = this.props;
 
     return (
@@ -31,6 +40,8 @@ class AddressInputPanel extends Component {
               type="text"
               className="address-input-panel__input"
               placeholder="0x1234..."
+              onChange={e => onChange(e.target.value)}
+              value={value}
             />
           </div>
         </div>

src/components/CurrencyInputPanel/index.js

@@ -37,7 +37,7 @@ class CurrencyInputPanel extends Component {
     onCurrencySelected: PropTypes.func,
     onValueChange: PropTypes.func,
     tokenAddresses: PropTypes.shape({
-      address: PropTypes.array.isRequired,
+      addresses: PropTypes.array.isRequired,
     }).isRequired,
     exchangeAddresses: PropTypes.shape({
       fromToken: PropTypes.object.isRequired,

src/ducks/index.js

@@ -4,6 +4,7 @@ import addresses from './addresses';
 import exchangeContracts from './exchange-contract';
 import tokenContracts from './token-contract';
 import exchange from './exchange';
+import send from './send';
 import swap from './swap';
 import web3connect from './web3connect';
 
@@ -12,6 +13,7 @@ export default combineReducers({
   exchangeContracts,
   tokenContracts,
   exchange,
+  send,
   swap,
   web3connect,
   ...drizzleReducers,

src/ducks/send.js

+const UPDATE_FIELD = 'app/send/updateField';
+const ADD_ERROR = 'app/send/addError';
+const REMOVE_ERROR = 'app/send/removeError';
+const RESET_SEND = 'app/send/resetSend';
+
+const getInitialState = () => {
+  return {
+    input: '',
+    output: '',
+    inputCurrency: '',
+    outputCurrency: '',
+    recipient: '',
+    lastEditedField: '',
+    inputErrors: [],
+    outputErrors: [],
+  };
+};
+
+export const isValidSend = (state) => {
+  const { send } = state;
+
+  return send.outputCurrency !== '' &&
+    send.inputCurrency !== '' &&
+    send.input !== '' &&
+    send.output !== '' &&
+    send.recipient !== '' &&
+    send.inputErrors.length === 0 &&
+    send.outputErrors.length === 0;
+};
+
+export const updateField = ({ name, value }) => ({
+  type: UPDATE_FIELD,
+  payload: { name, value },
+});
+
+export const addError = ({ name, value }) => ({
+  type: ADD_ERROR,
+  payload: { name, value },
+});
+
+export const removeError = ({ name, value }) => ({
+  type: REMOVE_ERROR,
+  payload: { name, value },
+});
+
+export const resetSend = () => ({
+  type: RESET_SEND,
+});
+
+function reduceAddError(state, payload) {
+  const { name, value } = payload;
+  let nextErrors = state[name];
+  if (nextErrors.indexOf(value) === -1) {
+    nextErrors = [...nextErrors, value];
+  }
+
+  return {
+    ...state,
+    [name]: nextErrors,
+  };
+}
+
+function reduceRemoveError(state, payload) {
+  const { name, value } = payload;
+
+  return {
+    ...state,
+    [name]: state[name].filter(error => error !== value),
+  };
+}
+
+export default function sendReducer(state = getInitialState(), { type, payload }) {
+  switch (type) {
+    case UPDATE_FIELD:
+      return {
+        ...state,
+        [payload.name]: payload.value,
+      };
+    case ADD_ERROR:
+      return reduceAddError(state, payload);
+    case REMOVE_ERROR:
+      return reduceRemoveError(state, payload);
+    case RESET_SEND:
+      return getInitialState();
+    default:
+      return state;
+  }
+}

src/helpers/exchange-utils.js

@@ -273,7 +273,7 @@ const ETH_TO_ERC20 = {
       value: maxInput.toFixed(0),
     });
   },
-  sendInput: async ({drizzleCtx, contractStore, input, output, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
+  sendInput: async ({drizzleCtx, contractStore, input, output, outputDecimals, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
     if (!validEthToErc20(inputCurrency, outputCurrency)) {
       return;
     }
@@ -287,7 +287,6 @@ const ETH_TO_ERC20 = {
 
     const deadline = await getDeadline(drizzleCtx, 300);
     const ALLOWED_SLIPPAGE = BN(0.025);
-    const outputDecimals = await getDecimals({ address: outputCurrency, contractStore, drizzleCtx });
     const minOutput = BN(output).multipliedBy(10 ** outputDecimals).multipliedBy(BN(1).minus(ALLOWED_SLIPPAGE));
 
     return exchange.methods.ethToTokenTransferInput.cacheSend(
@@ -300,7 +299,7 @@ const ETH_TO_ERC20 = {
       }
     );
   },
-  sendOutput: async ({drizzleCtx, contractStore, input, output, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
+  sendOutput: async ({drizzleCtx, contractStore, input, output, outputDecimals, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
     if (!validEthToErc20(inputCurrency, outputCurrency)) {
       return;
     }
@@ -314,7 +313,6 @@ const ETH_TO_ERC20 = {
 
     const deadline = await getDeadline(drizzleCtx, 300);
     const ALLOWED_SLIPPAGE = BN(0.025);
-    const outputDecimals = await getDecimals({ address: outputCurrency, contractStore, drizzleCtx });
     const outputAmount = BN(output).multipliedBy(BN(10 ** outputDecimals));
     const maxInput = BN(input).multipliedBy(10 ** 18).multipliedBy(BN(1).plus(ALLOWED_SLIPPAGE));
     return exchange.methods.ethToTokenTransferOutput.cacheSend(
@@ -481,7 +479,7 @@ const ERC20_TO_ETH = {
       { from: account },
     );
   },
-  sendInput: async ({drizzleCtx, contractStore, input, output, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
+  sendInput: async ({drizzleCtx, contractStore, input, output, inputDecimals, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
     if (!validErc20ToEth(inputCurrency, outputCurrency)) {
       return;
     }
@@ -495,7 +493,6 @@ const ERC20_TO_ETH = {
 
     const deadline = await getDeadline(drizzleCtx, 300);
     const ALLOWED_SLIPPAGE = BN(0.025);
-    const inputDecimals = await getDecimals({ address: inputCurrency, contractStore, drizzleCtx });
     const minOutput = BN(output).multipliedBy(10 ** 18).multipliedBy(BN(1).minus(ALLOWED_SLIPPAGE));
     const inputAmount = BN(input).multipliedBy(10 ** inputDecimals);
 
@@ -507,7 +504,7 @@ const ERC20_TO_ETH = {
       { from: account, value: '0x0' },
     );
   },
-  sendOutput: async ({drizzleCtx, contractStore, input, output, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
+  sendOutput: async ({drizzleCtx, contractStore, input, output, inputDecimals, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
     if (!validErc20ToEth(inputCurrency, outputCurrency)) {
       return;
     }
@@ -521,7 +518,6 @@ const ERC20_TO_ETH = {
 
     const deadline = await getDeadline(drizzleCtx, 300);
     const ALLOWED_SLIPPAGE = BN(0.025);
-    const inputDecimals = await getDecimals({ address: inputCurrency, contractStore, drizzleCtx });
     const maxInput = BN(input).multipliedBy(10 ** inputDecimals).multipliedBy(BN(1).plus(ALLOWED_SLIPPAGE));
     const outputAmount = BN(output).multipliedBy(10 ** 18);
 
@@ -676,7 +672,7 @@ const ERC20_TO_ERC20 = {
       { from: account },
     );
   },
-  sendInput: async ({drizzleCtx, contractStore, input, output, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
+  sendInput: async ({drizzleCtx, contractStore, input, output, inputDecimals, outputDecimals, account, inputCurrency, outputCurrency, exchangeAddresses, recipient}) => {
     if (!validErc20ToErc20(inputCurrency, outputCurrency)) {
       return;
     }
@@ -688,8 +684,6 @@ const ERC20_TO_ERC20 = {
     }
     const deadline = await getDeadline(drizzleCtx, 300);
     const ALLOWED_SLIPPAGE = BN(0.04);
-    const inputDecimals = await getDecimals({ address: inputCurrency, contractStore, drizzleCtx });
-    const outputDecimals = await getDecimals({ address: outputCurrency, contractStore, drizzleCtx });
     const inputAmount = BN(input).multipliedBy(BN(10 ** inputDecimals));
     const outputAmount = BN(input).multipliedBy(BN(10 ** outputDecimals));
 
@@ -719,6 +713,8 @@ const ERC20_TO_ERC20 = {
       outputCurrency,
       exchangeAddresses,
       recipient,
+      inputDecimals,
+      outputDecimals,
     } = opts;
     const exchangeRateA = await ETH_TO_ERC20.calculateInput({ ...opts, inputCurrency: 'ETH' });
     if (!exchangeRateA) {
@@ -738,8 +734,6 @@ const ERC20_TO_ERC20 = {
 
     const deadline = await getDeadline(drizzleCtx, 300);
     const ALLOWED_SLIPPAGE = BN(0.04);
-    const inputDecimals = await getDecimals({ address: inputCurrency, contractStore, drizzleCtx });
-    const outputDecimals = await getDecimals({ address: outputCurrency, contractStore, drizzleCtx });
     const inputAmount = BN(input).multipliedBy(BN(10 ** inputDecimals));
     const outputAmount = BN(output).multipliedBy(BN(10 ** outputDecimals));
     const inputAmountB = BN(output).dividedBy(exchangeRateA).multipliedBy(BN(10 ** 18));