feat(staking): instant staking/unstaking success

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,

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:

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 (
+        <StyledWarning variant="info">
+            <FlexRow>
+                <Icon icon="LIGHTNING" size={24} color={theme.iconAlertBlue} />
+                {daysToAddToPool && daysToAddToPool > 0 ? (
+                    <Translation
+                        id="TR_STAKE_INSTANTLY_STAKED_WITH_DAYS"
+                        values={{
+                            stakedAmount: instantlyStakedAmount,
+                            remainingAmount,
+                            symbol,
+                            days: daysToAddToPool,
+                        }}
+                    />
+                ) : (
+                    <Translation
+                        id="TR_STAKE_INSTANTLY_STAKED"
+                        values={{
+                            amount: instantlyStakedAmount,
+                            symbol,
+                        }}
+                    />
+                )}
+            </FlexRow>
+
+            <Button variant="tertiary" onClick={closeBanner}>
+                <Translation id="TR_GOT_IT" />
+            </Button>
+        </StyledWarning>
+    );
+};

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 = () => {
                 <ClaimCard />
 
                 <FlexCol>
+                    <InstantStakeBanner
+                        instantlyStakedAmount={0.1}
+                        daysToAddToPool={daysToAddToPool}
+                        symbol={account?.symbol.toUpperCase()}
+                    />
+
                     <StakingCard
                         isValidatorsQueueLoading={isLoading}
                         daysToAddToPool={daysToAddToPool}
                         daysToUnstake={daysToUnstake}
                     />
-
                     <FlexRow>
                         <ApyCard apy={ethApy} />
                         <PayoutCard