Move the old UI's AppBar into its own component

old-ui/app/app.js

@@ -24,17 +24,13 @@ const ConfigScreen = require('./config')
 const AddTokenScreen = require('./add-token')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
+const AppBar = require('./components/app-bar')
 const Loading = require('./components/loading')
-const SandwichExpando = require('sandwich-expando')
-const Dropdown = require('./components/dropdown').Dropdown
-const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
-const NetworkIndicator = require('./components/network')
 const BuyView = require('./components/buy-button-subview')
 const QrView = require('./components/qr-code')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
-const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
 
 module.exports = connect(mapStateToProps)(App)
 
@@ -102,12 +98,9 @@ App.prototype.render = function () {
         alignItems: 'center',
       },
     }, [
-
-      // app bar
-      this.renderAppBar(),
-      this.renderNetworkDropdown(),
-      this.renderDropdown(),
-
+      h(AppBar, {
+        ...props,
+      }),
       this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
 
       // panel content
@@ -121,299 +114,6 @@ App.prototype.render = function () {
     ])
   )
 }
-
-App.prototype.renderAppBar = function () {
-  if (window.METAMASK_UI_TYPE === 'notification') {
-    return null
-  }
-
-  const props = this.props
-  const state = this.state || {}
-  const isNetworkMenuOpen = state.isNetworkMenuOpen || false
-  const {isMascara, isOnboarding} = props
-
-  // Do not render header if user is in mascara onboarding
-  if (isMascara && isOnboarding) {
-    return null
-  }
-
-  // Do not render header if user is in mascara buy ether
-  if (isMascara && props.currentView.name === 'buyEth') {
-    return null
-  }
-
-  return (
-
-    h('.full-width', {
-      height: '38px',
-    }, [
-
-      h('.app-header.flex-row.flex-space-between', {
-        style: {
-          alignItems: 'center',
-          visibility: props.isUnlocked ? 'visible' : 'none',
-          background: props.isUnlocked ? 'white' : 'none',
-          height: '38px',
-          position: 'relative',
-          zIndex: 12,
-        },
-      }, [
-
-        h('div.left-menu-section', {
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        }, [
-
-          // mini logo
-          h('img', {
-            height: 24,
-            width: 24,
-            src: './images/icon-128.png',
-          }),
-
-          h(NetworkIndicator, {
-            network: this.props.network,
-            provider: this.props.provider,
-            onClick: (event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
-            },
-          }),
-
-        ]),
-
-        props.isUnlocked && h('div', {
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        }, [
-
-          props.isUnlocked && h(AccountDropdowns, {
-            style: {},
-            enableAccountsSelector: true,
-            identities: this.props.identities,
-            selected: this.props.selectedAddress,
-            network: this.props.network,
-            keyrings: this.props.keyrings,
-          }, []),
-
-          // hamburger
-          props.isUnlocked && h(SandwichExpando, {
-            className: 'sandwich-expando',
-            width: 16,
-            barHeight: 2,
-            padding: 0,
-            isOpen: state.isMainMenuOpen,
-            color: 'rgb(247,146,30)',
-            onClick: () => {
-              this.setState({
-                isMainMenuOpen: !state.isMainMenuOpen,
-              })
-            },
-          }),
-        ]),
-      ]),
-    ])
-  )
-}
-
-App.prototype.renderNetworkDropdown = function () {
-  const props = this.props
-  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
-  const rpcList = props.frequentRpcList
-  const state = this.state || {}
-  const isOpen = state.isNetworkMenuOpen
-
-  return h(Dropdown, {
-    useCssTransition: true,
-    isOpen,
-    onClickOutside: (event) => {
-      const { classList } = event.target
-      const isNotToggleElement = [
-        classList.contains('menu-icon'),
-        classList.contains('network-name'),
-        classList.contains('network-indicator'),
-      ].filter(bool => bool).length === 0
-      // classes from three constituent nodes of the toggle element
-
-      if (isNotToggleElement) {
-        this.setState({ isNetworkMenuOpen: false })
-      }
-    },
-    zIndex: 11,
-    style: {
-      position: 'absolute',
-      left: '2px',
-      top: '36px',
-    },
-    innerStyle: {
-      padding: '2px 16px 2px 0px',
-    },
-  }, [
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'main',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('mainnet')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.diamond'),
-        'Main Ethereum Network',
-        providerType === 'mainnet' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'ropsten',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('ropsten')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.red-dot'),
-        'Ropsten Test Network',
-        providerType === 'ropsten' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'kovan',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('kovan')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.hollow-diamond'),
-        'Kovan Test Network',
-        providerType === 'kovan' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'rinkeby',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('.menu-icon.golden-square'),
-        'Rinkeby Test Network',
-        providerType === 'rinkeby' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'default',
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => props.dispatch(actions.setProviderType('localhost')),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Localhost 8545',
-        activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
-      ]
-    ),
-
-    this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcList, props.provider),
-
-    h(
-      DropdownMenuItem,
-      {
-        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
-        onClick: () => this.props.dispatch(actions.showConfigPage()),
-        style: {
-          fontSize: '18px',
-        },
-      },
-      [
-        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-        'Custom RPC',
-        activeNetwork === 'custom' ? h('.check', '✓') : null,
-      ]
-    ),
-
-  ])
-}
-
-App.prototype.renderDropdown = function () {
-  const state = this.state || {}
-  const isOpen = state.isMainMenuOpen
-
-  return h(Dropdown, {
-    useCssTransition: true,
-    isOpen: isOpen,
-    zIndex: 11,
-    onClickOutside: (event) => {
-      const classList = event.target.classList
-      const parentClassList = event.target.parentElement.classList
-
-      const isToggleElement = classList.contains('sandwich-expando') ||
-        parentClassList.contains('sandwich-expando')
-
-      if (isOpen && !isToggleElement) {
-        this.setState({ isMainMenuOpen: false })
-      }
-    },
-    style: {
-      position: 'absolute',
-      right: '2px',
-      top: '38px',
-    },
-    innerStyle: {},
-  }, [
-    h(DropdownMenuItem, {
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => { this.props.dispatch(actions.showConfigPage()) },
-    }, 'Settings'),
-
-    h(DropdownMenuItem, {
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => { this.props.dispatch(actions.lockMetamask()) },
-    }, 'Log Out'),
-
-    h(DropdownMenuItem, {
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => { this.props.dispatch(actions.showInfoPage()) },
-    }, 'Info/Help'),
-
-    h(DropdownMenuItem, {
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      onClick: () => {
-        this.props.dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
-      },
-    }, 'Try Beta!'),
-  ])
-}
-
 App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) {
   const { isMascara } = this.props
 
@@ -425,25 +125,6 @@ App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork,
     })
 }
 
-App.prototype.renderBackButton = function (style, justArrow = false) {
-  var props = this.props
-  return (
-    h('.flex-row', {
-      key: 'leftArrow',
-      style: style,
-      onClick: () => props.dispatch(actions.goBackToInitView()),
-    }, [
-      h('i.fa.fa-arrow-left.cursor-pointer'),
-      justArrow ? null : h('div.cursor-pointer', {
-        style: {
-          marginLeft: '3px',
-        },
-        onClick: () => props.dispatch(actions.goBackToInitView()),
-      }, 'BACK'),
-    ])
-  )
-}
-
 App.prototype.renderPrimary = function () {
   log.debug('rendering primary')
   var props = this.props
@@ -623,41 +304,6 @@ App.prototype.toggleMetamaskActive = function () {
     this.props.dispatch(actions.lockMetamask(false))
   }
 }
-
-App.prototype.renderCustomOption = function (provider) {
-  const { rpcTarget, type } = provider
-  const props = this.props
-
-  if (type !== 'rpc') return null
-
-  // Concatenate long URLs
-  let label = rpcTarget
-  if (rpcTarget.length > 31) {
-    label = label.substr(0, 34) + '...'
-  }
-
-  switch (rpcTarget) {
-
-    case 'http://localhost:8545':
-      return null
-
-    default:
-      return h(
-        DropdownMenuItem,
-        {
-          key: rpcTarget,
-          onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
-          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        },
-        [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          label,
-          h('.check', '✓'),
-        ]
-      )
-  }
-}
-
 App.prototype.getNetworkName = function () {
   const { provider } = this.props
   const providerName = provider.type
@@ -678,28 +324,3 @@ App.prototype.getNetworkName = function () {
 
   return name
 }
-
-App.prototype.renderCommonRpc = function (rpcList, provider) {
-  const props = this.props
-  const rpcTarget = provider.rpcTarget
-
-  return rpcList.map((rpc) => {
-    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
-      return null
-    } else {
-      return h(
-        DropdownMenuItem,
-        {
-          key: `common${rpc}`,
-          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-          onClick: () => props.dispatch(actions.setRpcTarget(rpc)),
-        },
-        [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          rpc,
-          rpcTarget === rpc ? h('.check', '✓') : null,
-        ]
-      )
-    }
-  })
-}

old-ui/app/components/app-bar.js

@@ -0,0 +1,385 @@
+const PropTypes = require('prop-types')
+const {Component} = require('react')
+const h = require('react-hyperscript')
+const actions = require('../../../ui/app/actions')
+const SandwichExpando = require('sandwich-expando')
+const {Dropdown} = require('./dropdown')
+const {DropdownMenuItem} = require('./dropdown')
+const NetworkIndicator = require('./network')
+const {AccountDropdowns} = require('./account-dropdowns')
+
+const LOCALHOST_RPC_URL = 'http://localhost:8545'
+
+module.exports = class AppBar extends Component {
+  static defaultProps = {
+    selectedAddress: undefined,
+  }
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    frequentRpcList: PropTypes.array.isRequired,
+    isMascara: PropTypes.bool.isRequired,
+    isOnboarding: PropTypes.bool.isRequired,
+    identities: PropTypes.any.isRequired,
+    selectedAddress: PropTypes.string,
+    isUnlocked: PropTypes.bool.isRequired,
+    network: PropTypes.any.isRequired,
+    keyrings: PropTypes.any.isRequired,
+    provider: PropTypes.any.isRequired,
+  }
+
+  state = {
+    isNetworkMenuOpen: false,
+  }
+
+  renderAppBar () {
+    if (window.METAMASK_UI_TYPE === 'notification') {
+      return null
+    }
+
+    const props = this.props
+    const {isMascara, isOnboarding} = props
+
+    // Do not render header if user is in mascara onboarding
+    if (isMascara && isOnboarding) {
+      return null
+    }
+
+    // Do not render header if user is in mascara buy ether
+    if (isMascara && props.currentView.name === 'buyEth') {
+      return null
+    }
+
+    return (
+      h('div.app-bar', [
+        this.renderAppBarAppHeader(),
+      ])
+    )
+  }
+
+  renderAppBarAppHeader () {
+    const {
+      identities,
+      selectedAddress,
+      isUnlocked,
+      network,
+      keyrings,
+      provider,
+    } = this.props
+    const {
+      isNetworkMenuOpen,
+      isMainMenuOpen,
+    } = this.state
+
+    return (
+      h('.full-width', {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          height: '38px',
+        },
+      }, [
+        h('.app-header.flex-row.flex-space-between', {
+          style: {
+            alignItems: 'center',
+            visibility: isUnlocked ? 'visible' : 'none',
+            background: isUnlocked ? 'white' : 'none',
+            height: '38px',
+            position: 'relative',
+            zIndex: 12,
+          },
+        }, [
+          h('div.left-menu-section', {
+            style: {
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            },
+          }, [
+            // mini logo
+            h('img', {
+              height: 24,
+              width: 24,
+              src: './images/icon-128.png',
+            }),
+            h(NetworkIndicator, {
+              network: network,
+              provider: provider,
+              onClick: (event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
+              },
+            }),
+          ]),
+          isUnlocked && h('div', {
+            style: {
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            },
+          }, [
+            h(AccountDropdowns, {
+              style: {},
+              enableAccountsSelector: true,
+              identities: identities,
+              selected: selectedAddress,
+              network,
+              keyrings,
+            }, []),
+            h(SandwichExpando, {
+              className: 'sandwich-expando',
+              width: 16,
+              barHeight: 2,
+              padding: 0,
+              isOpen: isMainMenuOpen,
+              color: 'rgb(247,146,30)',
+              onClick: () => {
+                this.setState({
+                  isMainMenuOpen: !isMainMenuOpen,
+                })
+              },
+            }),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderNetworkDropdown () {
+    const {
+      dispatch,
+      frequentRpcList: rpcList,
+      provider,
+    } = this.props
+    const {
+      type: providerType,
+      rpcTarget: activeNetwork,
+    } = provider
+    const isOpen = this.state.isNetworkMenuOpen
+
+    return h(Dropdown, {
+      useCssTransition: true,
+      isOpen,
+      onClickOutside: (event) => {
+        const { classList } = event.target
+        const isNotToggleElement = [
+          classList.contains('menu-icon'),
+          classList.contains('network-name'),
+          classList.contains('network-indicator'),
+        ].filter(bool => bool).length === 0
+        // classes from three constituent nodes of the toggle element
+
+        if (isNotToggleElement) {
+          this.setState({ isNetworkMenuOpen: false })
+        }
+      },
+      zIndex: 11,
+      style: {
+        position: 'absolute',
+        left: '2px',
+        top: '36px',
+      },
+      innerStyle: {
+        padding: '2px 16px 2px 0px',
+      },
+    }, [
+      h(DropdownMenuItem, {
+        key: 'main',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => dispatch(actions.setProviderType('mainnet')),
+        style: {
+          fontSize: '18px',
+        },
+      }, [
+        h('.menu-icon.diamond'),
+        'Main Ethereum Network',
+        providerType === 'mainnet'
+          ? h('.check', '✓')
+          : null,
+      ]),
+      h(DropdownMenuItem, {
+        key: 'ropsten',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => dispatch(actions.setProviderType('ropsten')),
+        style: {
+          fontSize: '18px',
+        },
+      }, [
+        h('.menu-icon.red-dot'),
+        'Ropsten Test Network',
+        providerType === 'ropsten'
+          ? h('.check', '✓')
+          : null,
+      ]),
+      h(DropdownMenuItem, {
+        key: 'kovan',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => dispatch(actions.setProviderType('kovan')),
+        style: {
+          fontSize: '18px',
+        },
+      }, [
+        h('.menu-icon.hollow-diamond'),
+        'Kovan Test Network',
+        providerType === 'kovan'
+          ? h('.check', '✓')
+          : null,
+      ]),
+      h(DropdownMenuItem, {
+        key: 'rinkeby',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => dispatch(actions.setProviderType('rinkeby')),
+        style: {
+          fontSize: '18px',
+        },
+      }, [
+        h('.menu-icon.golden-square'),
+        'Rinkeby Test Network',
+        providerType === 'rinkeby'
+          ? h('.check', '✓')
+          : null,
+      ]),
+      h(DropdownMenuItem, {
+        key: 'default',
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => dispatch(actions.setProviderType('localhost')),
+        style: {
+          fontSize: '18px',
+        },
+      }, [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Localhost 8545',
+        activeNetwork === LOCALHOST_RPC_URL
+          ? h('.check', '✓')
+          : null,
+      ]),
+
+      this.renderCustomOption(provider),
+      this.renderCommonRpc(rpcList, provider),
+
+      h(DropdownMenuItem, {
+        closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
+        onClick: () => dispatch(actions.showConfigPage()),
+        style: {
+          fontSize: '18px',
+        },
+      }, [
+        h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+        'Custom RPC',
+        activeNetwork === 'custom'
+          ? h('.check', '✓')
+          : null,
+      ]),
+    ])
+  }
+
+  renderCustomOption ({ rpcTarget, type }) {
+    const {dispatch} = this.props
+
+    if (type !== 'rpc') {
+      return null
+    }
+
+    // Concatenate long URLs
+    let label = rpcTarget
+    if (rpcTarget.length > 31) {
+      label = label.substr(0, 34) + '...'
+    }
+
+    switch (rpcTarget) {
+      case LOCALHOST_RPC_URL:
+        return null
+      default:
+        return h(DropdownMenuItem, {
+          key: rpcTarget,
+          onClick: () => dispatch(actions.setRpcTarget(rpcTarget)),
+          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+        }, [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ])
+    }
+  }
+
+  renderCommonRpc (rpcList, {rpcTarget}) {
+    const {dispatch} = this.props
+
+    return rpcList.map((rpc) => {
+      if ((rpc === LOCALHOST_RPC_URL) || (rpc === rpcTarget)) {
+        return null
+      } else {
+        return h(DropdownMenuItem, {
+          key: `common${rpc}`,
+          closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
+          onClick: () => dispatch(actions.setRpcTarget(rpc)),
+        }, [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          rpcTarget === rpc
+            ? h('.check', '✓')
+            : null,
+        ])
+      }
+    })
+  }
+
+  renderDropdown () {
+    const {dispatch} = this.props
+    const isOpen = this.state.isMainMenuOpen
+
+    return h(Dropdown, {
+      useCssTransition: true,
+      isOpen: isOpen,
+      zIndex: 11,
+      onClickOutside: (event) => {
+        const classList = event.target.classList
+        const parentClassList = event.target.parentElement.classList
+
+        const isToggleElement = classList.contains('sandwich-expando') ||
+          parentClassList.contains('sandwich-expando')
+
+        if (isOpen && !isToggleElement) {
+          this.setState({ isMainMenuOpen: false })
+        }
+      },
+      style: {
+        position: 'absolute',
+        right: '2px',
+        top: '38px',
+      },
+      innerStyle: {},
+    }, [
+      h(DropdownMenuItem, {
+        closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
+        onClick: () => { dispatch(actions.showConfigPage()) },
+      }, 'Settings'),
+
+      h(DropdownMenuItem, {
+        closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
+        onClick: () => { dispatch(actions.lockMetamask()) },
+      }, 'Log Out'),
+
+      h(DropdownMenuItem, {
+        closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
+        onClick: () => { dispatch(actions.showInfoPage()) },
+      }, 'Info/Help'),
+
+      h(DropdownMenuItem, {
+        closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
+        onClick: () => {
+          dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
+        },
+      }, 'Try Beta!'),
+    ])
+  }
+
+  render () {
+    return h('div.full-width', [
+      this.renderAppBar(),
+      this.renderNetworkDropdown(),
+      this.renderDropdown(),
+    ])
+  }
+}

old-ui/app/css/index.css

@@ -720,7 +720,11 @@ div.message-container > div:first-child {
     transform: scale(1.1);
 }
 
-//Notification Modal
+.app-bar {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
 .notification-modal-wrapper {
   display: flex;