aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorDan <danjm.com@gmail.com>2017-10-10 07:17:52 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-10 09:24:14 +0800
commit71d6463984f040b2aa495a13429f6ea3505defaf (patch)
treef10f80e5de5b80f8e9967f1fccb0ab129cf266b2 /ui
parent80463072b5c0c9e826582e066fbc962b667ee355 (diff)
downloadtangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.tar
tangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.tar.gz
tangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.tar.bz2
tangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.tar.lz
tangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.tar.xz
tangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.tar.zst
tangerine-wallet-browser-71d6463984f040b2aa495a13429f6ea3505defaf.zip
Refactor 'rendersingleidentity' to a stand alone account-list-item component.
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/send/account-list-item.js51
-rw-r--r--ui/app/components/send/from-dropdown.js69
-rw-r--r--ui/app/css/itcss/components/account-dropdown.scss29
-rw-r--r--ui/app/css/itcss/components/send.scss37
-rw-r--r--ui/app/send-v2.js11
5 files changed, 105 insertions, 92 deletions
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
new file mode 100644
index 000000000..b11527d95
--- /dev/null
+++ b/ui/app/components/send/account-list-item.js
@@ -0,0 +1,51 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('../identicon')
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+ Component.call(this)
+}
+
+module.exports = AccountListItem
+
+AccountListItem.prototype.render = function () {
+ const {
+ account,
+ handleClick,
+ icon = null,
+ } = this.props
+
+ const { identity, balancesToRender } = account
+ const { name, address } = identity
+ const { primary, secondary } = balancesToRender
+
+ return h('div.account-list-item', {
+ onClick: () => handleClick(identity),
+ }, [
+
+ h('div.account-list-item__top-row', {}, [
+
+ h(
+ Identicon,
+ {
+ address,
+ diameter: 18,
+ className: 'account-list-item__identicon',
+ },
+ ),
+
+ h('div.account-list-item__account-name', {}, name),
+
+ icon && h('div.account-list-item__icon', [icon]),
+
+ ]),
+
+ h('div.account-list-item__account-primary-balance', {}, primary),
+
+ h('div.account-list-item__account-secondary-balance', {}, secondary),
+
+ ])
+} \ No newline at end of file
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
index c438cefd5..fb0a00cc2 100644
--- a/ui/app/components/send/from-dropdown.js
+++ b/ui/app/components/send/from-dropdown.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const Identicon = require('../identicon')
+const AccountListItem = require('./account-list-item')
module.exports = FromDropdown
@@ -10,48 +11,15 @@ function FromDropdown () {
Component.call(this)
}
-FromDropdown.prototype.renderSingleIdentity = function (
- account,
- handleClick,
- inList = false,
- selectedIdentity = {}
-) {
- const { identity, balancesToRender } = account
- const { name, address } = identity
- const { primary, secondary } = balancesToRender
+FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+ const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
- const iconType = inList ? 'check' : 'caret-down'
- const showIcon = !inList || address === selectedIdentity.address
-
- return h('div.send-v2__from-dropdown__account', {
- onClick: () => handleClick(identity),
- }, [
-
- h('div.send-v2__from-dropdown__top-row', {}, [
-
- h(
- Identicon,
- {
- address,
- diameter: 18,
- className: 'send-v2__from-dropdown__identicon',
- },
- ),
-
- h('div.send-v2__from-dropdown__account-name', {}, name),
-
- showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`),
-
- ]),
-
- h('div.send-v2__from-dropdown__account-primary-balance', {}, primary),
-
- h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary),
-
- ])
+ return currentAccount.identity.address === selectedAccount.identity.address
+ ? listItemIcon
+ : null
}
-FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) {
+FromDropdown.prototype.renderDropdown = function (accounts, selectedAccount, closeDropdown) {
return h('div', {}, [
h('div.send-v2__from-dropdown__close-area', {
@@ -60,12 +28,11 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity,
h('div.send-v2__from-dropdown__list', {}, [
- ...identities.map(identity => this.renderSingleIdentity(
- identity,
- () => console.log('Select identity'),
- true,
- selectedIdentity
- ))
+ ...accounts.map(account => h(AccountListItem, {
+ account,
+ handleClick: () => console.log('Select identity'),
+ icon: this.getListItemIcon(account, selectedAccount),
+ }))
]),
@@ -74,8 +41,8 @@ FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity,
FromDropdown.prototype.render = function () {
const {
- identities,
- selectedIdentity,
+ accounts,
+ selectedAccount,
setFromField,
openDropdown,
closeDropdown,
@@ -84,9 +51,13 @@ FromDropdown.prototype.render = function () {
return h('div.send-v2__from-dropdown', {}, [
- this.renderSingleIdentity(selectedIdentity, openDropdown),
+ h(AccountListItem, {
+ account: selectedAccount,
+ handleClick: openDropdown,
+ icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } })
+ }),
- dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown),
+ dropdownOpen && this.renderDropdown(accounts, selectedAccount, closeDropdown),
])
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 1c4620e40..42f02d84d 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -15,3 +15,32 @@
color: $white;
}
}
+
+.account-list-item {
+ &__top-row {
+ display: flex;
+ margin-top: 10px;
+ margin-left: 8px;
+ position: relative;
+ }
+
+ &__account-name {
+ font-size: 16px;
+ margin-left: 8px;
+ }
+
+ &__icon {
+ position: absolute;
+ right: 12px;
+ top: 1px;
+ }
+ &__account-primary-balance {
+ margin-left: 34px;
+ margin-top: 4px;
+ }
+
+ &__account-secondary-balance {
+ margin-left: 34px;
+ color: $dusty-gray;
+ }
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index ddd22f9fd..dfeb83a0a 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -528,43 +528,6 @@
font-size: 12px;
color: $tundora;
- &__top-row {
- display: flex;
- margin-top: 10px;
- margin-left: 8px;
- position: relative;
- }
-
- &__account-name {
- font-size: 16px;
- margin-left: 8px;
- }
-
- &__caret-down,
- &__check {
- position: absolute;
- right: 12px;
- top: 1px;
- }
-
- &__caret-down {
- color: $alto;
- }
-
- &__check {
- color: $caribbean-green;
- }
-
- &__account-primary-balance {
- margin-left: 34px;
- margin-top: 4px;
- }
-
- &__account-secondary-balance {
- margin-left: 34px;
- color: $dusty-gray;
- }
-
&__close-area {
position: fixed;
top: 0;
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 53e63b784..e0d7c2394 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -2,13 +2,12 @@ const { inherits } = require('util')
const PersistentForm = require('../lib/persistent-form')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
-const Identicon = require('./components/identicon')
const FromDropdown = require('./components/send/from-dropdown')
module.exports = connect(mapStateToProps)(SendTransactionScreen)
function mapStateToProps (state) {
- const mockIdentities = Array.from(new Array(5))
+ const mockAccounts = Array.from(new Array(5))
.map((v, i) => ({
identity: {
name: `Test Account Name ${i}`,
@@ -20,7 +19,7 @@ function mapStateToProps (state) {
}
}))
- return { identities: mockIdentities }
+ return { accounts: mockAccounts }
}
inherits(SendTransactionScreen, PersistentForm)
@@ -43,7 +42,7 @@ function SendTransactionScreen () {
}
SendTransactionScreen.prototype.render = function () {
- const { identities } = this.props
+ const { accounts } = this.props
const { dropdownOpen } = this.state
return (
@@ -75,8 +74,8 @@ SendTransactionScreen.prototype.render = function () {
h(FromDropdown, {
dropdownOpen,
- identities,
- selectedIdentity: identities[0],
+ accounts,
+ selectedAccount: accounts[0],
setFromField: () => console.log('Set From Field'),
openDropdown: () => this.setState({ dropdownOpen: true }),
closeDropdown: () => this.setState({ dropdownOpen: false }),