diff options
Diffstat (limited to 'packages/website/ts/components/wallet/body_overlay.tsx')
-rw-r--r-- | packages/website/ts/components/wallet/body_overlay.tsx | 136 |
1 files changed, 0 insertions, 136 deletions
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx deleted file mode 100644 index 3795f0eaa..000000000 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Blockchain } from 'ts/blockchain'; -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Island } from 'ts/components/ui/island'; -import { Text } from 'ts/components/ui/text'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; -import { AccountState, ProviderType } from 'ts/types'; -import { utils } from 'ts/utils/utils'; - -const METAMASK_IMG_SRC = '/images/metamask_icon.png'; -const COINBASE_WALLET_IMG_SRC = '/images/coinbase_wallet_logo.png'; - -export interface BodyOverlayProps { - dispatcher: Dispatcher; - userAddress: string; - injectedProviderName: string; - providerType: ProviderType; - onToggleLedgerDialog: () => void; - blockchain?: Blockchain; - blockchainIsLoaded: boolean; -} - -interface BodyOverlayState {} - -export class BodyOverlay extends React.Component<BodyOverlayProps, BodyOverlayState> { - public render(): React.ReactNode { - const accountState = this._getAccountState(); - switch (accountState) { - case AccountState.Locked: - return <LockedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />; - case AccountState.Disconnected: - return <DisconnectedOverlay onUseDifferentWalletClicked={this.props.onToggleLedgerDialog} />; - case AccountState.Ready: - case AccountState.Loading: - default: - return null; - } - } - private _isBlockchainReady(): boolean { - return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); - } - private _getAccountState(): AccountState { - return utils.getAccountState( - this._isBlockchainReady(), - this.props.providerType, - this.props.injectedProviderName, - this.props.userAddress, - ); - } -} - -interface LockedOverlayProps { - className?: string; - onUseDifferentWalletClicked?: () => void; -} -const PlainLockedOverlay: React.StatelessComponent<LockedOverlayProps> = ({ - className, - onUseDifferentWalletClicked, -}) => ( - <div className={className}> - <Container - className="flex flex-column items-center" - marginBottom="24px" - marginTop="24px" - marginLeft="48px" - marginRight="48px" - > - <Image src={METAMASK_IMG_SRC} height="70px" /> - <Container marginTop="12px"> - <Text fontColor={colors.metaMaskOrange} fontSize="16px" fontWeight="bold"> - Please Unlock MetaMask - </Text> - </Container> - <UseDifferentWallet fontColor={colors.darkGrey} onClick={onUseDifferentWalletClicked} /> - </Container> - </div> -); -const LockedOverlay = styled(PlainLockedOverlay)` - background: ${colors.metaMaskTransparentOrange}; - border: 1px solid ${colors.metaMaskOrange}; - border-radius: 10px; -`; - -interface DisconnectedOverlayProps { - onUseDifferentWalletClicked?: () => void; -} -const DisconnectedOverlay = (props: DisconnectedOverlayProps) => { - return ( - <div className="flex flex-column items-center"> - <GetWalletCallToAction /> - {!utils.isMobileOperatingSystem() && ( - <UseDifferentWallet fontColor={colors.mediumBlue} onClick={props.onUseDifferentWalletClicked} /> - )} - </div> - ); -}; - -interface UseDifferentWallet { - fontColor: string; - onClick?: () => void; -} -const UseDifferentWallet = (props: UseDifferentWallet) => { - return ( - <Container marginTop="12px"> - <Text fontColor={props.fontColor} fontSize="16px" textDecorationLine="underline" onClick={props.onClick}> - Use a different wallet - </Text> - </Container> - ); -}; - -const GetWalletCallToAction = () => { - const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile(); - const imageUrl = isOnMobile ? COINBASE_WALLET_IMG_SRC : METAMASK_IMG_SRC; - const text = isOnMobile ? 'Get Coinbase Wallet' : 'Get MetaMask Wallet'; - return ( - <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}> - <Island - className="flex items-center py1 px2" - style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }} - > - <Image src={imageUrl} width="28px" borderRadius="22%" /> - <Container marginLeft="8px" marginRight="12px"> - <Text fontColor={colors.white} fontSize="16px" fontWeight={500}> - {text} - </Text> - </Container> - </Island> - </a> - ); -}; |