aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/instant/configurator.tsx
blob: 7c67e63336ab629f825bb90fa61471f73f818fff (plain) (blame)
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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);
    }
`;