diff options
Diffstat (limited to 'packages/website/ts/pages/instant')
5 files changed, 86 insertions, 29 deletions
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<ActionLinkProps> { ); } - private _handleClick = (event: React.MouseEvent<HTMLElement>) => { + private readonly _handleClick = (event: React.MouseEvent<HTMLElement>) => { 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<ConfigGeneratorProps> { + public render(): React.ReactNode { + const { value } = this.props; + return ( + <Container> + <Select value={value.orderSource as string} items={this._generateItems()} /> + </Container> + ); + } + private readonly _generateItems = (): SelectItemConfig[] => { + return _.map(SRA_ENDPOINTS, endpoint => ({ + text: endpoint, + onClick: this._handleSRASelection.bind(this, endpoint), + })); + }; + private readonly _handleSRASelection = (sraEndpoint: string) => { + const newConfig = { + ...this.props.value, + orderSource: sraEndpoint, + }; + this.props.onConfigChange(newConfig); + }; +} diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 29a3e2b1e..cf9985675 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -4,34 +4,56 @@ 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 { ZeroExInstantBaseConfig } from '../../../../instant/src/types'; + export interface ConfiguratorProps { hash: string; } -export const Configurator = (props: ConfiguratorProps) => ( - <Container - className="flex justify-center py4 px3" - id={props.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> - <Container height="400px" width="300px" backgroundColor="white" /> - </Container> - <Container className="mx3"> - <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="/docs/instant" color={colors.grey} /> +export interface ConfiguratorState { + instantConfig: ZeroExInstantBaseConfig; +} + +export class Configurator extends React.Component<ConfiguratorProps> { + public state = { + instantConfig: { + orderSource: 'https://api.radarrelay.com/0x/v2/', + }, + }; + public render(): React.ReactNode { + const { hash } = this.props; + 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"> + <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="/docs/instant" color={colors.grey} /> + </Container> + <CodeDemo /> + </Container> </Container> - <CodeDemo /> - </Container> - </Container> -); + ); + } + private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => { + this.setState({ + instantConfig: config, + }); + }; +} diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index 6c6835311..1e187c9da 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -2,9 +2,9 @@ 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 { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; import { utils } from 'ts/utils/utils'; |