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.

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: {
+  toggleCurrencyProps: { currencyFilters, setCurrency }
-    setActivityModalCurrencyFilters,
-    showCurrencyFilters,
-    currencyName,
-    currentCurrencyFilters,
-    onCurrencyFilterClick
-  }
 }) => {
   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>
+              <Dropdown
-              <section
+                activeKey={ticker.currency}
-                className={styles.currentCurrency}
+                items={currencyFilters}
-                onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}
+                onChange={setCurrency}
-              >
+                ml={2}
-                <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>
             </section>
             <section className={styles.date}>
               <p>

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);
-            }
-          }
-        }
       }
 
       .date {

app/components/Activity/PaymentModal/PaymentModal.js

@@ -1,16 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import Dropdown from 'components/UI/Dropdown'
-import FaAngleDown from 'react-icons/lib/fa/angle-down'
-
 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: {
+  toggleCurrencyProps: { currencyName, currencyFilters, setCurrency }
-    setActivityModalCurrencyFilters,
-    showCurrencyFilters,
-    currencyName,
-    currentCurrencyFilters,
-    onCurrencyFilterClick
-  }
 }) => (
   <div className={styles.container}>
     <header className={styles.header}>
@@ -55,7 +44,6 @@ const PaymentModal = ({
     </header>
 
     <div className={styles.amount}>
-      <h1>
       <i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
       <Value
         value={payment.value}
@@ -63,23 +51,7 @@ const PaymentModal = ({
         currentTicker={currentTicker}
         fiatTicker={ticker.fiatTicker}
       />
-      </h1>
+      <Dropdown activeKey={ticker.currency} items={currencyFilters} onChange={setCurrency} ml={2} />
-      <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>
     </div>
 
     <div className={styles.date}>

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);
-        }
-      }
-    }
-  }
 }
 
 .date {

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: {
+  toggleCurrencyProps: { currencyName, currencyFilters, setCurrency }
-    setActivityModalCurrencyFilters,
-    showCurrencyFilters,
-    currencyName,
-    currentCurrencyFilters,
-    onCurrencyFilterClick
-  }
 }) => (
   <div className={styles.container}>
     <header className={styles.header}>
@@ -72,7 +66,6 @@ const TransactionModal = ({
     </header>
 
     <div className={styles.amount}>
-      <h1>
       <i className={`${styles.symbol} ${transaction.received ? styles.active : undefined}`}>
         {transaction.received ? '+' : '-'}
       </i>
@@ -82,23 +75,7 @@ const TransactionModal = ({
         currentTicker={currentTicker}
         fiatTicker={ticker.fiatTicker}
       />
-      </h1>
+      <Dropdown activeKey={ticker.currency} items={currencyFilters} onChange={setCurrency} ml={2} />
-      <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>
     </div>
 
     <div className={styles.date}>

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);
-        }
-      }
-    }
-  }
 }
 
 .date {

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: {
+      toggleCurrencyProps: { currencyFilters, onCurrencyFilterClick, contactFormFiatAmount }
-        setContactsCurrencyFilters,
-        showCurrencyFilters,
-        currencyName,
-        currentCurrencyFilters,
-        onCurrencyFilterClick,
-        contactFormFiatAmount
-      }
     } = this.props
 
     const renderTitle = () => {
@@ -126,24 +119,12 @@ class SubmitChannelForm extends React.Component {
               onChangeEvent={updateContactCapacity}
               ref={this.amountInput}
             />
-            <div className={styles.currency}>
+            <Dropdown
-              <section
+              activeKey={ticker.currency}
-                className={styles.currentCurrency}
+              items={currencyFilters}
-                onClick={() => setContactsCurrencyFilters(!showCurrencyFilters)}
+              onChange={onCurrencyFilterClick}
-              >
+              ml={2}
-                <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>
           </div>
           <div className={styles.fiatAmount}>
             {'≈ '}

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;

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,
+      currencyFilters,
-      currencyName,
-
       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}>
+              <Dropdown
-                <section
+                activeKey={ticker.currency}
-                  className={styles.currentCurrency}
+                items={currencyFilters}
-                  onClick={() => setCurrencyFilters(!showCurrencyFilters)}
+                onChange={onCurrencyFilterClick}
-                >
+                ml={2}
-                  <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>
             </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)

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;

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,
-
+  currencyFilters,
-  currentCurrencyFilters,
-
   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}>
+            <Dropdown
-              <section
+              activeKey={ticker.currency}
-                className={styles.currentCurrency}
+              items={currencyFilters}
-                onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
+              onChange={onCurrencyFilterClick}
-              >
+              ml={2}
-                <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>
           </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,
-
+  currencyFilters: PropTypes.array.isRequired,
-  currentCurrencyFilters: 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
 }

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;

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,
+  currencyFilters,
-  currencyName,
   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}>
+      <Flex as="header" justifyContent="space-between">
-        <header className={styles.header}>
+        <Flex as="section" alignItems="center">
-          <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>}
+          {info.data.testnet && (
-          </section>
+            <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,60 +70,52 @@ const Wallet = ({
             </div>
             {settingsProps.settings.settingsOpen && <Settings {...settingsProps} />}
           </section>
-        </header>
+        </Box>
+      </Flex>
 
-        <div className={styles.left}>
+      <Flex as="header" justifyContent="space-between" mt={4}>
-          <div className={styles.leftContent}>
+        <Box as="section">
-            <span onClick={openReceiveModal} className={styles.qrCode}>
+          <Flex alignItems="baseline">
-              <Qrcode width="20px" height="32px" />
+            <Box onClick={openReceiveModal} className={styles.qrCode} mr={2}>
-            </span>
+              <Qrcode width="20px" height="20px" />
-            <div className={styles.details}>
+            </Box>
-              <h1>
+            <Flex flexDirection="column">
-                <span>
+              <Text fontSize="24px" letterSpacing={2}>
                 <Value
                   value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
                   currency={ticker.currency}
                   currentTicker={currentTicker}
                   fiatTicker={ticker.fiatTicker}
                 />
-                  <section className={styles.currencyContainer}>
+              </Text>
-                    <i className={styles.currency}>{currencyName}</i>
+            </Flex>
-                    <span onClick={() => setWalletCurrencyFilters(!info.showWalletCurrencyFilters)}>
+            <Dropdown
-                      <FaAngleDown />
+              activeKey={ticker.currency}
-                    </span>
+              items={currencyFilters}
-
+              onChange={setCurrency}
-                    <ul className={info.showWalletCurrencyFilters ? styles.active : undefined}>
+              ml={2}
-                      {currentCurrencyFilters.map(filter => (
+            />
-                        <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
+          </Flex>
-                          {filter.name}
+          <Box ml={30} mt={1}>
-                        </li>
-                      ))}
-                    </ul>
-                  </section>
-                </span>
-              </h1>
             {Boolean(fiatAmount) && (
               <span>
                 {'≈ '}
-                  <FormattedNumber
+                <FormattedNumber currency={ticker.fiatTicker} style="currency" value={fiatAmount} />
-                    currency={ticker.fiatTicker}
-                    style="currency"
-                    value={fiatAmount}
-                  />
               </span>
             )}
-            </div>
+          </Box>
-          </div>
+        </Box>
-        </div>
+        <Box as="section">
-        <div className={styles.right}>
+          <Button onClick={openPayForm} variant="primary" mx={7.5} width={100}>
-          <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}>
+          <Button onClick={openRequestForm} variant="primary" mx={7.5} width={100}>
             <FormattedMessage {...messages.request} />
           </Button>
-          </div>
+        </Box>
+      </Flex>
+
+      <Box mt={2}>
         <div className={styles.notificationBox}>
           {showPayLoadingScreen && (
             <span>
@@ -166,8 +156,7 @@ const Wallet = ({
             </span>
           )}
         </div>
-        </div>
+      </Box>
-      </div>
     </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,
+  setCurrency: PropTypes.func.isRequired
-  setWalletCurrencyFilters: PropTypes.func.isRequired
 }
 
 export default Wallet

app/components/Wallet/Wallet.scss

@@ -3,34 +3,11 @@
 .wallet {
   background: var(--lightBackground);
   color: var(--primaryText);
-  transition: background 0.25s;
+  height: 180px;
-  height: 150px;
   padding: 20px 40px;
 }
 
-.header {
+.user {
-  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;
@@ -38,141 +15,15 @@
   .aliasText:hover {
     opacity: 0.5;
   }
-  }
-}
-
-.left,
-.right {
-  display: inline-block;
-  vertical-align: top;
-  width: 50%;
-  height: 150px;
-
-  .leftContent,
-  .rightContent {
-    padding: 25px 0;
-  }
 }
 
-.leftContent {
+.qrCode {
-  display: flex;
-  flex-direction: row;
-
-  .qrCode {
   cursor: pointer;
-  }
+  svg {
-
-  .qrCode 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 {

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'),

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 {
+import { setPayAmount, setPayInput, updatePayErrors, payFormSelectors } from 'reducers/payform'
-  setPayAmount,
+import { setRequestAmount, setRequestMemo, requestFormSelectors } from 'reducers/requestform'
-  setPayInput,
-  setCurrencyFilters,
-  updatePayErrors,
-  payFormSelectors
-} from 'reducers/payform'
-import {
-  setRequestAmount,
-  setRequestMemo,
-  setRequestCurrencyFilters,
-  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,
+  updateManualFormErrors
-  setContactsCurrencyFilters
 } from 'reducers/contactsform'
 import { fetchBalance } from 'reducers/balance'
 import { fetchDescribeNetwork } from 'reducers/network'
 import { clearError } from 'reducers/error'
-import {
+import { hideActivityModal, activitySelectors } from 'reducers/activity'
-  hideActivityModal,
-  setActivityModalCurrencyFilters,
-  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,
+  hideActivityModal
-  setActivityModalCurrencyFilters
 }
 
 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,
+    currencyFilters: stateProps.currencyFilters,
-    showCurrencyFilters: stateProps.showCurrencyFilters,
     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,
+      setCurrency: dispatchProps.setCurrency
-
-      setActivityModalCurrencyFilters: dispatchProps.setActivityModalCurrencyFilters,
-      setCurrencyFilters: dispatchProps.setCurrencyFilters,
-      onCurrencyFilterClick: currency => {
-        dispatchProps.setCurrency(currency)
-        dispatchProps.setActivityModalCurrencyFilters(false)
-      }
     }
   }
 
@@ -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,
-
+      setCurrency: dispatchProps.setCurrency,
-      setContactsCurrencyFilters: dispatchProps.setContactsCurrencyFilters,
-      setCurrencyFilters: dispatchProps.setCurrencyFilters,
       onCurrencyFilterClick: currency => {
         dispatchProps.updateContactCapacity(
           btc.convert(stateProps.ticker.currency, currency, stateProps.contactsform.contactCapacity)
         )
         dispatchProps.setCurrency(currency)
-        dispatchProps.setContactsCurrencyFilters(false)
       }
     }
   }

app/reducers/activity.js

@@ -14,8 +14,7 @@ const initialState = {
   ],
   modal: {
     itemType: null,
-    itemId: null,
+    itemId: null
-    showCurrencyFilters: false
   },
   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 })
 }

app/reducers/contactsform.js

@@ -19,9 +19,7 @@ const initialState = {
   },
 
   manualFormOpen: false,
-  submitChannelFormOpen: false,
+  submitChannelFormOpen: false
-
-  showCurrencyFilters: 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
   })
 }
 

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: {},
+  data: {}
-  showWalletCurrencyFilters: false
 }
 
 // Selectors

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,

app/reducers/requestform.js

@@ -5,8 +5,7 @@ import { tickerSelectors } from './ticker'
 // Initial State
 const initialState = {
   amount: '',
-  memo: '',
+  memo: ''
-  showCurrencyFilters: false
 }
 
 // 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
 }
 

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

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: [],
+  currencyFilters: [],
-  showCurrencyFilters: true,
   currencyName: '',
   requestFiatAmount: '',
 
   setRequestAmount: () => {},
   setRequestMemo: () => {},
   setCurrency: () => {},
-  setRequestCurrencyFilters: () => {},
 
   onRequestSubmit: () => {}
 }

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)

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: [],
+  currencyFilters: [],
-  showCurrencyFilters: true,
   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)
     })

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,

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,
 }
 `;

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()
     })