diff --git a/eslint.config.mjs b/eslint.config.mjs
index 6aa628d5b66..e1527f185ba 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -242,7 +242,6 @@ export default [
       'src/components/scenes/ChangePasswordScene.tsx',
       'src/components/scenes/ChangePinScene.tsx',
       'src/components/scenes/ChangeUsernameScene.tsx',
-      'src/components/scenes/CoinRankingDetailsScene.tsx',
 
       'src/components/scenes/ConfirmScene.tsx',
       'src/components/scenes/CreateWalletAccountSelectScene.tsx',
@@ -383,7 +382,7 @@ export default [
       'src/components/themed/Title.tsx',
       'src/components/themed/TransactionListComponents.tsx',
       'src/components/themed/TransactionListRow.tsx',
-      'src/components/themed/TransactionListTop.tsx',
+
       'src/components/themed/VectorIcon.tsx',
       'src/components/themed/WalletList.tsx',
 
diff --git a/src/__tests__/components/TransactionListTop.test.tsx b/src/__tests__/components/TransactionListTop.test.tsx
index cb7c9e33ebc..0d8e0d54472 100644
--- a/src/__tests__/components/TransactionListTop.test.tsx
+++ b/src/__tests__/components/TransactionListTop.test.tsx
@@ -44,6 +44,7 @@ describe('TransactionListTop', () => {
     id: '123',
     name: 'wallet name',
     stakingStatus: { stakedAmounts: [] },
+    syncStatus: { totalRatio: 0.5 },
     type: 'wallet:bitcoin',
     watch() {}
   }
@@ -68,7 +69,6 @@ describe('TransactionListTop', () => {
           searching={false}
           tokenId={null}
           wallet={fakeWallet}
-          isLightAccount={false}
         />
       </FakeProviders>
     )
@@ -87,7 +87,6 @@ describe('TransactionListTop', () => {
           searching={false}
           tokenId={null}
           wallet={fakeWallet}
-          isLightAccount={false}
         />
       </FakeProviders>
     )
diff --git a/src/actions/scene/StakingActions.tsx b/src/actions/scene/StakingActions.tsx
index aa103f7b4a4..b25537bd6b6 100644
--- a/src/actions/scene/StakingActions.tsx
+++ b/src/actions/scene/StakingActions.tsx
@@ -1,4 +1,3 @@
-import { add } from 'biggystring'
 import type { EdgeAccount, EdgeCurrencyWallet, EdgeTokenId } from 'edge-core-js'
 
 import { SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
@@ -11,7 +10,6 @@ import type {
   StakePositionMap
 } from '../../reducers/StakingReducer'
 import type { ThunkAction } from '../../types/reduxTypes'
-import { getPositionAllocations } from '../../util/stakeUtils'
 import { datelog } from '../../util/utils'
 
 export const updateStakingState = (
@@ -37,7 +35,6 @@ export const updateStakingState = (
     const stakePlugins = await getStakePlugins(pluginId)
     const stakePolicyMap: StakePolicyMap = {}
 
-    let lockedNativeAmount = '0'
     const stakePositionMap: StakePositionMap = {}
     for (const stakePlugin of stakePlugins) {
       const stakePolicies = stakePlugin.getPolicies({
@@ -47,7 +44,6 @@ export const updateStakingState = (
       })
       for (const stakePolicy of stakePolicies) {
         stakePolicyMap[stakePolicy.stakePolicyId] = stakePolicy
-        let total: string | undefined
         try {
           const stakePosition = await stakePlugin.fetchStakePosition({
             stakePolicyId: stakePolicy.stakePolicyId,
@@ -56,28 +52,18 @@ export const updateStakingState = (
           })
 
           stakePositionMap[stakePolicy.stakePolicyId] = stakePosition
-          const { staked, earned } = getPositionAllocations(stakePosition)
-          total = [...staked, ...earned]
-            .filter(p => p.tokenId === tokenId && p.pluginId === pluginId)
-            .reduce((prev, curr) => add(prev, curr.nativeAmount), '0')
         } catch (err) {
           console.error(err)
           const { displayName } = stakePolicy.stakeProviderInfo
           datelog(`${displayName}: ${lstrings.stake_unable_to_query_locked}`)
           continue
         }
-
-        // Don't show liquid staking positions as locked amount
-        if (stakePolicy.isLiquidStaking !== true) {
-          lockedNativeAmount = add(lockedNativeAmount, total)
-        }
       }
     }
 
     dispatch({
       type: 'STAKING/SETUP',
       walletId,
-      lockedNativeAmount,
       stakePolicies: stakePolicyMap,
       stakePositionMap
     })
diff --git a/src/components/scenes/CoinRankingDetailsScene.tsx b/src/components/scenes/CoinRankingDetailsScene.tsx
index 5ea6b5fa6be..6aafb235c9b 100644
--- a/src/components/scenes/CoinRankingDetailsScene.tsx
+++ b/src/components/scenes/CoinRankingDetailsScene.tsx
@@ -28,7 +28,6 @@ import {
   filterStakePolicies,
   type StakePolicy
 } from '../../plugins/stake-plugins/types'
-import { defaultWalletStakingState } from '../../reducers/StakingReducer'
 import {
   getCoingeckoFiat,
   getDefaultFiat
@@ -140,7 +139,7 @@ const CoinRankingDetailsSceneComponent: React.FC<Props> = props => {
   const account = useSelector(state => state.core.account)
   const exchangeRates = useSelector(state => state.exchangeRates)
   const walletStakingStateMap = useSelector(
-    state => state.staking.walletStakingMap ?? defaultWalletStakingState
+    state => state.staking.walletStakingMap ?? {}
   )
   const countryCode = useSelector(state => state.ui.countryCode)
 
@@ -257,9 +256,11 @@ const CoinRankingDetailsSceneComponent: React.FC<Props> = props => {
         if (walletState != null && !walletState.isLoading) continue
         const tokenId = getTokenId(wallet.currencyConfig, currencyCode)
         if (tokenId !== undefined) {
-          dispatch(updateStakingState(tokenId, wallet)).catch(err => {
-            showError(err)
-          })
+          dispatch(updateStakingState(tokenId, wallet)).catch(
+            (error: unknown) => {
+              showError(error)
+            }
+          )
         }
       }
     }
diff --git a/src/components/scenes/WalletDetailsScene.tsx b/src/components/scenes/WalletDetailsScene.tsx
index 9b55fce7cf0..644c56686e7 100644
--- a/src/components/scenes/WalletDetailsScene.tsx
+++ b/src/components/scenes/WalletDetailsScene.tsx
@@ -161,8 +161,6 @@ const WalletDetailsComponent: React.FC<Props> = (props: Props) => {
     getExchangeRate(state.exchangeRates, pluginId, tokenId, defaultIsoFiat)
   )
   const spamFilterOn = useSelector(state => state.ui.settings.spamFilterOn)
-  const activeUsername = useSelector(state => state.core.account.username)
-  const isLightAccount = activeUsername == null
 
   // Watchers:
   const enabledTokenIds = useWatch(wallet, 'enabledTokenIds')
@@ -396,7 +394,6 @@ const WalletDetailsComponent: React.FC<Props> = (props: Props) => {
             searching={isSearching}
             tokenId={tokenId}
             wallet={wallet}
-            isLightAccount={isLightAccount}
           />
           <DividerLineUi4 extendRight />
           <InfoCardCarousel
diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
index 98367fc86c2..856d6931d5e 100644
--- a/src/components/themed/TransactionListTop.tsx
+++ b/src/components/themed/TransactionListTop.tsx
@@ -1,11 +1,5 @@
-import { add, gt, mul, round } from 'biggystring'
-import type {
-  EdgeAccount,
-  EdgeBalanceMap,
-  EdgeCurrencyWallet,
-  EdgeDenomination,
-  EdgeTokenId
-} from 'edge-core-js'
+import { add, gt, mul } from 'biggystring'
+import type { EdgeCurrencyWallet, EdgeTokenId } from 'edge-core-js'
 import * as React from 'react'
 import { View } from 'react-native'
 import type { AirshipBridge } from 'react-native-airship'
@@ -17,31 +11,23 @@ import Ionicons from 'react-native-vector-icons/Ionicons'
 import { sprintf } from 'sprintf-js'
 
 import { checkAndShowLightBackupModal } from '../../actions/BackupModalActions'
-import type { GuiExchangeRates } from '../../actions/ExchangeRateActions'
 import { toggleAccountBalanceVisibility } from '../../actions/LocalSettingsActions'
 import { updateStakingState } from '../../actions/scene/StakingActions'
 import {
+  DONE_THRESHOLD,
   getFiatSymbol,
   SPECIAL_CURRENCY_INFO
 } from '../../constants/WalletAndCurrencyConstants'
+import { useAsyncEffect } from '../../hooks/useAsyncEffect'
 import { useAsyncNavigation } from '../../hooks/useAsyncNavigation'
 import { useAsyncValue } from '../../hooks/useAsyncValue'
 import { useHandler } from '../../hooks/useHandler'
 import { useWalletName } from '../../hooks/useWalletName'
 import { useWatch } from '../../hooks/useWatch'
-import { formatNumber } from '../../locales/intl'
+import { formatNumber, toPercentString } from '../../locales/intl'
 import { lstrings } from '../../locales/strings'
 import { getStakePlugins } from '../../plugins/stake-plugins/stakePlugins'
-import type {
-  PositionAllocation,
-  StakePlugin,
-  StakePolicy
-} from '../../plugins/stake-plugins/types'
-import {
-  defaultWalletStakingState,
-  type StakePositionMap,
-  type WalletStakingState
-} from '../../reducers/StakingReducer'
+import type { StakePlugin } from '../../plugins/stake-plugins/types'
 import {
   getExchangeDenom,
   selectDisplayDenom
@@ -49,7 +35,6 @@ import {
 import { getExchangeRate } from '../../selectors/WalletSelectors'
 import { config } from '../../theme/appConfig'
 import { useDispatch, useSelector } from '../../types/reactRedux'
-import type { Dispatch } from '../../types/reduxTypes'
 import type {
   NavigationBase,
   WalletsTabSceneProps
@@ -73,8 +58,10 @@ import {
   zeroString
 } from '../../util/utils'
 import { IconButton } from '../buttons/IconButton'
+import { AlertCardUi4 } from '../cards/AlertCard'
 import { EdgeCard } from '../cards/EdgeCard'
 import { VisaCardCard } from '../cards/VisaCardCard'
+import { EdgeAnim } from '../common/EdgeAnim'
 import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
 import { WalletIcon } from '../icons/WalletIcon'
 import { EdgeModal } from '../modals/EdgeModal'
@@ -84,12 +71,7 @@ import {
   type WalletListResult
 } from '../modals/WalletListModal'
 import { Airship, showError } from '../services/AirshipInstance'
-import {
-  cacheStyles,
-  type Theme,
-  type ThemeProps,
-  useTheme
-} from '../services/ThemeContext'
+import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from './EdgeText'
 import { SelectableRow } from './SelectableRow'
 
@@ -108,11 +90,9 @@ const SWAP_ASSET_PRIORITY: Array<{ pluginId: string; tokenId: EdgeTokenId }> = [
   { pluginId: 'polygon', tokenId: null }
 ]
 
-interface OwnProps {
+interface Props {
   navigation: WalletsTabSceneProps<'walletDetails'>['navigation']
 
-  isLightAccount: boolean
-
   // Wallet identity:
   tokenId: EdgeTokenId
   wallet: EdgeCurrencyWallet
@@ -122,87 +102,113 @@ interface OwnProps {
   searching: boolean
 }
 
-interface StateProps {
-  account: EdgeAccount
-  balanceMap: EdgeBalanceMap
-  currencyCode: string
-  countryCode?: string
-  defaultFiat: string
-  dispatch: Dispatch
-  displayDenomination: EdgeDenomination
-  exchangeDenomination: EdgeDenomination
-  exchangeRate: number
-  exchangeRates: GuiExchangeRates
-  isAccountBalanceVisible: boolean
-  stakePlugins: StakePlugin[]
-  stakePolicies: StakePolicy[]
-  stakePositionMap: StakePositionMap
-  lockedNativeAmount: string
-  walletName: string
-}
+export const TransactionListTop: React.FC<Props> = props => {
+  const { isEmpty, searching, tokenId, wallet } = props
+  const navigation = useAsyncNavigation(props.navigation)
 
-interface DispatchProps {
-  toggleBalanceVisibility: () => Promise<void>
-}
+  const dispatch = useDispatch()
+  const account = useSelector(state => state.core.account)
+  const exchangeRates = useSelector(state => state.exchangeRates)
+  const defaultIsoFiat = useSelector(state => state.ui.settings.defaultIsoFiat)
+  const countryCode = useSelector(state => state.ui.countryCode)
+  const stakePositionMap = useSelector(
+    // Fallback to a default state using the reducer if the wallet is not found
+    state => state.staking.walletStakingMap[wallet.id]?.stakePositionMap ?? {}
+  )
 
-type Props = OwnProps & StateProps & DispatchProps & ThemeProps
+  const defaultFiat = removeIsoPrefix(defaultIsoFiat)
+  const theme = useTheme()
 
-export class TransactionListTopComponent extends React.PureComponent<Props> {
-  componentDidUpdate(prevProps: Props) {
-    // Update staking policies if the wallet changes
-    if (prevProps.wallet !== this.props.wallet) {
-      this.props
-        .dispatch(updateStakingState(this.props.tokenId, this.props.wallet))
-        .catch(err => {
-          showError(err)
-        })
-    } else if (prevProps.tokenId !== this.props.tokenId) {
-      // Update staked amount if the tokenId changes but the wallet remains the same
-      let total = '0'
-      let lockedNativeAmount = '0'
-      for (const stakePosition of Object.values(this.props.stakePositionMap)) {
-        const { staked, earned } = getPositionAllocations(stakePosition)
-        total = this.getTotalPosition(this.props.tokenId, [
-          ...staked,
-          ...earned
-        ])
-        lockedNativeAmount = add(lockedNativeAmount, total)
+  const [stakePlugins = []] = useAsyncValue<StakePlugin[]>(
+    async () => await getStakePlugins(wallet.currencyInfo.pluginId)
+  )
+  const stakePolicies = React.useMemo(
+    () =>
+      getPoliciesFromPlugins(stakePlugins, stakePositionMap, wallet, tokenId),
+    [stakePlugins, stakePositionMap, tokenId, wallet]
+  )
+
+  const displayDenomination = useSelector(state =>
+    selectDisplayDenom(state, wallet.currencyConfig, tokenId)
+  )
+  const exchangeDenomination = getExchangeDenom(wallet.currencyConfig, tokenId)
+  const exchangeRate = useSelector(state =>
+    isKeysOnlyPlugin(wallet.currencyInfo.pluginId)
+      ? 0
+      : getExchangeRate(
+          state.exchangeRates,
+          wallet.currencyInfo.pluginId,
+          tokenId,
+          defaultIsoFiat
+        )
+  )
+  const isAccountBalanceVisible = useSelector(
+    state => state.ui.settings.isAccountBalanceVisible
+  )
+
+  const isStakingAvailable =
+    isStakingSupported(wallet.currencyInfo.pluginId) &&
+    (stakePolicies.length > 0 ||
+      // FIO was the first staking-enabled currency and doesn't use staking policies yet
+      wallet.currencyInfo.pluginId === 'fio')
+
+  const walletName = useWalletName(wallet)
+  const balanceMap = useWatch(wallet, 'balanceMap')
+  const syncStatus = useWatch(wallet, 'syncStatus')
+
+  // Track sync card visibility with 1-second delay after sync completes:
+  const isSyncing = syncStatus.totalRatio < DONE_THRESHOLD
+  const [showSyncCard, setShowSyncCard] = React.useState(isSyncing)
+  React.useEffect(() => {
+    if (isSyncing) {
+      setShowSyncCard(true)
+    } else {
+      const timeout = setTimeout(() => {
+        setShowSyncCard(false)
+      }, 1000)
+      return () => {
+        clearTimeout(timeout)
       }
-      this.props.dispatch({
-        type: 'STAKING/UPDATE_LOCKED_AMOUNT',
-        walletId: this.props.wallet.id,
-        lockedNativeAmount
-      })
     }
-  }
+  }, [isSyncing])
+
+  useAsyncEffect(
+    async () => {
+      await dispatch(updateStakingState(tokenId, wallet))
+    },
+    [dispatch, tokenId, wallet],
+    'TransactionListTop'
+  )
 
-  componentDidMount() {
-    this.props
-      .dispatch(updateStakingState(this.props.tokenId, this.props.wallet))
-      .catch(err => {
-        showError(err)
-      })
-  }
+  const { pluginId } = wallet.currencyInfo
+  const lockedNativeAmount = React.useMemo(() => {
+    let lockedNativeAmount = '0'
 
-  getTotalPosition = (
-    tokenId: EdgeTokenId,
-    positions: PositionAllocation[]
-  ): string => {
-    const { pluginId } = this.props.wallet.currencyInfo
-    const amount = positions
-      .filter(p => p.tokenId === tokenId && p.pluginId === pluginId)
-      .reduce((prev, curr) => add(prev, curr.nativeAmount), '0')
-    return amount
-  }
+    for (const policy of stakePolicies) {
+      if (policy.isLiquidStaking === true) continue
+      const position = stakePositionMap[policy.stakePolicyId]
+      if (position == null) continue
 
-  handleOpenWalletListModal = () => {
-    const { account, navigation, wallet: parentWallet, tokenId } = this.props
+      const { staked, earned } = getPositionAllocations(position)
+      const total = [...staked, ...earned]
+        .filter(p => p.tokenId === tokenId && p.pluginId === pluginId)
+        .reduce((prev, curr) => add(prev, curr.nativeAmount), '0')
+      lockedNativeAmount = add(lockedNativeAmount, total)
+    }
+
+    return lockedNativeAmount
+  }, [pluginId, stakePolicies, stakePositionMap, tokenId])
 
+  const handleBalanceVisibility = useHandler(async () => {
+    await dispatch(toggleAccountBalanceVisibility())
+  })
+
+  const handleOpenWalletListModal = useHandler((): void => {
     triggerHaptic('impactLight')
     Airship.show<WalletListResult>(bridge => (
       <WalletListModal
         bridge={bridge}
-        parentWalletId={tokenId == null ? undefined : parentWallet.id}
+        parentWalletId={tokenId == null ? undefined : wallet.id}
         headerTitle={lstrings.select_wallet}
         navigation={navigation as NavigationBase}
       />
@@ -215,13 +221,12 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
           navigation.setParams({ tokenId, walletId })
         }
       })
-      .catch(err => {
+      .catch((err: unknown) => {
         showError(err)
       })
-  }
+  })
 
-  handleMenu = () => {
-    const { wallet, tokenId, navigation } = this.props
+  const handleMenu = useHandler((): void => {
     triggerHaptic('impactLight')
     Airship.show(bridge => (
       <WalletListMenuModal
@@ -230,14 +235,14 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
         navigation={navigation}
         walletId={wallet.id}
       />
-    )).catch(err => {
+    )).catch((err: unknown) => {
       showError(err)
     })
-  }
+  })
 
-  handleTrade = async () => {
-    const { theme, wallet, tokenId } = this.props
+  const handleTrade = useHandler(async (): Promise<void> => {
     const styles = getStyles(theme)
+    const { disableSwaps = false } = config
 
     const buySellIconProps = {
       size: theme.rem(1.25),
@@ -260,7 +265,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
           marginRem={0.5}
           title={sprintf(lstrings.buy_1s, sceneCurrencyCode)}
           onPress={() => {
-            this.handleTradeBuy(bridge)
+            handleTradeBuy(bridge)
           }}
           icon={
             <View style={styles.dualIconContainer}>
@@ -273,7 +278,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
           marginRem={0.5}
           title={sprintf(lstrings.sell_1s, sceneCurrencyCode)}
           onPress={() => {
-            this.handleTradeSell(bridge)
+            handleTradeSell(bridge)
           }}
           icon={
             <View style={styles.dualIconContainer}>
@@ -282,12 +287,12 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
             </View>
           }
         />
-        {!config.disableSwaps ? (
+        {!disableSwaps ? (
           <SelectableRow
             marginRem={0.5}
             title={sprintf(lstrings.swap_s_to_from_crypto, sceneCurrencyCode)}
             onPress={() => {
-              this.handleTradeSwap(bridge)
+              handleTradeSwap(bridge)
             }}
             icon={
               <View style={styles.singleIconContainer}>
@@ -302,10 +307,9 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
         ) : null}
       </EdgeModal>
     ))
-  }
+  })
 
-  handleTradeBuy = (bridge: AirshipBridge<void>) => {
-    const { navigation, wallet, tokenId } = this.props
+  const handleTradeBuy = useHandler((bridge: AirshipBridge<void>): void => {
     const forcedWalletResult: WalletListResult = {
       type: 'wallet',
       walletId: wallet.id,
@@ -317,10 +321,9 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
       params: { forcedWalletResult }
     })
     bridge.resolve()
-  }
+  })
 
-  handleTradeSell = (bridge: AirshipBridge<void>) => {
-    const { navigation, wallet, tokenId } = this.props
+  const handleTradeSell = useHandler((bridge: AirshipBridge<void>): void => {
     const forcedWalletResult: WalletListResult = {
       type: 'wallet',
       walletId: wallet.id,
@@ -332,15 +335,12 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
       params: { forcedWalletResult }
     })
     bridge.resolve()
-  }
-
-  handleTradeSwap = (bridge?: AirshipBridge<void>) => {
-    const { account, navigation, wallet, tokenId } = this.props
+  })
 
+  const handleTradeSwap = useHandler((bridge?: AirshipBridge<void>): void => {
     const sceneWallet = wallet
     const sceneTokenId = tokenId
     const { currencyWallets } = account
-    const { exchangeRates } = this.props
 
     // Check balances for the displayed asset on this scene:
     const sceneAssetCryptoBalance = wallet.balanceMap.get(tokenId)
@@ -473,23 +473,11 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
     })
 
     if (bridge != null) bridge.resolve()
-  }
+  })
 
-  renderBalanceBox = () => {
+  const renderBalanceBox = (): React.ReactElement => {
     // TODO: Use CryptoText/FiatText and/or CryptoAmount after they are extended
     // to gracefully handle edge cases such as explicit no rounding and scaling.
-    const {
-      balanceMap,
-      displayDenomination,
-      exchangeDenomination,
-      exchangeRate,
-      isAccountBalanceVisible,
-      theme,
-      tokenId,
-      wallet,
-      walletName,
-      defaultFiat
-    } = this.props
     const styles = getStyles(theme)
 
     const fiatSymbol = getFiatSymbol(defaultFiat)
@@ -506,7 +494,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
     )(nativeBalance)
     const fiatBalance = parseFloat(exchangeAmount) * exchangeRate
     const fiatBalanceFormat = formatNumber(
-      fiatBalance && fiatBalance > 0.000001 ? fiatBalance : 0,
+      fiatBalance > 0.000001 ? fiatBalance : 0,
       { toFixed: 2 }
     )
 
@@ -516,7 +504,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
           <EdgeTouchableOpacity
             accessible={false}
             style={styles.balanceBoxWalletNameContainer}
-            onPress={this.handleOpenWalletListModal}
+            onPress={handleOpenWalletListModal}
           >
             <WalletIcon
               marginRem={[0, 0.25, 0, 0]}
@@ -530,7 +518,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
           </EdgeTouchableOpacity>
           <EdgeTouchableOpacity
             testID="gearIcon"
-            onPress={this.handleMenu}
+            onPress={handleMenu}
             style={styles.settingsTouchContainer}
           >
             <Entypo
@@ -543,7 +531,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
         </View>
         <EdgeTouchableOpacity
           accessible={false}
-          onPress={this.props.toggleBalanceVisibility}
+          onPress={handleBalanceVisibility}
         >
           <View style={styles.balanceBoxCryptoBalanceContainer}>
             <EdgeText
@@ -583,16 +571,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
    * supported for this specific asset. While waiting for the query, show a
    * spinner.
    */
-  renderStakedBalance() {
-    const {
-      theme,
-      wallet,
-      defaultFiat,
-      displayDenomination,
-      exchangeDenomination,
-      exchangeRate,
-      lockedNativeAmount
-    } = this.props
+  function renderStakedBalance(): React.ReactElement | null {
     const styles = getStyles(theme)
 
     if (
@@ -603,10 +582,8 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
 
     const fiatSymbol = getFiatSymbol(defaultFiat)
 
-    const { locked } = getFioStakingBalances(wallet.stakingStatus)
-
-    const walletBalanceLocked = locked
-    const nativeLocked = add(walletBalanceLocked, lockedNativeAmount)
+    const fioStatus = getFioStakingBalances(wallet.stakingStatus)
+    const nativeLocked = add(fioStatus.locked, lockedNativeAmount)
     if (nativeLocked === '0') return null
 
     const stakingCryptoAmount = convertNativeToDenomination(
@@ -621,9 +598,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
     )(nativeLocked)
     const stakingFiatBalance = mul(stakingExchangeAmount, exchangeRate)
     const stakingFiatBalanceFormat = formatNumber(
-      stakingFiatBalance && gt(stakingFiatBalance, '0.000001')
-        ? stakingFiatBalance
-        : 0,
+      gt(stakingFiatBalance, '0.000001') ? stakingFiatBalance : 0,
       { toFixed: 2 }
     )
 
@@ -640,22 +615,71 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
     )
   }
 
-  renderButtons() {
-    const { theme, stakePolicies, countryCode } = this.props
+  /**
+   * Render sync status card when wallet is syncing and has meaningful details.
+   * Uses warning card with animated height shrink when sync completes.
+   */
+  function renderSyncStatus(): React.ReactElement | null {
+    const { totalRatio, blockRatio, otherParams } = syncStatus
+    const points: string[] = []
+
+    if (wallet.currencyInfo.syncDisplayPrecision != null) {
+      points.push(
+        sprintf(
+          lstrings.percent_complete_1s,
+          toPercentString(totalRatio, {
+            maxPrecision: wallet.currencyInfo.syncDisplayPrecision
+          })
+        )
+      )
+    }
+
+    if (blockRatio != null) {
+      points.push(
+        sprintf(
+          lstrings.sync_status_blocks,
+          formatNumber(blockRatio[0]),
+          formatNumber(blockRatio[1])
+        )
+      )
+    }
+
+    if (otherParams != null) {
+      for (const label of Object.keys(otherParams)) {
+        // TODO: Localze known labels -or-
+        // move them to the typed area, not in `otherParams`:
+        points.push(`${label}: ${otherParams[label]}`)
+      }
+    }
+
+    return points.length <= 0 ? null : (
+      <EdgeAnim visible={showSyncCard} exit={syncCardExitAnim}>
+        <AlertCardUi4
+          body={points}
+          marginRem={[0.5, 0.5, 0, 0.5]}
+          title={lstrings.sync_status_title}
+          type="warning"
+        />
+      </EdgeAnim>
+    )
+  }
+
+  function renderButtons(): React.ReactElement {
     const styles = getStyles(theme)
-    const hideStaking = !this.isStakingAvailable()
+    const hideStaking = !isStakingAvailable
     const bestApyText = getBestApyText(stakePolicies)
 
     // For UK compliance, we only allow swap without buy/sell, so we don't need
     // to show the trade modal in all cases, and if swap is disabled, we don't
     // show this button at all.
-    const hideSwap = config.disableSwaps && countryCode === 'GB'
+    const { disableSwaps = false } = config
+    const hideSwap = disableSwaps && countryCode === 'GB'
 
     return (
       <View style={styles.buttonsContainer}>
         <IconButton
           label={lstrings.fragment_request_subtitle}
-          onPress={this.handleRequest}
+          onPress={handleRequest}
         >
           <Ionicons
             name="arrow-down"
@@ -665,7 +689,7 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
         </IconButton>
         <IconButton
           label={lstrings.fragment_send_subtitle}
-          onPress={this.handleSend}
+          onPress={handleSend}
         >
           <Ionicons
             name="arrow-up"
@@ -676,11 +700,11 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
         {hideStaking ? null : (
           <IconButton
             disabled={
-              this.props.stakePlugins.length === 0 &&
-              this.props.wallet.currencyInfo.pluginId !== 'fio'
+              stakePlugins.length === 0 &&
+              wallet.currencyInfo.pluginId !== 'fio'
             }
             label={getUkCompliantString(countryCode, 'stake_earn_button_label')}
-            onPress={this.handleStakePress}
+            onPress={handleStakePress}
             superscriptLabel={bestApyText}
           >
             <Feather
@@ -696,9 +720,9 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
             onPress={
               countryCode === 'GB'
                 ? () => {
-                    this.handleTradeSwap()
+                    handleTradeSwap()
                   }
-                : this.handleTrade
+                : handleTrade
             }
           >
             <Ionicons
@@ -712,56 +736,24 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
     )
   }
 
-  isStakingAvailable = (): boolean => {
-    return (
-      isStakingSupported(this.props.wallet.currencyInfo.pluginId) &&
-      (Object.keys(this.props.stakePolicies).length > 0 ||
-        // FIO was the first staking-enabled currency and doesn't use staking policies yet
-        this.props.wallet.currencyInfo.pluginId === 'fio')
-    )
-  }
-
-  /** Return the best APY found, defaulting to 1 decimal place, rounding to the
-   * nearest whole number if >= 10, and truncating to '>99%' if greater than 99%
-   * */
-  getBestApy = (): string | undefined => {
-    const { stakePolicies } = this.props
-    if (stakePolicies.length === 0) return
-    const bestApy = stakePolicies.reduce(
-      (prev, curr) => Math.max(prev, curr.apy ?? 0),
-      0
-    )
-    if (bestApy === 0) return
-
-    const precision = Math.log10(bestApy) > 1 ? 0 : -1
-    return round(bestApy.toString(), precision) + '%'
-  }
-
-  handleRequest = (): void => {
-    const { account, navigation, tokenId, wallet } = this.props
-
+  const handleRequest = useHandler((): void => {
     triggerHaptic('impactLight')
     if (!checkAndShowLightBackupModal(account, navigation as NavigationBase)) {
       navigation.push('request', { tokenId, walletId: wallet.id })
     }
-  }
-
-  handleSend = (): void => {
-    const { navigation } = this.props
+  })
 
+  const handleSend = useHandler((): void => {
     triggerHaptic('impactLight')
-    const { wallet, tokenId } = this.props
     navigation.push('send2', {
       walletId: wallet.id,
       tokenId,
       hiddenFeaturesMap: { scamWarning: false }
     })
-  }
+  })
 
-  handleStakePress = () => {
+  const handleStakePress = useHandler((): void => {
     triggerHaptic('impactLight')
-    const { wallet, navigation, stakePolicies, tokenId } = this.props
-    const { stakePlugins } = this.props
 
     // Handle FIO staking
     if (wallet.currencyInfo.pluginId === 'fio' && tokenId == null) {
@@ -791,35 +783,36 @@ export class TransactionListTopComponent extends React.PureComponent<Props> {
         tokenId
       })
     }
-  }
-
-  render() {
-    const { wallet, isEmpty, searching, tokenId, navigation } = this.props
-    const showStakedBalance = this.isStakingAvailable()
+  })
 
-    return (
-      <>
-        {searching ? null : (
-          <>
-            <EdgeCard paddingRem={1}>
-              {this.renderBalanceBox()}
-              {!showStakedBalance ? null : this.renderStakedBalance()}
-            </EdgeCard>
-            {this.renderButtons()}
-          </>
-        )}
-        {isEmpty || searching ? null : (
-          <VisaCardCard
-            wallet={wallet}
-            tokenId={tokenId}
-            navigation={navigation}
-          />
-        )}
-      </>
-    )
-  }
+  return (
+    <>
+      {searching ? null : (
+        <>
+          <EdgeCard paddingRem={1}>
+            {renderBalanceBox()}
+            {!isStakingAvailable ? null : renderStakedBalance()}
+          </EdgeCard>
+          {renderSyncStatus()}
+          {renderButtons()}
+        </>
+      )}
+      {isEmpty || searching ? null : (
+        <VisaCardCard
+          wallet={wallet}
+          tokenId={tokenId}
+          navigation={navigation}
+        />
+      )}
+    </>
+  )
 }
 
+const syncCardExitAnim = {
+  type: 'stretchOutY',
+  duration: 300
+} as const
+
 const getStyles = cacheStyles((theme: Theme) => ({
   // Balance Box
   balanceBoxContainer: {
@@ -927,88 +920,3 @@ const getStyles = cacheStyles((theme: Theme) => ({
     fontSize: theme.rem(1)
   }
 }))
-
-export function TransactionListTop(props: OwnProps) {
-  const { tokenId, wallet, navigation } = props
-  const dispatch = useDispatch()
-  const account = useSelector(state => state.core.account)
-  const exchangeRates = useSelector(state => state.exchangeRates)
-  const defaultIsoFiat = useSelector(state => state.ui.settings.defaultIsoFiat)
-  const countryCode = useSelector(state => state.ui.countryCode)
-  const walletStakingState: WalletStakingState = useSelector(
-    // Fallback to a default state using the reducer if the wallet is not found
-    state =>
-      state.staking.walletStakingMap[wallet.id] ?? defaultWalletStakingState
-  )
-  const { stakePositionMap, lockedNativeAmount } = walletStakingState
-
-  const defaultFiat = removeIsoPrefix(defaultIsoFiat)
-  const theme = useTheme()
-
-  const { currencyCode } =
-    tokenId == null
-      ? wallet.currencyInfo
-      : wallet.currencyConfig.allTokens[tokenId]
-
-  const [stakePlugins = []] = useAsyncValue<StakePlugin[]>(
-    async () => await getStakePlugins(wallet.currencyInfo.pluginId)
-  )
-  const stakePolicies = getPoliciesFromPlugins(
-    stakePlugins,
-    stakePositionMap,
-    wallet,
-    tokenId
-  )
-
-  const displayDenomination = useSelector(state =>
-    selectDisplayDenom(state, wallet.currencyConfig, tokenId)
-  )
-  const exchangeDenomination = getExchangeDenom(wallet.currencyConfig, tokenId)
-  const exchangeRate = useSelector(state =>
-    getExchangeRate(
-      state.exchangeRates,
-      wallet.currencyInfo.pluginId,
-      tokenId,
-      defaultIsoFiat
-    )
-  )
-  const isAccountBalanceVisible = useSelector(
-    state => state.ui.settings.isAccountBalanceVisible
-  )
-
-  const walletName = useWalletName(wallet)
-  const balanceMap = useWatch(wallet, 'balanceMap')
-
-  const navigationDebounced = useAsyncNavigation(navigation)
-
-  const handleBalanceVisibility = useHandler(async () => {
-    await dispatch(toggleAccountBalanceVisibility())
-  })
-
-  return (
-    <TransactionListTopComponent
-      {...props}
-      navigation={navigationDebounced}
-      account={account}
-      balanceMap={balanceMap}
-      countryCode={countryCode}
-      currencyCode={currencyCode}
-      defaultFiat={defaultFiat}
-      dispatch={dispatch}
-      displayDenomination={displayDenomination}
-      exchangeDenomination={exchangeDenomination}
-      exchangeRate={
-        isKeysOnlyPlugin(wallet.currencyInfo.pluginId) ? 0 : exchangeRate
-      }
-      isAccountBalanceVisible={isAccountBalanceVisible}
-      exchangeRates={exchangeRates}
-      toggleBalanceVisibility={handleBalanceVisibility}
-      theme={theme}
-      walletName={walletName}
-      stakePlugins={stakePlugins}
-      stakePolicies={stakePolicies}
-      stakePositionMap={stakePositionMap}
-      lockedNativeAmount={lockedNativeAmount}
-    />
-  )
-}
diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts
index f545e9ad57a..e274ddf1b8f 100644
--- a/src/locales/en_US.ts
+++ b/src/locales/en_US.ts
@@ -443,6 +443,8 @@ const strings = {
   help_official_site_text: 'Learn more about %1$s',
   loading: 'Loading…',
   percent_complete_1s: '%1$s Complete',
+  sync_status_title: 'Sync in Progress',
+  sync_status_blocks: 'Syncing blocks %1$s/%2$s',
   validating: 'Validating…',
   high_fee_warning_confirm_send: 'Confirm Send',
   mining_fee_custom_label_choice: 'Custom',
diff --git a/src/locales/strings/enUS.json b/src/locales/strings/enUS.json
index 89c06fa682f..d3ce2839f27 100644
--- a/src/locales/strings/enUS.json
+++ b/src/locales/strings/enUS.json
@@ -307,6 +307,8 @@
   "help_official_site_text": "Learn more about %1$s",
   "loading": "Loading…",
   "percent_complete_1s": "%1$s Complete",
+  "sync_status_title": "Sync in Progress",
+  "sync_status_blocks": "Syncing blocks %1$s/%2$s",
   "validating": "Validating…",
   "high_fee_warning_confirm_send": "Confirm Send",
   "mining_fee_custom_label_choice": "Custom",
diff --git a/src/reducers/StakingReducer.ts b/src/reducers/StakingReducer.ts
index 480cfed6bad..d929a353893 100644
--- a/src/reducers/StakingReducer.ts
+++ b/src/reducers/StakingReducer.ts
@@ -23,11 +23,6 @@ export type StakingAction =
       stakePolicy: StakePolicy
       stakePosition: StakePosition
     }
-  | {
-      type: 'STAKING/UPDATE_LOCKED_AMOUNT'
-      walletId: string
-      lockedNativeAmount: string
-    }
   | {
       type: 'STAKING/UPDATE_POLICIES'
       walletId: string
@@ -47,7 +42,6 @@ export type StakingAction =
   | {
       type: 'STAKING/SETUP'
       walletId: string
-      lockedNativeAmount: string
       stakePolicies: StakePolicyMap
       stakePositionMap: StakePositionMap
     }
@@ -60,7 +54,7 @@ export type WalletStakingStateMap = Record<string, WalletStakingState>
 
 export interface WalletStakingState {
   isLoading: boolean
-  lockedNativeAmount: string
+
   /**
    * @deprecated: Using this takes too long to load if all you are doing is
    * trying to find policy information.
@@ -108,15 +102,6 @@ export const walletStakingStateReducer: Reducer<WalletStakingState, Action> =
           return state
       }
     },
-    lockedNativeAmount: (state = '0', action: Action) => {
-      switch (action.type) {
-        case 'STAKING/UPDATE_LOCKED_AMOUNT':
-        case 'STAKING/SETUP':
-          return action.lockedNativeAmount
-        default:
-          return state
-      }
-    },
     stakePolicies: (state = {}, action: Action) => {
       switch (action.type) {
         case 'STAKING/ADD_POLICY':
@@ -150,7 +135,3 @@ export const walletStakingStateReducer: Reducer<WalletStakingState, Action> =
       }
     }
   })
-
-export const defaultWalletStakingState = walletStakingStateReducer(undefined, {
-  type: 'DUMMY_ACTION_PLEASE_IGNORE'
-})