diff options
Diffstat (limited to 'packages/website/ts/components/ui')
34 files changed, 0 insertions, 1829 deletions
diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx deleted file mode 100644 index 6d0b90922..000000000 --- a/packages/website/ts/components/ui/account_connection.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; - -import { Circle } from 'ts/components/ui/circle'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { AccountState } from 'ts/types'; - -export interface AccountConnectionProps { - accountState: AccountState; - injectedProviderName: string; -} - -export const AccountConnection: React.StatelessComponent<AccountConnectionProps> = ({ - accountState, - injectedProviderName, -}) => { - return ( - <Container className="flex items-center"> - <Circle diameter={6} fillColor={getInjectedProviderColor(accountState)} /> - <Container marginLeft="6px"> - <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}> - {injectedProviderName} - </Text> - </Container> - </Container> - ); -}; - -const getInjectedProviderColor = (accountState: AccountState) => { - switch (accountState) { - case AccountState.Ready: - return colors.limeGreen; - case AccountState.Locked: - case AccountState.Loading: - case AccountState.Disconnected: - default: - return colors.red; - } -}; diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx deleted file mode 100644 index c7a5b9030..000000000 --- a/packages/website/ts/components/ui/alert.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { AlertTypes } from 'ts/types'; - -interface AlertProps { - type: AlertTypes; - message: string | React.ReactNode; -} - -export const Alert = (props: AlertProps) => { - const isAlert = props.type === AlertTypes.Error; - const errMsgStyles = { - background: isAlert ? colors.red200 : colors.lightestGreen, - color: colors.white, - marginTop: 10, - padding: 4, - paddingLeft: 8, - }; - - return ( - <div className="rounded center" style={errMsgStyles}> - {props.message} - </div> - ); -}; diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx deleted file mode 100644 index fc754421a..000000000 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { Container } from 'ts/components/ui/container'; -import { Spinner } from 'ts/components/ui/spinner'; - -export enum AllowanceState { - Locked, - Unlocked, - Loading, -} - -export interface AllowanceStateViewProps { - allowanceState: AllowanceState; -} - -export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProps> = ({ allowanceState }) => { - switch (allowanceState) { - case AllowanceState.Locked: - return renderLock(); - case AllowanceState.Unlocked: - return renderCheck(); - case AllowanceState.Loading: - return ( - <Container position="relative" top="3px" left="5px"> - <Spinner size={18} strokeSize={2} /> - </Container> - ); - default: - return null; - } -}; - -const renderCheck = (color: string = colors.lightGreen) => ( - <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> - <circle cx="8.5" cy="8.5" r="8.5" fill={color} /> - <path - d="M2.5 4.5L1.79289 5.20711L2.5 5.91421L3.20711 5.20711L2.5 4.5ZM-0.707107 2.70711L1.79289 5.20711L3.20711 3.79289L0.707107 1.29289L-0.707107 2.70711ZM3.20711 5.20711L7.70711 0.707107L6.29289 -0.707107L1.79289 3.79289L3.20711 5.20711Z" - transform="translate(5 6.5)" - fill="white" - /> - </svg> -); - -const renderLock = () => ( - <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M6 0C3.51604 0 1.48688 2.0495 1.48688 4.55837V5.86581C0.664723 5.86581 -3.33647e-08 6.53719 -3.33647e-08 7.36759V13.3217C-3.33647e-08 14.1521 0.664723 14.8235 1.48688 14.8235H10.5131C11.3353 14.8235 12 14.1521 12 13.3217V7.36759C12 6.53719 11.3353 5.86581 10.5131 5.86581V4.55837C10.5131 2.0495 8.48396 0 6 0ZM8.93878 5.86581H3.06122V4.55837C3.06122 2.9329 4.37318 1.59013 6 1.59013C7.62682 1.59013 8.93878 2.9329 8.93878 4.55837V5.86581Z" - fill="black" - /> - </svg> -); diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx deleted file mode 100644 index a1a8ff89b..000000000 --- a/packages/website/ts/components/ui/balance.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as React from 'react'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { utils } from 'ts/utils/utils'; - -export interface BalanceProps { - amount: BigNumber; - decimals: number; - symbol: string; -} - -export const Balance: React.StatelessComponent<BalanceProps> = ({ amount, decimals, symbol }) => { - const formattedAmout = utils.getFormattedAmount(amount, decimals); - return ( - <span> - <Text Tag="span" fontSize="16px" fontWeight="700" lineHeight="1em"> - {formattedAmout} - </Text> - <Container marginLeft="0.3em" Tag="span"> - <Text Tag="span" fontSize="12px" fontWeight="700" lineHeight="1em"> - {symbol} - </Text> - </Container> - </span> - ); -}; diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx deleted file mode 100644 index 92f927843..000000000 --- a/packages/website/ts/components/ui/button.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { colors } from '@0x/react-shared'; -import { darken, saturate } from 'polished'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -export interface ButtonProps { - className?: string; - fontSize?: string; - fontColor?: string; - fontFamily?: string; - backgroundColor?: string; - borderColor?: string; - borderRadius?: string; - width?: string; - padding?: string; - type?: string; - isDisabled?: boolean; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - textAlign?: string; -} - -const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( - <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}> - {children} - </button> -); - -export const Button = styled(PlainButton)` - cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; - font-size: ${props => props.fontSize}; - color: ${props => props.fontColor}; - transition: background-color, opacity 0.5s ease; - padding: ${props => props.padding}; - border-radius: ${props => props.borderRadius}; - font-weight: 500; - outline: none; - font-family: ${props => props.fontFamily}; - width: ${props => props.width}; - text-align: ${props => props.textAlign}; - background-color: ${props => props.backgroundColor}; - border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; - &:hover { - background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')} !important; - } - &:active { - background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; - } - &:disabled { - opacity: 0.5; - } - &:focus { - background-color: ${props => saturate(0.2, props.backgroundColor)}; - } -`; - -Button.defaultProps = { - fontSize: '12px', - borderRadius: '6px', - backgroundColor: colors.white, - width: 'auto', - fontFamily: 'Roboto', - isDisabled: false, - padding: '0.8em 2.2em', - textAlign: 'center', -}; - -Button.displayName = 'Button'; - -type CallToActionType = 'light' | 'dark'; - -export interface CallToActionProps { - type?: CallToActionType; - fontSize?: string; - width?: string; - padding?: string; -} - -export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ - children, - type, - fontSize, - padding, - width, -}) => { - const isLight = type === 'light'; - const backgroundColor = isLight ? colors.white : colors.mediumBlue; - const fontColor = isLight ? colors.heroGrey : colors.white; - return ( - <Button - fontSize={fontSize} - padding={padding} - backgroundColor={backgroundColor} - fontColor={fontColor} - width={width} - > - {children} - </Button> - ); -}; - -CallToAction.defaultProps = { - type: 'dark', - fontSize: '14px', - padding: '0.9em 1.6em', -}; diff --git a/packages/website/ts/components/ui/check_mark.tsx b/packages/website/ts/components/ui/check_mark.tsx deleted file mode 100644 index 86e427c8b..000000000 --- a/packages/website/ts/components/ui/check_mark.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; - -import { colors } from '@0x/react-shared'; - -export interface CheckMarkProps { - color?: string; - isChecked?: boolean; -} - -export const CheckMark: React.StatelessComponent<CheckMarkProps> = ({ color, isChecked }) => ( - <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> - <circle - cx="8.5" - cy="8.5" - r="8.5" - fill={isChecked ? color : 'white'} - stroke={isChecked ? undefined : '#CCCCCC'} - /> - <path - d="M2.5 4.5L1.79289 5.20711L2.5 5.91421L3.20711 5.20711L2.5 4.5ZM-0.707107 2.70711L1.79289 5.20711L3.20711 3.79289L0.707107 1.29289L-0.707107 2.70711ZM3.20711 5.20711L7.70711 0.707107L6.29289 -0.707107L1.79289 3.79289L3.20711 5.20711Z" - transform="translate(5 6.5)" - fill="white" - /> - </svg> -); - -CheckMark.displayName = 'Check'; - -CheckMark.defaultProps = { - color: colors.mediumBlue, -}; diff --git a/packages/website/ts/components/ui/circle.tsx b/packages/website/ts/components/ui/circle.tsx deleted file mode 100644 index 75103d066..000000000 --- a/packages/website/ts/components/ui/circle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; - -export interface CircleProps { - className?: string; - diameter: number; - fillColor: string; -} - -export const Circle: React.StatelessComponent<CircleProps> = ({ className, diameter, fillColor }) => { - const radius = diameter / 2; - return ( - <svg className={className} height={diameter} width={diameter}> - <circle cx={radius} cy={radius} r={radius} fill={fillColor} /> - </svg> - ); -}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx deleted file mode 100644 index 778f59f27..000000000 --- a/packages/website/ts/components/ui/container.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { TextAlignProperty } from 'csstype'; -import { darken } from 'polished'; -import * as React from 'react'; - -import { styled } from 'ts/style/theme'; - -type StringOrNum = string | number; - -export type ContainerTag = 'div' | 'span'; - -export interface ContainerProps { - margin?: string; - marginTop?: StringOrNum; - marginBottom?: StringOrNum; - marginRight?: StringOrNum; - marginLeft?: StringOrNum; - padding?: StringOrNum; - paddingTop?: StringOrNum; - paddingBottom?: StringOrNum; - paddingRight?: StringOrNum; - paddingLeft?: StringOrNum; - backgroundColor?: string; - background?: string; - border?: string; - borderTop?: string; - borderRadius?: StringOrNum; - borderBottomLeftRadius?: StringOrNum; - borderBottomRightRadius?: StringOrNum; - borderBottom?: StringOrNum; - borderColor?: string; - children?: React.ReactNode; - maxWidth?: StringOrNum; - maxHeight?: StringOrNum; - width?: StringOrNum; - height?: StringOrNum; - minWidth?: StringOrNum; - minHeight?: StringOrNum; - textAlign?: TextAlignProperty; - isHidden?: boolean; - className?: string; - position?: 'absolute' | 'fixed' | 'relative' | 'unset'; - display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; - top?: string; - left?: string; - right?: string; - bottom?: string; - zIndex?: number; - float?: 'right' | 'left'; - Tag?: ContainerTag; - cursor?: string; - id?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; - overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible'; - shouldDarkenOnHover?: boolean; - hasBoxShadow?: boolean; - shouldAddBoxShadowOnHover?: boolean; -} - -export const PlainContainer: React.StatelessComponent<ContainerProps> = props => { - const { - children, - className, - Tag, - isHidden, - id, - onClick, - shouldDarkenOnHover, - shouldAddBoxShadowOnHover, - hasBoxShadow, - // tslint:disable-next-line:trailing-comma - ...style - } = props; - const visibility = isHidden ? 'hidden' : undefined; - return ( - <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> - {children} - </Tag> - ); -}; - -const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)'; - -export const Container = styled(PlainContainer)` - box-sizing: border-box; - ${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')}; - &:hover { - ${props => - props.shouldDarkenOnHover - ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` - : ''}; - ${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')}; - } -`; - -Container.defaultProps = { - Tag: 'div', -}; - -Container.displayName = 'Container'; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx deleted file mode 100644 index 403cd4607..000000000 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; -import * as ReactDOM from 'react-dom'; -import ReactTooltip from 'react-tooltip'; - -interface CopyIconProps { - data: string; - callToAction?: string; -} - -interface CopyIconState { - isHovering: boolean; -} - -export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> { - private _copyTooltipTimeoutId: number; - private _copyable: HTMLInputElement; - constructor(props: CopyIconProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public componentDidUpdate(): void { - // Remove tooltip if hover away - if (!this.state.isHovering && this._copyTooltipTimeoutId) { - clearInterval(this._copyTooltipTimeoutId); - this._hideTooltip(); - } - } - public render(): React.ReactNode { - return ( - <div className="inline-block"> - <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}> - <div - className="inline flex" - style={{ cursor: 'pointer', color: colors.amber600 }} - ref={this._setRefToProperty.bind(this)} - data-tip={true} - data-for="copy" - data-event="click" - data-iscapture={true} // This let's the click event continue to propogate - onMouseOver={this._setHoverState.bind(this, true)} - onMouseOut={this._setHoverState.bind(this, false)} - > - <div> - <i style={{ fontSize: 15 }} className="zmdi zmdi-copy" /> - </div> - {this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>} - </div> - </CopyToClipboard> - <ReactTooltip id="copy">Copied!</ReactTooltip> - </div> - ); - } - private _setRefToProperty(el: HTMLInputElement): void { - this._copyable = el; - } - private _setHoverState(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } - private _onCopy(): void { - if (this._copyTooltipTimeoutId) { - clearInterval(this._copyTooltipTimeoutId); - } - - const tooltipLifespanMs = 1000; - this._copyTooltipTimeoutId = window.setTimeout(() => { - this._hideTooltip(); - }, tooltipLifespanMs); - } - private _hideTooltip(): void { - ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable)); - } -} diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx deleted file mode 100644 index 87ce32126..000000000 --- a/packages/website/ts/components/ui/custom_menu_item.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -interface CustomMenuItemProps { - to: string; - onClick?: () => void; - className?: string; -} - -interface CustomMenuItemState { - isHovering: boolean; -} - -export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> { - public static defaultProps: Partial<CustomMenuItemProps> = { - onClick: _.noop.bind(_), - className: '', - }; - public constructor(props: CustomMenuItemProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - const menuItemStyles = { - cursor: 'pointer', - opacity: this.state.isHovering ? 0.5 : 1, - }; - return ( - <Link to={this.props.to}> - <div - onClick={this.props.onClick.bind(this)} - className={`mx-auto ${this.props.className}`} - style={menuItemStyles} - onMouseEnter={this._onToggleHover.bind(this, true)} - onMouseLeave={this._onToggleHover.bind(this, false)} - > - {this.props.children} - </div> - </Link> - ); - } - private _onToggleHover(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } -} diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx deleted file mode 100644 index 4138b3fe5..000000000 --- a/packages/website/ts/components/ui/drop_down.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import * as _ from 'lodash'; -import Popover from 'material-ui/Popover'; -import * as React from 'react'; -import { MaterialUIPosition } from 'ts/types'; - -const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300; -const DEFAULT_STYLE = { - fontSize: 14, -}; - -export enum DropdownMouseEvent { - Hover = 'hover', - Click = 'click', -} - -export interface DropDownProps { - activeNode: React.ReactNode; - popoverContent: React.ReactNode; - anchorOrigin: MaterialUIPosition; - targetOrigin: MaterialUIPosition; - style?: React.CSSProperties; - zDepth?: number; - activateEvent?: DropdownMouseEvent; - closeEvent?: DropdownMouseEvent; - popoverStyle?: React.CSSProperties; -} - -interface DropDownState { - isDropDownOpen: boolean; - anchorEl?: HTMLInputElement; -} - -export class DropDown extends React.Component<DropDownProps, DropDownState> { - public static defaultProps: Partial<DropDownProps> = { - style: DEFAULT_STYLE, - zDepth: 1, - activateEvent: DropdownMouseEvent.Hover, - closeEvent: DropdownMouseEvent.Hover, - popoverStyle: {}, - }; - private _isHovering: boolean; - private _popoverCloseCheckIntervalId: number; - constructor(props: DropDownProps) { - super(props); - this.state = { - isDropDownOpen: false, - }; - } - public componentDidMount(): void { - this._popoverCloseCheckIntervalId = window.setInterval(() => { - this._checkIfShouldClosePopover(); - }, CHECK_CLOSE_POPOVER_INTERVAL_MS); - } - public componentWillUnmount(): void { - window.clearInterval(this._popoverCloseCheckIntervalId); - } - public componentWillReceiveProps(_nextProps: DropDownProps): void { - // HACK: If the popoverContent is updated to a different dimension and the users - // mouse is no longer above it, the dropdown can enter an inconsistent state where - // it believes the user is still hovering over it. In order to remedy this, we - // call hoverOff whenever the dropdown receives updated props. This is a hack - // because it will effectively close the dropdown on any prop update, barring - // dropdowns from having dynamic content. - this._onHoverOff(); - } - public render(): React.ReactNode { - return ( - <div - style={{ ...this.props.style, width: 'fit-content', height: '100%' }} - onMouseEnter={this._onHover.bind(this)} - onMouseLeave={this._onHoverOff.bind(this)} - > - <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div> - <Popover - open={this.state.isDropDownOpen} - anchorEl={this.state.anchorEl} - anchorOrigin={this.props.anchorOrigin} - targetOrigin={this.props.targetOrigin} - onRequestClose={ - this.props.closeEvent === DropdownMouseEvent.Click - ? this._closePopover.bind(this) - : _.noop.bind(_) - } - useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} - animated={false} - zDepth={this.props.zDepth} - style={this.props.popoverStyle} - > - <div - onMouseEnter={this._onHover.bind(this)} - onMouseLeave={this._onHoverOff.bind(this)} - onClick={this._closePopover.bind(this)} - > - {this.props.popoverContent} - </div> - </Popover> - </div> - ); - } - private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void { - if (this.props.activateEvent === DropdownMouseEvent.Click) { - this.setState({ - isDropDownOpen: !this.state.isDropDownOpen, - anchorEl: event.currentTarget, - }); - } - } - private _onHover(event: React.FormEvent<HTMLInputElement>): void { - this._isHovering = true; - if (this.props.activateEvent === DropdownMouseEvent.Hover) { - this._checkIfShouldOpenPopover(event); - } - } - private _onHoverOff(): void { - this._isHovering = false; - } - private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void { - if (this.state.isDropDownOpen) { - return; // noop - } - this.setState({ - isDropDownOpen: true, - anchorEl: event.currentTarget, - }); - } - private _checkIfShouldClosePopover(): void { - if (!this.state.isDropDownOpen) { - return; // noop - } - if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) { - this._closePopover(); - } - } - private _closePopover(): void { - this.setState({ - isDropDownOpen: false, - }); - } -} diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx deleted file mode 100644 index ba141c01e..000000000 --- a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { css, keyframes, styled } from 'ts/style/theme'; - -const appearFromBottomFrames = keyframes` - from { - position: fixed; - bottom: -500px; - left: 0px; - right: 0px; - } - - to { - position: fixed; - bottom: 0px; - left: 0px; - right: 0px; - } -`; - -const stylesForAnimation = css` - position: fixed; -`; -const animations = css` - animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards; -`; - -export const EaseUpFromBottomAnimation = styled.div` - ${props => animations}; - ${props => stylesForAnimation}; -`; - -EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation'; diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx deleted file mode 100644 index 12f8636eb..000000000 --- a/packages/website/ts/components/ui/ethereum_address.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { EtherscanLinkSuffixes } from '@0x/react-shared'; -import * as React from 'react'; -import ReactTooltip from 'react-tooltip'; -import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; -import { utils } from 'ts/utils/utils'; - -interface EthereumAddressProps { - address: string; - networkId: number; -} - -export const EthereumAddress = (props: EthereumAddressProps) => { - const tooltipId = `${props.address}-ethereum-address`; - const truncatedAddress = utils.getAddressBeginAndEnd(props.address); - return ( - <div> - <div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}> - {truncatedAddress} - </div> - <div className="pl1 inline"> - <EtherScanIcon - addressOrTxHash={props.address} - networkId={props.networkId} - etherscanLinkSuffixes={EtherscanLinkSuffixes.Address} - /> - </div> - <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip> - </div> - ); -}; diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx deleted file mode 100644 index a7fba8a33..000000000 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import ReactTooltip from 'react-tooltip'; - -interface EtherScanIconProps { - addressOrTxHash: string; - etherscanLinkSuffixes: EtherscanLinkSuffixes; - networkId: number; -} - -export const EtherScanIcon = (props: EtherScanIconProps) => { - const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists( - props.addressOrTxHash, - props.networkId, - props.etherscanLinkSuffixes, - ); - const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`; - return ( - <div className="inline"> - {!_.isUndefined(etherscanLinkIfExists) ? ( - <a href={etherscanLinkIfExists} target="_blank"> - {renderIcon()} - </a> - ) : ( - <div className="inline" data-tip={true} data-for={transactionTooltipId}> - {renderIcon()} - <ReactTooltip id={transactionTooltipId}> - Your network (id: {props.networkId}) is not supported by Etherscan - </ReactTooltip> - </div> - )} - </div> - ); -}; - -function renderIcon(): React.ReactNode { - return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />; -} diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx deleted file mode 100644 index 7c3a482a4..000000000 --- a/packages/website/ts/components/ui/fake_text_field.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Styles } from '@0x/react-shared'; -import * as React from 'react'; -import { InputLabel } from 'ts/components/ui/input_label'; - -const styles: Styles = { - hr: { - borderBottom: '1px solid rgb(224, 224, 224)', - borderLeft: 'none rgb(224, 224, 224)', - borderRight: 'none rgb(224, 224, 224)', - borderTop: 'none rgb(224, 224, 224)', - bottom: 6, - boxSizing: 'content-box', - margin: 0, - position: 'absolute', - width: '100%', - }, -}; - -interface FakeTextFieldProps { - label?: React.ReactNode | string; - children?: any; -} - -export const FakeTextField = (props: FakeTextFieldProps) => { - return ( - <div className="relative"> - {props.label !== '' && <InputLabel text={props.label} />} - <div className="pb2" style={{ height: 23 }}> - {props.children} - </div> - <hr style={styles.hr} /> - </div> - ); -}; diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx deleted file mode 100644 index 2b866676d..000000000 --- a/packages/website/ts/components/ui/flash_message.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as _ from 'lodash'; -import Snackbar from 'material-ui/Snackbar'; -import * as React from 'react'; -import { Dispatcher } from 'ts/redux/dispatcher'; - -const SHOW_DURATION_MS = 4000; - -interface FlashMessageProps { - dispatcher: Dispatcher; - flashMessage?: string | React.ReactNode; - showDurationMs?: number; - bodyStyle?: React.CSSProperties; -} - -interface FlashMessageState {} - -export class FlashMessage extends React.Component<FlashMessageProps, FlashMessageState> { - public static defaultProps: Partial<FlashMessageProps> = { - showDurationMs: SHOW_DURATION_MS, - bodyStyle: {}, - }; - public render(): React.ReactNode { - if (!_.isUndefined(this.props.flashMessage)) { - return ( - <Snackbar - open={true} - message={this.props.flashMessage} - autoHideDuration={this.props.showDurationMs} - onRequestClose={this._onClose.bind(this)} - bodyStyle={this.props.bodyStyle} - /> - ); - } else { - return null; - } - } - private _onClose(): void { - this.props.dispatcher.hideFlashMessage(); - } -} diff --git a/packages/website/ts/components/ui/help_tooltip.tsx b/packages/website/ts/components/ui/help_tooltip.tsx deleted file mode 100644 index 831d888f5..000000000 --- a/packages/website/ts/components/ui/help_tooltip.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import ReactTooltip from 'react-tooltip'; - -interface HelpTooltipProps { - style?: React.CSSProperties; - explanation: React.ReactNode; -} - -export const HelpTooltip = (props: HelpTooltipProps) => { - return ( - <div - style={{ ...props.style }} - className="inline-block" - data-tip={props.explanation} - data-for="helpTooltip" - data-multiline={true} - > - <i style={{ fontSize: 16 }} className="zmdi zmdi-help" /> - <ReactTooltip id="helpTooltip" /> - </div> - ); -}; diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx deleted file mode 100644 index 9f469ec69..000000000 --- a/packages/website/ts/components/ui/icon_button.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { colors, Styles } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -export interface IconButtonProps { - iconName: string; - labelText?: string; - onClick?: () => void; - color?: string; - display?: string; -} -interface IconButtonState { - isHovering: boolean; -} -export class IconButton extends React.Component<IconButtonProps, IconButtonState> { - public static defaultProps: Partial<IconButtonProps> = { - labelText: '', - color: colors.mediumBlue, - }; - public constructor(props: IconButtonProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - const styles: Styles = { - root: { - cursor: this.props.onClick ? 'pointer' : 'undefined', - opacity: this.state.isHovering && this.props.onClick ? 0.5 : 1, - display: this.props.display, - }, - icon: { - color: this.props.color, - fontSize: 20, - }, - label: { - color: this.props.color, - fontSize: 10, - }, - }; - return ( - <div - className="flex items-center py2" - onClick={this.props.onClick} - onMouseEnter={this._onToggleHover.bind(this, true)} - onMouseLeave={this._onToggleHover.bind(this, false)} - style={styles.root} - > - <i style={styles.icon} className={`zmdi ${this.props.iconName}`} /> - {!_.isEmpty(this.props.labelText) && ( - <div className="pl1" style={styles.label}> - {this.props.labelText} - </div> - )} - </div> - ); - } - private _onToggleHover(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } -} diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx deleted file mode 100644 index 9eca04a5d..000000000 --- a/packages/website/ts/components/ui/identicon.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import blockies from 'blockies'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Circle } from 'ts/components/ui/circle'; -import { Image } from 'ts/components/ui/image'; -import { colors } from 'ts/style/colors'; - -interface IdenticonProps { - address: string; - diameter: number; - style?: React.CSSProperties; -} - -interface IdenticonState {} - -export class Identicon extends React.Component<IdenticonProps, IdenticonState> { - public static defaultProps: Partial<IdenticonProps> = { - style: {}, - }; - public render(): React.ReactNode { - const address = this.props.address; - const diameter = this.props.diameter; - return ( - <div - className="circle relative transitionFix" - style={{ - width: diameter, - height: diameter, - overflow: 'hidden', - ...this.props.style, - }} - > - {!_.isEmpty(address) ? ( - <Image - src={blockies({ - seed: address.toLowerCase(), - }).toDataURL()} - height={diameter} - width={diameter} - /> - ) : ( - <Circle diameter={diameter} fillColor={colors.grey200} /> - )} - </div> - ); - } -} diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx deleted file mode 100644 index d698ddaa0..000000000 --- a/packages/website/ts/components/ui/image.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -export interface ImageProps { - className?: string; - src?: string; - fallbackSrc?: string; - borderRadius?: string; - width?: string | number; - height?: string | number; - maxWidth?: string | number; - maxHeight?: string | number; - additionalStyle?: React.CSSProperties; -} -interface ImageState { - imageLoadFailed: boolean; -} -export class Image extends React.Component<ImageProps, ImageState> { - constructor(props: ImageProps) { - super(props); - this.state = { - imageLoadFailed: false, - }; - } - public render(): React.ReactNode { - const src = - this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; - return ( - <img - className={this.props.className} - onError={this._onError.bind(this)} - src={src} - style={{ - ...this.props.additionalStyle, - borderRadius: this.props.borderRadius, - maxWidth: this.props.maxWidth, - maxHeight: this.props.maxHeight, - }} - height={this.props.height} - width={this.props.width} - /> - ); - } - private _onError(): void { - this.setState({ - imageLoadFailed: true, - }); - } -} diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx deleted file mode 100644 index e7afb5a17..000000000 --- a/packages/website/ts/components/ui/input_label.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { colors, Styles } from '@0x/react-shared'; -import * as React from 'react'; - -export interface InputLabelProps { - text: string | Element | React.ReactNode; -} - -const styles: Styles = { - label: { - color: colors.grey, - fontSize: 12, - pointerEvents: 'none', - textAlign: 'left', - transform: 'scale(0.75) translate(0px, -28px)', - transformOrigin: 'left top 0px', - transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms', - userSelect: 'none', - width: 240, - zIndex: 1, - } as React.CSSProperties, -}; - -export const InputLabel = (props: InputLabelProps) => { - return <label style={styles.label}>{props.text}</label>; -}; diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx deleted file mode 100644 index c8abfb7e0..000000000 --- a/packages/website/ts/components/ui/island.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import { colors } from 'ts/style/colors'; -import { styled } from 'ts/style/theme'; - -export interface IslandProps { - style?: React.CSSProperties; - className?: string; - Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>; - borderRadius?: string; -} - -const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, style, className, children }) => ( - <Component style={style} className={className} children={children} /> -); - -export const Island = styled(PlainIsland)` - background-color: ${colors.white}; - border-radius: ${props => props.borderRadius}; - box-shadow: 0px 4px 6px ${colors.walletBoxShadow}; - overflow: hidden; -`; - -Island.defaultProps = { - Component: 'div', - borderRadius: '10px', - style: {}, -}; - -Island.displayName = 'Island'; diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx deleted file mode 100644 index f004dd47f..000000000 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { colors } from '@0x/react-shared'; -import { errorUtils } from '@0x/utils'; -import RaisedButton from 'material-ui/RaisedButton'; -import * as React from 'react'; - -const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; - -enum ButtonState { - Ready, - Loading, - Complete, -} - -interface LifeCycleRaisedButtonProps { - isHidden?: boolean; - isDisabled?: boolean; - isPrimary?: boolean; - labelReady: React.ReactNode | string; - labelLoading: React.ReactNode | string; - labelComplete: React.ReactNode | string; - onClickAsyncFn: () => Promise<boolean>; - backgroundColor?: string; - labelColor?: string; -} - -interface LifeCycleRaisedButtonState { - buttonState: ButtonState; -} - -export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> { - public static defaultProps: Partial<LifeCycleRaisedButtonProps> = { - isDisabled: false, - backgroundColor: colors.white, - labelColor: colors.darkGrey, - }; - private _buttonTimeoutId: number; - private _didUnmount: boolean; - constructor(props: LifeCycleRaisedButtonProps) { - super(props); - this.state = { - buttonState: ButtonState.Ready, - }; - } - public componentWillUnmount(): void { - clearTimeout(this._buttonTimeoutId); - this._didUnmount = true; - } - public render(): React.ReactNode { - if (this.props.isHidden) { - return <span />; - } - - let label; - switch (this.state.buttonState) { - case ButtonState.Ready: - label = this.props.labelReady; - break; - case ButtonState.Loading: - label = this.props.labelLoading; - break; - case ButtonState.Complete: - label = this.props.labelComplete; - break; - default: - throw errorUtils.spawnSwitchErr('ButtonState', this.state.buttonState); - } - return ( - <RaisedButton - primary={this.props.isPrimary} - label={label} - style={{ width: '100%' }} - backgroundColor={this.props.backgroundColor} - labelColor={this.props.labelColor} - onClick={this.onClickAsync.bind(this)} - disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.Ready} - /> - ); - } - public async onClickAsync(): Promise<void> { - this.setState({ - buttonState: ButtonState.Loading, - }); - const didSucceed = await this.props.onClickAsyncFn(); - if (this._didUnmount) { - return; // noop since unmount called before async callback returned. - } - if (didSucceed) { - this.setState({ - buttonState: ButtonState.Complete, - }); - this._buttonTimeoutId = window.setTimeout(() => { - this.setState({ - buttonState: ButtonState.Ready, - }); - }, COMPLETE_STATE_SHOW_LENGTH_MS); - } else { - this.setState({ - buttonState: ButtonState.Ready, - }); - } - } -} diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx deleted file mode 100644 index 2cf44cae1..000000000 --- a/packages/website/ts/components/ui/multi_select.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Container } from './container'; - -export interface MultiSelectItemConfig { - value: string; - renderItemContent: (isSelected: boolean) => React.ReactNode; - onClick?: () => void; -} - -export interface MultiSelectProps { - selectedValues?: string[]; - items: MultiSelectItemConfig[]; - backgroundColor?: string; - height?: string; -} - -export class MultiSelect extends React.Component<MultiSelectProps> { - public static defaultProps = { - backgroundColor: colors.white, - }; - public render(): React.ReactNode { - const { items, backgroundColor, selectedValues, height } = this.props; - return ( - <Container - backgroundColor={backgroundColor} - borderRadius="4px" - width="100%" - height={height} - overflowY="scroll" - > - {_.map(items, item => ( - <MultiSelectItem - key={item.value} - renderItemContent={item.renderItemContent} - backgroundColor={backgroundColor} - onClick={item.onClick} - isSelected={_.isUndefined(selectedValues) || _.includes(selectedValues, item.value)} - /> - ))} - </Container> - ); - } -} - -export interface MultiSelectItemProps { - renderItemContent: (isSelected: boolean) => React.ReactNode; - isSelected?: boolean; - onClick?: () => void; - backgroundColor?: string; -} - -export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({ - renderItemContent, - isSelected, - onClick, - backgroundColor, -}) => ( - <Container cursor="pointer" shouldDarkenOnHover={true} onClick={onClick} backgroundColor={backgroundColor}> - <Container borderBottom={`1px solid ${colors.lightestGrey}`} margin="0px 15px" padding="10px 0px"> - {renderItemContent(isSelected)} - </Container> - </Container> -); diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx deleted file mode 100644 index fc7507475..000000000 --- a/packages/website/ts/components/ui/overlay.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { zIndex } from 'ts/style/z_index'; - -export interface OverlayProps { - style?: React.CSSProperties; - onClick?: () => void; -} - -const style: React.CSSProperties = { - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: zIndex.overlay, - backgroundColor: 'rgba(0, 0, 0, 0.6)', -}; - -export const Overlay: React.StatelessComponent<OverlayProps> = props => ( - <div style={{ ...style, ...props.style }} onClick={props.onClick}> - {props.children} - </div> -); - -Overlay.defaultProps = { - style: {}, - onClick: _.noop.bind(_), -}; - -Overlay.displayName = 'Overlay'; diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx deleted file mode 100644 index a14b94d8a..000000000 --- a/packages/website/ts/components/ui/party.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import ReactTooltip from 'react-tooltip'; -import { EthereumAddress } from 'ts/components/ui/ethereum_address'; -import { Identicon } from 'ts/components/ui/identicon'; - -const IMAGE_DIMENSION = 100; -const IDENTICON_DIAMETER = 95; - -interface PartyProps { - label: string; - address: string; - networkId: number; - alternativeImage?: string; - identiconDiameter?: number; - identiconStyle?: React.CSSProperties; - isInTokenRegistry?: boolean; - hasUniqueNameAndSymbol?: boolean; -} - -interface PartyState {} - -export class Party extends React.Component<PartyProps, PartyState> { - public static defaultProps: Partial<PartyProps> = { - identiconStyle: {}, - identiconDiameter: IDENTICON_DIAMETER, - }; - public render(): React.ReactNode { - const label = this.props.label; - const address = this.props.address; - const identiconDiameter = this.props.identiconDiameter; - const emptyIdenticonStyles = { - width: identiconDiameter, - height: identiconDiameter, - backgroundColor: 'lightgray', - marginTop: 13, - marginBottom: 10, - }; - const tokenImageStyle = { - width: IMAGE_DIMENSION, - height: IMAGE_DIMENSION, - }; - const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists( - this.props.address, - this.props.networkId, - EtherscanLinkSuffixes.Address, - ); - const isRegistered = this.props.isInTokenRegistry; - const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`; - const uniqueNameAndSymbolTooltipId = `${this.props.address}-${isRegistered}-uniqueTooltip`; - return ( - <div style={{ overflow: 'hidden' }}> - <div className="pb1 center">{label}</div> - {_.isEmpty(address) ? ( - <div className="circle mx-auto" style={emptyIdenticonStyles} /> - ) : ( - <a href={etherscanLinkIfExists} target="_blank"> - {isRegistered && !_.isUndefined(this.props.alternativeImage) ? ( - <img style={tokenImageStyle} src={this.props.alternativeImage} /> - ) : ( - <div className="mx-auto" style={{ height: identiconDiameter, width: identiconDiameter }}> - <Identicon - address={this.props.address} - diameter={identiconDiameter} - style={this.props.identiconStyle} - /> - </div> - )} - </a> - )} - <div className="mx-auto center pt1"> - <div style={{ height: 25 }}> - <EthereumAddress address={address} networkId={this.props.networkId} /> - </div> - {!_.isUndefined(this.props.isInTokenRegistry) && ( - <div> - <div - data-tip={true} - data-for={registeredTooltipId} - className="mx-auto" - style={{ fontSize: 13, width: 127 }} - > - <span - style={{ - color: isRegistered ? colors.brightGreen : colors.red500, - }} - > - <i - className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`} - /> - </span>{' '} - <span>{isRegistered ? 'Registered' : 'Unregistered'} token</span> - <ReactTooltip id={registeredTooltipId}> - {isRegistered ? ( - <div> - This token address was found in the token registry - <br /> - smart contract and is therefore believed to be a<br /> - legitimate token. - </div> - ) : ( - <div> - This token is not included in the token registry - <br /> - smart contract. We cannot guarantee the legitimacy - <br /> - of this token. Make sure to verify its address on Etherscan. - </div> - )} - </ReactTooltip> - </div> - </div> - )} - {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol && ( - <div> - <div - data-tip={true} - data-for={uniqueNameAndSymbolTooltipId} - className="mx-auto" - style={{ fontSize: 13, width: 127 }} - > - <span style={{ color: colors.red500 }}> - <i className="zmdi zmdi-alert-octagon" /> - </span>{' '} - <span>Suspicious token</span> - <ReactTooltip id={uniqueNameAndSymbolTooltipId}> - This token shares it's name, symbol or both with - <br /> - a token in the 0x Token Registry but it has a different - <br /> - smart contract address. This is most likely a scam token! - </ReactTooltip> - </div> - </div> - )} - </div> - </div> - ); - } -} diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx deleted file mode 100644 index c97b1e700..000000000 --- a/packages/website/ts/components/ui/pointer.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -export enum PointerDirection { - Top = 'top', - Right = 'right', - Bottom = 'bottom', - Left = 'left', -} - -export interface PointerProps { - className?: string; - color?: string; - size?: number; - direction: PointerDirection; -} - -const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props} />; - -const positionToCss = (props: PointerProps) => { - const position = { - top: `bottom: 100%; left: 50%;`, - right: `left: 100%; top: 50%;`, - bottom: `top: 100%; left: 50%;`, - left: `right: 100%; top: 50%;`, - }[props.direction]; - - const borderColorSide = { - top: 'border-bottom-color', - right: 'border-left-color', - bottom: 'border-top-color', - left: 'border-right-color', - }[props.direction]; - const border = `${borderColorSide}: ${props.color};`; - const marginSide = { - top: 'margin-left', - right: 'margin-top', - bottom: 'margin-left', - left: 'margin-top', - }[props.direction]; - const margin = `${marginSide}: -${props.size}px`; - return { - position, - border, - margin, - }; -}; - -export const Pointer = styled(PlainPointer)` - position: relative; - &:after { - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: rgba(136, 183, 213, 0); - border-width: ${props => `${props.size}px`}; - ${props => positionToCss(props).position} - ${props => positionToCss(props).border} - ${props => positionToCss(props).margin} - } -`; - -Pointer.defaultProps = { - color: colors.white, - size: 16, -}; - -Pointer.displayName = 'Pointer'; diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx deleted file mode 100644 index 5080462fa..000000000 --- a/packages/website/ts/components/ui/required_label.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; - -export interface RequiredLabelProps { - label: string | React.ReactNode; -} - -export const RequiredLabel = (props: RequiredLabelProps) => { - return ( - <span> - {props.label} - <span style={{ color: colors.red600 }}>*</span> - </span> - ); -}; diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx deleted file mode 100644 index 543b7df4b..000000000 --- a/packages/website/ts/components/ui/retry.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; - -import { Button } from 'ts/components/ui/button'; -import { colors } from 'ts/style/colors'; - -const BUTTON_TEXT = 'reload'; - -export interface RetryProps { - onRetry: () => void; -} -export const Retry = (props: RetryProps) => ( - <div className="clearfix center" style={{ color: colors.black }}> - <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}> - <div className="h2" style={{ fontFamily: 'Roboto Mono' }}> - Something went wrong. - </div> - <div className="py3"> - <Button - type="button" - backgroundColor={colors.black} - width="290px" - fontColor={colors.white} - fontSize="18px" - fontFamily="Roboto Mono" - onClick={props.onRetry} - > - {BUTTON_TEXT} - </Button> - </div> - </div> - </div> -); diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx deleted file mode 100644 index 45ee752e3..000000000 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Link } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; -import * as CopyToClipboard from 'react-copy-to-clipboard'; - -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { colors } from 'ts/style/colors'; -import { WebsitePaths } from 'ts/types'; - -export interface SimpleMenuProps { - minWidth?: number | string; -} - -export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => { - return ( - <Container - marginLeft="16px" - marginRight="16px" - marginBottom="16px" - minWidth={minWidth} - className="flex flex-column" - > - {children} - </Container> - ); -}; - -SimpleMenu.defaultProps = { - minWidth: '220px', -}; - -export interface SimpleMenuItemProps { - displayText: string; - onClick?: () => void; -} -export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ displayText, onClick }) => { - // Falling back to _.noop for onclick retains the hovering effect - return ( - <Container marginTop="16px" className="flex flex-column"> - <Text - fontSize="14px" - fontColor={colors.darkGrey} - onClick={onClick || _.noop.bind(_)} - hoverColor={colors.mediumBlue} - > - {displayText} - </Text> - </Container> - ); -}; - -export interface CopyAddressSimpleMenuItemProps { - userAddress: string; - onClick?: () => void; -} -export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimpleMenuItemProps> = ({ - userAddress, - onClick, -}) => { - return ( - <CopyToClipboard text={userAddress}> - <SimpleMenuItem displayText="Copy Address to Clipboard" onClick={onClick} /> - </CopyToClipboard> - ); -}; - -export interface GoToAccountManagementSimpleMenuItemProps { - onClick?: () => void; -} -export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< - GoToAccountManagementSimpleMenuItemProps -> = ({ onClick }) => { - return ( - <Link to={`${WebsitePaths.Portal}/account`}> - <SimpleMenuItem displayText="Manage Account..." onClick={onClick} /> - </Link> - ); -}; - -export interface DifferentWalletSimpleMenuItemProps { - onClick?: () => void; -} -export const DifferentWalletSimpleMenuItem: React.StatelessComponent<DifferentWalletSimpleMenuItemProps> = ({ - onClick, -}) => { - return <SimpleMenuItem displayText="Use Ledger Wallet..." onClick={onClick} />; -}; diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx deleted file mode 100644 index dc73e74e3..000000000 --- a/packages/website/ts/components/ui/spinner.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -import { dash, rotate } from 'ts/style/keyframes'; - -interface SpinnerSvgProps { - color: string; - size: number; - viewBox?: string; -} - -const SpinnerSvg: React.StatelessComponent<SpinnerSvgProps> = props => <svg {...props} />; - -const StyledSpinner = styled(SpinnerSvg)` - animation: ${rotate} 3s linear infinite; - margin: ${props => `-${props.size / 2}px 0 0 -${props.size / 2}px`}; - margin-top: ${props => `-${props.size / 2}px`}; - margin-left: ${props => `-${props.size / 2}px`}; - margin-bottom: 0px; - margin-right: 0px; - size: ${props => `${props.size}px`}; - height: ${props => `${props.size}px`}; - - & .path { - stroke: ${props => props.color}; - stroke-linecap: round; - animation: ${dash} 2.5s ease-in-out infinite; - } -`; - -export interface SpinnerProps { - size?: number; - strokeSize?: number; - color?: string; -} - -export const Spinner: React.StatelessComponent<SpinnerProps> = ({ size, strokeSize, color }) => { - const c = size / 2; - const r = c - strokeSize; - return ( - <StyledSpinner color={color} size={size} viewBox={`0 0 ${size} ${size}`}> - <circle className="path" cx={c} cy={c} r={r} fill="none" strokeWidth={strokeSize} /> - </StyledSpinner> - ); -}; - -Spinner.defaultProps = { - size: 50, - color: colors.mediumBlue, - strokeSize: 4, -}; - -Spinner.displayName = 'Spinner'; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx deleted file mode 100644 index 406da8fe1..000000000 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; - -interface SwapIconProps { - swapTokensFn: () => void; -} - -interface SwapIconState { - isHovering: boolean; -} - -export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { - public constructor(props: SwapIconProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - const swapStyles = { - color: this.state.isHovering ? colors.amber600 : colors.amber800, - fontSize: 50, - }; - return ( - <div - className="mx-auto pt4" - style={{ cursor: 'pointer', height: 50, width: 37.5 }} - onClick={this.props.swapTokensFn} - onMouseEnter={this._onToggleHover.bind(this, true)} - onMouseLeave={this._onToggleHover.bind(this, false)} - > - <i style={swapStyles} className="zmdi zmdi-swap" /> - </div> - ); - } - private _onToggleHover(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } -} diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx deleted file mode 100644 index 046442ee5..000000000 --- a/packages/website/ts/components/ui/text.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { colors } from '@0x/react-shared'; -import { darken } from 'polished'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i' | 'span'; - -export interface TextProps { - className?: string; - children?: any; - Tag?: TextTag; - fontSize?: string; - fontFamily?: string; - fontStyle?: string; - fontColor?: string; - lineHeight?: string; - minHeight?: string; - center?: boolean; - fontWeight?: number | string; - textDecorationLine?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - hoverColor?: string; - letterSpacing?: string | number; - noWrap?: boolean; - textAlign?: string; - display?: string; -} - -const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( - <Tag className={className} onClick={onClick}> - {children} - </Tag> -); - -export const Text = styled(PlainText)` - font-family: ${props => props.fontFamily}; - font-style: ${props => props.fontStyle}; - font-weight: ${props => props.fontWeight}; - font-size: ${props => props.fontSize}; - text-align: ${props => props.textAlign}; - letter-spacing: ${props => props.letterSpacing}; - text-decoration-line: ${props => props.textDecorationLine}; - ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; - ${props => (props.center ? 'text-align: center' : '')}; - color: ${props => props.fontColor}; - ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; - ${props => (props.onClick ? 'cursor: pointer' : '')}; - transition: color 0.5s ease; - ${props => (props.noWrap ? 'white-space: nowrap' : '')}; - ${props => (props.display ? `display: ${props.display}` : '')}; - &:hover { - ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; - } -`; - -Text.defaultProps = { - fontFamily: 'Roboto', - fontStyle: 'normal', - fontWeight: 400, - fontColor: colors.black, - fontSize: '15px', - lineHeight: '1.5em', - textDecorationLine: 'none', - Tag: 'div', - noWrap: false, -}; - -Text.displayName = 'Text'; - -export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />; - -Title.defaultProps = { - Tag: 'h2', - fontSize: '20px', - fontWeight: 600, - fontColor: colors.black, -}; - -Title.displayName = 'Title'; diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx deleted file mode 100644 index 0875cc56b..000000000 --- a/packages/website/ts/components/ui/token_icon.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { Identicon } from 'ts/components/ui/identicon'; -import { Token } from 'ts/types'; - -interface TokenIconProps { - token: Token; - diameter: number; - link?: string; -} - -interface TokenIconState {} - -export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> { - public render(): React.ReactNode { - const token = this.props.token; - const diameter = this.props.diameter; - const icon = - token.isRegistered && !_.isUndefined(token.iconUrl) ? ( - <img style={{ width: diameter, height: diameter }} src={token.iconUrl} /> - ) : ( - <Identicon address={token.address} diameter={diameter} /> - ); - if (_.isEmpty(this.props.link)) { - return icon; - } else { - return ( - <a href={this.props.link} target="_blank" style={{ textDecoration: 'none' }}> - {icon} - </a> - ); - } - } -} |