diff --git a/packages/suite/src/components/suite/StakeAmountWrapper.tsx b/packages/suite/src/components/suite/StakeAmountWrapper.tsx
index 1ba22d5df5e8..1d9062f57342 100644
--- a/packages/suite/src/components/suite/StakeAmountWrapper.tsx
+++ b/packages/suite/src/components/suite/StakeAmountWrapper.tsx
@@ -1,6 +1,6 @@
import { ReactNode } from 'react';
import styled from 'styled-components';
-import { Tooltip, TOOLTIP_DELAY_LONG } from '@trezor/components';
+import { Tooltip, TOOLTIP_DELAY_NONE, TOOLTIP_DELAY_NORMAL } from '@trezor/components';
import { mediaQueries } from '@trezor/styles';
import { Translation } from './Translation';
import { goto } from 'src/actions/suite/routerActions';
@@ -16,7 +16,6 @@ const Container = styled.div`
border-radius: 6px;
transition: background 0.1s ease-in;
cursor: pointer;
-
${mediaQueries.hover} {
:hover {
background: ${({ theme }) => theme.BG_GREY};
@@ -36,9 +35,9 @@ export const StakeAmountWrapper = ({ children }: StakeAmountWrapperProps) => {
}
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx
index a87947e1625f..d0c67cac16ea 100644
--- a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx
+++ b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx
@@ -1,16 +1,24 @@
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
import { forwardRef } from 'react';
import { spacingsPx } from '@trezor/theme';
import { NetworkSymbol } from '@suite-common/wallet-config';
-import { CoinLogo, SkeletonCircle, SkeletonRectangle } from '@trezor/components';
+import { CoinLogo, Icon, SkeletonCircle, SkeletonRectangle } from '@trezor/components';
-import { FormattedCryptoAmount, AmountUnitSwitchWrapper } from 'src/components/suite';
+import {
+ FormattedCryptoAmount,
+ AmountUnitSwitchWrapper,
+ StakeAmountWrapper,
+} from 'src/components/suite';
import { useSelector } from 'src/hooks/suite';
import { FiatHeader } from 'src/views/dashboard/components/FiatHeader';
import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
import { useFiatFromCryptoValue } from 'src/hooks/suite/useFiatFromCryptoValue';
import { globalPaddingEraserStyle } from 'src/components/suite/layouts/SuiteLayout/utils';
+import { STAKE_SYMBOLS } from 'src/constants/suite/ethStaking';
+import { selectIsDebugModeActive } from 'src/reducers/suite/suiteReducer';
+import { selectSelectedAccountAutocompoundBalance } from 'src/reducers/wallet/selectedAccountReducer';
+import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils';
export const ACCOUNT_INFO_HEIGHT = 80;
@@ -19,7 +27,7 @@ const Container = styled.div`
flex-direction: column;
gap: ${spacingsPx.xxs};
width: fit-content;
- height: ${ACCOUNT_INFO_HEIGHT}px;
+ min-height: ${ACCOUNT_INFO_HEIGHT}px;
${globalPaddingEraserStyle}
`;
@@ -31,15 +39,11 @@ const AccountCryptoBalance = styled.div`
color: ${({ theme }) => theme.textSubdued};
`;
-// const AmountsWrapper = styled.div`
-// display: flex;
-// flex-direction: column;
-// gap: ${spacingsPx.sm};
-//
-// & > div:nth-of-type(2) {
-// max-width: fit-content;
-// }
-// `;
+const AmountsWrapper = styled.div`
+ display: flex;
+ gap: ${spacingsPx.lg};
+ flex-wrap: wrap;
+`;
interface AccountTopPanelSkeletonProps {
animate?: boolean;
@@ -58,8 +62,10 @@ const AccountTopPanelSkeleton = ({ animate, symbol }: AccountTopPanelSkeletonPro
);
export const AccountTopPanel = forwardRef((_, ref) => {
+ const theme = useTheme();
const { account, loader, status } = useSelector(state => state.wallet.selectedAccount);
const localCurrency = useSelector(selectLocalCurrency);
+ const autocompoundBalance = useSelector(selectSelectedAccountAutocompoundBalance);
const isDebug = useSelector(selectIsDebugModeActive);
// TODO: move this to FiatHeader
@@ -68,6 +74,12 @@ export const AccountTopPanel = forwardRef((_, ref) => {
symbol: account?.symbol || '',
});
+ const mappedSymbol = account?.symbol ? mapTestnetSymbol(account?.symbol) : '';
+ const { fiatAmount: fiatStakeAmount } = useFiatFromCryptoValue({
+ amount: autocompoundBalance,
+ symbol: mappedSymbol,
+ });
+
if (status !== 'loaded' || !account) {
return (
((_, ref) => {
const { symbol, formattedBalance } = account;
// TODO: remove isDebug for staking release
- // const isStakeShown = STAKE_SYMBOLS.includes(symbol) && isDebug;
+ const isStakeShown = STAKE_SYMBOLS.includes(symbol) && isDebug;
return (
-
-
-
-
-
-
-
-
-
+
+
+
+ {isStakeShown && (
+
+ )}
+
);
});