Make mini account panel labels fully configurable

2 files changed, 42 insertions, 28 deletions

diff --git a/ui/app/components/mini-account-panel.js b/ui/app/components/mini-account-panel.js
index 1ec7b4d41..a8127acd7 100644
--- a/ui/app/components/mini-account-panel.js
+++ b/ui/app/components/mini-account-panel.js
@@ -34,17 +34,7 @@ AccountPanel.prototype.render = function () {
           display: 'flex',
           alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end',
         },
-      }, [
-
-        attrs.map((attr) => {
-          return h('span.font-small', {
-            key: `mini-${attr}`,
-            style: {
-              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-            },
-          }, attr)
-        }),
-      ]),
+      }, this.props.children),
     ])
   )
 }
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 191f5d142..9c3272faa 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -36,8 +36,6 @@ PTXP.render = function () {
   var maxCost = ((new BN(txValue, 16)).add(new BN(gasCost, 16))).toString(16)
   var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
 
-  console.dir(identity)
-  console.dir({props})
   return (
     h('div', [
 
@@ -48,15 +46,28 @@ PTXP.render = function () {
       }, [
 
         h(MiniAccountPanel, {
-          attrs: [
-            identity.name,
-            addressSummary(address, 6, 4, false),
-            formatBalance(balance),
-          ],
           imageSeed: address,
           imageifyIdenticons: props.imageifyIdenticons,
           picOrder: 'right',
-        }),
+        }, [
+          h('span.font-small', {
+            style: {
+              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+            },
+          }, identity.name),
+          h('span.font-small', {
+            style: {
+              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+            },
+          }, addressSummary(address, 6, 4, false)),
+
+          h('span.font-small', {
+            style: {
+              fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+            },
+          }, formatBalance(balance)),
+
+        ]),
 
         h('img', {
           src: 'images/forward-carrat.svg',
@@ -132,22 +143,35 @@ PTXP.miniAccountPanelForRecipient = function () {
   // If it's not a contract deploy, send to the account
   if (!isContractDeploy) {
     return h(MiniAccountPanel, {
-      attrs: [
-        nameForAddress(txParams.to),
-        addressSummary(txParams.to, 6, 4, false),
-      ],
       imageSeed: txParams.to,
       imageifyIdenticons: props.imageifyIdenticons,
       picOrder: 'left',
-    })
+    }, [
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+        },
+      }, nameForAddress(txParams.to)),
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+        },
+      }, addressSummary(txParams.to, 6, 4, false)),
+    ])
+
   } else {
     return h(MiniAccountPanel, {
-      attrs: [
-        'New Contract',
-      ],
       imageifyIdenticons: props.imageifyIdenticons,
       picOrder: 'left',
-    })
+    }, [
+
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+        },
+      }, 'New Contract'),
+
+    ])
   }
 }