temp

suite-common/wallet-utils/src/stakingUtils.ts

@@ -52,3 +52,9 @@ export const getAccountTotalStakingBalance = (account?: Account) => {
         .plus(pool?.withdrawTotalAmount ?? '0')
         .toFixed();
 };
+
+export const getEthereumCryptoBalanceWithStaking = (account: Account) => {
+    const stakingBalance = getAccountTotalStakingBalance(account);
+
+    return new BigNumber(account.formattedBalance).plus(stakingBalance).toString();
+};

suite-native/accounts/package.json

@@ -33,6 +33,7 @@
         "@suite-native/navigation": "workspace:*",
         "@suite-native/settings": "workspace:*",
         "@suite-native/tokens": "workspace:*",
+        "@suite-native/staking": "workspace:*",
         "@trezor/styles": "workspace:*",
         "jotai": "1.9.1",
         "proxy-memoize": "2.0.2",

suite-native/accounts/src/components/AccountSectionTitle.tsx

@@ -2,9 +2,10 @@ import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
 import { HStack, VStack, Text } from '@suite-native/atoms';
-import { FiatAmountFormatter } from '@suite-native/formatters';
+import { CryptoAmountFormatter, FiatAmountFormatter } from '@suite-native/formatters';
 import { Account } from '@suite-common/wallet-types';
 import { getAccountFiatBalance } from '@suite-common/wallet-utils';
+import { getCryptoBalanceWithStaking } from '@suite-native/staking';
 import { selectFiatCurrencyCode } from '@suite-native/settings';
 import { selectCurrentFiatRates } from '@suite-common/wallet-core';
 
@@ -36,6 +37,12 @@ export const AccountSectionTitle: React.FC<AccountSectionTitleProps> = ({
                         adjustsFontSizeToFit
                         value={fiatBalance}
                     />
+                    <CryptoAmountFormatter
+                        value={getCryptoBalanceWithStaking(account)}
+                        network={account.symbol}
+                        numberOfLines={1}
+                        adjustsFontSizeToFit
+                    />
                 </VStack>
             )}
         </HStack>

suite-native/accounts/src/components/AccountSelectBottomSheet.tsx

@@ -9,6 +9,7 @@ import { AccountSelectBottomSheetSection, OnSelectAccount } from '../types';
 import { AccountsListItem } from './AccountsList/AccountsListItem';
 import { AccountSectionTitle } from './AccountSectionTitle';
 import { AccountsListTokenItem } from './AccountsList/AccountsListTokenItem';
+import { AccountsListStakingItem } from './AccountsList/AccountsListStakingItem';
 
 type AccountSelectBottomSheetProps = {
     data: AccountSelectBottomSheetSection[];
@@ -39,8 +40,9 @@ export const AccountSelectBottomSheet = React.memo(
                             />
                         );
                     case 'staking':
-                        // TODO: Implement staking section
-                        return null;
+                        return (
+                            <AccountsListStakingItem {...item} hasBackground onPress={() => {}} />
+                        );
                     case 'token':
                         const { token, account } = item;
 

suite-native/accounts/src/components/AccountsList/AccountsList.tsx

@@ -61,7 +61,7 @@ export const AccountsList = ({
                             <AccountsListItem
                                 key={account.key}
                                 account={account}
-                                hideTokens={hideTokensIntoModal}
+                                hideBadges={hideTokensIntoModal}
                                 onPress={handleSetBottomSheetAccount}
                             />
                         ))}

suite-native/accounts/src/components/AccountsList/AccountsListItem.tsx

@@ -17,14 +17,19 @@ import {
     selectNumberOfAccountTokensWithFiatRates,
     TokensRootState,
 } from '@suite-native/tokens';
+import {
+    NativeStakingRootState,
+    selectAccountHasStaking,
+    StakingBadge,
+} from '@suite-native/staking';
 
 import { NativeAccountsRootState, selectAccountFiatBalance } from '../../selectors';
 import { OnSelectAccount } from '../../types';
 import { AccountsListItemBase } from './AccountsListItemBase';
 
 export type AccountListItemProps = {
     account: Account;
-    hideTokens?: boolean;
+    hideBadges?: boolean;
 
     onPress?: OnSelectAccount;
     disabled?: boolean;
@@ -53,7 +58,7 @@ export const AccountsListItem = ({
     account,
     onPress,
     disabled,
-    hideTokens = false,
+    hideBadges = false,
     hasBackground = false,
     isFirst = false,
     isLast = false,
@@ -69,6 +74,10 @@ export const AccountsListItem = ({
         selectAccountHasAnyKnownToken(state, account.key),
     );
 
+    const accountHasStaking = useSelector((state: NativeStakingRootState) =>
+        selectAccountHasStaking(state, account.key),
+    );
+
     const fiatBalance = useSelector((state: NativeAccountsRootState) =>
         selectAccountFiatBalance(state, account.key),
     );
@@ -81,8 +90,9 @@ export const AccountsListItem = ({
     }, [account, accountHasAnyTokens, onPress]);
 
     const doesCoinSupportTokens = isCoinWithTokens(account.symbol);
-    const shouldShowAccountLabel = !doesCoinSupportTokens || hideTokens;
-    const shouldShowTokenBadge = accountHasAnyTokens && hideTokens;
+    const shouldShowAccountLabel = !doesCoinSupportTokens || hideBadges;
+    const shouldShowTokenBadge = accountHasAnyTokens && hideBadges;
+    const shouldShowStakingBadge = accountHasStaking && hideBadges;
 
     return (
         <AccountsListItemBase
@@ -105,6 +115,7 @@ export const AccountsListItem = ({
                     {formattedAccountType && (
                         <Badge label={formattedAccountType} size="small" elevation="1" />
                     )}
+                    {shouldShowStakingBadge && <StakingBadge />}
                     {shouldShowTokenBadge && <TokenBadge accountKey={account.key} />}
                 </>
             }

suite-native/accounts/src/components/AccountsList/AccountsListStakingItem.tsx

@@ -0,0 +1,51 @@
+import { Account } from '@suite-common/wallet-types';
+import { RoundedIcon } from '@suite-native/atoms';
+import { CryptoAmountFormatter, CryptoToFiatAmountFormatter } from '@suite-native/formatters';
+
+import { AccountsListItemBase } from './AccountsListItemBase';
+
+type AccountsListStakingItemProps = {
+    account: Account;
+    stakingCryptoBalance: string;
+    onPress: () => void;
+
+    hasBackground?: boolean;
+    isFirst?: boolean;
+    isLast?: boolean;
+};
+
+export const AccountsListStakingItem = ({
+    account,
+    onPress,
+    stakingCryptoBalance,
+    hasBackground,
+    isFirst,
+    isLast,
+}: AccountsListStakingItemProps) => {
+    return (
+        <AccountsListItemBase
+            hasBackground={hasBackground}
+            isFirst={isFirst}
+            isLast={isLast}
+            showDivider={!isLast}
+            onPress={onPress}
+            icon={<RoundedIcon name="piggyBank" />}
+            title="Staking"
+            mainValue={
+                <CryptoToFiatAmountFormatter
+                    value={stakingCryptoBalance}
+                    network={account.symbol}
+                    isBalance
+                />
+            }
+            secondaryValue={
+                <CryptoAmountFormatter
+                    value={stakingCryptoBalance}
+                    network={account.symbol}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                />
+            }
+        />
+    );
+};

suite-native/accounts/src/selectors.ts

@@ -16,7 +16,7 @@ import {
     selectVisibleDeviceAccounts,
 } from '@suite-common/wallet-core';
 import { AccountKey, TokenInfoBranded } from '@suite-common/wallet-types';
-import { getAccountFiatBalance } from '@suite-common/wallet-utils';
+import { getAccountFiatBalance, getAccountTotalStakingBalance } from '@suite-common/wallet-utils';
 import { SettingsSliceRootState, selectFiatCurrencyCode } from '@suite-native/settings';
 import { isCoinWithTokens } from '@suite-native/tokens';
 
@@ -78,12 +78,10 @@ export const selectAccountFiatBalance = (state: NativeAccountsRootState, account
         return '0';
     }
 
-    // Staking should be true once we support it in Trezor Suite Lite
     const totalBalance = getAccountFiatBalance({
         account,
         rates: fiatRates,
         localCurrency,
-        shouldIncludeStaking: false,
     });
 
     return totalBalance;
@@ -92,7 +90,7 @@ export const selectAccountFiatBalance = (state: NativeAccountsRootState, account
 const EMPTY_ARRAY: any[] = [];
 
 export const selectAccountListSections = memoizeWithArgs(
-    (state: NativeAccountsRootState, accountKey?: AccountKey | null) => {
+    (state: NativeAccountsRootState, accountKey?: AccountKey | null, hideStaking?: boolean) => {
         if (!accountKey) return EMPTY_ARRAY;
         const account = selectAccountByKey(state, accountKey);
         if (!account) return EMPTY_ARRAY;
@@ -102,6 +100,8 @@ export const selectAccountListSections = memoizeWithArgs(
         const canHasTokens = isCoinWithTokens(account.symbol);
         const tokens = selectFilterKnownTokens(state, account.symbol, account.tokens ?? []);
         const hasAnyKnownTokens = canHasTokens && !!tokens.length;
+        const stakingBalance = getAccountTotalStakingBalance(account);
+        const hasStaking = stakingBalance !== '0' && !hideStaking;
 
         if (canHasTokens) {
             sections.push({
@@ -113,12 +113,19 @@ export const selectAccountListSections = memoizeWithArgs(
         sections.push({
             type: 'account',
             account,
-            isLast: !hasAnyKnownTokens,
+            isLast: !hasAnyKnownTokens && !hasStaking,
             isFirst: true,
             hasAnyKnownTokens,
         });
 
-        // TODO: staking here
+        if (hasStaking) {
+            sections.push({
+                type: 'staking',
+                account,
+                stakingCryptoBalance: stakingBalance,
+                isLast: !hasAnyKnownTokens,
+            });
+        }
 
         if (hasAnyKnownTokens) {
             tokens.forEach((token, index) => {

suite-native/accounts/src/types.ts

@@ -23,6 +23,7 @@ export type AccountSelectBottomSheetSection = (
     | {
           type: 'staking';
           account: Account;
+          stakingCryptoBalance: string;
       }
     | {
           type: 'token';

suite-native/assets/package.json

@@ -30,6 +30,7 @@
         "@suite-native/settings": "workspace:*",
         "@suite-native/tokens": "workspace:*",
         "@trezor/styles": "workspace:*",
+        "@suite-native/staking": "workspace:*",
         "proxy-memoize": "2.0.2",
         "react": "^18.2.0",
         "react-native": "0.75.2",

suite-native/assets/src/assetsSelectors.ts

@@ -88,8 +88,6 @@ const selectDeviceAssetsWithBalances = memoize((state: AssetsRootState) => {
             account,
             localCurrency: fiatCurrencyCode,
             rates,
-            // TODO: this should be removed once Trezor Suite Lite supports staking
-            shouldIncludeStaking: false,
         });
 
         return {

suite-native/assets/src/components/AssetItem.tsx

@@ -21,7 +21,11 @@ import {
     TabToStackCompositeNavigationProp,
 } from '@suite-native/navigation';
 import { selectHasDeviceAnyTokens } from '@suite-native/tokens';
-import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import {
+    selectHasAnyDeviceAccountsWithStaking,
+    NativeStakingRootState,
+    StakingBadge,
+} from '@suite-native/staking';
 
 import {
     AssetsRootState,
@@ -36,10 +40,6 @@ type AssetItemProps = {
     onPress?: (symbol: NetworkSymbol) => void;
 };
 
-const tokenBadgeStyle = prepareNativeStyle(() => ({
-    marginLeft: 10,
-}));
-
 type NavigationType = TabToStackCompositeNavigationProp<
     AppTabsParamList,
     AppTabsRoutes.HomeStack,
@@ -83,7 +83,6 @@ const PercentageIcon = React.memo(({ network }: { network: NetworkSymbol }) => {
 });
 
 export const AssetItem = React.memo(({ cryptoCurrencySymbol, onPress }: AssetItemProps) => {
-    const { applyStyle } = useNativeStyles();
     const navigation = useNavigation<NavigationType>();
     const { NetworkNameFormatter } = useFormatters();
     const accountsKeysForNetworkSymbol = useSelectorDeepComparison((state: AssetsRootState) =>
@@ -95,6 +94,9 @@ export const AssetItem = React.memo(({ cryptoCurrencySymbol, onPress }: AssetIte
         (state: AccountsRootState & DeviceRootState & TokenDefinitionsRootState) =>
             selectHasDeviceAnyTokens(state, cryptoCurrencySymbol),
     );
+    const hasAnyAccountsWithStaking = useSelector((state: NativeStakingRootState) =>
+        selectHasAnyDeviceAccountsWithStaking(state, cryptoCurrencySymbol),
+    );
 
     const handleAssetPress = () => {
         if (accountsPerAsset === 1 && !hasAnyTokens) {
@@ -121,10 +123,9 @@ export const AssetItem = React.memo(({ cryptoCurrencySymbol, onPress }: AssetIte
                     <Text variant="hint" color="textSubdued">
                         {accountsPerAsset}
                     </Text>
-
+                    {hasAnyAccountsWithStaking && <StakingBadge />}
                     {hasAnyTokens && (
                         <Badge
-                            style={applyStyle(tokenBadgeStyle)}
                             elevation="1"
                             size="small"
                             label={<Translation id="generic.tokens" />}

suite-native/atoms/src/RoundedIcon.tsx

@@ -1,3 +1,5 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
 import { G } from '@mobily/ts-belt';
 
 import {
@@ -11,15 +13,15 @@ import {
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Color } from '@trezor/theme';
 
-import { Box } from './Box';
+import { Box, BoxProps } from './Box';
 
 type RoundedIconProps = {
     name: IconName | CoinSymbol;
     color?: Color;
     iconSize?: IconSize;
     containerSize?: number;
     backgroundColor?: Color;
-};
+} & BoxProps;
 
 const DEFAULT_CONTAINER_SIZE = 48;
 
@@ -47,11 +49,16 @@ export const RoundedIcon = ({
     iconSize,
     backgroundColor,
     containerSize,
+    style,
+    ...boxProps
 }: RoundedIconProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
-        <Box style={applyStyle(iconContainerStyle, { backgroundColor, containerSize })}>
+        <Box
+            style={[applyStyle(iconContainerStyle, { backgroundColor, containerSize }), style]}
+            {...boxProps}
+        >
             {name in icons ? (
                 <Icon name={name as IconName} color={color} size={iconSize} />
             ) : (

suite-native/staking/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@suite-native/staking",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "depcheck": "yarn g:depcheck",
+        "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
+        "test:unit": "jest -c ../../jest.config.base.js",
+        "type-check": "yarn g:tsc --build"
+    },
+    "dependencies": {
+        "@suite-common/wallet-config": "workspace:*",
+        "@suite-common/wallet-core": "workspace:*",
+        "@suite-common/wallet-types": "workspace:*",
+        "@suite-common/wallet-utils": "workspace:*"
+    }
+}