fix: fix account balances fetching (#1068)

* update account balances fetching

* fix issues with balances and update playwright

package.json

@@ -72,7 +72,7 @@
     "big.js": "^6.2.1",
     "casper-cep18-js-client": "1.0.2",
     "casper-js-sdk": "2.15.4",
-    "casper-wallet-core": "git+ssh://[email protected]:make-software/casper-wallet-core.git#v0.9.5",
+    "casper-wallet-core": "git+ssh://[email protected]:make-software/casper-wallet-core.git#v0.9.6",
     "date-fns": "^2.30.0",
     "i18next": "^23.11.0",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -110,7 +110,7 @@
     "@babel/preset-env": "7.23.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "^7.23.3",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.47.2",
     "@redux-devtools/cli": "^4.0.0",
     "@redux-devtools/remote": "^0.9.3",
     "@testing-library/dom": "9.3.4",

src/apps/onboarding/index.tsx

@@ -1,3 +1,4 @@
+import { QueryClientProvider } from '@tanstack/react-query';
 import React, { Suspense, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider as ReduxProvider } from 'react-redux';
@@ -14,6 +15,7 @@ import { onboardingAppInit } from '@background/redux/windowManagement/actions';
 
 import '@libs/i18n/i18n';
 import { ErrorBoundary } from '@libs/layout';
+import { newQueryClient } from '@libs/services/query-client';
 import { GlobalStyle, lightTheme } from '@libs/ui';
 
 const Tree = () => {
@@ -37,9 +39,11 @@ const Tree = () => {
       <ThemeProvider theme={lightTheme}>
         <GlobalStyle />
         <ReduxProvider store={store}>
-          <ErrorBoundary>
-            <AppRouter />
-          </ErrorBoundary>
+          <QueryClientProvider client={newQueryClient}>
+            <ErrorBoundary>
+              <AppRouter />
+            </ErrorBoundary>
+          </QueryClientProvider>
         </ReduxProvider>
       </ThemeProvider>
     </Suspense>

src/apps/onboarding/pages/select-accounts-to-recover/content.tsx

@@ -1,5 +1,5 @@
 import { Player } from '@lottiefiles/react-lottie-player';
-import React, { SetStateAction } from 'react';
+import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -13,37 +13,20 @@ import {
   TabPageContainer,
   VerticalSpaceContainer
 } from '@libs/layout';
-import { AccountListRows } from '@libs/types/account';
-import {
-  DynamicAccountsListWithSelect,
-  Tile,
-  Typography
-} from '@libs/ui/components';
+import { Tile, Typography } from '@libs/ui/components';
 
 const AnimationContainer = styled(CenteredFlexColumn)`
   padding: 106px 16px;
 `;
 
 interface SelectAccountsToRecoverContentProps {
   isLoading: boolean;
-  derivedAccountsWithBalance: AccountListRows[];
-  isLoadingMore: boolean;
-  onLoadMore: () => void;
-  maxItemsToRender: number;
-  setSelectedAccounts: React.Dispatch<SetStateAction<AccountListRows[]>>;
-  selectedAccounts: AccountListRows[];
-  setIsButtonDisabled: React.Dispatch<SetStateAction<boolean>>;
+  children: React.ReactNode;
 }
 
 export const SelectAccountsToRecoverContent = ({
   isLoading,
-  isLoadingMore,
-  onLoadMore,
-  derivedAccountsWithBalance,
-  maxItemsToRender,
-  setSelectedAccounts,
-  selectedAccounts,
-  setIsButtonDisabled
+  children
 }: SelectAccountsToRecoverContentProps) => {
   const { t } = useTranslation();
   const isDarkMode = useIsDarkMode();
@@ -90,16 +73,7 @@ export const SelectAccountsToRecoverContent = ({
           </Tile>
         </VerticalSpaceContainer>
       ) : (
-        <DynamicAccountsListWithSelect
-          accountsWithBalance={derivedAccountsWithBalance}
-          isLoadingMore={isLoadingMore}
-          onLoadMore={onLoadMore}
-          maxItemsToRender={maxItemsToRender}
-          setSelectedAccounts={setSelectedAccounts}
-          selectedAccounts={selectedAccounts}
-          setIsButtonDisabled={setIsButtonDisabled}
-          namePrefix="Account"
-        />
+        children
       )}
     </TabPageContainer>
   );