fix warnings + bugs

src/components/ContextualInfoNew/index.js

@@ -40,6 +40,8 @@ const Details = styled.div`
 
 const ErrorSpan = styled.span`
   margin-right: 12px;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
 
   color: ${({ isError, theme }) => isError && theme.salmonRed};
   ${({ slippageWarning, highSlippageWarning, theme }) =>
@@ -56,7 +58,7 @@ const ErrorSpan = styled.span`
         `}
 `
 
-const WrappedDropup = ({ isError, ...rest }) => <Dropup {...rest} />
+const WrappedDropup = ({ isError, highSlippageWarning, ...rest }) => <Dropup {...rest} />
 const ColoredDropup = styled(WrappedDropup)`
   path {
     stroke: ${({ isError, theme }) => isError && theme.salmonRed};
@@ -69,7 +71,7 @@ const ColoredDropup = styled(WrappedDropup)`
   }
 `
 
-const WrappedDropdown = ({ isError, ...rest }) => <Dropdown {...rest} />
+const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
 const ColoredDropdown = styled(WrappedDropdown)`
   path {
     stroke: ${({ isError, theme }) => isError && theme.salmonRed};

src/components/Web3Status/index.js

@@ -212,12 +212,6 @@ export default function Web3Status() {
     }
   }, [connectorName, setConnector])
 
-  useEffect(() => {
-    if (account) {
-      setError()
-    }
-  })
-
   function onClick() {
     if (walletModalError) {
       openWalletModal()

src/hooks/index.js

@@ -58,8 +58,9 @@ export function useENSName(address) {
   useEffect(() => {
     if (isAddress(address)) {
       let stale = false
-
-      library.lookupAddress(address).then(name => {
+      library
+        .lookupAddress(address)
+        .then(name => {
           if (!stale) {
             if (name) {
               setENSNname(name)
@@ -68,6 +69,11 @@ export function useENSName(address) {
             }
           }
         })
+        .catch(() => {
+          if (!stale) {
+            setENSNname(null)
+          }
+        })
 
       return () => {
         stale = true

src/pages/Swap/index.js

@@ -599,8 +599,8 @@ export default function Swap() {
         contextualInfo={contextualInfo ? contextualInfo : slippageWarningText}
         allowExpand={!!(inputCurrency && outputCurrency && inputValueParsed && outputValueParsed)}
         isError={isError}
-        slippageWarning={slippageWarning && slippageWarningText}
-        highSlippageWarning={highSlippageWarning && slippageWarningText}
+        slippageWarning={slippageWarning && !contextualInfo}
+        highSlippageWarning={highSlippageWarning && !contextualInfo}
         renderTransactionDetails={renderTransactionDetails}
       />
     )

src/theme/components.js

 import styled from 'styled-components'
 import { lighten, darken } from 'polished'
 
-export const Button = styled.button.attrs({
-  backgroundColor: ({ warning, theme }) => (warning ? theme.salmonRed : theme.royalBlue)
-})`
+export const Button = styled.button.attrs(({ warning, theme }) => ({
+  backgroundColor: warning ? theme.salmonRed : theme.royalBlue
+}))`
   padding: 1rem 2rem 1rem 2rem;
   border-radius: 3rem;
   cursor: pointer;