aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2017-12-18 07:58:12 +0800
committerFabio Berger <me@fabioberger.com>2017-12-18 07:58:12 +0800
commit89f368a8b8b2419f9f347ad20da94199d533fa26 (patch)
tree774d87cea3f7d5a61e2cfc1996e887f3f9588d20
parent672c8acaca76851306276d0d03c5df0c75aa8bc6 (diff)
downloaddexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.tar
dexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.tar.gz
dexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.tar.bz2
dexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.tar.lz
dexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.tar.xz
dexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.tar.zst
dexon-sol-tools-89f368a8b8b2419f9f347ad20da94199d533fa26.zip
Add notice dialog to balances page about updating the WETH contract. We also draw attention to the new dedicated section for unwrapping from outdated WETH tokens
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx38
-rw-r--r--packages/website/ts/components/portal.tsx50
-rw-r--r--packages/website/ts/utils/constants.ts1
3 files changed, 79 insertions, 10 deletions
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
new file mode 100644
index 000000000..d13b2e8ce
--- /dev/null
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -0,0 +1,38 @@
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import {colors} from 'material-ui/styles';
+import * as React from 'react';
+
+interface WrappedEthSectionNoticeDialogProps {
+ isOpen: boolean;
+ onToggleDialog: () => void;
+}
+
+export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDialogProps) {
+ return (
+ <Dialog
+ title="Dedicated Wrapped Ether Section"
+ titleStyle={{fontWeight: 100}}
+ actions={[
+ <FlatButton
+ key="acknowledgeWrapEthSection"
+ label="Sounds good"
+ onTouchTap={props.onToggleDialog.bind(this)}
+ />,
+ ]}
+ open={props.isOpen}
+ onRequestClose={props.onToggleDialog.bind(this)}
+ autoScrollBodyContent={true}
+ modal={true}
+ >
+ <div className="pt2" style={{color: colors.grey700}}>
+ <div>
+ We have recently updated the Wrapped Ether token used by 0x Portal.
+ Don't worry, unwrapping Ether tied to the old Wrapped Ether token can
+ be done at any time by clicking on the "Wrap ETH" section in the menu
+ to the left.
+ </div>
+ </div>
+ </Dialog>
+ );
+}
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 74b1bdec6..69a7c1e7f 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -8,6 +8,7 @@ import {Route, Switch} from 'react-router-dom';
import {Blockchain} from 'ts/blockchain';
import {BlockchainErrDialog} from 'ts/components/dialogs/blockchain_err_dialog';
import {PortalDisclaimerDialog} from 'ts/components/dialogs/portal_disclaimer_dialog';
+import {WrappedEthSectionNoticeDialog} from 'ts/components/dialogs/wrapped_eth_section_notice_dialog';
import {EthWrappers} from 'ts/components/eth_wrappers';
import {FillOrder} from 'ts/components/fill_order';
import {Footer} from 'ts/components/footer';
@@ -63,22 +64,39 @@ interface PortalAllState {
prevNetworkId: number;
prevNodeVersion: string;
prevUserAddress: string;
- hasAcceptedDisclaimer: boolean;
+ prevPathname: string;
+ isDisclaimerDialogOpen: boolean;
+ isWethNoticeDialogOpen: boolean;
}
export class Portal extends React.Component<PortalAllProps, PortalAllState> {
private blockchain: Blockchain;
private sharedOrderIfExists: Order;
private throttledScreenWidthUpdate: () => void;
+ public static hasAlreadyDismissedWethNotice() {
+ const didDismissWethNotice = localStorage.getItemIfExists(constants.DISMISS_WETH_NOTICE_LOCAL_STORAGE_KEY);
+ const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) &&
+ !_.isEmpty(didDismissWethNotice);
+ return hasAlreadyDismissedWethNotice;
+ }
constructor(props: PortalAllProps) {
super(props);
this.sharedOrderIfExists = this.getSharedOrderIfExists();
this.throttledScreenWidthUpdate = _.throttle(this.updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+
+ const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`);
+ const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+
+ const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY);
+ const hasAcceptedDisclaimer = !_.isUndefined(didAcceptPortalDisclaimer) &&
+ !_.isEmpty(didAcceptPortalDisclaimer);
this.state = {
prevNetworkId: this.props.networkId,
prevNodeVersion: this.props.nodeVersion,
prevUserAddress: this.props.userAddress,
- hasAcceptedDisclaimer: false,
+ prevPathname: this.props.location.pathname,
+ isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
+ isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
};
}
public componentDidMount() {
@@ -87,12 +105,6 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
public componentWillMount() {
this.blockchain = new Blockchain(this.props.dispatcher);
- const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY);
- const hasAcceptedDisclaimer = !_.isUndefined(didAcceptPortalDisclaimer) &&
- !_.isEmpty(didAcceptPortalDisclaimer);
- this.setState({
- hasAcceptedDisclaimer,
- });
}
public componentWillUnmount() {
this.blockchain.destroy();
@@ -128,6 +140,14 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
// tslint:disable-next-line:no-floating-promises
this.blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
}
+ if (nextProps.location.pathname !== this.state.prevPathname) {
+ const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`);
+ const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+ this.setState({
+ prevPathname: nextProps.location.pathname,
+ isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
+ });
+ }
}
public render() {
const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher
@@ -215,8 +235,12 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
networkId={this.props.networkId}
/>
+ <WrappedEthSectionNoticeDialog
+ isOpen={this.state.isWethNoticeDialogOpen}
+ onToggleDialog={this.onWethNoticeAccepted.bind(this)}
+ />
<PortalDisclaimerDialog
- isOpen={!this.state.hasAcceptedDisclaimer}
+ isOpen={this.state.isDisclaimerDialogOpen}
onToggleDialog={this.onPortalDisclaimerAccepted.bind(this)}
/>
<FlashMessage
@@ -297,7 +321,13 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
private onPortalDisclaimerAccepted() {
localStorage.setItem(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY, 'set');
this.setState({
- hasAcceptedDisclaimer: true,
+ isDisclaimerDialogOpen: false,
+ });
+ }
+ private onWethNoticeAccepted() {
+ localStorage.setItem(constants.DISMISS_WETH_NOTICE_LOCAL_STORAGE_KEY, 'set');
+ this.setState({
+ isWethNoticeDialogOpen: false,
});
}
private getSharedOrderIfExists(): Order {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 8f645c770..cb2dbef88 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -34,6 +34,7 @@ export const constants = {
GITHUB_URL: 'https://github.com/0xProject',
GITHUB_WIKI_URL: 'https://github.com/0xProject/wiki',
HTTP_NO_CONTENT_STATUS_CODE: 204,
+ DISMISS_WETH_NOTICE_LOCAL_STORAGE_KEY: 'hasDismissedWethNotice',
ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY: 'didAcceptPortalDisclaimer',
LINKEDIN_0X_URL: 'https://www.linkedin.com/company/0x',
LEDGER_PROVIDER_NAME: 'Ledger',