From 4c2a00a2c750b9ed576dd22342bdfd26b4613f3d Mon Sep 17 00:00:00 2001 From: Evgenii Voznyuk Date: Wed, 24 Apr 2024 14:35:03 +0300 Subject: [PATCH 1/2] feat(staking): introduce everstake on the staking landing screen --- packages/components/src/components/assets/Icon/icons.ts | 1 + packages/components/src/images/icons/everstake_logo.svg | 3 +++ packages/suite/src/support/messages.ts | 8 ++++++++ .../EthStakingDashboard/components/EmptyStakingCard.tsx | 8 +++++++- packages/theme/src/colors.ts | 2 ++ 5 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 packages/components/src/images/icons/everstake_logo.svg diff --git a/packages/components/src/components/assets/Icon/icons.ts b/packages/components/src/components/assets/Icon/icons.ts index cf59c9f5efd..db94759bd8b 100644 --- a/packages/components/src/components/assets/Icon/icons.ts +++ b/packages/components/src/components/assets/Icon/icons.ts @@ -52,6 +52,7 @@ export const ICONS = { ADDRESS_PIXEL_NEXT: require('../../../images/icons/address_pixel_next.svg'), DOWN: require('../../../images/icons/down.svg'), DROPBOX: require('../../../images/icons/dropbox.svg'), + EVERSTAKE_LOGO: require('../../../images/icons/everstake_logo.svg'), EJECT: require('../../../images/icons/eject.svg'), EXPERIMENTAL: require('../../../images/icons/experimental.svg'), EXTERNAL_LINK: require('../../../images/icons/external_link.svg'), diff --git a/packages/components/src/images/icons/everstake_logo.svg b/packages/components/src/images/icons/everstake_logo.svg new file mode 100644 index 00000000000..cf792c7e002 --- /dev/null +++ b/packages/components/src/images/icons/everstake_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts index 389bf3355fc..3e15d6ec112 100644 --- a/packages/suite/src/support/messages.ts +++ b/packages/suite/src/support/messages.ts @@ -8541,6 +8541,14 @@ export default defineMessages({ id: 'TR_STAKE_ETH_LOCK_FUNDS_DESC', defaultMessage: 'Staking locks in your funds, but you can unstake them anytime.', }, + TR_STAKE_ETH_EVERSTAKE: { + id: 'TR_STAKE_ETH_EVERSTAKE', + defaultMessage: 'Trezor & Everstake', + }, + TR_STAKE_ETH_EVERSTAKE_DESC: { + id: 'TR_STAKE_ETH_EVERSTAKE_DESC', + defaultMessage: 'Everstake is a global leader and supplier of staking technology', + }, TR_STAKE_ETH_MAXIMIZE_REWARDS: { id: 'TR_STAKE_ETH_MAXIMIZE_REWARDS', defaultMessage: 'Maximize your rewards', diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx index f9e04816848..7b57c80a603 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx @@ -82,8 +82,14 @@ export const EmptyStakingCard = () => { title: , description: , }, + { + id: 2, + icon: , + title: , + description: , + }, ], - [ethApy, theme.iconPrimaryDefault], + [ethApy, theme.iconEverstake, theme.iconPrimaryDefault], ); return ( diff --git a/packages/theme/src/colors.ts b/packages/theme/src/colors.ts index 186fc36766f..69d4610a4c5 100644 --- a/packages/theme/src/colors.ts +++ b/packages/theme/src/colors.ts @@ -106,6 +106,7 @@ const light = { iconOnTertiary: palette.lightGray800, iconOnYellow: palette.lightGray1000, iconPrimaryDefault: palette.lightPrimaryForest800, + iconEverstake: palette.lightGray700, iconPrimaryPressed: palette.lightPrimaryForest900, iconSubdued: palette.lightGray700, interactionBackgroundDestructiveDefaultHoverOnElevation0: palette.lightAccentRed300, @@ -268,6 +269,7 @@ export const colorVariants: Record = { iconOnTertiary: palette.darkGray800, iconOnYellow: palette.darkGray000, iconPrimaryDefault: palette.darkPrimaryForest800, + iconEverstake: palette.lightWhiteAlpha1000, iconPrimaryPressed: palette.darkPrimaryForest900, iconSubdued: palette.darkGray700, interactionBackgroundDestructiveDefaultHoverOnElevation0: palette.darkAccentRed200, From fab8ed523bb007ccb4c017e02f39e53ac5d2e48f Mon Sep 17 00:00:00 2001 From: Evgenii Voznyuk Date: Sun, 28 Apr 2024 13:01:09 +0300 Subject: [PATCH 2/2] fix(staking): fix introduce everstake layout --- .../EthStakingDashboard/components/EmptyStakingCard.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx index 7b57c80a603..93accd4216b 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/EmptyStakingCard.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import styled, { useTheme } from 'styled-components'; -import { Button, Card, Icon, Paragraph } from '@trezor/components'; +import { Button, Card, Icon, Paragraph, variables } from '@trezor/components'; import { spacingsPx } from '@trezor/theme'; import { Translation, StakingFeature } from 'src/components/suite'; import { openModal } from 'src/actions/suite/modalActions'; @@ -43,6 +43,10 @@ const FlexRow = styled.div` margin: ${spacingsPx.xl} 0 ${spacingsPx.xxl}; gap: 68px; flex-wrap: wrap; + + ${variables.SCREEN_QUERY.BELOW_DESKTOP} { + flex-direction: column; + } `; const FlexRowChild = styled.div`