fix(fiat): dynamic fiat symbol

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>

app/components/Contacts/SubmitChannelForm.js

@@ -16,6 +16,7 @@ class SubmitChannelForm extends React.Component {
       contactCapacity,
       updateContactCapacity,
       openChannel,
+      fiatTicker,
 
       ticker,
 
@@ -102,7 +103,7 @@ class SubmitChannelForm extends React.Component {
             </div>
           </div>
 
-          <div className={styles.usdAmount}>{`≈ ${contactFormUsdAmount || 0} USD`}</div>
+          <div className={styles.usdAmount}>{`≈ ${contactFormUsdAmount || 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,
 

app/components/Form/Pay.js

@@ -161,7 +161,7 @@ class Pay extends Component {
               </div>
             </div>
 
-            <div className={styles.usdAmount}>{`≈ ${usdAmount || 0} USD`}</div>
+            <div className={styles.usdAmount}>{`≈ ${usdAmount || 0} ${ticker.fiatTicker}`}</div>
 
             <section
               className={`${styles.errorMessage} ${styles.amount} ${

app/components/Form/Request.js

@@ -72,7 +72,9 @@ const Request = ({
             </div>
           </div>
 
-          <div className={styles.usdAmount}>{`≈ ${requestUsdAmount || 0} USD`}</div>
+          <div className={styles.usdAmount}>{`≈ ${requestUsdAmount || 0} ${
+            ticker.fiatTicker
+          }`}</div>
         </section>
 
         <section className={styles.memo}>

app/components/Settings/Fiat.scss

@@ -8,6 +8,11 @@
   flex-direction: row;
   justify-content: end;
   align-items: center;
+  transition: all 0.25s;
+
+  &:hover {
+    background: lighten(#1d1f27, 10%);
+  }
 }
 
 .fiatTickers {

app/components/Wallet/Wallet.js

@@ -94,7 +94,8 @@ const Wallet = ({
                 </span>
               </h1>
               <span className={styles.usdValue}>
-                ≈ ${usdAmount ? usdAmount.toLocaleString() : ''}
+                ≈ {currentTicker[ticker.fiatTicker].symbol}
+                {usdAmount ? usdAmount.toLocaleString() : ''}
               </span>
             </div>
           </div>

app/reducers/contactsform.js

@@ -200,6 +200,7 @@ const searchQuerySelector = state => state.contactsform.searchQuery
 const manualSearchQuerySelector = state => state.contactsform.manualSearchQuery
 const contactCapacitySelector = state => state.contactsform.contactCapacity
 const currencySelector = state => state.ticker.currency
+const fiatTickerSelector = state => state.ticker.fiatTicker
 
 const contactable = node => node.addresses.length > 0
 
@@ -274,12 +275,13 @@ contactFormSelectors.contactFormUsdAmount = createSelector(
   contactCapacitySelector,
   currencySelector,
   tickerSelectors.currentTicker,
-  (amount, currency, ticker) => {
-    if (!ticker || !ticker.price_usd) {
+  fiatTickerSelector,
+  (amount, currency, currentTicker, fiatTicker) => {
+    if (!currentTicker || !currentTicker[fiatTicker].last) {
       return false
     }
 
-    return btc.convert(currency, 'usd', amount, ticker.price_usd)
+    return btc.convert(currency, 'usd', amount, currentTicker[fiatTicker].last)
   }
 )
 

app/reducers/payform.js

@@ -137,6 +137,7 @@ const sendingPaymentSelector = state => state.payment.sendingPayment
 
 // ticker
 const currencySelector = state => state.ticker.currency
+const fiatTickerSelector = state => state.ticker.fiatTicker
 
 payFormSelectors.isOnchain = createSelector(
   payInputSelector,
@@ -193,16 +194,17 @@ payFormSelectors.usdAmount = createSelector(
   payInvoiceSelector,
   currencySelector,
   tickerSelectors.currentTicker,
-  (isLn, amount, invoice, currency, ticker) => {
-    if (!ticker || !ticker.price_usd) {
+  fiatTickerSelector,
+  (isLn, amount, invoice, currency, currentTicker, fiatTicker) => {
+    if (!currentTicker || !currentTicker[fiatTicker].last) {
       return false
     }
 
     if (isLn) {
-      return btc.satoshisToUsd(invoice.num_satoshis || 0, ticker.price_usd)
+      return btc.satoshisToUsd(invoice.num_satoshis || 0, currentTicker[fiatTicker].last)
     }
 
-    return btc.convert(currency, 'usd', amount, ticker.price_usd)
+    return btc.convert(currency, 'usd', amount, currentTicker[fiatTicker].last)
   }
 )
 

app/reducers/requestform.js

@@ -66,18 +66,19 @@ const ACTION_HANDLERS = {
 const requestFormSelectors = {}
 const requestAmountSelector = state => state.requestform.amount
 const currencySelector = state => state.ticker.currency
+const fiatTickerSelector = state => state.ticker.fiatTicker
 
 requestFormSelectors.usdAmount = createSelector(
   requestAmountSelector,
   currencySelector,
   tickerSelectors.currentTicker,
-
-  (amount, currency, ticker) => {
-    if (!ticker || !ticker.price_usd) {
+  fiatTickerSelector,
+  (amount, currency, currentTicker, fiatTicker) => {
+    if (!currentTicker || !currentTicker[fiatTicker].last) {
       return false
     }
 
-    return btc.convert(currency, 'usd', amount, ticker.price_usd)
+    return btc.convert(currency, 'usd', amount, currentTicker[fiatTicker].last)
   }
 )
 

app/routes/activity/components/components/Invoice/Invoice.js

@@ -49,7 +49,10 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
         <i> {currencyName}</i>
       </span>
       <span>
-        <span>${btc.convert('sats', 'usd', invoice.finalAmount, currentTicker.price_usd)}</span>
+        <span>
+          {currentTicker[ticker.fiatTicker].symbol}
+          {btc.convert('sats', 'usd', invoice.value, currentTicker[ticker.fiatTicker].last)}
+        </span>
       </span>
     </div>
   </div>

app/routes/activity/components/components/Payment/Payment.js

@@ -46,7 +46,10 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
           />
           <i> {currencyName}</i>
         </span>
-        <span>${btc.convert('sats', 'usd', payment.value, currentTicker.price_usd)}</span>
+        <span className="hint--bottom" data-hint="Payment fee">
+          {currentTicker[ticker.fiatTicker].symbol}
+          {btc.convert('sats', 'usd', payment.value, currentTicker[ticker.fiatTicker].last)}
+        </span>
       </div>
     </div>
   )

app/routes/activity/components/components/Transaction/Transaction.js

@@ -45,7 +45,10 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu
         />
         <i> {currencyName}</i>
       </span>
-      <span>${btc.convert('sats', 'usd', transaction.amount, currentTicker.price_usd)}</span>
+      <span className="hint--bottom" data-hint="Transaction fee">
+        {currentTicker[ticker.fiatTicker].symbol}
+        {btc.convert('sats', 'usd', transaction.amount, currentTicker[ticker.fiatTicker].last)}
+      </span>
     </div>
   </div>
 )

app/routes/app/containers/AppContainer.js

@@ -401,6 +401,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     submitChannelFormOpen: stateProps.contactsform.submitChannelFormOpen,
     node: stateProps.contactsform.node,
     contactCapacity: stateProps.contactsform.contactCapacity,
+    fiatTicker: stateProps.ticker.fiatTicker,
 
     updateContactCapacity: dispatchProps.updateContactCapacity,