Merge pull request #639 from LN-Zap/feature/multiple-fiat-currency-su…

…pport Feature/multiple fiat currency support
LN-Zap · Aug 26, 2018 · f5afb7f · f5afb7f
2 parents f9f1a53 + 59a6471
commit f5afb7f
Show file tree

Hide file tree

Showing 43 changed files with 678 additions and 88 deletions.
diff --git a/app/components/Activity/InvoiceModal.js b/app/components/Activity/InvoiceModal.js
@@ -58,6 +58,7 @@ const InvoiceModal = ({
                   value={invoice.finalAmount}
                   currency={ticker.currency}
                   currentTicker={currentTicker}
+                  fiatTicker={ticker.fiatTicker}
                 />
               </h1>
               <section

diff --git a/app/components/Activity/PaymentModal.js b/app/components/Activity/PaymentModal.js
@@ -38,7 +38,12 @@ const PaymentModal = ({
           <span className={styles.zap}>Lightning Network</span>
         </div>
         <div>
-          <Value value={payment.fee} currency={ticker.currency} currentTicker={currentTicker} />
+          <Value
+            value={payment.fee}
+            currency={ticker.currency}
+            currentTicker={currentTicker}
+            fiatTicker={ticker.fiatTicker}
+          />
           <span> {currencyName} fee</span>
         </div>
       </section>
@@ -47,7 +52,12 @@ const PaymentModal = ({
     <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} />
+        <Value
+          value={payment.value}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+          fiatTicker={ticker.fiatTicker}
+        />
       </h1>
       <section
         className={styles.currentCurrency}

diff --git a/app/components/Activity/TransactionModal.js b/app/components/Activity/TransactionModal.js
@@ -57,6 +57,7 @@ const TransactionModal = ({
             value={transaction.total_fees}
             currency={ticker.currency}
             currentTicker={currentTicker}
+            fiatTicker={ticker.fiatTicker}
           />
           <span> {currencyName} fee</span>
         </div>
@@ -72,6 +73,7 @@ const TransactionModal = ({
           value={transaction.amount}
           currency={ticker.currency}
           currentTicker={currentTicker}
+          fiatTicker={ticker.fiatTicker}
         />
       </h1>
       <section

diff --git a/app/components/Contacts/Network.js b/app/components/Contacts/Network.js
@@ -155,7 +155,10 @@ class Network extends Component {
       return 'online'
     }
 
-    const usdAmount = btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd)
+    const fiatAmount = btc.satoshisToFiat(
+      balance.channelBalance,
+      currentTicker[ticker.fiatTicker].last
+    )
     const { refreshing } = this.state
     return (
       <div className={styles.network}>
@@ -167,8 +170,11 @@ class Network extends Component {
                 value={balance.channelBalance}
                 currency={ticker.currency}
                 currentTicker={currentTicker}
+                fiatTicker={ticker.fiatTicker}
               />
-              {` ≈ $${usdAmount ? usdAmount.toLocaleString() : ''}`}
+              {` ≈ ${currentTicker[ticker.fiatTicker].symbol}${
+                fiatAmount ? fiatAmount.toLocaleString() : ''
+              }`}
             </span>
           </section>
           <section
@@ -296,6 +302,7 @@ class Network extends Component {
                               value={channel.local_balance}
                               currency={ticker.currency}
                               currentTicker={currentTicker}
+                              fiatTicker={ticker.fiatTicker}
                             />
                             <i> {currencyName}</i>
                           </p>
@@ -307,6 +314,7 @@ class Network extends Component {
                               value={channel.remote_balance}
                               currency={ticker.currency}
                               currentTicker={currentTicker}
+                              fiatTicker={ticker.fiatTicker}
                             />
                             <i>{ticker.currency.toUpperCase()}</i>
                           </p>

diff --git a/app/components/Contacts/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm.js
@@ -16,6 +16,7 @@ class SubmitChannelForm extends React.Component {
       contactCapacity,
       updateContactCapacity,
       openChannel,
+      fiatTicker,
 
       ticker,
 
@@ -25,7 +26,7 @@ class SubmitChannelForm extends React.Component {
         currencyName,
         currentCurrencyFilters,
         onCurrencyFilterClick,
-        contactFormUsdAmount
+        contactFormFiatAmount
       }
     } = this.props
 
@@ -102,7 +103,7 @@ class SubmitChannelForm extends React.Component {
             </div>
           </div>
 
-          <div className={styles.usdAmount}>{`≈ ${contactFormUsdAmount || 0} USD`}</div>
+          <div className={styles.fiatAmount}>{`≈ ${contactFormFiatAmount || 0} ${fiatTicker}`}</div>
         </section>
 
         <section className={styles.submit}>
@@ -126,6 +127,7 @@ SubmitChannelForm.propTypes = {
   contactCapacity: PropTypes.PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   updateContactCapacity: PropTypes.func.isRequired,
   openChannel: PropTypes.func.isRequired,
+  fiatTicker: PropTypes.string.isRequired,
 
   ticker: PropTypes.object.isRequired,
 

diff --git a/app/components/Contacts/SubmitChannelForm.scss b/app/components/Contacts/SubmitChannelForm.scss
@@ -112,7 +112,7 @@
   }
 }
 
-.usdAmount {
+.fiatAmount {
   margin-top: 20px;
   opacity: 0.5;
 }

diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js
@@ -40,7 +40,7 @@ class Pay extends Component {
       isOnchain,
       isLn,
       currentAmount,
-      usdAmount,
+      fiatAmount,
       payFormIsValid: { errors, isValid },
       currentCurrencyFilters,
       currencyName,
@@ -161,7 +161,7 @@ class Pay extends Component {
               </div>
             </div>
 
-            <div className={styles.usdAmount}>{`≈ ${usdAmount || 0} USD`}</div>
+            <div className={styles.fiatAmount}>{`≈ ${fiatAmount || 0} ${ticker.fiatTicker}`}</div>
 
             <section
               className={`${styles.errorMessage} ${styles.amount} ${
@@ -198,7 +198,7 @@ Pay.propTypes = {
   isOnchain: PropTypes.bool.isRequired,
   isLn: PropTypes.bool.isRequired,
   currentAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  usdAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   payFormIsValid: PropTypes.shape({
     errors: PropTypes.object,
     isValid: PropTypes.bool

diff --git a/app/components/Form/Pay.scss b/app/components/Form/Pay.scss
@@ -143,7 +143,7 @@
     }
   }
 
-  .usdAmount {
+  .fiatAmount {
     margin-top: 10px;
     opacity: 0.5;
     font-size: 14px;

diff --git a/app/components/Form/Request.js b/app/components/Form/Request.js
@@ -18,7 +18,7 @@ const Request = ({
   setCurrency,
   setRequestCurrencyFilters,
   currencyName,
-  requestUsdAmount,
+  requestFiatAmount,
 
   currentCurrencyFilters,
 
@@ -72,7 +72,9 @@ const Request = ({
             </div>
           </div>
 
-          <div className={styles.usdAmount}>{`≈ ${requestUsdAmount || 0} USD`}</div>
+          <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
+            ticker.fiatTicker
+          }`}</div>
         </section>
 
         <section className={styles.memo}>
@@ -109,7 +111,7 @@ Request.propTypes = {
     memo: PropTypes.string
   }).isRequired,
 
-  requestUsdAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   currencyName: PropTypes.string.isRequired,
 
   currentCurrencyFilters: PropTypes.array.isRequired,

diff --git a/app/components/Form/Request.scss b/app/components/Form/Request.scss
@@ -122,7 +122,7 @@
     }
   }
 
-  .usdAmount {
+  .fiatAmount {
     margin-top: 10px;
     opacity: 0.5;
     font-size: 14px;

diff --git a/app/components/Settings/Fiat.js b/app/components/Settings/Fiat.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FaAngleLeft from 'react-icons/lib/fa/angle-left'
+import Isvg from 'react-inlinesvg'
+import checkIcon from 'icons/check.svg'
+import styles from './Fiat.scss'
+
+const Fiat = ({ fiatTicker, fiatTickers, disableSubMenu, setFiatTicker }) => (
+  <div>
+    <header className={styles.submenuHeader} onClick={disableSubMenu}>
+      <FaAngleLeft />
+      <span>Fiat currency</span>
+    </header>
+    <ul className={styles.fiatTickers}>
+      {fiatTickers.map(ft => (
+        <li
+          key={ft}
+          className={fiatTicker === ft ? styles.active : ''}
+          onClick={() => setFiatTicker(ft)}
+        >
+          <span>{ft}</span>
+          {fiatTicker === ft && <Isvg src={checkIcon} />}
+        </li>
+      ))}
+    </ul>
+  </div>
+)
+
+Fiat.propTypes = {
+  fiatTicker: PropTypes.string.isRequired,
+  fiatTickers: PropTypes.array.isRequired,
+  disableSubMenu: PropTypes.func.isRequired,
+  setFiatTicker: PropTypes.func.isRequired
+}
+
+export default Fiat
diff --git a/app/components/Settings/Fiat.scss b/app/components/Settings/Fiat.scss
@@ -0,0 +1,42 @@
+@import '../../styles/variables.scss';
+
+.submenuHeader {
+  padding: 20px;
+  background: lighten(#1d1f27, 20%);
+  font-size: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  transition: all 0.25s;
+
+  &:hover {
+    background: lighten(#1d1f27, 10%);
+  }
+}
+
+.fiatTickers {
+  height: 300px;
+  overflow-y: scroll;
+
+  li {
+    background: #191919;
+    cursor: pointer;
+    border-bottom: 1px solid #0f0f0f;
+    transition: 0.25s hover;
+
+    &.active {
+      background: #0f0f0f;
+
+      svg {
+        height: 10px;
+        width: 10px;
+        color: $green;
+      }
+    }
+
+    span:nth-child(1) {
+      line-height: 12px;
+    }
+  }
+}
diff --git a/app/components/Settings/Menu.js b/app/components/Settings/Menu.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import FaAngleRight from 'react-icons/lib/fa/angle-right'
+import styles from './Menu.scss'
+
+const Menu = ({ setActiveSubMenu }) => (
+  <ul>
+    <li className={styles.fiat} onClick={() => setActiveSubMenu('fiat')}>
+      <span>Fiat Currency</span>
+      <FaAngleRight />
+    </li>
+  </ul>
+)
+
+Menu.propTypes = {
+  setActiveSubMenu: PropTypes.func.isRequired
+}
+
+export default Menu
diff --git a/app/components/Settings/Menu.scss b/app/components/Settings/Menu.scss
diff --git a/app/components/Settings/Settings.js b/app/components/Settings/Settings.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Menu from './Menu'
+import Fiat from './Fiat'
+import styles from './Settings.scss'
+
+class Settings extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.setWrapperRef = this.setWrapperRef.bind(this)
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+    this.renderSettings = this.renderSettings.bind(this)
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  }
+
+  // Set the wrapper ref
+  setWrapperRef(node) {
+    this.wrapperRef = node
+  }
+
+  // Alert if clicked on outside of element
+  handleClickOutside(event) {
+    const { toggleSettings, settings } = this.props
+
+    if (this.wrapperRef && !this.wrapperRef.contains(event.target) && settings.settingsOpen) {
+      // Do not toggle the settings if they user clicked on their alias
+      // as that will cause us to double toggle and re-open it
+      if (
+        typeof event.target.className === 'string' &&
+        event.target.className.includes('aliasText')
+      ) {
+        return
+      }
+
+      // The user clicked outside of the settings box and not on the
+      // alias so we should toggle the settings
+      toggleSettings()
+    }
+  }
+
+  renderSettings() {
+    const { settings, fiatProps, setActiveSubMenu } = this.props
+
+    switch (settings.activeSubMenu) {
+      case 'fiat':
+        return <Fiat {...fiatProps} />
+      default:
+        return <Menu setActiveSubMenu={setActiveSubMenu} />
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.container} ref={this.setWrapperRef}>
+        {this.renderSettings()}
+      </div>
+    )
+  }
+}
+
+Settings.propTypes = {
+  settings: PropTypes.object.isRequired,
+  setActiveSubMenu: PropTypes.func.isRequired,
+  toggleSettings: PropTypes.func.isRequired,
+  fiatProps: PropTypes.object.isRequired
+}
+
+export default Settings