crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement code generation

Browse Source
This commit is contained in:
fragosti 2018-11-30 11:08:49 -08:00
parent e65096ee7a
commit 9e69257b0d
3 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/website/ts/pages/instant/code_demo.tsx
View File

@ -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>
);

38
packages/website/ts/pages/instant/configurator.tsx
View File

@ -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]`;
};
}

4
packages/website/ts/pages/instant/features.tsx
View File

@ -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>