Merge development

packages/monorepo-scripts/src/postpublish_utils.ts

@@ -164,7 +164,12 @@ export const postpublishUtils = {
         });
         return fileIncludesAdjusted;
     },
-    async generateAndUploadDocsAsync(cwd: string, fileIncludes: string[], version: string, S3BucketPath: string): Promise<void> {
+    async generateAndUploadDocsAsync(
+        cwd: string,
+        fileIncludes: string[],
+        version: string,
+        S3BucketPath: string,
+    ): Promise<void> {
         const fileIncludesAdjusted = this.adjustFileIncludePaths(fileIncludes, cwd);
         const projectFiles = fileIncludesAdjusted.join(' ');
         const jsonFilePath = `${cwd}/${generatedDocsDirectoryName}/index.json`;

packages/monorepo-scripts/src/utils.ts

@@ -43,7 +43,7 @@ export const utils = {
         }
         return updatedPackages;
     },
-    getChangelogJSONIfExists(changelogPath: string): string|undefined {
+    getChangelogJSONIfExists(changelogPath: string): string | undefined {
         try {
             const changelogJSON = fs.readFileSync(changelogPath, 'utf-8');
             return changelogJSON;

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}>

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);
 }

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;