packages/website/ts/pages/instant/configurator.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import * as React from 'react';

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 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>
        );
    }
    private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
        this.setState({
            instantConfig: config,
        });
    };
}