Merge pull request #1037 from alephium/optimize-tanstack

Optimize Tanstack

.changeset/unlucky-kiwis-brush.md

@@ -0,0 +1,5 @@
+---
+"alephium-desktop-wallet": patch
+---
+
+Improve performance

apps/desktop-wallet/package.json

@@ -1,7 +1,7 @@
 {
   "name": "alephium-desktop-wallet",
   "description": "The official Alephium wallet",
-  "version": "2.4.4",
+  "version": "2.5.0-rc.0",
   "author": "Alephium dev <[email protected]>",
   "main": "dist-electron/main.js",
   "homepage": "./",
@@ -123,7 +123,7 @@
     "jsdom": "^21.1.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.287.0",
-    "nanoid": "^4.0.0",
+    "nanoid": "^3.3.8",
     "posthog-js": "^1.52.0",
     "qrloop": "^1.4.1",
     "react": "^18.2.0",

apps/desktop-wallet/src/App.tsx

@@ -18,7 +18,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { localStorageNetworkSettingsMigrated } from '@alephium/shared'
 import { useInitializeThrottledClient } from '@alephium/shared-react'
-import { ReactNode, useCallback, useEffect } from 'react'
+import { memo, ReactNode, useCallback, useEffect } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 
 import PersistedQueryCacheVersionStorage from '@/api/persistedCacheVersionStorage'
@@ -54,7 +54,7 @@ import { GlobalStyle } from '@/style/globalStyles'
 import { currentVersion } from '@/utils/app-data'
 import { migrateGeneralSettings, migrateNetworkSettings, migrateWalletData } from '@/utils/migration'
 
-const App = () => {
+const App = memo(() => {
   const theme = useAppSelector((s) => s.global.theme)
 
   useAutoLock()
@@ -90,7 +90,7 @@ const App = () => {
       <AppSpinner />
     </ThemeProvider>
   )
-}
+})
 
 export default App
 

apps/desktop-wallet/src/api/apiDataHooks/utils/useFetchListedFtsWorth.ts

@@ -21,10 +21,10 @@ import { isNumber } from 'lodash'
 import { useMemo } from 'react'
 
 import useFetchTokenPrices from '@/api/apiDataHooks/market/useFetchTokenPrices'
-import { DisplayBalances, ListedFT } from '@/types/tokens'
+import { ApiBalances, ListedFT } from '@/types/tokens'
 
 interface UseListedFtsWorthProps {
-  listedFts: (ListedFT & DisplayBalances)[]
+  listedFts: (ListedFT & ApiBalances)[]
 }
 
 const useFetchListedFtsWorth = ({ listedFts }: UseListedFtsWorthProps) => {
@@ -35,7 +35,7 @@ const useFetchListedFtsWorth = ({ listedFts }: UseListedFtsWorthProps) => {
       listedFts.reduce((totalWorth, token) => {
         const tokenPrice = tokenPrices?.find(({ symbol }) => symbol === token.symbol)?.price
         const tokenWorth = isNumber(tokenPrice)
-          ? calculateAmountWorth(token.totalBalance, tokenPrice, token.decimals)
+          ? calculateAmountWorth(BigInt(token.totalBalance), tokenPrice, token.decimals)
           : 0
 
         return totalWorth + tokenWorth

apps/desktop-wallet/src/api/apiDataHooks/utils/useFetchSortedFts.ts

@@ -27,10 +27,10 @@ import useFetchTokenPrices from '@/api/apiDataHooks/market/useFetchTokenPrices'
 import { fungibleTokenMetadataQuery } from '@/api/queries/tokenQueries'
 import { useAppSelector } from '@/hooks/redux'
 import { selectCurrentlyOnlineNetworkId } from '@/storage/network/networkSelectors'
-import { DisplayBalances, ListedFT, TokenId } from '@/types/tokens'
+import { ApiBalances, ListedFT, TokenId } from '@/types/tokens'
 
 interface UseSortFTsProps extends SkipProp {
-  listedFts: (ListedFT & DisplayBalances)[]
+  listedFts: (ListedFT & ApiBalances)[]
   unlistedFtIds: TokenId[]
 }
 
@@ -59,7 +59,7 @@ const useFetchSortedFts = ({ listedFts, unlistedFtIds, skip }: UseSortFTsProps)
                   const tokenPrice = tokenPrices?.find((tokenPrice) => tokenPrice.symbol === token.symbol)?.price
 
                   return isNumber(tokenPrice)
-                    ? calculateAmountWorth(token.totalBalance, tokenPrice, token.decimals)
+                    ? calculateAmountWorth(BigInt(token.totalBalance), tokenPrice, token.decimals)
                     : -1
                 },
                 'name',

apps/desktop-wallet/src/api/apiDataHooks/utils/useFetchWalletBalancesAlph.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2018 - 2024 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with the library. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useQueries, UseQueryResult } from '@tanstack/react-query'
+
+import { addressAlphBalancesQuery, AddressAlphBalancesQueryFnData } from '@/api/queries/addressQueries'
+import { useAppSelector } from '@/hooks/redux'
+import { useUnsortedAddressesHashes } from '@/hooks/useUnsortedAddresses'
+import { selectCurrentlyOnlineNetworkId } from '@/storage/network/networkSelectors'
+
+const useFetchWalletBalancesAlph = <T>(
+  combine: (results: UseQueryResult<AddressAlphBalancesQueryFnData>[]) => {
+    data: T
+    isLoading: boolean
+    isFetching?: boolean
+    error?: boolean
+  }
+) => {
+  const networkId = useAppSelector(selectCurrentlyOnlineNetworkId)
+  const allAddressHashes = useUnsortedAddressesHashes()
+
+  const { data, isLoading, isFetching, error } = useQueries({
+    queries: allAddressHashes.map((addressHash) => addressAlphBalancesQuery({ addressHash, networkId })),
+    combine
+  })
+
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error
+  }
+}
+
+export default useFetchWalletBalancesAlph

apps/desktop-wallet/src/api/apiDataHooks/utils/useFetchWalletBalancesTokens.ts

@@ -0,0 +1,48 @@
+/*
+Copyright 2018 - 2024 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with the library. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useQueries, UseQueryResult } from '@tanstack/react-query'
+
+import { addressTokensBalancesQuery, AddressTokensBalancesQueryFnData } from '@/api/queries/addressQueries'
+import { useAppSelector } from '@/hooks/redux'
+import { useUnsortedAddressesHashes } from '@/hooks/useUnsortedAddresses'
+import { selectCurrentlyOnlineNetworkId } from '@/storage/network/networkSelectors'
+
+export const useFetchWalletBalancesTokens = <T>(
+  combine: (results: UseQueryResult<AddressTokensBalancesQueryFnData>[]) => {
+    data: T
+    isLoading: boolean
+    isFetching?: boolean
+    error?: boolean
+  }
+) => {
+  const networkId = useAppSelector(selectCurrentlyOnlineNetworkId)
+  const allAddressHashes = useUnsortedAddressesHashes()
+
+  const { data, isLoading, isFetching, error } = useQueries({
+    queries: allAddressHashes.map((addressHash) => addressTokensBalancesQuery({ addressHash, networkId })),
+    combine
+  })
+
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error
+  }
+}

apps/desktop-wallet/src/api/apiDataHooks/utils/useMergeAllTokensBalances.ts

@@ -19,12 +19,12 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 import { ALPH } from '@alephium/token-list'
 import { useMemo } from 'react'
 
-import { DisplayBalances, TokenDisplayBalances } from '@/types/tokens'
+import { ApiBalances, TokenApiBalances } from '@/types/tokens'
 
 interface UseMergeAllTokensBalancesProps {
   includeAlph: boolean
-  alphBalances?: DisplayBalances
-  tokensBalances?: TokenDisplayBalances[]
+  alphBalances?: ApiBalances
+  tokensBalances?: TokenApiBalances[]
 }
 
 const useMergeAllTokensBalances = ({

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchLatestTransactionOfEachAddress.ts

@@ -22,7 +22,7 @@ import { SkipProp } from '@/api/apiDataHooks/apiDataHooksTypes'
 import { flatMapCombine } from '@/api/apiDataHooks/apiDataHooksUtils'
 import { addressLatestTransactionQuery } from '@/api/queries/transactionQueries'
 import { useAppSelector } from '@/hooks/redux'
-import { useUnsortedAddressesHashes } from '@/hooks/useAddresses'
+import { useUnsortedAddressesHashes } from '@/hooks/useUnsortedAddresses'
 import { selectCurrentlyOnlineNetworkId } from '@/storage/network/networkSelectors'
 
 const useFetchLatestTransactionOfEachAddress = (props?: SkipProp) => {

apps/desktop-wallet/src/api/apiDataHooks/wallet/useFetchWalletBalances.ts

@@ -17,8 +17,8 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import useMergeAllTokensBalances from '@/api/apiDataHooks/utils/useMergeAllTokensBalances'
-import { useFetchWalletBalancesAlphArray } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlph'
-import { useFetchWalletBalancesTokensArray } from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokens'
+import useFetchWalletBalancesAlphArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesAlphArray'
+import useFetchWalletBalancesTokensArray from '@/api/apiDataHooks/wallet/useFetchWalletBalancesTokensArray'
 
 interface UseFetchWalletBalancesProps {
   includeAlph?: boolean