Merge pull request #376 from ianlapham/combine-swap-send

Combine Swap and Send Into 1 Component 

src/components/TransactionDetails/index.js

 import React, { useState, useEffect, useRef } from 'react'
+import ReactGA from 'react-ga'
 import { useTranslation } from 'react-i18next'
 import styled, { css, keyframes } from 'styled-components'
 import { darken, lighten } from 'polished'
-import { amountFormatter } from '../../utils'
+import { isAddress, amountFormatter } from '../../utils'
 import { useDebounce } from '../../hooks'
 
 import question from '../../assets/images/question.svg'
@@ -17,8 +18,6 @@ const WARNING_TYPE = Object.freeze({
   riskyEntryLow: 'riskyEntryLow'
 })
 
-const b = text => <Bold>{text}</Bold>
-
 const Flex = styled.div`
   display: flex;
   justify-content: center;
@@ -321,6 +320,10 @@ export default function TransactionDetails(props) {
       contextualInfo = t('selectTokenCont')
     } else if (!props.independentValue) {
       contextualInfo = t('enterValueCont')
+    } else if (props.sending && !props.recipientAddress) {
+      contextualInfo = t('noRecipient')
+    } else if (props.sending && !isAddress(props.recipientAddress)) {
+      contextualInfo = t('invalidRecipient')
     } else if (!props.account) {
       contextualInfo = t('noWallet')
       isError = true
@@ -338,7 +341,13 @@ export default function TransactionDetails(props) {
         closeDetailsText={t('hideDetails')}
         contextualInfo={contextualInfo ? contextualInfo : slippageWarningText}
         allowExpand={
-          !!(props.inputCurrency && props.outputCurrency && props.inputValueParsed && props.outputValueParsed)
+          !!(
+            props.inputCurrency &&
+            props.outputCurrency &&
+            props.inputValueParsed &&
+            props.outputValueParsed &&
+            (props.sending ? props.recipientAddress : true)
+          )
         }
         isError={isError}
         slippageWarning={props.slippageWarning && !contextualInfo}
@@ -471,10 +480,10 @@ export default function TransactionDetails(props) {
               }
             >
               {activeIndex === 4 && warningType.toString() === 'none' && 'Custom slippage value entered'}
-              {warningType === WARNING_TYPE.emptyInput && 'Enter a slippage percentage.'}
-              {warningType === WARNING_TYPE.invalidEntryBound && 'Please select value less than 50%'}
-              {warningType === WARNING_TYPE.riskyEntryHigh && 'Your transaction may be frontrun.'}
-              {warningType === WARNING_TYPE.riskyEntryLow && 'Your transaction may fail.'}
+              {warningType === WARNING_TYPE.emptyInput && 'Enter a slippage percentage'}
+              {warningType === WARNING_TYPE.invalidEntryBound && 'Please select a value no greater than 50%'}
+              {warningType === WARNING_TYPE.riskyEntryHigh && 'Your transaction may be frontrun'}
+              {warningType === WARNING_TYPE.riskyEntryLow && 'Your transaction may fail'}
             </BottomError>
           </SlippageRow>
         </SlippageSelector>
@@ -486,7 +495,7 @@ export default function TransactionDetails(props) {
     setActiveIndex(4)
     inputRef.current.focus()
     // if there's a value, evaluate the bounds
-    checkBounds(userInput)
+    checkBounds(debouncedInput)
   }
 
   // used for slippage presets
@@ -508,20 +517,20 @@ export default function TransactionDetails(props) {
     }
 
     // check bounds and set errors
-    if (slippageValue < 0 || slippageValue > 50) {
+    if (Number(slippageValue) < 0 || Number(slippageValue) > 50) {
       props.setcustomSlippageError('invalid')
       return setWarningType(WARNING_TYPE.invalidEntryBound)
     }
-    if (slippageValue >= 0 && slippageValue < 0.1) {
+    if (Number(slippageValue) >= 0 && Number(slippageValue) < 0.1) {
       props.setcustomSlippageError('valid')
       setWarningType(WARNING_TYPE.riskyEntryLow)
     }
-    if (slippageValue > 5) {
+    if (Number(slippageValue) > 5) {
       props.setcustomSlippageError('warning')
       setWarningType(WARNING_TYPE.riskyEntryHigh)
     }
     //update the actual slippage value in parent
-    updateSlippage(slippageValue)
+    updateSlippage(Number(slippageValue))
   }
 
   // check that the theyve entered number and correct decimal
@@ -538,16 +547,54 @@ export default function TransactionDetails(props) {
 
   const updateSlippage = newSlippage => {
     // round to 2 decimals to prevent ethers error
-    let numParsed = parseFloat((newSlippage * 100).toFixed(2))
+    let numParsed = parseInt(newSlippage * 100)
 
     // set both slippage values in parents
     props.setRawSlippage(numParsed)
     props.setRawTokenSlippage(numParsed)
   }
 
+  const b = text => <Bold>{text}</Bold>
+
   const renderTransactionDetails = () => {
+    ReactGA.event({
+      category: 'TransactionDetail',
+      action: 'Open'
+    })
+
     if (props.independentField === props.INPUT) {
-      return (
+      return props.sending ? (
+        <TransactionInfo>
+          <div>
+            {t('youAreSelling')}{' '}
+            <ValueWrapper>
+              {b(
+                `${amountFormatter(
+                  props.independentValueParsed,
+                  props.independentDecimals,
+                  Math.min(4, props.independentDecimals)
+                )} ${props.inputSymbol}`
+              )}
+            </ValueWrapper>
+            .
+          </div>
+          <LastSummaryText>
+            {b(props.recipientAddress)} {t('willReceive')}{' '}
+            <ValueWrapper>
+              {b(
+                `${amountFormatter(
+                  props.dependentValueMinumum,
+                  props.dependentDecimals,
+                  Math.min(4, props.dependentDecimals)
+                )} ${props.outputSymbol}`
+              )}
+            </ValueWrapper>{' '}
+          </LastSummaryText>
+          <LastSummaryText>
+            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>.
+          </LastSummaryText>
+        </TransactionInfo>
+      ) : (
         <TransactionInfo>
           <div>
             {t('youAreSelling')}{' '}
@@ -560,7 +607,7 @@ export default function TransactionDetails(props) {
                 )} ${props.inputSymbol}`
               )}
             </ValueWrapper>{' '}
-            {t('forAtLeast')}{' '}
+            {t('forAtLeast')}
             <ValueWrapper>
               {b(
                 `${amountFormatter(
@@ -573,12 +620,43 @@ export default function TransactionDetails(props) {
             .
           </div>
           <LastSummaryText>
-            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>
+            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>.
           </LastSummaryText>
         </TransactionInfo>
       )
     } else {
-      return (
+      return props.sending ? (
+        <TransactionInfo>
+          <div>
+            {t('youAreSending')}{' '}
+            <ValueWrapper>
+              {b(
+                `${amountFormatter(
+                  props.independentValueParsed,
+                  props.independentDecimals,
+                  Math.min(4, props.independentDecimals)
+                )} ${props.outputSymbol}`
+              )}
+            </ValueWrapper>{' '}
+            {t('to')} {b(props.recipientAddress)}.
+          </div>
+          <LastSummaryText>
+            {t('itWillCost')}{' '}
+            <ValueWrapper>
+              {b(
+                `${amountFormatter(
+                  props.dependentValueMaximum,
+                  props.dependentDecimals,
+                  Math.min(4, props.dependentDecimals)
+                )} ${props.inputSymbol}`
+              )}
+            </ValueWrapper>{' '}
+          </LastSummaryText>
+          <LastSummaryText>
+            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>.
+          </LastSummaryText>
+        </TransactionInfo>
+      ) : (
         <TransactionInfo>
           <div>
             {t('youAreBuying')}{' '}
@@ -604,10 +682,9 @@ export default function TransactionDetails(props) {
                 )} ${props.inputSymbol}`
               )}
             </ValueWrapper>{' '}
-            {t('orTransFail')}
           </LastSummaryText>
           <LastSummaryText>
-            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>
+            {t('priceChange')} <ValueWrapper>{b(`${props.percentSlippageFormatted}%`)}</ValueWrapper>.
           </LastSummaryText>
         </TransactionInfo>
       )