Merge pull request #1073 from nervosnetwork/rc/v0.24.3

[ᚬmaster] Rc/v0.24.3

Author: ashchan

CHANGELOG.md

@@ -1,3 +1,28 @@
+## [0.24.3](https://github.com/nervosnetwork/neuron/compare/v0.24.2...v0.24.3) (2019-11-11)
+
+
+### Bug Fixes
+
+* **neuron-ui:** fix the address prefix on tx view according to the chain type. ([ffedca7](https://github.com/nervosnetwork/neuron/commit/ffedca7))
+* **neuron-wallet:** order inputs in a tx ([b0e3855](https://github.com/nervosnetwork/neuron/commit/b0e3855))
+* I18n for pending confirmations count ([2990891](https://github.com/nervosnetwork/neuron/commit/2990891))
+* input capacity can be null ([2d80fa8](https://github.com/nervosnetwork/neuron/commit/2d80fa8))
+
+
+### Features
+
+* **neuron-ui:** remove input truncation on importing keystore. ([#1068](https://github.com/nervosnetwork/neuron/issues/1068)) ([2d6283d](https://github.com/nervosnetwork/neuron/commit/2d6283d))
+* **neuron-ui:** show local error message ahead of remote error message ([21fd5b1](https://github.com/nervosnetwork/neuron/commit/21fd5b1))
+* **neuron-ui:** show the error message from api controller on send view. ([7bf6dbc](https://github.com/nervosnetwork/neuron/commit/7bf6dbc))
+* **neuron-wallet:** trim the keywords on searching txs ([8ed5501](https://github.com/nervosnetwork/neuron/commit/8ed5501))
+* strengthen address validation ([1bc213a](https://github.com/nervosnetwork/neuron/commit/1bc213a))
+* **neuron-ui:** update the explorer url according to chain type. ([67aceb8](https://github.com/nervosnetwork/neuron/commit/67aceb8))
+* Finalize testnet explorer URL ([848fe7b](https://github.com/nervosnetwork/neuron/commit/848fe7b))
+* **neuron-ui:** adjust the layout of receive view to vertical aglinment. ([8d58abc](https://github.com/nervosnetwork/neuron/commit/8d58abc))
+* **neuron-ui:** only addresses start with 0x0100 are valid ([67be688](https://github.com/nervosnetwork/neuron/commit/67be688))
+
+
+
 ## [0.24.2](https://github.com/nervosnetwork/neuron/compare/v0.24.1...v0.24.2) (2019-11-08)
 
 

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.24.2",
+  "version": "0.24.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -2,7 +2,7 @@
   "name": "neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neuron-ui",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

packages/neuron-ui/src/components/Addresses/index.tsx

@@ -20,6 +20,7 @@ import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { useLocalDescription } from 'utils/hooks'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 import { onRenderRow } from 'utils/fabricUIRender'
+import { MAINNET_TAG } from 'utils/const'
 
 const Addresses = ({
   app: {
@@ -30,8 +31,7 @@ const Addresses = ({
   settings: { networks = [] },
   dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
-  const isMainnet =
-    (networks.find(n => n.id === networkID) || {}).chain === (process.env.REACT_APP_MAINNET_TAG || 'ckb')
+  const isMainnet = (networks.find(n => n.id === networkID) || {}).chain === MAINNET_TAG
   const [showMainnetAddress, setShowMainnetAddress] = useState(false)
   const [t] = useTranslation()
 

packages/neuron-ui/src/components/ImportKeystore/index.tsx

@@ -98,7 +98,6 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
               placeholder={t(`import-keystore.placeholder.${key}`)}
               type={key === 'password' ? 'password' : 'text'}
               readOnly={key === 'path'}
-              maxLength={maxLength}
               value={value}
               validateOnLoad={false}
               onGetErrorMessage={(text?: string) => {
@@ -108,6 +107,13 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
                 if (key === 'name' && isNameUsed) {
                   return t(`messages.codes.${ErrorCode.FieldUsed}`, { fieldName: `name`, fieldValue: text })
                 }
+                if (text && maxLength && text.length > maxLength) {
+                  return t(`messages.codes.${ErrorCode.FieldTooLong}`, {
+                    fieldName: key,
+                    fieldValue: key === 'password' ? '' : text,
+                    length: maxLength,
+                  })
+                }
                 return ''
               }}
               onChange={(_e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {

packages/neuron-ui/src/components/Receive/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, Text, TextField, TooltipHost, Modal, FontSizes, IconButton } from 'office-ui-fabric-react'
+import { Stack, Text, TextField, TooltipHost, Modal, IconButton } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import QRCode from 'widgets/QRCode'
@@ -28,35 +28,43 @@ const Receive = ({
     addPopup('addr-copied')(dispatch)
   }, [accountAddress, dispatch])
 
+  const Address = useMemo(
+    () => (
+      <Stack styles={{ root: { flex: 1, minWidth: 500 } }}>
+        <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
+          <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
+            <TextField
+              styles={{
+                root: {
+                  flex: 1,
+                  color: '#888',
+                },
+                fieldGroup: {
+                  borderColor: '#eee!important',
+                },
+              }}
+              readOnly
+              placeholder={accountAddress}
+              onClick={copyAddress}
+            />
+            <IconButton iconProps={{ iconName: 'Copy' }} onClick={copyAddress} />
+          </Stack>
+        </TooltipHost>
+      </Stack>
+    ),
+    [copyAddress, accountAddress, t]
+  )
+
   if (!accountAddress) {
     return <div>{t('receive.address-not-found')}</div>
   }
 
   return (
     <>
-      <Stack horizontal tokens={{ childrenGap: 40, padding: '20px 0 0 0' }} horizontalAlign="space-between">
-        <Stack styles={{ root: { flex: 1 } }}>
-          <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
-            <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
-              <TextField
-                styles={{
-                  root: {
-                    flex: 1,
-                  },
-                  description: {
-                    fontSize: FontSizes.medium,
-                  },
-                }}
-                readOnly
-                placeholder={accountAddress}
-                onClick={copyAddress}
-                description={t('receive.prompt')}
-              />
-              <IconButton iconProps={{ iconName: 'Copy' }} onClick={copyAddress} />
-            </Stack>
-          </TooltipHost>
-        </Stack>
-
+      <Stack tokens={{ childrenGap: 10 }} horizontalAlign="center">
+        <Text as="p" variant="medium">
+          {`${t('receive.address', { network: accountAddress.startsWith('ckb') ? 'CKB Mainnet' : 'CKB Testnet' })}`}
+        </Text>
         <Stack style={{ alignSelf: 'center' }}>
           <QRCode
             value={accountAddress}
@@ -65,8 +73,12 @@ const Receive = ({
             exportable
             includeMargin
             dispatch={dispatch}
+            remark={Address}
           />
         </Stack>
+        <Text as="p" variant="medium">
+          {t('receive.prompt')}
+        </Text>
       </Stack>
 
       <Modal isOpen={showLargeQRCode} onDismiss={() => setShowLargeQRCode(false)}>

packages/neuron-ui/src/components/Send/hooks.ts

@@ -52,18 +52,18 @@ const useOnTransactionChange = (
   items: TransactionOutput[],
   price: string,
   dispatch: StateDispatch,
-  setIsTransactionValid: Function,
-  setTotalAmount: Function
+  setTotalAmount: Function,
+  setErrorMessage: Function
 ) => {
   useEffect(() => {
     clearTimeout(generateTxTimer)
+    setErrorMessage('')
     generateTxTimer = setTimeout(() => {
       dispatch({
         type: AppActions.UpdateGeneratedTx,
         payload: null,
       })
       if (verifyTransactionOutputs(items)) {
-        setIsTransactionValid(true)
         const totalAmount = outputsToTotalAmount(items)
         setTotalAmount(totalAmount)
         const realParams = {
@@ -81,16 +81,25 @@ const useOnTransactionChange = (
                 type: AppActions.UpdateGeneratedTx,
                 payload: res.result,
               })
+            } else {
+              throw new Error(res.message.content)
             }
           })
           .catch((err: Error) => {
-            console.error(err)
+            dispatch({
+              type: AppActions.UpdateGeneratedTx,
+              payload: '',
+            })
+            setErrorMessage(err.message)
           })
       } else {
-        setIsTransactionValid(false)
+        dispatch({
+          type: AppActions.UpdateGeneratedTx,
+          payload: '',
+        })
       }
     }, 300)
-  }, [walletID, items, price, dispatch, setIsTransactionValid, setTotalAmount])
+  }, [walletID, items, price, dispatch, setTotalAmount, setErrorMessage])
 }
 
 const useOnSubmit = (items: TransactionOutput[], dispatch: StateDispatch) =>
@@ -176,8 +185,8 @@ export const useInitialize = (
 ) => {
   const fee = useMemo(() => calculateFee(generatedTx), [generatedTx])
 
-  const [isTransactionValid, setIsTransactionValid] = useState(false)
   const [totalAmount, setTotalAmount] = useState('0')
+  const [errorMessage, setErrorMessage] = useState('')
 
   const updateTransactionOutput = useUpdateTransactionOutput(dispatch)
   const onItemChange = useOnItemChange(updateTransactionOutput)
@@ -235,8 +244,6 @@ export const useInitialize = (
     fee,
     totalAmount,
     setTotalAmount,
-    isTransactionValid,
-    setIsTransactionValid,
     useOnTransactionChange,
     onItemChange,
     addTransactionOutput,
@@ -247,6 +254,8 @@ export const useInitialize = (
     onGetAmountErrorMessage,
     onSubmit,
     onClear,
+    errorMessage,
+    setErrorMessage,
   }
 }
 

packages/neuron-ui/src/components/Send/index.tsx

@@ -45,8 +45,6 @@ const Send = ({
     fee,
     totalAmount,
     setTotalAmount,
-    isTransactionValid,
-    setIsTransactionValid,
     useOnTransactionChange,
     onItemChange,
     onSubmit,
@@ -57,12 +55,16 @@ const Send = ({
     onGetAddressErrorMessage,
     onGetAmountErrorMessage,
     onClear,
+    errorMessage,
+    setErrorMessage,
   } = useInitialize(walletID, send.outputs, send.generatedTx, dispatch, t)
-  useOnTransactionChange(walletID, send.outputs, send.price, dispatch, setIsTransactionValid, setTotalAmount)
+  useOnTransactionChange(walletID, send.outputs, send.price, dispatch, setTotalAmount, setErrorMessage)
   const leftStackWidth = '70%'
   const labelWidth = '140px'
 
-  const isAffordable = verifyTotalAmount(totalAmount, fee, balance)
+  const errorMessageUnderTotal = verifyTotalAmount(totalAmount, fee, balance)
+    ? errorMessage
+    : t(`messages.codes.${ErrorCode.AmountNotEnough}`)
 
   return (
     <Stack verticalFill tokens={{ childrenGap: 15, padding: '20px 0 0 0' }}>
@@ -178,7 +180,7 @@ const Send = ({
           styles={{
             root: {
               width: leftStackWidth,
-              display: send.outputs.length > 1 || !isAffordable ? 'flex' : 'none',
+              display: send.outputs.length > 1 || errorMessageUnderTotal ? 'flex' : 'none',
             },
           }}
           tokens={{ childrenGap: 20 }}
@@ -192,7 +194,7 @@ const Send = ({
               alt={t('send.total-amount')}
               value={`${shannonToCKBFormatter(totalAmount)} CKB`}
               readOnly
-              errorMessage={isAffordable ? '' : t(`messages.codes.${ErrorCode.AmountNotEnough}`)}
+              errorMessage={errorMessageUnderTotal}
             />
           </Stack.Item>
         </Stack>
@@ -232,7 +234,7 @@ const Send = ({
           <PrimaryButton
             type="submit"
             onClick={onSubmit(walletID)}
-            disabled={sending || !isTransactionValid || !isAffordable || !send.generatedTx}
+            disabled={sending || !!errorMessageUnderTotal || !send.generatedTx}
             text={t('send.send')}
           />
         )}

packages/neuron-ui/src/components/Transaction/index.tsx

@@ -8,7 +8,7 @@ import { ckbCore } from 'services/chain'
 import { transactionState } from 'states/initStates/chain'
 
 import { localNumberFormatter, uniformTimeFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import { ErrorCode } from 'utils/const'
+import { ErrorCode, MAINNET_TAG } from 'utils/const'
 import { explorerNavButton } from './style.module.scss'
 
 const MIN_CELL_WIDTH = 70
@@ -30,9 +30,11 @@ const CompactAddress = ({ address }: { address: string }) => (
 const Transaction = () => {
   const [t] = useTranslation()
   const [transaction, setTransaction] = useState(transactionState)
-  const [addressPrefix, setAddressPrefix] = useState(ckbCore.utils.AddressPrefix.Mainnet)
+  const [isMainnet, setIsMainnet] = useState(false)
   const [error, setError] = useState({ code: '', message: '' })
 
+  const addressPrefix = isMainnet ? ckbCore.utils.AddressPrefix.Mainnet : ckbCore.utils.AddressPrefix.Testnet
+
   const inputColumns: IColumn[] = useMemo(
     () =>
       [
@@ -198,11 +200,7 @@ const Transaction = () => {
             throw new Error('Cannot find current network in the network list')
           }
 
-          setAddressPrefix(
-            network.chain === process.env.REACT_APP_MAINNET_TAG
-              ? ckbCore.utils.AddressPrefix.Mainnet
-              : ckbCore.utils.AddressPrefix.Testnet
-          )
+          setIsMainnet(network.chain === MAINNET_TAG)
         }
       })
       .catch(err => console.warn(err))
@@ -246,10 +244,10 @@ const Transaction = () => {
     })
   }, [])
 
-  // TODO: add conditional branch on mainnet and testnet
   const onExplorerBtnClick = useCallback(() => {
-    openExternal(`https://explorer.nervos.org/transaction/${transaction.hash}`)
-  }, [transaction.hash])
+    const explorerUrl = isMainnet ? 'https://explorer.nervos.org' : 'https://explorer.nervos.org/testnet'
+    openExternal(`${explorerUrl}/transaction/${transaction.hash}`)
+  }, [transaction.hash, isMainnet])
 
   const basicInfoItems = useMemo(
     () => [