Several fixes to the Wallet in general (#4504)

* Fix address non-ellipsis on Wallet view

* Add warning if daily limit has been reached

* Add OOG warnings to TxHash

* Fixes to the Warning

* Added stringified version of the changes

* Add wallet link for notifications

* Fix tests

* Use Formatted Messages

* React Intl

* s/ui.walletSettings/walletSettings in React Intl

js/src/ui/TxHash/txHash.js

@@ -21,8 +21,9 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { txLink } from '~/3rdparty/etherscan/links';
-import ShortenedHash from '../ShortenedHash';
+import Warning from '~/ui/Warning';
 
+import ShortenedHash from '../ShortenedHash';
 import styles from './txHash.css';
 
 class TxHash extends Component {
@@ -43,10 +44,44 @@ class TxHash extends Component {
 
   state = {
     blockNumber: new BigNumber(0),
+    gas: {},
     subscriptionId: null,
     transaction: null
   }
 
+  componentWillMount () {
+    this.fetchTransactionGas();
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const prevHash = this.props.hash;
+    const nextHash = nextProps.hash;
+
+    if (prevHash !== nextHash) {
+      this.fetchTransactionGas(nextProps);
+    }
+  }
+
+  /**
+   * Get the gas send for the current transaction
+   * and save the value in the state
+   */
+  fetchTransactionGas (props = this.props) {
+    const { hash } = props;
+
+    if (!hash) {
+      return;
+    }
+
+    this.context.api.eth
+      .getTransactionByHash(hash)
+      .then((transaction = {}) => {
+        const { gas = new BigNumber(0) } = transaction;
+
+        this.setState({ gas: { hash, value: gas } });
+      });
+  }
+
   componentDidMount () {
     const { api } = this.context;
 
@@ -73,6 +108,7 @@ class TxHash extends Component {
 
     return (
       <div>
+        { this.renderWarning() }
         <p>{
           summary
             ? hashLink
@@ -87,6 +123,32 @@ class TxHash extends Component {
     );
   }
 
+  renderWarning () {
+    const { gas, transaction } = this.state;
+
+    if (!(transaction && transaction.blockNumber && transaction.blockNumber.gt(0))) {
+      return null;
+    }
+
+    const { gasUsed = new BigNumber(0) } = transaction;
+    const isOog = transaction.transactionHash === gas.hash && gasUsed.gte(gas.value);
+
+    if (!isOog) {
+      return null;
+    }
+
+    return (
+      <Warning
+        warning={
+          <FormattedMessage
+            id='ui.txHash.oog'
+            defaultMessage='The transaction might have gone out of gas. Try again with more gas.'
+          />
+        }
+      />
+    );
+  }
+
   renderConfirmations () {
     const { maxConfirmations } = this.props;
     const { blockNumber, transaction } = this.state;

js/src/ui/TxHash/txHash.spec.js

@@ -33,10 +33,17 @@ function createApi () {
   blockNumber = new BigNumber(100);
   api = {
     eth: {
+      getTransactionByHash: (hash) => {
+        return Promise.resolve({
+          blockNumber: new BigNumber(100),
+          gas: new BigNumber(42000)
+        });
+      },
       getTransactionReceipt: (hash) => {
         return Promise.resolve({
           blockNumber: new BigNumber(100),
-          hash
+          transactionHash: hash,
+          gasUsed: new BigNumber(42000)
         });
       }
     },
@@ -129,6 +136,14 @@ describe('ui/TxHash', () => {
       it('renders confirmation text', () => {
         expect(child.find('FormattedMessage').props().id).to.equal('ui.txHash.confirmations');
       });
+
+      it('renders with warnings', () => {
+        expect(component.find('Warning')).to.have.length.gte(1);
+      });
+
+      it('renders with oog warning', () => {
+        expect(component.find('Warning').shallow().find('FormattedMessage').prop('id')).to.match(/oog/);
+      });
     });
   });
 });