diff options
6 files changed, 88 insertions, 5 deletions
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx new file mode 100644 index 000000000..41b8ec74b --- /dev/null +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { MetaMaskLogo } from './meta_mask_logo'; +import { StandardPanelContent } from './standard_panel_content'; +import { Button } from './ui/button'; + +export interface InstallWalletPanelContentProps {} + +export const InstallWalletPanelContent: React.StatelessComponent<InstallWalletPanelContentProps> = () => ( + <StandardPanelContent + image={<MetaMaskLogo width={85} height={80} />} + title="Install MetaMask" + description="Please install the MetaMask wallet extension from the Chrome Store." + action={ + <Button width="100%" fontSize="16px" fontColor={ColorOption.white} backgroundColor={ColorOption.darkOrange}> + Get Chrome Extension + </Button> + } + /> +); diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 1d8661921..9bd1f8104 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -93,7 +93,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { } }; private readonly _openInstallWalletPanel = () => { - this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallMetaMask); + this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet); }; } diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx new file mode 100644 index 000000000..da851b232 --- /dev/null +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -0,0 +1,61 @@ +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 MoreInfoSettings { + text: string; + href: string; +} + +export interface StandardPanelContentProps { + image: React.ReactNode; + title: string; + description: string; + moreInfoSettings?: MoreInfoSettings; + action: React.ReactNode; +} + +const spacingBetweenPx = '20px'; + +export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({ + image, + title, + description, + moreInfoSettings, + action, +}) => ( + <Container height="100%"> + <Flex direction="column" height="calc(100% - 55px)"> + <Container marginBottom={spacingBetweenPx}>{image}</Container> + <Container marginBottom={spacingBetweenPx}> + <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}> + {title} + </Text> + </Container> + <Container marginBottom={spacingBetweenPx}> + <Text fontSize="14px" fontColor={ColorOption.grey} center={true}> + {description} + </Text> + </Container> + <Container marginBottom={spacingBetweenPx}> + {moreInfoSettings && ( + <a href={moreInfoSettings.href}> + <Text + center={true} + fontSize="13px" + textDecorationLine="underline" + fontColor={ColorOption.lightGrey} + > + {moreInfoSettings.text}> + </Text> + </a> + )} + </Container> + </Flex> + <Container>{action}</Container> + </Container> +); diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx index 6d31f3e3a..9409d9664 100644 --- a/packages/instant/src/components/standard_sliding_panel.tsx +++ b/packages/instant/src/components/standard_sliding_panel.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { SlideAnimationState, StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types'; +import { InstallWalletPanelContent } from './install_wallet_panel_content'; import { SlidingPanel } from './sliding_panel'; export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings { @@ -19,8 +20,8 @@ export class StandardSlidingPanel extends React.Component<StandardSlidingPanelPr } private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => { switch (content) { - case StandardSlidingPanelContent.InstallMetaMask: - return 'Install MetaMask'; + case StandardSlidingPanelContent.InstallWallet: + return <InstallWalletPanelContent />; default: return null; } diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx index b90221bf4..d0b1bb508 100644 --- a/packages/instant/src/components/ui/button.tsx +++ b/packages/instant/src/components/ui/button.tsx @@ -64,7 +64,6 @@ export const Button = styled(PlainButton)` Button.defaultProps = { backgroundColor: ColorOption.primaryColor, - borderColor: ColorOption.primaryColor, width: 'auto', isDisabled: false, padding: '.6em 1.2em', diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 6438aba01..c45286640 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -130,7 +130,7 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export enum StandardSlidingPanelContent { None = 'NONE', - InstallMetaMask = 'INSTALL_META_MASK', + InstallWallet = 'INSTALL_WALLET', } export interface StandardSlidingPanelSettings { |