Hook up actions to EditAccountNameModal

feature/default_network_editable
sdtsui 7 years ago
parent 80a2cba38e
commit d82233b95c
  1. 10
      ui/app/components/dropdowns/components/account-dropdowns.js
  2. 28
      ui/app/components/modals/account-details-modal.js
  3. 28
      ui/app/components/modals/buy-options-modal.js
  4. 85
      ui/app/components/modals/edit-account-name-modal.js
  5. 28
      ui/app/components/modals/new-account-modal.js
  6. 10
      ui/app/css/itcss/components/buttons.scss
  7. 70
      ui/app/css/itcss/components/modal.scss
  8. 2
      ui/app/css/itcss/trumps/index.scss

@ -115,7 +115,7 @@ class AccountDropdowns extends Component {
fontSize: '16px',
},
onClick: () => {
actions.showNewAccountModal()
actions.showEditAccountModal(identity)
},
}, [
'Edit',
@ -394,8 +394,14 @@ const mapDispatchToProps = (dispatch) => {
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
showEditAccountModal: (identity) => {
dispatch(actions.showModal({
name: 'EDIT_ACCOUNT_NAME',
identity,
}))
},
showNewAccountModal: () => {
dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' }))
dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
},
addNewAccount: () => dispatch(actions.addNewAccount()),
showImportPage: () => dispatch(actions.showImportPage()),

@ -30,34 +30,34 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
// It utilizes modal styles
AccountDetailsModal.prototype.render = function () {
return h('div', {}, [
h('div.modal-content.transfers-subview', {
h('div.buy-modal-content.transfers-subview', {
}, [
h('div.modal-content-title-wrapper.flex-column.flex-center', {
h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
h('div.modal-content-title', {
h('div.buy-modal-content-title', {
style: {},
}, 'Account Details Modal'),
h('div', {}, 'How would you like to buy Ether?'),
]),
h('div.modal-content-options.flex-column.flex-center', {}, [
h('div.buy-modal-content-options.flex-column.flex-center', {}, [
h('div.modal-content-option', {
h('div.buy-modal-content-option', {
onClick: () => {},
}, [
h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
h('div.buy-modal-content-option-title', {}, 'Coinbase'),
h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Shapeshift'),
h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
h('div.buy-modal-content-option', {}, [
h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Direct Deposit'),
h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
h('div.buy-modal-content-option', {}, [
h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
@ -67,7 +67,7 @@ AccountDetailsModal.prototype.render = function () {
background: 'white',
},
onClick: () => { this.props.hideModal() },
}, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
}, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
])
])
}

@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
// It utilizes modal styles
BuyOptions.prototype.render = function () {
return h('div', {}, [
h('div.modal-content.transfers-subview', {
h('div.buy-modal-content.transfers-subview', {
}, [
h('div.modal-content-title-wrapper.flex-column.flex-center', {
h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
h('div.modal-content-title', {
h('div.buy-modal-content-title', {
style: {},
}, 'Transfers'),
h('div', {}, 'How would you like to buy Ether?'),
]),
h('div.modal-content-options.flex-column.flex-center', {}, [
h('div.buy-modal-content-options.flex-column.flex-center', {}, [
h('div.modal-content-option', {
h('div.buy-modal-content-option', {
onClick: () => {
const { toCoinbase, address } = this.props
toCoinbase(address)
},
}, [
h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
h('div.buy-modal-content-option-title', {}, 'Coinbase'),
h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Shapeshift'),
h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
h('div.buy-modal-content-option', {}, [
h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Direct Deposit'),
h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
h('div.buy-modal-content-option', {}, [
h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
background: 'white',
},
onClick: () => { this.props.hideModal() },
}, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
}, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
])
])
}

@ -3,78 +3,73 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
const { getSelectedAccount } = require('../../selectors')
function mapStateToProps (state) {
return {
network: state.metamask.network,
address: state.metamask.selectedAddress,
selectedAccount: getSelectedAccount(state),
identity: state.appState.modal.modalState.identity,
}
}
function mapDispatchToProps (dispatch) {
return {
toCoinbase: (address) => {
dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
},
hideModal: () => {
dispatch(actions.hideModal())
}
},
saveAccountLabel: (account, label) => {
dispatch(actions.saveAccountLabel(account, label))
},
}
}
inherits(BuyOptions, Component)
function BuyOptions () {
inherits(EditAccountNameModal, Component)
function EditAccountNameModal () {
Component.call(this)
this.state = {
inputText: '',
}
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
// BuyOptions is currently meant to be rendered inside <Modal />
// EditAccountNameModal is currently meant to be rendered inside <Modal />
// It is the only component in this codebase that does so
// It utilizes modal styles
BuyOptions.prototype.render = function () {
EditAccountNameModal.prototype.render = function () {
const { hideModal, saveAccountLabel, identity } = this.props
return h('div', {}, [
h('div.modal-content.transfers-subview', {
h('div.flex-column.edit-account-name-modal-content', {
}, [
h('div.modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
h('div.modal-content-title', {
style: {},
}, 'Edit Account Name Modal'),
h('div', {}, 'How would you like to buy Ether?'),
]),
h('div.modal-content-options.flex-column.flex-center', {}, [
h('div.modal-content-option', {
onClick: () => {
const { toCoinbase, address } = this.props
toCoinbase(address)
},
}, [
h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
h('div.edit-account-name-modal-cancel', {}, [
h('i.fa.fa-times'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Shapeshift'),
h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
h('div.edit-account-name-modal-title', {
}, ['Edit Account Name']),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Direct Deposit'),
h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
h('input.edit-account-name-modal-input', {
placeholder: identity.name,
onChange: (event) => {
this.setState({ inputText: event.target.value })
},
value: this.state.inputText,
}, []),
h('button.btn-clear.edit-account-name-modal-save-button', {
onClick: () => {
if (this.state.inputText.length !== 0) {
saveAccountLabel(identity.address, this.state.inputText)
hideModal()
}
},
disabled: this.state.inputText.length === 0,
}, [
'SAVE',
]),
h('button', {
style: {
background: 'white',
},
onClick: () => { this.props.hideModal() },
}, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
])
])
}

@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
// It utilizes modal styles
BuyOptions.prototype.render = function () {
return h('div', {}, [
h('div.modal-content.transfers-subview', {
h('div.buy-modal-content.transfers-subview', {
}, [
h('div.modal-content-title-wrapper.flex-column.flex-center', {
h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
style: {},
}, [
h('div.modal-content-title', {
h('div.buy-modal-content-title', {
style: {},
}, 'New Account Modal'),
h('div', {}, 'How would you like to buy Ether?'),
]),
h('div.modal-content-options.flex-column.flex-center', {}, [
h('div.buy-modal-content-options.flex-column.flex-center', {}, [
h('div.modal-content-option', {
h('div.buy-modal-content-option', {
onClick: () => {
const { toCoinbase, address } = this.props
toCoinbase(address)
},
}, [
h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
h('div.buy-modal-content-option-title', {}, 'Coinbase'),
h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Shapeshift'),
h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
h('div.buy-modal-content-option', {}, [
h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
h('div.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Direct Deposit'),
h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
h('div.buy-modal-content-option', {}, [
h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
background: 'white',
},
onClick: () => { this.props.hideModal() },
}, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
}, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
])
])
}

@ -27,11 +27,11 @@ button.btn-clear {
// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
// }
// button[disabled], input[type="submit"][disabled] {
// cursor: not-allowed;
// background: rgba(197, 197, 197, 1);
// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
// }
button[disabled], input[type="submit"][disabled] {
cursor: not-allowed;
background: rgba(197, 197, 197, 1);
box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
}
// button.spaced {
// margin: 2px;

@ -1,4 +1,5 @@
.modal-content {
// Buy Modal
.buy-modal-content {
flex-direction: column;
align-items: center;
justify-content: center;
@ -7,29 +8,29 @@
}
@media screen and (max-width: 575px) {
.modal-content-title-wrapper {
.buy-modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 100px;
}
.modal-content-title {
.buy-modal-content-title {
font-size: 26px;
margin-top: 15px;
}
.modal-content-options {
.buy-modal-content-options {
flex-direction: column;
padding: 5% 33%;
}
.modal-content-footer {
.buy-modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
div.modal-content-option {
div.buy-modal-content-option {
display: flex;
flex-direction: column;
width: 80vw;
@ -41,40 +42,40 @@
padding: 0% 7%;
justify-content: space-around;
div.modal-content-option-title {
div.buy-modal-content-option-title {
font-size: 20px;
}
div.modal-content-option-subtitle {
div.buy-modal-content-option-subtitle {
font-size: 16px;
}
}
}
@media screen and (min-width: 576px) {
.modal-content-title-wrapper {
.buy-modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 110px;
}
.modal-content-title {
.buy-modal-content-title {
font-size: 26px;
margin-top: 15px;
}
.modal-content-footer {
.buy-modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
.modal-content-options {
.buy-modal-content-options {
flex-direction: row;
margin: 20px 0;
}
div.modal-content-option {
div.buy-modal-content-option {
display: flex;
flex-direction: column;
width: 20vw;
@ -85,7 +86,7 @@
margin: 0 .5vw;
justify-content: space-around;
div.modal-content-option-title {
div.buy-modal-content-option-title {
font-size: 20px;
@media screen and (max-width: 679px) {
@ -97,7 +98,7 @@
}
}
div.modal-content-option-subtitle {
div.buy-modal-content-option-subtitle {
font-size: 16px;
padding: 0 10px;
height: 25%;
@ -121,8 +122,45 @@
}
}
div.modal-content-footer {
div.buy-modal-content-footer {
margin-top: 8vh;
}
}
}
// Edit Account Name Modal
.edit-account-name-modal-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
}
.edit-account-name-modal-cancel {
position: absolute;
top: 12px;
right: 20px;
font-size: 25px;
}
.edit-account-name-modal-title {
margin: 15px;
}
.edit-account-name-modal-save-button {
width: 33%;
height: 45px;
margin: 15px;
font-weight: bold;
margin-top: 25px;
}
.edit-account-name-modal-input {
width: 90%;
height: 50px;
text-align: left;
margin: 10px;
padding: 10px;
font-size: 18px;
}

@ -65,7 +65,7 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
// See components/modal.scss
/* stylelint-disable */
#modal-content-footer-text {
#buy-modal-content-footer-text {
font-family: 'DIN OT';
font-size: 16px;
}

Loading…
Cancel
Save