refactor(ui): use Dropdown component

Update all places where we display a crypto unit selector to use the new CryptoSelector component and do away with all the custom implementations.
6 years ago · 514aad81a3
28 changed files with 250 additions and 983 deletions
--- a/app/components/Activity/InvoiceModal/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal/InvoiceModal.js
@ -1,18 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
 import QRCode from 'qrcode.react'
 import copy from 'copy-to-clipboard'
 import { showNotification } from 'lib/utils/notifications'
-
-import FaAngleDown from 'react-icons/lib/fa/angle-down'
-
 import Value from 'components/Value'
+import Dropdown from 'components/UI/Dropdown'
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl'
 import Countdown from '../Countdown'
-
 import messages from './messages'
-
 import styles from './InvoiceModal.scss'

 const InvoiceModal = ({
@ -20,13 +15,7 @@ const InvoiceModal = ({
  ticker,
  currentTicker,

-  toggleCurrencyProps: {
-    setActivityModalCurrencyFilters,
-    showCurrencyFilters,
-    currencyName,
-    currentCurrencyFilters,
-    onCurrencyFilterClick
-  }
+  toggleCurrencyProps: { currencyFilters, setCurrency }
 }) => {
  const copyPaymentRequest = () => {
    copy(invoice.payment_request)
@ -56,30 +45,18 @@ const InvoiceModal = ({
        <section className={styles.right}>
          <div className={styles.details}>
            <section className={styles.amount}>
-              <h1>
-                <Value
-                  value={invoice.finalAmount}
-                  currency={ticker.currency}
-                  currentTicker={currentTicker}
-                  fiatTicker={ticker.fiatTicker}
-                />
-              </h1>
-              <section
-                className={styles.currentCurrency}
-                onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}
-              >
-                <span>{currencyName}</span>
-                <span>
-                  <FaAngleDown />
-                </span>
-              </section>
-              <ul className={showCurrencyFilters ? styles.active : undefined}>
-                {currentCurrencyFilters.map(filter => (
-                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                    {filter.name}
-                  </li>
-                ))}
-              </ul>
+              <Value
+                value={invoice.finalAmount}
+                currency={ticker.currency}
+                currentTicker={currentTicker}
+                fiatTicker={ticker.fiatTicker}
+              />
+              <Dropdown
+                activeKey={ticker.currency}
+                items={currencyFilters}
+                onChange={setCurrency}
+                ml={2}
+              />
            </section>
            <section className={styles.date}>
              <p>
--- a/app/components/Activity/InvoiceModal/InvoiceModal.scss
+++ b/app/components/Activity/InvoiceModal/InvoiceModal.scss
@ -46,51 +46,7 @@
        flex-direction: row;
        align-items: center;
        position: relative;
-
-        h1 {
-          font-size: 40px;
-          margin-right: 10px;
-        }
-
-        .currentCurrency {
-          cursor: pointer;
-          transition: 0.25s all;
-
-          &:hover {
-            opacity: 0.5;
-          }
-
-          span {
-            font-size: 14px;
-
-            &:nth-child(1) {
-              font-weight: bold;
-            }
-          }
-        }
-
-        ul {
-          visibility: hidden;
-          position: absolute;
-          top: 40px;
-          right: -50px;
-
-          &.active {
-            visibility: visible;
-          }
-
-          li {
-            padding: 8px 15px;
-            background: var(--lightBackground);
-            cursor: pointer;
-            transition: 0.25s hover;
-            border-bottom: 1px solid var(--lightestBackground);
-
-            &:hover {
-              background: var(--lightestBackground);
-            }
-          }
-        }
+        font-size: 40px;
      }

      .date {
--- a/app/components/Activity/PaymentModal/PaymentModal.js
+++ b/app/components/Activity/PaymentModal/PaymentModal.js
@ -1,16 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import FaAngleDown from 'react-icons/lib/fa/angle-down'
-
+import Dropdown from 'components/UI/Dropdown'
 import PaperPlane from 'components/Icon/PaperPlane'
 import Zap from 'components/Icon/Zap'
-
 import Value from 'components/Value'
-
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl'
 import messages from './messages'
-
 import styles from './PaymentModal.scss'

 const PaymentModal = ({
@ -18,13 +13,7 @@ const PaymentModal = ({
  ticker,
  currentTicker,

-  toggleCurrencyProps: {
-    setActivityModalCurrencyFilters,
-    showCurrencyFilters,
-    currencyName,
-    currentCurrencyFilters,
-    onCurrencyFilterClick
-  }
+  toggleCurrencyProps: { currencyName, currencyFilters, setCurrency }
 }) => (
  <div className={styles.container}>
    <header className={styles.header}>
@ -55,31 +44,14 @@ const PaymentModal = ({
    </header>

    <div className={styles.amount}>
-      <h1>
-        <i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
-        <Value
-          value={payment.value}
-          currency={ticker.currency}
-          currentTicker={currentTicker}
-          fiatTicker={ticker.fiatTicker}
-        />
-      </h1>
-      <section
-        className={styles.currentCurrency}
-        onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}
-      >
-        <span>{currencyName}</span>
-        <span>
-          <FaAngleDown />
-        </span>
-        <ul className={showCurrencyFilters ? styles.active : undefined}>
-          {currentCurrencyFilters.map(filter => (
-            <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-              {filter.name}
-            </li>
-          ))}
-        </ul>
-      </section>
+      <i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
+      <Value
+        value={payment.value}
+        currency={ticker.currency}
+        currentTicker={currentTicker}
+        fiatTicker={ticker.fiatTicker}
+      />
+      <Dropdown activeKey={ticker.currency} items={currencyFilters} onChange={setCurrency} ml={2} />
    </div>

    <div className={styles.date}>
--- a/app/components/Activity/PaymentModal/PaymentModal.scss
+++ b/app/components/Activity/PaymentModal/PaymentModal.scss
@ -60,51 +60,7 @@
  align-items: center;
  justify-content: center;
  padding: 20px;
-
-  h1 {
-    font-size: 40px;
-  }
-
-  section {
-    font-size: 20px;
-    margin-left: 10px;
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      span {
-        opacity: 0.5;
-      }
-    }
-
-    span {
-      transition: all 0.25s;
-    }
-
-    ul {
-      visibility: hidden;
-      position: absolute;
-      top: 40px;
-      right: -50px;
-      font-size: 12px;
-
-      &.active {
-        visibility: visible;
-      }
-
-      li {
-        padding: 8px 15px;
-        background: var(--lightBackground);
-        cursor: pointer;
-        transition: 0.25s hover;
-        border-bottom: 1px solid var(--lightestBackground);
-
-        &:hover {
-          background: var(--lightestBackground);
-        }
-      }
-    }
-  }
+  font-size: 40px;
 }

 .date {
--- a/app/components/Activity/TransactionModal/TransactionModal.js
+++ b/app/components/Activity/TransactionModal/TransactionModal.js
@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FaAngleDown from 'react-icons/lib/fa/angle-down'
+import Dropdown from 'components/UI/Dropdown'
 import PaperPlane from 'components/Icon/PaperPlane'
 import Hand from 'components/Icon/Hand'
 import ChainLink from 'components/Icon/ChainLink'
@ -19,13 +19,7 @@ const TransactionModal = ({
  currentTicker,
  network,

-  toggleCurrencyProps: {
-    setActivityModalCurrencyFilters,
-    showCurrencyFilters,
-    currencyName,
-    currentCurrencyFilters,
-    onCurrencyFilterClick
-  }
+  toggleCurrencyProps: { currencyName, currencyFilters, setCurrency }
 }) => (
  <div className={styles.container}>
    <header className={styles.header}>
@ -72,33 +66,16 @@ const TransactionModal = ({
    </header>

    <div className={styles.amount}>
-      <h1>
-        <i className={`${styles.symbol} ${transaction.received ? styles.active : undefined}`}>
-          {transaction.received ? '+' : '-'}
-        </i>
-        <Value
-          value={transaction.amount}
-          currency={ticker.currency}
-          currentTicker={currentTicker}
-          fiatTicker={ticker.fiatTicker}
-        />
-      </h1>
-      <section
-        className={styles.currentCurrency}
-        onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}
-      >
-        <span>{currencyName}</span>
-        <span>
-          <FaAngleDown />
-        </span>
-        <ul className={showCurrencyFilters ? styles.active : undefined}>
-          {currentCurrencyFilters.map(filter => (
-            <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-              {filter.name}
-            </li>
-          ))}
-        </ul>
-      </section>
+      <i className={`${styles.symbol} ${transaction.received ? styles.active : undefined}`}>
+        {transaction.received ? '+' : '-'}
+      </i>
+      <Value
+        value={transaction.amount}
+        currency={ticker.currency}
+        currentTicker={currentTicker}
+        fiatTicker={ticker.fiatTicker}
+      />
+      <Dropdown activeKey={ticker.currency} items={currencyFilters} onChange={setCurrency} ml={2} />
    </div>

    <div className={styles.date}>
--- a/app/components/Activity/TransactionModal/TransactionModal.scss
+++ b/app/components/Activity/TransactionModal/TransactionModal.scss
@ -68,51 +68,7 @@
  align-items: center;
  justify-content: center;
  padding: 20px;
-
-  h1 {
-    font-size: 40px;
-  }
-
-  section {
-    font-size: 20px;
-    margin-left: 10px;
-    position: relative;
-    cursor: pointer;
-
-    &:hover {
-      span {
-        opacity: 0.5;
-      }
-    }
-
-    span {
-      transition: all 0.25s;
-    }
-
-    ul {
-      visibility: hidden;
-      position: absolute;
-      top: 40px;
-      right: -50px;
-      font-size: 12px;
-
-      &.active {
-        visibility: visible;
-      }
-
-      li {
-        padding: 8px 15px;
-        background: var(--lightBackground);
-        cursor: pointer;
-        transition: 0.25s hover;
-        border-bottom: 1px solid var(--lightestBackground);
-
-        &:hover {
-          background: var(--lightestBackground);
-        }
-      }
-    }
-  }
+  font-size: 40px;
 }

 .date {
--- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js
+++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.js
@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'

-import FaAngleDown from 'react-icons/lib/fa/angle-down'
 import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle'

 import AmountInput from 'components/AmountInput'
 import Button from 'components/UI/Button'
+import Dropdown from 'components/UI/Dropdown'

 import { FormattedNumber, FormattedMessage } from 'react-intl'
 import messages from './messages'
@ -37,14 +37,7 @@ class SubmitChannelForm extends React.Component {

      ticker,

-      toggleCurrencyProps: {
-        setContactsCurrencyFilters,
-        showCurrencyFilters,
-        currencyName,
-        currentCurrencyFilters,
-        onCurrencyFilterClick,
-        contactFormFiatAmount
-      }
+      toggleCurrencyProps: { currencyFilters, onCurrencyFilterClick, contactFormFiatAmount }
    } = this.props

    const renderTitle = () => {
@ -126,24 +119,12 @@ class SubmitChannelForm extends React.Component {
              onChangeEvent={updateContactCapacity}
              ref={this.amountInput}
            />
-            <div className={styles.currency}>
-              <section
-                className={styles.currentCurrency}
-                onClick={() => setContactsCurrencyFilters(!showCurrencyFilters)}
-              >
-                <span>{currencyName}</span>
-                <span>
-                  <FaAngleDown />
-                </span>
-              </section>
-              <ul className={showCurrencyFilters ? styles.active : undefined}>
-                {currentCurrencyFilters.map(filter => (
-                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                    {filter.name}
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <Dropdown
+              activeKey={ticker.currency}
+              items={currencyFilters}
+              onChange={onCurrencyFilterClick}
+              ml={2}
+            />
          </div>
          <div className={styles.fiatAmount}>
            {'≈ '}
--- a/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss
+++ b/app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss
@ -1,7 +1,6 @@
@import 'styles/variables.scss';

 .content {
-  padding: 0 40px;
  color: var(--primaryText);
  margin: 0 auto;
  width: 500px;
@ -72,7 +71,7 @@

  input {
    font-size: 25px;
-    max-width: 110px;
+    max-width: 180px;
    background: transparent;
    outline: none;
    border: 1px solid #404040;
@ -91,52 +90,6 @@
  -webkit-text-fill-color: initial;
 }

-.currency {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 10px;
-
-  .currentCurrency {
-    cursor: pointer;
-    transition: 0.25s all;
-
-    &:hover {
-      opacity: 0.5;
-    }
-
-    span {
-      font-size: 14px;
-
-      &:nth-child(1) {
-        font-weight: bold;
-      }
-    }
-  }
-
-  ul {
-    visibility: hidden;
-    position: absolute;
-    top: 30px;
-
-    &.active {
-      visibility: visible;
-    }
-
-    li {
-      padding: 8px 15px;
-      background: var(--lightBackground);
-      cursor: pointer;
-      transition: 0.25s hover;
-
-      &:hover {
-        background: var(--lightestBackground);
-      }
-    }
-  }
-}
-
 .fiatAmount {
  margin-top: 20px;
  opacity: 0.75;
--- a/app/components/Form/Pay/Pay.js
+++ b/app/components/Form/Pay/Pay.js
@ -3,11 +3,11 @@ import PropTypes from 'prop-types'

 import PaperPlane from 'components/Icon/PaperPlane'
 import ChainLink from 'components/Icon/ChainLink'
-import FaAngleDown from 'react-icons/lib/fa/angle-down'

 import { btc } from 'lib/utils'
 import AmountInput from 'components/AmountInput'
 import Button from 'components/UI/Button'
+import Dropdown from 'components/UI/Dropdown'

 import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
@ -46,28 +46,20 @@ class Pay extends Component {

  render() {
    const {
-      payform: { payInput, showErrors, invoice, showCurrencyFilters },
+      payform: { payInput, showErrors, invoice },
      nodes,
      ticker,
-
      isOnchain,
      isLn,
      currentAmount,
      fiatAmount,
      payFormIsValid: { errors, isValid },
-      currentCurrencyFilters,
-      currencyName,
-
+      currencyFilters,
      setPayAmount,
      onPayAmountBlur,
-
      setPayInput,
      onPayInputBlur,
-
-      setCurrencyFilters,
-
      onPaySubmit,
-
      setCurrency,
      intl
    } = this.props
@ -87,9 +79,7 @@ class Pay extends Component {
        // change the input amount
        setPayAmount(btc.convert(ticker.currency, currency, currentAmount))
      }
-
      setCurrency(currency)
-      setCurrencyFilters(false)
    }

    return (
@ -164,24 +154,12 @@ class Pay extends Component {
                onBlurEvent={onPayAmountBlur}
                readOnly={isLn}
              />
-              <div className={styles.currency}>
-                <section
-                  className={styles.currentCurrency}
-                  onClick={() => setCurrencyFilters(!showCurrencyFilters)}
-                >
-                  <span>{currencyName}</span>
-                  <span>
-                    <FaAngleDown />
-                  </span>
-                </section>
-                <ul className={showCurrencyFilters ? styles.active : undefined}>
-                  {currentCurrencyFilters.map(filter => (
-                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                      {filter.name}
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              <Dropdown
+                activeKey={ticker.currency}
+                items={currencyFilters}
+                onChange={onCurrencyFilterClick}
+                ml={2}
+              />
            </div>

            <div className={styles.fiatAmount}>
@ -221,7 +199,6 @@ Pay.propTypes = {
    showErrors: PropTypes.object.isRequired
  }).isRequired,
  currencyName: PropTypes.string.isRequired,
-
  isOnchain: PropTypes.bool.isRequired,
  isLn: PropTypes.bool.isRequired,
  currentAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@ -230,21 +207,16 @@ Pay.propTypes = {
    errors: PropTypes.object,
    isValid: PropTypes.bool
  }).isRequired,
-
  setPayAmount: PropTypes.func.isRequired,
  onPayAmountBlur: PropTypes.func.isRequired,
  setPayInput: PropTypes.func.isRequired,
  onPayInputBlur: PropTypes.func.isRequired,
  fetchInvoice: PropTypes.func.isRequired,
-
  onPaySubmit: PropTypes.func.isRequired,
-  setCurrencyFilters: PropTypes.func.isRequired,
  setCurrency: PropTypes.func.isRequired,
-
  ticker: PropTypes.object.isRequired,
-
  nodes: PropTypes.array.isRequired,
-  currentCurrencyFilters: PropTypes.array.isRequired
+  currencyFilters: PropTypes.array.isRequired
 }

 export default injectIntl(Pay)
--- a/app/components/Form/Pay/Pay.scss
+++ b/app/components/Form/Pay/Pay.scss
@ -1,7 +1,6 @@
@import 'styles/variables.scss';

 .container {
-  padding: 0 40px;
  margin: 0 auto;
  width: 500px;
 }
@ -50,7 +49,6 @@

  .amount .bottom {
    display: flex;
-    flex-direction: row;
    align-items: center;

    input {
@ -95,53 +93,6 @@
    }
  }

-  .currency {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 12px;
-
-    .currentCurrency {
-      cursor: pointer;
-      transition: 0.25s all;
-
-      &:hover {
-        opacity: 0.5;
-      }
-
-      span {
-        font-size: 14px;
-
-        &:nth-child(1) {
-          font-weight: bold;
-        }
-      }
-    }
-
-    ul {
-      visibility: hidden;
-      position: absolute;
-      top: 30px;
-      z-index: z("form", "pay");
-
-      &.active {
-        visibility: visible;
-      }
-
-      li {
-        padding: 8px 15px;
-        background: var(--lightBackground);
-        cursor: pointer;
-        transition: 0.25s hover;
-
-        &:hover {
-          background: var(--darkestBackground);
-        }
-      }
-    }
-  }
-
  .fiatAmount {
    margin-top: 10px;
    opacity: 0.5;
--- a/app/components/Form/Request/Request.js
+++ b/app/components/Form/Request/Request.js
@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'

 import Hand from 'components/Icon/Hand'
-import FaAngleDown from 'react-icons/lib/fa/angle-down'

 import { btc } from 'lib/utils'
 import AmountInput from 'components/AmountInput'
 import Button from 'components/UI/Button'
+import Dropdown from 'components/UI/Dropdown'

 import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
@ -14,27 +14,20 @@ import messages from './messages'
 import styles from './Request.scss'

 const Request = ({
-  requestform: { amount, memo, showCurrencyFilters },
+  requestform: { amount, memo },
  ticker,
-
  setRequestAmount,
  setRequestMemo,
  setCurrency,
-  setRequestCurrencyFilters,
-  currencyName,
  requestFiatAmount,
-
-  currentCurrencyFilters,
-
+  currencyFilters,
  onRequestSubmit,
  intl
 }) => {
  const onCurrencyFilterClick = currency => {
    // change the input amount
    setRequestAmount(btc.convert(ticker.currency, currency, amount))
-
    setCurrency(currency)
-    setRequestCurrencyFilters(false)
  }

  return (
@ -61,24 +54,12 @@ const Request = ({
              currency={ticker.currency}
              onChangeEvent={setRequestAmount}
            />
-            <div className={styles.currency}>
-              <section
-                className={styles.currentCurrency}
-                onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
-              >
-                <span>{currencyName}</span>
-                <span>
-                  <FaAngleDown />
-                </span>
-              </section>
-              <ul className={showCurrencyFilters ? styles.active : undefined}>
-                {currentCurrencyFilters.map(filter => (
-                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                    {filter.name}
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <Dropdown
+              activeKey={ticker.currency}
+              items={currencyFilters}
+              onChange={onCurrencyFilterClick}
+              ml={2}
+            />
          </div>

          <div className={styles.fiatAmount}>
@ -123,17 +104,13 @@ Request.propTypes = {
    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    memo: PropTypes.string
  }).isRequired,
-
  requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  currencyName: PropTypes.string.isRequired,
-
-  currentCurrencyFilters: PropTypes.array.isRequired,
-
+  currencyFilters: PropTypes.array.isRequired,
  setRequestAmount: PropTypes.func.isRequired,
  setRequestMemo: PropTypes.func.isRequired,
  onRequestSubmit: PropTypes.func.isRequired,
  setCurrency: PropTypes.func.isRequired,
-  setRequestCurrencyFilters: PropTypes.func.isRequired,

  ticker: PropTypes.object.isRequired
 }
--- a/app/components/Form/Request/Request.scss
+++ b/app/components/Form/Request/Request.scss
@ -1,7 +1,6 @@
@import 'styles/variables.scss';

 .container {
-  padding: 0 40px;
  margin: 0 auto;
  width: 500px;
 }
@ -55,6 +54,9 @@
  }

  .bottom {
+    display: flex;
+    align-items: center;
+
    input {
      background: transparent;
      outline: none;
@ -74,53 +76,6 @@
    }
  }

-  .currency {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 12px;
-
-    .currentCurrency {
-      cursor: pointer;
-      transition: 0.25s all;
-
-      &:hover {
-        opacity: 0.5;
-      }
-
-      span {
-        font-size: 14px;
-
-        &:nth-child(1) {
-          font-weight: bold;
-        }
-      }
-    }
-
-    ul {
-      visibility: hidden;
-      position: absolute;
-      top: 30px;
-      z-index: z("form", "request");
-
-      &.active {
-        visibility: visible;
-      }
-
-      li {
-        padding: 8px 15px;
-        background: var(--lightBackground);
-        cursor: pointer;
-        transition: 0.25s hover;
-
-        &:hover {
-          background: var(--darkestBackground);
-        }
-      }
-    }
-  }
-
  .fiatAmount {
    margin-top: 10px;
    opacity: 0.5;
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@ -2,11 +2,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 { Box, Flex } from 'rebass'
 import { btc, blockExplorer } from 'lib/utils'
 import Value from 'components/Value'
 import Settings from 'components/Settings'
 import Button from 'components/UI/Button'
+import Text from 'components/UI/Text'
+import Dropdown from 'components/UI/Dropdown'

 import CheckAnimated from 'components/Icon/CheckAnimated'
 import ZapLogo from 'components/Icon/ZapLogo'
@ -29,10 +31,8 @@ const Wallet = ({
  showPayLoadingScreen,
  showSuccessPayScreen,
  successTransactionScreen,
-  currentCurrencyFilters,
-  currencyName,
+  currencyFilters,
  setCurrency,
-  setWalletCurrencyFilters,
  network,
  settingsProps,
  paymentTimeout,
@ -43,24 +43,22 @@ const Wallet = ({
    currentTicker[ticker.fiatTicker].last
  )

-  const onCurrencyFilterClick = currency => {
-    setCurrency(currency)
-    setWalletCurrencyFilters(false)
-  }
-
  return (
    <div className={`${styles.wallet}`}>
-      <div className={styles.content}>
-        <header className={styles.header}>
-          <section className={styles.logo}>
-            {theme === 'light' ? (
-              <ZapLogoBlack width="70px" height="32px" />
-            ) : (
-              <ZapLogo width="70px" height="32px" />
-            )}
-            {info.data.testnet && <span className={styles.testnetPill}>Testnet</span>}
-          </section>
-
+      <Flex as="header" justifyContent="space-between">
+        <Flex as="section" alignItems="center">
+          {theme === 'light' ? (
+            <ZapLogoBlack width="70px" height="32px" />
+          ) : (
+            <ZapLogo width="70px" height="32px" />
+          )}
+          {info.data.testnet && (
+            <Text color="superGreen" fontSize={1} ml={2}>
+              Testnet
+            </Text>
+          )}
+        </Flex>
+        <Box as="section">
          <section className={styles.user}>
            <div
              className={`${styles.alias} ${settingsProps.settings.settingsOpen &&
@ -72,102 +70,93 @@ const Wallet = ({
            </div>
            {settingsProps.settings.settingsOpen && <Settings {...settingsProps} />}
          </section>
-        </header>
+        </Box>
+      </Flex>

-        <div className={styles.left}>
-          <div className={styles.leftContent}>
-            <span onClick={openReceiveModal} className={styles.qrCode}>
-              <Qrcode width="20px" height="32px" />
-            </span>
-            <div className={styles.details}>
-              <h1>
-                <span>
-                  <Value
-                    value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
-                    currency={ticker.currency}
-                    currentTicker={currentTicker}
-                    fiatTicker={ticker.fiatTicker}
-                  />
-                  <section className={styles.currencyContainer}>
-                    <i className={styles.currency}>{currencyName}</i>
-                    <span onClick={() => setWalletCurrencyFilters(!info.showWalletCurrencyFilters)}>
-                      <FaAngleDown />
-                    </span>
-
-                    <ul className={info.showWalletCurrencyFilters ? styles.active : undefined}>
-                      {currentCurrencyFilters.map(filter => (
-                        <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                          {filter.name}
-                        </li>
-                      ))}
-                    </ul>
-                  </section>
-                </span>
-              </h1>
-              {Boolean(fiatAmount) && (
-                <span>
-                  {'≈ '}
-                  <FormattedNumber
-                    currency={ticker.fiatTicker}
-                    style="currency"
-                    value={fiatAmount}
-                  />
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className={styles.right}>
-          <div className={styles.rightContent}>
-            <Button onClick={openPayForm} variant="primary" my={10} mx={7.5} width={100}>
-              <FormattedMessage {...messages.pay} />
-            </Button>
-            <Button onClick={openRequestForm} variant="primary" my={10} mx={7.5} width={100}>
-              <FormattedMessage {...messages.request} />
-            </Button>
-          </div>
-          <div className={styles.notificationBox}>
-            {showPayLoadingScreen && (
+      <Flex as="header" justifyContent="space-between" mt={4}>
+        <Box as="section">
+          <Flex alignItems="baseline">
+            <Box onClick={openReceiveModal} className={styles.qrCode} mr={2}>
+              <Qrcode width="20px" height="20px" />
+            </Box>
+            <Flex flexDirection="column">
+              <Text fontSize="24px" letterSpacing={2}>
+                <Value
+                  value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
+                  currency={ticker.currency}
+                  currentTicker={currentTicker}
+                  fiatTicker={ticker.fiatTicker}
+                />
+              </Text>
+            </Flex>
+            <Dropdown
+              activeKey={ticker.currency}
+              items={currencyFilters}
+              onChange={setCurrency}
+              ml={2}
+            />
+          </Flex>
+          <Box ml={30} mt={1}>
+            {Boolean(fiatAmount) && (
              <span>
-                <div className={styles.spinnerContainer}>
-                  <section className={`${styles.spinner} ${styles.icon}`} />
-                  <span className={styles.timeout}>{paymentTimeout / 1000}</span>
-                </div>
-                <section>
-                  <FormattedMessage {...messages.sending_tx} />
-                </section>
+                {'≈ '}
+                <FormattedNumber currency={ticker.fiatTicker} style="currency" value={fiatAmount} />
              </span>
            )}
-            {showSuccessPayScreen && (
-              <span>
-                <section className={styles.icon}>
-                  <CheckAnimated />
-                </section>
-                <section>
-                  <FormattedMessage {...messages.payment_success} />
-                </section>
-              </span>
-            )}
-            {successTransactionScreen.show && (
-              <span>
-                <section className={styles.icon}>
-                  <CheckAnimated />
-                </section>
-                <section>
-                  <span
-                    className={styles.txLink}
-                    onClick={() => {
-                      return blockExplorer.showTransaction(network, successTransactionScreen.txid)
-                    }}
-                  >
-                    <FormattedMessage {...messages.transaction_success} />
-                  </span>
-                </section>
-              </span>
-            )}
-          </div>
+          </Box>
+        </Box>
+        <Box as="section">
+          <Button onClick={openPayForm} variant="primary" mx={7.5} width={100}>
+            <FormattedMessage {...messages.pay} />
+          </Button>
+          <Button onClick={openRequestForm} variant="primary" mx={7.5} width={100}>
+            <FormattedMessage {...messages.request} />
+          </Button>
+        </Box>
+      </Flex>
+
+      <Box mt={2}>
+        <div className={styles.notificationBox}>
+          {showPayLoadingScreen && (
+            <span>
+              <div className={styles.spinnerContainer}>
+                <section className={`${styles.spinner} ${styles.icon}`} />
+                <span className={styles.timeout}>{paymentTimeout / 1000}</span>
+              </div>
+              <section>
+                <FormattedMessage {...messages.sending_tx} />
+              </section>
+            </span>
+          )}
+          {showSuccessPayScreen && (
+            <span>
+              <section className={styles.icon}>
+                <CheckAnimated />
+              </section>
+              <section>
+                <FormattedMessage {...messages.payment_success} />
+              </section>
+            </span>
+          )}
+          {successTransactionScreen.show && (
+            <span>
+              <section className={styles.icon}>
+                <CheckAnimated />
+              </section>
+              <section>
+                <span
+                  className={styles.txLink}
+                  onClick={() => {
+                    return blockExplorer.showTransaction(network, successTransactionScreen.txid)
+                  }}
+                >
+                  <FormattedMessage {...messages.transaction_success} />
+                </span>
+              </section>
+            </span>
+          )}
        </div>
-      </div>
+      </Box>
    </div>
  )
 }
@ -185,11 +174,10 @@ Wallet.propTypes = {
  network: PropTypes.object.isRequired,
  successTransactionScreen: PropTypes.object.isRequired,
  settingsProps: PropTypes.object.isRequired,
-  currentCurrencyFilters: PropTypes.array.isRequired,
+  currencyFilters: PropTypes.array.isRequired,
  currencyName: PropTypes.string.isRequired,
  paymentTimeout: PropTypes.number.isRequired,
-  setCurrency: PropTypes.func.isRequired,
-  setWalletCurrencyFilters: PropTypes.func.isRequired
+  setCurrency: PropTypes.func.isRequired
 }

 export default Wallet
--- a/app/components/Wallet/Wallet.scss
+++ b/app/components/Wallet/Wallet.scss
@ -3,176 +3,27 @@
 .wallet {
  background: var(--lightBackground);
  color: var(--primaryText);
-  transition: background 0.25s;
-  height: 150px;
+  height: 180px;
  padding: 20px 40px;
 }

-.header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .logo span {
-    line-height: 24px;
-
-    svg {
-      width: 64px;
-      height: 24px;
-      vertical-align: top;
-    }
-  }
-
-  .testnetPill {
-    margin-left: 10px;
-    font-size: 10px;
-    border-radius: 100px;
-    color: rgb(57, 230, 115);
-  }
-
-  .user {
-    position: relative;
-    cursor: pointer;
-    transition: all 0.25s;
-
-    .aliasText:hover {
-      opacity: 0.5;
-    }
-  }
-}
-
-.left,
-.right {
-  display: inline-block;
-  vertical-align: top;
-  width: 50%;
-  height: 150px;
+.user {
+  position: relative;
+  cursor: pointer;
+  transition: all 0.25s;

-  .leftContent,
-  .rightContent {
-    padding: 25px 0;
+  .aliasText:hover {
+    opacity: 0.5;
  }
 }

-.leftContent {
-  display: flex;
-  flex-direction: row;
-
-  .qrCode {
-    cursor: pointer;
-  }
-
-  .qrCode svg {
+.qrCode {
+  cursor: pointer;
+  svg {
    g {
      fill: var(--gray);
    }
  }
-
-  .details {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    h1 {
-      display: flex;
-      flex-direction: row;
-
-      span:nth-child(1) {
-        font-size: 24px;
-        line-height: 32px;
-        font-weight: 500;
-        margin-left: 10px;
-        margin-bottom: 5px;
-        letter-spacing: 1.5px;
-      }
-
-      span:nth-child(2) svg {
-        color: var(--primaryText);
-        width: 20px;
-        height: 32px;
-        opacity: 1;
-        margin-left: 5px;
-        cursor: pointer;
-        transition: all 0.25s;
-
-        &:hover {
-          opacity: 0.5;
-        }
-      }
-
-      .currency {
-        margin-left: 2.5px;
-      }
-
-      .currencyContainer {
-        position: relative;
-        display: inline-block;
-
-        svg {
-          width: 25px;
-          height: 32px;
-          color: var(--white);
-        }
-
-        ul {
-          visibility: hidden;
-          position: absolute;
-          top: 30px;
-
-          &.active {
-            visibility: visible;
-          }
-
-          li {
-            font-size: 12px;
-            padding: 0 15px;
-            background: var(--lightestBackground);
-            cursor: pointer;
-            transition: 0.25s hover;
-
-            &:hover {
-              background: var(--darkestBackground);
-            }
-          }
-        }
-      }
-    }
-
-    .tickerButtons {
-      display: flex;
-      flex-direction: row;
-
-      section {
-        margin: 5px;
-        font-size: 10px;
-        border-radius: 5px;
-        border: 1px solid var(--white);
-        padding: 5px 10px;
-        cursor: pointer;
-        opacity: 0.5;
-        transition: 0.25s all;
-
-        &.active {
-          background: $main;
-          color: $spaceborder;
-          border-color: $spaceborder;
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  svg {
-    font-size: 100px;
-    color: $main;
-  }
-}
-
-.rightContent {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: right;
 }

 .notificationBox {
--- a/app/containers/Activity.js
+++ b/app/containers/Activity.js
@ -20,7 +20,6 @@ import {
 import { walletAddress, openWalletModal } from 'reducers/address'
 import { setFormType } from 'reducers/form'
 import { payFormSelectors } from 'reducers/payform'
-import { setWalletCurrencyFilters } from 'reducers/info'
 import { setSettingsOpen, setActiveSubMenu, disableSubMenu } from 'reducers/settings'
 import { setTheme, themeSelectors } from 'reducers/theme'

@ -47,7 +46,6 @@ const mapDispatchToProps = {
  updateSearchActive,
  updateSearchText,
  setFormType,
-  setWalletCurrencyFilters,
  setSettingsOpen,
  setActiveSubMenu,
  disableSubMenu,
@ -76,7 +74,7 @@ const mapStateToProps = state => ({
  invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state),

  currentTicker: tickerSelectors.currentTicker(state),
-  currentCurrencyFilters: tickerSelectors.currentCurrencyFilters(state),
+  currencyFilters: tickerSelectors.currencyFilters(state),

  currencyName: tickerSelectors.currencyName(state),

@ -101,14 +99,13 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
    showPayLoadingScreen: stateProps.showPayLoadingScreen,
    showSuccessPayScreen: stateProps.payment.showSuccessPayScreen,
    successTransactionScreen: stateProps.transaction.successTransactionScreen,
-    currentCurrencyFilters: stateProps.currentCurrencyFilters,
+    currencyFilters: stateProps.currencyFilters,
    currencyName: stateProps.currencyName,
    network: stateProps.info.network,
    paymentTimeout: stateProps.payment.paymentTimeout,
    theme: stateProps.currentTheme,

    setCurrency: dispatchProps.setCurrency,
-    setWalletCurrencyFilters: dispatchProps.setWalletCurrencyFilters,
    walletAddress: dispatchProps.walletAddress,
    openReceiveModal: dispatchProps.openWalletModal,
    openPayForm: () => dispatchProps.setFormType('PAY_FORM'),
--- a/app/containers/App.js
+++ b/app/containers/App.js
@ -9,19 +9,8 @@ import { setCurrency, tickerSelectors, fetchTicker } from 'reducers/ticker'
 import { closeWalletModal } from 'reducers/address'
 import { fetchInfo, infoSelectors } from 'reducers/info'
 import { setFormType } from 'reducers/form'
-import {
-  setPayAmount,
-  setPayInput,
-  setCurrencyFilters,
-  updatePayErrors,
-  payFormSelectors
-} from 'reducers/payform'
-import {
-  setRequestAmount,
-  setRequestMemo,
-  setRequestCurrencyFilters,
-  requestFormSelectors
-} from 'reducers/requestform'
+import { setPayAmount, setPayInput, updatePayErrors, payFormSelectors } from 'reducers/payform'
+import { setRequestAmount, setRequestMemo, requestFormSelectors } from 'reducers/requestform'
 import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
 import { createInvoice, fetchInvoice } from 'reducers/invoice'
@ -51,17 +40,12 @@ import {
  updateContactCapacity,
  setNode,
  contactFormSelectors,
-  updateManualFormErrors,
-  setContactsCurrencyFilters
+  updateManualFormErrors
 } from 'reducers/contactsform'
 import { fetchBalance } from 'reducers/balance'
 import { fetchDescribeNetwork } from 'reducers/network'
 import { clearError } from 'reducers/error'
-import {
-  hideActivityModal,
-  setActivityModalCurrencyFilters,
-  activitySelectors
-} from 'reducers/activity'
+import { hideActivityModal, activitySelectors } from 'reducers/activity'

 import App from 'components/App'
 import withLoading from 'components/withLoading'
@ -73,11 +57,9 @@ const mapDispatchToProps = {
  setFormType,
  setPayAmount,
  setPayInput,
-  setCurrencyFilters,
  updatePayErrors,
  setRequestAmount,
  setRequestMemo,
-  setRequestCurrencyFilters,
  sendCoins,
  payInvoice,
  createInvoice,
@ -105,11 +87,9 @@ const mapDispatchToProps = {
  setNode,
  contactFormSelectors,
  updateManualFormErrors,
-  setContactsCurrencyFilters,
  setChannelFormType,
  fetchDescribeNetwork,
-  hideActivityModal,
-  setActivityModalCurrencyFilters
+  hideActivityModal
 }

 const mapStateToProps = state => ({
@ -142,7 +122,7 @@ const mapStateToProps = state => ({
  currentTheme: themeSelectors.currentTheme(state),

  currentTicker: tickerSelectors.currentTicker(state),
-  currentCurrencyFilters: tickerSelectors.currentCurrencyFilters(state),
+  currencyFilters: tickerSelectors.currencyFilters(state),
  currencyName: tickerSelectors.currencyName(state),

  isOnchain: payFormSelectors.isOnchain(state),
@ -186,12 +166,11 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
    showPayLoadingScreen: stateProps.showPayLoadingScreen,
    payFormIsValid: stateProps.payFormIsValid,
    payInputMin: stateProps.payInputMin,
-    currentCurrencyFilters: stateProps.currentCurrencyFilters,
+    currencyFilters: stateProps.currencyFilters,
    currencyName: stateProps.currencyName,

    setPayAmount: dispatchProps.setPayAmount,
    setPayInput: dispatchProps.setPayInput,
-    setCurrencyFilters: dispatchProps.setCurrencyFilters,
    fetchInvoice: dispatchProps.fetchInvoice,
    setCurrency: dispatchProps.setCurrency,

@ -250,15 +229,13 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
    requestform: stateProps.requestform,
    ticker: stateProps.ticker,

-    currentCurrencyFilters: stateProps.currentCurrencyFilters,
-    showCurrencyFilters: stateProps.showCurrencyFilters,
+    currencyFilters: stateProps.currencyFilters,
    currencyName: stateProps.currencyName,
    requestFiatAmount: stateProps.requestFiatAmount,

    setRequestAmount: dispatchProps.setRequestAmount,
    setRequestMemo: dispatchProps.setRequestMemo,
    setCurrency: dispatchProps.setCurrency,
-    setRequestCurrencyFilters: dispatchProps.setRequestCurrencyFilters,

    onRequestSubmit: () =>
      dispatchProps.createInvoice(
@ -349,16 +326,9 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
    hideActivityModal: dispatchProps.hideActivityModal,

    toggleCurrencyProps: {
-      currentCurrencyFilters: stateProps.currentCurrencyFilters,
+      currencyFilters: stateProps.currencyFilters,
      currencyName: stateProps.currencyName,
-      showCurrencyFilters: stateProps.activity.modal.showCurrencyFilters,
-
-      setActivityModalCurrencyFilters: dispatchProps.setActivityModalCurrencyFilters,
-      setCurrencyFilters: dispatchProps.setCurrencyFilters,
-      onCurrencyFilterClick: currency => {
-        dispatchProps.setCurrency(currency)
-        dispatchProps.setActivityModalCurrencyFilters(false)
-      }
+      setCurrency: dispatchProps.setCurrency
    }
  }

@ -388,19 +358,15 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
    ticker: stateProps.ticker,

    toggleCurrencyProps: {
-      currentCurrencyFilters: stateProps.currentCurrencyFilters,
+      currencyFilters: stateProps.currencyFilters,
      currencyName: stateProps.currencyName,
-      showCurrencyFilters: stateProps.contactsform.showCurrencyFilters,
      contactFormFiatAmount: stateProps.contactFormFiatAmount,
-
-      setContactsCurrencyFilters: dispatchProps.setContactsCurrencyFilters,
-      setCurrencyFilters: dispatchProps.setCurrencyFilters,
+      setCurrency: dispatchProps.setCurrency,
      onCurrencyFilterClick: currency => {
        dispatchProps.updateContactCapacity(
          btc.convert(stateProps.ticker.currency, currency, stateProps.contactsform.contactCapacity)
        )
        dispatchProps.setCurrency(currency)
-        dispatchProps.setContactsCurrencyFilters(false)
      }
    }
  }
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@ -14,8 +14,7 @@ const initialState = {
  ],
  modal: {
    itemType: null,
-    itemId: null,
-    showCurrencyFilters: false
+    itemId: null
  },
  searchActive: false,
  searchText: '',
@ -34,8 +33,6 @@ export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN'

 export const TOGGLE_EXPIRED_REQUESTS = 'TOGGLE_EXPIRED_REQUESTS'

-export const SET_ACTIVITY_MODAL_CURRENCY_FILTERS = 'SET_ACTIVITY_MODAL_CURRENCY_FILTERS'
-
 export const UPDATE_SEARCH_ACTIVE = 'UPDATE_SEARCH_ACTIVE'
 export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'

@ -83,13 +80,6 @@ export function updateSearchText(searchText) {
  }
 }

-export function setActivityModalCurrencyFilters(showCurrencyFilters) {
-  return {
-    type: SET_ACTIVITY_MODAL_CURRENCY_FILTERS,
-    showCurrencyFilters
-  }
-}
-
 export function toggleExpiredRequests() {
  return {
    type: TOGGLE_EXPIRED_REQUESTS
@ -112,15 +102,6 @@ const ACTION_HANDLERS = {
    showExpiredRequests: !state.showExpiredRequests
  }),

-  [SET_ACTIVITY_MODAL_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({
-    ...state,
-    modal: {
-      itemType: state.modal.itemType,
-      itemId: state.modal.itemId,
-      showCurrencyFilters
-    }
-  }),
-
  [UPDATE_SEARCH_ACTIVE]: (state, { searchActive }) => ({ ...state, searchActive }),
  [UPDATE_SEARCH_TEXT]: (state, { searchText }) => ({ ...state, searchText })
 }
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@ -19,9 +19,7 @@ const initialState = {
  },

  manualFormOpen: false,
-  submitChannelFormOpen: false,
-
-  showCurrencyFilters: false
+  submitChannelFormOpen: false
 }

 // Constants
@ -50,8 +48,6 @@ export const UPDATE_MANUAL_FORM_ERRORS = 'UPDATE_MANUAL_FORM_ERRORS'

 export const UPDATE_MANUAL_FORM_SEARCH_QUERY = 'UPDATE_MANUAL_FORM_SEARCH_QUERY'

-export const SET_CONTACTS_CURRENCY_FILTERS = 'SET_CONTACTS_CURRENCY_FILTERS'
-
 // ------------------------------------
 // Actions
 // ------------------------------------
@ -145,13 +141,6 @@ export function updateManualFormErrors(errorsObject) {
  }
 }

-export function setContactsCurrencyFilters(showCurrencyFilters) {
-  return {
-    type: SET_CONTACTS_CURRENCY_FILTERS,
-    showCurrencyFilters
-  }
-}
-
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
@ -183,11 +172,6 @@ const ACTION_HANDLERS = {
  [UPDATE_MANUAL_FORM_SEARCH_QUERY]: (state, { manualSearchQuery }) => ({
    ...state,
    manualSearchQuery
-  }),
-
-  [SET_CONTACTS_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({
-    ...state,
-    showCurrencyFilters
  })
 }

--- a/app/reducers/info.js
+++ b/app/reducers/info.js
@ -8,7 +8,6 @@ import { walletAddress } from './address'
 // ------------------------------------
 export const GET_INFO = 'GET_INFO'
 export const RECEIVE_INFO = 'RECEIVE_INFO'
-export const SET_WALLET_CURRENCY_FILTERS = 'SET_WALLET_CURRENCY_FILTERS'
 export const SET_HAS_SYNCED = 'SET_HAS_SYNCED'

 // ------------------------------------
@ -20,13 +19,6 @@ export function getInfo() {
  }
 }

-export function setWalletCurrencyFilters(showWalletCurrencyFilters) {
-  return {
-    type: SET_WALLET_CURRENCY_FILTERS,
-    showWalletCurrencyFilters
-  }
-}
-
 export const setHasSynced = hasSynced => {
  return {
    type: SET_HAS_SYNCED,
@ -85,10 +77,6 @@ const ACTION_HANDLERS = {
    infoLoading: false,
    network: data.testnet ? networks.testnet : networks.mainnet,
    data
-  }),
-  [SET_WALLET_CURRENCY_FILTERS]: (state, { showWalletCurrencyFilters }) => ({
-    ...state,
-    showWalletCurrencyFilters
  })
 }

@ -99,8 +87,7 @@ const initialState = {
  infoLoading: false,
  hasSynced: undefined,
  network: {},
-  data: {},
-  showWalletCurrencyFilters: false
+  data: {}
 }

 // Selectors
--- a/app/reducers/payform.js
+++ b/app/reducers/payform.js
@ -18,8 +18,6 @@ const initialState = {
    destination: ''
  },

-  showCurrencyFilters: false,
-
  showErrors: {
    amount: false,
    payInput: false
@ -31,11 +29,7 @@ const initialState = {
 export const SET_PAY_AMOUNT = 'SET_PAY_AMOUNT'
 export const SET_PAY_INPUT = 'SET_PAY_INPUT'
 export const SET_PAY_INVOICE = 'SET_PAY_INVOICE'
-
-export const SET_PAY_CURRENCY_FILTERS = 'SET_PAY_CURRENCY_FILTERS'
-
 export const UPDATE_PAY_ERRORS = 'UPDATE_PAY_ERRORS'
-
 export const RESET_FORM = 'RESET_FORM'

 // ------------------------------------
@ -62,13 +56,6 @@ export function setPayInvoice(invoice) {
  }
 }

-export function setCurrencyFilters(showCurrencyFilters) {
-  return {
-    type: SET_PAY_CURRENCY_FILTERS,
-    showCurrencyFilters
-  }
-}
-
 export function updatePayErrors(errorsObject) {
  return {
    type: UPDATE_PAY_ERRORS,
@ -108,10 +95,6 @@ const ACTION_HANDLERS = {
    invoice,
    showErrors: Object.assign(state.showErrors, { amount: false })
  }),
-  [SET_PAY_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({
-    ...state,
-    showCurrencyFilters
-  }),

  [UPDATE_PAY_ERRORS]: (state, { errorsObject }) => ({
    ...state,
--- a/app/reducers/requestform.js
+++ b/app/reducers/requestform.js
@ -5,8 +5,7 @@ import { tickerSelectors } from './ticker'
 // Initial State
 const initialState = {
  amount: '',
-  memo: '',
-  showCurrencyFilters: false
+  memo: ''
 }

 // Constants
@ -14,9 +13,6 @@ const initialState = {
 export const SET_REQUEST_AMOUNT = 'SET_REQUEST_AMOUNT'
 export const SET_REQUEST_MEMO = 'SET_REQUEST_MEMO'
 export const SET_PAY_INVOICE = 'SET_PAY_INVOICE'
-
-export const SET_REQUEST_CURRENCY_FILTERS = 'SET_REQUEST_CURRENCY_FILTERS'
-
 export const RESET_FORM = 'RESET_FORM'

 // ------------------------------------
@ -42,24 +38,12 @@ export function resetRequestForm() {
  }
 }

-export function setRequestCurrencyFilters(showCurrencyFilters) {
-  return {
-    type: SET_REQUEST_CURRENCY_FILTERS,
-    showCurrencyFilters
-  }
-}
-
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
  [SET_REQUEST_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
  [SET_REQUEST_MEMO]: (state, { memo }) => ({ ...state, memo }),
-  [SET_REQUEST_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({
-    ...state,
-    showCurrencyFilters
-  }),
-
  [RESET_FORM]: () => initialState
 }

--- a/app/reducers/ticker.js
+++ b/app/reducers/ticker.js
@ -92,13 +92,14 @@ const ACTION_HANDLERS = {
 // Selectors
 const tickerSelectors = {}
 const cryptoSelector = state => state.ticker.crypto
-const currencyFiltersSelector = state => state.ticker.currencyFilters
 const currencySelector = state => state.ticker.currency
+const currencyFiltersSelector = state => state.ticker.currencyFilters
 const bitcoinTickerSelector = state => state.ticker.btcTicker
 const litecoinTickerSelector = state => state.ticker.ltcTicker
-const tickerLoading = state => state.ticker.tickerLoading
+const tickerLoadingSelector = state => state.ticker.tickerLoading

-tickerSelectors.tickerLoading = tickerLoading
+tickerSelectors.currency = currencySelector
+tickerSelectors.tickerLoading = tickerLoadingSelector

 tickerSelectors.currentTicker = createSelector(
  cryptoSelector,
@ -107,25 +108,30 @@ tickerSelectors.currentTicker = createSelector(
  (crypto, btcTicker, ltcTicker) => (crypto === 'btc' ? btcTicker : ltcTicker)
 )

-tickerSelectors.currentCurrencyFilters = createSelector(
-  currencySelector,
+tickerSelectors.currencyFilters = createSelector(
+  infoSelectors.networkSelector,
  currencyFiltersSelector,
-  (currency, filters) => filters.filter(f => f.key !== currency)
+  (network, currencyFilters = []) => {
+    if (!network || !network.unitPrefix) {
+      return currencyFilters
+    }
+    return currencyFilters.map(item => {
+      item.name = `${network.unitPrefix}${item.name}`
+      return item
+    })
+  }
 )

 tickerSelectors.currencyName = createSelector(
  currencySelector,
-  infoSelectors.networkSelector,
-  (currency, network) => {
+  tickerSelectors.currencyFilters,
+  (currency, currencyFilters = []) => {
    let unit = currency
-    if (currency === 'btc') {
-      unit = 'BTC'
+    const selectedCurrency = currencyFilters.find(c => c.key === currency)
+    if (selectedCurrency) {
+      unit = selectedCurrency.name
    }
-    if (currency === 'sats') {
-      unit = 'satoshis'
-    }
-
-    return `${network.unitPrefix}${unit}`
+    return unit
  }
 )

--- a/test/unit/components/Form.spec.js
+++ b/test/unit/components/Form.spec.js
@ -29,12 +29,11 @@ const payFormProps = {
  inputCaption: '',
  showPayLoadingScreen: true,
  payFormIsValid: {},
-  currentCurrencyFilters: [],
+  currencyFilters: [],
  currencyName: '',

  setPayAmount: () => {},
  setPayInput: () => {},
-  setCurrencyFilters: () => {},
  fetchInvoice: () => {},
  setCurrency: () => {},

@ -49,15 +48,13 @@ const requestFormProps = {
  requestform: {},
  ticker: {},

-  currentCurrencyFilters: [],
-  showCurrencyFilters: true,
+  currencyFilters: [],
  currencyName: '',
  requestFiatAmount: '',

  setRequestAmount: () => {},
  setRequestMemo: () => {},
  setCurrency: () => {},
-  setRequestCurrencyFilters: () => {},

  onRequestSubmit: () => {}
 }
--- a/test/unit/components/Form/Pay.spec.js
+++ b/test/unit/components/Form/Pay.spec.js
@ -2,8 +2,9 @@ import React from 'react'
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import 'jest-styled-components'
+import { ThemeProvider } from 'styled-components'
 import Pay from 'components/Form/Pay'
-import { dark as theme } from 'themes'
+import { dark } from 'themes'
 import { mountWithIntl } from '../../__helpers__/intl-enzyme-test-helper'

 configure({ adapter: new Adapter() })
@ -30,12 +31,11 @@ const defaultProps = {
  inputCaption: '',
  showPayLoadingScreen: true,
  payFormIsValid: {},
-  currentCurrencyFilters: [],
+  currencyFilters: [],
  currencyName: '',

  setPayAmount: () => {},
  setPayInput: () => {},
-  setCurrencyFilters: () => {},
  fetchInvoice: () => {},
  setCurrency: () => {},

@ -48,7 +48,11 @@ const defaultProps = {

 describe('Form', () => {
  describe('should show the form without an input', () => {
-    const el = mountWithIntl(<Pay {...defaultProps} theme={theme} />)
+    const el = mountWithIntl(
+      <ThemeProvider theme={dark}>
+        <Pay {...defaultProps} />
+      </ThemeProvider>
+    )

    it('should contain Pay', () => {
      expect(el.find('input#paymentRequest').props.value).toBe(undefined)
@ -57,7 +61,11 @@ describe('Form', () => {

  describe('should show lightning with a lightning input', () => {
    const props = { ...defaultProps, isLn: true }
-    const el = mountWithIntl(<Pay {...props} theme={theme} />)
+    const el = mountWithIntl(
+      <ThemeProvider theme={dark}>
+        <Pay {...props} />
+      </ThemeProvider>
+    )

    it('should contain Pay', () => {
      expect(el.find('input#paymentRequest').props.value).toBe(undefined)
@ -66,7 +74,11 @@ describe('Form', () => {

  describe('should show on-chain with an on-chain input', () => {
    const props = { ...defaultProps, isOnchain: true }
-    const el = mountWithIntl(<Pay {...props} theme={theme} />)
+    const el = mountWithIntl(
+      <ThemeProvider theme={dark}>
+        <Pay {...props} />
+      </ThemeProvider>
+    )

    it('should contain Pay', () => {
      expect(el.find('input#paymentRequest').props.value).toBe(undefined)
--- a/test/unit/components/Form/Request.spec.js
+++ b/test/unit/components/Form/Request.spec.js
@ -1,9 +1,9 @@
 import React from 'react'
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-
+import { ThemeProvider } from 'styled-components'
 import Request from 'components/Form/Request'
-
+import { dark } from 'themes'
 import { mountWithIntl } from '../../__helpers__/intl-enzyme-test-helper'

 configure({ adapter: new Adapter() })
@ -15,15 +15,13 @@ const defaultProps = {
    fiatTicker: 'USD'
  },

-  currentCurrencyFilters: [],
-  showCurrencyFilters: true,
+  currencyFilters: [],
  currencyName: '',
  requestFiatAmount: '',

  setRequestAmount: () => {},
  setRequestMemo: () => {},
  setCurrency: () => {},
-  setRequestCurrencyFilters: () => {},

  onRequestSubmit: () => {}
 }
@ -31,7 +29,11 @@ const defaultProps = {
 describe('Form', () => {
  describe('should show request form when formType is REQUEST_FORM', () => {
    const props = { ...defaultProps }
-    const el = mountWithIntl(<Request {...props} />)
+    const el = mountWithIntl(
+      <ThemeProvider theme={dark}>
+        <Request {...props} />
+      </ThemeProvider>
+    )
    it('should contain Request', () => {
      expect(el.contains('Request Payment')).toBe(true)
    })
--- a/test/unit/reducers/snapshots/activity.spec.js.snap
+++ b/test/unit/reducers/snapshots/activity.spec.js.snap
@ -25,7 +25,6 @@ Object {
  "modal": Object {
    "itemId": null,
    "itemType": null,
-    "showCurrencyFilters": false,
  },
  "searchActive": false,
  "searchText": "",
@ -68,42 +67,6 @@ Object {
 }
 `;

-exports[`reducers activityReducer should correctly setActivityModalCurrencyFilters 1`] = `
-Object {
-  "filter": Object {
-    "key": "ALL_ACTIVITY",
-    "name": "All Activity",
-  },
-  "filterPulldown": false,
-  "filters": Array [
-    Object {
-      "key": "ALL_ACTIVITY",
-      "name": "all",
-    },
-    Object {
-      "key": "SENT_ACTIVITY",
-      "name": "sent",
-    },
-    Object {
-      "key": "REQUESTED_ACTIVITY",
-      "name": "requested",
-    },
-    Object {
-      "key": "PENDING_ACTIVITY",
-      "name": "pending",
-    },
-  ],
-  "modal": Object {
-    "itemId": null,
-    "itemType": null,
-    "showCurrencyFilters": undefined,
-  },
-  "searchActive": false,
-  "searchText": "",
-  "showExpiredRequests": false,
-}
-`;
-
 exports[`reducers activityReducer should correctly showActivityModal 1`] = `
 Object {
  "filter": Object {
@ -167,7 +130,6 @@ Object {
  "modal": Object {
    "itemId": null,
    "itemType": null,
-    "showCurrencyFilters": false,
  },
  "searchActive": false,
  "searchText": "",
@ -203,7 +165,6 @@ Object {
  "modal": Object {
    "itemId": null,
    "itemType": null,
-    "showCurrencyFilters": false,
  },
  "searchActive": undefined,
  "searchText": "",
@ -239,7 +200,6 @@ Object {
  "modal": Object {
    "itemId": null,
    "itemType": null,
-    "showCurrencyFilters": false,
  },
  "searchActive": false,
  "searchText": undefined,
--- a/test/unit/reducers/snapshots/info.spec.js.snap
+++ b/test/unit/reducers/snapshots/info.spec.js.snap
@ -6,7 +6,6 @@ Object {
  "hasSynced": undefined,
  "infoLoading": true,
  "network": Object {},
-  "showWalletCurrencyFilters": false,
 }
 `;

@ -32,7 +31,6 @@ Object {
    "name": null,
    "unitPrefix": "",
  },
-  "showWalletCurrencyFilters": false,
 }
 `;

@ -42,6 +40,5 @@ Object {
  "hasSynced": undefined,
  "infoLoading": false,
  "network": Object {},
-  "showWalletCurrencyFilters": false,
 }
 `;
--- a/test/unit/reducers/activity.spec.js
+++ b/test/unit/reducers/activity.spec.js
@ -3,7 +3,6 @@ import activityReducer, {
  HIDE_ACTIVITY_MODAL,
  CHANGE_FILTER,
  TOGGLE_PULLDOWN,
-  SET_ACTIVITY_MODAL_CURRENCY_FILTERS,
  UPDATE_SEARCH_ACTIVE,
  UPDATE_SEARCH_TEXT
 } from 'reducers/activity'
@ -26,10 +25,6 @@ describe('reducers', () => {
      expect(TOGGLE_PULLDOWN).toEqual('TOGGLE_PULLDOWN')
    })

-    it('should have SET_ACTIVITY_MODAL_CURRENCY_FILTERS', () => {
-      expect(SET_ACTIVITY_MODAL_CURRENCY_FILTERS).toEqual('SET_ACTIVITY_MODAL_CURRENCY_FILTERS')
-    })
-
    it('should have UPDATE_SEARCH_ACTIVE', () => {
      expect(UPDATE_SEARCH_ACTIVE).toEqual('UPDATE_SEARCH_ACTIVE')
    })
@ -58,12 +53,6 @@ describe('reducers', () => {
      ).toMatchSnapshot()
    })

-    it('should correctly setActivityModalCurrencyFilters', () => {
-      expect(
-        activityReducer(undefined, { type: SET_ACTIVITY_MODAL_CURRENCY_FILTERS })
-      ).toMatchSnapshot()
-    })
-
    it('should correctly updateSearchActive', () => {
      expect(activityReducer(undefined, { type: UPDATE_SEARCH_ACTIVE })).toMatchSnapshot()
    })