NEP5 (#381)

* Fix for: Password is displayed as visible text when creating wallet #342 (#347) * Fix for: Give warning when API is down or wallet lacks connectivity #265 (#346) * Fix lint errors and refactor * Remove RPX from reducers * Move loading indicator to the top * hide scrollbars * finetune the buttons * Move the refresh button code to Dashboard.scss * Remove unused styles * Split token balances into its own component * Add info icon * add tokens balance to initiateGetBalance * Remove unused methods * POC tokenInfo * Use PasswordField for WIF key in secret token sale screen (#351) * Add token info modal and refactor the tokens state * Update snapshots * Remove uneeded code * Better formatting (#350) * Better formatting for bigger numbers * Formating formatters file * Removing mime requirement. Not needed. * Remove exclamation that's not needed in UI (#353) * Enter in textfields submits alt (#354) * Enter button submits forms, simple solution * Code style fixes * Use tight version * Remove unused function * Remove comment * Remove ToggleAsset * Rename Gas -> GAS / Neo -> NEO * Add isToken method * WIP * Use tight versioning * WIP * Rename rpx to sale, and clean it up * Rename reducers to index * Fix paths * Add flow * Add flow * cleanups * Rename initiateGetBalance to LoadWalletData * Add TokenInfo type * Fix tests * Refactor prices (to support in the future) * Add Type suffix for types * Cleanup * Cleanup * Cleanup * Fix typo * Use neon-js constants * Add support for test tokens * Add percent buttons * Fix token sale * Sort imports * Fix typo * Revert back to not using NeonJS for Network * Remove unsued functions * Fix lint errors * Refactor explorer * Fix typo * Revert back to local consts for ASSETS * Load info when modal loads * Rename to openExplorerTx * Pass retrieveTokenInfo to the token info modal * WIP * Change token to symbol * Add flow-typed for npm modules * Move declarations upper level * Correct GAS decimal length * Fix token info modal * Symbol > Asset * Add a border to the dashboard * Disable claim when claim amount is 0 * Fix lint errors * Fix recieve modal height * format balance * Preload token info when getting token balance (if it doesn't exist) * Refactor formatters * Drop the state and grab the info from the token props * Add number formatting * Use truncateToken * Rename formatNumber to formatBalance * Fix obtainTokenBalance * Increase modal size to show full address * Fix sending NEO/GAS * Remove unused functions/reducers * Remove unused state * Fix CopyToClipboard + Tooltips * hash lint error for now * Fix creating a new wallet * es6 * fixes private key verification * fix reset prices * Wif > WIF * validatePassphrase > validatePassphraseLengthLength * Consolidate wallet creation * Consolidate CreateWallet/EncryptKey * WIF -> encryptedWIF * Remove checkMatchingPassphrases and rename validatePassphrase * Remove async and and a check for the validity of the encrypted wif * remove unused style * WIP * Load settings on app init (#377) * Don't run coveralls when pushing (#379) * Don't run coveralls on local * Cleaner solution for: Don't run coveralls on local * Use new test-ci command for ci * Support for non-USD Currencies (#378) * Configurable currencies * Missed settings in the merge resolution commit * Fix lint issue * Add Cut/Copy/Paste context menus on input fields (#336) (#376) * #336 * Allow for 'paste' only * Resolve conflicts * Use neon-js cnc api * uppercase GAS and NEO * update snapshots * Capitlize * Remove set token info * Correct SymbolType/TokenType * Update symbol type * Add a missing onClick * Use React$Node * Rework formatting * Use the correct function * Add cleave.js and update neon-js * Extract the nep5 decimal adjust to a util, and support ledger transfer (WIP) * Update types * Add a silent flag * WIP * Fix formatting
CityOfZion · Dec 2, 2017 · f680874 · f680874
1 parent 2dbc24a
commit f680874
Show file tree

Hide file tree

Showing 24 changed files with 401 additions and 270 deletions.
diff --git a/__tests__/components/NetworkSwitch.test.js b/__tests__/components/NetworkSwitch.test.js
@@ -68,44 +68,50 @@ describe('NetworkSwitch', () => {
 
     await Promise.resolve().then().then().then().then()
     const actions = store.getActions()
-    expect(actions.length).toEqual(7)
+    expect(actions.length).toEqual(8)
     expect(actions[0]).toEqual({
       type: SET_NETWORK,
       payload: {
         network: 'TestNet'
       }
     })
     expect(actions[1]).toEqual({
+      type: SET_IS_LOADED,
+      payload: {
+        loaded: false
+      }
+    })
+    expect(actions[2]).toEqual({
       type: LOADING_TRANSACTIONS,
       payload: {
         isLoadingTransactions: true
       }
     })
-    expect(actions[2]).toEqual({
+    expect(actions[3]).toEqual({
       type: LOADING_TRANSACTIONS,
       payload: {
         isLoadingTransactions: false
       }
     })
-    expect(actions[3]).toEqual({
+    expect(actions[4]).toEqual({
       type: SET_TRANSACTION_HISTORY,
       payload: {
         transactions: []
       }
     })
-    expect(actions[4]).toEqual({
+    expect(actions[5]).toEqual({
       type: SET_HEIGHT,
       payload: {
         blockHeight: 586435
       }
     })
-    expect(actions[5]).toEqual({
+    expect(actions[6]).toEqual({
       type: SET_IS_LOADED,
       payload: {
         loaded: true
       }
     })
-    expect(actions[6]).toEqual({
+    expect(actions[7]).toEqual({
       type: SET_BALANCE,
       payload: {
         NEO: 1,

diff --git a/app/components/Button/Button.jsx b/app/components/Button/Button.jsx
@@ -2,25 +2,24 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import type { Children } from 'react'
-import { noop } from 'lodash'
-
 import styles from './Button.scss'
 
 type Props = {
-  children: Children,
+  children: React$Node,
   primary: boolean,
   cancel: boolean,
-  secondary: boolean
+  secondary: boolean,
+  onClick?: () => any
 }
 
 const Button = ({
   primary = true,
   secondary = false,
   cancel = false,
-  children
+  children,
+  onClick
 }: Props) =>
-  <button onClick={noop}
+  <button onClick={onClick}
     className={classNames(styles.button, {
       [styles.primary]: primary,
       [styles.secondary]: secondary,

diff --git a/app/components/Modals/BaseModal/BaseModal.jsx b/app/components/Modals/BaseModal/BaseModal.jsx
@@ -1,13 +1,12 @@
 // @flow
 import React from 'react'
-import type { Children } from 'react'
 import ReactModal from 'react-modal'
 import Close from 'react-icons/lib/md/close'
 import styles from './BaseModal.scss'
 
 type Props = {
     title: string,
-    children: Children,
+    children: React$Node,
     hideModal: Function,
     width?: string,
     height?: string,

diff --git a/app/components/Modals/SendModal/ConfirmDisplay.jsx b/app/components/Modals/SendModal/ConfirmDisplay.jsx
@@ -2,10 +2,12 @@
 import React from 'react'
 import Button from '../../Button'
 
+import { formatBalance } from '../../../core/formatters'
+
 type Props = {
   sendAddress: string,
   sendAmount: string,
-  symbol: TokenSymbolType,
+  symbol: SymbolType,
   confirmTransaction: Function,
   cancelTransaction: Function
 }
@@ -19,10 +21,12 @@ const ConfirmDisplay = ({
 }: Props) => (
   <div>
     <p>Please confirm the following transaction:</p>
-    <p>You are sending <strong>{sendAmount} {symbol}</strong> to:</p>
+    <p>You are sending <strong>{formatBalance(symbol, sendAmount)} {symbol}</strong> to:</p>
     <p><strong>{sendAddress}</strong></p>
-    <Button onClick={confirmTransaction}>Confirm</Button>
-    <Button cancel onClick={cancelTransaction}>Cancel</Button>
+    <div>
+      <Button onClick={confirmTransaction}>Confirm</Button>
+      <Button cancel onClick={cancelTransaction}>Cancel</Button>
+    </div>
   </div>
 )
 

diff --git a/app/components/Modals/SendModal/SendDisplay.jsx b/app/components/Modals/SendModal/SendDisplay.jsx
@@ -2,16 +2,17 @@
 import React from 'react'
 import classNames from 'classnames'
 
+import NumberInput from '../../NumberInput'
+
 import { ASSETS } from '../../../core/constants'
-import { isToken } from '../../../core/wallet'
-import { formatBalance, formatGAS, formatNEO, truncateGAS, truncateTokenBalance } from '../../../core/formatters'
+import { formatBalance, toFixedDecimals, COIN_DECIMAL_LENGTH } from '../../../core/formatters'
 
 import styles from './SendModal.scss'
 
 type Props = {
   sendAddress: string,
   sendAmount: string,
-  symbol: TokenSymbolType,
+  symbol: SymbolType,
   tokens: Object,
   onChangeHandler: Function,
   openAndValidate: Function,
@@ -42,30 +43,26 @@ const SendDisplay = ({
       </div>
       <div id='sendAmount' className={styles.column}>
         <label className={styles.label}>Amount:</label>
-        <input
-          type='number'
+        <NumberInput
+          options={{
+            numeralDecimalScale: COIN_DECIMAL_LENGTH
+          }}
           value={sendAmount}
           placeholder='Amount'
-          onChange={(e) => onChangeHandler('sendAmount', e.target.value)}
+          onChange={(e) => onChangeHandler('sendAmount', e.target.rawValue)}
         />
       </div>
       <div className={styles.percentRow}>
         {[25, 50, 75, 100].map((percent: number) => {
-          let value = percent * parseFloat(balance) / 100
-          if (symbol === ASSETS.NEO) {
-            value = Math.ceil(value)
-          } else if (symbol === ASSETS.GAS) {
-            value = truncateGAS(value)
-          } else {
-            value = truncateTokenBalance(value, tokens[symbol].info.decimals)
-          }
+          const value = percent * parseFloat(balance) / 100
           return (
             <button
               key={`percentButton${percent}`}
-              onClick={() => onChangeHandler('sendAmount', symbol === ASSETS.NEO ? Math.ceil(value) : value)}
+              onClick={() => onChangeHandler('sendAmount', symbol === ASSETS.NEO ? Math.ceil(value) : toFixedDecimals(value, COIN_DECIMAL_LENGTH))}
               className={styles.percentButton}>{percent}%</button>
           )
-        })}
+        })
+        }
       </div>
       <div id='sendAmount' className={styles.column}>
         <label className={styles.label}>Asset:</label>
@@ -80,14 +77,15 @@ const SendDisplay = ({
           </select>
         </div>
       </div>
-      <div>Sending NEP5 tokens requires holding at least 1 drop of GAS</div>
       <div id='sendAmount' className={styles.column}>
         <label className={styles.label}>Balance:</label>
-        {symbol === ASSETS.NEO && formatNEO(balance)}
-        {symbol === ASSETS.GAS && formatGAS(balance)}
-        {isToken(symbol) && formatBalance(balance, tokens[symbol].info.decimals)}
+        {formatBalance(symbol, balance)}
       </div>
-      <button className={classNames(styles.sendButton, {'disabled': sendButtonDisabled})} id='doSend' onClick={openAndValidate} disabled={sendButtonDisabled}>Send Asset</button>
+      <button
+        className={classNames(styles.sendButton, {'disabled': sendButtonDisabled})}
+        id='doSend'
+        onClick={openAndValidate}
+        disabled={sendButtonDisabled}>Send Asset</button>
     </div>
   )
 }

diff --git a/app/components/Modals/SendModal/SendModal.jsx b/app/components/Modals/SendModal/SendModal.jsx
@@ -57,20 +57,12 @@ class SendModal extends Component<Props, State> {
     const { sendTransaction, hideModal } = this.props
     const { sendAddress, sendAmount, symbol } = this.state
     sendTransaction(sendAddress, sendAmount, symbol).then(() => {
-      this.resetForm()
       hideModal()
     })
   }
 
   cancelTransaction = () => {
-    this.resetForm()
-  }
-
-  resetForm = () => {
     this.setState({
-      sendAmount: '',
-      sendAddress: '',
-      symbol: ASSETS.NEO,
       display: DISPLAY_MODES.SEND
     })
   }
@@ -94,6 +86,7 @@ class SendModal extends Component<Props, State> {
     if (updateBalance) {
       newState = {
         ...newState,
+        sendAmount: '',
         balance: this.getBalance(value)
       }
     }

diff --git a/app/components/Modals/TokenInfoModal/TokenInfoModal.jsx b/app/components/Modals/TokenInfoModal/TokenInfoModal.jsx
@@ -4,13 +4,13 @@ import React from 'react'
 import BaseModal from '../BaseModal'
 import Table from '../../Table'
 
-import { formatBalance } from '../../../core/formatters'
+import { formatBalance, formatThousands } from '../../../core/formatters'
 
 import styles from './TokenInfoModal.scss'
 
 type Props = {
     hideModal: Function,
-    token: TokenWithInfoType,
+    token: TokenType,
 }
 
 const TokenInfoModal = ({ hideModal, token }: Props) => (
@@ -37,15 +37,15 @@ const TokenInfoModal = ({ hideModal, token }: Props) => (
           </tr>
           <tr>
             <td>Total Supply:</td>
-            <td>{formatBalance(token.info.totalSupply)}</td>
+            <td>{formatThousands(token.info.totalSupply)}</td>
           </tr>
           <tr>
             <td>Decimals</td>
             <td>{token.info.decimals}</td>
           </tr>
           <tr>
             <td>Balance</td>
-            <td>{formatBalance(token.balance, token.info.decimals)}</td>
+            <td>{formatBalance(token.symbol, token.balance)}</td>
           </tr>
         </tbody>
       </Table>

diff --git a/app/components/NumberInput/NumberInput.jsx b/app/components/NumberInput/NumberInput.jsx
@@ -0,0 +1,41 @@
+// @flow
+import React from 'react'
+import Cleave from 'cleave.js/react'
+
+type Props = {
+  placeholder?: string,
+  onChange?: () => any,
+  value?: string | number,
+  options: {
+    numeralThousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none',
+    numeralIntegerScale?: number,
+    numeralDecimalScale?: number,
+    numeralDecimalMark?: string,
+    numeralPositiveOnly?: boolean,
+    stripLeadingZeroes?: boolean
+  },
+  onBlur?: () => any
+}
+
+const NumberInput = ({
+  options,
+  onChange,
+  placeholder,
+  value,
+  onBlur
+}: Props) =>
+  <Cleave
+    placeholder={placeholder}
+    onChange={onChange}
+    options={{
+      numeral: true,
+      numeralThousandsGroupStyle: 'thousand',
+      numeralPositiveOnly: true,
+      stripLeadingZeroes: true,
+      ...options
+    }}
+    value={value}
+    onBlur={onBlur}
+  />
+
+export default NumberInput
diff --git a/app/components/NumberInput/index.js b/app/components/NumberInput/index.js
@@ -0,0 +1 @@
+export { default } from './NumberInput'
diff --git a/app/components/Page/Page.jsx b/app/components/Page/Page.jsx
@@ -1,11 +1,10 @@
 // @flow
 import React from 'react'
-import type { Children } from 'react'
 import Logo from '../Logo'
 import Footer from '../Footer'
 
 type Props = {
-    children: Children,
+    children: React$Node,
     id?: string,
     className?: string
 }

diff --git a/app/components/Tooltip/Tooltip.jsx b/app/components/Tooltip/Tooltip.jsx
@@ -1,12 +1,11 @@
 // @flow
 import React from 'react'
-import type { Children } from 'react'
 
 import { Tooltip as Tippy } from 'react-tippy'
 
 type Props = {
   position: 'top' | 'left' | 'right' | 'bottom',
-  children: Children
+  children: React$Node
 }
 
 const Tooltip = ({ children, position = 'bottom', ...rest }: Props) =>

diff --git a/app/containers/App/App.jsx b/app/containers/App/App.jsx
@@ -1,12 +1,11 @@
 // @flow
 import React, { Component } from 'react'
-import type { Children } from 'react'
 
 import ModalRenderer from '../ModalRenderer'
 import Notifications from '../Notifications'
 
 type Props = {
-  children: Children,
+  children: React$Node,
   checkVersion: Function,
   initSettings: Function
 }

diff --git a/app/containers/NetworkSwitch/NetworkSwitch.jsx b/app/containers/NetworkSwitch/NetworkSwitch.jsx
@@ -36,9 +36,7 @@ export default class NetworkSwitch extends Component<Props> {
     const newNet = net === NETWORK.MAIN ? NETWORK.TEST : NETWORK.MAIN
     setNetwork(newNet)
     this.resetBalanceSync(newNet, address)
-    if (address !== null) {
-      loadWalletData(newNet, address)
-    }
+    loadWalletData(newNet, address, false)
   }
 
   render () {

diff --git a/app/containers/WalletInfo/TokensBalance.jsx b/app/containers/WalletInfo/TokensBalance.jsx
@@ -26,15 +26,15 @@ const tokens = ({ tokens, showModal }: Props) => (
     <tbody>
       {tokens && Object.keys(tokens).map((symbol) => {
         const token = tokens[symbol]
-        const { balance, info } = token
+        const { balance } = token
         return (
           <tr key={symbol}>
             <td
               className={styles.symbol}
               onClick={() => showModal(MODAL_TYPES.TOKEN_INFO, { token })}>
               <InfoOutline className={styles.symbolIcon} />{symbol}
             </td>
-            <td>{info ? formatBalance(balance, info.decimals) : balance}</td>
+            <td>{formatBalance(symbol, balance, true)}</td>
           </tr>
         )
       })}