Merge pull request #350 from MetaMask/notif2

Notifications - improved readability and data

app/scripts/background.js

@@ -30,21 +30,37 @@ function unlockAccountMessage () {
 }
 
 function showUnconfirmedMessage (msgParams, msgId) {
+  var controllerState = controller.getState()
+
   createMsgNotification({
-    title: 'New Unsigned Message',
+    imageifyIdenticons: false,
+    txData: {
       msgParams: msgParams,
-    confirm: idStore.approveMessage.bind(idStore, msgId, noop),
+      time: (new Date()).getTime(),
-    cancel: idStore.cancelMessage.bind(idStore, msgId),
+    },
+    identities: controllerState.identities,
+    accounts: controllerState.accounts,
+    onConfirm: idStore.approveMessage.bind(idStore, msgId, noop),
+    onCancel: idStore.cancelMessage.bind(idStore, msgId),
   })
+
 }
 
 function showUnconfirmedTx (txParams, txData, onTxDoneCb) {
+  var controllerState = controller.getState()
+
   createTxNotification({
-    title: 'New Unsigned Transaction',
+    imageifyIdenticons: false,
+    txData: {
       txParams: txParams,
-    confirm: idStore.approveTransaction.bind(idStore, txData.id, noop),
+      time: (new Date()).getTime(),
-    cancel: idStore.cancelTransaction.bind(idStore, txData.id),
+    },
+    identities: controllerState.identities,
+    accounts: controllerState.accounts,
+    onConfirm: idStore.approveTransaction.bind(idStore, txData.id, noop),
+    onCancel: idStore.cancelTransaction.bind(idStore, txData.id),
   })
+  
 }
 
 //

app/scripts/lib/notifications.js

@@ -53,62 +53,30 @@ function createUnlockRequestNotification (opts) {
   })
 }
 
-function createTxNotification (opts) {
+function createTxNotification (state) {
   // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
   if (!chrome.notifications) return console.error('Chrome notifications API missing...')
 
-  var state = {
-    title: 'New Unsigned Transaction',
-    imageifyIdenticons: false,
-    txData: {
-      txParams: opts.txParams,
-      time: (new Date()).getTime(),
-    },
-    identities: {
-
-    },
-    accounts: {
-
-    },
-    onConfirm: opts.confirm,
-    onCancel: opts.cancel,
-  }
-
   renderTxNotificationSVG(state, function(err, notificationSvgSource){
     if (err) throw err
 
     showNotification(extend(state, {
+      title: 'New Unsigned Transaction',
       imageUrl: toSvgUri(notificationSvgSource),
     }))
 
   })
 }
 
-function createMsgNotification (opts) {
+function createMsgNotification (state) {
   // guard for chrome bug https://github.com/MetaMask/metamask-plugin/issues/236
   if (!chrome.notifications) return console.error('Chrome notifications API missing...')
 
-  var state = {
-    title: 'New Unsigned Message',
-    imageifyIdenticons: false,
-    txData: {
-      msgParams: opts.msgParams,
-      time: (new Date()).getTime(),
-    },
-    identities: {
-
-    },
-    accounts: {
-
-    },
-    onConfirm: opts.confirm,
-    onCancel: opts.cancel,
-  }
-
   renderMsgNotificationSVG(state, function(err, notificationSvgSource){
     if (err) throw err
 
     showNotification(extend(state, {
+      title: 'New Unsigned Message',
       imageUrl: toSvgUri(notificationSvgSource),
     }))
 

svg-notifications.md

@@ -1,38 +0,0 @@
-Chrome notifications allow you to show an SVG image via a data-uri
-
-Taking advantage of this might allow us to show nicely formatted notifications
-
-build a template using pure svg:
-
-```svg
-<svg xmlns='http://www.w3.org/2000/svg'
-  width='1000px' height='500px' viewBox='0 0 200 100'>
-  <rect x='0' y='0' width='100%' height='100%' fill='white' />
-  <text x='0' y='20' font-family='monospace' font-size='6' fill='black'>
-    <tspan x='0' dy='1.2em'>Domain: https://boardroom.to</tspan>
-    <tspan x='0' dy='1.2em'>From:  0xabcdef</tspan>
-    <tspan x='0' dy='1.2em'>To:    0xfedcba</tspan>
-    <tspan x='0' dy='1.2em'>Value: 1.025 Ether</tspan>
-    <tspan x='0' dy='1.2em'>Gas: 0.025 Ether</tspan>
-  </text>
-</svg>
-```
-
-generate uri
-`'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgSrc)`
-
-or svg-embedded html:
-
-```svg
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
-  <rect x='0' y='0' width='100%' height='100%' fill='white' />
-  <foreignObject class="node" x="46" y="22" width="200" height="300">
-    <body xmlns="http://www.w3.org/1999/xhtml">
-      <div style="font-size: 120px">
-        The quick brown fox jumps over the lazy dog.
-        Pack my box with five dozen liquor jugs
-      </div>
-    </body>
-  </foreignObject>
-</svg>
-```