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 (
Code Snippet
Explore the Docs
{codeToDisplay}
);
}
private readonly _handleConfigChange = (config: ZeroExInstantBaseConfig) => {
this.setState({
instantConfig: config,
});
};
private readonly _generateCodeDemoCode = (): string => {
const { instantConfig } = this.state;
return `
`;
};
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;
`;