feat: implement basic feeRecipient address in config generator

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';

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,

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);
+    };
+}

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>