0x: The Protocol for Trading Tokens

From ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 11:23:16 -0800 Subject: feat: have basic code syntax highlighting working --- packages/website/package.json | 2 + packages/website/public/index.html | 217 ++++++++++++--------- .../ts/pages/documentation/developers_page.tsx | 4 + packages/website/ts/pages/instant/code_demo.tsx | 45 +++++ packages/website/ts/pages/instant/configurator.tsx | 7 +- 5 files changed, 184 insertions(+), 91 deletions(-) create mode 100644 packages/website/ts/pages/instant/code_demo.tsx (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index dc10c7b1c..7d5c81858 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -54,6 +54,7 @@ "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", + "react-syntax-highlighter": "^10.1.1", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", "redux": "^3.6.0", @@ -83,6 +84,7 @@ "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", "@types/react-scroll": "1.5.3", + "@types/react-syntax-highlighter": "^0.0.8", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", "@types/web3-provider-engine": "^14.0.0", diff --git a/packages/website/public/index.html b/packages/website/public/index.html index a8a61f8ad..538eca6d9 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -1,95 +1,132 @@ + + + + + + + + + 0x: The Protocol for Trading Tokens + + + + + + + + + + - - - - - - - - - 0x: The Protocol for Trading Tokens - - - - - - - - - - - + + + + + + + - - - - + + +

+ +

+ + + - - -

- -

- - - - - - - - - - - - \ No newline at end of file + t._e = []; + t.ready = function(f) { + t._e.push(f); + }; + return t; + })(document, 'script', 'twitter-wjs'); + + + + + + + + + diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index a84be7bfe..fcca2b6ad 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -2,6 +2,7 @@ import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/ import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle from 'react-document-title'; +import { Helmet } from 'react-helmet'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; @@ -146,6 +147,9 @@ export class DevelopersPage extends React.Component + + + = props => { + const codeString = ` + + + + +`; + return ( + + {codeString} + + ); +}; diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index c836739bb..2314f968f 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { CodeDemo } from 'ts/pages/instant/code_demo'; import { colors } from 'ts/style/colors'; export interface ConfiguratorProps { @@ -8,5 +9,9 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - + + + + + ); -- cgit v1.2.3 From 6f394128d46420b336fb50a07f638b12bbb55eec Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:01:41 -0800 Subject: feat: improve styling of code demo component --- packages/website/ts/pages/instant/code_demo.tsx | 131 +++++++++++++++++++-- packages/website/ts/pages/instant/configurator.tsx | 7 +- 2 files changed, 126 insertions(+), 12 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 9764227a1..b029cc368 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,24 +1,145 @@ import * as React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; +import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { Container } from 'ts/components/ui/container'; const CustomPre = styled.pre` + margin: 0px; + line-height: 24px; code { background-color: inherit !important; border-radius: 0px; font-family: 'Roboto Mono', sans-serif; border: none; } + .lsl { + background-color: #2a2a2a !important; + color: #999; + height: 100%; + text-align: center; + padding-right: 5px !important; + padding-left: 5px; + margin-right: 5px; + line-height: 25px; + padding-top: 10px; + } + .xml { + position: relative; + top: 10px; + } `; +const customStyle = { + 'hljs-comment': { + color: '#7e7887', + }, + 'hljs-quote': { + color: '#7e7887', + }, + 'hljs-variable': { + color: '#be4678', + }, + 'hljs-template-variable': { + color: '#be4678', + }, + 'hljs-attribute': { + color: '#be4678', + }, + 'hljs-regexp': { + color: '#be4678', + }, + 'hljs-link': { + color: '#be4678', + }, + 'hljs-tag': { + color: '#61f5ff', + }, + 'hljs-name': { + color: '#61f5ff', + }, + 'hljs-selector-id': { + color: '#be4678', + }, + 'hljs-selector-class': { + color: '#be4678', + }, + 'hljs-number': { + color: '#c994ff', + }, + 'hljs-meta': { + color: '#aa573c', + }, + 'hljs-built_in': { + color: '#aa573c', + }, + 'hljs-builtin-name': { + color: '#aa573c', + }, + 'hljs-literal': { + color: '#aa573c', + }, + 'hljs-type': { + color: '#aa573c', + }, + 'hljs-params': { + color: '#aa573c', + }, + 'hljs-string': { + color: '#bcff88', + }, + 'hljs-symbol': { + color: '#2a9292', + }, + 'hljs-bullet': { + color: '#2a9292', + }, + 'hljs-title': { + color: '#576ddb', + }, + 'hljs-section': { + color: '#576ddb', + }, + 'hljs-keyword': { + color: '#955ae7', + }, + 'hljs-selector-tag': { + color: '#955ae7', + }, + 'hljs-deletion': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#be4678', + }, + 'hljs-addition': { + color: '#19171c', + display: 'inline-block', + width: '100%', + backgroundColor: '#2a9292', + }, + hljs: { + display: 'block', + overflowX: 'auto', + background: colors.instantSecondaryBackground, + color: 'white', + fontSize: '12px', + }, + 'hljs-emphasis': { + fontStyle: 'italic', + }, + 'hljs-strong': { + fontWeight: 'bold', + }, +}; + export interface CodeDemoProps {} export const CodeDemo: React.StatelessComponent = props => { const codeString = ` - + `; return ( - + {codeString} ); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 2314f968f..09a51d0bb 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -9,9 +9,8 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - - - - + + Forms + ); -- cgit v1.2.3 From 09e2157639ad2d986b80f5480a1e9188a56ff3f9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:45:29 -0800 Subject: feat: factor out ActionLink component from features --- packages/website/ts/pages/instant/action_link.tsx | 51 +++++++++++++++++++++++ packages/website/ts/pages/instant/features.tsx | 40 ++---------------- 2 files changed, 54 insertions(+), 37 deletions(-) create mode 100644 packages/website/ts/pages/instant/action_link.tsx (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx new file mode 100644 index 000000000..8a0bf24ff --- /dev/null +++ b/packages/website/ts/pages/instant/action_link.tsx @@ -0,0 +1,51 @@ +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 { + public static defaultProps = { + fontSize: 16, + color: colors.white, + }; + public render(): React.ReactNode { + const { displayText, fontSize, color, className } = this.props; + return ( + + + + {displayText} + + + + + + + ); + } + + private _handleClick = (event: React.MouseEvent) => { + 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/features.tsx b/packages/website/ts/pages/instant/features.tsx index 9c1668c1c..6c6835311 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; @@ -61,17 +62,11 @@ export const Features = (props: FeatureProps) => { ); }; -interface LinkInfo { - displayText: string; - linkSrc?: string; - onClick?: () => void; -} - interface FeatureItemProps { imgSrc: string; title: string; description: string; - linkInfos: LinkInfo[]; + linkInfos: ActionLinkProps[]; screenWidth: ScreenWidths; } @@ -95,36 +90,7 @@ const FeatureItem = (props: FeatureItemProps) => { - {_.map(linkInfos, linkInfo => { - const onClick = (event: React.MouseEvent) => { - if (!_.isUndefined(linkInfo.onClick)) { - linkInfo.onClick(); - } else if (!_.isUndefined(linkInfo.linkSrc)) { - utils.openUrl(linkInfo.linkSrc); - } - }; - return ( - - - - {linkInfo.displayText} - - - - - - - ); - })} + {_.map(linkInfos, linkInfo => )} ); -- cgit v1.2.3 From a41dfa9ae0924a342324e49d9a3eba22fb255667 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:45:40 -0800 Subject: feat: implement configurator layout --- packages/website/ts/pages/instant/code_demo.tsx | 6 ++++- packages/website/ts/pages/instant/configurator.tsx | 27 +++++++++++++++++++--- 2 files changed, 29 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index b029cc368..4f44a6160 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -9,6 +9,10 @@ import { Container } from 'ts/components/ui/container'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; + overflow: hidden; + width: 600px; + height: 500px; + border-radius: 4px; code { background-color: inherit !important; border-radius: 0px; @@ -22,7 +26,7 @@ const CustomPre = styled.pre` text-align: center; padding-right: 5px !important; padding-left: 5px; - margin-right: 5px; + margin-right: 15px; line-height: 25px; padding-top: 10px; } diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 09a51d0bb..29a3e2b1e 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,6 +1,8 @@ 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 { colors } from 'ts/style/colors'; @@ -9,8 +11,27 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - - Forms - + + + + + 0x Instant Configurator + + + + + + + + Code Snippet + + + + + ); -- cgit v1.2.3 From f80768cae0c2fdb71237bbdddecc67aec1c1f67f Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 15:57:35 -0800 Subject: feat: add Select component and use for configurator --- packages/website/ts/components/ui/container.tsx | 33 +++- packages/website/ts/components/ui/select.tsx | 168 +++++++++++++++++++++ packages/website/ts/pages/instant/action_link.tsx | 2 +- packages/website/ts/pages/instant/code_demo.tsx | 3 - .../website/ts/pages/instant/config_generator.tsx | 38 +++++ packages/website/ts/pages/instant/configurator.tsx | 70 ++++++--- packages/website/ts/pages/instant/features.tsx | 2 +- 7 files changed, 285 insertions(+), 31 deletions(-) create mode 100644 packages/website/ts/components/ui/select.tsx create mode 100644 packages/website/ts/pages/instant/config_generator.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 7eab2a50f..cd0ed9986 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -1,6 +1,9 @@ import { TextAlignProperty } from 'csstype'; +import { darken } from 'polished'; import * as React from 'react'; +import { styled } from 'ts/style/theme'; + type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; @@ -17,10 +20,13 @@ export interface ContainerProps { paddingLeft?: StringOrNum; backgroundColor?: string; background?: string; + border?: string; + borderTop?: string; borderRadius?: StringOrNum; borderBottomLeftRadius?: StringOrNum; borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; + borderColor?: string; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; @@ -42,10 +48,23 @@ export interface ContainerProps { id?: string; onClick?: (event: React.MouseEvent) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; + shouldDarkenOnHover?: boolean; + shouldAddBoxShadowOnHover?: boolean; } -export const Container: React.StatelessComponent = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; +export const PlainContainer: React.StatelessComponent = props => { + const { + children, + className, + Tag, + isHidden, + id, + onClick, + shouldDarkenOnHover, + shouldAddBoxShadowOnHover, + // tslint:disable-next-line:trailing-comma + ...style + } = props; const visibility = isHidden ? 'hidden' : undefined; return ( @@ -54,6 +73,16 @@ export const Container: React.StatelessComponent = props => { ); }; +export const Container = styled(PlainContainer)` + &:hover { + ${props => + props.shouldDarkenOnHover + ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` + : ''}; + ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + } +`; + Container.defaultProps = { Tag: 'div', }; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx new file mode 100644 index 000000000..abf202c67 --- /dev/null +++ b/packages/website/ts/components/ui/select.tsx @@ -0,0 +1,168 @@ +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 { + 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 ( + + {isOpen && ( + + )} + + + + + {value} + + + {label && ( + + {label} + + )} + {hasItems && ( + + + + )} + + + + {isOpen && ( + + {_.map(items, (item, index) => ( + + ))} + + )} + + + ); + } + 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 = ({ + text, + onClick, + isLast, + border, + backgroundColor, + textColor, + fontSize, +}) => ( + + + {text} + + +); diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx index 8a0bf24ff..5612dc25b 100644 --- a/packages/website/ts/pages/instant/action_link.tsx +++ b/packages/website/ts/pages/instant/action_link.tsx @@ -41,7 +41,7 @@ export class ActionLink extends React.Component { ); } - private _handleClick = (event: React.MouseEvent) => { + private readonly _handleClick = (event: React.MouseEvent) => { if (!_.isUndefined(this.props.onClick)) { this.props.onClick(); } else if (!_.isUndefined(this.props.linkSrc)) { diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4f44a6160..e9ecad40d 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,11 +1,8 @@ import * as React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; -import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; -import { Container } from 'ts/components/ui/container'; - const CustomPre = styled.pre` margin: 0px; line-height: 24px; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx new file mode 100644 index 000000000..d63975e31 --- /dev/null +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -0,0 +1,38 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Select, SelectItemConfig } from 'ts/components/ui/select'; + +import { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; + +export interface ConfigGeneratorProps { + value: ZeroExInstantBaseConfig; + onConfigChange: (config: ZeroExInstantBaseConfig) => void; +} + +const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; + +export class ConfigGenerator extends React.Component { + public render(): React.ReactNode { + const { value } = this.props; + return ( + + + + + - + {this._renderTokenMultiSelectOrSpinner()} ); } + private readonly _getTokenSelectorProps = (): ConfigGeneratorSectionProps => { + 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 _getAllKnownAssetDatas = (): string[] => { + return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address)); + }; private readonly _handleSRASelection = (sraEndpoint: string) => { - const newConfig = { + const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, orderSource: sraEndpoint, }; 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 = []; - if (_.includes(value.availableAssetDatas, assetData)) { + const { allKnownTokens } = this.state; + let newAvailableAssetDatas: string[] = []; + const availableAssetDatas = value.availableAssetDatas; + if (_.isUndefined(availableAssetDatas)) { + // It being undefined means it's all tokens. + const allKnownAssetDatas = this._getAllKnownAssetDatas(); + newAvailableAssetDatas = _.pull(allKnownAssetDatas, assetData); + } else if (!_.includes(availableAssetDatas, assetData)) { // Add it - newAvailableAssetDatas = [...value.availableAssetDatas, assetData]; + newAvailableAssetDatas = [...availableAssetDatas, assetData]; } else { // Remove it - newAvailableAssetDatas = _.remove(value.availableAssetDatas, assetData); + newAvailableAssetDatas = _.pull(availableAssetDatas, assetData); } - const newConfig = { + const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, availableAssetDatas: newAvailableAssetDatas, }; this.props.onConfigChange(newConfig); }; - private _setAllKnownTokens = async (callback: () => void): Promise => { + private readonly _setAllKnownTokens = async (callback: () => void): Promise => { const tokenInfos = await backendClient.getTokenInfosAsync(); const allKnownTokens = _.reduce( tokenInfos, @@ -101,7 +139,7 @@ export class ConfigGenerator extends React.Component { ); this.setState({ allKnownTokens }, callback); }; - private _setAvailableAssetsFromOrderProvider = async (): Promise => { + private readonly _setAvailableAssetsFromOrderProvider = async (): Promise => { const { value } = this.props; if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) { this.setState({ isLoadingAvailableTokens: true }); @@ -119,13 +157,23 @@ export class ConfigGenerator extends React.Component { this.setState({ availableTokens, isLoadingAvailableTokens: false }); } }; - private _renderTokenMultiSelectOrSpinner = (): React.ReactNode => { + private readonly _renderTokenMultiSelectOrSpinner = (): React.ReactNode => { const { value } = this.props; const { availableTokens, isLoadingAvailableTokens } = this.state; + const multiSelectHeight = '200px'; if (isLoadingAvailableTokens) { return ( - - + + + + + Loading... ); } @@ -133,15 +181,24 @@ export class ConfigGenerator extends React.Component { const assetData = assetDataUtils.encodeERC20AssetData(token.address); return { value: assetDataUtils.encodeERC20AssetData(token.address), - displayText: ( - - {token.symbol} - {token.name} - + renderItemContent: (isSelected: boolean) => ( + + + + + + {token.symbol} — {token.name} + + ), onClick: this._handleTokenClick.bind(this, assetData), }; }); - return ; + return ; }; } @@ -151,13 +208,23 @@ export interface ConfigGeneratorSectionProps { onActionTextClick?: () => void; } -export const ConfigGeneratorSection: React.StatelessComponent = props => ( +export const ConfigGeneratorSection: React.StatelessComponent = ({ + title, + actionText, + onActionTextClick, + children, +}) => ( - + - {props.title} + {title} + {actionText && ( + + {actionText} + + )} - {props.children} + {children} ); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index cf9985675..f4987c0de 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -18,9 +18,10 @@ export interface ConfiguratorState { } export class Configurator extends React.Component { - public state = { + public state: ConfiguratorState = { instantConfig: { orderSource: 'https://api.radarrelay.com/0x/v2/', + availableAssetDatas: [], }, }; public render(): React.ReactNode { diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 1e187c9da..c88958bbf 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -90,7 +90,11 @@ const FeatureItem = (props: FeatureItemProps) => { - {_.map(linkInfos, linkInfo => )} + {_.map(linkInfos, linkInfo => ( + + + + ))} ); -- cgit v1.2.3 From 9e69257b0db8ce959c0209d4389f9e3a753839bd Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 11:08:49 -0800 Subject: feat: implement code generation --- packages/website/ts/pages/instant/code_demo.tsx | 34 ++++++------------- packages/website/ts/pages/instant/configurator.tsx | 38 +++++++++++++++++++++- packages/website/ts/pages/instant/features.tsx | 4 +-- 3 files changed, 49 insertions(+), 27 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e9ecad40d..fa0cebc62 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; - overflow: hidden; + overflow: scroll; width: 600px; height: 500px; border-radius: 4px; @@ -123,7 +123,7 @@ const customStyle = { }, hljs: { display: 'block', - overflowX: 'auto', + overflowX: 'hidden', background: colors.instantSecondaryBackground, color: 'white', fontSize: '12px', @@ -136,26 +136,12 @@ const customStyle = { }, }; -export interface CodeDemoProps {} +export interface CodeDemoProps { + children: string; +} -export const CodeDemo: React.StatelessComponent = props => { - const codeString = ` - - - - -`; - return ( - - {codeString} - - ); -}; +export const CodeDemo: React.StatelessComponent = props => ( + + {props.children} + +); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index f4987c0de..0fb6d7ef8 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; @@ -26,6 +27,7 @@ export class Configurator extends React.Component { }; public render(): React.ReactNode { const { hash } = this.props; + const codeToDisplay = this._generateCodeDemoCode(); return ( { - + {codeToDisplay} ); @@ -57,4 +59,38 @@ export class Configurator extends React.Component { instantConfig: config, }); }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + console.log(instantConfig.availableAssetDatas); + return ` + + + + + `; + }; + private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { + const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); + if (availableAssetDatas.length < 2) { + return `[${stringAvailableAssetDatas.join(', ')}]`; + } + return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + }; } diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index c88958bbf..230a8496b 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -91,8 +91,8 @@ const FeatureItem = (props: FeatureItemProps) => { {_.map(linkInfos, linkInfo => ( - - + + ))} -- cgit v1.2.3 From 4b6ac96a8db908b02a352357592dfef986e23fdc Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 16:01:16 -0800 Subject: fix: use correct styles even when syntax highlighter component removes classnames on second render --- packages/website/ts/pages/instant/code_demo.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index fa0cebc62..20eb6b8d1 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -8,7 +8,8 @@ const CustomPre = styled.pre` line-height: 24px; overflow: scroll; width: 600px; - height: 500px; + height: 100%; + max-height: 800px; border-radius: 4px; code { background-color: inherit !important; @@ -16,7 +17,7 @@ const CustomPre = styled.pre` font-family: 'Roboto Mono', sans-serif; border: none; } - .lsl { + code:first-of-type { background-color: #2a2a2a !important; color: #999; height: 100%; @@ -27,7 +28,7 @@ const CustomPre = styled.pre` line-height: 25px; padding-top: 10px; } - .xml { + code:last-of-type { position: relative; top: 10px; } -- cgit v1.2.3 From a192b309f339f451d647f4b9f71eac2d6684f738 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 12:24:37 -0800 Subject: feat: implement basic feeRecipient address in config generator --- packages/website/ts/components/ui/input.tsx | 6 ++- .../website/ts/pages/instant/config_generator.tsx | 22 +++++++- .../instant/config_generator_address_input.tsx | 60 ++++++++++++++++++++++ packages/website/ts/pages/instant/configurator.tsx | 19 ++++--- 4 files changed, 96 insertions(+), 11 deletions(-) create mode 100644 packages/website/ts/pages/instant/config_generator_address_input.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e5f4f6c70..1f56c814f 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -8,6 +8,7 @@ export interface InputProps { width?: string; fontSize?: string; fontColor?: string; + border?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -23,9 +24,11 @@ export const Input = styled(PlainInput)` width: ${props => props.width}; padding: 0.8em 1.2em; border-radius: 3px; + box-sizing: border-box; font-family: 'Roboto Mono'; color: ${props => props.fontColor}; - border: none; + border: ${props => props.border}; + outline: none; background-color: ${props => props.backgroundColor}; &::placeholder { color: ${props => props.placeholderColor}; @@ -38,6 +41,7 @@ Input.defaultProps = { fontColor: colors.darkestGrey, placeholderColor: colors.darkGrey, fontSize: '12px', + border: 'none', }; Input.displayName = 'Input'; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index d1ea66557..9c3161dcc 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -11,6 +11,7 @@ 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 { colors } from 'ts/style/colors'; import { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -32,7 +33,7 @@ export interface ConfigGeneratorState { const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; -export class ConfigGenerator extends React.Component { +export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { isLoadingAvailableTokens: true, allKnownTokens: {}, @@ -52,12 +53,18 @@ export class ConfigGenerator extends React.Component { } return ( - + + {hasError && ( + + + {errMsg} + + + )} + + ); + } + + private _handleChange = (event: React.ChangeEvent): void => { + const address = event.target.value; + const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; + const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; + this.setState({ + errMsg, + }); + this.props.onChange(address); + }; +} diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 0fb6d7ef8..e72f07a70 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -23,6 +23,10 @@ export class Configurator extends React.Component { instantConfig: { orderSource: 'https://api.radarrelay.com/0x/v2/', availableAssetDatas: [], + affiliateInfo: { + feeRecipient: '', + feePercentage: 0.1, + }, }, }; public render(): React.ReactNode { @@ -61,7 +65,6 @@ export class Configurator extends React.Component { }; private readonly _generateCodeDemoCode = (): string => { const { instantConfig } = this.state; - console.log(instantConfig.availableAssetDatas); return ` @@ -69,18 +72,18 @@ export class Configurator extends React.Component { -- cgit v1.2.3 From de1c296d280266d71aeebcfc7050de639536513c Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 12:54:29 -0800 Subject: feat: add fee percentage slier --- .../website/ts/pages/instant/config_generator.tsx | 28 ++++++++++++++++++++++ .../instant/config_generator_address_input.tsx | 2 +- packages/website/ts/pages/instant/configurator.tsx | 2 +- 3 files changed, 30 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 9c3161dcc..8b56834ea 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -3,6 +3,7 @@ import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses'; import { assetDataUtils } from '@0x/order-utils'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; +import Slider from 'material-ui/Slider'; import * as React from 'react'; import { CheckMark } from 'ts/components/ui/check_mark'; @@ -65,6 +66,19 @@ export class ConfigGenerator extends React.Component + + + ); } @@ -91,6 +105,9 @@ export class ConfigGenerator extends React.Component { return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address)); }; + private readonly _handleAffiliatePercentageLearnMoreClick = (): void => { + window.open('/wiki#Learn-About-Affiliate-Fees', '_blank'); + }; private readonly _handleSRASelection = (sraEndpoint: string) => { const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, @@ -109,6 +126,17 @@ export class ConfigGenerator extends React.Component { + 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, diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx index dbda547cd..de2640f48 100644 --- a/packages/website/ts/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -48,7 +48,7 @@ export class ConfigGeneratorAddressInput extends React.Component< ); } - private _handleChange = (event: React.ChangeEvent): void => { + private readonly _handleChange = (event: React.ChangeEvent): void => { const address = event.target.value; const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index e72f07a70..0ce1d9810 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -25,7 +25,7 @@ export class Configurator extends React.Component { availableAssetDatas: [], affiliateInfo: { feeRecipient: '', - feePercentage: 0.1, + feePercentage: 0.01, }, }, }; -- cgit v1.2.3 From 50bfbda79a312651581f03614c1b4f4cbbe49cf1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 14:30:38 -0800 Subject: feat: add fee percentage slider --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- .../website/ts/pages/instant/config_generator.tsx | 27 ++++++++++++++---- .../instant/config_generator_address_input.tsx | 14 ++++------ packages/website/ts/pages/instant/configurator.tsx | 32 +++++++++++----------- 4 files changed, 44 insertions(+), 31 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 20eb6b8d1..e57e39dff 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - height: 100%; + min-height: 100%; text-align: center; padding-right: 5px !important; padding-left: 5px; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 8b56834ea..efd1be096 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -53,14 +53,14 @@ export class ConfigGenerator extends React.Component + - {hasError && ( - - - {errMsg} - - - )} + + + {errMsg} + + ); } diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 0ce1d9810..5700bdc1d 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -46,7 +46,7 @@ export class Configurator extends React.Component { - + Code Snippet @@ -66,34 +66,34 @@ export class Configurator extends React.Component { private readonly _generateCodeDemoCode = (): string => { const { instantConfig } = this.state; return ` - - - - + + + - `; + }, 'body'); + +`; }; private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); if (availableAssetDatas.length < 2) { return `[${stringAvailableAssetDatas.join(', ')}]`; } - return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n ]`; }; } -- cgit v1.2.3 From d8a3fc0be012ff88a851d2f388662b4aaaec5199 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 15:07:24 -0800 Subject: feat: make (optional) label inline --- packages/website/ts/pages/instant/config_generator.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index efd1be096..08aaa1d81 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -267,11 +267,12 @@ export const ConfigGeneratorSection: React.StatelessComponent - + {title} {isOptional && ( - + + {' '} (optional) )} -- cgit v1.2.3 From 48bfe9274079be308df754f19dcd0030f014b93c Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 16:47:52 -0800 Subject: feat: create more dank slider --- packages/website/package.json | 2 + .../website/ts/pages/instant/config_generator.tsx | 9 +-- .../ts/pages/instant/fee_percentage_slider.tsx | 81 ++++++++++++++++++++++ 3 files changed, 86 insertions(+), 6 deletions(-) create mode 100644 packages/website/ts/pages/instant/fee_percentage_slider.tsx (limited to 'packages/website') diff --git a/packages/website/package.json b/packages/website/package.json index c02e1eee2..5d2e563e9 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -48,6 +48,7 @@ "numeral": "^2.0.6", "polished": "^1.9.2", "query-string": "^6.0.0", + "rc-slider": "^8.6.3", "react": "^16.4.2", "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.3", @@ -80,6 +81,7 @@ "@types/node": "*", "@types/numeral": "^0.0.22", "@types/query-string": "^5.1.0", + "@types/rc-slider": "^8.6.0", "@types/react": "^16.4.2", "@types/react-copy-to-clipboard": "^4.2.0", "@types/react-dom": "^16.0.7", diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 08aaa1d81..facda850e 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -3,7 +3,6 @@ import { getContractAddressesForNetworkOrThrow } from '@0x/contract-addresses'; import { assetDataUtils } from '@0x/order-utils'; import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; -import Slider from 'material-ui/Slider'; import * as React from 'react'; import { CheckMark } from 'ts/components/ui/check_mark'; @@ -13,6 +12,7 @@ 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 { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -71,10 +71,7 @@ export class ConfigGenerator extends React.Component - @@ -126,7 +123,7 @@ export class ConfigGenerator extends React.Component { + private readonly _handleAffiliatePercentageChange = (value: number) => { const oldConfig: ZeroExInstantBaseConfig = this.props.value; const newConfig: ZeroExInstantBaseConfig = { ...oldConfig, diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx new file mode 100644 index 000000000..e57319ed5 --- /dev/null +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -0,0 +1,81 @@ +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, styled } from 'ts/style/theme'; + +const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); + +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-color: rgba(136, 183, 213, 0); + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } +`; + +const StyledSlider = styled(SliderWithTooltip)` + .rc-slider-tooltip-inner { + background-color: ${colors.white}; + box-shadow: none; + padding: 3px; + } +`; + +export interface FeePercentageSliderProps { + value: number; + onChange: (value: number) => void; +} + +export class FeePercentageSlider extends React.Component { + public render(): React.ReactNode { + return ( + + ); + } + private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => { + return {`${(value * 100).toFixed(2)}%`}; + }; +} -- cgit v1.2.3 From 1ce84f9bb2b537b5cf5161fa5c5fe930d3981cd6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 16:51:55 -0800 Subject: fix: address to lowercase and explore the docs leads to correct wiki --- packages/website/ts/pages/instant/configurator.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 5700bdc1d..725b02fae 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -51,7 +51,7 @@ export class Configurator extends React.Component { Code Snippet - + {codeToDisplay} @@ -74,7 +74,7 @@ export class Configurator extends React.Component { liquiditySource: '${instantConfig.orderSource}',${ !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient ? `\n affiliateInfo: { - feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}', feePercentage: ${instantConfig.affiliateInfo.feePercentage} }` : '' -- cgit v1.2.3 From db21ae3af1513f696b5c5ec0f4a1a3434cb4546d Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 17:29:31 -0800 Subject: feat: fetch asset meta data from the asset meta data map --- .../website/ts/pages/instant/config_generator.tsx | 54 +++++++++------------- 1 file changed, 23 insertions(+), 31 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index facda850e..671b1f6df 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -18,7 +18,8 @@ import { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; -import { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; +import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map'; +import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../instant/src/types'; export interface ConfigGeneratorProps { value: ZeroExInstantBaseConfig; @@ -28,8 +29,7 @@ export interface ConfigGeneratorProps { export interface ConfigGeneratorState { isLoadingAvailableTokens: boolean; // Address to token info - allKnownTokens: ObjectMap; - availableTokens?: WebsiteBackendTokenInfo[]; + availableTokens?: ObjectMap; } const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; @@ -37,10 +37,9 @@ const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrel export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { isLoadingAvailableTokens: true, - allKnownTokens: {}, }; public componentDidMount(): void { - this._setAllKnownTokens(this._setAvailableAssetsFromOrderProvider); + this._setAvailableAssetsFromOrderProvider(); } public componentDidUpdate(prevProps: ConfigGeneratorProps): void { if (prevProps.value.orderSource !== this.props.value.orderSource) { @@ -99,9 +98,6 @@ export class ConfigGenerator extends React.Component { - return _.map(this.state.allKnownTokens, token => assetDataUtils.encodeERC20AssetData(token.address)); - }; private readonly _handleAffiliatePercentageLearnMoreClick = (): void => { window.open('/wiki#Learn-About-Affiliate-Fees', '_blank'); }; @@ -150,16 +146,19 @@ export class ConfigGenerator extends React.Component { const { value } = this.props; - const { allKnownTokens } = this.state; let newAvailableAssetDatas: string[] = []; + const allKnownAssetDatas = _.keys(this.state.availableTokens); const availableAssetDatas = value.availableAssetDatas; if (_.isUndefined(availableAssetDatas)) { // It being undefined means it's all tokens. - const allKnownAssetDatas = this._getAllKnownAssetDatas(); 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); @@ -170,18 +169,6 @@ export class ConfigGenerator extends React.Component void): Promise => { - const tokenInfos = await backendClient.getTokenInfosAsync(); - const allKnownTokens = _.reduce( - tokenInfos, - (acc, tokenInfo) => { - acc[tokenInfo.address] = tokenInfo; - return acc; - }, - {} as ObjectMap, - ); - this.setState({ allKnownTokens }, callback); - }; private readonly _setAvailableAssetsFromOrderProvider = async (): Promise => { const { value } = this.props; if (!_.isUndefined(value.orderSource) && _.isString(value.orderSource)) { @@ -191,11 +178,16 @@ export class ConfigGenerator extends React.Component { - const address = assetDataUtils.decodeAssetDataOrThrow(assetData).tokenAddress; - return this.state.allKnownTokens[address]; - }), + const availableTokens = _.reduce( + assetDatas, + (acc, assetData) => { + const metaDataIfExists = assetMetaDataMap[assetData] as ERC20AssetMetaData; + if (metaDataIfExists) { + acc[assetData] = metaDataIfExists; + } + return acc; + }, + {} as ObjectMap, ); this.setState({ availableTokens, isLoadingAvailableTokens: false }); } @@ -220,10 +212,10 @@ export class ConfigGenerator extends React.Component ); } - const items = _.map(availableTokens, token => { - const assetData = assetDataUtils.encodeERC20AssetData(token.address); + const items = _.map(_.keys(availableTokens), assetData => { + const metaData = availableTokens[assetData]; return { - value: assetDataUtils.encodeERC20AssetData(token.address), + value: assetData, renderItemContent: (isSelected: boolean) => ( @@ -234,7 +226,7 @@ export class ConfigGenerator extends React.Component - {token.symbol} — {token.name} + {metaData.symbol.toUpperCase()} — {metaData.name} ), -- cgit v1.2.3 From cd44dc7beb1697ec76dccba4711b3ce8057ba6e4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 17:37:32 -0800 Subject: polish: make configurator inputs look more like mocks --- packages/website/ts/components/ui/input.tsx | 4 +++- packages/website/ts/components/ui/select.tsx | 4 ++-- packages/website/ts/pages/instant/config_generator_address_input.tsx | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index 1f56c814f..d21b9fd0e 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -9,6 +9,7 @@ export interface InputProps { fontSize?: string; fontColor?: string; border?: string; + padding?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -22,7 +23,7 @@ const PlainInput: React.StatelessComponent = ({ value, className, pl export const Input = styled(PlainInput)` font-size: ${props => props.fontSize}; width: ${props => props.width}; - padding: 0.8em 1.2em; + padding: ${props => props.padding}; border-radius: 3px; box-sizing: border-box; font-family: 'Roboto Mono'; @@ -42,6 +43,7 @@ Input.defaultProps = { placeholderColor: colors.darkGrey, fontSize: '12px', border: 'none', + padding: '0.8em 1.2em', }; Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx index 743b082b0..e4fb50f59 100644 --- a/packages/website/ts/components/ui/select.tsx +++ b/packages/website/ts/components/ui/select.tsx @@ -65,7 +65,7 @@ export class Select extends React.Component { hasBoxShadow={isOpen} border={border} backgroundColor={backgroundColor} - padding="0.8em" + padding="0.5em 0.8em" width="100%" > @@ -79,7 +79,7 @@ export class Select extends React.Component { )} {hasItems && ( - + Date: Mon, 3 Dec 2018 17:52:35 -0800 Subject: feat: update relayer list --- .../website/ts/pages/instant/config_generator.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 671b1f6df..4e25e3437 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -32,7 +32,11 @@ export interface ConfigGeneratorState { availableTokens?: ObjectMap; } -const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; +const SRA_ENDPOINTS = [ + 'https://api.radarrelay.com/0x/v2/', + 'https://api.sharkrelay.com/sra/v2/', + 'https://sra.bamboorelay.com/0x/v2/', +]; export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { @@ -212,6 +216,20 @@ export class ConfigGenerator extends React.Component ); } + const availableAssetDatas = _.keys(availableTokens); + if (availableAssetDatas.length === 0) { + return ( + + No tokens available. Try another endpoint? + + ); + } const items = _.map(_.keys(availableTokens), assetData => { const metaData = availableTokens[assetData]; return { -- cgit v1.2.3 From ea4155e5fa69fe488eb183255f7ba64c9c07855b Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 18:00:30 -0800 Subject: fix: change liquiditySource to orderSource --- packages/website/ts/pages/instant/configurator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 725b02fae..9f1fa8359 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -71,7 +71,7 @@ export class Configurator extends React.Component { - - - + + + -`; + }, 'body'); + + +`; }; private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); if (availableAssetDatas.length < 2) { return `[${stringAvailableAssetDatas.join(', ')}]`; } - return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n ]`; + return `[\n ${stringAvailableAssetDatas.join( + ', \n ', + )}\n ]`; }; } -- cgit v1.2.3 From f576f78b4a18e45ff2ed55ab840c0bacce87ad7c Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 11:22:49 -0800 Subject: fix: do not show select all if no tokens are available --- packages/website/ts/pages/instant/config_generator.tsx | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 4e25e3437..f2c9c698b 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -83,6 +83,11 @@ export class ConfigGenerator extends React.Component { + 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?', -- cgit v1.2.3 From b7d804e9491349ca2ec61b812e744e1739542edd Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 11:26:51 -0800 Subject: fix: make select box-shadow darker --- packages/website/ts/components/ui/container.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 4b76ce8be..c2ae9ad9c 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -77,15 +77,17 @@ export const PlainContainer: React.StatelessComponent = props => ); }; +const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)'; + export const Container = styled(PlainContainer)` box-sizing: border-box; - ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')}; &:hover { ${props => props.shouldDarkenOnHover ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` : ''}; - ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + ${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')}; } `; -- cgit v1.2.3 From 36f22ba069968ad50df9b6f1c2fda798dd5c95bb Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:23:25 -0800 Subject: fix: reset available tokens when sra endpoint is changed --- packages/website/ts/pages/instant/config_generator.tsx | 7 ++++++- .../website/ts/pages/instant/config_generator_address_input.tsx | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index f2c9c698b..34c242348 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -48,6 +48,11 @@ export class ConfigGenerator extends React.Component { + private readonly _handleAffiliateAddressChange = (address: string, isValid: boolean) => { const oldConfig: ZeroExInstantBaseConfig = this.props.value; const newConfig: ZeroExInstantBaseConfig = { ...oldConfig, diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx index c208fe52a..ccbaf4482 100644 --- a/packages/website/ts/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -9,7 +9,7 @@ import { Text } from 'ts/components/ui/text'; export interface ConfigGeneratorAddressInputProps { value?: string; - onChange?: (address: string) => void; + onChange?: (address: string, isValid: boolean) => void; } export interface ConfigGeneratorAddressInputState { @@ -54,6 +54,6 @@ export class ConfigGeneratorAddressInput extends React.Component< this.setState({ errMsg, }); - this.props.onChange(address); + this.props.onChange(address, isValidAddress); }; } -- cgit v1.2.3 From 110d05f6457d2286c3a6d455d17745b1c8a2e0b4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:43:39 -0800 Subject: fix: use WebsitePaths type and update wiki link to new link --- packages/website/ts/pages/instant/config_generator.tsx | 4 ++-- packages/website/ts/pages/instant/configurator.tsx | 7 ++++++- packages/website/ts/pages/instant/features.tsx | 8 ++++---- packages/website/ts/pages/instant/instant.tsx | 4 ++-- packages/website/ts/pages/instant/need_more.tsx | 4 ++-- 5 files changed, 16 insertions(+), 11 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 34c242348..ac404718f 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -14,7 +14,7 @@ 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 { WebsiteBackendTokenInfo } from 'ts/types'; +import { WebsitePaths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; @@ -113,7 +113,7 @@ export class ConfigGenerator extends React.Component { - window.open('/wiki#Learn-About-Affiliate-Fees', '_blank'); + window.open(`${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, '_blank'); }; private readonly _handleSRASelection = (sraEndpoint: string) => { const newConfig: ZeroExInstantBaseConfig = { diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index e3766057e..d19a5b4fe 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -7,6 +7,7 @@ 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'; @@ -51,7 +52,11 @@ export class Configurator extends React.Component { Code Snippet - + {codeToDisplay} diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 230a8496b..6c2656021 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -6,7 +6,7 @@ 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 } from 'ts/types'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; import { utils } from 'ts/utils/utils'; export interface FeatureProps { @@ -22,7 +22,7 @@ export const Features = (props: FeatureProps) => { }; const exploreTheDocsLinkInfo = { displayText: 'Explore the docs', - linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Get-Started`, + linkSrc: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, }; const tokenLinkInfos = isSmallScreen ? [getStartedLinkInfo] : [getStartedLinkInfo, exploreTheDocsLinkInfo]; return ( @@ -41,7 +41,7 @@ export const Features = (props: FeatureProps) => { linkInfos={[ { displayText: 'Learn about affiliate fees', - linkSrc: `${utils.getCurrentBaseUrl()}/wiki#Learn-About-Affiliate-Fees`, + linkSrc: `${WebsitePaths.Wiki}#Learn-About-Affiliate-Fees`, }, ]} screenWidth={props.screenWidth} @@ -53,7 +53,7 @@ export const Features = (props: FeatureProps) => { linkInfos={[ { displayText: 'Explore AssetBuyer', - linkSrc: `${utils.getCurrentBaseUrl()}/docs/asset-buyer`, + linkSrc: `${WebsitePaths.Docs}/asset-buyer`, }, ]} screenWidth={props.screenWidth} diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index fa6bd1c33..d72585bfa 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -14,7 +14,7 @@ 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 } from 'ts/types'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -67,7 +67,7 @@ export class Instant extends React.Component { } private readonly _onGetStartedClick = () => { if (this._isSmallScreen()) { - utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`); + utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); } else { this._scrollToConfigurator(); } diff --git a/packages/website/ts/pages/instant/need_more.tsx b/packages/website/ts/pages/instant/need_more.tsx index e6d5c3694..70aea7363 100644 --- a/packages/website/ts/pages/instant/need_more.tsx +++ b/packages/website/ts/pages/instant/need_more.tsx @@ -4,7 +4,7 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -import { ScreenWidths } from 'ts/types'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -58,5 +58,5 @@ const onGetInTouchClick = () => { utils.openUrl(constants.URL_ZEROEX_CHAT); }; const onDocsClick = () => { - utils.openUrl(`${utils.getCurrentBaseUrl()}/wiki#Get-Started`); + utils.openUrl(`${WebsitePaths.Wiki}#Get-Started-With-Instant`); }; -- cgit v1.2.3 From 3e4b77757e3db5e79fc589475170d49a90c8375e Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:49:37 -0800 Subject: hack: make min-height of line-number container 98% to prevent scrollbar from appearing in code demo --- packages/website/ts/pages/instant/code_demo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e57e39dff..4fe1928f5 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - min-height: 100%; + min-height: 98%; text-align: center; padding-right: 5px !important; padding-left: 5px; -- cgit v1.2.3 From cb9f7a06646014511591bfb110c9013bb40ea667 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:53:09 -0800 Subject: chore: remove shark relay from possible SRA endpoints --- packages/website/ts/pages/instant/config_generator.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index ac404718f..b320d2600 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -32,11 +32,7 @@ export interface ConfigGeneratorState { availableTokens?: ObjectMap; } -const SRA_ENDPOINTS = [ - 'https://api.radarrelay.com/0x/v2/', - 'https://api.sharkrelay.com/sra/v2/', - 'https://sra.bamboorelay.com/0x/v2/', -]; +const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://sra.bamboorelay.com/0x/v2/']; export class ConfigGenerator extends React.Component { public state: ConfigGeneratorState = { -- cgit v1.2.3 From 01e1e5ac3b5ae970ade80efb5e71212ddb33eb93 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 12:59:16 -0800 Subject: chore: fix linter issues --- packages/website/ts/pages/instant/config_generator.tsx | 3 ++- packages/website/ts/pages/instant/features.tsx | 1 - packages/website/ts/pages/instant/fee_percentage_slider.tsx | 11 +---------- 3 files changed, 3 insertions(+), 12 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index b320d2600..fe70ef04c 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -15,7 +15,6 @@ import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_a import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; -import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map'; @@ -39,10 +38,12 @@ export class ConfigGenerator extends React.Component void; -- cgit v1.2.3 From ce013489ecf86ac7ad51e2f2cd435b18d6054993 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 14:30:31 -0800 Subject: feat: add copy code feature --- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/pages/instant/code_demo.tsx | 20 +++++++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c2ae9ad9c..ae00851e5 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -44,6 +44,7 @@ export interface ContainerProps { right?: string; bottom?: string; zIndex?: number; + float?: 'right' | 'left'; Tag?: ContainerTag; cursor?: string; id?: string; diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 4fe1928f5..9a04fceed 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; +import * as CopyToClipboard from 'react-copy-to-clipboard'; import SyntaxHighlighter from 'react-syntax-highlighter'; + +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; @@ -142,7 +147,16 @@ export interface CodeDemoProps { } export const CodeDemo: React.StatelessComponent = props => ( - - {props.children} - + + + + + + + + {props.children} + + ); -- cgit v1.2.3 From 5c29b918df4ac8b0f7914e8da10fa1ae530ff4e8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 15:45:23 -0800 Subject: chore: run linter --- packages/website/ts/pages/instant/code_demo.tsx | 1 - packages/website/ts/pages/instant/fee_percentage_slider.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 9a04fceed..c5e565d61 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -4,7 +4,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx index 6256c6cb3..4c92883cb 100644 --- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -import { injectGlobal, styled } from 'ts/style/theme'; +import { injectGlobal } from 'ts/style/theme'; const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); // tslint:disable-next-line:no-unused-expression -- cgit v1.2.3 From 1f8c09779d57ec0243e3c8d15e9e461c6d491018 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:34:24 -0800 Subject: chore: make default fee percentage in configurator 0 --- packages/website/ts/pages/instant/configurator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index d19a5b4fe..a6c792edf 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -26,7 +26,7 @@ export class Configurator extends React.Component { availableAssetDatas: undefined, affiliateInfo: { feeRecipient: '', - feePercentage: 0.01, + feePercentage: 0, }, }, }; -- cgit v1.2.3 From fb221e4ca9eec6a66130e3f8230457a1fcee20f8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:41:57 -0800 Subject: feat: notify user they've copied to clipboard on copy --- packages/website/ts/pages/instant/code_demo.tsx | 43 +++++++++++++++++-------- 1 file changed, 29 insertions(+), 14 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index c5e565d61..b7a9f5b17 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -145,17 +145,32 @@ export interface CodeDemoProps { children: string; } -export const CodeDemo: React.StatelessComponent = props => ( - - - - - - - - {props.children} - - -); +export interface CodeDemoState { + didCopyCode: boolean; +} + +export class CodeDemo extends React.Component { + public state: CodeDemoState = { + didCopyCode: false, + }; + public render(): React.ReactNode { + const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; + return ( + + + + + + + + {this.props.children} + + + ); + } + private readonly _handleCopyClick = () => { + this.setState({ didCopyCode: true }); + }; +} -- cgit v1.2.3 From b7603bef192dac4a3e87a365f77dc87c61dbd4f8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 5 Dec 2018 12:44:23 -0800 Subject: fix: ensure copy button is above code --- packages/website/ts/pages/instant/code_demo.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index b7a9f5b17..1bc1980e7 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,6 +6,7 @@ import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; +import { zIndex } from 'ts/style/z_index'; const CustomPre = styled.pre` margin: 0px; @@ -157,7 +158,7 @@ export class CodeDemo extends React.Component { const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy'; return ( - +