feat(TokenEnterAmount): add new flow to EnterAmount.tsx

e2e/src/usecases/Assets.js

@@ -20,7 +20,7 @@ async function validateSendFlow(tokenSymbol) {
   await element(by.text(recipientAddressDisplay)).atIndex(0).tap()
   await waitForElementByIdAndTap('SendOrInviteButton')
   await expect(
-    element(by.text(tokenSymbol).withAncestor(by.id('SendEnterAmount/TokenSelect')))
+    element(by.text(`${tokenSymbol} on Celo`).withAncestor(by.id('SendEnterAmount/TokenSelect')))
   ).toBeVisible()
   await element(by.id('BackChevron')).tap()
   await element(by.id('BackChevron')).tap()

e2e/src/usecases/HandleDeepLinkSend.js

@@ -64,7 +64,7 @@ export default HandleDeepLinkSend = () => {
         url: `celo://wallet/pay?address=${E2E_TEST_FAUCET}&currencyCode=USD&token=cUSD&displayName=TestFaucet`,
       })
       await waitForElementId('SendEnterAmount/TokenSelect', 10_000)
-      await expect(element(by.text('cUSD')).atIndex(0)).toBeVisible()
+      await expect(element(by.text('cUSD on Celo')).atIndex(0)).toBeVisible()
       await element(by.id('SendEnterAmount/TokenAmountInput')).replaceText('0.01')
       await element(by.id('SendEnterAmount/TokenAmountInput')).tapReturnKey()
       await waitForElementByIdAndTap('SendEnterAmount/ReviewButton', 30_000)

e2e/src/usecases/Send.js

@@ -50,13 +50,13 @@ export default Send = () => {
     it('Then should be able to change token', async () => {
       await element(by.id('SendEnterAmount/TokenSelect')).tap()
       await element(by.id('CELOSymbol')).tap()
-      await expect(element(by.text('CELO')).atIndex(0)).toBeVisible()
+      await expect(element(by.text('CELO on Celo')).atIndex(0)).toBeVisible()
       await element(by.id('SendEnterAmount/TokenSelect')).tap()
       await element(by.id('cUSDSymbol')).tap()
-      await expect(element(by.text('cUSD')).atIndex(0)).toBeVisible()
+      await expect(element(by.text('cUSD on Celo')).atIndex(0)).toBeVisible()
       await element(by.id('SendEnterAmount/TokenSelect')).tap()
       await element(by.id('cEURSymbol')).tap()
-      await expect(element(by.text('cEUR')).atIndex(0)).toBeVisible()
+      await expect(element(by.text('cEUR on Celo')).atIndex(0)).toBeVisible()
     })
 
     it('Then should be able to enter amount and navigate to review screen', async () => {
@@ -111,7 +111,7 @@ export default Send = () => {
     it('Then should be able to choose token', async () => {
       await element(by.id('SendEnterAmount/TokenSelect')).tap()
       await element(by.id('cEURSymbol')).tap()
-      await expect(element(by.text('cEUR')).atIndex(0)).toBeVisible()
+      await expect(element(by.text('cEUR on Celo')).atIndex(0)).toBeVisible()
     })
 
     it('Then should be able to enter amount and navigate to review screen', async () => {
@@ -167,7 +167,7 @@ export default Send = () => {
     it('Then should be able to select token', async () => {
       await element(by.id('SendEnterAmount/TokenSelect')).tap()
       await element(by.id('cUSDSymbol')).tap()
-      await expect(element(by.text('cUSD')).atIndex(0)).toBeVisible()
+      await expect(element(by.text('cUSD on Celo')).atIndex(0)).toBeVisible()
     })
 
     it('Then should be able to enter amount and navigate to review screen', async () => {

locales/base/translation.json

@@ -2208,6 +2208,7 @@
     "title": "Enter Amount",
     "selectToken": "Select a Token",
     "networkFee": "{{networkName}} Network Fee",
+    "networkFeeV1_97": "Network Fee",
     "lowerAmount": "Enter a lower amount",
     "maxAmountWarning": {
       "title": "Sending the maximum amount",

src/components/TokenDisplay.test.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
 import TokenDisplay, { formatValueToDisplay } from 'src/components/TokenDisplay'
+import { APPROX_SYMBOL } from 'src/components/TokenEnterAmount'
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { RootState } from 'src/redux/reducers'
 import { NetworkId } from 'src/transactions/types'
@@ -253,7 +254,7 @@ describe('TokenDisplay', () => {
           />
         </Provider>
       )
-      expect(getElementText(getByTestId('test'))).toEqual(`~10.00 cUSD`)
+      expect(getElementText(getByTestId('test'))).toEqual(`${APPROX_SYMBOL} 10.00 cUSD`)
     })
   })
 })

src/components/TokenDisplay.tsx

@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import { StyleProp, Text, TextStyle } from 'react-native'
+import { APPROX_SYMBOL } from 'src/components/TokenEnterAmount'
 import { LocalCurrencyCode, LocalCurrencySymbol } from 'src/localCurrency/consts'
 import { getLocalCurrencySymbol, usdToLocalCurrencyRateSelector } from 'src/localCurrency/selectors'
 import { useSelector } from 'src/redux/hooks'
@@ -81,7 +82,7 @@ function TokenDisplay({
         errorFallback
       ) : (
         <>
-          {showApprox && '~'}
+          {showApprox && `${APPROX_SYMBOL} `}
           {sign}
           {showLocalAmount && fiatSymbol}
           {amountToShow.isNaN()

src/components/TokenEnterAmount.test.tsx

@@ -13,6 +13,8 @@ import TokenEnterAmount, {
   formatNumber,
   getDisplayLocalAmount,
   getDisplayTokenAmount,
+  roundFiatValue,
+  unformatNumberForProcessing,
   useEnterAmount,
 } from './TokenEnterAmount'
 
@@ -65,6 +67,15 @@ describe('TokenEnterAmount', () => {
       .mocked(getNumberFormatSettings)
       .mockReturnValue({ decimalSeparator: '.', groupingSeparator: ',' })
 
+    expect(unformatNumberForProcessing('')).toBe('')
+    expect(unformatNumberForProcessing('0.25')).toBe('0.25')
+    expect(unformatNumberForProcessing('1,234.34567')).toBe('1234.34567')
+
+    expect(roundFiatValue(null)).toBe('')
+    expect(roundFiatValue(new BigNumber('0.01'))).toBe('0.01')
+    expect(roundFiatValue(new BigNumber('0.000001'))).toBe('0.000001')
+    expect(roundFiatValue(new BigNumber('1234.34567'))).toBe('1234.35')
+
     expect(formatNumber('')).toBe('')
     expect(formatNumber('123')).toBe('123')
     expect(formatNumber('1234')).toBe('1,234')
@@ -73,8 +84,6 @@ describe('TokenEnterAmount', () => {
     expect(formatNumber('123456789012345')).toBe('123,456,789,012,345')
     expect(formatNumber('12.34567')).toBe('12.34567')
     expect(formatNumber('-1234567.89')).toBe('-1,234,567.89')
-    expect(formatNumber('1234abc')).toBe('1,234abc')
-    expect(formatNumber('1234.56abc')).toBe('1,234.56abc')
 
     const { token } = defaultProps
     expect(getDisplayTokenAmount(null, token)).toBe('')
@@ -107,6 +116,15 @@ describe('TokenEnterAmount', () => {
       .mocked(getNumberFormatSettings)
       .mockReturnValue({ decimalSeparator: ',', groupingSeparator: '.' })
 
+    expect(unformatNumberForProcessing('')).toBe('')
+    expect(unformatNumberForProcessing('0,25')).toBe('0.25')
+    expect(unformatNumberForProcessing('1.234,34567')).toBe('1234.34567')
+
+    expect(roundFiatValue(null)).toBe('')
+    expect(roundFiatValue(new BigNumber('0.01'))).toBe('0.01')
+    expect(roundFiatValue(new BigNumber('0.000001'))).toBe('0.000001')
+    expect(roundFiatValue(new BigNumber('1234.34567'))).toBe('1234.35')
+
     expect(formatNumber('')).toBe('')
     expect(formatNumber('123')).toBe('123')
     expect(formatNumber('1234')).toBe('1.234')
@@ -115,8 +133,6 @@ describe('TokenEnterAmount', () => {
     expect(formatNumber('123456789012345')).toBe('123.456.789.012.345')
     expect(formatNumber('12.34567')).toBe('12,34567')
     expect(formatNumber('-1234567.89')).toBe('-1.234.567,89')
-    expect(formatNumber('1234abc')).toBe('1.234abc')
-    expect(formatNumber('1234.56abc')).toBe('1.234,56abc')
 
     const { token } = defaultProps
     expect(getDisplayTokenAmount(null, token)).toBe('')
@@ -163,6 +179,7 @@ describe('TokenEnterAmount', () => {
           decimals: 6,
           tokenId: mockUSDCTokenId,
           priceUsd: new BigNumber(1.001),
+          balance: new BigNumber(1500.76),
         } as TokenBalance,
       })
 
@@ -173,12 +190,10 @@ describe('TokenEnterAmount', () => {
       expect(result.current.amount).toBe('1234.678')
       expect(result.current.processedAmounts).toStrictEqual({
         token: {
-          amount: '1234.678',
           bignum: new BigNumber('1234.678'),
           displayAmount: '1,234.678 USDC',
         },
         local: {
-          amount: '1235.91',
           bignum: new BigNumber('1235.912678'),
           displayAmount: '$1,235.91',
         },
@@ -193,6 +208,7 @@ describe('TokenEnterAmount', () => {
           decimals: 6,
           tokenId: mockUSDCTokenId,
           priceUsd: new BigNumber(1.001),
+          balance: new BigNumber(1500.76),
         } as TokenBalance,
       })
 
@@ -203,12 +219,10 @@ describe('TokenEnterAmount', () => {
       expect(result.current.amount).toBe('1234.67')
       expect(result.current.processedAmounts).toStrictEqual({
         local: {
-          amount: '1234.67',
           bignum: new BigNumber('1234.67'),
           displayAmount: '$1,234.67',
         },
         token: {
-          amount: '1233.436563',
           bignum: new BigNumber('1233.436563'),
           displayAmount: '1,233.436563 USDC',
         },