diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 07:57:35 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 07:57:35 +0800 |
commit | f80768cae0c2fdb71237bbdddecc67aec1c1f67f (patch) | |
tree | d3c310e026c37889e1c0f7c4d709107e16a858fc /packages/website/ts/pages/instant/configurator.tsx | |
parent | 0af07bcf49f62aeeed4aa5ae7bf0e4d5835836e9 (diff) | |
download | dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.gz dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.bz2 dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.lz dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.xz dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.zst dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.zip |
feat: add Select component and use for configurator
Diffstat (limited to 'packages/website/ts/pages/instant/configurator.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 70 |
1 files changed, 46 insertions, 24 deletions
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, + }); + }; +} |