1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import { GridTile } from 'material-ui/GridList';
import * as React from 'react';
import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { RelayerInfo, Token } from 'ts/types';
export interface RelayerGridTileProps {
relayerInfo: RelayerInfo;
networkId: number;
}
const styles: Styles = {
root: {
backgroundColor: colors.white,
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
overflow: 'hidden',
boxSizing: 'border-box',
},
innerDiv: {
padding: 6,
height: '100%',
boxSizing: 'border-box',
},
header: {
height: '50%',
width: '100%',
objectFit: 'cover',
borderBottomRightRadius: 4,
borderBottomLeftRadius: 4,
borderTopRightRadius: 4,
borderTopLeftRadius: 4,
},
body: {
paddingLeft: 6,
paddingRight: 6,
height: '50%',
width: '100%',
boxSizing: 'border-box',
},
marketShareBar: {
height: 14,
width: '100%',
backgroundColor: colors.mediumBlue,
},
subLabel: {
fontSize: 12,
color: colors.lightGrey,
},
relayerNameLabel: {
fontSize: 16,
fontWeight: 'bold',
color: colors.black,
},
};
export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
return (
<GridTile style={styles.root}>
<div style={styles.innerDiv}>
<img src={props.relayerInfo.headerUrl} style={styles.header} />
<div style={styles.body}>
<div className="py1" style={styles.relayerNameLabel}>
{props.relayerInfo.name}
</div>
<div style={styles.marketShareBar} />
<div className="py1" style={styles.subLabel}>
Market share
</div>
<TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} />
<div className="py1" style={styles.subLabel}>
Top tokens
</div>
</div>
</div>
</GridTile>
);
};
|