Add checksumming to payment request & confirmation modal (#1428)

* Add checksum to payment request to address

* add checksum to confirmation modal

common/components/AddressField.tsx

@@ -3,13 +3,15 @@ import { AddressFieldFactory } from './AddressFieldFactory';
 import { donationAddressMap } from 'config';
 import translate from 'translations';
 import { Input } from 'components/ui';
+import { toChecksumAddress } from 'ethereumjs-util';
 
 interface Props {
   isReadOnly?: boolean;
   isSelfAddress?: boolean;
+  isCheckSummed?: boolean;
 }
 
-export const AddressField: React.SFC<Props> = ({ isReadOnly, isSelfAddress }) => (
+export const AddressField: React.SFC<Props> = ({ isReadOnly, isSelfAddress, isCheckSummed }) => (
   <AddressFieldFactory
     isSelfAddress={isSelfAddress}
     withProps={({ currentTo, isValid, onChange, readOnly }) => (
@@ -21,7 +23,7 @@ export const AddressField: React.SFC<Props> = ({ isReadOnly, isSelfAddress }) =>
           <Input
             className={`input-group-input ${isValid ? '' : 'invalid'}`}
             type="text"
-            value={currentTo.raw}
+            value={isCheckSummed ? toChecksumAddress(currentTo.raw) : currentTo.raw}
             placeholder={donationAddressMap.ETH}
             readOnly={!!(isReadOnly || readOnly)}
             spellCheck={false}

common/components/ConfirmationModal/components/Body/components/Addresses.tsx

@@ -39,7 +39,9 @@ class AddressesClass extends Component<StateProps> {
                       <h5 className="tx-modal-address-from-title">
                         {translate('CONFIRM_TX_FROM')}{' '}
                       </h5>
-                      <h5 className="tx-modal-address-from-address small">{from}</h5>
+                      <h5 className="tx-modal-address-from-address small">
+                        {toChecksumAddress(from)}
+                      </h5>
                     </div>
                   </React.Fragment>
                 )}
@@ -57,7 +59,7 @@ class AddressesClass extends Component<StateProps> {
                       className="small tx-modal-address-tkn-contract-link"
                       href={ETHAddressExplorer(to)}
                     >
-                      {to}
+                      {toChecksumAddress(to)}
                     </a>
                   </div>
                 </div>

common/containers/Tabs/SendTransaction/components/RequestPayment.tsx

@@ -94,7 +94,7 @@ class RequestPayment extends React.Component<Props, {}> {
     return (
       <div className="RequestPayment">
         <div className="Tab-content-pane">
-          <AddressField isReadOnly={true} />
+          <AddressField isReadOnly={true} isCheckSummed={true} />
 
           <div className="row form-group">
             <div className="col-xs-12">