add and format from address with link

app/components/Modals/ReceiveModal/ReceiveModal.jsx

@@ -4,17 +4,20 @@ import BaseModal from '../BaseModal'
 import styles from './ReceiveModal.scss'
 import QRCode from 'qrcode/lib/browser'
 import CopyToClipboard from '../../CopyToClipboard'
+import { openExplorerAddress } from '../../../core/explorer'
 
 type Props = {
     address: string,
     hideModal: Function,
+    net: NetworkType,
+    explorer: ExplorerType,
 }
 
 class ReceiveModal extends Component<Props> {
   canvas: ?HTMLCanvasElement
 
   render () {
-    const { hideModal, address } = this.props
+    const { hideModal, address, net, explorer } = this.props
     return (
       <BaseModal
         onAfterOpen={() => {
@@ -34,7 +37,7 @@ class ReceiveModal extends Component<Props> {
         <div className={styles.textContainer}>
           <div>Your Public NEO Address:</div>
           <div className={styles.address}>
-            <strong>{address}</strong>
+            <strong><div className={styles.externalLink} onClick={() => openExplorerAddress(net, explorer, address)}>{address}</div></strong>
             <CopyToClipboard text={address} tooltip='Copy Public Address' />
           </div>
           <div className={styles.canvas}><canvas ref={(node) => { this.canvas = node }} /></div>

app/components/Modals/ReceiveModal/ReceiveModal.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/variables';
+
 .textContainer {
     padding: 20px 0;
 }
@@ -6,3 +8,11 @@
     margin: 10px 0;
     text-align: center;
 }
+
+.externalLink {
+    color: $link-color;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    display: inline-block;
+}

app/components/Modals/SendModal/ConfirmDisplay.jsx

@@ -18,6 +18,7 @@ type Props = {
   cancelTransaction: Function,
   explorer: ExplorerType,
   net: NetworkType,
+  address: string,
 }
 
 type State = {
@@ -38,7 +39,7 @@ class ConfirmDisplay extends React.Component<Props, State> {
     if (err) {
       message = 'Warning: there was an error verifying the recipient address has activity in its transaction history.'
     } else if (!transactions || !transactions.length) {
-      message = 'Warning: recipient address has no activity in its transaction history. Please be sure the address is correct before sending.'
+      message = 'Warning: recipient address has no activity in its transaction history. Please be sure the address is correct before sending. Note that empty addresses will not appear in blockchain explorers. If it is a new address, please double check that you input the correct address.'
     }
 
     this.setState({
@@ -53,7 +54,7 @@ class ConfirmDisplay extends React.Component<Props, State> {
   }
 
   render () {
-    const { sendAddress, sendAmount, symbol, confirmTransaction, cancelTransaction, explorer, net } = this.props
+    const { sendAddress, sendAmount, symbol, confirmTransaction, cancelTransaction, explorer, net, address } = this.props
     const { addressChecked, addressCheckedMessage } = this.state
 
     if (!addressChecked) {
@@ -62,7 +63,10 @@ class ConfirmDisplay extends React.Component<Props, State> {
       return (
         <div>
           <p>Please confirm the following transaction:</p>
-          <p>You are sending <strong>{formatBalance(symbol, sendAmount)} {symbol}</strong> to:</p>
+          <p>You are sending <strong>{formatBalance(symbol, sendAmount)} {symbol}</strong></p>
+          <p>from:</p>
+          <div className={styles.externalLink} onClick={() => openExplorerAddress(net, explorer, address)}>{address}</div>
+          <p>to:</p>
           <div className={styles.externalLink} onClick={() => openExplorerAddress(net, explorer, sendAddress)}>{sendAddress}</div>
           <div>
             <Button onClick={confirmTransaction}>Confirm</Button>

app/components/Modals/SendModal/SendModal.jsx

@@ -22,6 +22,7 @@ type Props = {
   sendTransaction: Function,
   explorer: ExplorerType,
   net: NetworkType,
+  address: string,
 }
 
 type State = {
@@ -95,7 +96,7 @@ class SendModal extends Component<Props, State> {
   }
 
   render () {
-    const { hideModal, tokens, explorer, net } = this.props
+    const { hideModal, tokens, explorer, net, address } = this.props
     const { display } = this.state
 
     return (
@@ -122,6 +123,7 @@ class SendModal extends Component<Props, State> {
             cancelTransaction={this.cancelTransaction}
             explorer={explorer}
             net={net}
+            address={address}
             {...this.state}
           />}
       </BaseModal>

app/containers/Dashboard/Dashboard.jsx

@@ -71,12 +71,12 @@ export default class Dashboard extends Component<Props> {
             <div className={styles.walletButtons}>
               <div
                 className={classNames(styles.walletButton, styles.sendButton)}
-                onClick={() => showModal(MODAL_TYPES.SEND, { NEO, GAS, tokens, showErrorNotification, sendTransaction, explorer, net })}>
+                onClick={() => showModal(MODAL_TYPES.SEND, { NEO, GAS, tokens, showErrorNotification, sendTransaction, explorer, net, address })}>
                 <FaArrowUpward className={styles.walletButtonIcon} /><span className={styles.walletButtonText}>Send</span>
               </div>
               <div
                 className={styles.walletButton}
-                onClick={() => showModal(MODAL_TYPES.RECEIVE, { address })}>
+                onClick={() => showModal(MODAL_TYPES.RECEIVE, { address, net, explorer })}>
                 <FaArrowDownward className={styles.walletButtonIcon} /><span className={styles.walletButtonText}>Receive</span>
               </div>
             </div>