diff options
author | Fabio Berger <me@fabioberger.com> | 2018-07-02 17:12:01 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-07-02 17:12:01 +0800 |
commit | de9f0732a09893f035ce8a7e8e01fa1141882a3a (patch) | |
tree | 63d1f0bbc6f9d65576e5d12b379378700eb88567 /packages/website/ts/components/wallet/body_overlay.tsx | |
parent | 20acdbf6c3ba6a62e87a9a496021cb6482c0c03a (diff) | |
parent | b9b00e10d39c3c84bc72892ef37f1313e904414d (diff) | |
download | dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.gz dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.bz2 dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.lz dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.xz dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.zst dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.zip |
Merge branch 'v2-prototype' into fix/five_decimal_scenario
* v2-prototype: (75 commits)
Update relayer grid tiles to use Text
Fix build
Update file structure
Update 2.0.0 artifacts
Move ledgerhq module declarations to typescript-typings
Export LedgerEthereumClient type in subproviders
Update artifacts
Add logging and updated artifacts
Fix migrations
Run prettier
Add Kovan artifacts
Use ledger subprovider
Add Kovan migrations
Remove state variable from Link component in Portal
Make registerAssetProxy append only
Update staging api link
Change getTransactionReceipt to awaitTransactionMined
Move /docs route to the end
Remove extra call to scrollIntoView for wallet in onboarding
Update expectRevertReasonOrAlwaysFailingTransactionAsync to check status codes
...
Diffstat (limited to 'packages/website/ts/components/wallet/body_overlay.tsx')
-rw-r--r-- | packages/website/ts/components/wallet/body_overlay.tsx | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx new file mode 100644 index 000000000..5ced704f9 --- /dev/null +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -0,0 +1,146 @@ +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, BrowserType, ProviderType } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; + +const METAMASK_IMG_SRC = '/images/metamask_icon.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"> + <GetMetaMask /> + <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 GetMetaMask = () => { + const browserType = utils.getBrowserType(); + let extensionLink; + switch (browserType) { + case BrowserType.Chrome: + extensionLink = constants.URL_METAMASK_CHROME_STORE; + break; + case BrowserType.Firefox: + extensionLink = constants.URL_METAMASK_FIREFOX_STORE; + break; + case BrowserType.Opera: + extensionLink = constants.URL_METAMASK_OPERA_STORE; + break; + default: + extensionLink = constants.URL_METAMASK_HOMEPAGE; + } + return ( + <a href={extensionLink} target="_blank" style={{ textDecoration: 'none' }}> + <Island + className="flex items-center py1 px2" + style={{ height: 28, borderRadius: 28, backgroundColor: colors.mediumBlue }} + > + <Image src={METAMASK_IMG_SRC} width="28px" /> + <Container marginLeft="8px" marginRight="12px"> + <Text fontColor={colors.white} fontSize="16px" fontWeight={500}> + Get MetaMask Wallet + </Text> + </Container> + </Island> + </a> + ); +}; |