diff --git a/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx b/app/screens/AppNavigator/screens/Balances/BalancesScreen.tsx index a1228ce8c6..23b39b1929 100644 --- 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: () = diff --git a/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx b/app/screens/AppNavigator/screens/Balances/ConvertScreen.tsx index 73bc0310cf..53029fec38 100644 --- 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 diff --git a/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx b/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx index 1cd4c0aa23..2d908c540b 100644 --- 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 { if (hasPendingJob) { diff --git a/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.test.tsx b/app/screens/AppNavigator/screens/Balances/screens/TokenDetailScreen.test.tsx index 4b04635bee..c13c181c16 100644 --- 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 = { + 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 = ( - + + + ); 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 = { + 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 = ( - + + + ); 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 = { + 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 = ( - + + + ); 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 index b80486607b..f5422f956a 100644 --- 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 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 ( diff --git a/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx b/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx index 1b09c4b272..459c11327c 100644 --- 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 diff --git a/app/screens/AppNavigator/screens/Dex/DexScreen.tsx b/app/screens/AppNavigator/screens/Dex/DexScreen.tsx index b599f82691..5a1133c17e 100644 --- a/app/screens/AppNavigator/screens/Dex/DexScreen.tsx +++ b/app/screens/AppNavigator/screens/Dex/DexScreen.tsx @@ -7,6 +7,7 @@ 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' @@ -14,6 +15,7 @@ import { useWalletAddressContext } from '../../../../contexts/WalletAddressConte 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>>([]) const dispatch = useDispatch() const navigation = useNavigation>() + 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>>(({ 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 index 9a0f3e9bed..888e1dcf49 100644 --- 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