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:
parent
fe82dcf2e1
commit
794bbd88b2
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user