aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/payment_method.tsx64
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx3
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts21
3 files changed, 57 insertions, 31 deletions
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 8c0b47d72..a9bbef518 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
-import { Network } from '../types';
+import { Account, Network } from '../types';
import { PaymentMethodDropdown } from './payment_method_dropdown';
import { Circle } from './ui/circle';
@@ -11,35 +11,39 @@ import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Text } from './ui/text';
-export interface PaymentMethodProps {}
+export interface PaymentMethodProps {
+ account: Account;
+}
-export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = () => (
- <Container padding="20px" width="100%">
- <Container marginBottom="10px">
- <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>
+export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = ({ account }) => {
+ return (
+ <Container padding="20px" width="100%">
+ <Container marginBottom="10px">
+ <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>
- </Flex>
+ </Container>
+ <PaymentMethodDropdown
+ accountAddress={'231312423s432'}
+ accountEthBalanceInWei={new BigNumber(10500000000000000000)}
+ network={Network.Mainnet}
+ />
</Container>
- <PaymentMethodDropdown
- accountAddress="0xa1b2c3d4e5f6g7h8j9k10"
- accountEthBalanceInWei={new BigNumber(10500000000000000000)}
- network={Network.Mainnet}
- />
- </Container>
-);
+ );
+};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index f96174b63..6412c9c66 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
+import { ConnectedAccountPaymentMethod } from '../containers/connected_account_payment_method';
import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details';
import { LatestError } from '../containers/latest_error';
@@ -88,7 +89,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
return <SelectedAssetBuyOrderProgress />;
}
if (orderProcessState === OrderProcessState.None) {
- return <SelectedAssetBuyOrderProgress />;
+ return <ConnectedAccountPaymentMethod />;
}
return null;
};
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
new file mode 100644
index 000000000..ea9531a3e
--- /dev/null
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+
+import { State } from '../redux/reducer';
+import { Account } from '../types';
+
+import { PaymentMethod } from '../components/payment_method';
+
+export interface ConnectedAccountPaymentMethodProps {}
+
+interface ConnectedState {
+ account: Account;
+}
+
+const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
+ account: state.providerState.account,
+});
+
+export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(
+ mapStateToProps,
+)(PaymentMethod);