1 files changed, 35 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
new file mode 100644
index 000000000..c3d03b78c
--- /dev/null
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
+import ReactTooltip = require('react-tooltip');
+import {EtherscanLinkSuffixes} from 'ts/types';
+import {utils} from 'ts/utils/utils';
+
+interface EthereumAddressProps {
+    address: string;
+    networkId: number;
+}
+
+export const EthereumAddress = (props: EthereumAddressProps) => {
+    const tooltipId = `${props.address}-ethereum-address`;
+    const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
+    return (
+        <div>
+            <div
+                className="inline"
+                style={{fontSize: 13}}
+                data-tip={true}
+                data-for={tooltipId}
+            >
+                {truncatedAddress}
+            </div>
+            <div className="pl1 inline">
+                <EtherScanIcon
+                    addressOrTxHash={props.address}
+                    networkId={props.networkId}
+                    etherscanLinkSuffixes={EtherscanLinkSuffixes.address}
+                />
+            </div>
+            <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
+        </div>
+    );
+};