diff options
Diffstat (limited to 'packages/website/ts')
4 files changed, 44 insertions, 31 deletions
diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx index 20eb6b8d1..e57e39dff 100644 --- a/packages/website/ts/pages/instant/code_demo.tsx +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -20,7 +20,7 @@ const CustomPre = styled.pre` code:first-of-type { background-color: #2a2a2a !important; color: #999; - height: 100%; + min-height: 100%; text-align: center; padding-right: 5px !important; padding-left: 5px; diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index 8b56834ea..efd1be096 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -53,14 +53,14 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi throw new Error('ConfigGenerator component only supports string values as an orderSource.'); } return ( - <Container> + <Container minWidth="350px"> <ConfigGeneratorSection title="Standard relayer API endpoint"> <Select value={value.orderSource} items={this._generateItems()} /> </ConfigGeneratorSection> <ConfigGeneratorSection {...this._getTokenSelectorProps()}> {this._renderTokenMultiSelectOrSpinner()} </ConfigGeneratorSection> - <ConfigGeneratorSection title="Transaction fee ETH address"> + <ConfigGeneratorSection title="Transaction fee ETH address" marginBottom="10px" isOptional={true}> <ConfigGeneratorAddressInput value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''} onChange={this._handleAffiliateAddressChange} @@ -252,19 +252,30 @@ export interface ConfigGeneratorSectionProps { title: string; actionText?: string; onActionTextClick?: () => void; + isOptional?: boolean; + marginBottom?: string; } export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSectionProps> = ({ title, actionText, onActionTextClick, + isOptional, + marginBottom, children, }) => ( - <Container marginBottom="30px"> + <Container marginBottom={marginBottom}> <Container marginBottom="10px" className="flex justify-between items-center"> - <Text fontColor={colors.white} fontSize="16px" lineHeight="18px"> - {title} - </Text> + <Container> + <Text fontColor={colors.white} fontSize="16px" lineHeight="18px"> + {title} + </Text> + {isOptional && ( + <Text fontColor={colors.grey} fontSize="16px" lineHeight="18px"> + (optional) + </Text> + )} + </Container> {actionText && ( <Text fontSize="12px" fontColor={colors.grey} onClick={onActionTextClick}> {actionText} @@ -274,3 +285,7 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec {children} </Container> ); + +ConfigGeneratorSection.defaultProps = { + marginBottom: '30px', +}; diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx index de2640f48..2e5a6e533 100644 --- a/packages/website/ts/pages/instant/config_generator_address_input.tsx +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -28,7 +28,7 @@ export class ConfigGeneratorAddressInput extends React.Component< const hasError = !_.isEmpty(errMsg); const border = hasError ? '1px solid red' : undefined; return ( - <Container> + <Container height="80px"> <Input width="100%" fontSize="16px" @@ -37,13 +37,11 @@ export class ConfigGeneratorAddressInput extends React.Component< placeholder="0xe99...aa8da4" border={border} /> - {hasError && ( - <Container marginTop="5px"> - <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic"> - {errMsg} - </Text> - </Container> - )} + <Container marginTop="5px" isHidden={!hasError} height="25px"> + <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic"> + {errMsg} + </Text> + </Container> </Container> ); } diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 0ce1d9810..5700bdc1d 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -46,7 +46,7 @@ export class Configurator extends React.Component<ConfiguratorProps> { </Container> <ConfigGenerator value={this.state.instantConfig} onConfigChange={this._handleConfigChange} /> </Container> - <Container className="mx3"> + <Container className="mx3" height="550px"> <Container className="mb3 flex justify-between"> <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}> Code Snippet @@ -66,34 +66,34 @@ export class Configurator extends React.Component<ConfiguratorProps> { private readonly _generateCodeDemoCode = (): string => { const { instantConfig } = this.state; return `<head> - <script src="https://instant.0xproject.com/instant.js"></script> - </head> - <body> - <script> - zeroExInstant.render({ - liquiditySource: '${instantConfig.orderSource}',${ + <script src="https://instant.0xproject.com/instant.js"></script> +</head> +<body> + <script> + zeroExInstant.render({ + liquiditySource: '${instantConfig.orderSource}',${ !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient - ? `\n\t\taffiliateInfo: { - feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', - feePercentage: ${instantConfig.affiliateInfo.feePercentage} - }` + ? `\n affiliateInfo: { + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', + feePercentage: ${instantConfig.affiliateInfo.feePercentage} + }` : '' }${ !_.isUndefined(instantConfig.availableAssetDatas) - ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString( + ? `\n availableAssetDatas: ${this._renderAvailableAssetDatasString( instantConfig.availableAssetDatas, )}` : '' } - }, 'body'); - </script> - </body>`; + }, 'body'); + </script> +</body>`; }; private readonly _renderAvailableAssetDatasString = (availableAssetDatas: string[]): string => { const stringAvailableAssetDatas = availableAssetDatas.map(assetData => `'${assetData}'`); if (availableAssetDatas.length < 2) { return `[${stringAvailableAssetDatas.join(', ')}]`; } - return `[\n\t\t\t${stringAvailableAssetDatas.join(', \n\t\t\t')}\n\t\t]`; + return `[\n\t\t${stringAvailableAssetDatas.join(', \n\t\t')}\n ]`; }; } |