diff options
Diffstat (limited to 'packages/website/ts/pages/instant')
3 files changed, 91 insertions, 10 deletions
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index d1ea66557..9c3161dcc 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -11,6 +11,7 @@ import { MultiSelect } from 'ts/components/ui/multi_select'; import { Select, SelectItemConfig } from 'ts/components/ui/select'; import { Spinner } from 'ts/components/ui/spinner'; import { Text } from 'ts/components/ui/text'; +import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input'; import { colors } from 'ts/style/colors'; import { WebsiteBackendTokenInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -32,7 +33,7 @@ export interface ConfigGeneratorState { const SRA_ENDPOINTS = ['https://api.radarrelay.com/0x/v2/', 'https://api.openrelay.xyz/v2/']; -export class ConfigGenerator extends React.Component<ConfigGeneratorProps> { +export class ConfigGenerator extends React.Component<ConfigGeneratorProps, ConfigGeneratorState> { public state: ConfigGeneratorState = { isLoadingAvailableTokens: true, allKnownTokens: {}, @@ -52,12 +53,18 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps> { } return ( <Container> - <ConfigGeneratorSection title="Standard Relayer API Endpoint"> + <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"> + <ConfigGeneratorAddressInput + value={value.affiliateInfo ? value.affiliateInfo.feeRecipient : ''} + onChange={this._handleAffiliateAddressChange} + /> + </ConfigGeneratorSection> </Container> ); } @@ -91,6 +98,17 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps> { }; this.props.onConfigChange(newConfig); }; + private readonly _handleAffiliateAddressChange = (address: string) => { + const oldConfig: ZeroExInstantBaseConfig = this.props.value; + const newConfig: ZeroExInstantBaseConfig = { + ...oldConfig, + affiliateInfo: { + feeRecipient: address, + feePercentage: oldConfig.affiliateInfo.feePercentage, + }, + }; + this.props.onConfigChange(newConfig); + }; private readonly _handleSelectAllClick = () => { const newConfig: ZeroExInstantBaseConfig = { ...this.props.value, diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx new file mode 100644 index 000000000..dbda547cd --- /dev/null +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -0,0 +1,60 @@ +import { colors } from '@0x/react-shared'; +import { addressUtils } from '@0x/utils'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Input } from 'ts/components/ui/input'; +import { Text } from 'ts/components/ui/text'; + +export interface ConfigGeneratorAddressInputProps { + value?: string; + onChange?: (address: string) => void; +} + +export interface ConfigGeneratorAddressInputState { + errMsg: string; +} + +export class ConfigGeneratorAddressInput extends React.Component< + ConfigGeneratorAddressInputProps, + ConfigGeneratorAddressInputState +> { + public state = { + errMsg: '', + }; + public render(): React.ReactNode { + const { errMsg } = this.state; + const hasError = !_.isEmpty(errMsg); + const border = hasError ? '1px solid red' : undefined; + return ( + <Container> + <Input + width="100%" + fontSize="16px" + value={this.props.value} + onChange={this._handleChange} + placeholder="0xe99...aa8da4" + border={border} + /> + {hasError && ( + <Container marginTop="5px"> + <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic"> + {errMsg} + </Text> + </Container> + )} + </Container> + ); + } + + private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { + const address = event.target.value; + const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; + const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; + this.setState({ + errMsg, + }); + this.props.onChange(address); + }; +} diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 0fb6d7ef8..e72f07a70 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -23,6 +23,10 @@ export class Configurator extends React.Component<ConfiguratorProps> { instantConfig: { orderSource: 'https://api.radarrelay.com/0x/v2/', availableAssetDatas: [], + affiliateInfo: { + feeRecipient: '', + feePercentage: 0.1, + }, }, }; public render(): React.ReactNode { @@ -61,7 +65,6 @@ export class Configurator extends React.Component<ConfiguratorProps> { }; private readonly _generateCodeDemoCode = (): string => { const { instantConfig } = this.state; - console.log(instantConfig.availableAssetDatas); return `<head> <script src="https://instant.0xproject.com/instant.js"></script> </head> @@ -69,18 +72,18 @@ export class Configurator extends React.Component<ConfiguratorProps> { <script> zeroExInstant.render({ liquiditySource: '${instantConfig.orderSource}',${ + !_.isUndefined(instantConfig.affiliateInfo) && instantConfig.affiliateInfo.feeRecipient + ? `\n\t\taffiliateInfo: { + feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', + feePercentage: ${instantConfig.affiliateInfo.feePercentage} + }` + : '' + }${ !_.isUndefined(instantConfig.availableAssetDatas) ? `\n\t\tavailableAssetDatas: ${this._renderAvailableAssetDatasString( instantConfig.availableAssetDatas, )}` : '' - }${ - !_.isUndefined(instantConfig.affiliateInfo) - ? `affiliateInfo: { - feeRecipient: '${instantConfig.affiliateInfo.feeRecipient}', - feePercentage: ${instantConfig.affiliateInfo.feePercentage} - }` - : '' } }, 'body'); </script> |