m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 09:23:21 +01:00
Code

Add Info section

Browse Source
This commit is contained in:
Alexander Tseung 2017-10-25 09:26:05 -07:00 committed by Chi Kei Chan
parent 2b72b70647
commit 3d8182f5d5
5 changed files with 173 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/images/info-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

2
ui/app/app.js
View File

@ -448,7 +448,7 @@ App.prototype.renderPrimary = function () {
case 'info':
log.debug('rendering info screen')
return h(InfoScreen, {key: 'info'})
return h(Settings, {key: 'info', tab: 'info'})
case 'buyEth':
log.debug('rendering buy ether screen')

6
ui/app/components/account-menu/index.js
View File

@ -46,6 +46,10 @@ function mapDispatchToProps (dispatch) {
dispatch(actions.showImportPage())
dispatch(actions.toggleAccountMenu())
},
showInfoPage: () => {
dispatch(actions.showInfoPage())
dispatch(actions.toggleAccountMenu())
},
}
}
@ -57,6 +61,7 @@ AccountMenu.prototype.render = function () {
showImportPage,
lockMetamask,
showConfigPage,
showInfoPage,
} = this.props
return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
@ -84,6 +89,7 @@ AccountMenu.prototype.render = function () {
}),
h(Divider),
h(Item, {
onClick: showInfoPage,
icon: h('img', { src: 'images/mm-info-icon.svg' }),
text: 'Info & Help',
}),

59
ui/app/css/itcss/components/settings.scss
View File

@ -54,6 +54,10 @@
height: initial;
padding: 5px 0;
}
&--without-height {
height: initial;
}
}
.settings__content-item-col {
@ -140,3 +144,58 @@
border: 1px solid $monzo;
color: $monzo;
}
.settings__info-logo-wrapper {
height: 80px;
margin-bottom: 20px;
}
.settings__info-logo {
max-height: 100%;
max-width: 100%;
}
.settings__info-item {
padding: 10px 0;
}
.settings__info-link-header {
padding-bottom: 15px;
@media screen and (max-width: 575px) {
padding-bottom: 5px;
}
}
.settings__info-link-item {
padding: 15px 0;
@media screen and (max-width: 575px) {
padding: 5px 0;
}
}
.settings__info-version-number {
padding-top: 5px;
font-size: 13px;
color: $dusty-gray;
}
.settings__info-about {
color: $dusty-gray;
margin-bottom: 15px;
}
.settings__info-link {
color: $curious-blue;
}
.settings__info-separator {
margin: 15px 0;
width: 80px;
border-color: $alto;
border: none;
height: 1px;
background-color: $alto;
color: $alto;
}

112
ui/app/settings.js
View File

@ -1,4 +1,5 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const { connect } = require('react-redux')
const actions = require('./actions')
@ -23,22 +24,28 @@ const getInfuraCurrencyOptions = () => {
}
class Settings extends Component {
constructor (args) {
super(args)
constructor (props) {
super(props)
const { tab } = props
const activeTab = tab === 'info' ? 'info' : 'settings'
this.state = {
activeTab: 'settings',
activeTab,
newRpc: '',
}
}
renderTabs () {
const { activeTab } = this.state
return h('div.settings__tabs', [
h(TabBar, {
tabs: [
{ content: 'Settings', key: 'settings' },
{ content: 'Info', key: 'info' },
],
defaultTab: 'settings',
defaultTab: activeTab,
tabSelected: key => this.setState({ activeTab: key }),
}),
])
@ -216,8 +223,92 @@ class Settings extends Component {
)
}
renderInfoContent () {
renderLogo () {
return (
h('div.settings__info-logo-wrapper', [
h('img.settings__info-logo', { src: 'images/info-logo.png' }),
])
)
}
renderInfoLinks () {
return (
h('div.settings__content-item.settings__content-item--without-height', [
h('div.settings__info-link-header', 'Links'),
h('div.settings__info-link-item', [
h('a', {
href: 'https://metamask.io/privacy.html',
target: '_blank',
}, [
h('span.settings__info-link', 'Privacy Policy'),
]),
]),
h('div.settings__info-link-item', [
h('a', {
href: 'https://metamask.io/terms.html',
target: '_blank',
}, [
h('span.settings__info-link', 'Terms of Use'),
]),
]),
h('div.settings__info-link-item', [
h('a', {
href: 'https://metamask.io/attributions.html',
target: '_blank',
}, [
h('span.settings__info-link', 'Attributions'),
]),
]),
h('hr.settings__info-separator'),
h('div.settings__info-link-item', [
h('a', {
href: 'https://support.metamask.io',
target: '_blank',
}, [
h('span.settings__info-link', 'Visit our Support Center'),
]),
]),
h('div.settings__info-link-item', [
h('a', {
href: 'https://metamask.io/',
target: '_blank',
}, [
h('span.settings__info-link', 'Visit our web site'),
]),
]),
h('div.settings__info-link-item', [
h('a', {
target: '_blank',
href: 'mailto:help@metamask.io?subject=Feedback',
}, [
h('span.settings__info-link', 'Email us!'),
]),
]),
])
)
}
renderInfoContent () {
return (
h('div.settings__content', [
h('div.settings__content-row', [
h('div.settings__content-item.settings__content-item--without-height', [
this.renderLogo(),
h('div.settings__info-item', [
h('div.settings__info-version-header', 'MetaMask Version'),
h('div.settings__info-version-number', '4.0.0'),
]),
h('div.settings__info-item', [
h(
'div.settings__info-about',
'MetaMask is designed and built in California.'
),
]),
]),
this.renderInfoLinks(),
]),
])
)
}
render () {
@ -241,6 +332,17 @@ class Settings extends Component {
}
}
Settings.propTypes = {
tab: PropTypes.string,
metamask: PropTypes.object,
setCurrentCurrency: PropTypes.func,
setRpcTarget: PropTypes.func,
displayWarning: PropTypes.func,
revealSeedConfirmation: PropTypes.func,
warning: PropTypes.string,
goHome: PropTypes.func,
}
const mapStateToProps = state => {
return {
metamask: state.metamask,