import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; import { envUtil } from '../util/env'; import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; import { Text } from './ui/text'; import { WalletPrompt } from './wallet_prompt'; export interface PaymentMethodProps { account: Account; network: Network; walletName: string; onInstallWalletClick: () => void; onUnlockWalletClick: () => void; } export class PaymentMethod extends React.Component { public render(): React.ReactNode { return ( {this._renderTitleText()} {this._renderTitleLabel()} {this._renderMainContent()} ); } private readonly _renderTitleText = (): string => { const { account } = this.props; switch (account.state) { case AccountState.Loading: return 'loading...'; case AccountState.Locked: case AccountState.None: return 'connect your wallet'; case AccountState.Ready: return 'payment method'; } }; private readonly _renderTitleLabel = (): React.ReactNode => { const { account } = this.props; if (account.state === AccountState.Ready || account.state === AccountState.Locked) { const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red; return ( {this.props.walletName} ); } return null; }; private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; const isMobile = envUtil.isMobileOperatingSystem(); const logo = isMobile ? : ; const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange; const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange; const colors = { primaryColor, secondaryColor }; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. return ; case AccountState.Locked: return ( } {...colors} > Please Unlock {this.props.walletName} ); case AccountState.None: return ( {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} ); case AccountState.Ready: return ( ); } }; }