diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:01:53 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:01:53 +0800 |
commit | abdf91c691b924b75d71db49fba296da9c8ddcac (patch) | |
tree | 78e62a107f1de7f3b16dd63bdbc039ab26b561a3 /packages/website/ts/pages/instant/configurator.tsx | |
parent | 9b540fd8e52e7578d3749e6d9ef9cd97d602ffb3 (diff) | |
download | dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.gz dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.bz2 dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.lz dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.xz dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.zst dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.zip |
feat: move all @next files to non @next directory
Diffstat (limited to 'packages/website/ts/pages/instant/configurator.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 104 |
1 files changed, 104 insertions, 0 deletions
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 ( + <FlexWrap isFlex={true}> + <Column width="442px" padding="0 70px 0 0"> + <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} /> + </Column> + <Column width="100%"> + <HeadingWrapper> + <Heading size="small" marginBottom="15px"> + Code Snippet + </Heading> + <Link href={`${WebsitePaths.Wiki}#Get-Started-With-Instant`} isBlock={true} target="_blank"> + Explore the Docs + </Link> + </HeadingWrapper> + <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo> + </Column> + </FlexWrap> + ); + } + private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => { + this.setState({ + instantConfig: config, + }); + }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + return `<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <script src="https://instant.0x.org/instant.js"></script> + </head> + <body> + <script> + zeroExInstant.render({ + orderSource: '${instantConfig.orderSource}',${ + !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient + ? `\n affiliateInfo: { + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}', + feePercentage: ${instantConfig.affiliateInfo.feePercentage} + },` + : '' + }${ + !_.isUndefined(instantConfig.availableAssetDatas) + ? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString( + instantConfig.availableAssetDatas, + )}` + : '' + } + }, 'body'); + </script> + </body> + </html>`; + }; + 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); + } +`; |