feat: update configurator snippet to actually work if copy and pasted

This commit is contained in:
fragosti 2018-12-04 10:58:43 -08:00
parent ea4155e5fa
commit dfe5752411

View File

@ -22,7 +22,7 @@ export class Configurator extends React.Component<ConfiguratorProps> {
public state: ConfiguratorState = { public state: ConfiguratorState = {
instantConfig: { instantConfig: {
orderSource: 'https://api.radarrelay.com/0x/v2/', orderSource: 'https://api.radarrelay.com/0x/v2/',
availableAssetDatas: [], availableAssetDatas: undefined,
affiliateInfo: { affiliateInfo: {
feeRecipient: '', feeRecipient: '',
feePercentage: 0.01, feePercentage: 0.01,
@ -65,35 +65,41 @@ export class Configurator extends React.Component<ConfiguratorProps> {
}; };
private readonly _generateCodeDemoCode = (): string => { private readonly _generateCodeDemoCode = (): string => {
const { instantConfig } = this.state; const { instantConfig } = this.state;
return `<head> return `<!DOCTYPE html>
<script src="https://instant.0xproject.com/instant.js"></script> <html>
</head> <head>
<body> <meta charset="utf-8" />
<script> <script src="https://instant.0xproject.com/instant.js"></script>
zeroExInstant.render({ </head>
orderSource: '${instantConfig.orderSource}',${ <body>
<script>
zeroExInstant.render({
orderSource: '${instantConfig.orderSource}',${
!_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient
? `\n affiliateInfo: { ? `\n affiliateInfo: {
feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}', feeRecipient: '${instantConfig.affiliateInfo.feeRecipient.toLowerCase()}',
feePercentage: ${instantConfig.affiliateInfo.feePercentage} feePercentage: ${instantConfig.affiliateInfo.feePercentage}
}` }`
: '' : ''
}${ }${
!_.isUndefined(instantConfig.availableAssetDatas) !_.isUndefined(instantConfig.availableAssetDatas)
? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString( ? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString(
instantConfig.availableAssetDatas, instantConfig.availableAssetDatas,
)}` )}`
: '' : ''
} }
}, 'body'); }, 'body');
</script> </script>
</body>`; </body>
</html>`;
}; };
private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => {
const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`);
if (availableAssetDatas.length < 2) { if (availableAssetDatas.length < 2) {
return `[${stringAvailableAssetDatas.join(', ')}]`; return `[${stringAvailableAssetDatas.join(', ')}]`;
} }
return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n ]`; return `[\n ${stringAvailableAssetDatas.join(
', \n ',
)}\n ]`;
}; };
} }