aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx32
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx4
-rw-r--r--packages/website/ts/types.ts2
3 files changed, 24 insertions, 14 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 fbb634164..0b0e75312 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -26,7 +26,6 @@ const styles: Styles = {
header: {
height: '50%',
width: '100%',
- objectFit: 'cover',
borderBottomRightRadius: 4,
borderBottomLeftRadius: 4,
borderTopRightRadius: 4,
@@ -58,21 +57,26 @@ const styles: Styles = {
};
const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+const FALLBACK_PRIMARY_COLOR = colors.grey200;
const NO_CONTENT_MESSAGE = '--';
+const RELAYER_ICON_HEIGHT = '110px';
export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
const link = props.relayerInfo.appUrl || props.relayerInfo.url;
const topTokens = props.relayerInfo.topTokens;
const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
+ const headerImageUrl = props.relayerInfo.logoImgUrl;
+ const headerBackgroundColor =
+ !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
+ ? props.relayerInfo.primaryColor
+ : FALLBACK_PRIMARY_COLOR;
return (
<Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv}>
<a href={link} target="_blank" style={{ textDecoration: 'none' }}>
- <ImgWithFallback
- src={props.relayerInfo.headerImgUrl}
- fallbackSrc={FALLBACK_IMG_SRC}
- style={styles.header}
- />
+ <div style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+ <ImgWithFallback src={props.relayerInfo.logoImgUrl} fallbackSrc={FALLBACK_IMG_SRC} />
+ </div>
</a>
<div style={styles.body}>
<div className="py1" style={styles.relayerNameLabel}>
@@ -112,7 +116,6 @@ const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
interface ImgWithFallbackProps {
src?: string;
fallbackSrc: string;
- style: React.CSSProperties;
}
interface ImgWithFallbackState {
imageLoadFailed: boolean;
@@ -125,11 +128,16 @@ class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallb
};
}
public render(): React.ReactNode {
- 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} />;
- }
+ return (
+ <div className="flex items-center" style={{ height: '100%' }}>
+ {this._renderImg()}
+ </div>
+ );
+ }
+ private _renderImg(): React.ReactNode {
+ const src =
+ this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
+ return <img className="mx-auto" onError={this._onError.bind(this)} src={src} height={RELAYER_ICON_HEIGHT} />;
}
private _onError(): void {
this.setState({
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 3c5761bcd..8dd4f0fbf 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -37,8 +37,8 @@ const styles: Styles = {
};
const CELL_HEIGHT = 290;
-const NUMBER_OF_COLUMNS_LARGE = 4;
-const NUMBER_OF_COLUMNS_MEDIUM = 3;
+const NUMBER_OF_COLUMNS_LARGE = 3;
+const NUMBER_OF_COLUMNS_MEDIUM = 2;
const NUMBER_OF_COLUMNS_SMALL = 1;
const GRID_PADDING = 20;
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 24e86a901..d00154652 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -519,6 +519,8 @@ export interface WebsiteBackendRelayerInfo {
url: string;
appUrl?: string;
headerImgUrl?: string;
+ logoImgUrl?: string;
+ primaryColor?: string;
topTokens: WebsiteBackendTokenInfo[];
}