2 files changed, 67 insertions, 0 deletions
diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx
new file mode 100644
index 000000000..c4977d70b
--- /dev/null
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import BigNumber from 'bignumber.js';
+import {ZeroEx} from '0x.js';
+import {Token} from 'ts/types';
+import {utils} from 'ts/utils/utils';
+
+interface TokenSendCompletedProps {
+    etherScanLinkIfExists?: string;
+    token: Token;
+    toAddress: string;
+    amountInBaseUnits: BigNumber;
+}
+
+interface TokenSendCompletedState {}
+
+export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, TokenSendCompletedState> {
+    public render() {
+        const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) &&
+                            (
+                                <a
+                                    style={{color: 'white'}}
+                                    href={`${this.props.etherScanLinkIfExists}`}
+                                    target="_blank"
+                                >
+                                    Verify on Etherscan
+                                </a>
+                            );
+        const amountInUnits = ZeroEx.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
+        const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
+        return (
+            <div>
+                {`Sent ${amountInUnits} ${this.props.token.symbol} to ${truncatedAddress}: `}
+                {etherScanLink}
+            </div>
+        );
+    }
+}
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
new file mode 100644
index 000000000..7a3cc6e86
--- /dev/null
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+
+interface TransactionSubmittedProps {
+    etherScanLinkIfExists?: string;
+}
+
+interface TransactionSubmittedState {}
+
+export class TransactionSubmitted extends React.Component<TransactionSubmittedProps, TransactionSubmittedState> {
+    public render() {
+        if (_.isUndefined(this.props.etherScanLinkIfExists)) {
+            return <div>Transaction submitted to the network</div>;
+        } else {
+            return (
+                <div>
+                    Transaction submitted to the network:{' '}
+                    <a
+                        style={{color: 'white'}}
+                        href={`${this.props.etherScanLinkIfExists}`}
+                        target="_blank"
+                    >
+                        Verify on Etherscan
+                    </a>
+                </div>
+            );
+        }
+    }
+}