crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(instant): add interactive overlay presentation to umd bundle

Browse Source
This commit is contained in:
Brandon Millman
2018-10-31 15:09:12 -07:00
parent 0955feb023
commit c2645b26b4
12 changed files with 251 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/instant/public/index.html
View File

@@ -74,6 +74,7 @@
const renderOptionsDefaults = {
liquiditySource: 'https://api.radarrelay.com/0x/v2/',
assetData: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498',
onClose: () => { console.log('0x Instant Closed') }
}
const liquiditySourceOverride = queryParams.getQueryParamValue('liquiditySource');
const renderOptionsOverrides = {

20
packages/instant/src/components/ui/button.tsx
View File

@@ -3,6 +3,11 @@ import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
export enum ButtonHoverStyle {
Darken = 0,
Opacity,
}
export interface ButtonProps {
backgroundColor?: ColorOption;
borderColor?: ColorOption;
@@ -12,6 +17,7 @@ export interface ButtonProps {
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
className?: string;
hoverStyle?: ButtonHoverStyle;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
@@ -32,30 +38,38 @@ export const Button = styled(PlainButton)`
width: ${props => props.width};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Opacity ? 0.7 : 1)};
&:hover {
background-color: ${props =>
!props.isDisabled
shouldDarken(props)
? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
: ''} !important;
opacity: 1;
}
&:active {
background-color: ${props =>
!props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
shouldDarken(props) ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
opacity: 1;
}
&:disabled {
opacity: 0.5;
opacity: ${props => (props.hoverStyle === ButtonHoverStyle.Darken ? 0.5 : 0.2)};
}
&:focus {
background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
`;
const shouldDarken = (props: ButtonProps) => {
return !props.isDisabled && props.hoverStyle === ButtonHoverStyle.Darken;
};
Button.defaultProps = {
backgroundColor: ColorOption.primaryColor,
borderColor: ColorOption.primaryColor,
width: 'auto',
isDisabled: false,
padding: '1em 2.2em',
hoverStyle: ButtonHoverStyle.Darken,
};
Button.displayName = 'Button';

8
packages/instant/src/components/ui/icon.tsx
View File

@@ -13,11 +13,19 @@ interface IconInfo {
strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
}
interface IconInfoMapping {
closeX: IconInfo;
failed: IconInfo;
success: IconInfo;
chevron: IconInfo;
}
const ICONS: IconInfoMapping = {
closeX: {
viewBox: '0 0 11 11',
fillRule: 'evenodd',
clipRule: 'evenodd',
path:
'M10.45 10.449C10.7539 10.1453 10.7539 9.65282 10.45 9.34909L6.60068 5.49999L10.45 1.65093C10.7538 1.3472 10.7538 0.854765 10.45 0.551038C10.1462 0.24731 9.65378 0.24731 9.34995 0.551038L5.50058 4.40006L1.65024 0.549939C1.34641 0.246212 0.853973 0.246212 0.550262 0.549939C0.246429 0.853667 0.246429 1.34611 0.550262 1.64983L4.40073 5.49995L0.55014 9.35019C0.246307 9.65392 0.246307 10.1464 0.55014 10.4501C0.853851 10.7538 1.34628 10.7538 1.65012 10.4501L5.5007 6.59987L9.35007 10.449C9.6539 10.7527 10.1463 10.7527 10.45 10.449Z',
},
failed: {
viewBox: '0 0 34 34',
fillRule: 'evenodd',

5
packages/instant/src/components/ui/index.ts
View File

@@ -1,7 +1,8 @@
export { Text, Title } from './text';
export { Button, ButtonProps } from './button';
export { Text, TextProps, Title } from './text';
export { Button, ButtonProps, ButtonHoverStyle } from './button';
export { Flex, FlexProps } from './flex';
export { Container, ContainerProps } from './container';
export { Input, InputProps } from './input';
export { Icon, IconProps } from './icon';
export { Spinner, SpinnerProps } from './spinner';
export { Overlay, OverlayProps } from './overlay';

49
packages/instant/src/components/ui/overlay.tsx Normal file
View File

@@ -0,0 +1,49 @@
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption, overlayBlack, styled } from '../../style/theme';
import { util } from '../../util/util';
import { Button, ButtonHoverStyle } from './button';
import { Container } from './container';
import { Flex } from './flex';
import { Icon } from './icon';
export interface OverlayProps {
className?: string;
onClose?: () => void;
zIndex?: number;
}
const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
<Flex height="100vh" className={className}>
<Container position="absolute" top="0px" right="0px">
<Button
backgroundColor={ColorOption.clear}
borderColor={ColorOption.clear}
padding="2em 2em"
onClick={onClose}
hoverStyle={ButtonHoverStyle.Opacity}
>
<Icon height={18} width={18} color="white" icon="closeX" />
</Button>
</Container>
<div>{children}</div>
</Flex>
);
export const Overlay = styled(PlainOverlay)`
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: ${props => props.zIndex}
background-color: ${overlayBlack};
`;
Overlay.defaultProps = {
onClose: util.boundNoop,
zIndex: 100,
};
Overlay.displayName = 'Overlay';

115
packages/instant/src/components/zero_ex_instant.tsx
View File

@@ -1,111 +1,14 @@
import { AssetBuyer } from '@0x/asset-buyer';
import { ObjectMap, SignedOrder } from '@0x/types';
import * as _ from 'lodash';
import * as React from 'react';
import { Provider } from 'react-redux';
import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
import { asyncData } from '../redux/async_data';
import { INITIAL_STATE, State } from '../redux/reducer';
import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
import { AssetMetaData, Network } from '../types';
import { assetUtils } from '../util/asset';
import { BigNumberInput } from '../util/big_number_input';
import { errorFlasher } from '../util/error_flasher';
import { gasPriceEstimator } from '../util/gas_price_estimator';
import { getProvider } from '../util/provider';
import { web3Wrapper } from '../util/web3_wrapper';
import { ZeroExInstantContainer } from './zero_ex_instant_container';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
fonts.include();
export type ZeroExInstantProps = ZeroExInstantProviderProps;
export type ZeroExInstantProps = ZeroExInstantRequiredProps & Partial<ZeroExInstantOptionalProps>;
export interface ZeroExInstantRequiredProps {
// TODO: Change API when we allow the selection of different assetDatas
assetData: string;
liquiditySource: string | SignedOrder[];
}
export interface ZeroExInstantOptionalProps {
defaultAssetBuyAmount?: number;
additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
networkId: Network;
}
export class ZeroExInstant extends React.Component<ZeroExInstantProps> {
private readonly _store: Store;
private static _mergeInitialStateWithProps(props: ZeroExInstantProps, state: State = INITIAL_STATE): State {
const networkId = props.networkId || state.network;
// TODO: Provider needs to not be hard-coded to injected web3.
const provider = getProvider();
const assetBuyerOptions = {
networkId,
};
let assetBuyer;
if (_.isString(props.liquiditySource)) {
assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
provider,
props.liquiditySource,
assetBuyerOptions,
);
} else {
assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
}
const completeAssetMetaDataMap = {
...props.additionalAssetMetaDataMap,
...state.assetMetaDataMap,
};
const storeStateFromProps: State = {
...state,
assetBuyer,
network: networkId,
selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
? state.selectedAssetAmount
: new BigNumberInput(props.defaultAssetBuyAmount),
assetMetaDataMap: completeAssetMetaDataMap,
};
return storeStateFromProps;
}
constructor(props: ZeroExInstantProps) {
super(props);
const initialAppState = ZeroExInstant._mergeInitialStateWithProps(this.props, INITIAL_STATE);
this._store = store.create(initialAppState);
}
public componentDidMount(): void {
// tslint:disable-next-line:no-floating-promises
asyncData.fetchAndDispatchToStore(this._store);
// warm up the gas price estimator cache just in case we can't
// grab the gas price estimate when submitting the transaction
// tslint:disable-next-line:no-floating-promises
gasPriceEstimator.getFastAmountInWeiAsync();
// tslint:disable-next-line:no-floating-promises
this._flashErrorIfWrongNetwork();
}
public render(): React.ReactNode {
return (
<Provider store={this._store}>
<SelectedAssetThemeProvider>
<ZeroExInstantContainer />
</SelectedAssetThemeProvider>
</Provider>
);
}
private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
const msToShowError = 30000; // 30 seconds
const network = this._store.getState().network;
const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
if (network !== networkOfProvider) {
const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
}
};
}
export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => {
return (
<ZeroExInstantProvider {...props}>
<ZeroExInstantContainer />
</ZeroExInstantProvider>
);
};

21
packages/instant/src/components/zero_ex_instant_overlay.tsx Normal file
View File

@@ -0,0 +1,21 @@
import * as React from 'react';
import { Overlay } from './ui';
import { ZeroExInstantContainer } from './zero_ex_instant_container';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps {
onClose?: () => void;
zIndex?: number;
}
export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlayProps> = props => {
const { onClose, zIndex, ...rest } = props;
return (
<ZeroExInstantProvider {...rest}>
<Overlay onClose={onClose} zIndex={zIndex}>
<ZeroExInstantContainer />
</Overlay>
</ZeroExInstantProvider>
);
};

108
packages/instant/src/components/zero_ex_instant_provider.tsx Normal file
View File

@@ -0,0 +1,108 @@
import { AssetBuyer } from '@0x/asset-buyer';
import { ObjectMap, SignedOrder } from '@0x/types';
import * as _ from 'lodash';
import * as React from 'react';
import { Provider } from 'react-redux';
import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider';
import { asyncData } from '../redux/async_data';
import { INITIAL_STATE, State } from '../redux/reducer';
import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
import { AssetMetaData, Network } from '../types';
import { assetUtils } from '../util/asset';
import { BigNumberInput } from '../util/big_number_input';
import { errorFlasher } from '../util/error_flasher';
import { gasPriceEstimator } from '../util/gas_price_estimator';
import { getProvider } from '../util/provider';
import { web3Wrapper } from '../util/web3_wrapper';
fonts.include();
export type ZeroExInstantProviderProps = ZeroExInstantProviderRequiredProps &
Partial<ZeroExInstantProviderOptionalProps>;
export interface ZeroExInstantProviderRequiredProps {
// TODO: Change API when we allow the selection of different assetDatas
assetData: string;
liquiditySource: string | SignedOrder[];
}
export interface ZeroExInstantProviderOptionalProps {
defaultAssetBuyAmount?: number;
additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
networkId: Network;
}
export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
private readonly _store: Store;
private static _mergeInitialStateWithProps(props: ZeroExInstantProviderProps, state: State = INITIAL_STATE): State {
const networkId = props.networkId || state.network;
// TODO: Provider needs to not be hard-coded to injected web3.
const provider = getProvider();
const assetBuyerOptions = {
networkId,
};
let assetBuyer;
if (_.isString(props.liquiditySource)) {
assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(
provider,
props.liquiditySource,
assetBuyerOptions,
);
} else {
assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, props.liquiditySource, assetBuyerOptions);
}
const completeAssetMetaDataMap = {
...props.additionalAssetMetaDataMap,
...state.assetMetaDataMap,
};
const storeStateFromProps: State = {
...state,
assetBuyer,
network: networkId,
selectedAsset: assetUtils.createAssetFromAssetData(props.assetData, completeAssetMetaDataMap, networkId),
selectedAssetAmount: _.isUndefined(props.defaultAssetBuyAmount)
? state.selectedAssetAmount
: new BigNumberInput(props.defaultAssetBuyAmount),
assetMetaDataMap: completeAssetMetaDataMap,
};
return storeStateFromProps;
}
constructor(props: ZeroExInstantProviderProps) {
super(props);
const initialAppState = ZeroExInstantProvider._mergeInitialStateWithProps(this.props, INITIAL_STATE);
this._store = store.create(initialAppState);
}
public componentDidMount(): void {
// tslint:disable-next-line:no-floating-promises
asyncData.fetchAndDispatchToStore(this._store);
// warm up the gas price estimator cache just in case we can't
// grab the gas price estimate when submitting the transaction
// tslint:disable-next-line:no-floating-promises
gasPriceEstimator.getFastAmountInWeiAsync();
// tslint:disable-next-line:no-floating-promises
this._flashErrorIfWrongNetwork();
}
public render(): React.ReactNode {
return (
<Provider store={this._store}>
<SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider>
</Provider>
);
}
private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => {
const msToShowError = 30000; // 30 seconds
const network = this._store.getState().network;
const networkOfProvider = await web3Wrapper.getNetworkIdAsync();
if (network !== networkOfProvider) {
const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`;
errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError);
}
};
}

1
packages/instant/src/constants.ts
View File

@@ -2,6 +2,7 @@ import { BigNumber } from '@0x/utils';
export const BIG_NUMBER_ZERO = new BigNumber(0);
export const ETH_DECIMALS = 18;
export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer';
export const INJECTED_DIV_ID = 'zeroExInstant';
export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed';
export const GWEI_IN_WEI = new BigNumber(1000000000);
export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);

1
packages/instant/src/index.ts
View File

@@ -1 +1,2 @@
export { ZeroExInstant, ZeroExInstantProps } from './components/zero_ex_instant';
export { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './components/zero_ex_instant_overlay';

39
packages/instant/src/index.umd.ts
View File

@@ -2,21 +2,42 @@ import * as _ from 'lodash';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants';
import { ZeroExInstant, ZeroExInstantProps } from './index';
import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants';
import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
import { assert } from './util/assert';
export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
assert.isHexString('assetData', props.assetData);
assert.isValidLiquiditySource('liquiditySource', props.liquiditySource);
export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
assert.isHexString('props.assetData', props.assetData);
assert.isValidLiquiditySource('props.liquiditySource', props.liquiditySource);
if (!_.isUndefined(props.additionalAssetMetaDataMap)) {
assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
assert.isValidAssetMetaDataMap('props.additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
}
if (!_.isUndefined(props.defaultAssetBuyAmount)) {
assert.isNumber('defaultAssetBuyAmount', props.defaultAssetBuyAmount);
assert.isNumber('props.defaultAssetBuyAmount', props.defaultAssetBuyAmount);
}
if (!_.isUndefined(props.networkId)) {
assert.isNumber('networkId', props.networkId);
assert.isNumber('props.networkId', props.networkId);
}
ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
if (!_.isUndefined(props.onClose)) {
assert.isFunction('props.onClose', props.onClose);
}
if (!_.isUndefined(props.zIndex)) {
assert.isNumber('props.zIndex', props.zIndex);
}
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);
appendTo.appendChild(injectedDiv);
const instantOverlayProps = {
...props,
onClose: () => {
appendTo.removeChild(injectedDiv);
if (!_.isUndefined(props.onClose)) {
props.onClose();
}
},
};
ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
};

3
packages/instant/src/style/theme.ts
View File

@@ -14,6 +14,7 @@ export enum ColorOption {
white = 'white',
lightOrange = 'lightOrange',
darkOrange = 'darkOrange',
clear = 'clear',
}
export const theme: Theme = {
@@ -26,8 +27,10 @@ export const theme: Theme = {
white: 'white',
lightOrange: '#F9F2ED',
darkOrange: '#F2994C',
clear: 'rgba(0, 0, 0, 0.0)',
};
export const transparentWhite = 'rgba(255,255,255,0.3)';
export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
export { styled, css, keyframes, ThemeProvider };