1 files changed, 60 insertions, 0 deletions
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);
+    };
+}