From 723dd2bcde0a3c8277be7a000657f4acde0dfa4e Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 12 Dec 2018 19:45:11 +0100 Subject: WIP configurator --- .../ts/@next/pages/instant/configurator.tsx | 109 +++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 packages/website/ts/@next/pages/instant/configurator.tsx (limited to 'packages/website/ts/@next/pages/instant/configurator.tsx') diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx new file mode 100644 index 000000000..354a7c205 --- /dev/null +++ b/packages/website/ts/@next/pages/instant/configurator.tsx @@ -0,0 +1,109 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator'; +import { CodeDemo } from 'ts/pages/instant/code_demo'; +import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; +import { Link } from 'ts/@next/components/link'; + +import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; + +export interface ConfiguratorProps { + hash: string; +} + +export interface ConfiguratorState { + instantConfig: ZeroExInstantBaseConfig; +} + +export class Configurator extends React.Component { + 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 ( + + + + + + + Code Snippet + + Explore the Docs + + + {codeToDisplay} + + + ); + } + private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => { + this.setState({ + instantConfig: config, + }); + }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + return ` + + + + + + + + +`; + }; + 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 ]`; + }; +} + +const HeadingWrapper = styled.div` + display: flex; + justify-content: space-between; +`; -- cgit