aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx34
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx38
-rw-r--r--packages/website/ts/pages/instant/features.tsx4
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>