Add slippage option (Uniswap#369)

* add custom slippage to /swap
rupiah-token · Jul 26, 2019 · 30887ef · 30887ef
1 parent 12344f7
commit 30887ef
Show file tree

Hide file tree

Showing 12 changed files with 647 additions and 145 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -80,5 +80,6 @@
   "symbol": "Symbol",
   "decimals": "Decimals",
   "enterTokenCont": "Enter a token address to continue",
-  "priceChange": "This trade will cause the price to change by"
+  "priceChange": "Expected price slippage",
+  "forAtLeast" : "for at least "
 }
diff --git a/src/assets/images/question-mark.svg b/src/assets/images/question-mark.svg
diff --git a/src/assets/images/question.svg b/src/assets/images/question.svg
diff --git a/src/components/AddressInputPanel/index.js b/src/components/AddressInputPanel/index.js
@@ -21,7 +21,7 @@ const ContainerRow = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 0.5px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+  box-shadow: 0 0 0 1px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
   background-color: ${({ theme }) => theme.white};
   transition: box-shadow 200ms ease-in-out;
 `

diff --git a/src/components/ContextualInfoNew/index.js b/src/components/ContextualInfoNew/index.js
@@ -32,10 +32,10 @@ const SummaryWrapperContainer = styled.div`
 
 const Details = styled.div`
   background-color: ${({ theme }) => theme.concreteGray};
-  padding: 1.5rem;
+  /* padding: 1.25rem 1.25rem 1rem 1.25rem; */
   border-radius: 1rem;
   font-size: 0.75rem;
-  margin-top: 1rem;
+  margin: 1rem 0.5rem 0 0.5rem;
 `
 
 const ErrorSpan = styled.span`
@@ -89,13 +89,12 @@ export default function ContextualInfo({
   closeDetailsText = 'Hide Details',
   contextualInfo = '',
   allowExpand = false,
-  renderTransactionDetails = () => {},
   isError = false,
   slippageWarning,
-  highSlippageWarning
+  highSlippageWarning,
+  dropDownContent
 }) {
   const [showDetails, setShowDetails] = useState(false)
-
   return !allowExpand ? (
     <SummaryWrapper>{contextualInfo}</SummaryWrapper>
   ) : (
@@ -117,7 +116,7 @@ export default function ContextualInfo({
           )}
         </>
       </SummaryWrapperContainer>
-      {showDetails && <Details>{renderTransactionDetails()}</Details>}
+      {showDetails && <Details>{dropDownContent()}</Details>}
     </>
   )
 }
diff --git a/src/components/CurrencyInputPanel/index.js b/src/components/CurrencyInputPanel/index.js
@@ -70,7 +70,7 @@ const CurrencySelect = styled.button`
   }
 
   :focus {
-    box-shadow: 0 0 0.5px 0.5px ${({ theme }) => theme.malibuBlue};
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.malibuBlue};
   }
 
   :active {
@@ -104,12 +104,12 @@ const InputPanel = styled.div`
 
 const Container = styled.div`
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 0.5px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+  box-shadow: 0 0 0 1px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
   background-color: ${({ theme }) => theme.white};
   transition: box-shadow 200ms ease-in-out;
 
   :focus-within {
-    box-shadow: 0 0 0.5px 0.5px ${({ theme }) => theme.malibuBlue};
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.malibuBlue};
   }
 `
 

diff --git a/src/components/NavigationTabs/index.js b/src/components/NavigationTabs/index.js
@@ -84,11 +84,11 @@ const StyledNavLink = styled(NavLink).attrs({
   &.${activeClassName} {
     background-color: ${({ theme }) => theme.white};
     border-radius: 3rem;
-    box-shadow: 0 0 0.5px 1px ${({ theme }) => theme.mercuryGray};
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.mercuryGray};
     font-weight: 500;
     color: ${({ theme }) => theme.royalBlue};
     :hover {
-      box-shadow: 0 0 0.5px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
+      box-shadow: 0 0 1px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
     }
   }