Skip to content

I
interface
Commit d206bd40 authored by Callil Capuozzo's avatar Callil Capuozzo Committed by Noah Zinsmeister
Browse files
Options

Feather icons (#314) 

* Remove fontawesome
parent ad7b647d
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 153 deletions
src/assets/images/circle.svg 0 → 100644
View file @ d206bd40
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5" stroke="#2F80ED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/components/WalletModal/Copy.js
View file @ d206bd40
......@@ -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
View file @ d206bd40
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
View file @ d206bd40
......@@ -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
View file @ d206bd40
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
View file @ d206bd40
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>
......
src/theme/components.js
View file @ d206bd40
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;
`
yarn.lock
View file @ d206bd40
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment