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
|
import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import { EthereumAddress } from 'ts/components/ui/ethereum_address';
import { Identicon } from 'ts/components/ui/identicon';
const IMAGE_DIMENSION = 100;
const IDENTICON_DIAMETER = 95;
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(): React.ReactNode {
const label = this.props.label;
const address = this.props.address;
const identiconDiameter = this.props.identiconDiameter;
const emptyIdenticonStyles = {
width: identiconDiameter,
height: identiconDiameter,
backgroundColor: 'lightgray',
marginTop: 13,
marginBottom: 10,
};
const tokenImageStyle = {
width: IMAGE_DIMENSION,
height: IMAGE_DIMENSION,
};
const etherscanLinkIfExists = sharedUtils.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: identiconDiameter, width: identiconDiameter }}>
<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 ? colors.brightGreen : 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>
);
}
}
|
