aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-04 04:24:37 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-06 18:56:11 +0800
commit659ae0dcca070ce771a7329d8b4bc922ed1baf4a (patch)
treec98485a09d9b161edb6a3913d31a30726ecafd54
parent7a52168cd819ba50626dc4e1eb001fc1e055c8c3 (diff)
downloaddexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.tar
dexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.tar.gz
dexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.tar.bz2
dexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.tar.lz
dexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.tar.xz
dexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.tar.zst
dexon-0x-contracts-659ae0dcca070ce771a7329d8b4bc922ed1baf4a.zip
feat: implement basic feeRecipient address in config generator
-rw-r--r--packages/website/ts/components/ui/input.tsx6
-rw-r--r--packages/website/ts/pages/instant/config_generator.tsx22
-rw-r--r--packages/website/ts/pages/instant/config_generator_address_input.tsx60
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx19
4 files changed, 96 insertions, 11 deletions
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx
index e5f4f6c70..1f56c814f 100644
--- a/packages/website/ts/components/ui/input.tsx
+++ b/packages/website/ts/components/ui/input.tsx
@@ -8,6 +8,7 @@ export interface InputProps {
width?: string;
fontSize?: string;
fontColor?: string;
+ border?: string;
placeholderColor?: string;
placeholder?: string;
backgroundColor?: string;
@@ -23,9 +24,11 @@ export const Input = styled(PlainInput)`
width: ${props => props.width};
padding: 0.8em 1.2em;
border-radius: 3px;
+ box-sizing: border-box;
font-family: 'Roboto Mono';
color: ${props => props.fontColor};
- border: none;
+ border: ${props => props.border};
+ outline: none;
background-color: ${props => props.backgroundColor};
&::placeholder {
color: ${props => props.placeholderColor};
@@ -38,6 +41,7 @@ Input.defaultProps = {
fontColor: colors.darkestGrey,
placeholderColor: colors.darkGrey,
fontSize: '12px',
+ border: 'none',
};
Input.displayName = 'Input';
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>