aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages/instant/configurator.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/pages/instant/configurator.tsx')
-rw-r--r--packages/website/ts/@next/pages/instant/configurator.tsx104
1 files changed, 104 insertions, 0 deletions
diff --git a/packages/website/ts/@next/pages/instant/configurator.tsx b/packages/website/ts/@next/pages/instant/configurator.tsx
new file mode 100644
index 000000000..7c67e6333
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/configurator.tsx
@@ -0,0 +1,104 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { CodeDemo } from 'ts/@next/pages/instant/code_demo';
+import { ConfigGenerator } from 'ts/@next/pages/instant/config_generator';
+
+import { Link } from 'ts/@next/components/link';
+import { Column, FlexWrap } from 'ts/@next/components/newLayout';
+import { Heading } from 'ts/@next/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);
+ }
+`;