diff --git a/packages/components/src/components/Warning/Warning.tsx b/packages/components/src/components/Warning/Warning.tsx index a905544f488..f07b6363c33 100755 --- a/packages/components/src/components/Warning/Warning.tsx +++ b/packages/components/src/components/Warning/Warning.tsx @@ -1,12 +1,24 @@ 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; +export type WarningVariant = Extract< + UIVariant, + 'primary' | 'info' | 'warning' | 'destructive' | 'tertiary' +>; export interface WarningProps { children: ReactNode; @@ -14,19 +26,22 @@ export interface WarningProps { 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 = { 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): 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` align-items: center; - background: ${mapVariantToBackgroundColor}; - border-radius: ${borders.radii.xs}; + ${({ filled }) => + filled + ? css` + 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 ( - + {withIcon && ( )} {children} diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx index 52f066fe083..a706c70c40b 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewOutputList/TransactionReviewOutputList.tsx +++ b/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') && ( )} + {isSending && networkType === 'solana' ? ( + + + {chunks} }} + /> + + + ) : null} diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts index 835227ec80c..b680ebadf56 100644 --- a/packages/suite/src/support/messages.ts +++ b/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 managed by Everstake', + }, + 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} with their smart contracts, infrastructure, and technology.', + }, + TR_STAKE_TREZOR_NO_LIABILITY: { + id: 'TR_STAKE_TREZOR_NO_LIABILITY', + defaultMessage: + "Trezor assumes no liability for Everstake's security guarantees. Your Trezor doesn’t manage the security of your staked funds.", + }, + 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 1 minute', + }, }); diff --git a/packages/theme/src/colors.ts b/packages/theme/src/colors.ts index a2efee78827..399b31ea25b 100644 --- a/packages/theme/src/colors.ts +++ b/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,