fixed active button gap + sorting animation delay

Author: bogdandobritoiu

packages/core-mobile/app/new/common/components/WalletCard.tsx

@@ -156,7 +156,8 @@ const WalletCard = ({
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
-          height: HEADER_HEIGHT
+          height: HEADER_HEIGHT,
+          gap: 12
         }}>
         <View
           sx={{
@@ -193,7 +194,6 @@ const WalletCard = ({
                 {wallet.name}
               </Text>
               <Text
-                testID={`manage_accounts_wallet_name__${wallet.name}`}
                 numberOfLines={1}
                 style={{
                   fontSize: 12,

packages/core-mobile/app/new/features/wallets/components/AccountBalance.tsx

@@ -83,53 +83,38 @@ export const AccountBalance = ({
     return <ActivityIndicator size="small" sx={{ marginRight: 4 }} />
   }
 
-  if (!isBalanceAccurate) {
-    return (
-      <View
-        sx={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          flexShrink: 1,
-          gap: 6
-        }}>
+  return (
+    <View
+      sx={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        flexShrink: 1,
+        gap: 6
+      }}>
+      {!accountBalance ? null : !isBalanceAccurate ? (
         <Pressable hitSlop={16} onPress={refetchBalance}>
           <Icons.Alert.Error
             color={colors.$textDanger}
             width={14}
             height={14}
           />
         </Pressable>
-        <AnimatedBalance
-          variant="body1"
-          balance={balance}
-          shouldMask={isPrivacyModeEnabled}
-          balanceSx={{
-            color: isActive
-              ? colors.$textPrimary
-              : alpha(colors.$textPrimary, 0.6),
-            lineHeight: 16,
-            textAlign: 'right'
-          }}
-          renderMaskView={renderMaskView}
-          shouldAnimate={false}
-        />
-      </View>
-    )
-  }
-
-  return (
-    <AnimatedBalance
-      variant="body1"
-      balance={balance}
-      shouldMask={isPrivacyModeEnabled}
-      balanceSx={{
-        color: isActive ? colors.$textPrimary : alpha(colors.$textPrimary, 0.6),
-        lineHeight: 16,
-        textAlign: 'right'
-      }}
-      renderMaskView={renderMaskView}
-      shouldAnimate={false}
-    />
+      ) : null}
+      <AnimatedBalance
+        variant="body1"
+        balance={balance}
+        shouldMask={isPrivacyModeEnabled}
+        balanceSx={{
+          color: isActive
+            ? colors.$textPrimary
+            : alpha(colors.$textPrimary, 0.6),
+          lineHeight: 16,
+          textAlign: 'right'
+        }}
+        renderMaskView={renderMaskView}
+        shouldAnimate={false}
+      />
+    </View>
   )
 }

packages/core-mobile/app/new/features/wallets/components/WalletBalance.tsx

@@ -2,17 +2,14 @@ import {
   ActivityIndicator,
   alpha,
   AnimatedBalance,
-  Icons,
   SxProp,
-  useTheme,
-  View
+  useTheme
 } from '@avalabs/k2-alpine'
 import { HiddenBalanceText } from 'common/components/HiddenBalanceText'
 import { useFormatCurrency } from 'common/hooks/useFormatCurrency'
 import { UNKNOWN_AMOUNT } from 'consts/amount'
 import React, { useCallback, useMemo } from 'react'
 import ContentLoader, { Rect } from 'react-content-loader/native'
-import { Pressable } from 'react-native'
 import { useSelector } from 'react-redux'
 import { selectIsPrivacyModeEnabled } from 'store/settings/securityPrivacy'
 
@@ -33,11 +30,7 @@ export const WalletBalance = ({
 
   // TODO: get wallet balance
   const walletBalance = 74235
-  const isBalanceAccurate = true
   const isLoadingBalance = false
-  const refetchBalance = useCallback(() => {
-    // dispatch(refetchBalanceForAccount(account.id))
-  }, [])
 
   const balance = useMemo(() => {
     return walletBalance > 0
@@ -77,39 +70,6 @@ export const WalletBalance = ({
     return <ActivityIndicator size="small" />
   }
 
-  if (!isBalanceAccurate) {
-    return (
-      <View
-        sx={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          flexShrink: 1,
-          gap: 6
-        }}>
-        <Pressable hitSlop={16} onPress={refetchBalance}>
-          <Icons.Alert.Error
-            color={colors.$textDanger}
-            width={14}
-            height={14}
-          />
-        </Pressable>
-        <AnimatedBalance
-          variant="heading4"
-          balance={balance}
-          shouldMask={isPrivacyModeEnabled}
-          balanceSx={{
-            ...balanceSx,
-            lineHeight: 21,
-            fontSize: 21,
-            textAlign: 'right'
-          }}
-          renderMaskView={renderMaskView}
-        />
-      </View>
-    )
-  }
-
   return (
     <AnimatedBalance
       variant="heading4"

packages/core-mobile/app/new/features/wallets/components/WalletList.tsx

@@ -67,6 +67,8 @@ export const WalletList = ({
   const accountCollection = useSelector(selectAccounts)
   const allWallets = useSelector(selectWallets)
   const activeAccount = useSelector(selectActiveAccount)
+
+  // TODO: check if any account on any wallet has balanceAccurate === false
   const balanceAccurate = useIsAccountBalanceAccurate(activeAccount)
   // TODO: Implement refresh
   const isRefreshing = false
@@ -77,9 +79,18 @@ export const WalletList = ({
   const { recentAccountIds } = useRecentAccounts()
 
   const allAccountsArray = useMemo(() => {
-    return recentAccountIds
-      .map(id => accountCollection[id])
-      .filter((account): account is Account => account !== undefined)
+    const allAccounts = Object.values(accountCollection).filter(
+      (account): account is Account => account !== undefined
+    )
+
+    return allAccounts.sort((a, b) => {
+      const indexA = recentAccountIds.indexOf(a.id)
+      const indexB = recentAccountIds.indexOf(b.id)
+
+      if (indexA !== -1 && indexB !== -1) return indexA - indexB
+
+      return 0
+    })
   }, [accountCollection, recentAccountIds])
 
   useMemo(() => {
@@ -161,8 +172,13 @@ export const WalletList = ({
       }
       dispatch(setActiveAccount(accountId))
 
-      dismiss()
-      dismiss()
+      // Delay the dismiss to display the sorting list animation
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          dismiss()
+          dismiss()
+        }, 300)
+      })
     },
     [activeAccount?.id, dispatch, dismiss]
   )