Merge branch 'develop' into WALLET-444-cw-lock-timer-update-manifest-…

…with-alarms # Conflicts: # package-lock.json # package.json
make-software · Nov 15, 2024 · 5ff1a66 · 5ff1a66
2 parents 9788b5e + 5a1e24b
commit 5ff1a66
Show file tree

Hide file tree

Showing 153 changed files with 1,613 additions and 3,502 deletions.
diff --git a/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts b/e2e-tests/popup/buy-cspr/buy-cspr.spec.ts
@@ -39,7 +39,7 @@ popup.describe('Popup UI: buy cspr', () => {
     }
   );
 
-  popup(
+  popup.skip(
     'should redirect to Ramp provider page',
     async ({ popupPage, unlockVault, context }) => {
       await unlockVault();

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.7",
     "date-fns": "^2.30.0",
     "i18next": "^23.11.0",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -86,14 +86,13 @@
     "micro-aes-gcm": "0.3.3",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.0.2",
+    "react-dom": "^18.3.1",
     "react-hook-form": "7.48.2",
     "react-i18next": "14.1.0",
     "react-infinite-scroll-hook": "^4.1.1",
     "react-inlinesvg": "3.0.3",
     "react-loading-skeleton": "^3.3.1",
     "react-player": "^2.13.0",
-    "react-query": "^3.39.3",
     "react-redux": "8.0.5",
     "react-router-dom": "6.16.0",
     "react-virtualized": "^9.22.5",
@@ -126,7 +125,7 @@
     "@types/md5": "^2.3.5",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.3.0",
     "@types/react-virtualized": "^9.21.30",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/parser": "^5.62.0",

diff --git a/src/apps/connect-to-app/pages/switch-account/content.tsx b/src/apps/connect-to-app/pages/switch-account/content.tsx
@@ -47,7 +47,7 @@ type SwitchAccountContentProps = { requestId: string };
 export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
   const activeOrigin = useSelector(selectActiveOrigin);
   const activeAccount = useSelector(selectVaultActiveAccount);
-  const publicKeys = useSelector(selectVaultAccountsPublicKeys);
+  const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys);
   const connectedAccountsToActiveTab = useSelector(
     selectConnectedAccountsWithActiveOrigin
   );
@@ -77,7 +77,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
     account => account.name !== activeAccount?.name
   );
 
-  const accountsInfo = useFetchAccountsInfo(publicKeys);
+  const accountsInfo = useFetchAccountsInfo(accountsPublicKeys);
 
   return (
     <PageContainer>
@@ -141,7 +141,7 @@ export function SwitchAccountContent({ requestId }: SwitchAccountContentProps) {
                     <SpaceBetweenContainer>
                       <LeftAlignedFlexColumn>
                         <ConnectionStatusBadge
-                          isConnected
+                          isConnected={true}
                           displayContext="accountList"
                         />
                         <Typography type="body">{account.name}</Typography>

diff --git a/src/apps/onboarding/index.tsx b/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>

diff --git a/src/apps/onboarding/pages/create-vault-password/index.tsx b/src/apps/onboarding/pages/create-vault-password/index.tsx
@@ -3,7 +3,7 @@ import { useWatch } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { TermsLink } from '@src/constants';
+import { TERMS_URLS } from '@src/constants';
 
 import { Stepper } from '@onboarding/components/stepper';
 import { RouterPath } from '@onboarding/router';
@@ -69,7 +69,7 @@ export function CreateVaultPasswordPage({
         onClick={event => {
           event.stopPropagation();
           event.preventDefault();
-          window.open(TermsLink.Tos, '_blank');
+          window.open(TERMS_URLS.tos, '_blank');
         }}
         color="contentAction"
       >
@@ -80,7 +80,7 @@ export function CreateVaultPasswordPage({
         onClick={event => {
           event.stopPropagation();
           event.preventDefault();
-          window.open(TermsLink.Privacy, '_blank');
+          window.open(TERMS_URLS.privacy, '_blank');
         }}
         color="contentAction"
       >

diff --git a/src/apps/onboarding/pages/select-accounts-to-recover/content.tsx b/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>
   );

diff --git a/src/apps/onboarding/pages/select-accounts-to-recover/index.tsx b/src/apps/onboarding/pages/select-accounts-to-recover/index.tsx
@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-
-import { isEqualCaseInsensitive } from '@src/utils';
 
 import { Stepper } from '@onboarding/components/stepper';
 import { SelectAccountsToRecoverContent } from '@onboarding/pages/select-accounts-to-recover/content';
@@ -15,7 +12,6 @@ import {
 import { closeActiveTab } from '@onboarding/utils/close-active-tab';
 
 import { recoverVault } from '@background/redux/sagas/actions';
-import { selectApiConfigBasedOnActiveNetwork } from '@background/redux/settings/selectors';
 import { dispatchToMainStore } from '@background/redux/utils';
 
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
@@ -25,9 +21,9 @@ import {
   TabFooterContainer,
   TabHeaderContainer
 } from '@libs/layout';
-import { dispatchFetchAccountBalances } from '@libs/services/balance-service';
+import { useFetchAccountsBalances } from '@libs/services/balance-service';
 import { Account, AccountListRows, KeyPair } from '@libs/types/account';
-import { Button } from '@libs/ui/components';
+import { Button, DynamicAccountsListWithSelect } from '@libs/ui/components';
 
 export const SelectAccountsToRecoverPage = () => {
   const [derivedAccounts, setDerivedAccounts] = useState<KeyPair[]>([]);
@@ -47,10 +43,6 @@ export const SelectAccountsToRecoverPage = () => {
   const { t } = useTranslation();
   const location = useTypedLocation();
 
-  const { casperWalletApiUrl } = useSelector(
-    selectApiConfigBasedOnActiveNetwork
-  );
-
   useEffect(() => {
     if (location.state?.secretPhrase) {
       const keyPairs = getKeyPairList({
@@ -63,49 +55,31 @@ export const SelectAccountsToRecoverPage = () => {
     }
   }, [location.state?.secretPhrase, setDerivedAccounts]);
 
-  useEffect(() => {
-    if (!derivedAccounts.length) return;
+  const accountHashes = derivedAccounts.map(account =>
+    getAccountHashFromPublicKey(account.publicKey)
+  );
 
-    const hashes = derivedAccounts.reduce(
-      (previousValue, currentValue, currentIndex) => {
-        const hash = getAccountHashFromPublicKey(currentValue.publicKey);
+  const { accountsBalances, isLoadingBalances } =
+    useFetchAccountsBalances(accountHashes);
 
-        return derivedAccounts.length === currentIndex + 1
-          ? previousValue + `${hash}`
-          : previousValue + `${hash},`;
-      },
-      ''
+  useEffect(() => {
+    if (!derivedAccounts.length || isLoadingBalances) return;
+
+    const derivedAccountsWithBalance: AccountListRows[] = derivedAccounts.map(
+      (account, index) => ({
+        ...account,
+        id: account.publicKey,
+        hidden: false,
+        derivationIndex: index,
+        name: ''
+      })
     );
 
-    dispatchFetchAccountBalances(hashes)
-      .then(({ payload }) => {
-        if ('data' in payload) {
-          const derivedAccountsWithBalance: AccountListRows[] =
-            derivedAccounts.map((account, index) => {
-              const accountWithBalance = payload.data.find(ac =>
-                isEqualCaseInsensitive(ac.public_key, account.publicKey)
-              );
-
-              return {
-                ...account,
-                id: account.publicKey,
-                hidden: false,
-                derivationIndex: index,
-                name: '',
-                balance: {
-                  liquidMotes: `${accountWithBalance?.balance ?? '0'}`
-                }
-              };
-            });
-
-          setDerivedAccountsWithBalance(derivedAccountsWithBalance);
-        }
-      })
-      .finally(() => {
-        setIsLoading(false);
-        setIsLoadingMore(false);
-      });
-  }, [derivedAccounts, casperWalletApiUrl]);
+    setDerivedAccountsWithBalance(derivedAccountsWithBalance);
+
+    setIsLoading(false);
+    setIsLoadingMore(false);
+  }, [accountsBalances, derivedAccounts, isLoadingBalances]);
 
   const onLoadMore = () => {
     try {
@@ -156,16 +130,19 @@ export const SelectAccountsToRecoverPage = () => {
         </TabHeaderContainer>
       )}
       renderContent={() => (
-        <SelectAccountsToRecoverContent
-          isLoading={isLoading}
-          derivedAccountsWithBalance={derivedAccountsWithBalance}
-          isLoadingMore={isLoadingMore}
-          onLoadMore={onLoadMore}
-          maxItemsToRender={maxItemsToRender}
-          setSelectedAccounts={setSelectedAccounts}
-          setIsButtonDisabled={setIsButtonDisabled}
-          selectedAccounts={selectedAccounts}
-        />
+        <SelectAccountsToRecoverContent isLoading={isLoading}>
+          <DynamicAccountsListWithSelect
+            accountsWithBalance={derivedAccountsWithBalance}
+            isLoadingMore={isLoadingMore}
+            onLoadMore={onLoadMore}
+            maxItemsToRender={maxItemsToRender}
+            setSelectedAccounts={setSelectedAccounts}
+            selectedAccounts={selectedAccounts}
+            setIsButtonDisabled={setIsButtonDisabled}
+            namePrefix="Account"
+            accountsBalances={accountsBalances}
+          />
+        </SelectAccountsToRecoverContent>
       )}
       renderFooter={() => (
         <TabFooterContainer>

diff --git a/src/apps/popup/pages/account-settings/content.tsx b/src/apps/popup/pages/account-settings/content.tsx
@@ -12,6 +12,7 @@ import { dispatchToMainStore } from '@background/redux/utils';
 import { hideAccountFromListChanged } from '@background/redux/vault/actions';
 import {
   selectVaultAccount,
+  selectVaultAccountsPublicKeys,
   selectVaultHiddenAccountsNames,
   selectVaultImportedAccountNames,
   selectVaultLedgerAccountNames
@@ -42,13 +43,14 @@ export function AccountSettingsPageContent() {
   const account = useSelector((state: RootState) =>
     selectVaultAccount(state, accountName || '')
   );
+  const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys);
 
   if (!account) {
     throw new Error("Account doesn't exist");
   }
 
+  const accountsInfo = useFetchAccountsInfo(accountsPublicKeys);
   const accountHash = getAccountHashFromPublicKey(account.publicKey);
-  const accountsInfo = useFetchAccountsInfo([account.publicKey]);
 
   const csprName = accountsInfo && accountsInfo[accountHash]?.csprName;