ui - redesign - trans group + + account detail + tx list fixes

ui/app/account-detail.js

@@ -42,85 +42,99 @@ AccountDetailScreen.prototype.render = function() {
 
   return (
 
-    h('.account-detail-section.flex-column.flex-grow', {
-      style: {
-        width: 330,
-        marginTop: 28,
-      },
-    }, [
+    h('.account-detail-section.flex-column.flex-grow', [
 
-      h('.flex-row.flex-space-between', [
+      // identicon, label, balance, etc
+      h('.account-data-subsection.flex-column.flex-grow', {
+        style: {
+          margin: '0 20px',
+        },
+      }, [
 
-        // invisible placeholder for later
-        h('i.fa.fa-users.fa-lg.color-orange', {
+        // header - identicon + nav
+        h('.flex-row.flex-space-between', {
           style: {
-            visibility: 'hidden',
+            marginTop: 28,
           },
-        }),
+        }, [
 
-        // large identicon
-        h('.identicon-wrapper.flex-column.flex-center.select-none', [
-          h(Identicon, {
-            diameter: 62,
-            address: selected,
+          // invisible placeholder for later
+          h('i.fa.fa-users.fa-lg.color-orange', {
+            style: {
+              visibility: 'hidden',
+            },
           }),
-        ]),
-
-        // small accounts nav
-        h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
-          onClick: this.navigateToAccounts.bind(this),
-        }),
 
-      ]),
+          // large identicon
+          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+            h(Identicon, {
+              diameter: 62,
+              address: selected,
+            }),
+          ]),
+
+          // small accounts nav
+          h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
+            onClick: this.navigateToAccounts.bind(this),
+          }),
 
-      h('h2.font-medium.color-forest.flex-center', {
-        style: {
-          paddingTop: 8,
-          marginBottom: 32,
-        },
-      }, identity && identity.name),
+        ]),
 
-      h('.flex-row.flex-space-between', {
-        style: {
-          marginBottom: 16,
-        },
-      }, [
+        // account label
+        h('h2.font-medium.color-forest.flex-center', {
+          style: {
+            paddingTop: 8,
+            marginBottom: 32,
+          },
+        }, identity && identity.name),
 
-        h('div', {
+        // address and getter actions
+        h('.flex-row.flex-space-between', {
           style: {
-            lineHeight: '16px',
+            marginBottom: 16,
           },
-        }, addressSummary(selected)),
+        }, [
 
-        h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
-          onClick: () => this.requestAccountExport(account.address),
-        }),
+          h('div', {
+            style: {
+              lineHeight: '16px',
+            },
+          }, addressSummary(selected)),
 
-        h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
-          onClick: () => console.warn('QRCode not implented...'),
-        }),
+          h('i.fa.fa-download.fa-md.cursor-pointer.color-orange', {
+            onClick: () => this.requestAccountExport(account.address),
+          }),
 
-        h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
-          onClick: () => copyToClipboard(account.address),
-        }),
+          h('i.fa.fa-qrcode.fa-md.cursor-disabled.color-orange', {
+            onClick: () => console.warn('QRCode not implented...'),
+          }),
 
-      ]),
+          h('i.fa.fa-clipboard.fa-md.cursor-pointer.color-orange', {
+            onClick: () => copyToClipboard(account.address),
+          }),
 
-      h('.flex-row.flex-space-between', [
+        ]),
 
-        h('div', {
-          style: {
-            lineHeight: '50px',
-          },
-        }, formatBalance(account.balance)),
+        // balance + send
+        h('.flex-row.flex-space-between', [
+
+          h('div', {
+            style: {
+              lineHeight: '50px',
+            },
+          }, formatBalance(account && account.balance)),
 
-        h('button', {
-          onClick: () => this.props.dispatch(actions.showSendPage()),
-        }, 'SEND ETH'),
+          h('button', {
+            onClick: () => this.props.dispatch(actions.showSendPage()),
+          }, 'SEND ETH'),
 
+        ]),
+      
       ]),
 
+      // subview (tx history, pk export confirm)
       h(ReactCSSTransitionGroup, {
+        className: 'css-transition-group',
         transitionName: 'main',
         transitionEnterTimeout: 300,
         transitionLeaveTimeout: 300,
@@ -155,15 +169,17 @@ AccountDetailScreen.prototype.transactionList = function() {
   var state = this.props
   var transactions = state.transactions
 
-  return transactionList(transactions
-  // only transactions that have a hash
-  .filter(tx => tx.hash)
-  // only transactions that are from the current address
-  .filter(tx => tx.txParams.from === state.address)
-  // only transactions that are on the current network
-  .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
-  // sort by recency
-  .sort((a, b) => b.time - a.time), state.networkVersion)
+  var txsToRender = transactions
+    // only transactions that are from the current address
+    .filter(tx => tx.txParams.from === state.address)
+    // only transactions that are on the current network
+    .filter(tx => tx.txParams.metamaskNetworkId === state.networkVersion)
+    // only transactions that have a hash
+    .filter(tx => tx.hash)
+    // sort by recency
+    .sort((a, b) => b.time - a.time)
+
+  return transactionList(txsToRender, state.networkVersion)
 }
 
 AccountDetailScreen.prototype.navigateToAccounts = function(event){

ui/app/app.js

@@ -104,7 +104,8 @@ App.prototype.render = function() {
         }
       }, [
         h(ReactCSSTransitionGroup, {
-          transitionName: "main",
+          className: 'css-transition-group',
+          transitionName: 'main',
           transitionEnterTimeout: 300,
           transitionLeaveTimeout: 300,
         }, [

ui/app/components/panel.js

@@ -18,12 +18,15 @@ Panel.prototype.render = function() {
   var identity = state.identity || {}
   var account = state.account || {}
   var isFauceting = state.isFauceting
+  var style = {
+    flex: '1 0 auto',
+  }
+
+  if (state.onClick) style.cursor = 'pointer'
 
   return (
     h('.identity-panel.flex-row.flex-space-between', {
-      style: {
-        flex: '1 0 auto',
-      },
+      style,
       onClick: state.onClick,
     }, [
 
@@ -42,7 +45,7 @@ Panel.prototype.render = function() {
           return h('.flex-row.flex-space-between', {
             key: '' + Math.round(Math.random() * 1000000),
           }, [
-            h('label.font-small', attr.key),
+            h('label.font-small.no-select', attr.key),
             h('span.font-small', attr.value),
           ])
         }),

ui/app/components/transaction-list.js

@@ -5,50 +5,62 @@ const explorerLink = require('../../lib/explorer-link')
 const Panel = require('./panel')
 
 module.exports = function(transactions, network) {
-  return h('section', [
+  return (
 
-    h('.current-domain-panel.flex-center.font-small', [
-      h('span', 'Transactions'),
-    ]),
+    h('section.transaction-list', [
 
-    h('.tx-list', {
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+        },
+      }, [
+        'Transactions',
+      ]),
+
+      h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '180px',
+          height: '204px',
+          margin: '0 20px',
           textAlign: 'center',
         },
-      },
+      }, (
 
-      [
-
-        transactions.map((transaction) => {
-
-          var panelOpts = {
-            key: `tx-${transaction.hash}`,
-            identiconKey: transaction.txParams.to,
+        transactions.length ?
+          transactions.map(renderTransaction)
+        :
+          [h('.flex-center', {
             style: {
-              cursor: 'pointer',
-            },
-            onClick: (event) => {
-              var url = explorerLink(transaction.hash, parseInt(network))
-              chrome.tabs.create({ url });
+              height: '100%',
             },
-            attributes: [
-              {
-                key: 'TO',
-                value: addressSummary(transaction.txParams.to),
-              },
-              {
-                key: 'VALUE',
-                value: formatBalance(transaction.txParams.value),
-              },
-            ]
-          }
-
-          return h(Panel, panelOpts)
-        })
-      ]
-    )
-
-  ])
+          }, 'No transaction history...')]
+
+      ))
+
+    ])
+
+  )
  }
+
+function renderTransaction(transaction){
+  var panelOpts = {
+    key: `tx-${transaction.hash}`,
+    identiconKey: transaction.txParams.to,
+    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)
+}

ui/app/conf-tx.js

@@ -77,7 +77,8 @@ ConfirmTxScreen.prototype.render = function() {
       warningIfExists(state.warning),
 
       h(ReactCSSTransitionGroup, {
-        transitionName: "main",
+        className: 'css-transition-group',
+        transitionName: 'main',
         transitionEnterTimeout: 300,
         transitionLeaveTimeout: 300,
       }, [

ui/app/css/index.css

@@ -327,7 +327,7 @@ app sections
 /* account detail screen */
 
 .account-detail-section {
-  margin: 0 20px;
+
 }
 
 /* tx confirm */

ui/app/css/lib.css

@@ -100,7 +100,7 @@
 }
 
 .select-none {
-  cursor: default;
+  cursor: inherit;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -139,6 +139,10 @@
   font-weight: bold;
 }
 
+.text-transform-uppercase {
+  text-transform: uppercase;
+}
+
 .font-small {
   font-size: 12px;
 }

ui/app/loading.js

@@ -23,7 +23,8 @@ LoadingIndicator.prototype.render = function() {
 
   return (
     h(ReactCSSTransitionGroup, {
-      transitionName: "loader",
+      className: 'css-transition-group',
+      transitionName: 'loader',
       transitionEnterTimeout: 150,
       transitionLeaveTimeout: 150,
     }, [