Add Info section

1 files changed, 107 insertions, 5 deletions

diff --git a/ui/app/settings.js b/ui/app/settings.js
index b6fae7707..786a70e7e 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -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,