aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/pages/instant/config_generator_address_input.tsx')
-rw-r--r--packages/website/ts/@next/pages/instant/config_generator_address_input.tsx84
1 files changed, 0 insertions, 84 deletions
diff --git a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx b/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
deleted file mode 100644
index 9b0e9b1d1..000000000
--- a/packages/website/ts/@next/pages/instant/config_generator_address_input.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { addressUtils } from '@0x/utils';
-import * as _ from 'lodash';
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { colors } from 'ts/style/colors';
-
-import { Container } from 'ts/components/ui/container';
-
-import { Paragraph } from 'ts/@next/components/text';
-
-export interface ConfigGeneratorAddressInputProps {
- value?: string;
- onChange?: (address: string, isValid: boolean) => void;
-}
-
-export interface ConfigGeneratorAddressInputState {
- errMsg: string;
-}
-
-export interface InputProps {
- className?: string;
- value?: string;
- width?: string;
- fontSize?: string;
- fontColor?: string;
- padding?: string;
- placeholderColor?: string;
- placeholder?: string;
- backgroundColor?: string;
- onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export class ConfigGeneratorAddressInput extends React.Component<
- ConfigGeneratorAddressInputProps,
- ConfigGeneratorAddressInputState
-> {
- public state = {
- errMsg: '',
- };
- public render(): React.ReactNode {
- const { errMsg } = this.state;
- const hasError = !_.isEmpty(errMsg);
- return (
- <Container height="80px">
- <Input value={this.props.value} onChange={this._handleChange} placeholder="0xe99...aa8da4" />
- <Container marginTop="5px" isHidden={!hasError} height="25px">
- <Paragraph size="small" isNoMargin={true}>
- {errMsg}
- </Paragraph>
- </Container>
- </Container>
- );
- }
-
- private readonly _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, isValidAddress);
- };
-}
-
-const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
- <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
-);
-
-export const Input = styled(PlainInput)`
- background-color: ${colors.white};
- color: ${colors.textDarkSecondary};
- font-size: 1rem;
- width: 100%;
- padding: 16px 20px 18px;
- border-radius: 4px;
- border: 1px solid transparent;
- outline: none;
- &::placeholder {
- color: #333333;
- opacity: 0.5;
- }
-`;