63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React, { Component } from 'react';
|
|
import WalletDecrypt from 'components/WalletDecrypt';
|
|
import { OnlyUnlocked } from 'components/renderCbs';
|
|
import { Aux } from 'components/ui';
|
|
import { Fields } from './Fields';
|
|
import { isUnlocked as isUnlockedSelector } from 'selectors/wallet';
|
|
import { getNetworkConfig } from 'selectors/config';
|
|
import { configureLiteSend, TConfigureLiteSend } from 'actions/swap';
|
|
import { connect } from 'react-redux';
|
|
import { AppState } from 'reducers';
|
|
import { shouldDisplayLiteSend } from 'selectors/swap';
|
|
import { NetworkConfig } from 'config/data';
|
|
|
|
interface DispatchProps {
|
|
configureLiteSend: TConfigureLiteSend;
|
|
}
|
|
|
|
interface StateProps {
|
|
shouldDisplay: boolean;
|
|
isUnlocked: boolean;
|
|
network: NetworkConfig;
|
|
}
|
|
|
|
type Props = StateProps & DispatchProps;
|
|
class LiteSendClass extends Component<Props> {
|
|
public componentDidMount() {
|
|
this.props.configureLiteSend();
|
|
}
|
|
|
|
public render() {
|
|
if (!this.props.shouldDisplay) {
|
|
return null;
|
|
}
|
|
const { network, isUnlocked } = this.props;
|
|
let renderMe;
|
|
if (network.chainId !== 1) {
|
|
renderMe = (
|
|
<div className="row">
|
|
<div className="col-xs-8 col-xs-push-2 text-center">
|
|
<h5 style={{ color: 'red' }}>
|
|
WARNING: You are currently not on the Ethereum Mainnet. Please switch nodes in order
|
|
for the token swap to function as intended.
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else {
|
|
renderMe = isUnlocked ? <OnlyUnlocked whenUnlocked={<Fields />} /> : <WalletDecrypt />;
|
|
}
|
|
|
|
return <Aux>{renderMe}</Aux>;
|
|
}
|
|
}
|
|
|
|
export const LiteSend = connect(
|
|
(state: AppState) => ({
|
|
shouldDisplay: shouldDisplayLiteSend(state),
|
|
isUnlocked: isUnlockedSelector(state),
|
|
network: getNetworkConfig(state)
|
|
}),
|
|
{ configureLiteSend }
|
|
)(LiteSendClass);
|