TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hook up actions to EditAccountNameModal

Browse Source
feature/default_network_editable
sdtsui 7 years ago
parent 80a2cba38e
commit d82233b95c
8 changed files with 150 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

10
ui/app/components/dropdowns/components/account-dropdowns.js
Unescape View File

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

28
ui/app/components/modals/account-details-modal.js
Unescape View File

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

28
ui/app/components/modals/buy-options-modal.js
Unescape View File

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

85
ui/app/components/modals/edit-account-name-modal.js
Unescape View File

@ -3,78 +3,73 @@ const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../actions') const actions = require('../../actions')
const { getSelectedAccount } = require('../../selectors')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
network: state.metamask.network, selectedAccount: getSelectedAccount(state),
address: state.metamask.selectedAddress, identity: state.appState.modal.modalState.identity,
} }
} }
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return { return {
toCoinbase: (address) => {
dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
},
hideModal: () => { hideModal: () => {
dispatch(actions.hideModal()) dispatch(actions.hideModal())
} },
saveAccountLabel: (account, label) => {
dispatch(actions.saveAccountLabel(account, label))
},
} }
} }
inherits(BuyOptions, Component) inherits(EditAccountNameModal, Component)
function BuyOptions () { function EditAccountNameModal () {
Component.call(this) 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 is the only component in this codebase that does so
// It utilizes modal styles // It utilizes modal styles
BuyOptions.prototype.render = function () { EditAccountNameModal.prototype.render = function () {
const { hideModal, saveAccountLabel, identity } = this.props
return h('div', {}, [ 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.edit-account-name-modal-cancel', {}, [
h('i.fa.fa-times'),
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.modal-content-option', {}, [ h('div.edit-account-name-modal-title', {
h('div.modal-content-option-title', {}, 'Shapeshift'), }, ['Edit Account Name']),
h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]),
h('div.modal-content-option', {}, [ h('input.edit-account-name-modal-input', {
h('div.modal-content-option-title', {}, 'Direct Deposit'), placeholder: identity.name,
h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), 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')),
]) ])
]) ])
} }

28
ui/app/components/modals/new-account-modal.js
Unescape View File

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

10
ui/app/css/itcss/components/buttons.scss
Unescape View File

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

70
ui/app/css/itcss/components/modal.scss
Unescape View File

@ -1,4 +1,5 @@
.modal-content { // Buy Modal
.buy-modal-content {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -7,29 +8,29 @@
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
.modal-content-title-wrapper { .buy-modal-content-title-wrapper {
justify-content: space-around; justify-content: space-around;
width: 100%; width: 100%;
height: 100px; height: 100px;
} }
.modal-content-title { .buy-modal-content-title {
font-size: 26px; font-size: 26px;
margin-top: 15px; margin-top: 15px;
} }
.modal-content-options { .buy-modal-content-options {
flex-direction: column; flex-direction: column;
padding: 5% 33%; padding: 5% 33%;
} }
.modal-content-footer { .buy-modal-content-footer {
text-transform: uppercase; text-transform: uppercase;
width: 100%; width: 100%;
height: 50px; height: 50px;
} }
div.modal-content-option { div.buy-modal-content-option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80vw; width: 80vw;
@ -41,40 +42,40 @@
padding: 0% 7%; padding: 0% 7%;
justify-content: space-around; justify-content: space-around;
div.modal-content-option-title { div.buy-modal-content-option-title {
font-size: 20px; font-size: 20px;
} }
div.modal-content-option-subtitle { div.buy-modal-content-option-subtitle {
font-size: 16px; font-size: 16px;
} }
} }
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
.modal-content-title-wrapper { .buy-modal-content-title-wrapper {
justify-content: space-around; justify-content: space-around;
width: 100%; width: 100%;
height: 110px; height: 110px;
} }
.modal-content-title { .buy-modal-content-title {
font-size: 26px; font-size: 26px;
margin-top: 15px; margin-top: 15px;
} }
.modal-content-footer { .buy-modal-content-footer {
text-transform: uppercase; text-transform: uppercase;
width: 100%; width: 100%;
height: 50px; height: 50px;
} }
.modal-content-options { .buy-modal-content-options {
flex-direction: row; flex-direction: row;
margin: 20px 0; margin: 20px 0;
} }
div.modal-content-option { div.buy-modal-content-option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 20vw; width: 20vw;
@ -85,7 +86,7 @@
margin: 0 .5vw; margin: 0 .5vw;
justify-content: space-around; justify-content: space-around;
div.modal-content-option-title { div.buy-modal-content-option-title {
font-size: 20px; font-size: 20px;
@media screen and (max-width: 679px) { @media screen and (max-width: 679px) {
@ -97,7 +98,7 @@
} }
} }
div.modal-content-option-subtitle { div.buy-modal-content-option-subtitle {
font-size: 16px; font-size: 16px;
padding: 0 10px; padding: 0 10px;
height: 25%; height: 25%;
@ -121,8 +122,45 @@
} }
} }
div.modal-content-footer { div.buy-modal-content-footer {
margin-top: 8vh; 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;
}

2
ui/app/css/itcss/trumps/index.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save