diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/README.md | 8 | ||||
| -rw-r--r-- | packages/website/package.json | 2 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/components/relayer_index/relayer_top_tokens.tsx | 53 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 2 |
5 files changed, 51 insertions, 20 deletions
diff --git a/packages/website/README.md b/packages/website/README.md index d93d18935..7115a3b5c 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -30,18 +30,16 @@ yarn install ### Initial setup -The **first** time you work with this package, you must build **all** packages within the monorepo. This is because packages that depend on other packages located inside this monorepo are symlinked when run from **within** the monorepo. This allows you to make changes across multiple packages without first publishing dependent packages to NPM. To build all packages, run the following from the monorepo root directory: +To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory: ```bash -yarn lerna:rebuild +PKG=@0xproject/website yarn build ``` ### Run dev server -The the `website` root directory, run: - ```bash -yarn dev +PKG=@0xproject/website yarn watch ``` Visit [0xproject.localhost:3572](http://0xproject.localhost:3572) in your browser. diff --git a/packages/website/package.json b/packages/website/package.json index 707fea108..538aa91a7 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -10,7 +10,7 @@ "build": "NODE_ENV=production webpack; exit 0;", "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "dev": "webpack-dev-server --content-base public --https", + "watch": "webpack-dev-server --content-base public --https", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers" }, diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 592bff29f..5964dcd56 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -47,7 +47,7 @@ const styles: Styles = { width: '100%', boxSizing: 'border-box', }, - dailyTradeVolumeLabel: { + weeklyTradeVolumeLabel: { fontSize: 14, color: colors.mediumBlue, }, @@ -80,9 +80,9 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( <div className="py1" style={styles.relayerNameLabel}> {props.relayerInfo.name} </div> - <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div> + <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> <div className="py1" style={styles.subLabel}> - Daily Trade Volume + Weekly Trade Volume </div> <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} /> <div className="py1" style={styles.subLabel}> diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index 468a350e4..03c70c9dd 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -26,21 +26,54 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => { const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; const style = index !== 0 ? firstItemStyle : styles.tokenLabel; - return ( - <a - key={tokenInfo.address} - href={tokenLinkFromToken(tokenInfo, props.networkId)} - target="_blank" - style={style} - > - {tokenInfo.symbol} - </a> - ); + return <TokenLink tokenInfo={tokenInfo} style={style} networkId={props.networkId} />; })} </div> ); }; +interface TokenLinkProps { + tokenInfo: WebsiteBackendTokenInfo; + style: React.CSSProperties; + networkId: number; +} +interface TokenLinkState { + isHovering: boolean; +} + +class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { + constructor(props: TokenLinkProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const style = { + ...this.props.style, + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }; + return ( + <a + key={this.props.tokenInfo.address} + href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)} + target="_blank" + style={style} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + > + {this.props.tokenInfo.symbol} + </a> + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} + function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number): string { return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 58929a0c6..5caf5e73c 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -506,7 +506,7 @@ export interface TokenState { export interface WebsiteBackendRelayerInfo { name: string; - dailyTxnVolume: string; + weeklyTxnVolume: string; url: string; appUrl?: string; headerImgUrl?: string; |