diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 06:20:14 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-10 06:20:14 +0800 |
commit | 79a533940e62f65def1695fe6c0990b3165f6158 (patch) | |
tree | 636a2facb441496cc9eca42d4f98a1be49fd5da2 /packages/instant | |
parent | 3a51bd1e69d8eb279fee138df2bc69ddb1ba5f82 (diff) | |
download | dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.tar dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.tar.gz dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.tar.bz2 dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.tar.lz dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.tar.xz dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.tar.zst dexon-0x-contracts-79a533940e62f65def1695fe6c0990b3165f6158.zip |
feat: open metamask sliding panel if locked on click
Diffstat (limited to 'packages/instant')
-rw-r--r-- | packages/instant/src/components/payment_method.tsx | 53 | ||||
-rw-r--r-- | packages/instant/src/containers/connected_account_payment_method.ts | 20 |
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); |