aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 07:57:35 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-30 07:57:35 +0800
commitf80768cae0c2fdb71237bbdddecc67aec1c1f67f (patch)
treed3c310e026c37889e1c0f7c4d709107e16a858fc /packages/website/ts/pages
parent0af07bcf49f62aeeed4aa5ae7bf0e4d5835836e9 (diff)
downloaddexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar
dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.gz
dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.bz2
dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.lz
dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.xz
dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.tar.zst
dexon-sol-tools-f80768cae0c2fdb71237bbdddecc67aec1c1f67f.zip
feat: add Select component and use for configurator
Diffstat (limited to 'packages/website/ts/pages')
-rw-r--r--packages/website/ts/pages/instant/action_link.tsx2
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx3
-rw-r--r--packages/website/ts/pages/instant/config_generator.tsx38
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx70
-rw-r--r--packages/website/ts/pages/instant/features.tsx2
5 files changed, 86 insertions, 29 deletions
diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx
index 8a0bf24ff..5612dc25b 100644
--- a/packages/website/ts/pages/instant/action_link.tsx
+++ b/packages/website/ts/pages/instant/action_link.tsx
@@ -41,7 +41,7 @@ export class ActionLink extends React.Component<ActionLinkProps> {
);
}
- private _handleClick = (event: React.MouseEvent<HTMLElement>) => {
+ private readonly _handleClick = (event: React.MouseEvent<HTMLElement>) => {
if (!_.isUndefined(this.props.onClick)) {
this.props.onClick();
} else if (!_.isUndefined(this.props.linkSrc)) {
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 4f44a6160..e9ecad40d 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -1,11 +1,8 @@
import * as React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
-import { Container } from 'ts/components/ui/container';
-
const CustomPre = styled.pre`
margin: 0px;
line-height: 24px;
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
new file mode 100644
index 000000000..d63975e31
--- /dev/null
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -0,0 +1,38 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from 'ts/components/ui/container';
+import { Select, SelectItemConfig } from 'ts/components/ui/select';
+
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
+
+export interface ConfigGeneratorProps {
+ value: ZeroExInstantBaseConfig;
+ onConfigChange: (config: ZeroExInstantBaseConfig) => void;
+}
+
+const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/'];
+
+export class ConfigGenerator extends React.Component<ConfigGeneratorProps> {
+ public render(): React.ReactNode {
+ const { value } = this.props;
+ return (
+ <Container>
+ <Select value={value.orderSource as string} items={this._generateItems()} />
+ </Container>
+ );
+ }
+ private readonly _generateItems = (): SelectItemConfig[] => {
+ return _.map(SRA_ENDPOINTS, endpoint => ({
+ text: endpoint,
+ onClick: this._handleSRASelection.bind(this, endpoint),
+ }));
+ };
+ private readonly _handleSRASelection = (sraEndpoint: string) => {
+ const newConfig = {
+ ...this.props.value,
+ orderSource: sraEndpoint,
+ };
+ this.props.onConfigChange(newConfig);
+ };
+}
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 29a3e2b1e..cf9985675 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -4,34 +4,56 @@ import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { ActionLink } from 'ts/pages/instant/action_link';
import { CodeDemo } from 'ts/pages/instant/code_demo';
+import { ConfigGenerator } from 'ts/pages/instant/config_generator';
import { colors } from 'ts/style/colors';
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
+
export interface ConfiguratorProps {
hash: string;
}
-export const Configurator = (props: ConfiguratorProps) => (
- <Container
- className="flex justify-center py4 px3"
- id={props.hash}
- backgroundColor={colors.instantTertiaryBackground}
- >
- <Container className="mx3">
- <Container className="mb3">
- <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
- 0x Instant Configurator
- </Text>
- </Container>
- <Container height="400px" width="300px" backgroundColor="white" />
- </Container>
- <Container className="mx3">
- <Container className="mb3 flex justify-between">
- <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
- Code Snippet
- </Text>
- <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+export interface ConfiguratorState {
+ instantConfig: ZeroExInstantBaseConfig;
+}
+
+export class Configurator extends React.Component<ConfiguratorProps> {
+ public state = {
+ instantConfig: {
+ orderSource: 'https://api.radarrelay.com/0x/v2/',
+ },
+ };
+ public render(): React.ReactNode {
+ const { hash } = this.props;
+ return (
+ <Container
+ className="flex justify-center py4 px3"
+ id={hash}
+ backgroundColor={colors.instantTertiaryBackground}
+ >
+ <Container className="mx3">
+ <Container className="mb3">
+ <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+ 0x Instant Configurator
+ </Text>
+ </Container>
+ <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} />
+ </Container>
+ <Container className="mx3">
+ <Container className="mb3 flex justify-between">
+ <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+ Code Snippet
+ </Text>
+ <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+ </Container>
+ <CodeDemo />
+ </Container>
</Container>
- <CodeDemo />
- </Container>
- </Container>
-);
+ );
+ }
+ private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
+ this.setState({
+ instantConfig: config,
+ });
+ };
+}
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 6c6835311..1e187c9da 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -2,9 +2,9 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
-import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
+import { ActionLink, ActionLinkProps } from 'ts/pages/instant/action_link';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
import { utils } from 'ts/utils/utils';