aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/payment_method.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/payment_method.tsx')
-rw-r--r--packages/instant/src/components/payment_method.tsx106
1 files changed, 75 insertions, 31 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';
+ }
+ };
+}