Open relayer app when clicking on grid tile

2 files changed, 20 insertions, 16 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
index 7d0551581..0b9b8165e 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -94,24 +94,27 @@ const styles: Styles = {
 };
 
 export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
+    const link = props.relayerInfo.appUrl || props.relayerInfo.url;
     return (
-        <GridTile style={styles.root}>
-            <div style={styles.innerDiv}>
-                <img src={props.relayerInfo.headerImgUrl} style={styles.header} />
-                <div style={styles.body}>
-                    <div className="py1" style={styles.relayerNameLabel}>
-                        {props.relayerInfo.name}
-                    </div>
-                    <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div>
-                    <div className="py1" style={styles.subLabel}>
-                        Daily Trade Volume
-                    </div>
-                    <TopTokens tokens={topTokens} networkId={props.networkId} />
-                    <div className="py1" style={styles.subLabel}>
-                        Top tokens
+        <a href={link} target="_blank" style={{ textDecoration: 'none' }}>
+            <GridTile style={styles.root}>
+                <div style={styles.innerDiv}>
+                    <img src={props.relayerInfo.headerImgUrl} style={styles.header} />
+                    <div style={styles.body}>
+                        <div className="py1" style={styles.relayerNameLabel}>
+                            {props.relayerInfo.name}
+                        </div>
+                        <div style={styles.dailyTradeVolumeLabel}>{props.relayerInfo.dailyTxnVolume}</div>
+                        <div className="py1" style={styles.subLabel}>
+                            Daily Trade Volume
+                        </div>
+                        <TopTokens tokens={topTokens} networkId={props.networkId} />
+                        <div className="py1" style={styles.subLabel}>
+                            Top tokens
+                        </div>
                     </div>
                 </div>
-            </div>
-        </GridTile>
+            </GridTile>
+        </a>
     );
 };
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 484f09e5d..693077ee6 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -507,6 +507,7 @@ export interface WebsiteBackendRelayerInfo {
     name: string;
     dailyTxnVolume: string;
     url: string;
+    appUrl?: string;
     headerImgUrl: string;
 }