m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-23 03:36:18 +02:00
Code

Hook up actions to EditAccountNameModal

Browse Source
This commit is contained in:
sdtsui 2017-08-21 04:46:38 -07:00
parent 80a2cba38e
commit d82233b95c
8 changed files with 152 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/app/components/dropdowns/components/account-dropdowns.js
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
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
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')),
]) ])
]) ])
} }

89
ui/app/components/modals/edit-account-name-modal.js
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.edit-account-name-modal-cancel', {}, [
}, [ h('i.fa.fa-times'),
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-title', {
}, ['Edit Account Name']),
h('div.modal-content-option', { h('input.edit-account-name-modal-input', {
onClick: () => { placeholder: identity.name,
const { toCoinbase, address } = this.props onChange: (event) => {
toCoinbase(address) this.setState({ inputText: event.target.value })
},
}, [
h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.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.modal-content-option', {}, [
h('div.modal-content-option-title', {}, 'Direct Deposit'),
h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
]),
]),
h('button', {
style: {
background: 'white',
}, },
onClick: () => { this.props.hideModal() }, value: this.state.inputText,
}, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), }, []),
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',
]),
]) ])
]) ])
} }

28
ui/app/components/modals/new-account-modal.js
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
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
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
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;
} }