diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-12-01 03:08:49 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-01 03:08:49 +0800 |
| commit | 9e69257b0db8ce959c0209d4389f9e3a753839bd (patch) | |
| tree | f7648b41440d8a61e6787d5341c5625f025a2449 | |
| parent | e65096ee7af7c6d442b5e106db0a07652cc5e047 (diff) | |
| download | dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.tar dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.tar.gz dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.tar.bz2 dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.tar.lz dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.tar.xz dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.tar.zst dexon-sol-tools-9e69257b0db8ce959c0209d4389f9e3a753839bd.zip | |
feat: implement code generation
| -rw-r--r-- | packages/website/ts/pages/instant/code_demo.tsx | 34 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 38 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/features.tsx | 4 |
3 files changed, 49 insertions, 27 deletions
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index e9ecad40d..fa0cebc62 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme'; const CustomPre = styled.pre` margin: 0px; line-height: 24px; - overflow: hidden; + overflow: scroll; width: 600px; height: 500px; border-radius: 4px; @@ -123,7 +123,7 @@ const customStyle = { }, hljs: { display: 'block', - overflowX: 'auto', + overflowX: 'hidden', background: colors.instantSecondaryBackground, color: 'white', fontSize: '12px', @@ -136,26 +136,12 @@ const customStyle = { }, }; -export interface CodeDemoProps {} +export interface CodeDemoProps { + children: string; +} -export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => { - const codeString = `<head> - <script src="https://instant.0xproject.com/instant.js"></script> -</head> -<body> - <script> - zeroExInstant.render({ - liquiditySource: 'https://api.relayer.com/sra/v2/', - affiliateInfo: { - feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230', - feePercentage: 0.03 - } - }, 'body'); - </script> -</body>`; - return ( - <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}> - {codeString} - </SyntaxHighlighter> - ); -}; +export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => ( + <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}> + {props.children} + </SyntaxHighlighter> +); diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index f4987c0de..0fb6d7ef8 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; @@ -26,6 +27,7 @@ export class Configurator extends React.Component<ConfiguratorProps> { }; public render(): React.ReactNode { const { hash } = this.props; + const codeToDisplay = this._generateCodeDemoCode(); return ( <Container className="flex justify-center py4 px3" @@ -47,7 +49,7 @@ export class Configurator extends React.Component<ConfiguratorProps> { </Text> <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} /> </Container> - <CodeDemo /> + <CodeDemo key={codeToDisplay}>{codeToDisplay}</CodeDemo> </Container> </Container> ); @@ -57,4 +59,38 @@ export class Configurator extends React.Component<ConfiguratorProps> { instantConfig: config, }); }; + private readonly _generateCodeDemoCode = (): string => { + const { instantConfig } = this.state; + console.log(instantConfig.availableAssetDatas); + return `<head> + <script src="https://instant.0xproject.com/instant.js"></script> + </head> + <body> + <script> + zeroExInstant.render({ + liquiditySource: '${instantConfig.orderSource}',${ + !_.isUndefined(instantConfig.availableAssetDatas) + ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString( + instantConfig.availableAssetDatas, + )}` + : '' + }${ + !_.isUndefined(instantConfig.affiliateInfo) + ? `affiliateInfo: { + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', + feePercentage: ${instantConfig.affiliateInfo.feePercentage} + }` + : '' + } + }, 'body'); + </script> + </body>`; + }; + private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { + const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); + if (availableAssetDatas.length < 2) { + return `[${stringAvailableAssetDatas.join(', ')}]`; + } + return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + }; } diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx index c88958bbf..230a8496b 100644 --- a/packages/website/ts/pages/instant/features.tsx +++ b/packages/website/ts/pages/instant/features.tsx @@ -91,8 +91,8 @@ const FeatureItem = (props: FeatureItemProps) => { </Container> <Container className="flex" marginTop="28px"> {_.map(linkInfos, linkInfo => ( - <Container marginRight="32px"> - <ActionLink key={linkInfo.displayText} {...linkInfo} /> + <Container key={linkInfo.displayText} marginRight="32px"> + <ActionLink {...linkInfo} /> </Container> ))} </Container> |