1 files changed, 34 insertions, 0 deletions
diff --git a/packages/website/ts/components/flash_messages/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx
new file mode 100644
index 000000000..f76e05fe1
--- /dev/null
+++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx
@@ -0,0 +1,34 @@
+import { colors } from '@0xproject/react-shared';
+import { BigNumber } from '@0xproject/utils';
+import { Web3Wrapper } from '@0xproject/web3-wrapper';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { utils } from 'ts/utils/utils';
+
+interface AssetSendCompletedProps {
+    etherScanLinkIfExists?: string;
+    toAddress: string;
+    amountInBaseUnits: BigNumber;
+    decimals: number;
+    symbol: string;
+}
+
+interface AssetSendCompletedState {}
+
+export class AssetSendCompleted extends React.Component<AssetSendCompletedProps, AssetSendCompletedState> {
+    public render(): React.ReactNode {
+        const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && (
+            <a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank">
+                Verify on Etherscan
+            </a>
+        );
+        const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.decimals);
+        const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
+        return (
+            <div>
+                {`Sent ${amountInUnits} ${this.props.symbol} to ${truncatedAddress}: `}
+                {etherScanLink}
+            </div>
+        );
+    }
+}