diff options
| author | Hsuan Lee <boczeratul@gmail.com> | 2019-03-06 17:46:50 +0800 |
|---|---|---|
| committer | Hsuan Lee <boczeratul@gmail.com> | 2019-03-06 17:46:50 +0800 |
| commit | 35703539d0f2b4ddb3b11d0de8c9634af59ab71f (patch) | |
| tree | ae3731221dbbb3a6fa40060a8d916cfd3f738289 /packages/website/ts/pages/instant/configurator.tsx | |
| parent | 92a1fde5b1ecd81b07cdb5bf0c9c1cd3544799db (diff) | |
| download | dexon-0x-contracts-35703539d0f2b4ddb3b11d0de8c9634af59ab71f.tar.gz dexon-0x-contracts-35703539d0f2b4ddb3b11d0de8c9634af59ab71f.tar.zst dexon-0x-contracts-35703539d0f2b4ddb3b11d0de8c9634af59ab71f.zip | |
Deploy @dexon-foundation/0x.jsstable
Diffstat (limited to 'packages/website/ts/pages/instant/configurator.tsx')
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 104 |
1 files changed, 0 insertions, 104 deletions
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx deleted file mode 100644 index a63e1752e..000000000 --- a/packages/website/ts/pages/instant/configurator.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import styled from 'styled-components'; - -import { CodeDemo } from 'ts/pages/instant/code_demo'; -import { ConfigGenerator } from 'ts/pages/instant/config_generator'; - -import { Link } from 'ts/components/link'; -import { Column, FlexWrap } from 'ts/components/newLayout'; -import { Heading } from 'ts/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); - } -`; |