1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-27 12:56:01 +01:00
metamask-extension/ui/app/first-time/disclaimer.js
Kevin Serrano 8819475a2e Add ability to show notices to user & get confirmation.
Implement generation of markdown for notice files.
Create npm command. Enhance notice generation.
Add test files to test multiple notices.
Add basic markdown support to notices.
Interval checks for updates.
Add extensionizer and linker
Add terms and conditions state file
Add link support to disclaimer.
Changelog addition.
2016-12-16 10:44:52 -08:00

113 lines
2.7 KiB
JavaScript

const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../actions')
const ReactMarkdown = require('react-markdown')
const fs = require('fs')
const path = require('path')
const linker = require('extension-link-enabler')
const findDOMNode = require('react-dom').findDOMNode
const disclaimer = fs.readFileSync(path.join(__dirname, '..', '..', '..', 'USER_AGREEMENT.md')).toString()
module.exports = connect(mapStateToProps)(DisclaimerScreen)
function mapStateToProps (state) {
return {}
}
inherits(DisclaimerScreen, Component)
function DisclaimerScreen () {
Component.call(this)
}
DisclaimerScreen.prototype.render = function () {
const state = this.state || {disclaimerDisabled: true}
const disabled = state.disclaimerDisabled
return (
h('.flex-column.flex-center.flex-grow', [
h('h3.flex-center.text-transform-uppercase.terms-header', {
style: {
background: '#EBEBEB',
color: '#AEAEAE',
marginBottom: 24,
width: '100%',
fontSize: '20px',
textAlign: 'center',
padding: 6,
},
}, [
'MetaMask Terms & Conditions',
]),
h('style', `
.markdown {
font-family: Times New Roman;
overflow-x: hidden;
}
.markdown h1, .markdown h2, .markdown h3 {
margin: 10px 0;
font-weight: bold;
}
.markdown strong {
font-weight: bold;
}
.markdown em {
font-style: italic;
}
.markdown p {
margin: 10px 0;
}
.markdown a {
color: blue;
}
`),
h('div.markdown', {
onScroll: (e) => {
var object = e.currentTarget
if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) {
this.setState({disclaimerDisabled: false})
}
},
style: {
background: 'rgb(235, 235, 235)',
height: '310px',
padding: '6px',
width: '80%',
overflowY: 'scroll',
},
}, [
h(ReactMarkdown, {
source: disclaimer,
skipHtml: true,
}),
]),
h('button', {
style: { marginTop: '18px' },
disabled,
onClick: () => this.props.dispatch(actions.agreeToDisclaimer()),
}, disabled ? 'Scroll Down to Enable' : 'I Agree'),
])
)
}
DisclaimerScreen.prototype.componentDidMount = function () {
var node = findDOMNode(this)
linker.setupListener(node)
}
DisclaimerScreen.prototype.componentWillUnmount = function () {
var node = findDOMNode(this)
linker.teardownListener(node)
}