feat(message-system): add context banner to solana staking tab

trezor · Mar 4, 2025 · d7b1bb0 · d7b1bb0
1 parent 3963fc6
commit d7b1bb0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountBanners.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/AccountBanners.tsx
@@ -1,5 +1,8 @@
 import { Context } from '@suite-common/message-system';
-import { isSupportedEthStakingNetworkSymbol } from '@suite-common/wallet-utils';
+import {
+    isSupportedEthStakingNetworkSymbol,
+    isSupportedSolStakingNetworkSymbol,
+} from '@suite-common/wallet-utils';
 import { Column } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
@@ -31,6 +34,9 @@ export const AccountBanners = ({ account }: AccountBannersProps) => {
             {account?.symbol &&
                 isSupportedEthStakingNetworkSymbol(account.symbol) &&
                 route?.name === 'wallet-staking' && <ContextMessage context={Context.ethStaking} />}
+            {account?.symbol &&
+                isSupportedSolStakingNetworkSymbol(account.symbol) &&
+                route?.name === 'wallet-staking' && <ContextMessage context={Context.solStaking} />}
             <AuthConfirmFailed />
             <BackendDisconnected />
             <DeviceUnavailable />

diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountBanners/ContextMessage.tsx
@@ -1,8 +1,10 @@
 import { Context, selectContextMessageContent } from '@suite-common/message-system';
-import { Banner } from '@trezor/components';
+import { Banner, Row } from '@trezor/components';
 
-import { useSelector } from 'src/hooks/suite';
-import { selectLanguage } from 'src/reducers/suite/suiteReducer';
+import { goto } from 'src/actions/suite/routerActions';
+import { useDispatch, useSelector } from 'src/hooks/suite';
+import { selectLanguage, selectTorState } from 'src/reducers/suite/suiteReducer';
+import { getTorUrlIfAvailable } from 'src/utils/suite/tor';
 
 type ContextMessageProps = {
     context: (typeof Context)[keyof typeof Context];
@@ -11,17 +13,43 @@ type ContextMessageProps = {
 export const ContextMessage = ({ context }: ContextMessageProps) => {
     const language = useSelector(selectLanguage);
     const message = useSelector(state => selectContextMessageContent(state, context, language));
+    const { isTorEnabled } = useSelector(selectTorState);
+    const torOnionLinks = useSelector(state => state.suite.settings.torOnionLinks);
+    const dispatch = useDispatch();
 
-    return message ? (
+    if (!message) return null;
+
+    const onCallToAction = ({ action, link, anchor }: NonNullable<(typeof message)['cta']>) => {
+        switch (action) {
+            case 'internal-link':
+                // @ts-expect-error: impossible to add all href options to the message system config json schema
+                return () => dispatch(goto(link, { anchor, preserveParams: true }));
+            case 'external-link':
+                return () =>
+                    window.open(
+                        isTorEnabled && torOnionLinks ? getTorUrlIfAvailable(link) : link,
+                        '_blank',
+                    );
+        }
+    };
+
+    return (
         <Banner
             variant={message.variant === 'critical' ? 'destructive' : message.variant}
             rightContent={
-                message.cta ? (
-                    <Banner.Button href={message.cta.link}>{message.cta.label}</Banner.Button>
-                ) : undefined
+                message.cta && (
+                    <Row gap={8}>
+                        <Banner.Button
+                            onClick={onCallToAction(message.cta)}
+                            data-testid={`@context-message/${context}/cta`}
+                        >
+                            {message.cta.label}
+                        </Banner.Button>
+                    </Row>
+                )
             }
         >
             {message.content}
         </Banner>
-    ) : null;
+    );
 };
diff --git a/suite-common/message-system/src/messageSystemTypes.ts b/suite-common/message-system/src/messageSystemTypes.ts
@@ -36,6 +36,7 @@ export type FeatureDomain = (typeof Feature)[keyof typeof Feature];
 export const Context = {
     coinjoin: 'accounts.coinjoin',
     ethStaking: 'accounts.eth.staking',
+    solStaking: 'accounts.sol.staking',
 } as const;
 
 export type ContextDomain = (typeof Context)[keyof typeof Context];