aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/accounts/account-list-item.js (renamed from ui/app/accounts/account-panel.js)1
-rw-r--r--ui/app/accounts/index.js4
-rw-r--r--ui/app/components/account-panel.js50
-rw-r--r--ui/app/components/identicon.js7
-rw-r--r--ui/app/components/panel.js54
-rw-r--r--ui/app/components/pending-tx.js32
-rw-r--r--ui/lib/icon-factory.js55
7 files changed, 98 insertions, 105 deletions
diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-list-item.js
index af3d0d347..b42de182e 100644
--- a/ui/app/accounts/account-panel.js
+++ b/ui/app/accounts/account-list-item.js
@@ -33,6 +33,7 @@ NewComponent.prototype.render = function () {
this.pendingOrNot(),
h(Identicon, {
address: identity.address,
+ imageify: true,
}),
]),
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index 775df400b..f7ae5c53e 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
const actions = require('../actions')
const valuesFor = require('../util').valuesFor
const findDOMNode = require('react-dom').findDOMNode
-const AccountPanel = require('./account-panel')
+const AccountListItem = require('./account-list-item')
module.exports = connect(mapStateToProps)(AccountsScreen)
@@ -74,7 +74,7 @@ AccountsScreen.prototype.render = function () {
}
})
- return h(AccountPanel, {
+ return h(AccountListItem, {
key: `acct-panel-${identity.address}`,
identity,
selectedAddress: this.props.selectedAddress,
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 112b897d5..b98a8cb45 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -1,13 +1,13 @@
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
+const Identicon = require('./identicon')
const formatBalance = require('../util').formatBalance
const addressSummary = require('../util').addressSummary
-const Panel = require('./panel')
-
module.exports = AccountPanel
+
inherits(AccountPanel, Component)
function AccountPanel () {
Component.call(this)
@@ -19,13 +19,8 @@ AccountPanel.prototype.render = function () {
var account = state.account || {}
var isFauceting = state.isFauceting
- var panelOpts = {
+ var panelState = {
key: `accountPanel${identity.address}`,
- onClick: (event) => {
- if (state.onShowDetail) {
- state.onShowDetail(identity.address, event)
- }
- },
identiconKey: identity.address,
identiconLabel: identity.name,
attributes: [
@@ -37,10 +32,41 @@ AccountPanel.prototype.render = function () {
],
}
- return h(Panel, panelOpts,
- !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [
- h('i.fa.fa-chevron-right.fa-lg'),
- ]))
+ return (
+
+ h('.identity-panel.flex-row.flex-space-between', {
+ style: {
+ flex: '1 0 auto',
+ cursor: panelState.onClick ? 'pointer' : undefined,
+ },
+ onClick: panelState.onClick,
+ }, [
+
+ // account identicon
+ h('.identicon-wrapper.flex-column.select-none', [
+ h(Identicon, {
+ address: panelState.identiconKey,
+ imageify: !state.inlineIdenticons,
+ }),
+ h('span.font-small', panelState.identiconLabel),
+ ]),
+
+ // account address, balance
+ h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+ panelState.attributes.map((attr) => {
+ return h('.flex-row.flex-space-between', {
+ key: '' + Math.round(Math.random() * 1000000),
+ }, [
+ h('label.font-small.no-select', attr.key),
+ h('span.font-small', attr.value),
+ ])
+ }),
+ ]),
+
+ ])
+
+ )
}
function balanceOrFaucetingIndication (account, isFauceting) {
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 5fe07ce7a..c17bd5122 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -39,12 +39,9 @@ IdenticonComponent.prototype.componentDidMount = function () {
if (!address) return
var container = findDOMNode(this)
-
var diameter = state.diameter || this.defaultDiameter
- var dataUri = iconFactory.iconForAddress(address, diameter)
-
- var img = document.createElement('img')
- img.src = dataUri
+ var imageify = state.imageify
+ var img = iconFactory.iconForAddress(address, diameter, imageify)
container.appendChild(img)
}
diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
deleted file mode 100644
index cbdc82982..000000000
--- a/ui/app/components/panel.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const Identicon = require('./identicon')
-
-module.exports = Panel
-
-inherits(Panel, Component)
-function Panel () {
- Component.call(this)
-}
-
-Panel.prototype.render = function () {
- var state = this.props
-
- var style = {
- flex: '1 0 auto',
- }
-
- if (state.onClick) style.cursor = 'pointer'
-
- return (
- h('.identity-panel.flex-row.flex-space-between', {
- style,
- onClick: state.onClick,
- }, [
-
- // account identicon
- h('.identicon-wrapper.flex-column.select-none', [
- h(Identicon, {
- address: state.identiconKey,
- }),
- 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.no-select', attr.key),
- h('span.font-small', attr.value),
- ])
- }),
- ]),
-
- // outlet for inserting additional stuff
- state.children,
- ])
- )
-}
-
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 1835239e5..484046827 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -16,6 +16,10 @@ function PendingTx () {
PendingTx.prototype.render = function () {
var state = this.props
+ return this.renderGeneric(h, state)
+}
+
+PendingTx.prototype.renderGeneric = function (h, state) {
var txData = state.txData
var txParams = txData.txParams || {}
@@ -24,6 +28,7 @@ PendingTx.prototype.render = function () {
var account = state.accounts[address] || { address: address }
return (
+
h('.transaction', {
key: txData.id,
}, [
@@ -40,6 +45,7 @@ PendingTx.prototype.render = function () {
showFullAddress: true,
identity: identity,
account: account,
+ inlineIdenticons: state.inlineIdenticons,
}),
// tx data
@@ -62,15 +68,25 @@ PendingTx.prototype.render = function () {
]),
// send + cancel
- h('.flex-row.flex-space-around', [
- h('button', {
- onClick: state.cancelTransaction,
- }, 'Cancel'),
- h('button', {
- onClick: state.sendTransaction,
- }, 'Send'),
- ]),
+ state.nonInteractive ? null : actionButtons(state),
+
])
+
)
+
}
+function actionButtons(state){
+ return (
+
+ h('.flex-row.flex-space-around', [
+ h('button', {
+ onClick: state.cancelTransaction,
+ }, 'Cancel'),
+ h('button', {
+ onClick: state.sendTransaction,
+ }, 'Send'),
+ ])
+
+ )
+} \ No newline at end of file
diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js
index 1f7cca859..a30041114 100644
--- a/ui/lib/icon-factory.js
+++ b/ui/lib/icon-factory.js
@@ -12,42 +12,49 @@ function IconFactory (jazzicon) {
this.cache = {}
}
-IconFactory.prototype.iconForAddress = function (address, diameter) {
- if (this.isCached(address, diameter)) {
- return this.cache[address][diameter]
+IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
+ if (imageify) {
+ return this.generateIdenticonImg(address, diameter)
+ } else {
+ return this.generateIdenticonSvg(address, diameter)
}
-
- const dataUri = this.generateNewUri(address, diameter)
- this.cacheIcon(address, diameter, dataUri)
- return dataUri
}
-IconFactory.prototype.generateNewUri = function (address, diameter) {
- var numericRepresentation = jsNumberForAddress(address)
- var identicon = this.jazzicon(diameter, numericRepresentation)
+// returns img dom element
+IconFactory.prototype.generateIdenticonImg = function (address, diameter) {
+ var identicon = this.generateIdenticonSvg(address, diameter)
var identiconSrc = identicon.innerHTML
- var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
- return dataUri
+ var dataUri = toDataUri(identiconSrc)
+ var img = document.createElement('img')
+ img.src = dataUri
+ return img
}
-IconFactory.prototype.cacheIcon = function (address, diameter, icon) {
- if (!(address in this.cache)) {
- var sizeCache = {}
- sizeCache[diameter] = icon
- this.cache[address] = sizeCache
- return sizeCache
- } else {
- this.cache[address][diameter] = icon
- return icon
- }
+// returns svg dom element
+IconFactory.prototype.generateIdenticonSvg = function (address, diameter) {
+ var cacheId = `${address}:${diameter}`
+ // check cache, lazily generate and populate cache
+ var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter))
+ // create a clean copy so you can modify it
+ var cleanCopy = identicon.cloneNode(true)
+ return cleanCopy
}
-IconFactory.prototype.isCached = function (address, diameter) {
- return address in this.cache && diameter in this.cache[address]
+// creates a new identicon
+IconFactory.prototype.generateNewIdenticon = function (address, diameter) {
+ var numericRepresentation = jsNumberForAddress(address)
+ var identicon = this.jazzicon(diameter, numericRepresentation)
+ return identicon
}
+// util
+
function jsNumberForAddress (address) {
var addr = address.slice(2, 10)
var seed = parseInt(addr, 16)
return seed
}
+
+function toDataUri(identiconSrc){
+ return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
+} \ No newline at end of file
generated by cgit (git 2.34.1) at 2024-10-14 18:16:08 +0800