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 = () => { + + -