feat(settings): implement settings component

app/components/Settings/Fiat.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FaAngleLeft from 'react-icons/lib/fa/angle-left'
+import styles from './Fiat.scss'
+
+const Fiat = ({ disableSubMenu }) => {
+  return (
+    <div>
+      <header className={styles.submenuHeader} onClick={disableSubMenu}>
+        <FaAngleLeft />
+        <span>Fiat currency</span>
+      </header>
+      <ul>
+        <li>USD</li>
+        <li>JPY</li>
+        <li>CNY</li>
+        <li>SGD</li>
+        <li>HKD</li>
+        <li>CAD</li>
+      </ul>
+    </div>
+  )
+}
+
+Fiat.propTypes = {
+  disableSubMenu: PropTypes.func.isRequired
+}
+
+export default Fiat

app/components/Settings/Fiat.scss

@@ -0,0 +1,9 @@
+.submenuHeader {
+  padding: 15px;
+  background: lighten(#1d1f27, 20%);
+  font-size: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+}

app/components/Settings/Menu.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FaAngleRight from 'react-icons/lib/fa/angle-right'
+import styles from './Menu.scss'
+
+const Menu = ({ setActiveSubMenu }) => {
+  return (
+    <ul>
+      <li className={styles.fiat} onClick={() => setActiveSubMenu('fiat')}>
+        <span>Fiat Currency</span>
+        <FaAngleRight />
+      </li>
+    </ul>
+  )
+}
+
+Menu.propTypes = {
+  setActiveSubMenu: PropTypes.func.isRequired
+}
+
+export default Menu

app/components/Settings/Settings.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Menu from './Menu'
+import Fiat from './Fiat'
+import styles from './Settings.scss'
+
+const Settings = ({ settings, setActiveSubMenu, fiatProps }) => {
+  const renderSettings = () => {
+    switch (settings.activeSubMenu) {
+      case 'fiat':
+        return <Fiat {...fiatProps} />
+      default:
+        return <Menu setActiveSubMenu={setActiveSubMenu} />
+    }
+  }
+  return <div className={styles.container}>{renderSettings()}</div>
+}
+
+Settings.propTypes = {
+  settings: PropTypes.object.isRequired,
+  setActiveSubMenu: PropTypes.func.isRequired,
+  fiatProps: PropTypes.object.isRequired
+}
+
+export default Settings

app/components/Settings/Settings.scss

@@ -0,0 +1,22 @@
+.container {
+  background: #1d1f27;
+  position: absolute;
+  width: 200px;
+  top: 30px;
+  left: -100px;
+  z-index: 10;
+
+  li {
+    padding: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 10px;
+    cursor: pointer;
+    transition: all 0.25s;
+
+    &:hover {
+      background: #0f0f0f;
+    }
+  }
+}

app/components/Wallet/Wallet.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import FaAngleUp from 'react-icons/lib/fa/angle-up'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 import Isvg from 'react-inlinesvg'
 
 import { btc, blockExplorer } from 'lib/utils'
 import Value from 'components/Value'
 import AnimatedCheckmark from 'components/AnimatedCheckmark'
+import Settings from 'components/Settings/Settings'
 
 import zapLogo from 'icons/zap_logo.svg'
 import qrCode from 'icons/qrcode.svg'
@@ -27,7 +29,8 @@ const Wallet = ({
   currencyName,
   setCurrency,
   setWalletCurrencyFilters,
-  network
+  network,
+  settingsProps
 }) => {
   const usdAmount = btc.satoshisToUsd(
     parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10),
@@ -48,10 +51,15 @@ const Wallet = ({
           </section>
 
           <section className={styles.user}>
-            <div>
-              <span>{info.data.alias}</span>
-              <FaAngleDown />
+            <div
+              className={`${styles.alias} ${settingsProps.settings.settingsOpen &&
+                styles.settingsOpen}`}
+              onClick={settingsProps.toggleSettings}
+            >
+              <span className={styles.aliasText}>{info.data.alias}</span>
+              {settingsProps.settings.settingsOpen ? <FaAngleUp /> : <FaAngleDown />}
             </div>
+            {settingsProps.settings.settingsOpen && <Settings {...settingsProps} />}
           </section>
         </header>
 
@@ -153,6 +161,7 @@ Wallet.propTypes = {
   showSuccessPayScreen: PropTypes.bool.isRequired,
   network: PropTypes.object.isRequired,
   successTransactionScreen: PropTypes.object.isRequired,
+  settingsProps: PropTypes.object.isRequired,
   currentCurrencyFilters: PropTypes.array.isRequired,
   currencyName: PropTypes.string.isRequired,
   setCurrency: PropTypes.func.isRequired,

app/components/Wallet/Wallet.scss

@@ -19,10 +19,11 @@
   }
 
   .user {
+    position: relative;
     cursor: pointer;
     transition: all 0.25s;
 
-    &:hover {
+    .aliasText:hover {
       opacity: 0.5;
     }
   }

app/reducers/index.js

@@ -21,6 +21,7 @@ import transaction from './transaction'
 import activity from './activity'
 import network from './network'
 import error from './error'
+import settings from './settings'
 
 const rootReducer = combineReducers({
   router,
@@ -43,7 +44,8 @@ const rootReducer = combineReducers({
   transaction,
   activity,
   network,
-  error
+  error,
+  settings
 })
 
 export default rootReducer

app/reducers/settings.js

@@ -0,0 +1,52 @@
+// ------------------------------------
+// Constants
+// ------------------------------------
+export const SET_SETTINGS_OPEN = 'SET_SETTINGS_OPEN'
+export const SET_ACTIVE_SUBMENU = 'SET_ACTIVE_SUBMENU'
+export const DISABLE_SUBMENU = 'DISABLE_SUBMENU'
+
+// ------------------------------------
+// Actions
+// ------------------------------------
+export function setSettingsOpen(settingsOpen) {
+  return {
+    type: SET_SETTINGS_OPEN,
+    settingsOpen
+  }
+}
+
+export function setActiveSubMenu(activeSubMenu) {
+  return {
+    type: SET_ACTIVE_SUBMENU,
+    activeSubMenu
+  }
+}
+
+export function disableSubMenu() {
+  return {
+    type: DISABLE_SUBMENU
+  }
+}
+
+// ------------------------------------
+// Action Handlers
+// ------------------------------------
+const ACTION_HANDLERS = {
+  [SET_SETTINGS_OPEN]: (state, { settingsOpen }) => ({ ...state, settingsOpen }),
+  [SET_ACTIVE_SUBMENU]: (state, { activeSubMenu }) => ({ ...state, activeSubMenu }),
+  [DISABLE_SUBMENU]: state => ({ ...state, activeSubMenu: null })
+}
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+const initialState = {
+  settingsOpen: false,
+  activeSubMenu: null
+}
+
+export default function settingsReducer(state = initialState, action) {
+  const handler = ACTION_HANDLERS[action.type]
+
+  return handler ? handler(state, action) : state
+}

app/routes/activity/containers/ActivityContainer.js

@@ -20,6 +20,8 @@ import { payFormSelectors } from 'reducers/payform'
 
 import { setWalletCurrencyFilters } from 'reducers/info'
 
+import { setSettingsOpen, setActiveSubMenu, disableSubMenu } from 'reducers/settings'
+
 import Activity from '../components/Activity'
 
 const mapDispatchToProps = {
@@ -39,7 +41,10 @@ const mapDispatchToProps = {
   updateSearchActive,
   updateSearchText,
   setFormType,
-  setWalletCurrencyFilters
+  setWalletCurrencyFilters,
+  setSettingsOpen,
+  setActiveSubMenu,
+  disableSubMenu
 }
 
 const mapStateToProps = state => ({
@@ -59,6 +64,8 @@ const mapStateToProps = state => ({
 
   network: state.network,
 
+  settings: state.settings,
+
   paymentModalOpen: paymentSelectors.paymentModalOpen(state),
   invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state),
 
@@ -96,7 +103,26 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
     walletAddress: dispatchProps.walletAddress,
     openReceiveModal: dispatchProps.openWalletModal,
     openPayForm: () => dispatchProps.setFormType('PAY_FORM'),
-    openRequestForm: () => dispatchProps.setFormType('REQUEST_FORM')
+    openRequestForm: () => dispatchProps.setFormType('REQUEST_FORM'),
+
+    settingsProps: {
+      settings: stateProps.settings,
+
+      toggleSettings: () => {
+        if (stateProps.settings.settingsOpen) {
+          dispatchProps.setSettingsOpen(false)
+        } else {
+          dispatchProps.setSettingsOpen(true)
+        }
+
+        return
+      },
+      setActiveSubMenu: dispatchProps.setActiveSubMenu,
+
+      fiatProps: {
+        disableSubMenu: dispatchProps.disableSubMenu
+      }
+    }
   }
 })