Skip to content

I
interface
Commit da334237 authored by Clayton Lin's avatar Clayton Lin Committed by GitHub
Browse files
Options

style: build new connecting pending state (#3825) 

* style: build new connecting pending state

* use currentcolor rather than direct theme text1

* remove unnecessary margin usage
parent bd454553
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 66 deletions
src/components/WalletModal/PendingView.tsx
View file @ da334237
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { darken } from 'polished' import { darken } from 'polished'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { ThemedText } from 'theme'
import { AbstractConnector } from 'web3-react-abstract-connector' import { AbstractConnector } from 'web3-react-abstract-connector'
import { injected } from '../../connectors'
import { SUPPORTED_WALLETS } from '../../constants/wallet'
import Loader from '../Loader' import Loader from '../Loader'
import Option from './Option'
const PendingSection = styled.div` const PendingSection = styled.div`
${({ theme }) => theme.flexColumnNoWrap}; ${({ theme }) => theme.flexColumnNoWrap};
...@@ -18,18 +16,19 @@ const PendingSection = styled.div` ...@@ -18,18 +16,19 @@ const PendingSection = styled.div`
} }
` `
const StyledLoader = styled(Loader)` const LoaderContainer = styled.div`
margin-right: 1rem; margin: 16px 0;
${({ theme }) => theme.flexRowNoWrap};
align-items: center;
justify-content: center;
` `
const LoadingMessage = styled.div<{ error?: boolean }>` const LoadingMessage = styled.div<{ error?: boolean }>`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexRowNoWrap};
align-items: center; align-items: center;
justify-content: flex-start; justify-content: center;
border-radius: 12px; border-radius: 12px;
margin-bottom: 20px;
color: ${({ theme, error }) => (error ? theme.red1 : 'inherit')}; color: ${({ theme, error }) => (error ? theme.red1 : 'inherit')};
border: 1px solid ${({ theme, error }) => (error ? theme.red1 : theme.text4)};
& > * { & > * {
padding: 1rem; padding: 1rem;
...@@ -59,7 +58,7 @@ const ErrorButton = styled.div` ...@@ -59,7 +58,7 @@ const ErrorButton = styled.div`
` `
const LoadingWrapper = styled.div` const LoadingWrapper = styled.div`
${({ theme }) => theme.flexRowNoWrap}; ${({ theme }) => theme.flexColumnNoWrap};
align-items: center; align-items: center;
justify-content: center; justify-content: center;
` `
...@@ -75,8 +74,6 @@ export default function PendingView({ ...@@ -75,8 +74,6 @@ export default function PendingView({
setPendingError: (error: boolean) => void setPendingError: (error: boolean) => void
tryActivation: (connector: AbstractConnector) => void tryActivation: (connector: AbstractConnector) => void
}) { }) {
const isMetamask = window?.ethereum?.isMetaMask
return ( return (
<PendingSection> <PendingSection>
<LoadingMessage error={error}> <LoadingMessage error={error}>
...@@ -97,37 +94,16 @@ export default function PendingView({ ...@@ -97,37 +94,16 @@ export default function PendingView({
</ErrorGroup> </ErrorGroup>
) : ( ) : (
<> <>
<StyledLoader /> <ThemedText.Black fontSize={20} marginY={16}>
<Trans>Initializing...</Trans> <LoaderContainer>
<Loader stroke="currentColor" size="32px" />
</LoaderContainer>
<Trans>Connecting...</Trans>
</ThemedText.Black>
</> </>
)} )}
</LoadingWrapper> </LoadingWrapper>
</LoadingMessage> </LoadingMessage>
{Object.keys(SUPPORTED_WALLETS).map((key) => {
const option = SUPPORTED_WALLETS[key]
if (option.connector === connector) {
if (option.connector === injected) {
if (isMetamask && option.name !== 'MetaMask') {
return null
}
if (!isMetamask && option.name === 'MetaMask') {
return null
}
}
return (
<Option
id={`connect-${key}`}
key={key}
clickable={false}
color={option.color}
header={option.name}
subheader={option.description}
icon={option.iconURL}
/>
)
}
return null
})}
</PendingSection> </PendingSection>
) )
} }
src/components/WalletModal/index.tsx
View file @ da334237
...@@ -377,6 +377,14 @@ export default function WalletModal({ ...@@ -377,6 +377,14 @@ export default function WalletModal({
<ContentWrapper> <ContentWrapper>
<AutoColumn gap="16px"> <AutoColumn gap="16px">
{walletView === WALLET_VIEWS.PENDING && (
<PendingView
connector={pendingWallet}
error={pendingError}
setPendingError={setPendingError}
tryActivation={tryActivation}
/>
)}
<LightCard> <LightCard>
<AutoRow style={{ flexWrap: 'nowrap' }}> <AutoRow style={{ flexWrap: 'nowrap' }}>
<ThemedText.Black fontSize={14}> <ThemedText.Black fontSize={14}>
...@@ -389,35 +397,30 @@ export default function WalletModal({ ...@@ -389,35 +397,30 @@ export default function WalletModal({
</ThemedText.Black> </ThemedText.Black>
</AutoRow> </AutoRow>
</LightCard> </LightCard>
{walletView === WALLET_VIEWS.PENDING ? ( {walletView !== WALLET_VIEWS.PENDING && (
<PendingView <>
connector={pendingWallet} <OptionGrid>{getOptions()}</OptionGrid>
error={pendingError} <LinkCard padding=".5rem" $borderRadius=".75rem" onClick={() => setWalletView(WALLET_VIEWS.LEGAL)}>
setPendingError={setPendingError} <RowBetween>
tryActivation={tryActivation} <AutoRow gap="4px">
/> <Info size={20} />
) : ( <ThemedText.Label fontSize={14}>
<OptionGrid>{getOptions()}</OptionGrid> <Trans>How this app uses APIs</Trans>
</ThemedText.Label>
</AutoRow>
<ArrowRight size={16} />
</RowBetween>
</LinkCard>
<ThemedText.Black fontSize={14}>
<ExternalLink href="https://help.uniswap.org/en/articles/5391525-what-is-a-wallet">
<Row justify="center" alignItems="center">
<Trans>Learn more about wallets</Trans>
<ArrowRight size={16} />
</Row>
</ExternalLink>
</ThemedText.Black>
</>
)} )}
<LinkCard padding=".5rem" $borderRadius=".75rem" onClick={() => setWalletView(WALLET_VIEWS.LEGAL)}>
<RowBetween>
<AutoRow gap="4px">
<Info size={20} />
<ThemedText.Label fontSize={14}>
<Trans>How this app uses APIs</Trans>
</ThemedText.Label>
</AutoRow>
<ArrowRight size={16} />
</RowBetween>
</LinkCard>
<ThemedText.Black fontSize={14}>
<ExternalLink href="https://help.uniswap.org/en/articles/5391525-what-is-a-wallet">
<Row justify="center" alignItems="center">
<Trans>Learn more about wallets</Trans>
<ArrowRight size={16} />
</Row>
</ExternalLink>
</ThemedText.Black>
</AutoColumn> </AutoColumn>
</ContentWrapper> </ContentWrapper>
</UpperSection> </UpperSection>
......
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