master to next merge

config/default.js

@@ -21,6 +21,9 @@ module.exports = {
   currency: 'USD',
   locale: 'en',
 
+  // Default time dipslay mode (12hour|24hour).
+  timeDisplayMode: '12hour',
+
   autoupdate: {
     active: true,
     channel: 'beta',

electron/main.js

@@ -6,7 +6,7 @@
  * When running `npm run build` or `npm run build-main`, this file is compiled to
  * `/dist/main.js` using webpack. This gives us some performance wins.
  */
-import { app, BrowserWindow } from 'electron'
+import { app, session, BrowserWindow } from 'electron'
 import isDev from 'electron-is-dev'
 import installExtension, {
   REACT_DEVELOPER_TOOLS,
@@ -397,8 +397,8 @@ app.on('ready', async () => {
    */
   if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD) {
     if (process.env.REINSTALL_DEVTOOLS) {
-      BrowserWindow.removeDevToolsExtension(REACT_DEVELOPER_TOOLS)
-      BrowserWindow.removeDevToolsExtension(REDUX_DEVTOOLS)
+      session.removeExtension(REACT_DEVELOPER_TOOLS)
+      session.removeExtension(REDUX_DEVTOOLS)
     }
 
     installExtension(REACT_DEVELOPER_TOOLS)

package.json

@@ -44,12 +44,12 @@
   },
   "config": {
     "lnd-binary": {
-      "binaryVersion": "0.11.1-beta-3-g9fc02c041",
+      "binaryVersion": "0.12.0-beta-2-g2dd779205",
       "binarySite": "https://github.com/LN-Zap/lnd/releases/download"
     }
   },
   "browserslist": [
-    "electron 8.4.0"
+    "electron 9.3.4"
   ],
   "engines": {
     "node": ">=12.0.0",
@@ -154,7 +154,7 @@
       ],
       "desktop": {
         "Comment": "Zap - Lightning wallet",
-        "Icon": "zap",
+        "Icon": "zap-desktop.png",
         "Name": "Zap",
         "StartupNotify": "true",
         "Terminal": "false",
@@ -247,15 +247,15 @@
     "babel-plugin-styled-components": "1.10.7",
     "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "browserslist": "4.14.5",
+    "browserslist": "4.16.5",
     "circular-dependency-plugin": "5.2.0",
     "clean-webpack-plugin": "3.0.0",
     "copy-webpack-plugin": "5.1.1",
     "coveralls": "3.1.0",
     "cross-env": "7.0.2",
     "cross-spawn": "7.0.3",
     "csp-html-webpack-plugin": "4.0.0",
-    "electron": "8.4.0",
+    "electron": "9.3.4",
     "electron-builder": "22.9.1",
     "electron-devtools-installer": "3.1.1",
     "electron-notarize": "1.0.0",
@@ -321,6 +321,7 @@
   },
   "dependencies": {
     "@hot-loader/react-dom": "16.13.0",
+    "@ln-zap/bolt11": "1.2.8-beta.3",
     "@rebass/forms": "4.0.6",
     "@styled-system/theme-get": "5.1.2",
     "axios": "0.19.2",
@@ -351,7 +352,7 @@
     "is-electron-renderer": "2.0.1",
     "jstimezonedetect": "1.0.7",
     "keytar": "5.6.0",
-    "lnd-grpc": "0.4.6",
+    "lnd-grpc": "0.4.8",
     "lndconnect": "0.2.10",
     "lodash": "4.17.20",
     "new-github-issue-url": "0.2.1",

renderer/components/Activity/Invoice/Invoice.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Text } from 'components/UI'
 import Zap from 'components/Icon/Zap'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import messages from './messages'
 import Clock from 'components/Icon/Clock'
 
@@ -33,7 +33,8 @@ const Invoice = ({ activity, showActivityModal, cryptoUnitName, intl, ...rest })
         <FormattedMessage {...messages[activity.isSettled ? 'received' : 'requested']} />
       </Text>
       <Text color="gray" fontSize="xs" fontWeight="normal">
-        <FormattedTime
+        <FormattedDateTime
+          format="time"
           value={activity.isSettled ? activity.settleDate * 1000 : activity.creationDate * 1000}
         />
       </Text>

renderer/components/Activity/Payment/Payment.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedMessage, FormattedTime, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { getDisplayNodeName } from 'reducers/payment/utils'
 import { Message, Text } from 'components/UI'
 import Zap from 'components/Icon/Zap'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import ErrorLink from '../ErrorLink'
 import messages from './messages'
 
@@ -57,7 +57,7 @@ const Payment = ({
           </>
         ) : (
           <Text color="gray" fontSize="xs" fontWeight="normal">
-            <FormattedTime value={activity.creationDate * 1000} />
+            <FormattedDateTime format="time" value={activity.creationDate * 1000} />
           </Text>
         )}
       </Box>

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { getDisplayNodeName } from 'reducers/payment/utils'
 import { Bar, DataRow, Header, Panel, Text } from 'components/UI'
 import { getTag } from '@zap/utils/crypto'
-import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CopyButton,
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Lightning from 'components/Icon/Lightning'
 import Route from './Route'
@@ -78,15 +85,10 @@ class PaymentModal extends React.PureComponent {
             right={
               <>
                 <Text>
-                  <FormattedDate
-                    day="2-digit"
-                    month="long"
-                    value={item.creationDate * 1000}
-                    year="numeric"
-                  />
+                  <FormattedDateTime format="date" month="long" value={item.creationDate * 1000} />
                 </Text>
                 <Text>
-                  <FormattedTime value={item.creationDate * 1000} />
+                  <FormattedDateTime format="time" value={item.creationDate * 1000} />
                 </Text>
               </>
             }

renderer/components/Activity/Row.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate } from 'react-intl'
 import { Box } from 'rebass/styled-components'
 import { Bar, Heading } from 'components/UI'
+import { FormattedDateTime } from 'containers/UI'
 
 const Row = ({ style, item, RowComponent }) => (
   <div style={style}>
     {item.title ? (
       <Box mt={4} pl={4}>
         <Heading.H4 fontWeight="normal">
-          <FormattedDate day="2-digit" month="short" value={item.title} year="numeric" />
+          <FormattedDateTime format="date" month="short" value={item.title} />
         </Heading.H4>
         <Bar my={1} />
       </Box>

renderer/components/Activity/Transaction/Transaction.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import findLast from 'lodash/findLast'
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import config from 'config'
 import { intlShape } from '@zap/i18n'
 import { CoinBig } from '@zap/utils/coin'
 import { Message, Text } from 'components/UI'
 import ChainLink from 'components/Icon/ChainLink'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import ErrorLink from '../ErrorLink'
 import messages from './messages'
 
@@ -45,7 +45,7 @@ const Transaction = ({
     if (CoinBig(numConfirmations).gt(confirmed)) {
       return (
         <Text color="gray" fontSize="xs" fontWeight="normal">
-          <FormattedTime value={activity.timeStamp * 1000} />
+          <FormattedDateTime format="time" value={activity.timeStamp * 1000} />
         </Text>
       )
     }

renderer/components/Activity/TransactionModal/TransactionModal.js

@@ -1,19 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
-import {
-  FormattedDate,
-  FormattedTime,
-  FormattedMessage,
-  FormattedNumber,
-  injectIntl,
-} from 'react-intl'
+import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl'
 import { Flex } from 'rebass/styled-components'
 import { CoinBig } from '@zap/utils/coin'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Header, Link, Panel, Span, Text, Button } from 'components/UI'
-import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CopyButton,
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Onchain from 'components/Icon/Onchain'
 import Padlock from 'components/Icon/Padlock'
@@ -127,15 +128,14 @@ class TransactionModal extends React.PureComponent {
                   item.numConfirmations ? (
                     <>
                       <Text>
-                        <FormattedDate
-                          day="2-digit"
+                        <FormattedDateTime
+                          format="date"
                           month="long"
                           value={item.timeStamp * 1000}
-                          year="numeric"
                         />
                       </Text>
                       <Text>
-                        <FormattedTime value={item.timeStamp * 1000} />
+                        <FormattedDateTime format="time" value={item.timeStamp * 1000} />
                       </Text>
                     </>
                   ) : (

renderer/components/Channels/ChannelCreateForm.js

@@ -14,7 +14,7 @@ import {
   Label,
   Toggle,
   TransactionFeeInput,
-  IntegerInput,
+  // IntegerInput,
 } from 'components/Form'
 import { CryptoValue } from 'containers/UI'
 import { CurrencyFieldGroup } from 'containers/Form'
@@ -313,7 +313,7 @@ class ChannelCreateForm extends React.Component {
           </>
         )}
 
-        <Flex alignItems="center" justifyContent="space-between" mt={2}>
+        {/* <Flex alignItems="center" justifyContent="space-between" mt={2}>
           <Flex>
             <Span color="gray" fontSize="s" mr={2}>
               <Padlock />
@@ -333,7 +333,7 @@ class ChannelCreateForm extends React.Component {
             variant="thin"
             width={80}
           />
-        </Flex>
+        </Flex> */}
       </Box>
     )
   }

renderer/components/Channels/ChannelData.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import styled from 'styled-components'
 import { opacity } from 'styled-system'
 import { Box as BaseBox, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Link, Text } from 'components/UI'
 import { Truncate } from 'components/Util'
-import { CopyButton, CryptoValue } from 'containers/UI'
+import { CopyButton, CryptoValue, FormattedDateTime } from 'containers/UI'
 import { CHANNEL_DATA_VIEW_MODE_BASIC, CHANNEL_DATA_VIEW_MODE_FULL } from './constants'
 import messages from './messages'
 
@@ -62,13 +62,7 @@ const ChannelData = ({ channel, cryptoUnitName, intl, networkInfo, viewMode, ...
       body: <FormattedMessage {...messages.funding_date_description} />,
       value: (
         <Text>
-          <FormattedDate
-            day="2-digit"
-            month="short"
-            value={fundingTxTimestamp * 1000}
-            year="numeric"
-          />{' '}
-          <FormattedTime value={fundingTxTimestamp * 1000} />
+          <FormattedDateTime month="short" value={fundingTxTimestamp * 1000} />
         </Text>
       ),
     }),

renderer/components/Onboarding/Steps/ConnectionConfirm.js

@@ -18,6 +18,7 @@ class ConnectionConfirm extends React.Component {
     isLightningGrpcActive: PropTypes.bool,
     isWalletUnlockerGrpcActive: PropTypes.bool,
     lndConnect: PropTypes.string,
+    name: PropTypes.string,
     startLnd: PropTypes.func.isRequired,
     startLndCertError: PropTypes.string,
     startLndHostError: PropTypes.string,
@@ -40,10 +41,11 @@ class ConnectionConfirm extends React.Component {
 
   handleSubmit = async () => {
     const {
-      connectionHost,
       connectionCert,
+      connectionHost,
       connectionMacaroon,
       connectionString,
+      name,
       startLnd,
     } = this.props
     const cleanConnectionString = connectionString && connectionString.trim()
@@ -57,6 +59,7 @@ class ConnectionConfirm extends React.Component {
           cert: connectionCert,
           macaroon: connectionMacaroon,
         }),
+        name,
       })
     }
 
@@ -78,6 +81,7 @@ class ConnectionConfirm extends React.Component {
         type: 'custom',
         decoder: 'lnd.lndconnect.v1',
         lndconnectUri,
+        name,
       })
     }
 
@@ -93,6 +97,7 @@ class ConnectionConfirm extends React.Component {
       type: 'custom',
       decoder: 'lnd.lndconnect.v1',
       lndconnectUri,
+      name,
     })
   }
 
@@ -106,6 +111,7 @@ class ConnectionConfirm extends React.Component {
       connectionMacaroon,
       connectionString,
       lndConnect,
+      name,
       isLightningGrpcActive,
       isWalletUnlockerGrpcActive,
       startLndHostError,