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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import {colors} from 'material-ui/styles';
import {Identicon} from 'ts/components/ui/identicon';
import {EtherscanLinkSuffixes} from 'ts/types';
import {utils} from 'ts/utils/utils';
import {EthereumAddress} from 'ts/components/ui/ethereum_address';
const MIN_ADDRESS_WIDTH = 60;
const IMAGE_DIMENSION = 100;
const IDENTICON_DIAMETER = 95;
const CHECK_MARK_GREEN = 'rgb(0, 195, 62)';
interface PartyProps {
label: string;
address: string;
networkId: number;
alternativeImage?: string;
identiconDiameter?: number;
identiconStyle?: React.CSSProperties;
isInTokenRegistry?: boolean;
hasUniqueNameAndSymbol?: boolean;
}
interface PartyState {}
export class Party extends React.Component<PartyProps, PartyState> {
public static defaultProps: Partial<PartyProps> = {
identiconStyle: {},
identiconDiameter: IDENTICON_DIAMETER,
};
public render() {
const label = this.props.label;
const address = this.props.address;
const tooltipId = `${label}-${address}-tooltip`;
const identiconDiameter = this.props.identiconDiameter;
const addressWidth = identiconDiameter > MIN_ADDRESS_WIDTH ?
identiconDiameter : MIN_ADDRESS_WIDTH;
const emptyIdenticonStyles = {
width: identiconDiameter,
height: identiconDiameter,
backgroundColor: 'lightgray',
marginTop: 13,
marginBottom: 10,
};
const tokenImageStyle = {
width: IMAGE_DIMENSION,
height: IMAGE_DIMENSION,
};
const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
this.props.address, this.props.networkId, EtherscanLinkSuffixes.address,
);
const isRegistered = this.props.isInTokenRegistry;
const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`;
const uniqueNameAndSymbolTooltipId = `${this.props.address}-${isRegistered}-uniqueTooltip`;
return (
<div style={{overflow: 'hidden'}}>
<div className="pb1 center">{label}</div>
{_.isEmpty(address) ?
<div
className="circle mx-auto"
style={emptyIdenticonStyles}
/> :
<a
href={etherscanLinkIfExists}
target="_blank"
>
{isRegistered && !_.isUndefined(this.props.alternativeImage) ?
<img
style={tokenImageStyle}
src={this.props.alternativeImage}
/> :
<div
className="mx-auto"
style={{height: IMAGE_DIMENSION, width: IMAGE_DIMENSION}}
>
<Identicon
address={this.props.address}
diameter={identiconDiameter}
style={this.props.identiconStyle}
/>
</div>
}
</a>
}
<div
className="mx-auto center pt1"
>
<div style={{height: 25}}>
<EthereumAddress address={address} networkId={this.props.networkId} />
</div>
{!_.isUndefined(this.props.isInTokenRegistry) &&
<div>
<div
data-tip={true}
data-for={registeredTooltipId}
className="mx-auto"
style={{fontSize: 13, width: 127}}
>
<span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}>
<i
className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
/>
</span>{' '}
<span>{isRegistered ? 'Registered' : 'Unregistered'} token</span>
<ReactTooltip id={registeredTooltipId}>
{isRegistered ?
<div>
This token address was found in the token registry<br />
smart contract and is therefore believed to be a<br />
legitimate token.
</div> :
<div>
This token is not included in the token registry<br />
smart contract. We cannot guarantee the legitimacy<br />
of this token. Make sure to verify its address on Etherscan.
</div>
}
</ReactTooltip>
</div>
</div>
}
{!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol &&
<div>
<div
data-tip={true}
data-for={uniqueNameAndSymbolTooltipId}
className="mx-auto"
style={{fontSize: 13, width: 127}}
>
<span style={{color: colors.red500}}>
<i
className="zmdi zmdi-alert-octagon"
/>
</span>{' '}
<span>Suspicious token</span>
<ReactTooltip id={uniqueNameAndSymbolTooltipId}>
This token shares it's name, symbol or both with<br />
a token in the 0x Token Registry but it has a different<br />
smart contract address. This is most likely a scam token!
</ReactTooltip>
</div>
</div>
}
</div>
</div>
);
}
}
|
