diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-12-01 03:08:49 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-06 18:56:11 +0800 |
| commit | 566953d5e164c389774136b750e7975c666eccb3 (patch) | |
| tree | 0378343c1ff20a6eb66e822b3dce3b62d0713aa7 /packages/website/ts/pages/instant/configurator.tsx | |
| parent | a849af8a48ac9346ff0da92b4c643cd66dfd855b (diff) | |
| download | dexon-sol-tools-566953d5e164c389774136b750e7975c666eccb3.tar.gz dexon-sol-tools-566953d5e164c389774136b750e7975c666eccb3.tar.zst dexon-sol-tools-566953d5e164c389774136b750e7975c666eccb3.zip | |
feat: implement code generation
Diffstat (limited to 'packages/website/ts/pages/instant/configurator.tsx')
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 38 |
1 files changed, 37 insertions, 1 deletions
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]`; + }; } |