Update balances on every transaction (#409)

BirthdayResearch · Aug 4, 2021 · 123794a · 123794a
1 parent 4500aa4
commit 123794a
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 21 deletions.
diff --git a/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx b/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx
@@ -88,7 +88,7 @@ function BalanceItemRow ({ token, onPress }: { token: WalletToken, onPress: () =
           </Text>
         </View>
         <NumberFormat
-          value={token.amount} decimalScale={3} thousandSeparator displayType='text'
+          value={token.amount} decimalScale={4} thousandSeparator displayType='text'
           renderText={(value) =>
             <View style={tailwind('flex-row items-center')}>
               <Text style={tailwind('mr-2')} testID={`balances_row_${token.id}_amount`}>

diff --git a/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx
@@ -15,8 +15,8 @@ import { Logging } from '../../../../api'
 import { Text, TextInput, View } from '../../../../components'
 import { Button } from '../../../../components/Button'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
-import { AmountButtonTypes, SetAmountButton } from '../../../../components/SetAmountButton'
 import { SectionTitle } from '../../../../components/SectionTitle'
+import { AmountButtonTypes, SetAmountButton } from '../../../../components/SetAmountButton'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { RootState } from '../../../../store'
 import { hasTxQueued, ocean } from '../../../../store/ocean'
@@ -48,7 +48,7 @@ export function ConvertScreen (props: Props): JSX.Element {
     const [source, target] = getDFIBalances(mode, tokens)
     setSourceToken(source)
     setTargetToken(target)
-  }, [mode])
+  }, [mode, JSON.stringify(tokens)])
 
   if (sourceToken === undefined || targetToken === undefined) {
     return <LoadingScreen />

diff --git a/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx
@@ -92,7 +92,7 @@ export function SendScreen ({ route, navigation }: Props): JSX.Element {
     if (t !== undefined) {
       setToken({ ...t })
     }
-  }, [tokens])
+  }, [JSON.stringify(tokens)])
 
   async function onSubmit (): Promise<void> {
     if (hasPendingJob) {

diff --git a/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.test.tsx b/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.test.tsx
@@ -1,9 +1,54 @@
+import { configureStore } from "@reduxjs/toolkit";
 import { fireEvent, render } from "@testing-library/react-native";
 import * as React from "react";
+import { Provider } from "react-redux";
+import { RootState } from "../../../../../store";
+import { wallet } from "../../../../../store/wallet";
 import { TokenDetailScreen } from "./TokenDetailScreen";
 
+jest.mock("../../../../../hooks/wallet/TokensAPI", () => ({
+  useTokensAPI: () => [
+    {
+      id: '0_utxo',
+      symbol: 'DFI',
+      symbolKey: 'DFI',
+      isDAT: true,
+      isLPS: false,
+      amount: '100000',
+      name: 'Defichain'
+    },
+    {
+      id: '0',
+      symbol: 'DFI',
+      symbolKey: 'DFI',
+      isDAT: true,
+      isLPS: false,
+      amount: '100000',
+      name: 'Defi'
+    }, {
+      id: '1',
+      symbol: 'BTC',
+      symbolKey: 'BTC',
+      isDAT: true,
+      isLPS: false,
+      amount: '100000',
+      name: 'Bitcoin'
+    }]
+}));
+
 describe('token detail screen', () => {
   it('should accept DST', async () => {
+    const initialState: Partial<RootState> = {
+      wallet: {
+        address: 'bcrt1q6np0fh47ykhznjhrtfvduh73cgjg32yac8t07d',
+        utxoBalance: '77',
+        tokens: []
+      }
+    };
+    const store = configureStore({
+      preloadedState: initialState,
+      reducer: { wallet: wallet.reducer }
+    })
     const navigation: any = {
       navigate: jest.fn(),
     }
@@ -15,14 +60,16 @@ describe('token detail screen', () => {
           symbolKey: 'BTC',
           isDAT: true,
           isLPS: false,
-          amount: '100000',
+          amount: '777',
           name: 'Bitcoin'
         }
       }
     }
     const spy = jest.spyOn(navigation, 'navigate')
     const component = (
-      <TokenDetailScreen navigation={navigation} route={route} />
+      <Provider store={store}>
+        <TokenDetailScreen navigation={navigation} route={route} />
+      </Provider>
     );
     const rendered = render(component)
     const sendButton = await rendered.findByTestId('send_button')
@@ -32,6 +79,17 @@ describe('token detail screen', () => {
   })
 
   it('should accept UTXO DFI', async () => {
+    const initialState: Partial<RootState> = {
+      wallet: {
+        address: 'bcrt1q6np0fh47ykhznjhrtfvduh73cgjg32yac8t07d',
+        utxoBalance: '77',
+        tokens: []
+      }
+    };
+    const store = configureStore({
+      preloadedState: initialState,
+      reducer: { wallet: wallet.reducer }
+    })
     const navigation: any = {
       navigate: jest.fn(),
     }
@@ -50,7 +108,9 @@ describe('token detail screen', () => {
     }
     const spy = jest.spyOn(navigation, 'navigate')
     const component = (
-      <TokenDetailScreen navigation={navigation} route={route} />
+      <Provider store={store}>
+        <TokenDetailScreen navigation={navigation} route={route} />
+      </Provider>
     );
     const rendered = render(component)
     const receiveButton = await rendered.findByTestId('receive_button')
@@ -60,6 +120,17 @@ describe('token detail screen', () => {
   })
 
   it('should accept Token DFI', async () => {
+    const initialState: Partial<RootState> = {
+      wallet: {
+        address: 'bcrt1q6np0fh47ykhznjhrtfvduh73cgjg32yac8t07d',
+        utxoBalance: '77',
+        tokens: []
+      }
+    };
+    const store = configureStore({
+      preloadedState: initialState,
+      reducer: { wallet: wallet.reducer }
+    })
     const navigation: any = {
       navigate: jest.fn(),
     }
@@ -78,7 +149,9 @@ describe('token detail screen', () => {
     }
     const spy = jest.spyOn(navigation, 'navigate')
     const component = (
-      <TokenDetailScreen navigation={navigation} route={route} />
+      <Provider store={store}>
+        <TokenDetailScreen navigation={navigation} route={route} />
+      </Provider>
     );
     const rendered = render(component)
     const convertButton = await rendered.findByTestId('convert_button')

diff --git a/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.tsx
@@ -1,10 +1,11 @@
 import { MaterialIcons } from '@expo/vector-icons'
 import { StackScreenProps } from '@react-navigation/stack'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ScrollView, TouchableOpacity, View } from 'react-native'
 import NumberFormat from 'react-number-format'
 import { Text } from '../../../../../components'
 import { SectionTitle } from '../../../../../components/SectionTitle'
+import { useTokensAPI } from '../../../../../hooks/wallet/TokensAPI'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'
 import { BalanceParamList } from '../BalancesNavigator'
@@ -16,11 +17,19 @@ interface TokenActionItems {
   onPress: () => void
   testID: string
 }
-
 type Props = StackScreenProps<BalanceParamList, 'TokenDetailScreen'>
 
 export function TokenDetailScreen ({ route, navigation }: Props): JSX.Element {
-  const [token] = useState(route.params.token)
+  const [token, setToken] = useState(route.params.token)
+  const tokens = useTokensAPI()
+
+  useEffect(() => {
+    const t = tokens.find((t) => t.id === token.id)
+    if (t !== undefined) {
+      setToken({ ...t })
+    }
+  }, [JSON.stringify(tokens)])
+
   return (
     <ScrollView style={tailwind('bg-gray-100')}>
       <View style={tailwind('flex-col bg-white px-2 py-8 mb-4 justify-center items-center border-b border-gray-300')}>

diff --git a/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx b/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx
@@ -9,8 +9,8 @@ import NumberFormat from 'react-number-format'
 import { Text, TextInput, View } from '../../../../components'
 import { Button } from '../../../../components/Button'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
-import { AmountButtonTypes, SetAmountButton } from '../../../../components/SetAmountButton'
 import { SectionTitle } from '../../../../components/SectionTitle'
+import { AmountButtonTypes, SetAmountButton } from '../../../../components/SetAmountButton'
 import { useTokensAPI } from '../../../../hooks/wallet/TokensAPI'
 import { tailwind } from '../../../../tailwind'
 import { translate } from '../../../../translations'
@@ -83,7 +83,7 @@ export function AddLiquidityScreen (props: Props): JSX.Element {
     })
     if (addressTokenA !== undefined) setBalanceA(new BigNumber(addressTokenA.amount))
     if (addressTokenB !== undefined) setBalanceB(new BigNumber(addressTokenB.amount))
-  }, [props.route.params.pair, tokens])
+  }, [props.route.params.pair, JSON.stringify(tokens)])
 
   if (pair === undefined) {
     return <LoadingScreen />

diff --git a/app/screens/AppNavigator/screens/Dex/DexScreen.tsx b/app/screens/AppNavigator/screens/Dex/DexScreen.tsx
@@ -7,13 +7,15 @@ import { useEffect, useState } from 'react'
 import { SectionList, TouchableOpacity } from 'react-native'
 import NumberFormat from 'react-number-format'
 import { useDispatch, useSelector } from 'react-redux'
+import { Logging } from '../../../../api'
 import { Text, View } from '../../../../components'
 import { getTokenIcon } from '../../../../components/icons/tokens/_index'
 import { SectionTitle } from '../../../../components/SectionTitle'
 import { useWalletAddressContext } from '../../../../contexts/WalletAddressContext'
 import { useWhaleApiClient } from '../../../../contexts/WhaleContext'
 import { fetchTokens } from '../../../../hooks/wallet/TokensAPI'
 import { RootState } from '../../../../store'
+import { tokensSelector } from '../../../../store/wallet'
 import { tailwind } from '../../../../tailwind'
 import { translate } from '../../../../translations'
 import { DexParamList } from './DexNavigator'
@@ -24,20 +26,22 @@ export function DexScreen (): JSX.Element {
   const [pairs, setPairs] = useState<Array<DexItem<PoolPairData>>>([])
   const dispatch = useDispatch()
   const navigation = useNavigation<NavigationProp<DexParamList>>()
+  const tokens = useSelector((state: RootState) => tokensSelector(state.wallet))
+  const yourLPTokens = useSelector(() => tokens.filter(({ isLPS }) => isLPS).map(data => ({
+    type: 'your',
+    data: data
+  })))
 
   useEffect(() => {
     // TODO(fuxingloh): does not auto refresh currently, but not required for MVP. Due to limited PP availability
+    // Currently, refreshes on token balance update (to update poolpairs) or when there's LP token added
     fetchTokens(client, address, dispatch)
     client.poolpairs.list(50).then(pairs => {
       setPairs(pairs.map(data => ({ type: 'available', data: data })))
     }).catch((err) => {
-      console.log(err)
+      Logging.error(err)
     })
-  }, [])
-
-  const yourLPTokens = useSelector<RootState, Array<DexItem<AddressToken>>>(({ wallet }: RootState) => {
-    return wallet.tokens.filter(({ isLPS }) => isLPS).map(data => ({ type: 'your', data: data }))
-  })
+  }, [JSON.stringify(tokens)])
 
   const onAdd = (data: PoolPairData): void => {
     navigation.navigate('AddLiquidity', { pair: data })

diff --git a/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx b/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx
@@ -14,8 +14,8 @@ import { Logging } from '../../../../../api'
 import { Text, TextInput } from '../../../../../components'
 import { Button } from '../../../../../components/Button'
 import { getTokenIcon } from '../../../../../components/icons/tokens/_index'
-import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton'
 import { SectionTitle } from '../../../../../components/SectionTitle'
+import { AmountButtonTypes, SetAmountButton } from '../../../../../components/SetAmountButton'
 import { useWallet } from '../../../../../contexts/WalletContext'
 import { useTokensAPI } from '../../../../../hooks/wallet/TokensAPI'
 import { RootState } from '../../../../../store'
@@ -97,7 +97,7 @@ export function PoolSwapScreen ({ route }: Props): JSX.Element {
       symbol: tokenBSymbol
     }
     setTokenB(b)
-  }, [route.params.poolpair, tokens])
+  }, [route.params.poolpair, JSON.stringify(tokens)])
 
   if (tokenA === undefined || tokenB === undefined) {
     return <LoadingScreen />