diff options
Diffstat (limited to 'packages/instant/src/components')
4 files changed, 46 insertions, 37 deletions
diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx index 1fe8df807..f5a7be81c 100644 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -2,11 +2,10 @@ import * as React from 'react'; export interface CoinbaseWalletLogoProps { width?: number; - height?: number; } -export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width, height }) => ( - <svg width={width} height={height} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg"> +export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => ( + <svg width={width} viewBox="0 0 164 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fillRule="evenodd" clipRule="evenodd" @@ -30,5 +29,4 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo'; CoinbaseWalletLogo.defaultProps = { width: 164, - height: 28, }; diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 6cddb81f5..0700e9051 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -48,7 +48,7 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane break; } return { - image: <CoinbaseWalletLogo width={246} height={42} />, + image: <CoinbaseWalletLogo width={246} />, description, moreInfoSettings: { href: COINBASE_WALLET_SITE_URL, diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 49ec22164..0f9f3ebfa 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,7 +3,9 @@ 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'; @@ -11,10 +13,12 @@ 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; } @@ -62,7 +66,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { <Circle diameter={8} color={circleColor} /> <Container marginLeft="3px"> <Text fontColor={ColorOption.darkGrey} fontSize="12px"> - MetaMask + {this.props.walletName} </Text> </Container> </React.Fragment> @@ -72,6 +76,9 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { }; private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; + const isMobile = envUtil.isMobileOperatingSystem(); + // TODO: Use Toshi logo + const logo = isMobile ? undefined : <MetaMaskLogo width={19} height={18} />; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. @@ -82,16 +89,13 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { onClick={this.props.onUnlockWalletClick} image={<Icon width={13} icon="lock" color={ColorOption.black} />} > - Please Unlock MetaMask + Please Unlock {this.props.walletName} </WalletPrompt> ); case AccountState.None: return ( - <WalletPrompt - onClick={this.props.onInstallWalletClick} - image={<MetaMaskLogo width={19} height={18} />} - > - Install MetaMask + <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo}> + {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} </WalletPrompt> ); case AccountState.Ready: @@ -105,28 +109,3 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { } }; } - -interface WalletPromptProps { - image: React.ReactNode; - onClick?: () => void; -} - -const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => ( - <Container - padding="14.5px" - border={`1px solid ${ColorOption.darkOrange}`} - backgroundColor={ColorOption.lightOrange} - width="100%" - borderRadius="4px" - onClick={onClick} - cursor={onClick ? 'pointer' : undefined} - boxShadowOnHover={!!onClick} - > - <Flex> - <Container marginRight="10px">{image}</Container> - <Text fontSize="16px" fontColor={ColorOption.darkOrange}> - {children} - </Text> - </Flex> - </Container> -); diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx new file mode 100644 index 000000000..cd0a7828b --- /dev/null +++ b/packages/instant/src/components/wallet_prompt.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Text } from './ui/text'; + +export interface WalletPromptProps { + image: React.ReactNode; + onClick?: () => void; +} + +export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => ( + <Container + padding="14.5px" + border={`1px solid ${ColorOption.darkOrange}`} + backgroundColor={ColorOption.lightOrange} + width="100%" + borderRadius="4px" + onClick={onClick} + cursor={onClick ? 'pointer' : undefined} + boxShadowOnHover={!!onClick} + > + <Flex> + <Container marginRight="10px">{image}</Container> + <Text fontSize="16px" fontColor={ColorOption.darkOrange}> + {children} + </Text> + </Flex> + </Container> +); |