diff options
Diffstat (limited to 'packages/website/ts/components/relayer_index')
3 files changed, 0 insertions, 335 deletions
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx deleted file mode 100644 index 7f1b4ebb4..000000000 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { Styles } from '@0x/react-shared'; -import * as _ from 'lodash'; -import { GridTile as PlainGridTile } from 'material-ui/GridList'; -import * as React from 'react'; -import { analytics } from 'ts/utils/analytics'; - -import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; -import { Container } from 'ts/components/ui/container'; -import { Image } from 'ts/components/ui/image'; -import { Island } from 'ts/components/ui/island'; -import { colors } from 'ts/style/colors'; -import { media } from 'ts/style/media'; -import { styled } from 'ts/style/theme'; -import { WebsiteBackendRelayerInfo } from 'ts/types'; -import { utils } from 'ts/utils/utils'; - -export enum RelayerGridTileStyle { - Expanded = 0, - Minimized, -} - -export interface RelayerGridTileProps { - relayerInfo: WebsiteBackendRelayerInfo; - networkId: number; - style: RelayerGridTileStyle; -} - -const styles: Styles = { - root: { - boxSizing: 'border-box', - // All material UI components have position: relative - // which creates a new stacking context and makes z-index stuff impossible. So reset. - position: 'static', - }, - innerDiv: { - height: '100%', - boxSizing: 'border-box', - }, - expandedHeader: { - height: '50%', - width: '100%', - }, - minimizedHeader: { - height: '100%', - width: '100%', - }, - body: { - height: '50%', - width: '100%', - boxSizing: 'border-box', - padding: 12, - }, - weeklyTradeVolumeLabel: { - fontSize: 14, - color: colors.mediumBlue, - }, - subLabel: { - fontSize: 12, - color: colors.lightGrey, - }, - relayerNameLabel: { - fontSize: 16, - fontWeight: 'bold', - color: colors.black, - }, -}; - -const FALLBACK_IMG_SRC = '/images/relayer_fallback.png'; -const FALLBACK_PRIMARY_COLOR = colors.grey300; -const NO_CONTENT_MESSAGE = '--'; -const RELAYER_ICON_HEIGHT = '110px'; - -export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => { - const link = props.relayerInfo.appUrl || props.relayerInfo.url; - const topTokens = props.relayerInfo.topTokens; - const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; - const onClick = () => { - analytics.track('Relayer Click', { - name: props.relayerInfo.name, - }); - utils.openUrl(link); - }; - const headerImageUrl = props.relayerInfo.logoImgUrl; - const headerBackgroundColor = - !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) - ? props.relayerInfo.primaryColor - : FALLBACK_PRIMARY_COLOR; - const isExpanded = props.style === RelayerGridTileStyle.Expanded; - const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader; - return ( - <Island style={styles.root} Component={GridTile}> - <div style={styles.innerDiv} onClick={onClick}> - <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}> - <Image - className="mx-auto" - src={props.relayerInfo.logoImgUrl} - fallbackSrc={FALLBACK_IMG_SRC} - height={RELAYER_ICON_HEIGHT} - /> - </div> - {isExpanded && ( - <div style={styles.body}> - <div className="pb1" style={styles.relayerNameLabel}> - {props.relayerInfo.name} - </div> - <Section titleText="Weekly Trade Volume"> - {!_.isUndefined(weeklyTxnVolume) && ( - <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> - )} - </Section> - <Container marginTop="10px"> - <Section titleText="Top Tokens"> - {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} - </Section> - </Container> - </div> - )} - </div> - </Island> - ); -}; - -const GridTile = styled(PlainGridTile)` - cursor: pointer; - &:hover { - transition: transform 0.2s ease; - transform: translate(0px, -3px); - } - ${media.small` - transform: none !important; - transition: none !important; - `}; -`; - -interface SectionProps { - titleText: string; - children?: React.ReactNode; -} -const Section = (props: SectionProps) => { - return ( - <div> - <div style={styles.subLabel}>{props.titleText}</div> - <Container marginTop="6px">{props.children || <NoContent />}</Container> - </div> - ); -}; - -const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>; diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx deleted file mode 100644 index e88c20d7e..000000000 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import * as _ from 'lodash'; -import CircularProgress from 'material-ui/CircularProgress'; -import { GridList } from 'material-ui/GridList'; -import * as React from 'react'; - -import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile'; -import { Retry } from 'ts/components/ui/retry'; -import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; -import { backendClient } from 'ts/utils/backend_client'; - -export enum RelayerIndexCellStyle { - Expanded = 0, - Minimized, -} - -export interface RelayerIndexProps { - networkId: number; - screenWidth: ScreenWidths; - cellStyle: RelayerIndexCellStyle; -} - -interface RelayerIndexState { - relayerInfos?: WebsiteBackendRelayerInfo[]; - error?: Error; -} - -const CELL_HEIGHT_EXPANDED = 290; -const CELL_HEIGHT_MINIMIZED = 225; -const NUMBER_OF_COLUMNS_LARGE = 3; -const NUMBER_OF_COLUMNS_MEDIUM = 2; -const NUMBER_OF_COLUMNS_SMALL = 2; -const GRID_PADDING = 20; - -export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> { - private _isUnmounted: boolean; - constructor(props: RelayerIndexProps) { - super(props); - this._isUnmounted = false; - this.state = { - relayerInfos: undefined, - error: undefined, - }; - } - public componentWillMount(): void { - // tslint:disable-next-line:no-floating-promises - this._fetchRelayerInfosAsync(); - } - public componentWillUnmount(): void { - this._isUnmounted = true; - } - public render(): React.ReactNode { - const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); - if (!isReadyToRender) { - return ( - // TODO: consolidate this loading component with the one in portal and OpenPositions - // TODO: possibly refactor into a generic loading container with spinner and retry UI - <div className="center"> - {_.isUndefined(this.state.error) ? ( - <CircularProgress size={40} thickness={5} /> - ) : ( - <Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} /> - )} - </div> - ); - } else { - const numberOfRelayers = this.state.relayerInfos.length; - const numberOfColumns = Math.min( - numberOfRelayers, - this._numberOfColumnsForScreenWidth(this.props.screenWidth), - ); - const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded; - const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED; - const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized; - return ( - <GridList - cellHeight={cellHeight} - cols={numberOfColumns} - padding={GRID_PADDING} - style={{ marginTop: -10, marginBottom: 0 }} - > - {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( - <RelayerGridTile - key={index} - relayerInfo={relayerInfo} - networkId={this.props.networkId} - style={gridTileStyle} - /> - ))} - </GridList> - ); - } - } - private async _fetchRelayerInfosAsync(): Promise<void> { - try { - if (!this._isUnmounted) { - this.setState({ - relayerInfos: undefined, - error: undefined, - }); - } - const relayerInfos = await backendClient.getRelayerInfosAsync(); - if (!this._isUnmounted) { - this.setState({ - relayerInfos, - }); - } - } catch (error) { - if (!this._isUnmounted) { - this.setState({ - error, - }); - } - } - } - private _numberOfColumnsForScreenWidth(screenWidth: ScreenWidths): number { - switch (screenWidth) { - case ScreenWidths.Md: - return NUMBER_OF_COLUMNS_MEDIUM; - case ScreenWidths.Sm: - return NUMBER_OF_COLUMNS_SMALL; - case ScreenWidths.Lg: - default: - return NUMBER_OF_COLUMNS_LARGE; - } - } -} diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx deleted file mode 100644 index 558d99855..000000000 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { WebsiteBackendTokenInfo } from 'ts/types'; -import { analytics } from 'ts/utils/analytics'; -import { utils } from 'ts/utils/utils'; - -export interface TopTokensProps { - tokens: WebsiteBackendTokenInfo[]; - networkId: number; -} - -export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTokensProps) => { - return ( - <div className="flex"> - {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo) => { - return ( - <Container key={tokenInfo.address} marginRight="16px"> - <TokenLink tokenInfo={tokenInfo} networkId={props.networkId} /> - </Container> - ); - })} - </div> - ); -}; - -interface TokenLinkProps { - tokenInfo: WebsiteBackendTokenInfo; - networkId: number; -} -interface TokenLinkState {} - -class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { - constructor(props: TokenLinkProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - const onClick = (event: React.MouseEvent<HTMLElement>) => { - event.stopPropagation(); - analytics.track('Token Click', { - tokenSymbol: this.props.tokenInfo.symbol, - }); - const tokenLink = this._tokenLinkFromToken(this.props.tokenInfo, this.props.networkId); - utils.openUrl(tokenLink); - }; - return ( - <Text fontSize="14px" fontColor={colors.mediumBlue} onClick={onClick}> - {this.props.tokenInfo.symbol} - </Text> - ); - } - private _tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string { - return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address); - } -} |