add error logic and styling

.env.local.example

-REACT_APP_NETWORK_ID="1"
-REACT_APP_NETWORK_URL=""
\ No newline at end of file

src/assets/images/question-mark.svg

+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9" cy="9" r="9" fill="#E1E1E1"/>
+<path d="M8.06493 10.8317H9.15706V10.7592C9.17233 9.88089 9.42436 9.48757 10.0735 9.08662C10.7571 8.67421 11.1771 8.09378 11.1771 7.23459C11.1771 5.99354 10.2377 5.15344 8.83629 5.15344C7.54942 5.15344 6.51839 5.90571 6.46875 7.28041H7.62961C7.67543 6.47086 8.25204 6.11573 8.83629 6.11573C9.48546 6.11573 10.0124 6.54724 10.0124 7.22313C10.0124 7.79211 9.65729 8.19306 9.20288 8.47564C8.49262 8.91096 8.07257 9.34246 8.06493 10.7592V10.8317ZM8.64154 13.1534C9.05777 13.1534 9.40527 12.8136 9.40527 12.3897C9.40527 11.9735 9.05777 11.6298 8.64154 11.6298C8.22149 11.6298 7.87782 11.9735 7.87782 12.3897C7.87782 12.8136 8.22149 13.1534 8.64154 13.1534Z" fill="#737373"/>
+</svg>

src/components/ContextualInfoNew/index.js

@@ -33,6 +33,7 @@ const SummaryWrapperContainer = styled.div`
 const Details = styled.div`
   background-color: ${({ theme }) => theme.concreteGray};
   padding: 1.5rem;
+  padding-bottom: 1rem;
   border-radius: 1rem;
   font-size: 0.75rem;
   margin-top: 1rem;

src/components/TransactionDetails/index.js

@@ -2,31 +2,62 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { amountFormatter } from '../../utils'
+import questionMark from '../../assets/images/question-mark.svg'
 
 import NewContextualInfo from '../../components/ContextualInfoNew'
 
 const Flex = styled.div`
   display: flex;
   justify-content: center;
-  padding: 14px 0;
   button {
     max-width: 20rem;
   }
 `
 
 const SlippageRow = styled(Flex)`
-  flex-direction: row;
+  position: relative;
   width: 100%;
+  flex-direction: row;
   justify-content: flex-start;
+  align-items: center;
   font-size: 0.8rem;
   padding: 0;
   height: 24px;
   margin-bottom: 14px;
 `
 
+const QuestionWrapper = styled.div`
+  margin-left: 0.4rem;
+  margin-top: 0.2rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+const Popup = styled(Flex)`
+  position: absolute;
+  width: 228px;
+  left: -78px;
+  top: -124px;
+
+  flex-direction: column;
+  aligm-items: center;
+
+  padding: 1rem;
+
+  line-height: 183.52%;
+  background: #404040;
+  border-radius: 8px;
+
+  color: white;
+  font-style: italic;
+`
+
 const Option = styled(Flex)`
   align-items: center;
   min-width: 55px;
+  height: 24px;
   margin-right: 4px;
   border-radius: 36px;
   border: 1px solid #f2f2f2;
@@ -77,7 +108,7 @@ const Input = styled.input`
   `}
 
   ${({ warning }) =>
-    warning &&
+    warning === 'red' &&
     `
     color : #FF6871;
     border: 1px solid #FF6871;
@@ -88,11 +119,17 @@ const BottomError = styled.div`
   margin-top: 1rem;
   color: #aeaeae;
 
-  ${({ warning }) =>
-    warning &&
+  ${({ color }) =>
+    color === 'red' &&
     `
-  color : #FF6871;
-`}
+    color : #FF6871;
+  `}
+`
+
+const Break = styled.div`
+  border: 1px solid #f2f2f2;
+  width: 100%;
+  margin-top: 1rem;
 `
 
 const OptionLarge = styled(Option)`
@@ -108,7 +145,7 @@ const LastSummaryText = styled.div`
 `
 
 const SlippageSelector = styled.div`
-  margin-top: 28px;
+  margin-top: 1rem;
 `
 
 const InputGroup = styled.div`
@@ -117,7 +154,7 @@ const InputGroup = styled.div`
 
 const Percent = styled.div`
   right: 14px;
-  top: 8px;
+  top: 9px;
   position: absolute;
   color: inherit;
   font-size: 0, 8rem;
@@ -191,12 +228,35 @@ export default function TransactionDetails(props) {
 
   const [warningType, setWarningType] = useState('none')
 
+  const [showPopup, setPopup] = useState(false)
+
   const dropDownContent = () => {
     return (
       <>
         {renderTransactionDetails()}
+        <Break />
         <SlippageSelector>
-          <SlippageRow>Limit addtional price slippage</SlippageRow>
+          <SlippageRow>
+            Limit addtional price slippage
+            <QuestionWrapper
+              onMouseEnter={() => {
+                setPopup(true)
+              }}
+              onMouseLeave={() => {
+                setPopup(false)
+              }}
+            >
+              <img src={questionMark} alt="question mark" />
+            </QuestionWrapper>
+            {showPopup ? (
+              <Popup>
+                Lowering this limit decreases your risk of frontrunning. This makes it more likely that your transaction
+                will fail due to normal price movements.
+              </Popup>
+            ) : (
+              ''
+            )}
+          </SlippageRow>
           <SlippageRow>
             <Option
               onClick={() => {
@@ -241,16 +301,23 @@ export default function TransactionDetails(props) {
                   parseInput(e)
                 }}
                 active={activeIndex === 4 ? true : false}
-                warning={warningType !== 'none'}
+                warning={warningType !== 'none' && warningType !== 'riskyEntryLow' ? 'red' : ''}
               />
-              <Percent color={warningType !== 'none' ? 'red' : activeIndex !== 4 ? 'faded' : ''}>%</Percent>
+              <Percent
+                color={
+                  warningType !== 'none' && warningType !== 'riskyEntryLow' ? 'red' : activeIndex !== 4 ? 'faded' : ''
+                }
+              >
+                %
+              </Percent>
             </InputGroup>
           </SlippageRow>
           <SlippageRow>
-            <BottomError warning={warningType !== 'none'}>
-              {warningType === 'invalidEntry' ? 'Please input a valid percentage' : ''}
-              {warningType === 'invalidEntryBound' ? 'Only choose between 0% and 50%' : ''}
-              {warningType === 'riskyEntry' ? 'Youre at risk of being front-run ' : ''}
+            <BottomError color={warningType !== 'none' && warningType !== 'riskyEntryLow' ? 'red' : ''}>
+              {warningType === 'invalidEntry' ? 'Please input a valid percentage.' : ''}
+              {warningType === 'invalidEntryBound' ? 'Pleae select value less than 50%' : ''}
+              {warningType === 'riskyEntryHigh' ? 'Youre at risk of being front-run.' : ''}
+              {warningType === 'riskyEntryLow' ? 'Youre transaction may fail.' : ''}
             </BottomError>
           </SlippageRow>
         </SlippageSelector>
@@ -278,16 +345,22 @@ export default function TransactionDetails(props) {
   }
 
   const checkAcceptablePercentValue = input => {
-    setWarningType('none')
-    if (input < 0 || input > 50) {
-      return setWarningType('invalidEntryBound')
-    }
-    if (input >= 0 && input < 0.1) {
-      setWarningType('riskyEntry')
-    }
-    let num = parseFloat((input * 100).toFixed(2))
-    props.setRawSlippage(num)
-    props.setRawTokenSlippage(num)
+    setTimeout(function() {
+      setWarningType('none')
+      if (input < 0 || input > 50) {
+        return setWarningType('invalidEntryBound')
+      }
+      if (input >= 0 && input < 0.1) {
+        setWarningType('riskyEntryLow')
+      }
+
+      if (input >= 5) {
+        setWarningType('riskyEntryHigh')
+      }
+      let num = parseFloat((input * 100).toFixed(2))
+      props.setRawSlippage(num)
+      props.setRawTokenSlippage(num)
+    }, 300)
   }
 
   const b = text => <Bold>{text}</Bold>
@@ -352,6 +425,5 @@ export default function TransactionDetails(props) {
       )
     }
   }
-
   return <>{renderSummary()}</>
 }