Merge pull request #380 from MetaMask/FrankieDisclaimer

Frankie disclaimer

USER_AGREEMENT.md

@@ -0,0 +1,55 @@
+# Disclaimer
+
+**METAMASK is still Beta software. Don't rely on it to hold large amounts of Ether.**
+
+## SECURITY WARNINGS
+
+**You are responsible for your own computer's security. If your machine is compromised you could lose your ether, access to your accounts and contracts and maybe more.**
+
+You are responsible for your own actions.
+
+The user acknowledges the following serious risks to any use of METAMASK and ETH and expressly agrees not to hold liable MetaMask or MetaMask Team should any of these risks occur:
+
+**METMASK AT THIS POINT IN TIME IS MEANT FOR DEVELOPERS OR PEOPLE WITH A UNDERSTANDING OF THE ETHERIUM PROTOCOL. DUE TO THE NATURE OF METMASK, THE METAMASK TEAM DOES NOT ADVISE STORING LARGE AMOUNTS OF ETHER IN METAMASK VAULTS. THE METAMASK TEAM DOES NOT TAKE RESPONSIBILTY FOR LOST OR STOLEN ETHER. BY CLICIKING AGREE AND USING METAMASK THE USER UNDERSTANDS THE RISKS OF USING EXPERIMENTAL SOFTWARE AND ACKNOWLEDGES THE FACT THAT THEIR MAY BE BUGS OR SECURTIY RISKS IN METAMASK THAT MAY RESULT IN LOSS OF ETHER AND THE THE METMASK TEAM IS NOT HELD RESPONSIBLE FOR REINBERSMENT OF LOST FUNDS.**
+
+### Risk of Regulatory Actions in One or More Jurisdictions
+
+METAMASK and ETH could be impacted by one or more regulatory inquiries or regulatory action, which could impede or limit the ability of METAMASK to continue to develop, or which could impeded or limit the ability of User to use Ethereum Platform or ETH.
+
+### Risk that METAMASK, As Developed, Will Not Meet the Expectations of User
+
+The User recognizes that METAMASK is under development and may undergo significant changes. User acknowledges that any expectations regarding the form and functionality of METAMASK held by the User may not be met upon release of METAMASK, for any number of reasons including a change in the design and implementation plans and execution of the implementation of METAMASK.
+
+### Risk of Weaknesses or Exploitable Breakthroughs in the Field of Cryptography
+
+Cryptography is an art, not a science. And the state of the art can advance over time. Advances in code cracking, or technical advances such as the development of quantum computers could present risks to cryptocurrencies and METAMASK, which could result in the theft or loss of ETH. To the extent possible, METAMASK intends to update the protocol underlying METAMASK to account for any advances in cryptography and to incorporate additional security measures, but cannot it cannot predict the future of cryptography or the success of any future security updates.
+
+### Warning of the Volatility of Crypto Currencies
+
+ETHEREUM is a new enough technology that the value of its core token and network fee currency is highly volatile, due to a combination of adoption and speculation.
+
+METAMASK cannot be held responsible for increases in the cost of network resources that affect the viability of any business activities that may take place on the blockchain.
+
+### Warning of Possible Accidental Flaws in Ethereum Apps
+
+ETHEREUM applications are only as good as the code they are written with. METAMASK cannot be held responsible if you interact with a flawed contract. ETHEREUM applications are a very new kind of software, and people are still learning how to write fully bulletproof software, so you are responsible for evaluating the trustworthiness of the websites you are willing to submit Ethereum transactions to.
+
+### Warning of Possible Malicious Contracts in Ethereum Apps
+
+ETHEREUM applications can be written maliciously. METAMASK cannot be held liable if you choose to interact with a contract that does not perform as expected. A contract may keep funds sent to it, or even impersonate the person making a request of it. METAMASK developers will do everything they can to warn you of potential threats, but they cannot be considered omniscient, and so all liability of interacting with malevolent contracts must lie on the user.
+
+### Acknowledgment, Acceptance of all Risks and Disclaimer of Warranties and Liabilities
+
+THE USER EXPRESSLY KNOWS AND AGREES THAT THE USER IS USING METAMASK AND METAMASK AT THE USER’S SOLE RISK. THE USER REPRESENTS THAT THE USER HAS AN ADEQUATE UNDERSTANDING OF THE RISKS, USAGE AND INTRICACIES OF CRYPTOGRAPHIC TOKENS AND BLOCKCHAIN-BASED OPEN SOURCE SOFTWARE, ETH PLATFORM AND ETH. THE USER ACKNOWLEDGES AND AGREES THAT, TO THE FULLEST EXTENT PERMITTED BY ANY APPLICABLE LAW, THE DISCLAIMERS OF LIABILITY CONTAINED HEREIN APPLY TO ANY AND ALL DAMAGES OR INJURY WHATSOEVER CAUSED BY OR RELATED TO RISKS OF, USE OF, OR INABILITY TO USE, ETH OR METAMASK UNDER ANY CAUSE OR ACTION WHATSOEVER OF ANY KIND IN ANY JURISDICTION, INCLUDING, WITHOUT LIMITATION, ACTIONS FOR BREACH OF WARRANTY, BREACH OF CONTRACT OR TORT (INCLUDING NEGLIGENCE) AND THAT NEITHER METAMASK NOR METMASK TEAM SHALL BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY OR CONSEQUENTIAL DAMAGES, INCLUDING FOR LOSS OF PROFITS, GOODWILL OR DATA.
+
+### Acknowledgement of User's Duty to All Laws and Regulations
+
+The USER is responsible for their own actions with the use of the METAMASK software. Like any tool, it could be conceivably be used in ways not legal in some jurisdictions.
+
+THE USER agrees to adhere to all binding laws and regulations for the conditions in which they use METAMASK.
+
+### Risk of Temporary Network Incoherence
+
+METAMASK is finally not liable for unavoidable casualty, delays in delivery of materials, embargoes, government orders, acts of civil or military authorities, lack of energy, sickness or other ill health, injurious dance parties, rancid bacon, the acts of Gods, Nymphs, Angels (fallen or otherwise) or Djinn, or any similarly unforeseen events that render misfortune.
+
+The METAMASK DEVELOPERS wish you the very best luck in creating a better life for yourself, those you love, and your greater community, the world.

development/beefy.js

@@ -2,28 +2,18 @@ const beefy = require('beefy')
 const http = require('http')
 const fs = require('fs')
 const path = require('path')
-const states = require('./states')
-
-const statesPath = path.join(__dirname, 'states.js')
-const statesJson = JSON.stringify(states)
-fs.writeFileSync(statesPath, statesJson)
 
 const port = 8124
 
 const handler = beefy({
-    entries: ['mocker.js']
+    entries: {'mocker.js': 'bundle.js'}
   , cwd: __dirname
   , live: true
+  , open: true
   , quiet: false
   , bundlerFlags: ['-t', 'brfs']
 })
 
-console.dir(handler)
 
 http.createServer(handler).listen(port)
 console.log(`Now listening on port ${port}`)
-
-function on404(req, resp) {
-  resp.writeHead(404, {})
-  resp.end('sorry folks!')
-}

development/index.html

@@ -10,28 +10,17 @@
     <div id="app-content" style="height: 100%"></div>
     <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
 
-    <!-- design reference -->
-    <link rel="stylesheet" type="text/css" href="../ui/app/css/debug.css">
-    <div id="design-container">
-      <!-- persist scroll position on refresh -->
-      <script type="text/javascript">
-        var scrollElement = document.getElementById('design-container')
-        function getScrollPosition () {
-          var scrollTop = scrollElement.scrollTop, scrollLeft = scrollElement.scrollLeft
-          window.location.hash = 'scrollTop='+scrollTop+'&scrollLeft='+scrollLeft
+  </body>
+
+<style>
+html, body, #app-content, .super-dev-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: #cccccc;
 }
-        window.onload = function () {
-          setInterval(getScrollPosition, 1000)
-          var hashLocation = window.location.hash.split('#')[1]
-          if (!hashLocation) return
-          var sections = hashLocation.split('&')
-          var scrollTop = sections[0].split('=')[1]
-          var scrollLeft = sections[1].split('=')[1]
-          scrollElement.scrollTop = scrollTop
-          scrollElement.scrollLeft = scrollLeft
+.mock-app-root {
+  background: #F7F7F7;
 }
-      </script>
-    </div>
-
-  </body>
+</style>
 </html>

development/mocker.js

@@ -9,13 +9,13 @@ const Selector = require('./selector')
 const qs = require('qs')
 let queryString = qs.parse(window.location.href.split('#')[1])
 let selectedView = queryString.view || 'account detail'
+const firstState = states[selectedView]
+updateQueryParams(selectedView)
 
 // CSS
 const MetaMaskUiCss = require('../ui/css')
 const injectCss = require('inject-css')
 
-const firstState = states[selectedView]
-updateQueryParams()
 
 function updateQueryParams(newView) {
   queryString.view = newView
@@ -54,6 +54,8 @@ render(
       style: {
         height: '500px',
         width: '360px',
+        boxShadow: '2px 2px 5px grey',
+        margin: '20px',
       },
     }, [
       h(Root, {

development/selector.js

@@ -17,6 +17,9 @@ NewComponent.prototype.render = function () {
   const selected = state.selected || selectedKey
 
   return h('select', {
+    style: {
+      margin: '20px 20px 0px',
+    },
     value: selected,
     onChange:(event) => {
       const selectedKey = event.target.value

package.json

@@ -7,7 +7,7 @@
     "start": "gulp dev",
     "test": "mocha --require test/helper.js --compilers js:babel-register --recursive",
     "watch": "mocha watch --compilers js:babel-register --recursive",
-    "ui": "cd development && node genStates.js && beefy mocker.js:bundle.js --live --open"
+    "ui": "beefy development/mocker.js:bundle.js --live --open --cwd development --index=./development/index.html"
   },
   "browserify": {
     "transform": [
@@ -24,8 +24,6 @@
   },
   "dependencies": {
     "async": "^1.5.2",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-register": "^6.9.0",
     "browserify-derequire": "^0.9.4",
     "clone": "^1.0.2",
     "copy-to-clipboard": "^2.0.0",
@@ -54,6 +52,7 @@
     "react-addons-css-transition-group": "^15.0.2",
     "react-dom": "^15.0.2",
     "react-hyperscript": "^2.2.2",
+    "react-markdown": "^2.3.0",
     "react-redux": "^4.4.5",
     "react-tooltip-component": "^0.3.0",
     "readable-stream": "^2.1.2",

ui/app/actions.js

@@ -2,10 +2,6 @@ var actions = {
   GO_HOME: 'GO_HOME',
   goHome: goHome,
   // menu state
-  TOGGLE_MENU: 'TOGGLE_MENU',
-  toggleMenu: toggleMenu,
-  SET_MENU_STATE: 'SET_MENU_STATE',
-  closeMenu: closeMenu,
   getNetworkStatus: 'getNetworkStatus',
 
   // remote state
@@ -125,21 +121,6 @@ function goHome () {
   }
 }
 
-// menu state
-
-function toggleMenu () {
-  return {
-    type: actions.TOGGLE_MENU,
-  }
-}
-
-function closeMenu () {
-  return {
-    type: actions.SET_MENU_STATE,
-    value: false,
-  }
-}
-
 // async actions
 
 function tryUnlockMetamask (password) {

ui/app/app.js

@@ -61,6 +61,7 @@ App.prototype.render = function () {
       style: {
         // Windows was showing a vertical scroll bar:
         overflow: 'hidden',
+        position: 'relative',
       },
     }, [
 
@@ -177,7 +178,7 @@ App.prototype.renderAppBar = function () {
             onClick: (event) => {
               event.preventDefault()
               event.stopPropagation()
-              this.props.dispatch(actions.toggleMenu())
+              this.setState({ isMainMenuOpen: true })
             },
           }),
         ]),
@@ -197,7 +198,7 @@ App.prototype.renderNetworkDropdown = function () {
       this.setState({ isNetworkMenuOpen: !isOpen })
     },
     style: {
-      position: 'fixed',
+      position: 'absolute',
       left: 0,
       zIndex: 0,
     },
@@ -239,14 +240,16 @@ App.prototype.renderNetworkDropdown = function () {
 }
 
 App.prototype.renderDropdown = function () {
-  const props = this.props
+  const state = this.state || {}
+  const isOpen = state.isMainMenuOpen
+
   return h(MenuDroppo, {
-    isOpen: props.menuOpen,
+    isOpen: isOpen,
     onClickOutside: (event) => {
-      this.props.dispatch(actions.closeMenu())
+      this.setState({ isMainMenuOpen: !isOpen })
     },
     style: {
-      position: 'fixed',
+      position: 'absolute',
       right: 0,
       zIndex: 0,
     },
@@ -262,21 +265,21 @@ App.prototype.renderDropdown = function () {
 
     h(DropMenuItem, {
       label: 'Settings',
-      closeMenu: () => this.props.dispatch(actions.closeMenu()),
+      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
       action: () => this.props.dispatch(actions.showConfigPage()),
       icon: h('i.fa.fa-gear.fa-lg', { ariaHidden: true }),
     }),
 
     h(DropMenuItem, {
       label: 'Lock',
-      closeMenu: () => this.props.dispatch(actions.closeMenu()),
+      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
       action: () => this.props.dispatch(actions.lockMetamask()),
       icon: h('i.fa.fa-lock.fa-lg', { ariaHidden: true }),
     }),
 
     h(DropMenuItem, {
       label: 'Help',
-      closeMenu: () => this.props.dispatch(actions.closeMenu()),
+      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
       action: () => this.props.dispatch(actions.showInfoPage()),
       icon: h('i.fa.fa-question.fa-lg', { ariaHidden: true }),
     }),

ui/app/first-time/disclaimer.js

@@ -3,9 +3,10 @@ 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 disclaimer = fs.readFileSync(path.join(__dirname, 'disclaimer.txt')).toString()
+const disclaimer = fs.readFileSync(path.join(__dirname, '..', '..', '..', 'USER_AGREEMENT.md')).toString()
 module.exports = connect(mapStateToProps)(DisclaimerScreen)
 
 function mapStateToProps (state) {
@@ -21,29 +22,50 @@ DisclaimerScreen.prototype.render = function () {
   return (
     h('.flex-column.flex-center.flex-grow', [
 
-      h('h3.flex-center.text-transform-uppercase', {
+      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('div', {
+      h('style', `
+
+        .markdown {
+          font-family: Times New Roman;
+        }
+        .markdown h1, .markdown h2, .markdown h3 {
+          margin: 10px 0;
+          font-family: arial sans-serif;
+          font-weight: bold;
+        }
+
+      `),
+
+      h('div.markdown', {
         style: {
-          whiteSpace: 'pre-line',
+          // whiteSpace: 'pre-line',
           background: 'rgb(235, 235, 235)',
           height: '310px',
           padding: '6px',
           width: '80%',
           overflowY: 'scroll',
         },
-      }, disclaimer),
+      }, [
+
+        h(ReactMarkdown, {
+          source: disclaimer,
+          skipHtml: true,
+        }),
+
+      ]),
 
       h('button', {
         style: { marginTop: '18px' },

ui/app/first-time/disclaimer.txt

@@ -1,11 +0,0 @@
-Full disclaimer coming soon. In the meanwhile, be aware this is experimental software. We are not responsible for how you use MetaMask, or any funds that you spend or lose with it. The only way to be absolutely sure you will lose no funds on the internet is to put no funds onto the internet. Enjoy!
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan tortor sed fringilla ultrices. Vestibulum congue fermentum nisi, venenatis dapibus urna semper id. Phasellus pretium faucibus nisi accumsan euismod. Nunc vel leo velit. Duis est felis, bibendum non dolor et, rhoncus gravida velit. Sed nec velit at nisi congue tincidunt non at felis. Praesent tincidunt, ipsum sit amet varius vulputate, purus lacus dictum tortor, vitae tempus dui turpis a lacus. Vivamus ut elit sodales, auctor nisi vitae, gravida est. Donec id massa ac ante rhoncus interdum. Aliquam gravida augue rhoncus libero ultricies scelerisque.
-
-Cras a ornare tortor. Vestibulum et scelerisque lacus. Proin dapibus consectetur blandit. Aliquam viverra, orci eget efficitur pharetra, velit tortor rhoncus ipsum, sit amet sollicitudin turpis velit vitae nunc. Sed pretium ut nisl sed mollis. Proin libero erat, molestie id est sed, pellentesque hendrerit nulla. Donec vitae efficitur nunc. Integer ornare nisi volutpat nisi sodales cursus. Nam ante odio, congue vel turpis non, viverra congue mauris. Maecenas ullamcorper ligula eget lorem ornare mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
-Sed sem odio, malesuada ut convallis nec, accumsan sit amet nulla. Morbi fringilla, purus vestibulum lacinia suscipit, massa mi pulvinar lorem, sit amet vestibulum purus turpis ut dolor. Integer felis eros, accumsan id urna ac, tincidunt vehicula purus. Pellentesque felis massa, convallis euismod vestibulum a, molestie non ante. Nulla sodales fermentum ultricies. In id malesuada diam, eget blandit arcu. Nullam a lacus a mauris rhoncus maximus eu ut ex. Phasellus non mauris mi. Duis at lectus sollicitudin, malesuada augue malesuada, tempor velit. Etiam vehicula leo id sapien feugiat consequat. Donec eget ex at sapien facilisis dapibus. Morbi condimentum magna nec venenatis vulputate. Nullam lobortis ante turpis, ac fermentum ipsum posuere id. Nullam pharetra velit vel dolor faucibus vehicula. Fusce quis ipsum nec felis blandit elementum a ut augue.
-
-Integer faucibus enim id odio auctor, ut sagittis diam luctus. Mauris iaculis rutrum risus, quis sagittis dolor fermentum eget. Praesent sit amet augue vitae erat efficitur placerat dictum ut magna. Suspendisse consectetur, risus quis pharetra molestie, enim dui accumsan erat, sed imperdiet orci dolor et nibh. Cras odio justo, pretium sit amet consequat luctus, imperdiet a lorem. Nam vulputate tincidunt erat, eget pellentesque dui elementum non. Sed vitae ante faucibus, pulvinar felis ornare, ornare felis.
-
-Donec nec lorem velit. Mauris sollicitudin quam turpis, quis finibus mauris semper in. Nullam efficitur faucibus lectus, vitae sagittis neque pellentesque in. Vivamus neque tellus, mollis at ultricies at, dignissim sit amet odio. Curabitur nec mi et lacus interdum hendrerit at et est. Nullam varius purus eu volutpat luctus. Vestibulum non sem eros. Nulla tempor, leo eu varius euismod, massa est mattis massa, id finibus mi erat a odio. Quisque et tincidunt justo. Curabitur eu lacus leo. Aliquam eget odio tempor, tincidunt nunc a, maximus diam. Curabitur venenatis nunc risus, in ullamcorper neque pharetra sit amet. Sed euismod dolor sed enim venenatis dapibus. Mauris congue magna nisl, et tincidunt dui vulputate vel.

ui/app/reducers/app.js

@@ -43,16 +43,6 @@ function reduceApp (state, action) {
 
   switch (action.type) {
 
-    case actions.TOGGLE_MENU:
-      return extend(appState, {
-        menuOpen: !appState.menuOpen,
-      })
-
-    case actions.SET_MENU_STATE:
-      return extend(appState, {
-        menuOpen: action.value,
-      })
-
   // intialize
 
     case actions.SHOW_CREATE_VAULT:

ui/index.html

@@ -14,24 +14,6 @@
     <link rel="stylesheet" type="text/css" href="./app/css/debug.css">
     <div id="design-container">
       <img id="design-img" src="./design/metamask_wfs_jan_13.png">
-      <!-- persist scroll position on refresh -->
-      <script type="text/javascript">
-        var scrollElement = document.getElementById('design-container')
-        function getScrollPosition () {
-          var scrollTop = scrollElement.scrollTop, scrollLeft = scrollElement.scrollLeft
-          window.location.hash = 'scrollTop='+scrollTop+'&scrollLeft='+scrollLeft
-        }
-        window.onload = function () {
-          setInterval(getScrollPosition, 1000)
-          var hashLocation = window.location.hash.split('#')[1]
-          if (!hashLocation) return
-          var sections = hashLocation.split('&')
-          var scrollTop = sections[0].split('=')[1]
-          var scrollLeft = sections[1].split('=')[1]
-          scrollElement.scrollTop = scrollTop
-          scrollElement.scrollLeft = scrollLeft
-        }
-      </script>
     </div>
 
   </body>