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/pages/instant/code_demo';
import { ConfigGenerator } from 'ts/pages/instant/config_generator';
import { Link } from 'ts/components/link';
import { Column, FlexWrap } from 'ts/components/newLayout';
import { Heading } from 'ts/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);
}
`;
|
