From d12c218d5b33d1055e20b77b6a13e942626e899e Mon Sep 17 00:00:00 2001 From: Kirill Ageychenko Date: Wed, 18 Dec 2024 17:53:04 +0700 Subject: [PATCH 1/3] fix: balance placeholders --- src/app.tsx | 3 + .../account-info/account-info-header.tsx | 45 +++-- src/components/account-info/account-info.tsx | 3 + src/components/stacked-vested-tokens.tsx | 111 ++++++++---- .../total-value-info-header.tsx | 3 +- .../wallet-card/balance-info-details.tsx | 13 +- .../wallet-card/balance-info-total.tsx | 76 ++++---- src/components/wallet-card/card-name.tsx | 7 +- .../wallet-card/protection-badge.tsx | 153 +++++++++-------- src/components/wallet-card/wallet-card.tsx | 162 ++++++++++-------- src/helpers/address-utils.ts | 23 ++- src/models/wallet/wallet.store.ts | 107 ++++++++---- .../HomeStack/HomeFeedStack/account-info.tsx | 3 + .../HomeStack/SettingsStack/settings-test.tsx | 3 + src/screens/settings-developer-tools.tsx | 12 +- 15 files changed, 434 insertions(+), 290 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index b87d5529c..b47b7e897 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -115,6 +115,9 @@ export const App = observer(() => { }, [AppStore.networkLoggerEnabled]); useEffect(() => { + if (AppStore.isInitialized) { + return; + } const splashTimer = setTimeout(() => { hideModal(ModalType.splash); }, SPLASH_TIMEOUT_MS); diff --git a/src/components/account-info/account-info-header.tsx b/src/components/account-info/account-info-header.tsx index 7be43e18b..bcfb45e4c 100644 --- a/src/components/account-info/account-info-header.tsx +++ b/src/components/account-info/account-info-header.tsx @@ -22,6 +22,7 @@ import {Balance} from '@app/services/balance'; import {WalletType} from '@app/types'; import {StackedVestedTokens} from '../stacked-vested-tokens'; +import {Placeholder} from '../ui/placeholder'; const CARD_WIDTH = 78; const CARD_RADIUS = 8; @@ -34,6 +35,7 @@ export type AccountInfoProps = { total: Balance; vested: Balance; unlock: Date; + isBalanceLoading: boolean; onPressInfo: () => void; onSend: () => void; onReceive: () => void; @@ -46,10 +48,11 @@ export const AccountInfoHeader = ({ total, vested, available, + unlock, + isBalanceLoading, onPressInfo, onSend, onReceive, - unlock, }: AccountInfoProps) => { const formattedAddress = useMemo( () => shortAddress(wallet.providerSpecificAddress, '•'), @@ -68,10 +71,20 @@ export const AccountInfoHeader = ({ colorPattern={wallet.colorPattern} /> - + + {isBalanceLoading && ( + <> + + + + + + )} + + {formattedAddress} @@ -85,18 +98,16 @@ export const AccountInfoHeader = ({ - - - - + ; + isBalanceLoading: boolean; onPressInfo: () => void; onSend: () => void; onReceive: () => void; @@ -57,6 +58,7 @@ export const AccountInfo = observer( unlock, vested, tokens, + isBalanceLoading, onPressInfo, onSend, onReceive, @@ -87,6 +89,7 @@ export const AccountInfo = observer( total={total} unlock={unlock} vested={vested} + isBalanceLoading={isBalanceLoading} onPressInfo={onPressInfo} onSend={onSend} onReceive={onReceive} diff --git a/src/components/stacked-vested-tokens.tsx b/src/components/stacked-vested-tokens.tsx index 47adfdced..c5655545a 100644 --- a/src/components/stacked-vested-tokens.tsx +++ b/src/components/stacked-vested-tokens.tsx @@ -9,9 +9,18 @@ import {I18N, getText} from '@app/i18n'; import {Balance} from '@app/services/balance'; import {DashedLine} from './dashed-line'; -import {Icon, IconButton, IconsName, Spacer, Text, TextVariant} from './ui'; +import { + First, + Icon, + IconButton, + IconsName, + Spacer, + Text, + TextVariant, +} from './ui'; import {BarChart} from './ui/bar-chart'; import {BarChartItem} from './ui/bar-chart/bar-chart-item'; +import {Placeholder} from './ui/placeholder'; export interface StackedVestedTokensProps { lockedBalance?: Balance; @@ -19,8 +28,9 @@ export interface StackedVestedTokensProps { stakingBalance?: Balance; availableBalance?: Balance; unlock: Date; - onPressInfo(): void; totalBalance?: Balance; + isBalanceLoading: boolean; + onPressInfo(): void; } const calculateDistanceToNow = (endDate: Date) => { @@ -36,9 +46,10 @@ export function StackedVestedTokens({ lockedBalance = Balance.Empty, stakingBalance = Balance.Empty, vestedBalance = Balance.Empty, - onPressInfo, unlock, totalBalance, + isBalanceLoading, + onPressInfo, }: StackedVestedTokensProps) { const {width} = useWindowDimensions(); const vestedUnlockDescription = useMemo(() => { @@ -86,17 +97,26 @@ export function StackedVestedTokens({ - - + + {isBalanceLoading && ( + + + + )} + <> + + + + - - + + {isBalanceLoading && ( + + + + )} + <> + + + + {lockedBalance?.isPositive() && ( <> @@ -130,17 +159,27 @@ export function StackedVestedTokens({ - - + + {isBalanceLoading && ( + + + + )} + <> + + + + + diff --git a/src/components/total-value-info/total-value-info-header.tsx b/src/components/total-value-info/total-value-info-header.tsx index 201420937..dd52b77b5 100644 --- a/src/components/total-value-info/total-value-info-header.tsx +++ b/src/components/total-value-info/total-value-info-header.tsx @@ -6,7 +6,7 @@ import {Color} from '@app/colors'; import {First, Spacer, Text, TextVariant} from '@app/components/ui'; import {createTheme} from '@app/helpers'; import {I18N} from '@app/i18n'; -import {BalanceModel} from '@app/models/wallet'; +import {BalanceModel, Wallet} from '@app/models/wallet'; import {StackedVestedTokens} from '../stacked-vested-tokens'; @@ -49,6 +49,7 @@ export const TotalValueInfoHeader = ({ stakingBalance={balance?.staked} onPressInfo={onPressInfo} unlock={balance?.nextVestingUnlockDate} + isBalanceLoading={Wallet.isBalancesLoading} /> diff --git a/src/components/wallet-card/balance-info-details.tsx b/src/components/wallet-card/balance-info-details.tsx index 99146026a..781e28232 100644 --- a/src/components/wallet-card/balance-info-details.tsx +++ b/src/components/wallet-card/balance-info-details.tsx @@ -15,21 +15,26 @@ import { import {Placeholder} from '@app/components/ui/placeholder'; import {createTheme} from '@app/helpers'; import {I18N} from '@app/i18n'; -import {Wallet} from '@app/models/wallet'; import {Balance} from '@app/services/balance'; type BalanceInfoDetailsProps = { total?: Balance; locked?: Balance; showLockedTokens: boolean; + isBalanceLoading: boolean; }; export const BalanceInfoDetails = observer( - ({total, locked, showLockedTokens}: BalanceInfoDetailsProps) => { + ({ + total, + locked, + showLockedTokens, + isBalanceLoading, + }: BalanceInfoDetailsProps) => { return ( - {Wallet.isBalancesLoading && ( + {isBalanceLoading && ( <> @@ -50,7 +55,7 @@ export const BalanceInfoDetails = observer( {!!total?.toFiat() && } {showLockedTokens && ( - {Wallet.isBalancesLoading && ( + {isBalanceLoading && ( <> diff --git a/src/components/wallet-card/balance-info-total.tsx b/src/components/wallet-card/balance-info-total.tsx index ee4e3cb30..8a7813d1a 100644 --- a/src/components/wallet-card/balance-info-total.tsx +++ b/src/components/wallet-card/balance-info-total.tsx @@ -15,53 +15,59 @@ import { import {Placeholder} from '@app/components/ui/placeholder'; import {createTheme} from '@app/helpers'; import {Currencies} from '@app/models/currencies'; -import {Wallet} from '@app/models/wallet'; import {Balance} from '@app/services/balance'; import {CARD_ACTION_CONTAINER_BG} from '@app/variables/common'; type BalanceInfoTotalProps = { total?: Balance; + isBalanceLoading: boolean; }; -export const BalanceInfoTotal = observer(({total}: BalanceInfoTotalProps) => { - const parsedTotal = useMemo(() => { - let result = total; +export const BalanceInfoTotal = observer( + ({total, isBalanceLoading}: BalanceInfoTotalProps) => { + const parsedTotal = useMemo(() => { + let result = total; - if (!result) { - result = Balance.Empty; - } + if (!result) { + result = Balance.Empty; + } - return result.toBalanceString('auto'); - }, [total, Currencies.selectedCurrency, Currencies.isRatesAvailable]); + return result.toBalanceString('auto'); + }, [total, Currencies.selectedCurrency, Currencies.isRatesAvailable]); - return ( - - {Wallet.isBalancesLoading && ( - <> - - - - - - )} - - - {parsedTotal} - + return ( + + {isBalanceLoading && ( + <> + + + + + + )} + + + {parsedTotal} + - - + + + - - - ); -}); + + ); + }, +); const styles = createTheme({ row: { diff --git a/src/components/wallet-card/card-name.tsx b/src/components/wallet-card/card-name.tsx index 5bf9174cb..a1e48f232 100644 --- a/src/components/wallet-card/card-name.tsx +++ b/src/components/wallet-card/card-name.tsx @@ -8,16 +8,17 @@ import {Icon, IconsName, Spacer, Text, TextVariant} from '@app/components/ui'; import {CopyMenu} from '@app/components/ui/copy-menu'; import {createTheme} from '@app/helpers'; import {shortAddress} from '@app/helpers/short-address'; -import {Wallet, WalletModel} from '@app/models/wallet'; +import {WalletModel} from '@app/models/wallet'; type CardNameProps = { wallet: WalletModel; onAccountInfo: () => void; testID?: string; + isBalanceLoading: boolean; }; export const CardName = observer( - ({wallet, onAccountInfo, testID}: CardNameProps) => { + ({wallet, onAccountInfo, testID, isBalanceLoading}: CardNameProps) => { const formattedAddress = useMemo( () => shortAddress(wallet?.providerSpecificAddress ?? '', '•'), [wallet?.providerSpecificAddress], @@ -32,7 +33,7 @@ export const CardName = observer( ellipsizeMode="tail" numberOfLines={1} suppressHighlighting={true} - disabled={Wallet.isBalancesLoading} + disabled={isBalanceLoading} onPress={onAccountInfo}> {wallet.name} diff --git a/src/components/wallet-card/protection-badge.tsx b/src/components/wallet-card/protection-badge.tsx index 12b4b1ab6..73dd08f70 100644 --- a/src/components/wallet-card/protection-badge.tsx +++ b/src/components/wallet-card/protection-badge.tsx @@ -5,6 +5,7 @@ import {View} from 'react-native'; import {Color} from '@app/colors'; import { + First, Icon, IconButton, IconsName, @@ -81,81 +82,81 @@ export const ProtectionBadge = ({ return ( - {protectionStatus === ProtectionStatus.empty && ( - <> - - - - - - - - )} - {protectionStatus === ProtectionStatus.partially && ( - <> - - - - - - - - )} - {!!walletConnectSessions?.length && ( - <> - - - - - - - - )} - {protectionStatus === ProtectionStatus.full && ( - <> - - - - - - - - )} - {([WalletType.hot, WalletType.ledgerBt].includes(wallet.type) || - isImported) && ( + + {protectionStatus === ProtectionStatus.empty && ( + <> + + + + + + + + )} + {protectionStatus === ProtectionStatus.partially && ( + <> + + + + + + + + )} + {!!walletConnectSessions?.length && ( + <> + + + + + + + + )} + {protectionStatus === ProtectionStatus.full && ( + <> + + + + + + + + )} + <> @@ -168,7 +169,7 @@ export const ProtectionBadge = ({ - )} + ); }; diff --git a/src/components/wallet-card/wallet-card.tsx b/src/components/wallet-card/wallet-card.tsx index 06acf8449..9b0b4d3af 100644 --- a/src/components/wallet-card/wallet-card.tsx +++ b/src/components/wallet-card/wallet-card.tsx @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import {SessionTypes} from '@walletconnect/types'; +import {observer} from 'mobx-react'; import { StyleSheet, TouchableWithoutFeedback, @@ -19,7 +20,7 @@ import { import {createTheme} from '@app/helpers'; import {I18N} from '@app/i18n'; import {Provider} from '@app/models/provider'; -import {BalanceModel, WalletModel} from '@app/models/wallet'; +import {BalanceModel, Wallet, WalletModel} from '@app/models/wallet'; import {addOpacityToColor} from '@app/utils'; import {SHADOW_L} from '@app/variables/shadows'; @@ -43,81 +44,94 @@ export type BalanceProps = { isSecondMnemonic: boolean; }; -export const WalletCard = ({ - testID, - wallet, - walletConnectSessions, - showLockedTokens, - onPressSend, - onPressReceive, - onPressWalletConnect, - onPressProtection, - onPressAccountInfo, - balance, - isSecondMnemonic, -}: BalanceProps) => { - const {locked, total} = balance ?? {}; - const [cardState, setCardState] = useState('loading'); - const screenWidth = useWindowDimensions().width; +export const WalletCard = observer( + ({ + testID, + wallet, + walletConnectSessions, + showLockedTokens, + onPressSend, + onPressReceive, + onPressWalletConnect, + onPressProtection, + onPressAccountInfo, + balance, + isSecondMnemonic, + }: BalanceProps) => { + const {locked, total} = balance ?? {}; + const [cardState, setCardState] = useState('loading'); + const screenWidth = useWindowDimensions().width; - const onAccountInfo = () => { - onPressAccountInfo(wallet?.address); - }; + const onAccountInfo = () => { + onPressAccountInfo(wallet?.address); + }; - return ( - { - setCardState('laded'); - }}> - - - - - - - - - - - {/* TODO: add tron support */} - {Provider.selectedProvider.isTron && !wallet.isSupportTron && ( - - - - )} - - ); -}; + const isBalanceLoading = Wallet.checkWalletBalanceLoading(wallet); + + return ( + { + setCardState('laded'); + }}> + + + + + + + + + + + {/* TODO: add tron support */} + {Provider.selectedProvider.isTron && !wallet.isSupportTron && ( + + + + )} + + ); + }, +); const styles = createTheme({ container: { diff --git a/src/helpers/address-utils.ts b/src/helpers/address-utils.ts index bcee886c7..fb8bae3b3 100644 --- a/src/helpers/address-utils.ts +++ b/src/helpers/address-utils.ts @@ -266,15 +266,20 @@ export class AddressUtils { network: NetworkProviderTypes, ) { const converterFn = AddressUtils.getConverterByNetwork(network); - return addresses.map(address => { - if ( - network === NetworkProviderTypes.TRON && - AddressUtils.isTronAddress(address) - ) { - return address; - } - return converterFn(address); - }); + + const mapped = addresses + .map(address => { + if ( + network === NetworkProviderTypes.TRON && + AddressUtils.isTronAddress(address) + ) { + return address; + } + return converterFn(address); + }) + .filter(v => !!v && !!v.trim()); + + return Array.from(new Set(mapped)); } static getWalletByAddress(address: string) { diff --git a/src/models/wallet/wallet.store.ts b/src/models/wallet/wallet.store.ts index d55ac42c9..050cc34df 100644 --- a/src/models/wallet/wallet.store.ts +++ b/src/models/wallet/wallet.store.ts @@ -104,6 +104,7 @@ class WalletStore implements RPCObserver { key: 'balances', deserialize: (value: TBalancesSerialized) => { try { + Logger.log(JSON.stringify(value, null, 2)); const deserialized: TBalances = {}; for (const chainId of Object.keys(value)) { @@ -364,67 +365,103 @@ class WalletStore implements RPCObserver { get isBalancesLoading() { return !this.isBalancesLoaded; } + get isBalancesLoaded() { - return ( - Provider.isAllNetworks || - Object.keys(this.balances[Provider.selectedProvider.ethChainId] || {}) - .length === this.wallets.length - ); + if (Provider.isAllNetworks) { + return this.getBalances( + this.wallets[0]?.address, + Provider.selectedProvider, + false, + )?.total; + } + return this.balances[Provider.selectedProvider.ethChainId]; } - private _calculateAllNetworksBalance = (address: string) => { + /** + * @returns {boolean} true if balance not loaded + */ + checkWalletBalanceLoading(wallet: WalletModel | null) { + if (!wallet) { + return false; + } + return !this.getBalances(wallet.address, Provider.selectedProvider, false) + ?.total; + } + + private _calculateAllNetworksBalance = ( + address: string, + useEmptyFallback = true, + ) => { const getBalanceData = (p: ProviderModel) => { const ADDRESS_KEY = p.isTron ? AddressUtils.toTron(address) : AddressUtils.toEth(address); - return ( - // @ts-ignore - this.balances[p.ethChainId]?.[ADDRESS_KEY] || + + // @ts-ignore + const balance = this.balances[p.ethChainId]?.[ADDRESS_KEY]; + + if (!balance && useEmptyFallback) { // @ts-ignore - Balance.emptyBalances[ADDRESS_KEY] - ); + return Balance.emptyBalances[ADDRESS_KEY]; + } + + return balance; }; - const balance = new BalanceModel({ - staked: Balance.Empty, - vested: Balance.Empty, - available: Balance.Empty, - total: Balance.Empty, - locked: Balance.Empty, - availableForStake: Balance.Empty, - unlock: new Date(0), - }); + const balanceModel = new BalanceModel( + useEmptyFallback + ? { + staked: Balance.Empty, + vested: Balance.Empty, + available: Balance.Empty, + total: Balance.Empty, + locked: Balance.Empty, + availableForStake: Balance.Empty, + unlock: new Date(0), + } + : ({} as any), + ); Provider.getAllNetworks().forEach(p => { + const balance = getBalanceData(p); + + if (!balance) { + return; + } + const {available, locked, staked, total, vested, availableForStake} = - getBalanceData(p) ?? {}; + balance; - balance.addStaked( + balanceModel.addStaked( Currencies.convert(staked ?? Balance.Empty, p.ethChainId), ); - balance.addVested( + balanceModel.addVested( Currencies.convert(vested ?? Balance.Empty, p.ethChainId), ); - balance.addAvailable( + balanceModel.addAvailable( Currencies.convert(available ?? Balance.Empty, p.ethChainId), ); - balance.addTotal( + balanceModel.addTotal( Currencies.convert(total ?? Balance.Empty, p.ethChainId), ); - balance.addLocked( + balanceModel.addLocked( Currencies.convert(locked ?? Balance.Empty, p.ethChainId), ); - balance.addAvailableForState( + balanceModel.addAvailableForState( Currencies.convert(availableForStake ?? Balance.Empty, p.ethChainId), ); }); - return balance; + return balanceModel; }; - getBalances = (address: string, provider = Provider.selectedProvider) => { + getBalances = ( + address: string, + provider = Provider.selectedProvider, + useEmptyFallback = true, + ) => { if (provider.id === ALL_NETWORKS_ID) { - return this._calculateAllNetworksBalance(address); + return this._calculateAllNetworksBalance(address, useEmptyFallback); } let ADDRESS_KEY = '' as AddressEthereum; @@ -435,11 +472,13 @@ class WalletStore implements RPCObserver { } else { ADDRESS_KEY = AddressUtils.toEth(address); } + const result = this.balances[provider.ethChainId]?.[ADDRESS_KEY]; - return ( - this.balances[provider.ethChainId]?.[ADDRESS_KEY] || - Balance.emptyBalances[ADDRESS_KEY] - ); + if (!result && useEmptyFallback) { + return Balance.emptyBalances[ADDRESS_KEY]; + } + + return result; }; getBalancesByAddressList = ( diff --git a/src/screens/HomeStack/HomeFeedStack/account-info.tsx b/src/screens/HomeStack/HomeFeedStack/account-info.tsx index 19a66a79c..44f3e1488 100644 --- a/src/screens/HomeStack/HomeFeedStack/account-info.tsx +++ b/src/screens/HomeStack/HomeFeedStack/account-info.tsx @@ -28,6 +28,8 @@ export const AccountInfoScreen = observer(() => { const accountId = useMemo(() => route.params.accountId, [route]); const wallet = useWallet(accountId); const balances = Wallet.getBalancesByAddressList([wallet!]); + const isBalanceLoading = Wallet.checkWalletBalanceLoading(wallet); + const {available, locked, staked, total, nextVestingUnlockDate, vested} = useMemo(() => balances[wallet?.address!], [balances, wallet]); @@ -95,6 +97,7 @@ export const AccountInfoScreen = observer(() => { unlock={nextVestingUnlockDate} vested={vested} tokens={Token.tokens} + isBalanceLoading={isBalanceLoading} /> ); }); diff --git a/src/screens/HomeStack/SettingsStack/settings-test.tsx b/src/screens/HomeStack/SettingsStack/settings-test.tsx index d6245eb76..7c7bca434 100644 --- a/src/screens/HomeStack/SettingsStack/settings-test.tsx +++ b/src/screens/HomeStack/SettingsStack/settings-test.tsx @@ -17,6 +17,7 @@ import { PlayInstallReferrerError, PlayInstallReferrerInfo, } from 'react-native-play-install-referrer'; +import RNRestart from 'react-native-restart'; import shajs from 'sha.js'; import {CaptchaType} from '@app/components/captcha'; @@ -85,6 +86,7 @@ import { makeID, openInAppBrowser, openWeb3Browser, + sleep, } from '@app/utils'; import {MIN_GAS_LIMIT} from '@app/variables/balance'; import {HAQQ_METADATA, STRINGS, TEST_URLS} from '@app/variables/common'; @@ -553,6 +555,7 @@ export const SettingsTestScreen = observer(() => { if (typeof index === 'number' && BACKENDS[index]) { app.backend = BACKENDS[index][1]; setBackend(app.backend); + sleep(100).then(() => RNRestart.restart()); } }); }, [showActionSheetWithOptions]); diff --git a/src/screens/settings-developer-tools.tsx b/src/screens/settings-developer-tools.tsx index 34c6ff2b9..493cd10d1 100644 --- a/src/screens/settings-developer-tools.tsx +++ b/src/screens/settings-developer-tools.tsx @@ -295,7 +295,7 @@ TRON:\n${AddressUtils.toTron(watchOnlyAddress)}`, /> - + <MenuNavigationButton hideArrow onPress={() => {}}> <DataContent style={styles.dataContent} @@ -624,6 +624,16 @@ TRON:\n${AddressUtils.toTron(watchOnlyAddress)}`, variant={ButtonVariant.second} /> <Spacer height={8} /> + <Button + title="Clear balance cache" + onPress={() => { + Wallet.balances = {}; + Wallet.lastBalanceUpdate = new Date(0); + RNRestart.restart(); + }} + variant={ButtonVariant.second} + /> + <Spacer height={8} /> <Button title="Turn off developer mode" error From 0ba966ab7b2c1fc468c4393cc621c4e7f82b8a11 Mon Sep 17 00:00:00 2001 From: Kirill Ageychenko <kirill.ageichenko@haqq.network> Date: Wed, 18 Dec 2024 18:48:25 +0700 Subject: [PATCH 2/3] fix: network logger insets & theming --- src/screens/HomeStack/index.tsx | 4 ++-- src/screens/network-logger.tsx | 36 +++++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 src/screens/network-logger.tsx diff --git a/src/screens/HomeStack/index.tsx b/src/screens/HomeStack/index.tsx index f139d8d94..40e127d95 100644 --- a/src/screens/HomeStack/index.tsx +++ b/src/screens/HomeStack/index.tsx @@ -6,7 +6,6 @@ import { } from '@react-navigation/native-stack'; import {StatusBar} from 'react-native'; import Config from 'react-native-config'; -import NetworkLogger from 'react-native-network-logger'; import {Color} from '@app/colors'; import {DismissPopupButton} from '@app/components/popup/dismiss-popup-button'; @@ -47,6 +46,7 @@ import {NewsDetailScreen} from './HomeNewsStack/news-detail'; import {ReceiveScreen, SelectNetworkScreen} from './ReceiveStack'; import {FeeSettingsScreen} from './TransactionStack/fee-settings'; +import {NetworkLoggerScreen} from '../network-logger'; import {SwapStack} from '../SwapStack'; import {SignUpStack} from '../WelcomeStack/SignUpStack'; @@ -130,7 +130,7 @@ const HomeStack = memo(() => { <Stack.Screen name={HomeStackRoutes.NetworkLogger} - component={NetworkLogger} + component={NetworkLoggerScreen} options={modalOptions} /> diff --git a/src/screens/network-logger.tsx b/src/screens/network-logger.tsx new file mode 100644 index 000000000..779425431 --- /dev/null +++ b/src/screens/network-logger.tsx @@ -0,0 +1,36 @@ +import React, {useMemo} from 'react'; + +import {observer} from 'mobx-react'; +import {StyleSheet} from 'react-native'; +import NetworkLogger from 'react-native-network-logger'; +import {Edges, SafeAreaView} from 'react-native-safe-area-context'; + +import {useTheme} from '@app/hooks'; +import {AppTheme} from '@app/types'; +import {IS_ANDROID} from '@app/variables/common'; + +export const NetworkLoggerScreen = observer(() => { + const edges = useMemo(() => { + const e = ['bottom']; + + if (IS_ANDROID) { + e.push('top'); + } + + return e as Edges; + }, []); + + const theme = useTheme(); + + return ( + <SafeAreaView edges={edges} style={styles.container}> + <NetworkLogger theme={theme === AppTheme.dark ? 'dark' : 'light'} /> + </SafeAreaView> + ); +}); + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}); From 5c610cdb52929b07738db50addb645f661e5eeb6 Mon Sep 17 00:00:00 2001 From: Kirill Ageychenko <kirill.ageichenko@haqq.network> Date: Thu, 19 Dec 2024 14:56:03 +0700 Subject: [PATCH 3/3] feat: disable tokens from testnet chains --- src/models/tokens.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/models/tokens.ts b/src/models/tokens.ts index 28d227f34..cee949465 100644 --- a/src/models/tokens.ts +++ b/src/models/tokens.ts @@ -189,7 +189,12 @@ class TokensStore implements MobXStore<IToken> { } getAll() { - return Object.values(this.data); + const allowedChains = Provider.getAllNetworks().map(p => + Number(p.ethChainId), + ); + return Object.values(this.data).filter(t => + allowedChains.includes(Number(t.chain_id)), + ); } getByAddress(address?: string) {