aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-10 06:57:29 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-10 06:57:29 +0800
commitb5988277087f0ee39109972d73ca94368d6dd4b9 (patch)
tree8e18c131ac490cb612f8b4c20cfb45ec0bcfde72 /packages/instant/src/components
parent128abb39dd635599841643ca65bfc286aabaa063 (diff)
downloaddexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.tar
dexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.tar.gz
dexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.tar.bz2
dexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.tar.lz
dexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.tar.xz
dexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.tar.zst
dexon-sol-tools-b5988277087f0ee39109972d73ca94368d6dd4b9.zip
feat: implement basic StandardModalContent with accompanying InstallWalletPanelContent
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/install_wallet_panel_content.tsx22
-rw-r--r--packages/instant/src/components/payment_method.tsx2
-rw-r--r--packages/instant/src/components/standard_panel_content.tsx61
-rw-r--r--packages/instant/src/components/standard_sliding_panel.tsx5
-rw-r--r--packages/instant/src/components/ui/button.tsx1
5 files changed, 87 insertions, 4 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',