From 3f1f19e344c1f79accf38572dd0f7c29308954e7 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 9 Nov 2018 13:41:32 -0800 Subject: feat: connect payment method to state and display different content based on account state --- packages/instant/src/components/payment_method.tsx | 106 +++++++++++++++------ .../containers/connected_account_payment_method.ts | 4 +- 2 files changed, 78 insertions(+), 32 deletions(-) (limited to 'packages/instant') 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 = ({ account }) => { - return ( - - - - - Payment Method - - - - - - MetaMask - - +export class PaymentMethod extends React.Component { + public render(): React.ReactNode { + return ( + + + + + {this._renderTitleText()} + + {this._renderTitleLabel()} - + + {this._renderMainContent()} - - - ); -}; + ); + } + 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 ( + + + + + MetaMask + + + + ); + } + 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 ( + + ); + 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 = connect( -- cgit v1.2.3