aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-12-21 07:27:27 +0800
committerGitHub <noreply@github.com>2018-12-21 07:27:27 +0800
commitbed5b275e4da4dd9a822b068849ba0ef28829a70 (patch)
treea0e7312aa413e0865f6916c38f3ddde3ae4a7ccd /packages/website/ts
parent0a84ee748823e5099b0767eedc5de95c71cb8f4e (diff)
parent5d3d596909e0e4d12d3372e58ae2083ee517f71c (diff)
downloaddexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.tar
dexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.tar.gz
dexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.tar.bz2
dexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.tar.lz
dexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.tar.xz
dexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.tar.zst
dexon-sol-tools-bed5b275e4da4dd9a822b068849ba0ef28829a70.zip
Merge pull request #1466 from 0xProject/feature/website/remove-ts-warnings
[website] Fix TS errors
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/blockIconLink.tsx12
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/header.tsx2
-rw-r--r--packages/website/ts/@next/components/link.tsx1
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx7
-rw-r--r--packages/website/ts/@next/components/modals/input.tsx1
-rw-r--r--packages/website/ts/@next/components/newsletter_form.tsx3
-rw-r--r--packages/website/ts/@next/pages/community.tsx6
-rw-r--r--packages/website/ts/@next/pages/instant/config_generator.tsx2
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/components/ui/select.tsx170
-rw-r--r--packages/website/ts/containers/instant.ts30
-rw-r--r--packages/website/ts/globals.d.ts1
-rw-r--r--packages/website/ts/pages/instant/action_link.tsx46
-rw-r--r--packages/website/ts/pages/instant/config_generator.tsx311
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx110
-rw-r--r--packages/website/ts/pages/instant/features.tsx115
-rw-r--r--packages/website/ts/pages/instant/fee_percentage_slider.tsx77
-rw-r--r--packages/website/ts/pages/instant/instant.tsx87
19 files changed, 26 insertions, 958 deletions
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index bdcc5c29d..8d66a4afa 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -1,20 +1,24 @@
+import { History, Location } from 'history';
import * as React from 'react';
-import { withRouter } from 'react-router-dom';
+import { match, withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
-interface Props {
+interface BaseComponentProps {
icon?: string;
iconComponent?: React.ReactNode;
title: string;
linkLabel: string;
linkUrl?: string;
linkAction?: () => void;
+ history: History;
+ location: Location;
+ match: match<any>;
}
-class BaseComponent extends React.PureComponent<Props> {
+class BaseComponent extends React.PureComponent<BaseComponentProps> {
public onClick = (): void => {
const { linkAction, linkUrl } = this.props;
@@ -44,7 +48,7 @@ class BaseComponent extends React.PureComponent<Props> {
}
}
-export const BlockIconLink = withRouter(BaseComponent);
+export const BlockIconLink = withRouter<BaseComponentProps>(BaseComponent);
const Wrap = styled.div`
width: calc(50% - 15px);
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 675f69308..348f1b7b4 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -37,7 +37,7 @@ export const Button = (props: ButtonInterface) => {
linkElem = ReactRouterLink;
}
- const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+ const Component = linkElem ? ButtonBase.withComponent<any>(linkElem) : ButtonBase;
const targetProp = href && target ? { target } : {};
return (
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 24bfa28ba..e886923df 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -29,7 +29,7 @@ interface NavItemProps {
id?: string;
text?: string;
dropdownWidth?: number;
- dropdownComponent?: React.ReactNode;
+ dropdownComponent?: React.FunctionComponent<any>;
shouldOpenInNewTab?: boolean;
}
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
index a7711451b..080a0abcc 100644
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -14,6 +14,7 @@ interface LinkInterface {
textColor: string;
};
shouldOpenInNewTab?: boolean;
+ target?: string;
}
export const Link = (props: LinkInterface) => {
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index 122036b9a..13cf46fca 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -96,13 +96,16 @@ const Overlay = styled.div`
cursor: pointer;
`;
+interface SectionProps {
+ isDark?: boolean;
+}
const Section =
styled.div <
- { isDark: boolean } >
+ SectionProps >
`
width: 100%;
padding: 15px 30px;
- background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
+ background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')};
`;
const Grid =
diff --git a/packages/website/ts/@next/components/modals/input.tsx b/packages/website/ts/@next/components/modals/input.tsx
index d4d53402a..e3062b895 100644
--- a/packages/website/ts/@next/components/modals/input.tsx
+++ b/packages/website/ts/@next/components/modals/input.tsx
@@ -13,6 +13,7 @@ interface InputProps {
type?: string;
errors?: ErrorProps;
isErrors?: boolean;
+ required?: boolean;
}
interface ErrorProps {
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index ce6b04993..8572ccc5f 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -15,6 +15,7 @@ interface InputProps {
type: string;
label: string;
textColor: string;
+ required?: boolean;
}
interface ArrowProps {
@@ -78,7 +79,7 @@ class Form extends React.Component<FormProps> {
);
}
- private async _onSubmitAsync(e: Event): Promise<void> {
+ private async _onSubmitAsync(e: React.FormEvent<HTMLFormElement>): Promise<void> {
e.preventDefault();
const email = this.emailInput.current.value;
diff --git a/packages/website/ts/@next/pages/community.tsx b/packages/website/ts/@next/pages/community.tsx
index eb3e7210d..a259e3438 100644
--- a/packages/website/ts/@next/pages/community.tsx
+++ b/packages/website/ts/@next/pages/community.tsx
@@ -253,9 +253,11 @@ const EventContent = styled.div`
padding: 30px 30px;
`;
-// Community Links
+interface StyledCommunityLinkProps {
+ bgColor: string;
+}
const StyledCommunityLink = styled.a`
- background-color: ${(props: CommunityLinkProps) => props.bgColor};
+ background-color: ${(props: StyledCommunityLinkProps) => props.bgColor};
color: ${colors.white};
width: 175px;
height: 175px;
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx
index d4497ac92..3f00e33e2 100644
--- a/packages/website/ts/@next/pages/instant/config_generator.tsx
+++ b/packages/website/ts/@next/pages/instant/config_generator.tsx
@@ -128,7 +128,7 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi
private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
};
- private readonly _handleSRASelection = (event: Event) => {
+ private readonly _handleSRASelection = (event: React.ChangeEvent<HTMLSelectElement>) => {
const sraEndpoint = event.target.value;
const newConfig: ZeroExInstantBaseConfig = {
...this.props.value,
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index ae00851e5..778f59f27 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -28,6 +28,7 @@ export interface ContainerProps {
borderBottomRightRadius?: StringOrNum;
borderBottom?: StringOrNum;
borderColor?: string;
+ children?: React.ReactNode;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx
deleted file mode 100644
index e4fb50f59..000000000
--- a/packages/website/ts/components/ui/select.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import { colors } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { zIndex } from 'ts/style/z_index';
-
-import { Container } from './container';
-import { Overlay } from './overlay';
-import { Text } from './text';
-
-export interface SelectItemConfig {
- text: string;
- onClick?: () => void;
-}
-
-export interface SelectProps {
- value: string;
- label?: string;
- items: SelectItemConfig[];
- onOpen?: () => void;
- border?: string;
- fontSize?: string;
- iconSize?: number;
- textColor?: string;
- labelColor?: string;
- backgroundColor?: string;
-}
-
-export interface SelectState {
- isOpen: boolean;
-}
-
-export class Select extends React.Component<SelectProps, SelectState> {
- public static defaultProps = {
- items: [] as SelectItemConfig[],
- textColor: colors.black,
- backgroundColor: colors.white,
- fontSize: '16px',
- iconSize: 25,
- };
- public state: SelectState = {
- isOpen: false,
- };
- public render(): React.ReactNode {
- const { value, label, items, border, textColor, labelColor, backgroundColor, fontSize, iconSize } = this.props;
- const { isOpen } = this.state;
- const hasItems = !_.isEmpty(items);
- const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
- return (
- <React.Fragment>
- {isOpen && (
- <Overlay
- style={{
- zIndex: zIndex.overlay,
- backgroundColor: 'rgba(255, 255, 255, 0)',
- }}
- onClick={this._closeDropdown}
- />
- )}
- <Container position="relative">
- <Container
- cursor={hasItems ? 'pointer' : undefined}
- onClick={this._handleDropdownClick}
- borderRadius={borderRadius}
- hasBoxShadow={isOpen}
- border={border}
- backgroundColor={backgroundColor}
- padding="0.5em 0.8em"
- width="100%"
- >
- <Container className="flex justify-between">
- <Text fontSize={fontSize} fontColor={textColor}>
- {value}
- </Text>
- <Container>
- {label && (
- <Text fontSize={fontSize} fontColor={labelColor}>
- {label}
- </Text>
- )}
- {hasItems && (
- <Container marginLeft="5px" display="inline-block">
- <i
- className="zmdi zmdi-chevron-down"
- style={{ fontSize: iconSize, color: colors.darkGrey }}
- />
- </Container>
- )}
- </Container>
- </Container>
- </Container>
- {isOpen && (
- <Container
- width="100%"
- position="absolute"
- onClick={this._closeDropdown}
- zIndex={zIndex.aboveOverlay}
- hasBoxShadow={true}
- >
- {_.map(items, (item, index) => (
- <SelectItem
- key={item.text}
- {...item}
- isLast={index === items.length - 1}
- backgroundColor={backgroundColor}
- textColor={textColor}
- border={border}
- />
- ))}
- </Container>
- )}
- </Container>
- </React.Fragment>
- );
- }
- private readonly _handleDropdownClick = (): void => {
- if (_.isEmpty(this.props.items)) {
- return;
- }
- const isOpen = !this.state.isOpen;
- this.setState({
- isOpen,
- });
-
- if (isOpen && this.props.onOpen) {
- this.props.onOpen();
- }
- };
- private readonly _closeDropdown = (): void => {
- this.setState({
- isOpen: false,
- });
- };
-}
-
-export interface SelectItemProps extends SelectItemConfig {
- text: string;
- onClick?: () => void;
- isLast: boolean;
- backgroundColor?: string;
- border?: string;
- textColor?: string;
- fontSize?: string;
-}
-
-export const SelectItem: React.StatelessComponent<SelectItemProps> = ({
- text,
- onClick,
- isLast,
- border,
- backgroundColor,
- textColor,
- fontSize,
-}) => (
- <Container
- onClick={onClick}
- cursor="pointer"
- backgroundColor={backgroundColor}
- padding="0.8em"
- borderTop="0"
- border={border}
- shouldDarkenOnHover={true}
- borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
- width="100%"
- >
- <Text fontSize={fontSize} fontColor={textColor}>
- {text}
- </Text>
- </Container>
-);
diff --git a/packages/website/ts/containers/instant.ts b/packages/website/ts/containers/instant.ts
deleted file mode 100644
index 12ae7454e..000000000
--- a/packages/website/ts/containers/instant.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { Instant as InstantComponent, InstantProps } from 'ts/pages/instant/instant';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { State } from 'ts/redux/reducer';
-import { ScreenWidths } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
-
-interface ConnectedState {
- translate: Translate;
- screenWidth: ScreenWidths;
-}
-
-interface ConnectedDispatch {
- dispatcher: Dispatcher;
-}
-
-const mapStateToProps = (state: State, _ownProps: InstantProps): ConnectedState => ({
- translate: state.translate,
- screenWidth: state.screenWidth,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
- dispatcher: new Dispatcher(dispatch),
-});
-
-export const Instant: React.ComponentClass<InstantProps> = connect(mapStateToProps, mapDispatchToProps)(
- InstantComponent,
-);
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index b953a319f..05f3c7f88 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -1,3 +1,4 @@
+declare module '@reach/dialog';
declare module 'truffle-contract';
declare module 'whatwg-fetch';
declare module 'thenby';
diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx
deleted file mode 100644
index c196f03ef..000000000
--- a/packages/website/ts/pages/instant/action_link.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { utils } from 'ts/utils/utils';
-
-export interface ActionLinkProps {
- displayText: string;
- linkSrc?: string;
- onClick?: () => void;
- fontSize?: number;
- color?: string;
- className?: string;
-}
-
-export class ActionLink extends React.Component<ActionLinkProps> {
- public static defaultProps = {
- fontSize: 16,
- color: colors.white,
- };
- public render(): React.ReactNode {
- const { displayText, fontSize, color, className } = this.props;
- return (
- <Container className={`flex items-center ${className}`} onClick={this._handleClick} cursor="pointer">
- <Container>
- <Text fontSize="16px" fontColor={color}>
- {displayText}
- </Text>
- </Container>
- <Container paddingTop="1px" paddingLeft="6px">
- <i className="zmdi zmdi-chevron-right bold" style={{ fontSize, color }} />
- </Container>
- </Container>
- );
- }
-
- private readonly _handleClick = (event: React.MouseEvent<HTMLElement>) => {
- if (!_.isUndefined(this.props.onClick)) {
- this.props.onClick();
- } else if (!_.isUndefined(this.props.linkSrc)) {
- utils.openUrl(this.props.linkSrc);
- }
- };
-}
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
deleted file mode 100644
index fbeeeaeaf..000000000
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-import { StandardRelayerAPIOrderProvider } from '@0x/asset-buyer';
-import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses';
-import { assetDataUtils } from '@0x/order-utils';
-import { ObjectMap } from '@0x/types';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { CheckMark } from 'ts/components/ui/check_mark';
-import { Container } from 'ts/components/ui/container';
-import { MultiSelect } from 'ts/components/ui/multi_select';
-import { Select, SelectItemConfig } from 'ts/components/ui/select';
-import { Spinner } from 'ts/components/ui/spinner';
-import { Text } from 'ts/components/ui/text';
-import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input';
-import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
-import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-
-import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map';
-import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../instant/src/types';
-
-export interface ConfigGeneratorProps {
- value: ZeroExInstantBaseConfig;
- onConfigChange: (config: ZeroExInstantBaseConfig) => void;
-}
-
-export interface ConfigGeneratorState {
- isLoadingAvailableTokens: boolean;
- // Address to token info
- availableTokens?: ObjectMap<ERC20AssetMetaData>;
-}
-
-const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://sra.bamboorelay.com/0x/v2/'];
-
-export class ConfigGenerator extends React.Component<ConfigGeneratorProps, ConfigGeneratorState> {
- public state: ConfigGeneratorState = {
- isLoadingAvailableTokens: true,
- };
- public componentDidMount(): void {
- // tslint:disable-next-line:no-floating-promises
- this._setAvailableAssetsFromOrderProvider();
- }
- public componentDidUpdate(prevProps: ConfigGeneratorProps): void {
- if (prevProps.value.orderSource !== this.props.value.orderSource) {
- // tslint:disable-next-line:no-floating-promises
- this._setAvailableAssetsFromOrderProvider();
- const newConfig: ZeroExInstantBaseConfig = {
- ...this.props.value,
- availableAssetDatas: undefined,
- };
- this.props.onConfigChange(newConfig);
- }
- }
- public render(): React.ReactNode {
- const { value } = this.props;
- if (!_.isString(value.orderSource)) {
- throw new Error('ConfigGenerator component only supports string values as an orderSource.');
- }
- return (
- <Container minWidth="350px">
- <ConfigGeneratorSection title="Standard relayer API endpoint">
- <Select value={value.orderSource} items={this._generateItems()} />
- </ConfigGeneratorSection>
- <ConfigGeneratorSection {...this._getTokenSelectorProps()}>
- {this._renderTokenMultiSelectOrSpinner()}
- </ConfigGeneratorSection>
- <ConfigGeneratorSection title="Transaction fee ETH address" marginBottom="10px" isOptional={true}>
- <ConfigGeneratorAddressInput
- value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''}
- onChange={this._handleAffiliateAddressChange}
- />
- </ConfigGeneratorSection>
- <ConfigGeneratorSection
- title="Fee percentage"
- actionText="Learn more"
- onActionTextClick={this._handleAffiliatePercentageLearnMoreClick}
- >
- <FeePercentageSlider
- value={value.affiliateInfo.feePercentage}
- onChange={this._handleAffiliatePercentageChange}
- isDisabled={
- _.isUndefined(value.affiliateInfo) ||
- _.isUndefined(value.affiliateInfo.feeRecipient) ||
- _.isEmpty(value.affiliateInfo.feeRecipient)
- }
- />
- </ConfigGeneratorSection>
- </Container>
- );
- }
- private readonly _getTokenSelectorProps = (): ConfigGeneratorSectionProps => {
- if (_.isEmpty(this.state.availableTokens)) {
- return {
- title: 'What tokens can users buy?',
- };
- }
- if (_.isUndefined(this.props.value.availableAssetDatas)) {
- return {
- title: 'What tokens can users buy?',
- actionText: 'Unselect All',
- onActionTextClick: this._handleUnselectAllClick,
- };
- }
- return {
- title: 'What tokens can users buy?',
- actionText: 'Select All',
- onActionTextClick: this._handleSelectAllClick,
- };
- };
- private readonly _generateItems = (): SelectItemConfig[] => {
- return _.map(SRA_ENDPOINTS, endpoint => ({
- text: endpoint,
- onClick: this._handleSRASelection.bind(this, endpoint),
- }));
- };
- private readonly _handleAffiliatePercentageLearnMoreClick = (): void => {
- window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank');
- };
- private readonly _handleSRASelection = (sraEndpoint: string) => {
- const newConfig: ZeroExInstantBaseConfig = {
- ...this.props.value,
- orderSource: sraEndpoint,
- };
- this.props.onConfigChange(newConfig);
- };
- private readonly _handleAffiliateAddressChange = (address: string, isValid: boolean) => {
- const oldConfig: ZeroExInstantBaseConfig = this.props.value;
- const newConfig: ZeroExInstantBaseConfig = {
- ...oldConfig,
- affiliateInfo: {
- feeRecipient: address,
- feePercentage: oldConfig.affiliateInfo.feePercentage,
- },
- };
- this.props.onConfigChange(newConfig);
- };
- private readonly _handleAffiliatePercentageChange = (value: number) => {
- const oldConfig: ZeroExInstantBaseConfig = this.props.value;
- const newConfig: ZeroExInstantBaseConfig = {
- ...oldConfig,
- affiliateInfo: {
- feeRecipient: oldConfig.affiliateInfo.feeRecipient,
- feePercentage: value,
- },
- };
- this.props.onConfigChange(newConfig);
- };
- private readonly _handleSelectAllClick = () => {
- const newConfig: ZeroExInstantBaseConfig = {
- ...this.props.value,
- availableAssetDatas: undefined,
- };
- this.props.onConfigChange(newConfig);
- };
- private readonly _handleUnselectAllClick = () => {
- const newConfig: ZeroExInstantBaseConfig = {
- ...this.props.value,
- availableAssetDatas: [],
- };
- this.props.onConfigChange(newConfig);
- };
- private readonly _handleTokenClick = (assetData: string) => {
- const { value } = this.props;
- let newAvailableAssetDatas: string[] = [];
- const allKnownAssetDatas = _.keys(this.state.availableTokens);
- const availableAssetDatas = value.availableAssetDatas;
- if (_.isUndefined(availableAssetDatas)) {
- // It being undefined means it's all tokens.
- newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData);
- } else if (!_.includes(availableAssetDatas, assetData)) {
- // Add it
- newAvailableAssetDatas = [...availableAssetDatas, assetData];
- if (newAvailableAssetDatas.length === allKnownAssetDatas.length) {
- // If all tokens are manually selected, just show none.
- newAvailableAssetDatas = undefined;
- }
- } else {
- // Remove it
- newAvailableAssetDatas = _.pull(availableAssetDatas, assetData);
- }
- const newConfig: ZeroExInstantBaseConfig = {
- ...this.props.value,
- availableAssetDatas: newAvailableAssetDatas,
- };
- this.props.onConfigChange(newConfig);
- };
- private readonly _setAvailableAssetsFromOrderProvider = async (): Promise<void> => {
- const { value } = this.props;
- if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) {
- this.setState({ isLoadingAvailableTokens: true });
- const networkId = constants.NETWORK_ID_MAINNET;
- const sraOrderProvider = new StandardRelayerAPIOrderProvider(value.orderSource, networkId);
- const etherTokenAddress = getContractAddressesForNetworkOrThrow(networkId).etherToken;
- const etherTokenAssetData = assetDataUtils.encodeERC20AssetData(etherTokenAddress);
- const assetDatas = await sraOrderProvider.getAvailableMakerAssetDatasAsync(etherTokenAssetData);
- const availableTokens = _.reduce(
- assetDatas,
- (acc, assetData) => {
- const metaDataIfExists = assetMetaDataMap[assetData] as ERC20AssetMetaData;
- if (metaDataIfExists) {
- acc[assetData] = metaDataIfExists;
- }
- return acc;
- },
- {} as ObjectMap<ERC20AssetMetaData>,
- );
- this.setState({ availableTokens, isLoadingAvailableTokens: false });
- }
- };
- private readonly _renderTokenMultiSelectOrSpinner = (): React.ReactNode => {
- const { value } = this.props;
- const { availableTokens, isLoadingAvailableTokens } = this.state;
- const multiSelectHeight = '200px';
- if (isLoadingAvailableTokens) {
- return (
- <Container
- className="flex flex-column items-center justify-center"
- height={multiSelectHeight}
- backgroundColor={colors.white}
- borderRadius="4px"
- width="100%"
- >
- <Container position="relative" left="12px" marginBottom="20px">
- <Spinner />
- </Container>
- <Text fontSize="16px">Loading...</Text>
- </Container>
- );
- }
- const availableAssetDatas = _.keys(availableTokens);
- if (availableAssetDatas.length === 0) {
- return (
- <Container
- className="flex flex-column items-center justify-center"
- height={multiSelectHeight}
- backgroundColor={colors.white}
- borderRadius="4px"
- width="100%"
- >
- <Text fontSize="16px">No tokens available. Try another endpoint?</Text>
- </Container>
- );
- }
- const items = _.map(_.keys(availableTokens), assetData => {
- const metaData = availableTokens[assetData];
- return {
- value: assetData,
- renderItemContent: (isSelected: boolean) => (
- <Container className="flex items-center">
- <Container marginRight="10px">
- <CheckMark isChecked={isSelected} />
- </Container>
- <Text
- fontSize="16px"
- fontColor={isSelected ? colors.mediumBlue : colors.darkerGrey}
- fontWeight={300}
- >
- <b>{metaData.symbol.toUpperCase()}</b> — {metaData.name}
- </Text>
- </Container>
- ),
- onClick: this._handleTokenClick.bind(this, assetData),
- };
- });
- return <MultiSelect items={items} selectedValues={value.availableAssetDatas} height={multiSelectHeight} />;
- };
-}
-
-export interface ConfigGeneratorSectionProps {
- title: string;
- actionText?: string;
- onActionTextClick?: () => void;
- isOptional?: boolean;
- marginBottom?: string;
-}
-
-export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSectionProps> = ({
- title,
- actionText,
- onActionTextClick,
- isOptional,
- marginBottom,
- children,
-}) => (
- <Container marginBottom={marginBottom}>
- <Container marginBottom="10px" className="flex justify-between items-center">
- <Container>
- <Text fontColor={colors.white} fontSize="16px" lineHeight="18px" display="inline">
- {title}
- </Text>
- {isOptional && (
- <Text fontColor={colors.grey} fontSize="16px" lineHeight="18px" display="inline">
- {' '}
- (optional)
- </Text>
- )}
- </Container>
- {actionText && (
- <Text fontSize="12px" fontColor={colors.grey} onClick={onActionTextClick}>
- {actionText}
- </Text>
- )}
- </Container>
- {children}
- </Container>
-);
-
-ConfigGeneratorSection.defaultProps = {
- marginBottom: '30px',
-};
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
deleted file mode 100644
index a9dd5864c..000000000
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-import { ActionLink } from 'ts/pages/instant/action_link';
-import { CodeDemo } from 'ts/pages/instant/code_demo';
-import { ConfigGenerator } from 'ts/pages/instant/config_generator';
-import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
-
-import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
-
-export interface ConfiguratorProps {
- hash: string;
-}
-
-export interface ConfiguratorState {
- instantConfig: ZeroExInstantBaseConfig;
-}
-
-export class Configurator extends React.Component<ConfiguratorProps> {
- public state: ConfiguratorState = {
- instantConfig: {
- orderSource: 'https://api.radarrelay.com/0x/v2/',
- availableAssetDatas: undefined,
- affiliateInfo: {
- feeRecipient: '',
- feePercentage: 0,
- },
- },
- };
- public render(): React.ReactNode {
- const { hash } = this.props;
- const codeToDisplay = this._generateCodeDemoCode();
- return (
- <Container
- className="flex justify-center py4 px3"
- id={hash}
- backgroundColor={colors.instantTertiaryBackground}
- >
- <Container className="mx3">
- <Container className="mb3">
- <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
- 0x Instant Configurator
- </Text>
- </Container>
- <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
- </Container>
- <Container className="mx3" height="550px">
- <Container className="mb3 flex justify-between">
- <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
- Code Snippet
- </Text>
- <ActionLink
- displayText="Explore the Docs"
- linkSrc={`${WebsitePaths.Wiki}#Get-Started-With-Instant`}
- color={colors.grey}
- />
- </Container>
- <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo>
- </Container>
- </Container>
- );
- }
- private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
- this.setState({
- instantConfig: config,
- });
- };
- private readonly _generateCodeDemoCode = (): string => {
- const { instantConfig } = this.state;
- return `<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8" />
- <script src="https://instant.0x.org/instant.js"></script>
- </head>
- <body>
- <script>
- zeroExInstant.render({
- orderSource: '${instantConfig.orderSource}',${
- !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
- ? `\n affiliateInfo: {
- feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
- feePercentage: ${instantConfig.affiliateInfo.feePercentage}
- },`
- : ''
- }${
- !_.isUndefined(instantConfig.availableAssetDatas)
- ? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString(
- instantConfig.availableAssetDatas,
- )}`
- : ''
- }
- }, 'body');
- </script>
- </body>
-</html>`;
- };
- private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
- const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
- if (availableAssetDatas.length < 2) {
- return `[${stringAvailableAssetDatas.join(', ')}]`;
- }
- return `[\n ${stringAvailableAssetDatas.join(
- ', \n ',
- )}\n ]`;
- };
-}
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
deleted file mode 100644
index ed98ceb53..000000000
--- a/packages/website/ts/pages/instant/features.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths, WebsitePaths } from 'ts/types';
-
-export interface FeatureProps {
- screenWidth: ScreenWidths;
- onGetStartedClick: () => void;
-}
-
-export const Features = (props: FeatureProps) => {
- const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
- const getStartedLinkInfo = {
- displayText: 'Get started',
- onClick: props.onGetStartedClick,
- };
- const exploreTheDocsLinkInfo = {
- displayText: 'Explore the docs',
- linkSrc: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
- };
- const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo];
- return (
- <Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
- <FeatureItem
- imgSrc="images/instant/feature_1.svg"
- title="Support ERC-20 and ERC-721 tokens"
- description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
- linkInfos={tokenLinkInfos}
- screenWidth={props.screenWidth}
- />
- <FeatureItem
- imgSrc="images/instant/feature_2.svg"
- title="Generate revenue for your business"
- description="With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp."
- linkInfos={[
- {
- displayText: 'Learn about affiliate fees',
- linkSrc: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`,
- },
- ]}
- screenWidth={props.screenWidth}
- />
- <FeatureItem
- imgSrc="images/instant/feature_3.svg"
- title="Easy and Flexible Integration"
- description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
- linkInfos={[
- {
- displayText: 'Explore AssetBuyer',
- linkSrc: `${WebsitePaths.Docs}/asset-buyer`,
- },
- ]}
- screenWidth={props.screenWidth}
- />
- </Container>
- );
-};
-
-interface FeatureItemProps {
- imgSrc: string;
- title: string;
- description: string;
- linkInfos: ActionLinkProps[];
- screenWidth: ScreenWidths;
-}
-
-const FeatureItem = (props: FeatureItemProps) => {
- const { imgSrc, title, description, linkInfos, screenWidth } = props;
- const isLargeScreen = screenWidth === ScreenWidths.Lg;
- const maxWidth = isLargeScreen ? '500px' : undefined;
- const image = (
- <Container className="center" minWidth="435px" maxHeight="225px">
- <Image src={imgSrc} additionalStyle={{ filter: 'drop-shadow(0px 4px 4px rgba(0,0,0,.25))' }} />
- </Container>
- );
- const info = (
- <Container maxWidth={maxWidth}>
- <Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>
- {title}
- </Text>
- <Container marginTop="28px">
- <Text fontFamily="Roboto Mono" fontSize="14px" lineHeight="2em" fontColor={colors.grey500}>
- {description}
- </Text>
- </Container>
- <Container className="flex" marginTop="28px">
- {_.map(linkInfos, linkInfo => (
- <Container key={linkInfo.displayText} marginRight="32px">
- <ActionLink {...linkInfo} />
- </Container>
- ))}
- </Container>
- </Container>
- );
- return (
- <Container className="flex flex-column items-center py4 px3">
- {isLargeScreen ? (
- <Container className="flex">
- {image}
- <Container marginLeft="115px">{info}</Container>
- </Container>
- ) : (
- <Container className="flex flex-column items-center" width="100%">
- {image}
- <Container marginTop="48px">{info}</Container>
- </Container>
- )}
- </Container>
- );
-};
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx
deleted file mode 100644
index d76cee58f..000000000
--- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Slider from 'rc-slider';
-import 'rc-slider/assets/index.css';
-import * as React from 'react';
-
-import { Text } from 'ts/components/ui/text';
-import { colors } from 'ts/style/colors';
-import { injectGlobal } from 'ts/style/theme';
-
-const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider);
-// tslint:disable-next-line:no-unused-expression
-injectGlobal`
- .rc-slider-tooltip-inner {
- box-shadow: none !important;
- background-color: ${colors.white} !important;
- border-radius: 4px !important;
- padding: 3px 12px !important;
- height: auto !important;
- position: relative;
- top: 7px;
- &: after {
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-width: 6px;
- bottom: 100%;
- left: 100%;
- border-bottom-color: ${colors.white};
- margin-left: -60%;
- }
- }
- .rc-slider-disabled {
- background-color: inherit !important;
- }
-`;
-
-export interface FeePercentageSliderProps {
- value: number;
- isDisabled: boolean;
- onChange: (value: number) => void;
-}
-
-export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> {
- public render(): React.ReactNode {
- return (
- <SliderWithTooltip
- disabled={this.props.isDisabled}
- min={0}
- max={0.05}
- step={0.0025}
- value={this.props.value}
- onChange={this.props.onChange}
- tipFormatter={this._feePercentageSliderFormatter}
- tipProps={{ placement: 'bottom' }}
- trackStyle={{
- backgroundColor: '#b4b4b4',
- }}
- railStyle={{
- backgroundColor: '#696969',
- }}
- handleStyle={{
- border: 'none',
- boxShadow: 'none',
- }}
- activeDotStyle={{
- boxShadow: 'none',
- border: 'none',
- }}
- />
- );
- }
- private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => {
- return <Text fontColor={colors.black} fontSize="14px" fontWeight={700}>{`${(value * 100).toFixed(2)}%`}</Text>;
- };
-}
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
deleted file mode 100644
index d72585bfa..000000000
--- a/packages/website/ts/pages/instant/instant.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { utils as sharedUtils } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as DocumentTitle from 'react-document-title';
-
-import { Footer } from 'ts/components/footer';
-import { MetaTags } from 'ts/components/meta_tags';
-import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Container } from 'ts/components/ui/container';
-import { Configurator } from 'ts/pages/instant/configurator';
-import { Features } from 'ts/pages/instant/features';
-import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant';
-import { NeedMore } from 'ts/pages/instant/need_more';
-import { Screenshots } from 'ts/pages/instant/screenshots';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { colors } from 'ts/style/colors';
-import { ScreenWidths, WebsitePaths } from 'ts/types';
-import { Translate } from 'ts/utils/translate';
-import { utils } from 'ts/utils/utils';
-
-export interface InstantProps {
- location: Location;
- translate: Translate;
- dispatcher: Dispatcher;
- screenWidth: ScreenWidths;
-}
-
-export interface InstantState {}
-
-const CONFIGURATOR_HASH = 'configure';
-const THROTTLE_TIMEOUT = 100;
-const DOCUMENT_TITLE = '0x Instant';
-const DOCUMENT_DESCRIPTION = '0x Instant';
-
-export class Instant extends React.Component<InstantProps, InstantState> {
- // TODO: consolidate this small screen scaffolding into one place (its being used in portal and docs as well)
- private readonly _throttledScreenWidthUpdate: () => void;
- public constructor(props: InstantProps) {
- super(props);
- this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
- }
- public componentDidMount(): void {
- window.addEventListener('resize', this._throttledScreenWidthUpdate);
- window.scrollTo(0, 0);
- }
- public render(): React.ReactNode {
- return (
- <Container overflowX="hidden">
- <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
- <DocumentTitle title={DOCUMENT_TITLE} />
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- style={{ backgroundColor: colors.instantPrimaryBackground, position: 'relative' }}
- translate={this.props.translate}
- isNightVersion={true}
- />
- <Container backgroundColor={colors.instantPrimaryBackground} />
- <Introducing0xInstant screenWidth={this.props.screenWidth} onCTAClick={this._onGetStartedClick} />
- <Screenshots screenWidth={this.props.screenWidth} />
- <Features screenWidth={this.props.screenWidth} onGetStartedClick={this._onGetStartedClick} />
- {!this._isSmallScreen() && <Configurator hash={CONFIGURATOR_HASH} />}
- <NeedMore screenWidth={this.props.screenWidth} />
- <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
- </Container>
- );
- }
- private readonly _onGetStartedClick = () => {
- if (this._isSmallScreen()) {
- utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`);
- } else {
- this._scrollToConfigurator();
- }
- };
- private _isSmallScreen(): boolean {
- const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
- return isSmallScreen;
- }
- private _scrollToConfigurator(): void {
- sharedUtils.setUrlHash(CONFIGURATOR_HASH);
- sharedUtils.scrollToHash(CONFIGURATOR_HASH, '');
- }
- private _updateScreenWidth(): void {
- const newScreenWidth = utils.getScreenWidth();
- this.props.dispatcher.updateScreenWidth(newScreenWidth);
- }
-}