feat: add MetaMask sign, refactor Circle

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)';