1 files changed, 53 insertions, 49 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 0b9b8165e..d88a59d15 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -12,37 +12,6 @@ export interface RelayerGridTileProps {
     networkId: number;
 }
 
-// TODO: Get top tokens from remote
-const topTokens = [
-    {
-        address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba',
-        decimals: 18,
-        iconUrl: '/images/token_icons/makerdao.png',
-        isRegistered: true,
-        isTracked: true,
-        name: 'Maker DAO',
-        symbol: 'MKR',
-    },
-    {
-        address: '0x323b5d4c32345ced77393b3530b1eed0f346429d',
-        decimals: 18,
-        iconUrl: '/images/token_icons/melon.png',
-        isRegistered: true,
-        isTracked: true,
-        name: 'Melon Token',
-        symbol: 'MLN',
-    },
-    {
-        address: '0xb18845c260f680d5b9d84649638813e342e4f8c9',
-        decimals: 18,
-        iconUrl: '/images/token_icons/augur.png',
-        isRegistered: true,
-        isTracked: true,
-        name: 'Augur Reputation Token',
-        symbol: 'REP',
-    },
-];
-
 const styles: Styles = {
     root: {
         backgroundColor: colors.white,
@@ -93,28 +62,63 @@ const styles: Styles = {
     },
 };
 
+const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+
 export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
     const link = props.relayerInfo.appUrl || props.relayerInfo.url;
     return (
-        <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>
+        <GridTile style={styles.root}>
+            <div style={styles.innerDiv}>
+                <a href={link} target="_blank" style={{ textDecoration: 'none' }}>
+                    <ImgWithFallback
+                        src={props.relayerInfo.headerImgUrl}
+                        fallbackSrc={FALLBACK_IMG_SRC}
+                        style={styles.header}
+                    />
+                </a>
+                <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={props.relayerInfo.topTokens} networkId={props.networkId} />
+                    <div className="py1" style={styles.subLabel}>
+                        Top tokens
                     </div>
                 </div>
-            </GridTile>
-        </a>
+            </div>
+        </GridTile>
     );
 };
+
+interface ImgWithFallbackProps {
+    src?: string;
+    fallbackSrc: string;
+    style: React.CSSProperties;
+}
+interface ImgWithFallbackState {
+    imageLoadFailed: boolean;
+}
+class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
+    constructor(props: ImgWithFallbackProps) {
+        super(props);
+        this.state = {
+            imageLoadFailed: false,
+        };
+    }
+    public render() {
+        if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) {
+            return <img src={this.props.fallbackSrc} style={this.props.style} />;
+        } else {
+            return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />;
+        }
+    }
+    private _onError() {
+        this.setState({
+            imageLoadFailed: true,
+        });
+    }
+}