aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/index.umd.ts
blob: 59f658b33504ac42d06fe5fc4853b14fa3ba28fa (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import * as _ from 'lodash';
import * as React from 'react';
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 interface ZeroExInstantConfig extends ZeroExInstantOverlayProps {
    shouldDisablePushToHistory?: boolean;
}

export const render = (config: ZeroExInstantConfig, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
    assert.isValidOrderSource('orderSource', config.orderSource);
    if (!_.isUndefined(config.defaultSelectedAssetData)) {
        assert.isHexString('defaultSelectedAssetData', config.defaultSelectedAssetData);
    }
    if (!_.isUndefined(config.additionalAssetMetaDataMap)) {
        assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', config.additionalAssetMetaDataMap);
    }
    if (!_.isUndefined(config.defaultAssetBuyAmount)) {
        assert.isNumber('defaultAssetBuyAmount', config.defaultAssetBuyAmount);
    }
    if (!_.isUndefined(config.networkId)) {
        assert.isNumber('networkId', config.networkId);
    }
    if (!_.isUndefined(config.availableAssetDatas)) {
        assert.areValidAssetDatas('availableAssetDatas', config.availableAssetDatas);
    }
    if (!_.isUndefined(config.onClose)) {
        assert.isFunction('onClose', config.onClose);
    }
    if (!_.isUndefined(config.zIndex)) {
        assert.isNumber('zIndex', config.zIndex);
    }
    if (!_.isUndefined(config.affiliateInfo)) {
        assert.isValidAffiliateInfo('affiliateInfo', config.affiliateInfo);
    }
    if (!_.isUndefined(config.provider)) {
        assert.isWeb3Provider('provider', config.provider);
    }
    if (!_.isUndefined(config.shouldDisablePushToHistory)) {
        assert.isBoolean('shouldDisablePushToHistory', config.shouldDisablePushToHistory);
    }
    if (!_.isUndefined(props.shouldDisableAnalyticsTracking)) {
        assert.isBoolean('props.shouldDisableAnalyticsTracking', props.shouldDisableAnalyticsTracking);
    }
    assert.isString('selector', selector);
    // Render instant and return a callback that allows you to remove it from the DOM.
    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 closeInstant = () => {
            if (!_.isUndefined(config.onClose)) {
                config.onClose();
            }
            appendTo.removeChild(injectedDiv);
        };
        const instantOverlayProps = {
            ...config,
            // If we are using the history API, just go back to close
            onClose: () => (config.shouldDisablePushToHistory ? closeInstant() : window.history.back()),
        };
        ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
        return closeInstant;
    };
    if (config.shouldDisablePushToHistory) {
        if (!isInstantRendered()) {
            renderInstant();
        }
    } else {
        // 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 removeInstant = 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) {
                // We have returned to a history state that expects instant to be rendered.
                if (!isInstantRendered()) {
                    removeInstant = renderInstant();
                }
            } else {
                // History has changed to a different state.
                if (isInstantRendered()) {
                    removeInstant();
                }
            }
        };
    }
};

const isInstantRendered = (): boolean => !!document.getElementById(INJECTED_DIV_ID);