Merge pull request #180 from MetaMask/PrettierTransactionList

Prettier transaction list

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Restored back button to account detail view.
 - Show transaction list always, never collapsed.
 - Changing provider now reloads current Dapps
+- Improved appearance of transaction list in account detail view.
 
 ## 1.7.0 2016-04-29
 

ui/app/account-detail.js

@@ -58,7 +58,8 @@ AccountDetailScreen.prototype.render = function() {
         showFullAddress: true,
         identity: identity,
         account: account,
-      }, []),
+        key: 'accountPanel'
+      }),
 
       h('div', {
         style: {

ui/app/accounts.js

@@ -50,7 +50,7 @@ AccountsScreen.prototype.render = function() {
        * regardless of the current domain.
        */
       h('.current-domain-panel.flex-center.font-small', [
-        h('spam', 'Selected address is visible to all sites you visit.'),
+        h('span', 'Selected address is visible to all sites you visit.'),
         // h('span', state.currentDomain),
       ]),
 

ui/app/actions.js

@@ -61,6 +61,7 @@ var actions = {
   signMsg: signMsg,
   cancelMsg: cancelMsg,
   sendTx: sendTx,
+  signTx: signTx,
   cancelTx: cancelTx,
   completedTx: completedTx,
   txError: txError,
@@ -165,6 +166,20 @@ function signMsg(msgData) {
   }
 }
 
+function signTx(txData) {
+  return (dispatch) => {
+    dispatch(this.showLoadingIndication())
+
+    web3.eth.sendTransaction(txData, (err, data) => {
+      dispatch(this.hideLoadingIndication())
+
+      if (err) return dispatch(this.displayWarning(err.message))
+      dispatch(this.hideWarning())
+      dispatch(this.goHome())
+    })
+  }
+}
+
 function sendTx(txData) {
   return (dispatch) => {
     _accountManager.approveTransaction(txData.id, (err) => {

ui/app/components/account-panel.js

@@ -6,6 +6,8 @@ const addressSummary = require('../util').addressSummary
 const formatBalance = require('../util').formatBalance
 const Identicon = require('identicon.js')
 
+const Panel = require('./panel')
+
 module.exports = AccountPanel
 
 
@@ -23,49 +25,29 @@ AccountPanel.prototype.render = function() {
   var identicon = new Identicon(identity.address, 46).toString()
   var identiconSrc = `data:image/png;base64,${identicon}`
 
-  return (
-
-    h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
-      style: {
-        flex: '1 0 auto',
+  var panelOpts = {
+    key: `accountPanel${identity.address}`,
+    onClick: (event) => {
+      if (state.onShowDetail) {
+        state.onShowDetail(identity.address, event)
+      }
+    },
+    identiconKey: identity.address,
+    identiconLabel: identity.name,
+    attributes: [
+      {
+        key: 'ADDRESS',
+        value: addressSummary(identity.address)
       },
-      onClick: (event) => state.onShowDetail(identity.address, event),
-    }, [
+      balanceOrFaucetingIndication(account, isFauceting),
+    ]
+  }
 
-      // account identicon
-      h('.identicon-wrapper.flex-column.select-none', [
-        h('img.identicon', {
-          src: identiconSrc,
-          style: {
-            border: 'none',
-            borderRadius: '20px',
-          }
-        }),
-        h('span.font-small', identity.name),
-      ]),
+  return h(Panel, panelOpts,
+  !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [
+    h('i.fa.fa-chevron-right.fa-lg'),
+  ]))
 
-      // account address, balance
-      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
-
-        h('.flex-row.flex-space-between', [
-          h('label.font-small', 'ADDRESS'),
-          h('span.font-small', addressSummary(identity.address)),
-        ]),
-
-        balanceOrFaucetingIndication(account, isFauceting),
-
-        // outlet for inserting additional stuff
-        state.children,
-
-      ]),
-
-      // navigate to account detail
-      !state.onShowDetail ? null :
-        h('.arrow-right.cursor-pointer', [
-          h('i.fa.fa-chevron-right.fa-lg'),
-        ]),
-    ])
-  )
 }
 
 function balanceOrFaucetingIndication(account, isFauceting) {
@@ -73,27 +55,14 @@ function balanceOrFaucetingIndication(account, isFauceting) {
   // Temporarily deactivating isFauceting indication
   // because it shows fauceting for empty restored accounts.
   if (/*isFauceting*/ false) {
-
-    return h('.flex-row.flex-space-between', [
-      h('span.font-small', {
-      }, [
-        'Account is auto-funding,',
-        h('br'),
-        'please wait.'
-      ]),
-    ])
-
+    return {
+      key: 'Account is auto-funding.',
+      value: 'Please wait.',
+    }
   } else {
-
-    return h('.flex-row.flex-space-between', [
-      h('label.font-small', 'BALANCE'),
-      h('span.font-small', {
-        style: {
-          overflowX: 'hidden',
-          maxWidth: '136px',
-        }
-      }, formatBalance(account.balance)),
-    ])
-
+    return {
+      key: 'BALANCE',
+      value: formatBalance(account.balance)
+    }
   }
 }

ui/app/components/panel.js

@@ -0,0 +1,63 @@
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const Identicon = require('identicon.js')
+
+module.exports = Panel
+
+
+inherits(Panel, Component)
+function Panel() {
+  Component.call(this)
+}
+
+Panel.prototype.render = function() {
+  var state = this.props
+
+  var identity = state.identity || {}
+  var account = state.account || {}
+  var isFauceting = state.isFauceting
+
+  var identicon = new Identicon(state.identiconKey, 46).toString()
+  var identiconSrc = `data:image/png;base64,${identicon}`
+
+  return (
+    h('.identity-panel.flex-row.flex-space-between', {
+      style: {
+        flex: '1 0 auto',
+      },
+      onClick: state.onClick,
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h('img.identicon', {
+          src: identiconSrc,
+          style: {
+            border: 'none',
+            borderRadius: '20px',
+          }
+        }),
+        h('span.font-small', state.identiconLabel),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        state.attributes.map((attr) => {
+          return h('.flex-row.flex-space-between', {
+            key: '' + Math.round(Math.random() * 1000000),
+          }, [
+            h('label.font-small', attr.key),
+            h('span.font-small', attr.value),
+          ])
+        }),
+      ]),
+
+      // outlet for inserting additional stuff
+      state.children,
+    ])
+  )
+}
+

ui/app/components/transaction-list.js

@@ -2,30 +2,54 @@ const h = require('react-hyperscript')
 const formatBalance = require('../util').formatBalance
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
+const Panel = require('./panel')
 
 module.exports = function(transactions, network) {
-  return h('.tx-list', {
-      style: {
-        overflowY: 'auto',
-        height: '180px',
-        textAlign: 'center',
+  return h('section', [
+
+    h('.current-domain-panel.flex-center.font-small', [
+      h('span', 'Transactions'),
+    ]),
+
+    h('.tx-list', {
+        style: {
+          overflowY: 'auto',
+          height: '180px',
+          textAlign: 'center',
+        },
       },
-    },
 
-    [
-      h('div.font-small', {style: {display: 'inline'}}, 'Transactions'),
+      [
 
-      transactions.map((transaction) => {
-        return h('.tx.flex-row.flex-space-around', [
-          h('a.font-small',
-          {
-            href: explorerLink(transaction.hash, parseInt(network)),
-            target: '_blank',
-          },
-          addressSummary(transaction.txParams.to)),
-          h('div.font-small', formatBalance(transaction.txParams.value))
-        ])
-      })
-    ]
-  )
-}
+        transactions.map((transaction) => {
+          console.dir(transaction)
+
+          var panelOpts = {
+            key: `tx-${transaction.hash}`,
+            identiconKey: transaction.txParams.to,
+            style: {
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              var url = explorerLink(transaction.hash, parseInt(network))
+              chrome.tabs.create({ url });
+            },
+            attributes: [
+              {
+                key: 'TO',
+                value: addressSummary(transaction.txParams.to),
+              },
+              {
+                key: 'VALUE',
+                value: formatBalance(transaction.txParams.value),
+              },
+            ]
+          }
+
+          return h(Panel, panelOpts)
+        })
+      ]
+    )
+
+  ])
+ }