feat(litecoin): add litecoin support

app/components/Icon/Lightning.js

@@ -11,9 +11,8 @@ const SvgLightning = props => (
     <g fill="none" fillRule="evenodd">
       <circle cx={25} cy={25} r={25} fill="url(#lightning_svg__a)" />
       <path
-        fill="currentColor"
-        fillRule="nonzero"
-        d="M22.999 39.764l.708-3.28 1.26-5.827.53-2.454c.044-.207-.094-.415-.316-.415h-7.85l.283.493 1.218-1.865 2.875-4.4 3.358-5.139 2.669-4.085.852-1.305-.599-.253-.709 3.28-1.259 5.824-.53 2.453c-.045.207.094.415.316.415h7.865l-.284-.493-1.22 1.866-2.878 4.4-3.362 5.141-2.673 4.086-.854 1.306c-.232.355.336.683.567.33l1.22-1.865 2.878-4.4 3.362-5.141 2.672-4.087.854-1.305c.138-.212-.044-.493-.283-.493h-7.864l.316.414.71-3.28 1.258-5.824.53-2.453c.08-.365-.393-.567-.599-.252l-1.218 1.865-2.875 4.4-3.357 5.139-2.67 4.085-.852 1.305c-.138.212.044.493.283.493h7.849l-.317-.414-.709 3.28-1.259 5.827-.53 2.454c-.089.412.543.587.633.174z"
+        stroke="currentColor"
+        d="M26.483 22.591h6.276L22.12 39.261l2.67-11.34h-6.728L29.11 11.433l-2.628 11.158z"
       />
     </g>
   </svg>

app/components/Icon/Litecoin.js

@@ -1,8 +1,22 @@
 import React from 'react'
 
 const SvgLitecoin = props => (
-  <svg fill="currentColor" viewBox="0 0 40 40" data-icon="ltc" {...props} width="1em" height="1em">
-    <path d="M12.29 28.04l1.29-5.52-1.58.67.63-2.85 1.64-.68L16.52 10h5.23l-1.52 7.14 2.09-.74-.58 2.7-2.05.8-.9 4.34h8.1l-.99 3.8z" />
+  <svg width="1em" height="1em" viewBox="0 0 50 50" {...props}>
+    <defs>
+      <linearGradient id="litecoin_svg__a" x1="0%" y1="0%" y2="100%">
+        <stop offset="0%" stopColor="#FFBD59" />
+        <stop offset="100%" stopColor="#FD9800" />
+      </linearGradient>
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <circle cx={25} cy={25} r={25} fill="url(#litecoin_svg__a)" />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M24.135 32.18l1.495-5.534 3.538-1.271.88-3.253-.03-.08-3.483 1.251L29.045 14h-7.117l-3.282 12.128-2.74.984L15 30.465l2.738-.983-1.934 7.147h18.942l1.214-4.448H24.135"
+      />
+    </g>
   </svg>
 )
 

app/components/Pay/Pay.js

@@ -348,7 +348,7 @@ class Pay extends React.Component {
   }
 
   renderHelpText = () => {
-    const { initialPayReq } = this.props
+    const { cryptoName, cryptoCurrencyTicker, initialPayReq } = this.props
     const { currentStep, previousStep } = this.state
 
     // Do not render the help text if the form has just loadad with an initial payment request.
@@ -371,7 +371,10 @@ class Pay extends React.Component {
             <animated.div style={styles}>
               <Box mb={4}>
                 <Text textAlign="justify">
-                  <FormattedMessage {...messages.description} />
+                  <FormattedMessage
+                    {...messages.description}
+                    values={{ chain: cryptoName, ticker: cryptoCurrencyTicker }}
+                  />
                 </Text>
               </Box>
             </animated.div>

app/components/Pay/messages.js

@@ -25,5 +25,5 @@ export default defineMessages({
   total: 'Total',
   memo: 'Memo',
   description:
-    'You can send Bitcoin (BTC) through the Lightning Network or make a On-Chain Transaction. Just paste your Lightning Payment Request or the Bitcoin Address in the field below. Zap will guide you to the process.'
+    'You can send {chain} ({ticker}) through the Lightning Network or make a On-Chain Transaction. Just paste your Lightning Payment Request or the {chain} Address in the field below. Zap will guide you to the process.'
 })

app/components/Request/Request.js

@@ -173,10 +173,14 @@ class Request extends React.Component {
   }
 
   renderHelpText = () => {
+    const { cryptoName, cryptoCurrencyTicker } = this.props
     return (
       <Box mb={4}>
         <Text textAlign="justify">
-          <FormattedMessage {...messages.description} />
+          <FormattedMessage
+            {...messages.description}
+            values={{ chain: cryptoName, ticker: cryptoCurrencyTicker }}
+          />
         </Text>
       </Box>
     )

app/components/Request/messages.js

@@ -18,5 +18,5 @@ export default defineMessages({
   title: 'Request',
   subtitle: 'through the Lightning Network',
   description:
-    'You can request Bitcoin (BTC) through the Lightning Network. Just enter the Amount you want to request in the field below. Zap will generate a QR-Code and a Lightning invoice after.'
+    'You can request {chain} ({ticker}) through the Lightning Network. Just enter the Amount you want to request in the field below. Zap will generate a QR-Code and a Lightning invoice after.'
 })

app/components/UI/AmountInput.js

@@ -14,20 +14,23 @@ class AmountInput extends React.Component {
     const { currency } = this.props
     switch (currency) {
       case 'btc':
+      case 'ltc':
         this.rules = {
           precision: 8,
           placeholder: '0.00000000',
           pattern: '[0-9.]*'
         }
         break
       case 'bits':
+      case 'phots':
         this.rules = {
           precision: 2,
           placeholder: '0.00',
           pattern: '[0-9.]*'
         }
         break
       case 'sats':
+      case 'lits':
         this.rules = {
           precision: 0,
           placeholder: '00000000',

app/components/UI/CryptoAmountInput.js

@@ -52,18 +52,21 @@ class CryptoAmountInput extends React.Component {
     const { currency } = this.props
     switch (currency) {
       case 'btc':
+      case 'ltc':
         return {
           precision: 8,
           placeholder: '0.00000000',
           pattern: '[0-9]*.?[0-9]{0,8}?'
         }
       case 'bits':
+      case 'phots':
         return {
           precision: 2,
           placeholder: '0.00',
           pattern: '[0-9]*.?[0-9]{0,2}?'
         }
       case 'sats':
+      case 'lits':
         return {
           precision: 0,
           placeholder: '00000000',

app/components/UI/LightningInvoiceInput.js

@@ -49,11 +49,16 @@ class LightningInvoiceInput extends React.Component {
   }
 
   render() {
-    const { intl } = this.props
+    const { chain, intl } = this.props
 
     return (
       <InformedTextArea
-        placeholder={intl.formatMessage({ ...messages.payreq_placeholder })}
+        placeholder={intl.formatMessage(
+          {
+            ...messages.payreq_placeholder
+          },
+          { chain }
+        )}
         rows={5}
         {...this.props}
         spellCheck="false"

app/components/UI/messages.js

@@ -7,5 +7,5 @@ export default defineMessages({
   required_field: 'This is a required field',
   invalid_request: 'Not a valid {chain} request.',
   valid_request: 'Valid {chain} request',
-  payreq_placeholder: 'Paste a Lightning Payment Request or Bitcoin Address here'
+  payreq_placeholder: 'Paste a Lightning Payment Request or {chain} Address here'
 })

app/components/Wallet/ReceiveModal/ReceiveModal.js

@@ -20,9 +20,22 @@ class ReceiveModal extends React.Component {
   }
 
   render() {
-    const { isOpen, pubkey, address, alias, closeReceiveModal, network, intl } = this.props
+    const {
+      isOpen,
+      pubkey,
+      address,
+      alias,
+      closeReceiveModal,
+      cryptoName,
+      network,
+      intl
+    } = this.props
     const { qrCodeType } = this.state
 
+    if (!cryptoName) {
+      return null
+    }
+
     const copyPubkeyToClipboard = () => {
       const { pubkey } = this.props
       copy(pubkey)
@@ -71,7 +84,7 @@ class ReceiveModal extends React.Component {
                     className={qrCodeType === 2 ? styles.active : undefined}
                     onClick={changeQrCode}
                   >
-                    <FormattedMessage {...messages.bitcoin_address} />
+                    <FormattedMessage {...messages.wallet_address} values={{ chain: cryptoName }} />
                   </div>
                 </div>
               </header>
@@ -107,7 +120,7 @@ class ReceiveModal extends React.Component {
 
               <div className={styles.address}>
                 <h4>
-                  <FormattedMessage {...messages.bitcoin_address} />{' '}
+                  <FormattedMessage {...messages.wallet_address} values={{ chain: cryptoName }} />{' '}
                   {network && network.name.toLowerCase() === 'testnet' && network.name}
                 </h4>
                 <p>
@@ -133,6 +146,7 @@ ReceiveModal.propTypes = {
   network: PropTypes.shape({
     name: PropTypes.string
   }).isRequired,
+  cryptoName: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
   pubkey: PropTypes.string,
   address: PropTypes.string,

app/components/Wallet/ReceiveModal/messages.js

@@ -3,7 +3,7 @@ import { defineMessages } from 'react-intl'
 export default defineMessages({
   node_public_key: 'Node Public Key',
   node_pubkey: 'Node Pubkey',
-  bitcoin_address: 'Bitcoin Address',
+  wallet_address: '{chain} Address',
   copy_address: 'Copy address',
   copy_pubkey: 'Copy Pubkey',
   address_copied_notification_title: 'Address copied',

app/containers/App.js

@@ -113,6 +113,7 @@ const mapStateToProps = state => ({
   currencyFilters: tickerSelectors.currencyFilters(state),
   currencyName: tickerSelectors.currencyName(state),
   syncPercentage: lndSelectors.syncPercentage(state),
+  cryptoName: tickerSelectors.cryptoName(state),
 
   filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
   showManualForm: contactFormSelectors.showManualForm(state),
@@ -208,6 +209,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const receiveModalProps = {
     isOpen: stateProps.address.walletModal,
     network: stateProps.info.network,
+    cryptoName: stateProps.cryptoName,
     pubkey: get(stateProps.info, 'data.uris[0]') || get(stateProps.info, 'data.identity_pubkey'),
     address: stateProps.address.address,
     alias: stateProps.info.data.alias,

app/containers/Pay.js

@@ -14,7 +14,7 @@ const mapStateToProps = state => ({
   currentTicker: tickerSelectors.currentTicker(state),
   cryptoCurrency: state.ticker.currency,
   cryptoCurrencyTicker: tickerSelectors.currencyName(state),
-  cryptoCurrencies: state.ticker.currencyFilters,
+  cryptoCurrencies: tickerSelectors.currencyFilters(state),
   fiatCurrencies: state.ticker.fiatTickers,
   fiatCurrency: state.ticker.fiatTicker,
   initialPayReq: state.pay.payReq,

app/containers/Request.js

@@ -8,7 +8,7 @@ const mapStateToProps = state => ({
   currentTicker: tickerSelectors.currentTicker(state),
   cryptoCurrency: state.ticker.currency,
   cryptoCurrencyTicker: tickerSelectors.currencyName(state),
-  cryptoCurrencies: state.ticker.currencyFilters,
+  cryptoCurrencies: tickerSelectors.currencyFilters(state),
   fiatCurrencies: state.ticker.fiatTickers,
   fiatCurrency: state.ticker.fiatTicker,
   isProcessing: state.invoice.invoiceLoading,

app/lib/utils/btc.js

@@ -93,64 +93,65 @@ export function fiatToSatoshis(fiat, price) {
   return btcToFiat(satoshisToBtc(satoshis), price)
 }
 
-export function renderCurrency(currency) {
-  switch (currency) {
-    case 'btc':
-      return 'BTC'
-    case 'bits':
-      return 'bits'
-    case 'sats':
-      return 'satoshis'
-    default:
-      return 'satoshis'
-  }
-}
-
 export function convert(from, to, amount, price) {
   switch (from) {
     case 'btc':
+    case 'ltc':
       switch (to) {
         case 'bits':
+        case 'phots':
           return btcToBits(amount)
         case 'sats':
+        case 'lits':
           return btcToSatoshis(amount)
         case 'fiat':
           return btcToFiat(amount, price)
         case 'btc':
+        case 'ltc':
           return amount
       }
       break
     case 'bits':
+    case 'phots':
       switch (to) {
         case 'btc':
           return bitsToBtc(amount)
         case 'sats':
+        case 'lits':
           return bitsToSatoshis(amount)
         case 'fiat':
           return bitsToFiat(amount, price)
         case 'bits':
+        case 'phots':
           return amount
       }
       break
     case 'sats':
+    case 'lits':
       switch (to) {
         case 'btc':
+        case 'ltc':
           return satoshisToBtc(amount)
         case 'bits':
+        case 'phots':
           return satoshisToBits(amount)
         case 'fiat':
           return satoshisToFiat(amount, price)
         case 'sats':
+        case 'lits':
           return amount
       }
       break
     case 'fiat':
       switch (to) {
         case 'btc':
+        case 'ltc':
           return fiatToBtc(amount, price)
         case 'bits':
+        case 'phots':
           return fiatToBits(amount, price)
         case 'sats':
+        case 'lits':
           return fiatToSatoshis(amount, price)
         case 'fiat':
           return amount
@@ -173,7 +174,5 @@ export default {
   satoshisToBits,
   satoshisToFiat,
 
-  renderCurrency,
-
   convert
 }