feat: add account payment method container

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