Update to loading state for injected desktop browsers (#532)

* update injected loading state

* update styles

* update injected connector

* center spinner
This commit is contained in:
Ian Lapham 2019-12-05 14:58:22 -05:00 committed by Noah Zinsmeister
parent fe82dcf2e1
commit 794bbd88b2
4 changed files with 33 additions and 29 deletions

@ -10,7 +10,7 @@
"@uniswap/sdk": "^1.0.0-beta.4",
"@web3-react/core": "6.0.0-beta.19",
"@web3-react/fortmatic-connector": "6.0.0-beta.19",
"@web3-react/injected-connector": "6.0.0-beta.20",
"@web3-react/injected-connector": "^6.0.0-beta.21",
"@web3-react/network-connector": "6.0.0-beta.19",
"@web3-react/portis-connector": "6.0.0-beta.19",
"@web3-react/walletconnect-connector": "6.0.0-beta.19",

@ -64,21 +64,15 @@ const CircleWrapper = styled.div`
const HeaderText = styled.div`
${({ theme }) => theme.flexRowNoWrap};
color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : props.color)};
color: ${props => (props.color === 'blue' ? ({ theme }) => theme.royalBlue : ({ theme }) => theme.textColor)};
font-size: 1rem;
font-weight: 500;
${({ theme }) => theme.mediaWidth.upToMedium`
font-size: 12px;
`};
`
const SubHeader = styled.div`
color: ${({ theme }) => theme.textColor};
margin-top: 10px;
font-size: 12px;
${({ theme }) => theme.mediaWidth.upToMedium`
font-size: 10px;
`};
`
const IconWrapper = styled.div`

@ -64,13 +64,20 @@ const ErrorButton = styled.div`
}
`
const LoadingWrapper = styled.div`
${({ theme }) => theme.flexRowNoWrap};
align-items: center;
justify-content: center;
`
export default function PendingView({ uri = '', size, connector, error = false, setPendingError, tryActivation }) {
const isMetamask = window.ethereum && window.ethereum.isMetaMask
return (
<PendingSection>
{!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
<LoadingMessage error={error}>
<div>
<LoadingWrapper>
{!error && <SpinnerWrapper src={Circle} />}
{error ? (
<ErrorGroup>
@ -89,28 +96,31 @@ export default function PendingView({ uri = '', size, connector, error = false,
) : (
'Initializing...'
)}
</div>
</LoadingWrapper>
</LoadingMessage>
{!error && connector === walletconnect && <WalletConnectData size={size} uri={uri} />}
{Object.keys(SUPPORTED_WALLETS).map(key => {
const option = SUPPORTED_WALLETS[key]
if (option.connector === connector) {
if (option.connector === injected && isMetamask && option.name !== 'MetaMask') {
return null
} else {
return (
<Option
key={key}
clickable={false}
color={option.color}
header={option.name}
subheader={option.description}
icon={require('../../assets/images/' + option.iconName)}
/>
)
if (option.connector === injected) {
if (isMetamask && option.name !== 'MetaMask') {
return null
}
if (!isMetamask && option.name === 'MetaMask') {
return null
}
}
return (
<Option
key={key}
clickable={false}
color={option.color}
header={option.name}
subheader={option.description}
icon={require('../../assets/images/' + option.iconName)}
/>
)
}
return true
return null
})}
</PendingSection>
)

@ -1922,10 +1922,10 @@
fortmatic "^1.0.0"
tiny-invariant "^1.0.6"
"@web3-react/injected-connector@6.0.0-beta.20":
version "6.0.0-beta.20"
resolved "https://registry.yarnpkg.com/@web3-react/injected-connector/-/injected-connector-6.0.0-beta.20.tgz#b04787a4f036eaa6eb4c5ea327bc941a9383303e"
integrity sha512-uXVgSn8qUUEFd0figiaxHY9yF5RenpHx4sUDxTjAZrSUwkg2jPBoV7BjPcXPP2LGwqVzFDL4059usNXSV1FVqg==
"@web3-react/injected-connector@^6.0.0-beta.21":
version "6.0.0-beta.21"
resolved "https://registry.yarnpkg.com/@web3-react/injected-connector/-/injected-connector-6.0.0-beta.21.tgz#6f200dbfe2fb212b79027b48c510246c6eba8bfd"
integrity sha512-B83mz+8uCSyjqndA+E72FffXj29VlBMNey4aNjMsXkcgjgOOhcYQ8e0LZjZo48fdetYuXD4ZimqnGicb3jtbXg==
dependencies:
"@web3-react/abstract-connector" "^6.0.0-beta.19"
"@web3-react/types" "^6.0.0-beta.19"