Add header images to relayer grid tiles

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
+// TODO: Get top tokens from remote
-const headerUrl = '/images/og_image.png';
 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,
@@ -95,7 +97,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     return (
         <GridTile style={styles.root}>
             <div style={styles.innerDiv}>
-                <img src={headerUrl} style={styles.header} />
+                <img src={props.relayerInfo.headerImgUrl} style={styles.header} />
                 <div style={styles.body}>
                     <div className="py1" style={styles.relayerNameLabel}>
                         {props.relayerInfo.name}

packages/website/ts/types.ts

@@ -502,11 +502,12 @@ export interface TokenState {
     price?: BigNumber;
 }
 
-// TODO: Add topTokens and headerUrl properties once available from backend
+// TODO: Add topTokens property once available from backend
 export interface WebsiteBackendRelayerInfo {
     name: string;
     dailyTxnVolume: string;
     url: string;
+    headerImgUrl: string;
 }
 
 export interface WebsiteBackendPriceInfo {