aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx2
-rw-r--r--packages/website/ts/pages/instant/config_generator.tsx27
-rw-r--r--packages/website/ts/pages/instant/config_generator_address_input.tsx14
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx32
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 ]`;
};
}