aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-17 07:21:04 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-17 07:21:04 +0800
commit848193074a10d9799ffbc27918a8b264a2e101bb (patch)
tree68893d988d03530cbe9ccfe827d4aebce5cb249b /packages/instant/src
parentd64bc28ba63cc768493c6e5f3ebf5d344e9432b7 (diff)
downloaddexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.tar
dexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.tar.gz
dexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.tar.bz2
dexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.tar.lz
dexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.tar.xz
dexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.tar.zst
dexon-sol-tools-848193074a10d9799ffbc27918a8b264a2e101bb.zip
feat: close and open instant based on history changes
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/index.umd.ts51
1 files changed, 38 insertions, 13 deletions
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 0274db30c..81b7aebe3 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -5,6 +5,7 @@ import * as ReactDOM from 'react-dom';
import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_CLASS, INJECTED_DIV_ID } from './constants';
import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
import { assert } from './util/assert';
+import { util } from './util/util';
export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
assert.isValidOrderSource('orderSource', props.orderSource);
@@ -36,21 +37,45 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
assert.isWeb3Provider('props.provider', props.provider);
}
assert.isString('selector', selector);
- const appendToIfExists = document.querySelector(selector);
- assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
- const appendTo = appendToIfExists as Element;
- const injectedDiv = document.createElement('div');
- injectedDiv.setAttribute('id', INJECTED_DIV_ID);
- injectedDiv.setAttribute('class', INJECTED_DIV_CLASS);
- appendTo.appendChild(injectedDiv);
- const instantOverlayProps = {
- ...props,
- onClose: () => {
- appendTo.removeChild(injectedDiv);
+ // Render instant and return a callback that allows you to close it.
+ const renderInstant = () => {
+ const appendToIfExists = document.querySelector(selector);
+ assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
+ const appendTo = appendToIfExists as Element;
+ const injectedDiv = document.createElement('div');
+ injectedDiv.setAttribute('id', INJECTED_DIV_ID);
+ injectedDiv.setAttribute('class', INJECTED_DIV_CLASS);
+ appendTo.appendChild(injectedDiv);
+ const instantOverlayProps = {
+ ...props,
+ onClose: () => window.history.back(),
+ };
+ ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
+ const close = () => appendTo.removeChild(injectedDiv);
+ return close;
+ };
+ // Before we render, push to history saying that instant is showing for this part of the history.
+ window.history.pushState({ zeroExInstantShowing: true }, '0x Instant');
+ let closeInstant = renderInstant();
+
+ let prevOnPopState = util.boundNoop;
+ if (window.onpopstate) {
+ prevOnPopState = window.onpopstate.bind(window);
+ }
+ window.onpopstate = (e: PopStateEvent) => {
+ // Don't override integrators handler.
+ prevOnPopState(e);
+ // e.state represents the new state
+ if (e.state && e.state.zeroExInstantShowing) {
+ // The user pressed fowards, so re-render instant.
+ closeInstant = renderInstant();
+ } else {
+ // User pressed back, so close instant.
+ closeInstant();
+ delete window.onpopstate;
if (!_.isUndefined(props.onClose)) {
props.onClose();
}
- },
+ }
};
- ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
};