Feather icons

package.json

@@ -5,11 +5,6 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.18",
-    "@fortawesome/free-brands-svg-icons": "^5.8.2",
-    "@fortawesome/free-regular-svg-icons": "^5.8.2",
-    "@fortawesome/free-solid-svg-icons": "^5.8.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
     "copy-to-clipboard": "^3.2.0",
@@ -23,6 +18,7 @@
     "react": "^16.8.6",
     "react-device-detect": "^1.6.2",
     "react-dom": "^16.8.6",
+    "react-feather": "^1.1.6",
     "react-ga": "^2.5.7",
     "react-i18next": "^10.7.0",
     "react-router-dom": "^5.0.0",

src/components/WalletModal/Copy.js

@@ -3,9 +3,7 @@ import styled from 'styled-components'
 import { useCopyClipboard } from '../../hooks'
 
 import { Link } from '../../theme'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCopy, faCheckCircle } from '@fortawesome/free-regular-svg-icons'
+import { CheckCircle, Copy } from 'react-feather'
 
 const CopyIcon = styled(Link)`
   color: ${({ theme }) => theme.silverGray};
@@ -22,21 +20,23 @@ const CopyIcon = styled(Link)`
 `
 const TransactionStatusText = styled.span`
   margin-left: 0.25rem;
+  ${({ theme }) => theme.flexRowNoWrap};
+  align-items: center;
 `
 
-export default function Copy({ toCopy }) {
+export default function CopyHelper({ toCopy }) {
   const [isCopied, setCopied] = useCopyClipboard()
 
   return (
     <CopyIcon onClick={() => setCopied(toCopy)}>
       {isCopied ? (
         <TransactionStatusText>
-          <FontAwesomeIcon icon={faCheckCircle} />
+          <CheckCircle size={'16'} />
           <TransactionStatusText>Copied</TransactionStatusText>
         </TransactionStatusText>
       ) : (
         <TransactionStatusText>
-          <FontAwesomeIcon icon={faCopy} />
+          <Copy size={'16'} />
         </TransactionStatusText>
       )}
     </CopyIcon>

src/components/WalletModal/Info.js

@@ -1,31 +1,16 @@
 import React from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled from 'styled-components'
 import { useWeb3Context } from 'web3-react'
-import { useCopyClipboard } from '../../hooks'
 
 import { getEtherscanLink } from '../../utils'
-import { Link } from '../../theme'
+import { Link, Spinner } from '../../theme'
+import Copy from './Copy'
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCopy, faCheckCircle } from '@fortawesome/free-regular-svg-icons'
-import { faCircleNotch, faCheck } from '@fortawesome/free-solid-svg-icons'
+import { Check } from 'react-feather'
+import Circle from '../../assets/images/circle.svg'
 
 import { transparentize } from 'polished'
 
-const CopyIcon = styled(Link)`
-  color: ${({ theme }) => theme.silverGray};
-  flex-shrink: 0;
-  margin-right: 1rem;
-  margin-left: 0.5rem;
-  text-decoration: none;
-  :hover,
-  :active,
-  :focus {
-    text-decoration: none;
-    color: ${({ theme }) => theme.doveGray};
-  }
-`
-
 const TransactionStatusWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -55,15 +40,6 @@ const TransactionStatusText = styled.span`
   margin-left: 0.25rem;
 `
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`
-
 const TransactionState = styled.div`
   background-color: ${({ pending, theme }) =>
     pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
@@ -75,9 +51,6 @@ const TransactionState = styled.div`
   border-color: ${({ pending, theme }) =>
     pending ? transparentize(0.75, theme.royalBlue) : transparentize(0.75, theme.connectedGreen)};
 
-  #pending {
-    animation: 2s ${rotate} linear infinite;
-  }
   :hover {
     border-color: ${({ pending, theme }) =>
       pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
@@ -92,31 +65,18 @@ const ButtonWrapper = styled.div`
 
 export default function Info({ hash, pending }) {
   const { networkId } = useWeb3Context()
-  const [isCopied, copy] = useCopyClipboard()
 
   return (
     <TransactionWrapper key={hash}>
       <TransactionStatusWrapper>
         <Link href={getEtherscanLink(networkId, hash, 'transaction')}>{hash} ↗ </Link>
-
-        <CopyIcon onClick={() => copy(hash)}>
-          {isCopied ? (
-            <TransactionStatusText>
-              <FontAwesomeIcon icon={faCheckCircle} />
-              <TransactionStatusText>Copied</TransactionStatusText>
-            </TransactionStatusText>
-          ) : (
-            <TransactionStatusText>
-              <FontAwesomeIcon icon={faCopy} />
-            </TransactionStatusText>
-          )}
-        </CopyIcon>
+        <Copy />
       </TransactionStatusWrapper>
       {pending ? (
         <ButtonWrapper pending={pending}>
           <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
             <TransactionState pending={pending}>
-              <FontAwesomeIcon id="pending" icon={faCircleNotch} />
+              <Spinner src={Circle} alt="loader" />
               <TransactionStatusText>Pending</TransactionStatusText>
             </TransactionState>
           </Link>
@@ -125,7 +85,7 @@ export default function Info({ hash, pending }) {
         <ButtonWrapper pending={pending}>
           <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
             <TransactionState pending={pending}>
-              <FontAwesomeIcon icon={faCheck} />
+              <Check size="16" />
               <TransactionStatusText>Confirmed</TransactionStatusText>
             </TransactionState>
           </Link>

src/components/WalletModal/Transaction.js

@@ -4,10 +4,9 @@ import { useWeb3Context } from 'web3-react'
 import Copy from './Copy'
 
 import { getEtherscanLink } from '../../utils'
-import { Link } from '../../theme'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleNotch, faCheck } from '@fortawesome/free-solid-svg-icons'
+import { Link, Spinner } from '../../theme'
+import Circle from '../../assets/images/circle.svg'
+import { Check } from 'react-feather'
 
 import { transparentize } from 'polished'
 
@@ -36,7 +35,7 @@ const TransactionWrapper = styled.div`
 `
 
 const TransactionStatusText = styled.span`
-  margin-left: 0.25rem;
+  margin-left: 0.5rem;
 `
 
 const rotate = keyframes`
@@ -49,6 +48,7 @@ const rotate = keyframes`
 `
 
 const TransactionState = styled.div`
+  display: flex;
   background-color: ${({ pending, theme }) =>
     pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
   border-radius: 1.5rem;
@@ -62,12 +62,12 @@ const TransactionState = styled.div`
   #pending {
     animation: 2s ${rotate} linear infinite;
   }
+
   :hover {
     border-color: ${({ pending, theme }) =>
       pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
   }
 `
-
 const ButtonWrapper = styled.div`
   a {
     color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.connectedGreen)};
@@ -81,14 +81,13 @@ export default function Transaction({ hash, pending }) {
     <TransactionWrapper key={hash}>
       <TransactionStatusWrapper>
         <Link href={getEtherscanLink(networkId, hash, 'transaction')}>{hash} ↗ </Link>
-
         <Copy toCopy={hash} />
       </TransactionStatusWrapper>
       {pending ? (
         <ButtonWrapper pending={pending}>
           <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
             <TransactionState pending={pending}>
-              <FontAwesomeIcon id="pending" icon={faCircleNotch} />
+              <Spinner src={Circle} id="pending" />
               <TransactionStatusText>Pending</TransactionStatusText>
             </TransactionState>
           </Link>
@@ -97,7 +96,7 @@ export default function Transaction({ hash, pending }) {
         <ButtonWrapper pending={pending}>
           <Link href={getEtherscanLink(networkId, hash, 'transaction')}>
             <TransactionState pending={pending}>
-              <FontAwesomeIcon icon={faCheck} />
+              <Check size="16" />
               <TransactionStatusText>Confirmed</TransactionStatusText>
             </TransactionState>
           </Link>

src/components/Web3ReactManager/index.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import { useWeb3Context, Connectors } from 'web3-react'
-import styled, { keyframes } from 'styled-components'
+import styled from 'styled-components'
 import { ethers } from 'ethers'
 import { useTranslation } from 'react-i18next'
 import { isMobile } from 'react-device-detect'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+import { Spinner } from '../../theme'
+import Circle from '../../assets/images/circle.svg'
 
 const { Connector } = Connectors
 
@@ -20,20 +21,10 @@ const Message = styled.h2`
   color: ${({ theme }) => theme.uniswapPink};
 `
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`
-const Spinner = styled.div`
+const SpinnerWrapper = styled(Spinner)`
   font-size: 4rem;
 
   svg {
-    animation: 2s ${rotate} linear infinite;
-
     path {
       color: ${({ theme }) => theme.uniswapPink};
     }
@@ -104,9 +95,7 @@ export default function Web3ReactManager({ children }) {
   } else if (!active) {
     return showLoader ? (
       <MessageWrapper>
-        <Spinner>
-          <FontAwesomeIcon icon={faCircleNotch} />
-        </Spinner>
+        <SpinnerWrapper src={Circle} />
       </MessageWrapper>
     ) : null
   } else {

src/components/Web3Status/index.js

@@ -1,17 +1,18 @@
 import React, { useReducer, useEffect, useRef } from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useWeb3Context, Connectors } from 'web3-react'
+import { darken, transparentize } from 'polished'
 import Jazzicon from 'jazzicon'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ethers } from 'ethers'
-import { faCircleNotch, faPlug, faArrowRight } from '@fortawesome/free-solid-svg-icons'
-import { darken } from 'polished'
+import { Activity, ArrowRight } from 'react-feather'
 
-import WalletModal from '../WalletModal'
-import { useAllTransactions } from '../../contexts/Transactions'
 import { shortenAddress } from '../../utils'
 import { useENSName } from '../../hooks'
+import WalletModal from '../WalletModal'
+import { useAllTransactions } from '../../contexts/Transactions'
+import { Spinner } from '../../theme'
+import Circle from '../../assets/images/circle.svg'
 
 const { Connector } = Connectors
 
@@ -56,22 +57,16 @@ const Web3StatusConnected = styled(Web3StatusGeneric)`
   color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.doveGray)};
   border: 1px solid ${({ pending, theme }) => (pending ? theme.royalBlue : theme.mercuryGray)};
   font-weight: 400;
-  :hover,
+  :hover {
+    background-color: ${({ pending, theme }) =>
+      pending ? transparentize(0.9, theme.royalBlue) : transparentize(0.9, theme.mercuryGray)};
+  }
   :focus {
     border: 1px solid
       ${({ pending, theme }) => (pending ? darken(0.1, theme.royalBlue) : darken(0.1, theme.mercuryGray))};
   }
 `
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`
-
 const Text = styled.p`
   flex: 1 1 auto;
   overflow: hidden;
@@ -89,19 +84,22 @@ const Identicon = styled.div`
   background-color: ${({ theme }) => theme.silverGray};
 `
 
-const SpinningIcon = styled(FontAwesomeIcon)`
-  animation: 2s ${rotate} linear infinite;
-  color: ${({ theme }) => theme.royalBlue};
+const NetworkIcon = styled(Activity)`
+  margin-left: 0.25rem;
+  margin-right: 0.5rem;
+  width: 16px;
+  height: 16px;
 `
 
-const RightIcon = styled(FontAwesomeIcon)`
+const ArrowIcon = styled(ArrowRight)`
   margin-left: 0.25rem;
   margin-right: 0.5rem;
+  width: 16px;
+  height: 16px;
 `
 
-const LeftIcon = styled(FontAwesomeIcon)`
-  margin-right: 0.25rem;
-  margin-left: 0.5rem;
+const SpinnerWrapper = styled(Spinner)`
+  margin: 0 0.25rem 0 0.25rem;
 `
 
 const walletModalInitialState = {
@@ -245,21 +243,21 @@ export default function Web3Status() {
       // this is ok because we're guaranteed that the error is a wrong network error
       return (
         <Web3StatusError onClick={onClick}>
+          <NetworkIcon />
           <Text>Wrong Network</Text>
-          <RightIcon icon={faPlug} size={'sm'} />
         </Web3StatusError>
       )
     } else if (!account) {
       return (
         <Web3StatusConnect onClick={onClick}>
           <Text>{t('Connect')}</Text>
-          <RightIcon icon={faArrowRight} size={'sm'} />
+          <ArrowIcon />
         </Web3StatusConnect>
       )
     } else {
       return (
         <Web3StatusConnected onClick={onClick} pending={hasPendingTransactions}>
-          {hasPendingTransactions && <SpinningIcon as={LeftIcon} icon={faCircleNotch} size={'sm'} />}
+          {hasPendingTransactions && <SpinnerWrapper src={Circle} alt="loader" />}
           <Text>{ENSName || shortenAddress(account)}</Text>
           <Identicon ref={ref} />
         </Web3StatusConnected>