diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 05:56:04 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 05:56:04 +0800 |
| commit | 3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82 (patch) | |
| tree | 428527b0480751423bb89fb03eadd3dbd1480056 /packages/instant/src/components | |
| parent | 3f1f19e344c1f79accf38572dd0f7c29308954e7 (diff) | |
| download | dexon-0x-contracts-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.gz dexon-0x-contracts-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.zst dexon-0x-contracts-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.zip | |
feat: create connect metamask
Diffstat (limited to 'packages/instant/src/components')
| -rw-r--r-- | packages/instant/src/components/payment_method.tsx | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index f50c9bf3c..dcf68da53 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; +import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; import { Container } from './ui/container'; @@ -20,7 +21,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { public render(): React.ReactNode { return ( <Container padding="20px" width="100%"> - <Container marginBottom="10px"> + <Container marginBottom="12px"> <Flex justify="space-between"> <Text letterSpacing="1px" @@ -77,7 +78,24 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> { case AccountState.Error: case AccountState.Locked: case AccountState.None: - return 'connect your wallet'; + return ( + <Container + padding="12px" + border={`1px solid ${ColorOption.darkOrange}`} + backgroundColor={ColorOption.lightOrange} + width="100%" + borderRadius="4px" + > + <Flex> + <Container marginRight="10px"> + <MetaMaskLogo width={19} height={18} /> + </Container> + <Text fontSize="16px" fontColor={ColorOption.darkOrange}> + Connect MetaMask + </Text> + </Flex> + </Container> + ); case AccountState.Ready: return ( <PaymentMethodDropdown |