import * as _ from 'lodash'; 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 { ConfigGenerator } from 'ts/pages/instant/config_generator'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; 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 ( 0x Instant Configurator Code Snippet {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 ]`; }; }