aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-08 13:54:26 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-08 13:54:26 +0800
commit1151371e57643662b14c0c940ec558e74a6d1120 (patch)
tree30650b329ab5bd5041373f255cb5e756c46ce606 /packages/instant
parentecb92a44bc5a4b433f2a673fc77199c7b8a6dc18 (diff)
downloaddexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.tar
dexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.tar.gz
dexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.tar.bz2
dexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.tar.lz
dexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.tar.xz
dexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.tar.zst
dexon-sol-tools-1151371e57643662b14c0c940ec558e74a6d1120.zip
feat: add MetaMask sign, refactor Circle
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx2
-rw-r--r--packages/instant/src/components/payment_method.tsx30
-rw-r--r--packages/instant/src/components/ui/circle.tsx19
-rw-r--r--packages/instant/src/style/theme.ts4
4 files changed, 37 insertions, 18 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index c10b1492e..d3043438e 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -85,7 +85,7 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
<Container marginLeft="5px">
<Flex justify="flex-start">
<Container marginRight="10px">
- <Circle diameter={30} fillColor={token.metaData.primaryColor}>
+ <Circle diameter={30} rawColor={token.metaData.primaryColor}>
<Flex height="100%">
<Text fontColor={ColorOption.white} fontSize="8px">
{displaySymbol}
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 4d3daff62..70ad1f96e 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -4,7 +4,9 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
import { PaymentMethodDropdown } from './payment_method_dropdown';
+import { Circle } from './ui/circle';
import { Container } from './ui/container';
+import { Flex } from './ui/flex';
import { Text } from './ui/text';
export interface PaymentMethodProps {}
@@ -14,15 +16,25 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
return (
<Container padding="20px" width="100%">
<Container marginBottom="10px">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.primaryColor}
- fontWeight={600}
- textTransform="uppercase"
- fontSize="14px"
- >
- Payment Method
- </Text>
+ <Flex justify="space-between">
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.primaryColor}
+ fontWeight={600}
+ textTransform="uppercase"
+ fontSize="14px"
+ >
+ Payment Method
+ </Text>
+ <Flex>
+ <Circle color={ColorOption.green} diameter={8} />
+ <Container marginLeft="3px">
+ <Text fontColor={ColorOption.darkGrey} fontSize="12px">
+ MetaMask
+ </Text>
+ </Container>
+ </Flex>
+ </Flex>
</Container>
<PaymentMethodDropdown />
</Container>
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index eec2777d2..cb121992f 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -1,22 +1,25 @@
-import { styled } from '../../style/theme';
+import { ColorOption, styled, Theme, withTheme } from '../../style/theme';
export interface CircleProps {
diameter: number;
- fillColor?: string;
+ rawColor?: string;
+ color?: ColorOption;
+ theme: Theme;
}
-export const Circle =
+export const Circle = withTheme(
styled.div <
- CircleProps >
- `
+ CircleProps >
+ `
width: ${props => props.diameter}px;
height: ${props => props.diameter}px;
- background-color: ${props => props.fillColor};
+ background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
border-radius: 50%;
-`;
+`,
+);
Circle.displayName = 'Circle';
Circle.defaultProps = {
- fillColor: 'white',
+ color: ColorOption.white,
};
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 7917164a1..0bd8ce4e0 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -15,6 +15,8 @@ export enum ColorOption {
white = 'white',
lightOrange = 'lightOrange',
darkOrange = 'darkOrange',
+ green = 'green',
+ red = 'red',
}
export const theme: Theme = {
@@ -28,6 +30,8 @@ export const theme: Theme = {
white: 'white',
lightOrange: '#F9F2ED',
darkOrange: '#F2994C',
+ green: '#3CB34F',
+ red: '#D00000',
};
export const transparentWhite = 'rgba(255,255,255,0.3)';