aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/payment_method.tsx53
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts20
2 files changed, 50 insertions, 23 deletions
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index dcf68da53..1d8661921 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, AccountState, Network } from '../types';
+import { Account, AccountState, Network, StandardSlidingPanelContent } from '../types';
import { MetaMaskLogo } from './meta_mask_logo';
import { PaymentMethodDropdown } from './payment_method_dropdown';
@@ -15,6 +15,7 @@ import { Text } from './ui/text';
export interface PaymentMethodProps {
account: Account;
network: Network;
+ openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void;
}
export class PaymentMethod extends React.Component<PaymentMethodProps> {
@@ -75,27 +76,10 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
switch (account.state) {
case AccountState.Loading:
return 'loading...';
- case AccountState.Error:
case AccountState.Locked:
+ return <WalletPrompt onClick={this._openInstallWalletPanel}>Unlock MetaMask</WalletPrompt>;
case AccountState.None:
- return (
- <Container
- padding="12px"
- border={`1px solid ${ColorOption.darkOrange}`}
- backgroundColor={ColorOption.lightOrange}
- width="100%"
- borderRadius="4px"
- >
- <Flex>
- <Container marginRight="10px">
- <MetaMaskLogo width={19} height={18} />
- </Container>
- <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
- Connect MetaMask
- </Text>
- </Flex>
- </Container>
- );
+ return <WalletPrompt onClick={this._openInstallWalletPanel}>Install MetaMask</WalletPrompt>;
case AccountState.Ready:
return (
<PaymentMethodDropdown
@@ -108,4 +92,33 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
return 'payment method';
}
};
+ private readonly _openInstallWalletPanel = () => {
+ this.props.openStandardSlidingPanel(StandardSlidingPanelContent.InstallMetaMask);
+ };
}
+
+interface WalletPromptProps {
+ onClick?: () => void;
+}
+
+const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, children }) => (
+ <Container
+ padding="12px"
+ border={`1px solid ${ColorOption.darkOrange}`}
+ backgroundColor={ColorOption.lightOrange}
+ width="100%"
+ borderRadius="4px"
+ onClick={onClick}
+ cursor={onClick ? 'pointer' : undefined}
+ boxShadowOnHover={!!onClick}
+ >
+ <Flex>
+ <Container marginRight="10px">
+ <MetaMaskLogo width={19} height={18} />
+ </Container>
+ <Text fontSize="16px" fontColor={ColorOption.darkOrange}>
+ {children}
+ </Text>
+ </Flex>
+ </Container>
+);
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index a1ebe7125..ee57d1829 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -1,10 +1,11 @@
import * as React from 'react';
import { connect } from 'react-redux';
-
-import { State } from '../redux/reducer';
-import { Account, Network } from '../types';
+import { Dispatch } from 'redux';
import { PaymentMethod } from '../components/payment_method';
+import { Action, actions } from '../redux/actions';
+import { State } from '../redux/reducer';
+import { Account, Network, StandardSlidingPanelContent } from '../types';
export interface ConnectedAccountPaymentMethodProps {}
@@ -13,11 +14,24 @@ interface ConnectedState {
network: Network;
}
+interface ConnectedDispatch {
+ openStandardSlidingPanel: (content: StandardSlidingPanelContent) => void;
+}
+
const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({
account: state.providerState.account,
network: state.network,
});
+const mapDispatchToProps = (
+ dispatch: Dispatch<Action>,
+ ownProps: ConnectedAccountPaymentMethodProps,
+): ConnectedDispatch => ({
+ openStandardSlidingPanel: (content: StandardSlidingPanelContent) =>
+ dispatch(actions.openStandardSlidingPanel(content)),
+});
+
export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect(
mapStateToProps,
+ mapDispatchToProps,
)(PaymentMethod);