Merge pull request #295 from MetaMask/AddDisclaimer

Create disclaimer view

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Make network loading indicator clickable to select accessible network.
 - Show more characters of addresses when space permits.
 - Fixed bug when signing messages under 64 hex characters long.
+- Add disclaimer view with placeholder text for first time users.
 
 ## 2.3.1 2016-06-09
 

app/scripts/background.js

@@ -188,6 +188,7 @@ function setupControllerConnection(stream){
     setRpcTarget:       setRpcTarget,
     setProviderType:    setProviderType,
     useEtherscanProvider: useEtherscanProvider,
+    agreeToDisclaimer:  agreeToDisclaimer,
     // forward directly to idStore
     createNewVault:     idStore.createNewVault.bind(idStore),
     recoverFromSeed:    idStore.recoverFromSeed.bind(idStore),
@@ -295,6 +296,15 @@ function addUnconfirmedMsg(msgParams, cb){
 // config
 //
 
+function agreeToDisclaimer(cb) {
+  try {
+    configManager.setConfirmed(true)
+    cb()
+  } catch (e) {
+    cb(e)
+  }
+}
+
 // called from popup
 function setRpcTarget(rpcTarget){
   configManager.setRpcTarget(rpcTarget)

app/scripts/lib/config-manager.js

@@ -270,6 +270,17 @@ ConfigManager.prototype._emitUpdates = function(state){
   })
 }
 
+ConfigManager.prototype.setConfirmed = function(confirmed) {
+  var data = this.getData()
+  data.isConfirmed = confirmed
+  this.setData(data)
+}
+
+ConfigManager.prototype.getConfirmed = function() {
+  var data = this.getData()
+  return ('isConfirmed' in data) && data.isConfirmed
+}
+
 
 function loadData() {
 

app/scripts/lib/idStore.js

@@ -92,6 +92,7 @@ IdentityStore.prototype.getState = function(){
     isInitialized: !!configManager.getWallet() && !seedWords,
     isUnlocked: this._isUnlocked(),
     seedWords: seedWords,
+    isConfirmed: configManager.getConfirmed(),
     unconfTxs: configManager.unconfirmedTxs(),
     transactions: configManager.getTxList(),
     unconfMsgs: messageManager.unconfirmedMsgs(),

test/unit/config-manager-test.js

@@ -4,11 +4,41 @@ var configManager
 
 describe('config-manager', function() {
 
-  before(function() {
+  beforeEach(function() {
     window.localStorage = {} // Hacking localStorage support into JSDom
     configManager = new ConfigManager()
   })
 
+  describe('confirmation', function() {
+
+    describe('#getConfirmed', function() {
+      it('should return false if no previous key exists', function() {
+        var result = configManager.getConfirmed()
+        assert.ok(!result)
+      })
+    })
+
+    describe('#setConfirmed', function() {
+      it('should make getConfirmed return true once set', function() {
+        configManager.setConfirmed(true)
+        var result = configManager.getConfirmed()
+        assert.equal(result, true)
+      })
+
+      it('should be able to set false', function() {
+        configManager.setConfirmed(false)
+        var result = configManager.getConfirmed()
+        assert.equal(result, false)
+      })
+
+      it('should persist to local storage', function() {
+        configManager.setConfirmed(true)
+        var data = configManager.getData()
+        assert.equal(data.isConfirmed, true)
+      })
+    })
+  })
+
   describe('#setConfig', function() {
     window.localStorage = {} // Hacking localStorage support into JSDom
 

ui/app/actions.js

@@ -12,6 +12,8 @@ var actions = {
   UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
   updateMetamaskState: updateMetamaskState,
   // intialize screen
+  AGREE_TO_DISCLAIMER: 'AGREE_TO_DISCLAIMER',
+  agreeToDisclaimer: agreeToDisclaimer,
   CREATE_NEW_VAULT_IN_PROGRESS: 'CREATE_NEW_VAULT_IN_PROGRESS',
   SHOW_CREATE_VAULT: 'SHOW_CREATE_VAULT',
   SHOW_RESTORE_VAULT: 'SHOW_RESTORE_VAULT',
@@ -313,6 +315,18 @@ function showInitializeMenu() {
   }
 }
 
+function agreeToDisclaimer() {
+  return (dispatch) => {
+    dispatch(this.showLoadingIndication())
+    _accountManager.agreeToDisclaimer((err) => {
+      dispatch(this.hideLoadingIndication())
+      dispatch({
+        type: this.AGREE_TO_DISCLAIMER,
+      })
+    })
+  }
+}
+
 function createNewVaultInProgress() {
   return {
     type: actions.CREATE_NEW_VAULT_IN_PROGRESS,

ui/app/app.js

@@ -8,6 +8,7 @@ const extend = require('xtend')
 const actions = require('./actions')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 // init
+const DisclaimerScreen = require('./first-time/disclaimer')
 const InitializeMenuScreen = require('./first-time/init-menu')
 const CreateVaultScreen = require('./first-time/create-vault')
 const CreateVaultCompleteScreen = require('./first-time/create-vault-complete')
@@ -39,6 +40,7 @@ function App() { Component.call(this) }
 function mapStateToProps(state) {
   return {
     // state from plugin
+    isConfirmed: state.metamask.isConfirmed,
     isInitialized: state.metamask.isInitialized,
     isUnlocked: state.metamask.isUnlocked,
     currentView: state.appState.currentView,
@@ -240,6 +242,10 @@ App.prototype.renderDropdown = function() {
 App.prototype.renderPrimary = function(){
   var props = this.props
 
+  if (!props.isConfirmed) {
+    return h(DisclaimerScreen, {key: 'disclaimerScreen'})
+  }
+
   if (props.seedWords) {
     return h(CreateVaultCompleteScreen, {key: 'createVaultComplete'})
   }
@@ -314,37 +320,3 @@ App.prototype.toggleMetamaskActive = function(){
   }
 }
 
-function onOffToggle(state){
-  var buttonSize = '50px';
-  var lockWidth = '20px';
-  return (
-    h('.app-toggle.flex-row.flex-center.lock' + (state.isUnlocked ? '.unlocked' : '.locked'), {
-      width: buttonSize,
-      height: buttonSize,
-    }, [
-      h('div', {
-        onClick: state.toggleMetamaskActive,
-        style: {
-          width: lockWidth,
-          height: '' + parseInt(lockWidth) * 1.5 + 'px',
-          position: 'relative',
-        }
-      }, [
-        h('img.lock-top', {
-          src: 'images/lock-top.png',
-          style: {
-            width: lockWidth,
-            position: 'absolute',
-          }
-        }),
-        h('img', {
-          src: 'images/lock-base.png',
-          style: {
-            width: lockWidth,
-            position: 'absolute',
-          }
-        }),
-      ])
-    ])
-  )
-}

ui/app/first-time/disclaimer.js

@@ -0,0 +1,56 @@
+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 fs = require('fs')
+const path = require('path')
+const disclaimer = fs.readFileSync(path.join(__dirname, 'disclaimer.txt')).toString()
+module.exports = connect(mapStateToProps)(DisclaimerScreen)
+
+function mapStateToProps(state) {
+  return {}
+}
+
+inherits(DisclaimerScreen, Component)
+function DisclaimerScreen() {
+  Component.call(this)
+}
+
+DisclaimerScreen.prototype.render = function() {
+
+  return (
+    h('.flex-column.flex-center.flex-grow', [
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginBottom: 24,
+          width: '100%',
+          fontSize: '20px',
+          padding: 6,
+        },
+      }, [
+        'MetaMask Terms & Conditions',
+      ]),
+
+      h('div', {
+        style: {
+          whiteSpace: 'pre-line',
+          background: 'rgb(235, 235, 235)',
+          height: '336px',
+          padding: '6px',
+          width: '80%',
+          overflowY: 'scroll',
+        }
+      }, disclaimer),
+
+      h('button', {
+        style: { marginTop: '18px' },
+        onClick: () => this.props.dispatch(actions.agreeToDisclaimer())
+      }, 'I Agree')
+    ])
+  )
+}
+

ui/app/first-time/disclaimer.txt

@@ -0,0 +1,11 @@
+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/metamask.js

@@ -25,6 +25,11 @@ function reduceMetamask(state, action) {
   case actions.UPDATE_METAMASK_STATE:
     return extend(metamaskState, action.value)
 
+  case actions.AGREE_TO_DISCLAIMER:
+    return extend(metamaskState, {
+      isConfirmed: true,
+    })
+
   case actions.UNLOCK_METAMASK:
     return extend(metamaskState, {
       isUnlocked: true,

ui/app/template.js

@@ -16,15 +16,15 @@ function COMPONENTNAME() {
 }
 
 COMPONENTNAME.prototype.render = function() {
-  var state = this.props
-  var rpc = state.rpc
+  const props = this.props
 
   return (
     h('div', {
       style: {
-        display: 'none',
+        background: 'blue',
       }
     }, [
+      'Hello, world!'
     ])
   )
 }