Merge pull request #3192 from mrfelton/fix/numbers-as-strings

Handle longs as strings to prevent loss of precision

package.json

@@ -318,6 +318,7 @@
     "@styled-system/theme-get": "5.1.2",
     "axios": "0.19.0",
     "bech32": "1.1.3",
+    "bignumber.js": "9.0.0",
     "bip21": "2.0.2",
     "bip39-en": "1.1.1",
     "bitcoinjs-lib": "5.1.6",
@@ -366,7 +367,6 @@
     "redux-electron-ipc": "https://github.com/LN-Zap/redux-electron-ipc#b513220d085ad3e96e459d7efcdfc37bf75417b6",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
-    "satoshi-bitcoin": "1.0.4",
     "semver": "6.3.0",
     "source-map-support": "0.5.16",
     "split2": "3.1.1",

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -4,7 +4,7 @@ import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'reac
 import { Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Bar, DataRow, Header, Panel, Text } from 'components/UI'
-import { extractMemo } from '@zap/utils/crypto'
+import { getTag } from '@zap/utils/crypto'
 import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Lightning from 'components/Icon/Lightning'
@@ -18,7 +18,7 @@ class PaymentModal extends React.PureComponent {
 
   render() {
     const { item, intl, ...rest } = this.props
-    const memo = item && extractMemo(item.payment_request)
+    const memo = item && getTag(item.payment_request, 'description')
     return (
       <Panel {...rest}>
         <Panel.Header>

renderer/components/Channels/ChannelBalance.js

@@ -19,7 +19,7 @@ const ChannelBalance = ({ channelBalance, ...rest }) => {
 }
 
 ChannelBalance.propTypes = {
-  channelBalance: PropTypes.number.isRequired,
+  channelBalance: PropTypes.string.isRequired,
 }
 
 export default ChannelBalance

renderer/components/Channels/ChannelCapacity.js

@@ -4,6 +4,7 @@ import { opacity } from 'styled-system'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { Card, Box, Flex as BaseFlex } from 'rebass/styled-components'
+import { CoinBig } from '@zap/utils/coin'
 import { Heading, ProgressBar, Text as BaseText } from 'components/UI'
 import { CryptoSelector, CryptoValue } from 'containers/UI'
 import ZapSolid from 'components/Icon/ZapSolid'
@@ -13,9 +14,13 @@ const Flex = styled(BaseFlex)(opacity)
 const Text = styled(BaseText)(opacity)
 
 const ChannelCapacity = ({ localBalance, remoteBalance, opacity, ...rest }) => {
-  const totalBalance = localBalance + remoteBalance
-  const localBalancePercent = localBalance / totalBalance
-  const remoteBalancePercent = remoteBalance / totalBalance
+  const local = CoinBig(localBalance)
+  const remote = CoinBig(remoteBalance)
+  const total = CoinBig.sum(local, remote)
+
+  const totalBalance = total.toString()
+  const localBalancePercent = local.dividedBy(total).toNumber()
+  const remoteBalancePercent = remote.dividedBy(total).toNumber()
 
   return (
     <Card as="article" {...rest}>
@@ -69,9 +74,9 @@ const ChannelCapacity = ({ localBalance, remoteBalance, opacity, ...rest }) => {
 }
 
 ChannelCapacity.propTypes = {
-  localBalance: PropTypes.number.isRequired,
+  localBalance: PropTypes.string.isRequired,
   opacity: PropTypes.number,
-  remoteBalance: PropTypes.number.isRequired,
+  remoteBalance: PropTypes.string.isRequired,
 }
 
 export default ChannelCapacity

renderer/components/Channels/ChannelCreateForm.js

@@ -67,7 +67,7 @@ const FormFooter = ({ walletBalance, cryptoUnitName }) => (
 
 FormFooter.propTypes = {
   cryptoUnitName: PropTypes.string.isRequired,
-  walletBalance: PropTypes.number.isRequired,
+  walletBalance: PropTypes.string.isRequired,
 }
 
 class ChannelCreateForm extends React.Component {
@@ -103,7 +103,7 @@ class ChannelCreateForm extends React.Component {
     searchQuery: PropTypes.string,
     selectedNodeDisplayName: PropTypes.string,
     updateContactFormSearchQuery: PropTypes.func.isRequired,
-    walletBalance: PropTypes.number.isRequired,
+    walletBalance: PropTypes.string.isRequired,
   }
 
   static defaultProps = {

renderer/components/Channels/ChannelCreateSummary.js

@@ -99,8 +99,8 @@ const ChannelCreateSummary = ({
 }
 
 ChannelCreateSummary.propTypes = {
-  amount: PropTypes.number,
-  fee: PropTypes.number.isRequired,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   lndTargetConfirmations: PropTypes.object.isRequired,
   nodeDisplayName: PropTypes.string,
   nodePubkey: PropTypes.string.isRequired,

renderer/components/Channels/ChannelData.js

@@ -126,7 +126,7 @@ const ChannelData = ({ channel, cryptoUnitName, intl, networkInfo, viewMode, ...
     activity: () => ({
       label: <FormattedMessage {...messages.channel_activity} />,
       body: <FormattedMessage {...messages.channel_activity_description} />,
-      value: `${Math.round(activity * 100)}%`,
+      value: `${activity}%`,
     }),
 
     csv_delay: () => ({

renderer/components/Channels/ChannelsCapacity.js

@@ -23,7 +23,7 @@ const ChannelsCapacity = ({ message, capacity, color, ...rest }) => {
 }
 
 ChannelsCapacity.propTypes = {
-  capacity: PropTypes.number.isRequired,
+  capacity: PropTypes.string.isRequired,
   color: PropTypes.string,
   message: PropTypes.node,
 }

renderer/components/Channels/ChannelsCapacityDonut.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box } from 'rebass/styled-components'
+import { CoinBig } from '@zap/utils/coin'
 import { Donut } from 'components/UI'
 
 const ChannelsCapacityDonut = ({
@@ -10,10 +11,16 @@ const ChannelsCapacityDonut = ({
   pendingBalance,
   ...rest
 }) => {
-  const total = lightningBalance + onchainBalance + pendingBalance
-  const lightningBalancePercent = lightningBalance / total
-  const onchainBalancePercent = onchainBalance / total
-  const pendingBalancePercent = pendingBalance / total
+  const total = CoinBig.sum(lightningBalance, onchainBalance, pendingBalance)
+  const lightningBalancePercent = CoinBig(lightningBalance)
+    .dividedBy(total)
+    .toNumber()
+  const onchainBalancePercent = CoinBig(onchainBalance)
+    .dividedBy(total)
+    .toNumber()
+  const pendingBalancePercent = CoinBig(pendingBalance)
+    .dividedBy(total)
+    .toNumber()
 
   return (
     <Box {...rest}>
@@ -47,9 +54,9 @@ const ChannelsCapacityDonut = ({
 
 ChannelsCapacityDonut.propTypes = {
   channelCount: PropTypes.number.isRequired,
-  lightningBalance: PropTypes.number.isRequired,
-  onchainBalance: PropTypes.number.isRequired,
-  pendingBalance: PropTypes.number.isRequired,
+  lightningBalance: PropTypes.string.isRequired,
+  onchainBalance: PropTypes.string.isRequired,
+  pendingBalance: PropTypes.string.isRequired,
 }
 
 export default ChannelsCapacityDonut

renderer/components/Channels/ChannelsHeader.js

@@ -69,9 +69,9 @@ ChannelsHeader.propTypes = {
   filters: PropTypes.array.isRequired,
   isCustomFilter: PropTypes.bool,
   openModal: PropTypes.func.isRequired,
-  receiveCapacity: PropTypes.number.isRequired,
+  receiveCapacity: PropTypes.string.isRequired,
   searchQuery: PropTypes.string,
-  sendCapacity: PropTypes.number.isRequired,
+  sendCapacity: PropTypes.string.isRequired,
   setChannelViewMode: PropTypes.func.isRequired,
   sort: PropTypes.string.isRequired,
   sorters: PropTypes.array.isRequired,

renderer/components/Channels/ChannelsInfo.js

@@ -41,8 +41,8 @@ const ChannelsInfo = ({ channels, receiveCapacity, sendCapacity, ...rest }) => {
 
 ChannelsInfo.propTypes = {
   channels: PropTypes.array,
-  receiveCapacity: PropTypes.number.isRequired,
-  sendCapacity: PropTypes.number.isRequired,
+  receiveCapacity: PropTypes.string.isRequired,
+  sendCapacity: PropTypes.string.isRequired,
 }
 
 ChannelsInfo.defaultProps = {

renderer/components/Channels/ChannelsMenu/ChannelsMenu.js

@@ -69,10 +69,10 @@ const ChannelsMenu = ({
 ChannelsMenu.propTypes = {
   channelCount: PropTypes.number.isRequired,
   cryptoUnitName: PropTypes.string.isRequired,
-  lightningBalance: PropTypes.number.isRequired,
-  onchainBalance: PropTypes.number.isRequired,
+  lightningBalance: PropTypes.string.isRequired,
+  onchainBalance: PropTypes.string.isRequired,
   openModal: PropTypes.func.isRequired,
-  pendingBalance: PropTypes.number.isRequired,
+  pendingBalance: PropTypes.string.isRequired,
 }
 
 export default ChannelsMenu

renderer/components/Channels/ChannelsMenu/ChannelsMenuHeader.js

@@ -2,7 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass/styled-components'
 import { FormattedMessage } from 'react-intl'
-import { Donut, Heading } from 'components/UI'
+import { Heading } from 'components/UI'
+import ChannelsCapacityDonut from '../ChannelsCapacityDonut'
 import messages from './messages'
 
 const ChannelsMenuHeader = ({
@@ -12,40 +13,17 @@ const ChannelsMenuHeader = ({
   pendingBalance,
   ...rest
 }) => {
-  const total = lightningBalance + onchainBalance + pendingBalance
-  const lightningBalancePercent = lightningBalance / total
-  const onchainBalancePercent = onchainBalance / total
-  const pendingBalancePercent = pendingBalance / total
-
   return (
     <Flex justifyContent="space-between" {...rest}>
       <Heading.h1>
         <FormattedMessage {...messages.title} />
       </Heading.h1>
       <Box width={80}>
-        <Donut
-          data={[
-            {
-              key: 'lightning',
-              amount: lightningBalancePercent || 0,
-              color: 'primaryAccent',
-              withGlow: true,
-              withTint: true,
-            },
-            {
-              key: 'pending',
-              amount: pendingBalancePercent || 0,
-              color: 'gray',
-              withTint: true,
-            },
-            {
-              key: 'onchain',
-              amount: onchainBalancePercent || 0,
-              color: 'secondaryColor',
-              withTint: true,
-            },
-          ]}
-          text={channelCount}
+        <ChannelsCapacityDonut
+          channelCount={channelCount}
+          lightningBalance={lightningBalance}
+          onchainBalance={onchainBalance}
+          pendingBalance={pendingBalance}
         />
       </Box>
     </Flex>
@@ -54,9 +32,9 @@ const ChannelsMenuHeader = ({
 
 ChannelsMenuHeader.propTypes = {
   channelCount: PropTypes.number.isRequired,
-  lightningBalance: PropTypes.number.isRequired,
-  onchainBalance: PropTypes.number.isRequired,
-  pendingBalance: PropTypes.number.isRequired,
+  lightningBalance: PropTypes.string.isRequired,
+  onchainBalance: PropTypes.string.isRequired,
+  pendingBalance: PropTypes.string.isRequired,
 }
 
 export default ChannelsMenuHeader

renderer/components/Channels/ChannelsMenu/ChannelsMenuSummary.js

@@ -69,9 +69,9 @@ const ChannelsMenuSummary = ({
 
 ChannelsMenuSummary.propTypes = {
   cryptoUnitName: PropTypes.string.isRequired,
-  lightningBalance: PropTypes.number.isRequired,
-  onchainBalance: PropTypes.number.isRequired,
-  pendingBalance: PropTypes.number.isRequired,
+  lightningBalance: PropTypes.string.isRequired,
+  onchainBalance: PropTypes.string.isRequired,
+  pendingBalance: PropTypes.string.isRequired,
 }
 
 export default ChannelsMenuSummary

renderer/components/Channels/ChannelsSummaryDonut.js

@@ -1,12 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box } from 'rebass/styled-components'
+import { CoinBig } from '@zap/utils/coin'
 import { Donut } from 'components/UI'
 
 const ChannelsSummaryDonut = ({ sendCapacity, receiveCapacity, ...rest }) => {
-  const total = sendCapacity + receiveCapacity
-  const sendCapacityPercent = sendCapacity / total
-  const receiveCapacityPercent = receiveCapacity / total
+  const total = CoinBig.sum(sendCapacity, receiveCapacity)
+  const sendCapacityPercent = CoinBig(sendCapacity)
+    .dividedBy(total)
+    .toNumber()
+  const receiveCapacityPercent = CoinBig(receiveCapacity)
+    .dividedBy(total)
+    .toNumber()
 
   return (
     <Box {...rest}>
@@ -33,8 +38,8 @@ const ChannelsSummaryDonut = ({ sendCapacity, receiveCapacity, ...rest }) => {
 }
 
 ChannelsSummaryDonut.propTypes = {
-  receiveCapacity: PropTypes.number.isRequired,
-  sendCapacity: PropTypes.number.isRequired,
+  receiveCapacity: PropTypes.string.isRequired,
+  sendCapacity: PropTypes.string.isRequired,
 }
 
 export default ChannelsSummaryDonut

renderer/components/Form/IntegerInput.js

@@ -20,14 +20,14 @@ const isNumericRegex = /^\d+$/
 const isNumeric = value => isNumericRegex.test(value)
 
 /**
- * convertToNumber - Convert value to number.
+ * convertToInteger - Convert value to an integer number.
  *
  * @param  {string} value Value
- * @returns {number} Value as number
+ * @returns {number} Value as integer number
  */
-const convertToNumber = value => {
-  const valueAsNumber = Number(value)
-  return Number.isNaN(valueAsNumber) ? undefined : valueAsNumber
+const convertToInteger = value => {
+  const valueAsNumber = Math.round(value)
+  return Number.isFinite(valueAsNumber) ? valueAsNumber : undefined
 }
 
 /**
@@ -120,7 +120,7 @@ class WrappedIntegerInputAsField extends React.Component {
     return (
       <IntegerInputAsField
         {...this.props}
-        mask={convertToNumber}
+        mask={convertToInteger}
         onKeyDown={preventNonNumeric}
         onPaste={preventNonNumericOnPaste}
         validate={this.validate}

renderer/components/Form/TransactionFeeInput.js

@@ -121,7 +121,7 @@ TransactionSpeedDesc.propTypes = {
 }
 
 TransactionFeeInput.propTypes = {
-  fee: PropTypes.number,
+  fee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   field: PropTypes.string.isRequired,
   formApi: PropTypes.object.isRequired,
   initialValue: PropTypes.string,

renderer/components/Pay/Pay.js

@@ -17,7 +17,7 @@ class Pay extends React.Component {
     addFilter: PropTypes.func.isRequired,
     chain: PropTypes.string.isRequired,
     chainName: PropTypes.string.isRequired,
-    channelBalance: PropTypes.number.isRequired,
+    channelBalance: PropTypes.string.isRequired,
     closeModal: PropTypes.func.isRequired,
     cryptoUnit: PropTypes.string.isRequired,
     cryptoUnitName: PropTypes.string.isRequired,
@@ -33,7 +33,7 @@ class Pay extends React.Component {
       medium: PropTypes.number.isRequired,
       slow: PropTypes.number.isRequired,
     }).isRequired,
-    maxOneTimeSend: PropTypes.number.isRequired,
+    maxOneTimeSend: PropTypes.string.isRequired,
     mx: PropTypes.string,
     network: PropTypes.string.isRequired,
     onchainFees: PropTypes.shape({
@@ -48,7 +48,7 @@ class Pay extends React.Component {
     routes: PropTypes.array,
     sendCoins: PropTypes.func.isRequired,
     setRedirectPayReq: PropTypes.func.isRequired,
-    walletBalanceConfirmed: PropTypes.number.isRequired,
+    walletBalanceConfirmed: PropTypes.string.isRequired,
     width: PropTypes.number,
   }
 

renderer/components/Pay/PayAmountFields.js

@@ -64,7 +64,7 @@ class PayAmountFields extends React.Component {
       slow: PropTypes.number,
     }),
     queryFees: PropTypes.func.isRequired,
-    walletBalanceConfirmed: PropTypes.number.isRequired,
+    walletBalanceConfirmed: PropTypes.string.isRequired,
   }
 
   static defaultProps = {