From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:01:53 -0800 Subject: feat: move all @next files to non @next directory --- packages/website/ts/pages/instant/configurator.tsx | 104 +++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 packages/website/ts/pages/instant/configurator.tsx (limited to 'packages/website/ts/pages/instant/configurator.tsx') diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx new file mode 100644 index 000000000..7c67e6333 --- /dev/null +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -0,0 +1,104 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { CodeDemo } from 'ts/@next/pages/instant/code_demo'; +import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator'; + +import { Link } from 'ts/@next/components/link'; +import { Column, FlexWrap } from 'ts/@next/components/newLayout'; +import { Heading } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; + +import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types'; + +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 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; + + a { + transform: translateY(-8px); + } +`; -- cgit v1.2.3