WA-232 Display funds without decimals

src/routes/safe/component/SendToken/index.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import { BigNumber } from 'bignumber.js'
 import { connect } from 'react-redux'
 import Stepper from '~/components/Stepper'
 import { sleep } from '~/utils/timer'
@@ -8,6 +9,7 @@ import { type Balance } from '~/routes/safe/store/model/balance'
 import { createTransaction } from '~/wallets/createTransactions'
 import { getStandardTokenContract } from '~/routes/safe/store/actions/fetchBalances'
 import { EMPTY_DATA } from '~/wallets/ethTransactions'
+import { toNative } from '~/wallets/tokens'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
 import SendTokenForm, { TKN_DESTINATION_PARAM, TKN_VALUE_PARAM } from './SendTokenForm'
@@ -31,7 +33,7 @@ export const SEE_TXS_BUTTON_TEXT = 'VISIT TXS'
 
 const isEther = (symbol: string) => symbol === 'ETH'
 
-const getTransferData = async (tokenAddress: string, to: string, amount: number) => {
+const getTransferData = async (tokenAddress: string, to: string, amount: BigNumber) => {
   const StandardToken = await getStandardTokenContract()
   const myToken = await StandardToken.at(tokenAddress)
 
@@ -40,7 +42,6 @@ const getTransferData = async (tokenAddress: string, to: string, amount: number)
 
 const processTokenTransfer = async (safe: Safe, balance: Balance, to: string, amount: number, userAddress: string) => {
   const symbol = balance.get('symbol')
-
   const nonce = Date.now()
   const name = `Send ${amount} ${balance.get('symbol')} to ${to}`
   const value = isEther(symbol) ? amount : 0
@@ -48,7 +49,7 @@ const processTokenTransfer = async (safe: Safe, balance: Balance, to: string, am
   const destination = isEther(symbol) ? to : tokenAddress
   const data = isEther(symbol)
     ? EMPTY_DATA
-    : await getTransferData(tokenAddress, to, amount)
+    : await getTransferData(tokenAddress, to, await toNative(amount, balance.get('decimals')))
 
   return createTransaction(safe, name, destination, value, nonce, userAddress, data)
 }

src/routes/safe/store/actions/fetchBalances.js

@@ -18,11 +18,11 @@ export const getStandardTokenContract = async () => {
   return erc20Token
 }
 
-export const calculateBalanceOf = async (tokenAddress: string, address: string) => {
+export const calculateBalanceOf = async (tokenAddress: string, address: string, decimals: number) => {
   const erc20Token = await getStandardTokenContract()
 
   return erc20Token.at(tokenAddress)
-    .then(instance => instance.balanceOf(address).then(funds => funds.toString()))
+    .then(instance => instance.balanceOf(address).then(funds => funds.div(10 ** decimals).toString()))
     .catch(() => '0')
 }
 
@@ -53,7 +53,7 @@ export const fetchBalances = (safeAddress: string) => async (dispatch: ReduxDisp
 
   const json = await response.json()
   const balancesRecords = await Promise.all(json.map(async (item: BalanceProps) => {
-    const funds = await calculateBalanceOf(item.address, safeAddress)
+    const funds = await calculateBalanceOf(item.address, safeAddress, item.decimals)
     return makeBalance({ ...item, funds })
   }))
 

src/test/safe.dom.tokens.test.js

@@ -25,6 +25,7 @@ describe('DOM > Feature > SAFE ERC20 TOKENS', () => {
     // GIVEN
     const numTokens = 100
     const tokenAddress = await addTknTo(safeAddress, numTokens)
+
     await dispatchTknBalance(store, tokenAddress, safeAddress)
     // const StandardToken = await fetchBalancesAction.getStandardTokenContract()
     // const myToken = await StandardToken.at(tokenAddress)
@@ -39,13 +40,16 @@ describe('DOM > Feature > SAFE ERC20 TOKENS', () => {
     const expandBalance = buttons[EXPAND_BALANCE_INDEX]
     const receiver = accounts[2]
     await sendMoveTokensForm(SafeDom, expandBalance, 20, accounts[2])
-    await sleep(2000)
 
     // THEN
-    const safeFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, safeAddress)
+    const safeFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, safeAddress, 18)
     expect(Number(safeFunds)).toBe(80)
-    const receiverFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, receiver)
+    const receiverFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, receiver, 18)
     expect(Number(receiverFunds)).toBe(20)
+
+    const token = await getTokenContract(getWeb3(), accounts[0])
+    const nativeSafeFunds = await token.balanceOf(safeAddress)
+    expect(Number(nativeSafeFunds.valueOf())).toEqual(80 * (10 ** 18))
   })
 
   it('disables send token button when balance is 0', async () => {

src/test/utils/tokenMovements.js

@@ -6,6 +6,7 @@ import withdraw, { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/componen
 import { type Safe } from '~/routes/safe/store/model/safe'
 import Token from '#/test/FixedSupplyToken.json'
 import { ensureOnce } from '~/utils/singleton'
+import { toNative } from '~/wallets/tokens'
 
 export const addEtherTo = async (address: string, eth: string) => {
   const web3 = getWeb3()
@@ -45,7 +46,8 @@ export const addTknTo = async (safe: string, value: number) => {
   const accounts = await promisify(cb => getWeb3().eth.getAccounts(cb))
 
   const myToken = await getTokenContract(web3, accounts[0])
-  await myToken.transfer(safe, value, { from: accounts[0], gas: '5000000' })
+  const nativeValue = await toNative(value, 18)
+  await myToken.transfer(safe, nativeValue.valueOf(), { from: accounts[0], gas: '5000000' })
 
   return myToken.address
 }

src/test/utils/transactions/moveTokens.helper.js

@@ -45,8 +45,7 @@ export const sendMoveTokensForm = async (
 
 export const dispatchTknBalance = async (store: Store, tokenAddress: string, address: string) => {
   const fetchBalancesMock = jest.spyOn(fetchBalancesAction, 'fetchBalances')
-  const funds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, address)
-
+  const funds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, address, 18)
   const balances: Map<string, Balance> = Map().set('TKN', makeBalance({
     address: tokenAddress,
     name: 'Token',

src/wallets/tokens.js

@@ -0,0 +1,9 @@
+// @flow
+import { getWeb3 } from '~/wallets/getWeb3'
+import { BigNumber } from 'bignumber.js'
+
+export const toNative = async (amt: string | number | BigNumber, decimal: number): Promise<BigNumber> => {
+  const web3 = getWeb3()
+
+  return web3.toBigNumber(amt).mul(10 ** decimal)
+}