diff --git a/package.json b/package.json index 0995b6b61c9..6aef27e8039 100644 --- a/package.json +++ b/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", diff --git a/src/assets/images/circle.svg b/src/assets/images/circle.svg new file mode 100644 index 00000000000..659f879a60b --- /dev/null +++ b/src/assets/images/circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/WalletModal/Copy.js b/src/components/WalletModal/Copy.js index b9505e5977c..883f4c57e70 100644 --- a/src/components/WalletModal/Copy.js +++ b/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 ( setCopied(toCopy)}> {isCopied ? ( - + Copied ) : ( - + )} diff --git a/src/components/WalletModal/Info.js b/src/components/WalletModal/Info.js index 16c52ffadb5..caf35c3e108 100644 --- a/src/components/WalletModal/Info.js +++ b/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 ( {hash} ↗ - - copy(hash)}> - {isCopied ? ( - - - Copied - - ) : ( - - - - )} - + {pending ? ( - + Pending @@ -125,7 +85,7 @@ export default function Info({ hash, pending }) { - + Confirmed diff --git a/src/components/WalletModal/Transaction.js b/src/components/WalletModal/Transaction.js index dc8eabc75e0..8629eb68110 100644 --- a/src/components/WalletModal/Transaction.js +++ b/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 }) { {hash} ↗ - {pending ? ( - + Pending @@ -97,7 +96,7 @@ export default function Transaction({ hash, pending }) { - + Confirmed diff --git a/src/components/Web3ReactManager/index.js b/src/components/Web3ReactManager/index.js index 9b1dc52c86e..9ce93d49ab9 100644 --- a/src/components/Web3ReactManager/index.js +++ b/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 ? ( - - - + ) : null } else { diff --git a/src/components/Web3Status/index.js b/src/components/Web3Status/index.js index fc7d5bf7910..0b3461fe1ba 100644 --- a/src/components/Web3Status/index.js +++ b/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 ( + Wrong Network - ) } else if (!account) { return ( {t('Connect')} - + ) } else { return ( - {hasPendingTransactions && } + {hasPendingTransactions && } {ENSName || shortenAddress(account)} diff --git a/src/theme/components.js b/src/theme/components.js index 81dc92410f6..8f1d8a8e338 100644 --- a/src/theme/components.js +++ b/src/theme/components.js @@ -1,4 +1,4 @@ -import styled from 'styled-components' +import styled, { keyframes } from 'styled-components' import { lighten, darken } from 'polished' export const Button = styled.button.attrs(({ warning, theme }) => ({ @@ -70,3 +70,18 @@ export const BorderlessInput = styled.input` color: ${({ theme }) => theme.mercuryGray}; } ` + +const rotate = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +` + +export const Spinner = styled.img` + animation: 2s ${rotate} linear infinite; + width: 16px; + height: 16px; +` diff --git a/yarn.lock b/yarn.lock index 3a17f4cfc68..f7999b9a185 100644 --- a/yarn.lock +++ b/yarn.lock @@ -923,41 +923,6 @@ version "0.7.3" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f" -"@fortawesome/fontawesome-common-types@^0.2.18": - version "0.2.18" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz#c0d8f073a5116b2de0a2c8a7aba66093a6956ce7" - -"@fortawesome/fontawesome-svg-core@^1.2.18": - version "1.2.18" - resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.18.tgz#c26cbded461895ebe260f0dea771ca29d8cb3517" - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.18" - -"@fortawesome/free-brands-svg-icons@^5.8.2": - version "5.8.2" - resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz#e68a509c986d5d197cc5bd9ae8d966eff513468d" - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.18" - -"@fortawesome/free-regular-svg-icons@^5.8.2": - version "5.8.2" - resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.2.tgz#f61c603c73695a41bcee9d6f9d44e2ca4829f151" - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.18" - -"@fortawesome/free-solid-svg-icons@^5.8.2": - version "5.8.2" - resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz#aa2f042f73aca43eb4a26149907e63bf26d2e31c" - dependencies: - "@fortawesome/fontawesome-common-types" "^0.2.18" - -"@fortawesome/react-fontawesome@^0.1.4": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz#18d61d9b583ca289a61aa7dccc05bd164d6bc9ad" - dependencies: - humps "^2.0.1" - prop-types "^15.5.10" - "@hapi/address@2.x.x": version "2.0.0" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a" @@ -4718,7 +4683,6 @@ ethereumjs-wallet@0.6.2: ethers@^4.0.28: version "4.0.28" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.28.tgz#74d9acb57f4ede3337c8d60476b38d0fe646af01" - integrity sha512-5JTHrPoFLqf+xCAI3pKwXSOgWBSJJoAUdPtPLr1ZlKbSKiIFMkPlRNovmZS3jhIw5sHW1YoVWOaJ6ZR2gKRbwg== dependencies: "@types/node" "^10.3.2" aes-js "3.0.0" @@ -5804,10 +5768,6 @@ https-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" -humps@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa" - i18next-browser-languagedetector@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-3.0.1.tgz#a47c43176e8412c91e808afb7c6eb5367649aa8e" @@ -8986,7 +8946,7 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" -prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" dependencies: @@ -9260,6 +9220,10 @@ react-error-overlay@^5.1.6: version "5.1.6" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d" +react-feather@^1.1.6: + version "1.1.6" + resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.6.tgz#2a547e3d5cd5e383d3da0128d593cbdb3c1b32f7" + react-focus-lock@^1.17.7: version "1.19.1" resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"