feat(suite): add footnote text while waiting for solata TX to confirm (…

…#11780)

(cherry picked from commit b7af6a2)

packages/components/src/components/Warning/Warning.tsx

@@ -1,32 +1,47 @@
 import { ReactNode } from 'react';
-import styled, { DefaultTheme, useTheme } from 'styled-components';
+import styled, { DefaultTheme, css, useTheme } from 'styled-components';
 
 import { Icon, IconType } from '../assets/Icon/Icon';
 import { variables } from '../../config';
-import { CSSColor, Color, borders, spacingsPx, typography } from '@trezor/theme';
+import {
+    CSSColor,
+    Color,
+    Elevation,
+    borders,
+    mapElevationToBackgroundToken,
+    spacingsPx,
+    typography,
+} from '@trezor/theme';
 import { UIVariant } from '../../config/types';
+import { useElevation } from '../..';
 
-export type WarningVariant = Extract<UIVariant, 'primary' | 'info' | 'warning' | 'destructive'>;
+export type WarningVariant = Extract<
+    UIVariant,
+    'primary' | 'info' | 'warning' | 'destructive' | 'tertiary'
+>;
 
 export interface WarningProps {
     children: ReactNode;
     className?: string;
     variant?: WarningVariant;
     withIcon?: boolean;
     icon?: IconType;
+    filled?: boolean;
 }
 
 type MapArgs = {
     variant: WarningVariant;
     theme: DefaultTheme;
+    elevation: Elevation;
 };
 
-const mapVariantToBackgroundColor = ({ variant, theme }: MapArgs): CSSColor => {
+const mapVariantToBackgroundColor = ({ variant, theme, elevation }: MapArgs): CSSColor => {
     const colorMap: Record<WarningVariant, Color> = {
         primary: 'backgroundPrimarySubtleOnElevation0',
         info: 'backgroundAlertBlueSubtleOnElevation0',
         warning: 'backgroundAlertYellowSubtleOnElevation0',
         destructive: 'backgroundAlertRedSubtleOnElevation0',
+        tertiary: mapElevationToBackgroundToken({ elevation }),
     };
 
     return theme[colorMap[variant]];
@@ -38,6 +53,7 @@ const mapVariantToTextColor = ({ variant, theme }: MapArgs): CSSColor => {
         info: 'textAlertBlue',
         warning: 'textAlertYellow',
         destructive: 'textAlertRed',
+        tertiary: 'textSubdued',
     };
 
     return theme[colorMap[variant]];
@@ -48,6 +64,7 @@ const mapVariantToIconColor = ({ variant, theme }: MapArgs): CSSColor => {
         info: 'iconAlertBlue',
         warning: 'iconAlertYellow',
         destructive: 'iconAlertRed',
+        tertiary: 'iconSubdued',
     };
 
     return theme[colorMap[variant]];
@@ -59,15 +76,29 @@ const mapVariantToIcon = ({ variant }: Pick<MapArgs, 'variant'>): IconType => {
         info: 'INFO',
         warning: 'WARNING',
         destructive: 'WARNING',
+        tertiary: 'INFO',
     };
 
     return iconMap[variant];
 };
 
-const Wrapper = styled.div<{ variant: WarningVariant; withIcon?: boolean }>`
+type WrapperParams = {
+    variant: WarningVariant;
+    withIcon?: boolean;
+    elevation: Elevation;
+    filled: boolean;
+};
+
+const Wrapper = styled.div<WrapperParams>`
     align-items: center;
-    background: ${mapVariantToBackgroundColor};
-    border-radius: ${borders.radii.xs};
+    ${({ filled }) =>
+        filled
+            ? css<WrapperParams>`
+                  background: ${mapVariantToBackgroundColor};
+                  border-radius: ${borders.radii.xs};
+              `
+            : ''}
+
     color: ${mapVariantToTextColor};
     display: flex;
     ${typography.hint}
@@ -89,16 +120,28 @@ export const Warning = ({
     variant = 'warning',
     withIcon,
     icon,
+    filled = true,
 }: WarningProps) => {
     const theme = useTheme();
+    const { elevation } = useElevation();
 
     return (
-        <Wrapper variant={variant} withIcon={withIcon} className={className}>
+        <Wrapper
+            variant={variant}
+            withIcon={withIcon}
+            className={className}
+            elevation={elevation}
+            filled={filled}
+        >
             {withIcon && (
                 <Icon
                     size={20}
                     icon={icon === undefined ? mapVariantToIcon({ variant }) : icon}
-                    color={mapVariantToIconColor({ variant, theme })}
+                    color={mapVariantToIconColor({
+                        variant,
+                        theme,
+                        elevation,
+                    })}
                 />
             )}
             {children}

packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { analytics, EventType } from '@trezor/suite-analytics';
-import { Button, variables } from '@trezor/components';
+import { Button, variables, Warning } from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { notificationsActions } from '@suite-common/toast-notifications';
 import { TranslationKey } from '@suite-common/intl-types';
@@ -58,6 +58,7 @@ const RightBottom = styled.div`
     padding: 20px 0 0;
     border-top: 1px solid ${({ theme }) => theme.STROKE_GREY};
     display: flex;
+    flex-direction: column;
 
     ${variables.SCREEN_QUERY.MOBILE} {
         display: block;
@@ -78,6 +79,14 @@ const StyledButton = styled(Button)`
     }
 `;
 
+const TxReviewFootnote = styled.div`
+    margin-top: ${spacingsPx.md};
+`;
+
+const Nowrap = styled.span`
+    white-space: nowrap;
+`;
+
 export interface TransactionReviewOutputListProps {
     account: Account;
     precomposedForm: FormState | StakeFormState;
@@ -217,7 +226,6 @@ export const TransactionReviewOutputList = ({
                                 />
                             );
                         })}
-
                         {!(isRbfAction && networkType === 'bitcoin') && (
                             <TransactionReviewTotalOutput
                                 ref={totalRef}
@@ -258,6 +266,16 @@ export const TransactionReviewOutputList = ({
                             </StyledButton>
                         </Flex>
                     )}
+                    {isSending && networkType === 'solana' ? (
+                        <TxReviewFootnote>
+                            <Warning variant="tertiary" icon="INFO" withIcon>
+                                <Translation
+                                    id="TR_SOLANA_TX_CONFIRMATION_MAY_TAKE_UP_TO_1_MIN"
+                                    values={{ nowrap: chunks => <Nowrap>{chunks}</Nowrap> }}
+                                />
+                            </Warning>
+                        </TxReviewFootnote>
+                    ) : null}
                 </RightBottom>
             </Right>
         </Content>

packages/suite/src/support/messages.ts

@@ -8789,4 +8789,34 @@ export default defineMessages({
         id: 'TR_STAKE_NOT_ENOUGH_FUNDS',
         defaultMessage: 'Not enough {symbol} to pay network fees',
     },
+    TR_STAKE_PROVIDED_BY: {
+        id: 'TR_STAKE_PROVIDED_BY',
+        defaultMessage: 'Provided by',
+    },
+    TR_STAKE_YOUR_FUNDS_MANAGED: {
+        id: 'TR_STAKE_YOUR_FUNDS_MANAGED',
+        defaultMessage: 'Your staked funds are <h>managed by Everstake</h>',
+    },
+    TR_STAKE_POWERED_BY: {
+        id: 'TR_STAKE_POWERED_BY',
+        defaultMessage: 'Powered by',
+    },
+    TR_STAKE_EVERSTAKE_MANAGES: {
+        id: 'TR_STAKE_EVERSTAKE_MANAGES',
+        defaultMessage:
+            'Everstake manages and protects your staked {symbol} <t>with their smart contracts, infrastructure, and technology.</t>',
+    },
+    TR_STAKE_TREZOR_NO_LIABILITY: {
+        id: 'TR_STAKE_TREZOR_NO_LIABILITY',
+        defaultMessage:
+            "Trezor assumes no liability <t>for Everstake's security guarantees. Your Trezor doesn’t manage the security of your staked funds.</t>",
+    },
+    TR_STAKE_CONSENT_TO_STAKING_WITH_EVERSTAKE: {
+        id: 'TR_STAKE_CONSENT_TO_STAKING_WITH_EVERSTAKE',
+        defaultMessage: 'I acknowledge and consent to staking with Everstake',
+    },
+    TR_SOLANA_TX_CONFIRMATION_MAY_TAKE_UP_TO_1_MIN: {
+        id: 'TR_SOLANA_TX_CONFIRMATION_MAY_TAKE_UP_TO_1_MIN',
+        defaultMessage: 'Confirmation of the transaction may take up to <nowrap>1 minute</nowrap>',
+    },
 });

packages/theme/src/colors.ts

@@ -9,11 +9,13 @@ type StyledComponentElevationProps = {
     elevation: Elevation;
 };
 
+export const mapElevationToBackgroundToken = ({ elevation }: { elevation: Elevation }): Color =>
+    `backgroundSurfaceElevation${elevation === -1 ? 'Negative' : elevation}`;
+
 export const mapElevationToBackground = ({
     theme,
     elevation,
-}: StyledComponentElevationProps): CSSColor =>
-    theme[`backgroundSurfaceElevation${elevation !== -1 ? elevation : 'Negative'}`];
+}: StyledComponentElevationProps): CSSColor => theme[mapElevationToBackgroundToken({ elevation })];
 
 export const mapElevationToBorder = ({
     theme,