Merge branch 'development' into feature/website/top-bar-redesign

* development: (63 commits)
  Update The Ocean logo
  Fix artifacts paths
  Create an artifacts folder
  Introduce a var
  Add removeHexPrefix util method
  CHeck if ABI exists
  Improve the readability of the check for should compile
  Use named constants
  Add a comment
  Fix comments
  Rename args to constructor-args
  Fix a typo
  Define a separator const
  Move artifacts from src/artifacts to artifacts/v1
  Fix sol-cov to work with the new artifacts format
  Implement new artifacts format
  Publish
  Updated CHANGELOGS
  Make node types a dependency
  Fix type errors in CSS properties
  ...

2 files changed, 24 insertions, 19 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 0c4b2841c..0b9b8165e 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -12,8 +12,7 @@ export interface RelayerGridTileProps {
     networkId: number;
 }
 
-// TODO: Get top tokens and headerurl from remote
-const headerUrl = '/images/og_image.png';
+// TODO: Get top tokens from remote
 const topTokens = [
     {
         address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba',
@@ -68,6 +67,9 @@ const styles: Styles = {
         borderBottomLeftRadius: 4,
         borderTopRightRadius: 4,
         borderTopLeftRadius: 4,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: colors.walletBorder,
     },
     body: {
         paddingLeft: 6,
@@ -92,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={headerUrl} 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/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 1e92dba85..bc84cf9e8 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -66,7 +66,7 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                     >
                         {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo) => (
                             <RelayerGridTile
-                                key={relayerInfo.id}
+                                key={relayerInfo.name}
                                 relayerInfo={relayerInfo}
                                 networkId={this.props.networkId}
                             />