1 files changed, 150 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
new file mode 100644
index 000000000..b72e75181
--- /dev/null
+++ b/packages/website/ts/components/ui/party.tsx
@@ -0,0 +1,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>
+        );
+    }
+}