feat(suite): solana staking banner

packages/suite/src/actions/suite/__fixtures__/suiteActions.ts

@@ -206,6 +206,7 @@ const initialRun = [
                 showDashboardT3T1PromoBanner: false,
                 showSettingsDesktopAppPromoBanner: true,
                 stakeEthBannerClosed: false,
+                stakeSolBannerClosed: false,
                 showDashboardStakingPromoBanner: true,
                 viewOnlyPromoClosed: true,
                 viewOnlyTooltipClosed: true,

packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountBanners.tsx

@@ -14,7 +14,7 @@ import { AccountImported } from './AccountImported';
 import { AccountOutOfSync } from './AccountOutOfSync';
 import { TorDisconnected } from './TorDisconnected';
 import { ContextMessage } from './ContextMessage';
-import { StakeEthBanner } from './StakeEthBanner';
+import { StakingBanner } from './StakingBanner';
 import { EvmExplanationBanner } from './EvmExplanationBanner';
 import { TaprootBanner } from './TaprootBanner';
 
@@ -40,7 +40,7 @@ export const AccountBanners = ({ account }: AccountBannersProps) => {
             <AccountOutOfSync account={account} />
             <EvmExplanationBanner account={account} />
             <TaprootBanner account={account} />
-            {account?.symbol && <StakeEthBanner account={account} />}
+            {account?.symbol && <StakingBanner account={account} />}
         </Column>
     );
 };

packages/suite/src/components/wallet/WalletLayout/AccountBanners/StakingBanner.tsx

@@ -0,0 +1,120 @@
+import { useTheme } from 'styled-components';
+
+import { Button, Text, IconButton, Row, Banner, Column } from '@trezor/components';
+import { spacings } from '@trezor/theme';
+import { Account } from '@suite-common/wallet-types';
+import { selectPoolStatsApyData } from '@suite-common/wallet-core';
+import {
+    MIN_ETH_AMOUNT_FOR_STAKING,
+    MIN_SOL_AMOUNT_FOR_STAKING,
+} from '@suite-common/wallet-constants';
+import {
+    isSupportedEthStakingNetworkSymbol,
+    isSupportedSolStakingNetworkSymbol,
+} from '@suite-common/wallet-utils';
+import { getNetworkDisplaySymbol, NetworkType } from '@suite-common/wallet-config';
+
+import { Translation } from 'src/components/suite';
+import { goto } from 'src/actions/suite/routerActions';
+import { useDispatch, useSelector } from 'src/hooks/suite';
+import { setFlag } from 'src/actions/suite/suiteActions';
+
+import { selectSuiteFlags } from '../../../../reducers/suite/suiteReducer';
+
+interface StakingBannerProps {
+    account: Account;
+}
+
+export const StakingBanner = ({ account }: StakingBannerProps) => {
+    const dispatch = useDispatch();
+    const { stakeEthBannerClosed, stakeSolBannerClosed } = useSelector(selectSuiteFlags);
+    const { route } = useSelector(state => state.router);
+    const apy = useSelector(state => selectPoolStatsApyData(state, account.symbol));
+    const theme = useTheme();
+
+    const closeBanner = () => {
+        switch (account.networkType) {
+            case 'ethereum':
+                dispatch(setFlag('stakeEthBannerClosed', true));
+                break;
+            case 'solana':
+                dispatch(setFlag('stakeSolBannerClosed', true));
+                break;
+        }
+    };
+
+    const goToStakingTab = () => {
+        dispatch(goto('wallet-staking', { preserveParams: true }));
+    };
+
+    const getNetworkDetails = (networkType: NetworkType) => {
+        switch (networkType) {
+            case 'ethereum':
+                return {
+                    isStakingBannerClosed: stakeEthBannerClosed,
+                    minStakingAmount: MIN_ETH_AMOUNT_FOR_STAKING,
+                    isSupportedStakingNetworkSymbol: isSupportedEthStakingNetworkSymbol(
+                        account.symbol,
+                    ),
+                };
+            case 'solana':
+                return {
+                    isStakingBannerClosed: stakeSolBannerClosed,
+                    minStakingAmount: MIN_SOL_AMOUNT_FOR_STAKING,
+                    isSupportedStakingNetworkSymbol: isSupportedSolStakingNetworkSymbol(
+                        account.symbol,
+                    ),
+                };
+            default:
+                return {
+                    isStakingBannerClosed: true,
+                    minStakingAmount: undefined,
+                    isSupportedStakingNetworkSymbol: false,
+                };
+        }
+    };
+
+    const { isStakingBannerClosed, minStakingAmount, isSupportedStakingNetworkSymbol } =
+        getNetworkDetails(account.networkType) ?? {};
+
+    if (
+        route?.name !== 'wallet-index' ||
+        isStakingBannerClosed ||
+        !account ||
+        !isSupportedStakingNetworkSymbol
+    ) {
+        return null;
+    }
+
+    return (
+        <Banner
+            variant="tertiary"
+            icon="piggyBankFilled"
+            rightContent={
+                <Row gap={8}>
+                    <Button size="small" onClick={goToStakingTab} textWrap={false}>
+                        <Translation id="TR_STAKE_LEARN_MORE" />
+                    </Button>
+                    <IconButton size="small" variant="tertiary" icon="x" onClick={closeBanner} />
+                </Row>
+            }
+        >
+            <Column gap={4} alignItems="flex-start" flex="1" margin={{ left: spacings.xs }}>
+                <Text color={theme.textSubdued} typographyStyle="callout">
+                    <Translation id="TR_STAKE_ETH_EARN_REPEAT" />
+                </Text>
+
+                <Text typographyStyle="body" textWrap="balance">
+                    <Translation
+                        id="TR_STAKE_ANY_AMOUNT_ETH"
+                        values={{
+                            apyPercent: apy,
+                            networkDisplaySymbol: getNetworkDisplaySymbol(account.symbol),
+                            amount: minStakingAmount?.toString(),
+                        }}
+                    />
+                </Text>
+            </Column>
+        </Banner>
+    );
+};

packages/suite/src/hooks/wallet/__fixtures__/useSendForm.ts

@@ -236,7 +236,7 @@ export const getRootReducer = (selectedAccount = BTC_ACCOUNT, fees = DEFAULT_FEE
                 settings: { debug: {}, theme: { variant: 'light' } },
                 evmSettings: { confirmExplanationModalClosed: {}, explanationBannerClosed: {} },
                 prefillFields: { sendForm: '', transactionHistory: '' },
-                flags: { stakeEthBannerClosed: false },
+                flags: { stakeEthBannerClosed: false, stakeSolBannerClosed: false },
             },
             () => ({}),
         ),

packages/suite/src/reducers/suite/suiteReducer.ts

@@ -70,6 +70,7 @@ export interface Flags {
     showDashboardT3T1PromoBanner: boolean;
     showSettingsDesktopAppPromoBanner: boolean;
     stakeEthBannerClosed: boolean; // banner in account view (Overview tab) presenting ETH staking feature
+    stakeSolBannerClosed: boolean; // banner in account view (Overview tab) presenting SOL staking feature
     showDashboardStakingPromoBanner: boolean;
     isDashboardPassphraseBannerVisible: boolean;
     viewOnlyPromoClosed: boolean;
@@ -145,6 +146,7 @@ const initialState: SuiteState = {
         showDashboardT3T1PromoBanner: true,
         showSettingsDesktopAppPromoBanner: true,
         stakeEthBannerClosed: false,
+        stakeSolBannerClosed: false,
         showDashboardStakingPromoBanner: true,
         viewOnlyPromoClosed: false,
         viewOnlyTooltipClosed: false,