fix issues with balances and update playwright

make-software · Oct 2, 2024 · 6b0a286 · 6b0a286
1 parent 45b6a86
commit 6b0a286
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/apps/onboarding/pages/select-accounts-to-recover/index.tsx b/src/apps/onboarding/pages/select-accounts-to-recover/index.tsx
@@ -66,23 +66,13 @@ export const SelectAccountsToRecoverPage = () => {
     if (!derivedAccounts.length || isLoadingBalances) return;
 
     const derivedAccountsWithBalance: AccountListRows[] = derivedAccounts.map(
-      (account, index) => {
-        const accountHash = getAccountHashFromPublicKey(account.publicKey);
-
-        const accountLiquidBalance =
-          accountsBalances && accountsBalances[accountHash]?.liquidBalance;
-
-        return {
-          ...account,
-          id: account.publicKey,
-          hidden: false,
-          derivationIndex: index,
-          name: '',
-          balance: {
-            liquidMotes: `${accountLiquidBalance ?? '0'}`
-          }
-        };
-      }
+      (account, index) => ({
+        ...account,
+        id: account.publicKey,
+        hidden: false,
+        derivationIndex: index,
+        name: ''
+      })
     );
 
     setDerivedAccountsWithBalance(derivedAccountsWithBalance);

diff --git a/src/apps/popup/pages/all-accounts/content.tsx b/src/apps/popup/pages/all-accounts/content.tsx
@@ -40,7 +40,7 @@ export const AllAccountsContent = () => {
   const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys);
 
   const accountsInfo = useFetchAccountsInfo(accountsPublicKeys);
-  const { accountsBalances } = useFetchWalletBalance();
+  const { accountsBalances, isLoadingBalance } = useFetchWalletBalance();
 
   useEffect(() => {
     const visibleAccountListRows = sortAccounts(
@@ -83,7 +83,7 @@ export const AllAccountsContent = () => {
 
           const accountLiquidBalance =
             accountsBalances &&
-            accountsBalances[account.accountHash].liquidBalance;
+            accountsBalances[account.accountHash]?.liquidBalance;
 
           return (
             <AccountListItem
@@ -93,6 +93,7 @@ export const AllAccountsContent = () => {
               showHideAccountItem
               accountsInfo={accountsInfo}
               accountLiquidBalance={accountLiquidBalance}
+              isLoadingBalance={isLoadingBalance}
             />
           );
         }}
@@ -109,7 +110,7 @@ export const AllAccountsContent = () => {
 
             const accountLiquidBalance =
               accountsBalances &&
-              accountsBalances[account.accountHash].liquidBalance;
+              accountsBalances[account.accountHash]?.liquidBalance;
 
             return (
               <AccountListItem
@@ -119,6 +120,7 @@ export const AllAccountsContent = () => {
                 showHideAccountItem
                 accountsInfo={accountsInfo}
                 accountLiquidBalance={accountLiquidBalance}
+                isLoadingBalance={isLoadingBalance}
               />
             );
           }}

diff --git a/src/apps/popup/pages/download-account-keys/components/account-list-item.tsx b/src/apps/popup/pages/download-account-keys/components/account-list-item.tsx
@@ -64,7 +64,7 @@ export const AccountListItem = ({
     ? formatNumber(motesToCSPR(accountLiquidBalance), {
         precision: { max: 0 }
       })
-    : '-';
+    : '0';
 
   const csprName = accountsInfo && accountsInfo[account.accountHash]?.csprName;
   const brandingLogo =

diff --git a/src/apps/popup/pages/download-account-keys/download.tsx b/src/apps/popup/pages/download-account-keys/download.tsx
@@ -114,7 +114,7 @@ export const Download = ({
 
           const accountLiquidBalance =
             accountsBalances &&
-            accountsBalances[account.accountHash].liquidBalance;
+            accountsBalances[account.accountHash]?.liquidBalance;
 
           return (
             <AccountListItem

diff --git a/src/apps/popup/pages/import-account-from-ledger/connected-ledger.tsx b/src/apps/popup/pages/import-account-from-ledger/connected-ledger.tsx
@@ -96,23 +96,12 @@ export const ConnectedLedger: React.FC<IConnectedLedgerProps> = ({
     if (!accountsFromLedger.length || isLoadingBalances) return;
 
     const accountsWithBalance = accountsFromLedger.map<ILedgerAccountListItem>(
-      account => {
-        const accountHash = getAccountHashFromPublicKey(account.publicKey);
-
-        const accountLiquidBalance =
-          accountsBalances && accountsBalances[accountHash]?.liquidBalance;
-
-        return {
-          publicKey: account.publicKey,
-          derivationIndex: account.index,
-          accountHash,
-          name: '',
-          id: account.publicKey,
-          balance: {
-            liquidMotes: `${accountLiquidBalance ?? '0'}`
-          }
-        };
-      }
+      account => ({
+        publicKey: account.publicKey,
+        derivationIndex: account.index,
+        name: '',
+        id: account.publicKey
+      })
     );
 
     setLedgerAccountsWithBalance(accountsWithBalance);

diff --git a/src/libs/ui/components/account-list/account-list-item.tsx b/src/libs/ui/components/account-list/account-list-item.tsx
@@ -57,6 +57,7 @@ interface AccountListItemProps {
   closeModal?: (e: React.MouseEvent) => void;
   accountsInfo: Record<string, IAccountInfo> | undefined;
   accountLiquidBalance: string | undefined;
+  isLoadingBalance: boolean;
 }
 
 export const AccountListItem = ({
@@ -67,13 +68,14 @@ export const AccountListItem = ({
   showHideAccountItem,
   closeModal,
   accountsInfo,
-  accountLiquidBalance
+  accountLiquidBalance,
+  isLoadingBalance
 }: AccountListItemProps) => {
   const accountBalance = accountLiquidBalance
     ? formatNumber(motesToCSPR(accountLiquidBalance), {
         precision: { max: 0 }
       })
-    : '-';
+    : '0';
 
   const csprName = accountsInfo && accountsInfo[account.accountHash]?.csprName;
   const brandingLogo =
@@ -104,7 +106,11 @@ export const AccountListItem = ({
             <AccountName type={isActiveAccount ? 'bodySemiBold' : 'body'}>
               {account.name}
             </AccountName>
-            <Balance type="bodyHash" ellipsis loading={!accountLiquidBalance}>
+            <Balance
+              type="bodyHash"
+              ellipsis
+              loading={isLoadingBalance && !accountLiquidBalance}
+            >
               {accountBalance}
             </Balance>
           </AlignedSpaceBetweenFlexRow>

diff --git a/src/libs/ui/components/account-list/account-list.tsx b/src/libs/ui/components/account-list/account-list.tsx
@@ -57,7 +57,7 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
   const accountsPublicKeys = useSelector(selectVaultAccountsPublicKeys);
 
   const accountsInfo = useFetchAccountsInfo(accountsPublicKeys);
-  const { accountsBalances } = useFetchWalletBalance();
+  const { accountsBalances, isLoadingBalance } = useFetchWalletBalance();
 
   useEffect(() => {
     const accountListRows = sortAccounts(
@@ -86,7 +86,7 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
 
         const accountLiquidBalance =
           accountsBalances &&
-          accountsBalances[account.accountHash].liquidBalance;
+          accountsBalances[account.accountHash]?.liquidBalance;
 
         return (
           <AccountListItem
@@ -100,6 +100,7 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
             }}
             accountLiquidBalance={accountLiquidBalance}
             accountsInfo={accountsInfo}
+            isLoadingBalance={isLoadingBalance}
           />
         );
       }}

diff --git a/...ibs/ui/components/dynamic-accounts-list-with-select/dynamic-accounts-list-with-select.tsx b/...ibs/ui/components/dynamic-accounts-list-with-select/dynamic-accounts-list-with-select.tsx
@@ -159,13 +159,13 @@ export const DynamicAccountsListWithSelect = ({
         const accountHash = getAccountHashFromPublicKey(account.publicKey);
 
         const accountLiquidBalance =
-          accountsBalances && accountsBalances[accountHash].liquidBalance;
+          accountsBalances && accountsBalances[accountHash]?.liquidBalance;
 
         const accountBalance = accountLiquidBalance
           ? formatNumber(motesToCSPR(accountLiquidBalance), {
               precision: { max: 0 }
             })
-          : '-';
+          : '0';
 
         const isAlreadyConnected = alreadyConnectedLedgerAccounts.some(
           alreadyConnectedAccount =>