aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-10 05:56:04 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-10 05:56:04 +0800
commit3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82 (patch)
tree428527b0480751423bb89fb03eadd3dbd1480056 /packages/instant/src/components
parent3f1f19e344c1f79accf38572dd0f7c29308954e7 (diff)
downloaddexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar
dexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.gz
dexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.bz2
dexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.lz
dexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.xz
dexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.tar.zst
dexon-sol-tools-3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82.zip
feat: create connect metamask
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/payment_method.tsx22
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