diff --git a/packages/suite/src/reducers/suite/suiteReducer.ts b/packages/suite/src/reducers/suite/suiteReducer.ts
index 7a6ec28f3f3..d7b5f24de6b 100644
--- a/packages/suite/src/reducers/suite/suiteReducer.ts
+++ b/packages/suite/src/reducers/suite/suiteReducer.ts
@@ -59,6 +59,7 @@ export interface Flags {
securityStepsHidden: boolean; // dashboard UI
dashboardGraphHidden: boolean; // dashboard UI
dashboardAssetsGridMode: boolean; // dashboard UI
+ instantStakeBannerClosed: boolean; // banner in account view (Staking tab)
showDashboardT2B1PromoBanner: boolean;
showSettingsDesktopAppPromoBanner: boolean;
stakeEthBannerClosed: boolean; // banner in account view (Overview tab) presenting ETH staking feature
@@ -115,6 +116,7 @@ const initialState: SuiteState = {
securityStepsHidden: false,
dashboardGraphHidden: false,
dashboardAssetsGridMode: true,
+ instantStakeBannerClosed: false,
showDashboardT2B1PromoBanner: true,
showSettingsDesktopAppPromoBanner: true,
stakeEthBannerClosed: false,
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
index 389bf3355fc..1d3a86b6dc7 100644
--- a/packages/suite/src/support/messages.ts
+++ b/packages/suite/src/support/messages.ts
@@ -8818,6 +8818,15 @@ export default defineMessages({
id: 'TR_STAKE_POWERED_BY',
defaultMessage: 'Powered by',
},
+ TR_STAKE_INSTANTLY_STAKED: {
+ id: 'TR_STAKE_INSTANTLY_STAKED',
+ defaultMessage: "You've instantly staked {amount} {symbol}",
+ },
+ TR_STAKE_INSTANTLY_STAKED_WITH_DAYS: {
+ id: 'TR_STAKE_INSTANTLY_STAKED_WITH_DAYS',
+ defaultMessage:
+ "You've instantly staked {stakedAmount} {symbol}. The remaining {remainingAmount} {symbol} is staked within {days} days.",
+ },
TR_STAKE_EVERSTAKE_MANAGES: {
id: 'TR_STAKE_EVERSTAKE_MANAGES',
defaultMessage:
diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/InstantStakeBanner.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/InstantStakeBanner.tsx
new file mode 100644
index 00000000000..8e4304c865d
--- /dev/null
+++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/InstantStakeBanner.tsx
@@ -0,0 +1,74 @@
+import { Button, Icon, variables, Warning } from '@trezor/components';
+import { Translation } from 'src/components/suite';
+import styled, { useTheme } from 'styled-components';
+import { spacingsPx } from '@trezor/theme';
+import { useDispatch, useSelector } from '../../../../../../hooks/suite';
+import { selectSuiteFlags } from '../../../../../../reducers/suite/suiteReducer';
+import { setFlag } from '../../../../../../actions/suite/suiteActions';
+
+const StyledWarning = styled(Warning)`
+ justify-content: space-between;
+ font-weight: ${variables.FONT_WEIGHT.BOLD};
+ font-size: ${variables.FONT_SIZE.NORMAL};
+`;
+
+const FlexRow = styled.div`
+ display: flex;
+ align-content: space-between;
+ gap: ${spacingsPx.sm};
+`;
+
+interface InstantStakeBannerProps {
+ instantlyStakedAmount: number;
+ symbol?: string;
+ daysToAddToPool?: number;
+ remainingAmount?: number;
+}
+
+export const InstantStakeBanner = ({
+ daysToAddToPool,
+ instantlyStakedAmount,
+ remainingAmount,
+ symbol,
+}: InstantStakeBannerProps) => {
+ const theme = useTheme();
+ const { instantStakeBannerClosed } = useSelector(selectSuiteFlags);
+ const dispatch = useDispatch();
+
+ const closeBanner = () => {
+ dispatch(setFlag('instantStakeBannerClosed', true));
+ };
+
+ if (instantStakeBannerClosed) return null;
+
+ return (
+
+
+
+ {daysToAddToPool && daysToAddToPool > 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx
index f7539def8f9..55988da7f77 100644
--- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx
+++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx
@@ -18,6 +18,7 @@ import {
selectValidatorsQueue,
} from '@suite-common/wallet-core';
import { getDaysToAddToPool, getDaysToUnstake } from 'src/utils/suite/stake';
+import { InstantStakeBanner } from './InstantStakeBanner';
const FlexCol = styled.div`
display: flex;
@@ -71,12 +72,17 @@ export const StakingDashboard = () => {
+
+
-