aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-10 05:41:32 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-10 05:41:32 +0800
commit3f1f19e344c1f79accf38572dd0f7c29308954e7 (patch)
treefe3f1026d5aebbc4bde27526b08dd7606de076a5
parent3aa831ad7752cf24ae67b1a96a6e839cc40ec820 (diff)
downloaddexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.tar
dexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.tar.gz
dexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.tar.bz2
dexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.tar.lz
dexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.tar.xz
dexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.tar.zst
dexon-sol-tools-3f1f19e344c1f79accf38572dd0f7c29308954e7.zip
feat: connect payment method to state and display different content based on account state
-rw-r--r--packages/instant/src/components/payment_method.tsx106
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts4
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(