feat: connect payment method to state and display different content based on account state

2 files changed, 78 insertions, 32 deletions

diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index a9bbef518..f50c9bf3c 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 { Account, Network } from '../types';
+import { Account, AccountState, Network } from '../types';
 
 import { PaymentMethodDropdown } from './payment_method_dropdown';
 import { Circle } from './ui/circle';
@@ -13,37 +13,81 @@ import { Text } from './ui/text';
 
 export interface PaymentMethodProps {
     account: Account;
+    network: Network;
 }
 
-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>
+export class PaymentMethod extends React.Component<PaymentMethodProps> {
+    public render(): React.ReactNode {
+        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"
+                        >
+                            {this._renderTitleText()}
+                        </Text>
+                        <Flex>{this._renderTitleLabel()}</Flex>
                     </Flex>
-                </Flex>
+                </Container>
+                {this._renderMainContent()}
             </Container>
-            <PaymentMethodDropdown
-                accountAddress={'231312423s432'}
-                accountEthBalanceInWei={new BigNumber(10500000000000000000)}
-                network={Network.Mainnet}
-            />
-        </Container>
-    );
-};
+        );
+    }
+    private readonly _renderTitleText = (): string => {
+        const { account } = this.props;
+        switch (account.state) {
+            case AccountState.Loading:
+                return 'loading...';
+            case AccountState.Error:
+            case AccountState.Locked:
+            case AccountState.None:
+                return 'connect your wallet';
+            case AccountState.Ready:
+                return 'payment method';
+            default:
+                return 'payment method';
+        }
+    };
+    private readonly _renderTitleLabel = (): React.ReactNode => {
+        const { account } = this.props;
+        if (account.state === AccountState.Ready) {
+            return (
+                <React.Fragment>
+                    <Circle color={ColorOption.green} diameter={8} />
+                    <Container marginLeft="3px">
+                        <Text fontColor={ColorOption.darkGrey} fontSize="12px">
+                            MetaMask
+                        </Text>
+                    </Container>
+                </React.Fragment>
+            );
+        }
+        return null;
+    };
+    private readonly _renderMainContent = (): React.ReactNode => {
+        const { account, network } = this.props;
+        switch (account.state) {
+            case AccountState.Loading:
+                return 'loading...';
+            case AccountState.Error:
+            case AccountState.Locked:
+            case AccountState.None:
+                return 'connect your wallet';
+            case AccountState.Ready:
+                return (
+                    <PaymentMethodDropdown
+                        accountAddress={account.address}
+                        accountEthBalanceInWei={account.ethBalanceInWei}
+                        network={network}
+                    />
+                );
+            default:
+                return 'payment method';
+        }
+    };
+}
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index ea9531a3e..a1ebe7125 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { State } from '../redux/reducer';
-import { Account } from '../types';
+import { Account, Network } from '../types';
 
 import { PaymentMethod } from '../components/payment_method';
 
@@ -10,10 +10,12 @@ export interface ConnectedAccountPaymentMethodProps {}
 
 interface ConnectedState {
     account: Account;
+    network: Network;
 }
 
 const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
     account: state.providerState.account,
+    network: state.network,
 });
 
 export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(