From 2cfe6a30e78a0e53fe332c3b4d9a14518e1b3d6c Mon Sep 17 00:00:00 2001 From: shotgunofdeath Date: Mon, 12 Feb 2024 12:05:21 +0100 Subject: [PATCH] feat(eth-staking): apply redesign changes --- .../components/src/components/Image/images.ts | 3 +- .../src/components/assets/Icon/icons.ts | 1 + .../src/images/icons/piggy_bank_filled.svg | 2 +- .../src/images/icons/spinner.svg} | 26 +- .../files/images/svg/spinner-grey.svg | 52 --- .../files/images/svg/spinner-orange.svg | 52 --- .../components/suite/FormFractionButtons.tsx | 20 +- .../components/suite/StakeAmountWrapper.tsx | 8 +- .../src/components/suite/StakingFeature.tsx | 26 +- .../TransactionReviewModalContent.tsx | 4 +- .../TransactionReviewOutputList.tsx | 11 +- .../TransactionReviewSummary.tsx | 6 +- .../ClaimModal/ClaimEthForm.tsx | 37 +- .../StakeEthInANutshellModal.tsx | 28 +- .../StakeModal/AvailableBalance.tsx | 8 +- .../StakeEthForm/ConfirmStakeEthModal.tsx | 38 +- .../StakeModal/StakeEthForm/Inputs.tsx | 50 +-- .../StakeModal/StakeEthForm/StakeEthForm.tsx | 18 +- .../StakeModal/StakeEthForm/index.ts | 1 - .../StakeModal/StakeModal.tsx | 2 +- .../StakeModal/StakeModalContent.tsx | 7 +- .../UnstakeModal/UnstakeEthForm/Inputs.tsx | 45 +- .../UnstakeModal/UnstakeEthForm/Options.tsx | 229 +++++----- .../UnstakeEthForm/UnstakeEthForm.tsx | 37 +- .../UnstakeModal/UnstakeEthForm/index.ts | 1 - .../UnstakeModal/UnstakeModalContent.tsx | 2 +- packages/suite/src/components/suite/styled.ts | 6 +- .../suite/src/components/wallet/FeesInfo.tsx | 21 +- .../AccountBanners/AccountBanners.tsx | 3 +- .../AccountBanners/StakeEthBanner.tsx | 48 +- .../AccountTopPanel/AccountTopPanel.tsx | 46 +- .../suite/src/constants/suite/ethStaking.ts | 17 + packages/suite/src/constants/suite/staking.ts | 3 - packages/suite/src/hooks/suite/index.ts | 2 + .../suite}/useEverstakePoolStats.ts | 5 + .../{wallet => suite}/useValidatorsQueue.ts | 5 + packages/suite/src/support/messages.ts | 10 +- .../{index.tsx => StakeEthCard.tsx} | 93 ++-- .../StakeEthCard/components/Footer.tsx | 21 +- .../StakeEthCard/components/NetworkBadge.tsx | 6 +- packages/suite/src/views/dashboard/index.tsx | 2 +- .../views/wallet/staking/WalletStaking.tsx | 2 +- .../{index.tsx => EthStakingDashboard.tsx} | 0 .../components/ApyCard.tsx | 5 +- .../components/EmptyStakingCard.tsx | 103 +++-- .../components/PayoutCard.tsx | 32 +- .../ProgressLabels/ProgressLabel.tsx | 56 +-- .../{index.tsx => ProgressLabels.tsx} | 3 +- .../components/StakingCard.tsx | 53 +-- .../components/StakingDashboard.tsx | 12 +- .../components/claim/ClaimPendingCard.tsx | 27 +- .../components/claim/ClaimReadyCard.tsx | 51 +-- .../components/claim/styled.ts | 6 +- .../EthStakingDashboard/components/styled.ts | 48 +- .../hooks/useProgressLabelsData.tsx | 1 + .../wallet-config/src/networksConfig.ts | 2 +- .../src/transactions/transactionsReducer.ts | 9 +- .../wallet-utils/src/transactionUtils.ts | 8 + yarn.lock | 413 ++++++++++++------ 59 files changed, 958 insertions(+), 875 deletions(-) rename packages/{suite-data/files/images/svg/spinner-black.svg => components/src/images/icons/spinner.svg} (72%) delete mode 100644 packages/suite-data/files/images/svg/spinner-grey.svg delete mode 100644 packages/suite-data/files/images/svg/spinner-orange.svg delete mode 100644 packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/index.ts delete mode 100644 packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/index.ts delete mode 100644 packages/suite/src/constants/suite/staking.ts rename packages/suite/src/{views/wallet/staking/components/EthStakingDashboard/hooks => hooks/suite}/useEverstakePoolStats.ts (93%) rename packages/suite/src/hooks/{wallet => suite}/useValidatorsQueue.ts (94%) rename packages/suite/src/views/dashboard/components/StakeEthCard/{index.tsx => StakeEthCard.tsx} (59%) rename packages/suite/src/views/wallet/staking/components/EthStakingDashboard/{index.tsx => EthStakingDashboard.tsx} (100%) rename packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/{index.tsx => ProgressLabels.tsx} (89%) diff --git a/packages/components/src/components/Image/images.ts b/packages/components/src/components/Image/images.ts index 9cb5759e1be4..772509da44f0 100644 --- a/packages/components/src/components/Image/images.ts +++ b/packages/components/src/components/Image/images.ts @@ -9,9 +9,10 @@ export const SVG_IMAGES = { DEVICE_CONFIRM_TREZOR_T2T1: 'device-confirm-trezor-t2t1.svg', DEVICE_CONFIRM_TREZOR_T2B1: 'device-confirm-trezor-t2b1.svg', SPINNER: 'spinner.svg', - SPINNER_BLACK: 'spinner-black.svg', SPINNER_GREY: 'spinner-grey.svg', + SPINNER_LIGHT_GREY: 'spinner-light-grey.svg', SPINNER_ORANGE: 'spinner-orange.svg', + SPINNER_PRIMARY_DEFAULT: 'spinner-primary-default.svg', DEVICE_ANOTHER_SESSION: 'device-another-session.svg', CONNECT_DEVICE: 'connect-device.svg', ERROR_404: 'error-404.svg', diff --git a/packages/components/src/components/assets/Icon/icons.ts b/packages/components/src/components/assets/Icon/icons.ts index 21edc80a0750..810847889938 100644 --- a/packages/components/src/components/assets/Icon/icons.ts +++ b/packages/components/src/components/assets/Icon/icons.ts @@ -120,6 +120,7 @@ export const ICONS = { SHOW: require('../../../images/icons/show.svg'), SHUFFLE: require('../../../images/icons/shuffle.svg'), SIGNATURE: require('../../../images/icons/signature.svg'), + SPINNER: require('../../../images/icons/spinner.svg'), STOP: require('../../../images/icons/stop.svg'), TREZOR_T1B1: require('../../../images/icons/trezor_t1b1.svg'), TREZOR_T2T1: require('../../../images/icons/trezor_t2t1.svg'), diff --git a/packages/components/src/images/icons/piggy_bank_filled.svg b/packages/components/src/images/icons/piggy_bank_filled.svg index e2e014320b42..0d12783e7cd5 100644 --- a/packages/components/src/images/icons/piggy_bank_filled.svg +++ b/packages/components/src/images/icons/piggy_bank_filled.svg @@ -1 +1 @@ - + diff --git a/packages/suite-data/files/images/svg/spinner-black.svg b/packages/components/src/images/icons/spinner.svg similarity index 72% rename from packages/suite-data/files/images/svg/spinner-black.svg rename to packages/components/src/images/icons/spinner.svg index d3c7b4b3e306..73fc5b4d286f 100644 --- a/packages/suite-data/files/images/svg/spinner-black.svg +++ b/packages/components/src/images/icons/spinner.svg @@ -1,18 +1,18 @@ - - + + - + - + - + - + @@ -27,25 +27,25 @@ - + - + - + - + - + - + - + diff --git a/packages/suite-data/files/images/svg/spinner-grey.svg b/packages/suite-data/files/images/svg/spinner-grey.svg deleted file mode 100644 index 8d697d2eb3a4..000000000000 --- a/packages/suite-data/files/images/svg/spinner-grey.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/suite-data/files/images/svg/spinner-orange.svg b/packages/suite-data/files/images/svg/spinner-orange.svg deleted file mode 100644 index be244294c5d6..000000000000 --- a/packages/suite-data/files/images/svg/spinner-orange.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/suite/src/components/suite/FormFractionButtons.tsx b/packages/suite/src/components/suite/FormFractionButtons.tsx index d840b9fd3300..7c517f9417c5 100644 --- a/packages/suite/src/components/suite/FormFractionButtons.tsx +++ b/packages/suite/src/components/suite/FormFractionButtons.tsx @@ -13,11 +13,11 @@ const Flex = styled.div` gap: 4px; `; -const SmallButton = styled(Button).attrs(props => ({ +const TinyButton = styled(Button).attrs(props => ({ ...props, variant: 'tertiary', type: 'button', - size: 'small', + size: 'tiny', }))``; interface FormFractionButtonsProps { @@ -66,9 +66,9 @@ export const FormFractionButtons = ({ cursor="pointer" disabled={!is10PercentDisabled} > - setRatioAmount(10)}> + setRatioAmount(10)}> 10% - + - setRatioAmount(4)}> + setRatioAmount(4)}> 25% - + - setRatioAmount(2)}> + setRatioAmount(2)}> 50% - + - + - + ); diff --git a/packages/suite/src/components/suite/StakeAmountWrapper.tsx b/packages/suite/src/components/suite/StakeAmountWrapper.tsx index bee6ae62bdeb..1ba22d5df5e8 100644 --- a/packages/suite/src/components/suite/StakeAmountWrapper.tsx +++ b/packages/suite/src/components/suite/StakeAmountWrapper.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; -import { Tooltip, variables } from '@trezor/components'; +import { Tooltip, TOOLTIP_DELAY_LONG } from '@trezor/components'; +import { mediaQueries } from '@trezor/styles'; import { Translation } from './Translation'; import { goto } from 'src/actions/suite/routerActions'; import { useDispatch } from 'src/hooks/suite'; @@ -16,7 +17,7 @@ const Container = styled.div` transition: background 0.1s ease-in; cursor: pointer; - ${variables.MEDIA_QUERY.HOVER} { + ${mediaQueries.hover} { :hover { background: ${({ theme }) => theme.BG_GREY}; } @@ -35,7 +36,8 @@ export const StakeAmountWrapper = ({ children }: StakeAmountWrapperProps) => { ` - margin-top: 18px; + margin-top: ${spacingsPx.lg}; font-size: ${({ size }) => size === 'small' && variables.FONT_SIZE.NORMAL}; `; -const StyledP = styled(P)` - margin-top: 8px; +const GreyP = styled(Paragraph)` + color: ${({ theme }) => theme.textSubdued}; `; -const GreyP = styled(StyledP)` - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; +const StyledP = styled(GreyP)` + margin-top: ${spacingsPx.xs}; + font-size: ${variables.FONT_SIZE.TINY}; `; interface StakingFeatureProps { @@ -32,16 +34,12 @@ export const StakingFeature = ({ extraDescription, }: StakingFeatureProps) => (
- {icon} + {icon} {title} - - {description} - + {description} - - {extraDescription} - + {extraDescription}
); diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx index 044b24ffe447..c20acee68dd8 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewModalContent.tsx @@ -14,6 +14,7 @@ import { getTransactionReviewModalActionText } from 'src/utils/suite/transaction import { Modal, Translation } from 'src/components/suite'; import { TransactionReviewSummary } from './TransactionReviewSummary'; import { TransactionReviewOutputList } from './TransactionReviewOutputList/TransactionReviewOutputList'; +import { TransactionReviewEvmExplanation } from './TransactionReviewEvmExplanation'; const StyledModal = styled(Modal)` ${Modal.Body} { @@ -22,7 +23,7 @@ const StyledModal = styled(Modal)` } ${Modal.Content} { @media (min-width: ${variables.SCREEN_SIZE.SM}) { - flex-direction: row; + flex-flow: row wrap; } } `; @@ -153,6 +154,7 @@ export const TransactionReviewModalContent = ({ isRbfAction={isRbfAction} actionText={actionText} /> + ); }; 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 21fb930e524c..ecace6ff10f9 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 @@ -107,8 +107,15 @@ export const TransactionReviewOutputList = ({ const { networkType } = account; const { symbol } = account; - const { options, selectedFee, isCoinControlEnabled, hasCoinControlBeenOpened } = - precomposedForm; + const { options, selectedFee } = precomposedForm; + let isCoinControlEnabled = false; + let hasCoinControlBeenOpened = false; + if ('isCoinControlEnabled' in precomposedForm) { + ({ isCoinControlEnabled } = precomposedForm); + } + if ('hasCoinControlBeenOpened' in precomposedForm) { + ({ hasCoinControlBeenOpened } = precomposedForm); + } const broadcastEnabled = options.includes('broadcast'); const reportTransactionCreatedEvent = (action: 'sent' | 'copied' | 'downloaded' | 'replaced') => diff --git a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx index 76bea3cd46b1..e7ec9815f72c 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx @@ -1,7 +1,7 @@ import styled, { useTheme } from 'styled-components'; import BigNumber from 'bignumber.js'; import { getFeeUnits, formatNetworkAmount, formatAmount } from '@suite-common/wallet-utils'; -import { Icon, CoinLogo, variables, useTheme } from '@trezor/components'; +import { Icon, CoinLogo, variables } from '@trezor/components'; import { formatDuration, isFeatureFlagEnabled } from '@suite-common/suite-utils'; import { borders, spacingsPx, typography } from '@trezor/theme'; import { TranslationKey } from '@suite-common/intl-types'; @@ -132,7 +132,9 @@ const TxDetailsButton = styled.button<{ detailsOpen: boolean }>` border: 0; ${typography.label} color: ${({ theme }) => theme.textSubdued}; - transition: background 0.15s opacity 0.15s; + transition: + background 0.15s, + opacity 0.15s; background: ${({ theme, detailsOpen }) => detailsOpen && theme.backgroundSurfaceElevation3}; cursor: pointer; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimEthForm.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimEthForm.tsx index c2a14c948534..9b069dbf0493 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimEthForm.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimEthForm.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import styled from 'styled-components'; -import { Button, P, variables, Warning } from '@trezor/components'; +import { Button, Paragraph, Warning } from '@trezor/components'; import { Translation, FiatValue, FormattedCryptoAmount } from 'src/components/suite'; import { FeesInfo } from 'src/components/wallet/FeesInfo'; import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils'; @@ -8,14 +8,14 @@ import { useSelector } from 'src/hooks/suite'; import { useClaimEthFormContext } from 'src/hooks/wallet/useClaimEthForm'; import { selectSelectedAccountEverstakeStakingPool } from 'src/reducers/wallet/selectedAccountReducer'; import { CRYPTO_INPUT } from 'src/types/wallet/stakeForms'; +import { spacingsPx } from '@trezor/theme'; const AmountInfo = styled.div` display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; - margin-bottom: 16px; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; + margin-bottom: ${spacingsPx.md}; `; const TxtRight = styled.div` @@ -23,27 +23,24 @@ const TxtRight = styled.div` `; const GreenTxt = styled.span` - color: ${({ theme }) => theme.TYPE_GREEN}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; + color: ${({ theme }) => theme.textPrimaryDefault}; `; const StyledWarning = styled(Warning)` - margin-top: 12px; - color: ${({ theme }) => theme.TYPE_RED}; + margin-top: ${spacingsPx.sm}; justify-content: flex-start; `; const ClaimingPeriodWrapper = styled.div` display: flex; justify-content: space-between; - padding: 18px 0 14px; - margin-top: 26px; - border-top: 1px solid ${({ theme }) => theme.STROKE_GREY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; + padding: ${spacingsPx.lg} 0 ${spacingsPx.md}; + margin-top: ${spacingsPx.xl}; + border-top: 1px solid ${({ theme }) => theme.borderOnElevation1}; `; -const GreyP = styled(P)` - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; +const GreyP = styled(Paragraph)` + color: ${({ theme }) => theme.textSubdued}; `; export const ClaimEthForm = () => { @@ -75,14 +72,14 @@ export const ClaimEthForm = () => { -

+ + + + -

- - - + @@ -97,7 +94,7 @@ export const ClaimEthForm = () => { )} - + @@ -106,7 +103,7 @@ export const ClaimEthForm = () => { - } onCancel={onCancel} > {STAKING_DETAILS.map(({ id, icon, translationId }) => ( - + - + ))} + ); }; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/AvailableBalance.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/AvailableBalance.tsx index e0d04bdc8cfb..f4331ccfc0dd 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/AvailableBalance.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/AvailableBalance.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { H3, P, variables } from '@trezor/components'; +import { H3, Paragraph, variables } from '@trezor/components'; import { NetworkSymbol } from '@suite-common/wallet-config'; import { Translation, FormattedCryptoAmount, FiatValue } from 'src/components/suite'; @@ -9,8 +9,8 @@ const Title = styled(H3)` font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD}; `; -const GreyP = styled(P)` - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; +const GreyP = styled(Paragraph)` + color: ${({ theme }) => theme.textSubdued}; `; interface AvailableBalanceProps { @@ -24,7 +24,7 @@ export const AvailableBalance = ({ formattedBalance, symbol }: AvailableBalanceP - + {' '} {' '} diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx index d0a855c99415..231ab23baded 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; -import styled from 'styled-components'; -import { Button, Checkbox, H2, Icon, useTheme, variables } from '@trezor/components'; +import styled, { useTheme } from 'styled-components'; +import { Button, Checkbox, H2, Icon } from '@trezor/components'; +import { spacingsPx } from '@trezor/theme'; import { Modal, Translation, TrezorLink } from 'src/components/suite'; import { useDispatch } from 'src/hooks/suite'; import { openModal } from 'src/actions/suite/modalActions'; @@ -13,46 +14,39 @@ const StyledModal = styled(Modal)` const VStack = styled.div` display: flex; flex-direction: column; - gap: 18px; - margin-top: 26px; + gap: ${spacingsPx.lg}; + margin-top: ${spacingsPx.xl}; `; const Flex = styled.div` display: flex; align-items: center; - gap: 16px; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; + gap: ${spacingsPx.md}; `; const Divider = styled.div` height: 1px; - background: ${({ theme }) => theme.STROKE_GREY}; - margin: 20px 0 17px auto; - max-width: 396px; + background: ${({ theme }) => theme.borderOnElevation0}; + margin: ${spacingsPx.lg} 0 ${spacingsPx.md} auto; + max-width: 428px; width: 100%; - - ${variables.SCREEN_QUERY.BELOW_TABLET} { - max-width: 428px; - } `; const StyledCheckbox = styled(Checkbox)` - & > div:nth-child(2) { - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - font-size: ${variables.FONT_SIZE.NORMAL}; + & > div:nth-child(3) { + color: ${({ theme }) => theme.textSubdued}; + margin-left: ${spacingsPx.xs}; } `; const ButtonsWrapper = styled.div` display: flex; flex-wrap: wrap; - gap: 4px; + gap: ${spacingsPx.xxs}; width: 100%; - margin-top: 20px; + margin-top: ${spacingsPx.lg}; & > button { - font-size: ${variables.FONT_SIZE.NORMAL}; padding: 9px 22px; flex: 1 0 164px; } @@ -85,11 +79,11 @@ export const ConfirmStakeEthModal = ({ onConfirm, onCancel }: ConfirmStakeEthMod - + - + theme.TYPE_LIGHT_GREY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; + color: ${({ theme }) => theme.textSubdued}; `; const StyledWarning = styled(Warning)` - margin-top: 12px; + margin-top: ${spacingsPx.sm}; `; export const Inputs = () => { @@ -47,7 +46,6 @@ export const Inputs = () => { account, network, formState: { errors }, - getValues, amountLimits, onCryptoAmountChange, onFiatAmountChange, @@ -57,8 +55,6 @@ export const Inputs = () => { currentRate, } = useStakeEthFormContext(); - const cryptoValue = getValues(CRYPTO_INPUT); - const fiatValue = getValues(FIAT_INPUT); const cryptoError = errors.cryptoInput; const fiatError = errors.fiatInput; @@ -87,41 +83,39 @@ export const Inputs = () => { return ( + {account.symbol}} + bottomText={errors[CRYPTO_INPUT]?.message ?? null} + inputState={getInputState(cryptoError || fiatError)} + onChange={value => { + onCryptoAmountChange(value); + }} + /> + {currentRate && ( <> + {/* TODO: Add new transfer icon. Export from Figma isn't handled as is it should by the strokes to fills online converter */} + + {localCurrency}} - bottomText={errors[FIAT_INPUT]?.message} - inputState={getInputState(fiatError || cryptoError, fiatValue)} + bottomText={errors[FIAT_INPUT]?.message ?? null} + inputState={getInputState(fiatError || cryptoError)} onChange={value => { onFiatAmountChange(value); }} /> - - {/* TODO: Add new transfer icon. Export from Figma isn't handled as is it should by the strokes to fills online converter */} - )} - {account.symbol}} - bottomText={errors[CRYPTO_INPUT]?.message} - inputState={getInputState(cryptoError || fiatError, cryptoValue)} - onChange={value => { - onCryptoAmountChange(value); - }} - /> - {isAmountForWithdrawalWarningShown && ( { /> {(isDirty || hasValues) && ( - )} @@ -83,7 +89,7 @@ export const StakeEthForm = () => { - diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx index d4bde81b89f7..07ce77c9a7ef 100644 --- a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx +++ b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { NetworkSymbol } from '@suite-common/wallet-config'; import { isTestnet } from '@suite-common/wallet-utils'; @@ -9,7 +9,6 @@ import { SkeletonCircle, SkeletonRectangle, SkeletonStack, - useTheme, Icon, } from '@trezor/components'; @@ -29,8 +28,9 @@ import { useSelector } from 'src/hooks/suite'; import { AccountNavigation } from './AccountNavigation'; import { selectLabelingDataForSelectedAccount } from 'src/reducers/suite/metadataReducer'; import { useAccountLabel } from '../../../suite/AccountLabel'; -import { STAKE_SYMBOLS } from 'src/constants/suite/staking'; +import { STAKE_SYMBOLS } from 'src/constants/suite/ethStaking'; import { selectSelectedAccountAutocompoundBalance } from 'src/reducers/wallet/selectedAccountReducer'; +import { spacingsPx } from '@trezor/theme'; const Balance = styled(H2)` height: 32px; @@ -47,7 +47,11 @@ const FiatBalanceWrapper = styled(H3)` const AmountsWrapper = styled.div` display: flex; flex-direction: column; - gap: 2px; + gap: ${spacingsPx.sm}; + + & > div:nth-of-type(2) { + max-width: fit-content; + } `; interface AccountTopPanelSkeletonProps { @@ -128,26 +132,26 @@ export const AccountTopPanel = () => { - - - - - - {({ value }) => - value ? {value} : null - } - - + + + + + + {({ value }) => + value ? {value} : null + } + + {isStakeShown && ( - + @@ -157,9 +161,7 @@ export const AccountTopPanel = () => { showApproximationIndicator > {({ value }) => - value ? ( - {value} - ) : null + value ? {value} : null } diff --git a/packages/suite/src/constants/suite/ethStaking.ts b/packages/suite/src/constants/suite/ethStaking.ts index 2f40120b1d99..7d3ce08deee7 100644 --- a/packages/suite/src/constants/suite/ethStaking.ts +++ b/packages/suite/src/constants/suite/ethStaking.ts @@ -1,4 +1,10 @@ import BigNumber from 'bignumber.js'; +import { + getNetworkFeatures, + getNetworkType, + networks, + NetworkSymbol, +} from '@suite-common/wallet-config'; export const MIN_ETH_AMOUNT_FOR_STAKING = new BigNumber(0.1); export const MIN_ETH_FOR_WITHDRAWALS = new BigNumber(0.03); @@ -12,3 +18,14 @@ export const WALLET_SDK_SOURCE = '1'; // Used when Everstake pool stats are not available from the API. export const BACKUP_ETH_APY = '4.13'; + +export const STAKE_SYMBOLS: NetworkSymbol[] = (Object.keys(networks) as NetworkSymbol[]).filter( + symbol => { + const networkType = getNetworkType(symbol); + const networkFeatures = getNetworkFeatures(symbol); + + if (networkType === 'ethereum' && networkFeatures.includes('staking')) { + return symbol; + } + }, +); diff --git a/packages/suite/src/constants/suite/staking.ts b/packages/suite/src/constants/suite/staking.ts deleted file mode 100644 index cee3197dee15..000000000000 --- a/packages/suite/src/constants/suite/staking.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { NetworkSymbol } from '@suite-common/wallet-config'; - -export const STAKE_SYMBOLS: NetworkSymbol[] = ['eth', 'tgor', 'thol']; diff --git a/packages/suite/src/hooks/suite/index.ts b/packages/suite/src/hooks/suite/index.ts index 14a20b384816..5d8ddd657a73 100644 --- a/packages/suite/src/hooks/suite/index.ts +++ b/packages/suite/src/hooks/suite/index.ts @@ -21,6 +21,8 @@ export { useCountdownTimer } from './useCountdownTimer'; export { useDispatch } from './useDispatch'; export { usePasswords } from './usePasswords'; export { useDebugLanguageShortcut } from './useDebugLanguageShortcut'; +export { useValidatorsQueue } from './useValidatorsQueue'; +export { useEverstakePoolStats } from './useEverstakePoolStats'; // replaced in suite-native export { useLocales } from 'src/hooks/suite/useLocales'; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useEverstakePoolStats.ts b/packages/suite/src/hooks/suite/useEverstakePoolStats.ts similarity index 93% rename from packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useEverstakePoolStats.ts rename to packages/suite/src/hooks/suite/useEverstakePoolStats.ts index f713d69d5711..8fc771a50e94 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useEverstakePoolStats.ts +++ b/packages/suite/src/hooks/suite/useEverstakePoolStats.ts @@ -30,6 +30,11 @@ export const useEverstakePoolStats = () => { ); const stats = await response.json(); + + if (!response.ok) { + throw new Error(`${response.status} ${stats.message}`); + } + setPoolStats({ ethApy: new BigNumber(stats.apr) .times(100) diff --git a/packages/suite/src/hooks/wallet/useValidatorsQueue.ts b/packages/suite/src/hooks/suite/useValidatorsQueue.ts similarity index 94% rename from packages/suite/src/hooks/wallet/useValidatorsQueue.ts rename to packages/suite/src/hooks/suite/useValidatorsQueue.ts index 7936ffb7c7a7..5624438bb193 100644 --- a/packages/suite/src/hooks/wallet/useValidatorsQueue.ts +++ b/packages/suite/src/hooks/suite/useValidatorsQueue.ts @@ -23,6 +23,11 @@ export const useValidatorsQueue = () => { ); const validatorsQueue = await response.json(); + + if (!response.ok) { + throw new Error(`${response.status} ${validatorsQueue.message}`); + } + setValidatorsQueue({ validatorsEnteringNum: validatorsQueue.validators_entering_num, validatorsExitingNum: validatorsQueue.validators_exiting_num, diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts index 13d5f16106d5..f16c760834bb 100644 --- a/packages/suite/src/support/messages.ts +++ b/packages/suite/src/support/messages.ts @@ -8507,10 +8507,10 @@ export default defineMessages({ }, TR_STAKE_ETH_SEE_MONEY_DANCE_DESC: { id: 'TR_STAKE_ETH_SEE_MONEY_DANCE_DESC', - defaultMessage: 'Earn up to {apyPercent}% APY* by staking your Ethereum with Trezor.', + defaultMessage: 'Earn {apyPercent}% APY* by staking your Ethereum with Trezor.', }, - TR_APY_DESC: { - id: 'TR_APY_DESC', + TR_STAKE_APY_DESC: { + id: 'TR_STAKE_APY_DESC', defaultMessage: '*Annual Percentage Yield', }, TR_STAKE_ETH_LOCK_FUNDS: { @@ -8553,7 +8553,7 @@ export default defineMessages({ TR_STAKE_ANY_AMOUNT_ETH: { id: 'TR_STAKE_ANY_AMOUNT_ETH', defaultMessage: - 'Stake any amount and watch that sweet ETH roll in. With up to {apyPercent}% APY, your rewards earn too!', + 'Stake any amount and watch that sweet ETH roll in. With our current APY rate of {apyPercent}%, your rewards earn too!', }, TR_STAKE_ETH_LEARN_MORE: { id: 'TR_STAKE_ETH_LEARN_MORE', @@ -8667,7 +8667,7 @@ export default defineMessages({ }, TR_STAKE_WAITING_TO_BE_ADDED: { id: 'TR_STAKE_WAITING_TO_BE_ADDED', - defaultMessage: 'Your {symbol} is waiting to be added to the staking pool.', + defaultMessage: 'Your {symbol} is waiting to be added {br} to the staking pool.', }, TR_TX_CONFIRMED: { id: 'TR_TX_CONFIRMED', diff --git a/packages/suite/src/views/dashboard/components/StakeEthCard/index.tsx b/packages/suite/src/views/dashboard/components/StakeEthCard/StakeEthCard.tsx similarity index 59% rename from packages/suite/src/views/dashboard/components/StakeEthCard/index.tsx rename to packages/suite/src/views/dashboard/components/StakeEthCard/StakeEthCard.tsx index bdef80fc8bfe..db66553aa9fa 100644 --- a/packages/suite/src/views/dashboard/components/StakeEthCard/index.tsx +++ b/packages/suite/src/views/dashboard/components/StakeEthCard/StakeEthCard.tsx @@ -1,24 +1,25 @@ -import { useEffect, useState } from 'react'; -import styled from 'styled-components'; -import { variables, H3, Icon, useTheme } from '@trezor/components'; +import { useEffect, useMemo, useState } from 'react'; +import styled, { useTheme } from 'styled-components'; +import { variables, H3, Icon, Card } from '@trezor/components'; import { DashboardSection } from 'src/components/dashboard'; -import { Translation, Card, StakingFeature, Divider } from 'src/components/suite'; +import { Translation, StakingFeature, Divider } from 'src/components/suite'; import { Footer } from './components/Footer'; -import { useDiscovery } from 'src/hooks/suite'; +import { useDiscovery, useEverstakePoolStats } from 'src/hooks/suite'; import { useAccounts } from 'src/hooks/wallet'; import { MIN_ETH_BALANCE_FOR_STAKING } from 'src/constants/suite/ethStaking'; +import { spacingsPx, borders } from '@trezor/theme'; const Flex = styled.div` display: flex; - gap: 12px; + gap: ${spacingsPx.sm}; align-items: center; `; const Badge = styled.span` - padding: 9px 8px 8px; - border-radius: 100px; - background: ${({ theme }) => theme.BG_LIGHT_GREEN}; - color: ${({ theme }) => theme.TYPE_GREEN}; + padding: 9px ${spacingsPx.xs} ${spacingsPx.xs}; + border-radius: ${borders.radii.full}; + background: ${({ theme }) => theme.backgroundPrimarySubtleOnElevation1}; + color: ${({ theme }) => theme.textPrimaryDefault}; font-size: ${variables.FONT_SIZE.TINY}; font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD}; text-transform: uppercase; @@ -31,24 +32,24 @@ const StyledCard = styled(Card)` `; const Body = styled.div` - padding: 36px 20px 0 36px; + padding: ${spacingsPx.xxl} ${spacingsPx.xxl} 0 ${spacingsPx.xxl}; `; const CardTitle = styled(H3)` - color: ${({ theme }) => theme.TYPE_GREEN}; + color: ${({ theme }) => theme.textPrimaryDefault}; line-height: 23px; `; const FlexRow = styled.div` display: flex; justify-content: space-between; - margin: 22px 0 18px; + margin: ${spacingsPx.xl} 0 ${spacingsPx.lg}; gap: 68px; flex-wrap: wrap; ${variables.SCREEN_QUERY.BELOW_LAPTOP} { flex-direction: column; - gap: 16px; + gap: ${spacingsPx.md}; } `; @@ -58,6 +59,7 @@ const FlexRowChild = styled.div` export const StakeEthCard = () => { const theme = useTheme(); + const { ethApy } = useEverstakePoolStats(); const { discovery } = useDiscovery(); const { accounts } = useAccounts(discovery); @@ -76,34 +78,39 @@ export const StakeEthCard = () => { setIsShown(isSufficientEthForStaking); }, [isSufficientEthForStaking]); - const stakeEthFeatures = [ - { - id: 0, - icon: , - title: , - description: ( - - ), - extraDescription: , - }, - { - id: 1, - icon: , - title: , - description: , - }, - { - id: 2, - icon: , - title: , - description: , - }, - ]; + const stakeEthFeatures = useMemo( + () => [ + { + id: 0, + icon: , + title: , + description: ( + + ), + extraDescription: , + }, + { + id: 1, + icon: ( + + ), + title: , + description: , + }, + { + id: 2, + icon: , + title: , + description: , + }, + ], + [ethApy, theme.iconPrimaryDefault], + ); if (!isShown) return null; @@ -119,7 +126,7 @@ export const StakeEthCard = () => { } > - + diff --git a/packages/suite/src/views/dashboard/components/StakeEthCard/components/Footer.tsx b/packages/suite/src/views/dashboard/components/StakeEthCard/components/Footer.tsx index 02aa2af7cfeb..0e2bdc31506a 100644 --- a/packages/suite/src/views/dashboard/components/StakeEthCard/components/Footer.tsx +++ b/packages/suite/src/views/dashboard/components/StakeEthCard/components/Footer.tsx @@ -1,30 +1,35 @@ import styled from 'styled-components'; -import { Button, P, variables } from '@trezor/components'; +import { Button, Paragraph, variables } from '@trezor/components'; import { Translation } from 'src/components/suite'; import { NetworkBadge } from './NetworkBadge'; import { useAccountSearch, useDispatch } from 'src/hooks/suite'; import { goto } from 'src/actions/suite/routerActions'; +import { spacingsPx } from '@trezor/theme'; const Wrapper = styled.div` - padding: 22px 20px 20px 36px; + padding: ${spacingsPx.lg} ${spacingsPx.lg} ${spacingsPx.lg} ${spacingsPx.xxl}; border-top: 1px solid ${({ theme }) => theme.STROKE_LIGHT_GREY}; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; - gap: 8px; + gap: ${spacingsPx.xs}; +`; + +const StyledP = styled(Paragraph)` + font-size: ${variables.FONT_SIZE.TINY}; + color: ${({ theme }) => theme.textSubdued}; `; const Flex = styled.div` - margin-top: 6px; display: flex; - gap: 8px; + gap: ${spacingsPx.xs}; flex-wrap: wrap; `; const Right = styled.div` display: flex; - gap: 8px; + gap: ${spacingsPx.xs}; `; const ButtonTertiary = styled(Button)` @@ -58,9 +63,9 @@ export const Footer = ({ accountIndex = 0, hideSection }: FooterProps) => { return (
-

+ -

+ {/* Flex is used because more networks will be available for staking in the future */} } /> diff --git a/packages/suite/src/views/dashboard/components/StakeEthCard/components/NetworkBadge.tsx b/packages/suite/src/views/dashboard/components/StakeEthCard/components/NetworkBadge.tsx index acd1832e3b58..67a8edf540fe 100644 --- a/packages/suite/src/views/dashboard/components/StakeEthCard/components/NetworkBadge.tsx +++ b/packages/suite/src/views/dashboard/components/StakeEthCard/components/NetworkBadge.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; -import { CoinLogo, CoinType, P } from '@trezor/components'; +import { CoinLogo, CoinType, Paragraph } from '@trezor/components'; const Flex = styled.div` display: flex; @@ -16,8 +16,6 @@ interface NetworkBadgeProps { export const NetworkBadge = ({ logo, name }: NetworkBadgeProps) => ( -

- {name} -

+ {name} ); diff --git a/packages/suite/src/views/dashboard/index.tsx b/packages/suite/src/views/dashboard/index.tsx index 3616427f8a07..d6a7ad474086 100644 --- a/packages/suite/src/views/dashboard/index.tsx +++ b/packages/suite/src/views/dashboard/index.tsx @@ -7,7 +7,7 @@ import SecurityFeatures from './components/SecurityFeatures'; import { PromoBanner } from './components/PromoBanner'; import { T2B1PromoBanner } from './components/T2B1PromoBanner'; import { AppNavigationPanel } from 'src/components/suite'; -import { StakeEthCard } from './components/StakeEthCard'; +import { StakeEthCard } from './components/StakeEthCard/StakeEthCard'; const Wrapper = styled.div` display: flex; diff --git a/packages/suite/src/views/wallet/staking/WalletStaking.tsx b/packages/suite/src/views/wallet/staking/WalletStaking.tsx index fd1aebd6590b..b66f85cc58a6 100644 --- a/packages/suite/src/views/wallet/staking/WalletStaking.tsx +++ b/packages/suite/src/views/wallet/staking/WalletStaking.tsx @@ -3,7 +3,7 @@ import { AccountExceptionLayout, WalletLayout } from 'src/components/wallet'; import { useSelector } from 'src/hooks/suite'; import { CardanoStakingDashboard } from './components/CardanoStakingDashboard'; import { hasNetworkFeatures } from '@suite-common/wallet-utils'; -import { EthStakingDashboard } from './components/EthStakingDashboard'; +import { EthStakingDashboard } from './components/EthStakingDashboard/EthStakingDashboard'; export const WalletStaking = () => { const { selectedAccount } = useSelector(state => state.wallet); diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/index.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/EthStakingDashboard.tsx similarity index 100% rename from packages/suite/src/views/wallet/staking/components/EthStakingDashboard/index.tsx rename to packages/suite/src/views/wallet/staking/components/EthStakingDashboard/EthStakingDashboard.tsx diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApyCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApyCard.tsx index bef3a1a29c76..2c153b8e8479 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApyCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApyCard.tsx @@ -1,4 +1,5 @@ -import { Icon, useTheme } from '@trezor/components'; +import { useTheme } from 'styled-components'; +import { Icon } from '@trezor/components'; import { Translation } from 'src/components/suite'; import { AccentP, CardBottomContent, GreyP, StyledCard } from './styled'; @@ -11,7 +12,7 @@ export const ApyCard = ({ apy }: ApyCardProps) => { return ( - + {`${apy}%`} 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 10c619ec69b4..61a998154809 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,45 +1,44 @@ -import styled from 'styled-components'; -import { Button, H2, Icon, P, useTheme } from '@trezor/components'; -import { Card, Translation, StakingFeature } from 'src/components/suite'; +import { useMemo } from 'react'; +import styled, { useTheme } from 'styled-components'; +import { Button, Card, Icon, Paragraph } from '@trezor/components'; +import { spacingsPx } from '@trezor/theme'; +import { Translation, StakingFeature } from 'src/components/suite'; import { openModal } from 'src/actions/suite/modalActions'; -import { useDispatch } from 'src/hooks/suite'; +import { useDispatch, useEverstakePoolStats } from 'src/hooks/suite'; +import { DashboardSection } from 'src/components/dashboard'; const StyledCard = styled(Card)` - padding: 26px 26px 36px; + padding: ${spacingsPx.xl} ${spacingsPx.xl} ${spacingsPx.xxl}; flex-direction: column; `; -const StyledH2 = styled(H2)` - margin-bottom: 18px; -`; - const Flex = styled.div` display: flex; - gap: 4px; + gap: ${spacingsPx.xxs}; align-items: center; `; -const StyledP = styled(P)` - margin-top: 8px; - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; +const StyledP = styled(Paragraph)` + margin-top: ${spacingsPx.xs}; + color: ${({ theme }) => theme.textSubdued}; `; -const GreenP = styled(P)` - color: ${({ theme }) => theme.TYPE_GREEN}; +const GreenP = styled(Paragraph)` + color: ${({ theme }) => theme.textPrimaryDefault}; `; const Header = styled.div` - padding-bottom: 22px; + padding-bottom: ${spacingsPx.xl}; `; const Body = styled.div` - border-top: 1px solid ${({ theme }) => theme.STROKE_LIGHT_GREY}; + border-top: 1px solid ${({ theme }) => theme.borderOnElevation1}; `; const FlexRow = styled.div` display: flex; justify-content: space-between; - margin: 26px 0 34px; + margin: ${spacingsPx.xl} 0 ${spacingsPx.xxl}; gap: 68px; flex-wrap: wrap; `; @@ -50,52 +49,52 @@ const FlexRowChild = styled.div` export const EmptyStakingCard = () => { const theme = useTheme(); + const { ethApy } = useEverstakePoolStats(); const dispatch = useDispatch(); const openStakingEthInANutshellModal = () => dispatch(openModal({ type: 'stake-eth-in-a-nutshell' })); - const stakeEthFeatures = [ - { - id: 0, - icon: , - title: , - description: ( - - ), - extraDescription: , - }, - { - id: 1, - icon: , - title: , - description: , - }, - ]; + const stakeEthFeatures = useMemo( + () => [ + { + id: 0, + icon: , + title: , + description: ( + + ), + extraDescription: , + }, + { + id: 1, + icon: ( + + ), + title: , + description: , + }, + ], + [ethApy, theme.iconPrimaryDefault], + ); return ( -
- - - - } - > + }> +
- + - + - +
@@ -123,6 +122,6 @@ export const EmptyStakingCard = () => { -
+ ); }; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/PayoutCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/PayoutCard.tsx index c9c49678ea79..3217d1c44542 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/PayoutCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/PayoutCard.tsx @@ -1,37 +1,41 @@ import { useMemo } from 'react'; import BigNumber from 'bignumber.js'; -import { Icon, useTheme } from '@trezor/components'; +import { useTheme } from 'styled-components'; +import { Icon } from '@trezor/components'; import { Translation } from 'src/components/suite'; import { useSelector } from 'src/hooks/suite'; -import { selectSelectedAccountEverstakeStakingPool } from 'src/reducers/wallet/selectedAccountReducer'; +import { selectSelectedAccountAutocompoundBalance } from 'src/reducers/wallet/selectedAccountReducer'; import { AccentP, CardBottomContent, GreyP, StyledCard } from './styled'; interface PayoutCardProps { nextRewardPayout: number | null; daysToAddToPool: number; + validatorWithdrawTime: number; } -export const PayoutCard = ({ nextRewardPayout, daysToAddToPool }: PayoutCardProps) => { +export const PayoutCard = ({ + nextRewardPayout, + daysToAddToPool, + validatorWithdrawTime, +}: PayoutCardProps) => { const theme = useTheme(); - const { totalPendingStakeBalance = '0' } = - useSelector(selectSelectedAccountEverstakeStakingPool) ?? {}; - const isStakePending = new BigNumber(totalPendingStakeBalance).gt(0); + const autocompoundBalance = useSelector(selectSelectedAccountAutocompoundBalance); const payout = useMemo(() => { - if (!isStakePending) return nextRewardPayout || '--'; + if (!nextRewardPayout || !daysToAddToPool) return '--'; - if (nextRewardPayout !== null && !Number.isNaN(daysToAddToPool)) { - if (daysToAddToPool <= nextRewardPayout) return nextRewardPayout; - - return daysToAddToPool + nextRewardPayout; + if (new BigNumber(autocompoundBalance).gt(0) || daysToAddToPool <= nextRewardPayout) { + return nextRewardPayout; } - return '--'; - }, [daysToAddToPool, isStakePending, nextRewardPayout]); + if (!validatorWithdrawTime) return '--'; + + return Math.round(validatorWithdrawTime / 60 / 60 / 24) + nextRewardPayout; + }, [autocompoundBalance, daysToAddToPool, nextRewardPayout, validatorWithdrawTime]); return ( - + diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabel.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabel.tsx index 86dbdf87f1f2..9e9460e961e5 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabel.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabel.tsx @@ -1,63 +1,60 @@ import { ReactNode, useEffect, useRef, useState } from 'react'; -import styled, { DefaultTheme } from 'styled-components'; -import { Icon, useTheme, variables, Image } from '@trezor/components'; +import styled, { DefaultTheme, useTheme } from 'styled-components'; +import { Icon, variables } from '@trezor/components'; import { ProgressLabelState } from './types'; +import { borders, spacingsPx } from '@trezor/theme'; const DEFAULT_LABEL_HEIGHT = 48; const getProgressStateColor = ({ theme, $progressState, - // TODO: Hack for current design. Remove when not needed. - $isIconWrapper = false, }: { theme: DefaultTheme; $progressState: ProgressLabelState; - $isIconWrapper?: boolean; }) => { if ($progressState === 'active') { - return theme.TYPE_LIGHT_ORANGE; + return theme.backgroundAlertYellowSubtleOnElevation2; } if ($progressState === 'done') { - return theme.BG_LIGHT_GREEN; + return theme.backgroundPrimarySubtleOnElevation1; } - return $isIconWrapper ? theme.STROKE_GREY : theme.BG_GREY; + return theme.backgroundSurfaceElevation2; }; const ProgressLabelItem = styled.div<{ - ref: any; $progressState: ProgressLabelState; $currentHeight?: number; }>` background: ${({ theme, $progressState }) => getProgressStateColor({ theme, $progressState })}; display: flex; - gap: 12px; - padding: 8px 12px; + gap: ${spacingsPx.sm}; + padding: ${spacingsPx.xs} ${spacingsPx.sm}; align-items: center; - border-radius: 25px; + border-radius: ${borders.radii.full}; min-height: ${DEFAULT_LABEL_HEIGHT}px; font-weight: ${variables.FONT_WEIGHT.MEDIUM}; font-size: ${variables.FONT_SIZE.SMALL}; color: ${({ theme, $progressState }) => { if ($progressState === 'active') { - return theme.TYPE_ORANGE; + return theme.textAlertYellow; } if ($progressState === 'done') { - return theme.TYPE_GREEN; + return theme.textPrimaryDefault; } - return theme.TYPE_LIGHT_GREY; + return theme.textSubdued; }}; &:not(:last-of-type) { position: relative; - margin-right: 8px; + margin-right: ${spacingsPx.xs}; border-top-right-radius: 0; border-bottom-right-radius: 0; - &:after { + &::after { content: ''; display: block; position: absolute; @@ -79,13 +76,13 @@ const ProgressLabelItem = styled.div<{ border-bottom-left-radius: 0; padding-left: 20px; - &:before { + &::before { content: ''; display: block; position: absolute; top: 0; left: 0; - border-left: 12px solid ${({ theme }) => theme.BG_WHITE}; + border-left: 12px solid ${({ theme }) => theme.backgroundSurfaceElevation1}; border-top: ${({ $currentHeight = DEFAULT_LABEL_HEIGHT }) => $currentHeight / 2}px solid transparent; border-bottom: ${({ $currentHeight = DEFAULT_LABEL_HEIGHT }) => $currentHeight / 2}px @@ -95,9 +92,16 @@ const ProgressLabelItem = styled.div<{ `; const IconWrapper = styled.div<{ $progressState: ProgressLabelState }>` - // TODO: Add right bg colors when they're in the design system - background: ${({ theme, $progressState }) => - getProgressStateColor({ theme, $progressState, $isIconWrapper: true })}; + background: ${({ theme, $progressState }) => { + if ($progressState === 'active') { + return theme.backgroundAlertYellowSubtleOnElevation0; + } + if ($progressState === 'done') { + return theme.backgroundPrimarySubtleOnElevation0; + } + + return theme.backgroundSurfaceElevationNegative; + }}; border-radius: 100%; min-width: 24px; min-height: 24px; @@ -110,7 +114,7 @@ const IconDot = styled.div` width: 4px; height: 4px; border-radius: 100%; - background: ${({ theme }) => theme.TYPE_DARK_GREY}; + background: ${({ theme }) => theme.backgroundNeutralBold}; `; interface ProgressLabelProps { @@ -122,7 +126,7 @@ export const ProgressLabel = ({ children, progressState = 'stale' }: ProgressLab const theme = useTheme(); // Watch height to adjust element's edge shape sizes (triangle, flag tale) - const ref = useRef(null); + const ref = useRef(null); const [currentHeight, setCurrentHeight] = useState(DEFAULT_LABEL_HEIGHT); useEffect(() => { if (ref.current === null) return; @@ -143,11 +147,11 @@ export const ProgressLabel = ({ children, progressState = 'stale' }: ProgressLab const getProgressStateIcon = () => { if (progressState === 'active') { - return ; + return ; } if (progressState === 'done') { - return ; + return ; } return ; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/index.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabels.tsx similarity index 89% rename from packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/index.tsx rename to packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabels.tsx index f1161af41442..0b85edfad2f5 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/index.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ProgressLabels/ProgressLabels.tsx @@ -1,11 +1,12 @@ import styled from 'styled-components'; +import { spacingsPx } from '@trezor/theme'; import { ProgressLabelData } from './types'; import { ProgressLabel } from './ProgressLabel'; const ProgressLabelsList = styled.div` display: flex; flex-wrap: wrap; - row-gap: 8px; + row-gap: ${spacingsPx.xs}; & > div { flex: 1 0 220px; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx index dc7ce1b83b5a..beaa848e4c8f 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx @@ -1,6 +1,7 @@ import BigNumber from 'bignumber.js'; -import styled from 'styled-components'; -import { Button, Card, Icon, Image, useTheme, variables } from '@trezor/components'; +import styled, { useTheme } from 'styled-components'; +import { Button, Card, Icon, variables } from '@trezor/components'; +import { spacingsPx } from '@trezor/theme'; import { selectAccountStakeTransactions } from '@suite-common/wallet-core'; import { isPending } from '@suite-common/wallet-utils'; import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite'; @@ -13,23 +14,22 @@ import { import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils'; import { MIN_ETH_AMOUNT_FOR_STAKING } from 'src/constants/suite/ethStaking'; import { InfoBox, ProgressBar } from './styled'; -import { ProgressLabels } from './ProgressLabels'; +import { ProgressLabels } from './ProgressLabels/ProgressLabels'; import { useProgressLabelsData } from '../hooks/useProgressLabelsData'; import { useIsTxStatusShown } from '../hooks/useIsTxStatusShown'; const StyledCard = styled(Card)` - padding: 16px; + padding: ${spacingsPx.md}; `; const EnteringAmountInfo = styled.div` display: flex; justify-content: space-between; align-items: center; - gap: 4px; + gap: ${spacingsPx.xxs}; flex-wrap: wrap; - padding: 2px 8px 10px 8px; + padding: ${spacingsPx.xxxs} ${spacingsPx.xs} ${spacingsPx.sm} ${spacingsPx.xs}; font-size: ${variables.FONT_SIZE.SMALL}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; `; const EnteringAmountsWrapper = styled.div` @@ -37,13 +37,12 @@ const EnteringAmountsWrapper = styled.div` `; const EnteringFiatValueWrapper = styled.span` - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + color: ${({ theme }) => theme.textSubdued}; `; const AmountsWrapper = styled.div<{ $isUnstakePending: boolean }>` display: flex; - column-gap: 8px; - row-gap: 12px; + gap: ${spacingsPx.sm} ${spacingsPx.xs}; flex-wrap: wrap; justify-content: ${({ $isUnstakePending }) => $isUnstakePending ? 'space-between' : 'flex-start'}; @@ -55,40 +54,36 @@ const AmountsWrapper = styled.div<{ $isUnstakePending: boolean }>` const AmountHeading = styled.div` display: flex; - gap: 4px; + gap: ${spacingsPx.xxs}; align-items: center; font-size: ${variables.FONT_SIZE.TINY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + color: ${({ theme }) => theme.textSubdued}; `; const StyledFormattedCryptoAmount = styled(FormattedCryptoAmount)<{ $isRewards?: boolean }>` display: block; - margin-top: 8px; + margin-top: ${spacingsPx.xs}; font-size: ${variables.FONT_SIZE.H2}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - color: ${({ $isRewards = false, theme }) => ($isRewards ? theme.TYPE_GREEN : '')}; + color: ${({ $isRewards = false, theme }) => ($isRewards ? theme.textPrimaryDefault : '')}; `; const StyledFiatValue = styled(FiatValue)` display: block; font-size: ${variables.FONT_SIZE.SMALL}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + color: ${({ theme }) => theme.textSubdued}; `; const ProgressBarWrapper = styled.div` - margin-top: 36px; + margin-top: ${spacingsPx.xxxl}; `; const Info = styled.div` - margin: 16px 0 0 6px; + margin: ${spacingsPx.md} 0 0 ${spacingsPx.xs}; display: flex; - gap: 4px; + gap: ${spacingsPx.xxs}; align-items: center; font-size: ${variables.FONT_SIZE.TINY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + color: ${({ theme }) => theme.textSubdued}; `; const NoMarginInfo = styled(Info)` @@ -96,13 +91,13 @@ const NoMarginInfo = styled(Info)` `; const SmMarginInfo = styled(Info)` - margin: 0 0 2px 6px; + margin: 0 0 ${spacingsPx.xxxs} ${spacingsPx.xs}; `; const ButtonsWrapper = styled.div` margin-top: 66px; display: flex; - gap: 8px; + gap: ${spacingsPx.xs}; flex-wrap: wrap; `; @@ -176,7 +171,7 @@ export const StakingCard = ({ }} /> @@ -253,11 +248,7 @@ export const StakingCard = ({ {isPendingUnstakeShown && (
- + {' '} {isDaysToUnstakeShown && ( diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx index cd1cf27d4aba..a37410598144 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingDashboard.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components'; import { variables } from '@trezor/components'; +import { spacingsPx } from '@trezor/theme'; import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer'; -import { useSelector } from 'src/hooks/suite'; -import { useValidatorsQueue } from 'src/hooks/wallet/useValidatorsQueue'; +import { useSelector, useEverstakePoolStats, useValidatorsQueue } from 'src/hooks/suite'; import { Divider, Translation } from 'src/components/suite'; import { DashboardSection } from 'src/components/dashboard'; import { StakingCard } from './StakingCard'; @@ -10,19 +10,18 @@ import { ApyCard } from './ApyCard'; import { PayoutCard } from './PayoutCard'; import { ClaimCard } from './claim/ClaimCard'; import { Transactions } from './Transactions'; -import { useEverstakePoolStats } from '../hooks/useEverstakePoolStats'; import { useDaysTo } from '../hooks/useDaysTo'; const FlexCol = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: ${spacingsPx.xs}; `; const FlexRow = styled.div` display: flex; flex-wrap: wrap; - gap: 6px; + gap: ${spacingsPx.xs}; & > div { flex: 1 0 205px; @@ -30,7 +29,7 @@ const FlexRow = styled.div` ${variables.SCREEN_QUERY.BELOW_LAPTOP} { flex-direction: column; - gap: 8px; + gap: ${spacingsPx.xs}; & > div { flex: 1 0 auto; @@ -65,6 +64,7 @@ export const StakingDashboard = () => { diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimPendingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimPendingCard.tsx index e9b79d036c7d..86b64f6a0345 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimPendingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimPendingCard.tsx @@ -1,21 +1,22 @@ -import styled from 'styled-components'; -import { Image } from '@trezor/components'; +import styled, { useTheme } from 'styled-components'; +import { Icon } from '@trezor/components'; import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite'; import { FiatValueWrapper, FormattedCryptoAmountWrapper } from './styled'; import { useSelector } from 'src/hooks/suite'; import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer'; import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils'; import { variables } from '@trezor/components/src/config'; +import { borders, spacingsPx } from '@trezor/theme'; const StyledCard = styled.div` - border-radius: 16px; - padding: 12px 28px 14px; - margin-bottom: 8px; - background: ${({ theme }) => theme.BG_LIGHT_GREEN}; + border-radius: ${borders.radii.md}; + padding: ${spacingsPx.sm} ${spacingsPx.xxl} ${spacingsPx.md}; + margin-bottom: ${spacingsPx.xs}; + background: ${({ theme }) => theme.backgroundPrimarySubtleOnElevation1}; position: relative; overflow: hidden; - &:before { + &::before { content: ''; display: block; position: absolute; @@ -23,22 +24,21 @@ const StyledCard = styled.div` top: 0; width: 8px; height: 100%; - background: ${({ theme }) => theme.TYPE_GREEN}; + background: ${({ theme }) => theme.backgroundPrimaryDefault}; } `; const Flex = styled.div` display: flex; - gap: 18px; + gap: ${spacingsPx.lg}; align-items: center; flex-wrap: wrap; `; const Heading = styled.div` - margin-bottom: 4px; - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + margin-bottom: ${spacingsPx.xxs}; + color: ${({ theme }) => theme.textSubdued}; font-size: ${variables.FONT_SIZE.TINY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; `; interface ClaimPendingCardProps { @@ -46,13 +46,14 @@ interface ClaimPendingCardProps { } export const ClaimPendingCard = ({ claimAmount }: ClaimPendingCardProps) => { + const theme = useTheme(); const { symbol } = useSelector(selectSelectedAccount) ?? {}; const mappedSymbol = mapTestnetSymbol(symbol ?? 'eth'); return ( - +
diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimReadyCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimReadyCard.tsx index 89c32803c547..522507e7c272 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimReadyCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/ClaimReadyCard.tsx @@ -1,6 +1,7 @@ -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite'; -import { Button, Icon, P, variables } from '@trezor/components'; +import { Button, Icon, Paragraph, variables } from '@trezor/components'; +import { borders, spacingsPx } from '@trezor/theme'; import { openModal } from 'src/actions/suite/modalActions'; import { useDispatch, useSelector } from 'src/hooks/suite'; import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer'; @@ -8,14 +9,14 @@ import { mapTestnetSymbol } from 'src/utils/wallet/coinmarket/coinmarketUtils'; import { FiatValueWrapper, FormattedCryptoAmountWrapper } from './styled'; const StyledCard = styled.div` - border-radius: 16px; - padding: 16px 30px 30px 16px; - margin-bottom: 8px; + border-radius: ${borders.radii.md}; + padding: ${spacingsPx.md} ${spacingsPx.xxl} ${spacingsPx.xxl} ${spacingsPx.md}; + margin-bottom: ${spacingsPx.xs}; background: linear-gradient( 87deg, - ${({ theme }) => theme.BG_LIGHT_GREEN} 0%, - ${({ theme }) => theme.BG_WHITE} 73.33% + ${({ theme }) => theme.backgroundPrimarySubtleOnElevation1} 0%, + ${({ theme }) => theme.backgroundNeutralBoldInverted} 73.33% ); position: relative; overflow: hidden; @@ -33,39 +34,35 @@ const Flex = styled.div` justify-content: space-between; align-items: center; flex-wrap: wrap; - row-gap: 12px; + row-gap: ${spacingsPx.sm}; `; const InfoWrapper = styled.div` display: flex; flex-wrap: wrap; - column-gap: 50px; - row-gap: 20px; + gap: ${spacingsPx.lg} 50px; `; const InfoHeading = styled.div` display: flex; align-items: center; - gap: 4px; - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + gap: ${spacingsPx.xxs}; + color: ${({ theme }) => theme.textSubdued}; font-size: ${variables.FONT_SIZE.TINY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - margin-bottom: 8px; + margin-bottom: ${spacingsPx.xs}; `; -const StyledP = styled(P)` +const StyledP = styled(Paragraph)` font-size: ${variables.FONT_SIZE.H2}; - line-height: normal; + line-height: 24px; `; -// TODO: Move to theme. -const iconColor = '#0F6148'; - interface ClaimReadyCardProps { claimAmount: string; } export const ClaimReadyCard = ({ claimAmount }: ClaimReadyCardProps) => { + const theme = useTheme(); const { symbol } = useSelector(selectSelectedAccount) ?? {}; const mappedSymbol = mapTestnetSymbol(symbol ?? 'eth'); const dispatch = useDispatch(); @@ -75,17 +72,17 @@ export const ClaimReadyCard = ({ claimAmount }: ClaimReadyCardProps) => { return ( - - + + - - + + - - + + - + @@ -114,7 +111,7 @@ export const ClaimReadyCard = ({ claimAmount }: ClaimReadyCardProps) => { - +
diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/styled.ts b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/styled.ts index 56ae3bd5e019..a0efb3ede583 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/styled.ts +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/claim/styled.ts @@ -3,12 +3,10 @@ import { variables } from '@trezor/components'; export const FormattedCryptoAmountWrapper = styled.div` font-size: ${variables.FONT_SIZE.H2}; - color: ${({ theme }) => theme.TYPE_GREEN}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; + color: ${({ theme }) => theme.textPrimaryDefault}; `; export const FiatValueWrapper = styled.div` - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + color: ${({ theme }) => theme.textSubdued}; font-size: ${variables.FONT_SIZE.SMALL}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; `; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/styled.ts b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/styled.ts index 57ab575efd24..81c052ceef06 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/styled.ts +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/styled.ts @@ -1,52 +1,51 @@ import styled from 'styled-components'; -import { Card, P, variables } from '@trezor/components'; +import { Card, Paragraph, variables } from '@trezor/components'; +import { borders, spacingsPx } from '@trezor/theme'; export const StyledCard = styled(Card)` - padding: 12px; + padding: ${spacingsPx.sm}; `; export const CardBottomContent = styled.div` - margin-top: 18px; + margin-top: ${spacingsPx.lg}; `; -export const AccentP = styled(P)` - color: ${({ theme }) => theme.TYPE_DARK_GREY}; +export const AccentP = styled(Paragraph)` + color: ${({ theme }) => theme.textDefault}; font-size: ${variables.FONT_SIZE.H2}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; `; -export const GreyP = styled(P)` - color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; +export const GreyP = styled(Paragraph)` + color: ${({ theme }) => theme.textSubdued}; font-size: ${variables.FONT_SIZE.SMALL}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; `; export const InfoBox = styled.div` - margin: -10px -10px 16px -10px; + margin: -10px -10px ${spacingsPx.md} -10px; padding: 6px; - border: 1px solid ${({ theme }) => theme.STROKE_GREY}; - border-radius: 16px; + border: 1px solid ${({ theme }) => theme.borderOnElevation1}; + border-radius: ${borders.radii.md}; position: relative; - &:after { + &::after { content: ''; display: block; position: absolute; bottom: -6px; left: 12px; - background-color: ${({ theme }) => theme.BG_WHITE}; + background-color: ${({ theme }) => theme.backgroundSurfaceElevation1}; height: 14px; width: 16px; clip-path: polygon(100% 50%, 0 50%, 50% 100%); } - &:before { + &::before { content: ''; display: block; position: absolute; bottom: -7px; left: 12px; - background-color: ${({ theme }) => theme.STROKE_GREY}; + background-color: ${({ theme }) => theme.borderOnElevation1}; height: 14px; width: 16px; clip-path: polygon(100% 50%, 0 50%, 50% 100%); @@ -61,18 +60,21 @@ export const ProgressBar = styled.div<{ }>` height: 6px; width: 100%; - background: ${({ theme, $total }) => ($total ? theme.STROKE_GREY : theme.BG_GREY)}; + background: ${({ theme, $total }) => + $total + ? theme.backgroundSurfaceElevationNegative + : theme.backgroundNeutralSubtleOnElevation1}; border-radius: 6px; position: relative; overflow: hidden; - &:after { + &::after { content: ''; display: ${({ $rewards = 0 }) => ($rewards ? 'block' : 'none')}; min-width: 1%; max-width: 100%; width: ${({ $total = 0, $rewards = 0 }) => ($rewards * 100) / $total}%; - background: ${({ theme }) => theme.BG_GREEN}; + background: ${({ theme }) => theme.backgroundPrimaryDefault}; border-radius: ${({ $isPendingUnstakeShown }) => $isPendingUnstakeShown ? '6px 0 0 6px' : '6px'}; height: 6px; @@ -80,22 +82,22 @@ export const ProgressBar = styled.div<{ right: ${({ $total = 0, $unstaking = 0, $isPendingUnstakeShown }) => $isPendingUnstakeShown ? `${($unstaking * 100) / $total}%` : 0}; top: 0; - box-shadow: -2px 0 0 0 ${({ theme }) => theme.BG_WHITE}; + box-shadow: -2px 0 0 0 ${({ theme }) => theme.backgroundSurfaceElevation1}; } - &:before { + &::before { content: ''; display: ${({ $isPendingUnstakeShown }) => ($isPendingUnstakeShown ? 'block' : 'none')}; min-width: 1%; max-width: 100%; width: ${({ $total = 0, $unstaking = 0 }) => ($unstaking * 100) / $total}%; - background: ${({ theme }) => theme.TYPE_LIGHTER_GREY}; + background: ${({ theme }) => theme.backgroundNeutralSubdued}; border-radius: 6px; height: 6px; position: absolute; right: 0; top: 0; - box-shadow: -2px 0 0 0 ${({ theme }) => theme.BG_WHITE}; + box-shadow: -2px 0 0 0 ${({ theme }) => theme.backgroundSurfaceElevation1}; z-index: 2; } `; diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useProgressLabelsData.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useProgressLabelsData.tsx index bd6bc59c7803..52eb8bbf246e 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useProgressLabelsData.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/hooks/useProgressLabelsData.tsx @@ -7,6 +7,7 @@ import { Translation } from 'src/components/suite'; const DaysToAddToPool = styled.div` font-size: ${variables.FONT_SIZE.TINY}; color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; + line-height: 12px; `; interface UseProgressLabelsData { diff --git a/suite-common/wallet-config/src/networksConfig.ts b/suite-common/wallet-config/src/networksConfig.ts index 09718acf2173..5ae4ee34e21e 100644 --- a/suite-common/wallet-config/src/networksConfig.ts +++ b/suite-common/wallet-config/src/networksConfig.ts @@ -339,7 +339,7 @@ export const networks = { address: 'https://sepolia1.trezor.io/address/', queryString: '', }, - features: ['rbf', 'sign-verify', 'tokens', 'token-definitions', 'staking'], + features: ['rbf', 'sign-verify', 'tokens', 'token-definitions'], customBackends: ['blockbook'], accountTypes: {}, }, diff --git a/suite-common/wallet-core/src/transactions/transactionsReducer.ts b/suite-common/wallet-core/src/transactions/transactionsReducer.ts index a552b79b85f1..dca023a63a57 100644 --- a/suite-common/wallet-core/src/transactions/transactionsReducer.ts +++ b/suite-common/wallet-core/src/transactions/transactionsReducer.ts @@ -8,14 +8,7 @@ import { getIsZeroValuePhishing, getIsPhishingTransaction, } from '@suite-common/wallet-utils'; -import { isStakeTx } from '@suite-common/suite-utils'; -import { findTransaction, getConfirmations, isPending } from '@suite-common/wallet-utils'; -import { - isClaimTx, - isStakeTx, - isStakeTypeTx, - isUnstakeTx, -} from '@suite-common/suite-utils'; +import { isClaimTx, isStakeTx, isStakeTypeTx, isUnstakeTx } from '@suite-common/suite-utils'; import { createReducerWithExtraDeps } from '@suite-common/redux-utils'; import { accountsActions } from '../accounts/accountsActions'; diff --git a/suite-common/wallet-utils/src/transactionUtils.ts b/suite-common/wallet-utils/src/transactionUtils.ts index afdff687fd96..81e54e23ada1 100644 --- a/suite-common/wallet-utils/src/transactionUtils.ts +++ b/suite-common/wallet-utils/src/transactionUtils.ts @@ -491,6 +491,14 @@ export const getTargetAmount = ( return txAmount; } + // The amount used for Ethereum transactions (e.g. unstake) when there wasn't any account balance change + // except fees. In this case, there's no other amount available in other fields, but we still should show + // a user the amount info + const ethParsedAmount = transaction.ethereumSpecific?.parsedData?.params?.[0].values?.[0]; + if (ethParsedAmount) { + return formatNetworkAmount(ethParsedAmount, transaction.symbol); + } + // "sent to self" target while other non-self targets are also present return null; }; diff --git a/yarn.lock b/yarn.lock index e9c5dcedfd0b..05e8a80dda41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1868,6 +1868,154 @@ __metadata: languageName: node linkType: hard +"@confio/ics23@npm:^0.6.8": + version: 0.6.8 + resolution: "@confio/ics23@npm:0.6.8" + dependencies: + "@noble/hashes": "npm:^1.0.0" + protobufjs: "npm:^6.8.8" + checksum: 5bffe3b9549eafe627aabdad8951c989cecb9d841f9e646ef3c916ae4cd2c582076f937684ff1b686dc67ec7176c82faf15c221dc9c86990cfbfe13c2add9473 + languageName: node + linkType: hard + +"@cosmjs/amino@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/amino@npm:0.30.1" + dependencies: + "@cosmjs/crypto": "npm:^0.30.1" + "@cosmjs/encoding": "npm:^0.30.1" + "@cosmjs/math": "npm:^0.30.1" + "@cosmjs/utils": "npm:^0.30.1" + checksum: c80859749aae9d6e971380e50e8a3438d2889caeaa56433d448985710bcbb4da62937a5ce94ceb65afc5d6fc92b7daf3596e7bd9d31c3d76d08dea4beedf191b + languageName: node + linkType: hard + +"@cosmjs/crypto@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/crypto@npm:0.30.1" + dependencies: + "@cosmjs/encoding": "npm:^0.30.1" + "@cosmjs/math": "npm:^0.30.1" + "@cosmjs/utils": "npm:^0.30.1" + "@noble/hashes": "npm:^1" + bn.js: "npm:^5.2.0" + elliptic: "npm:^6.5.4" + libsodium-wrappers: "npm:^0.7.6" + checksum: 1f52d4b0bd3efa62ffdd4c37c81b52c615f9fd463734f46935de0baa47eac3ba24f30180dec72a18e7596bf190a9e9cd3b781984eb697cbe7dc7e77c591f4e2c + languageName: node + linkType: hard + +"@cosmjs/encoding@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/encoding@npm:0.30.1" + dependencies: + base64-js: "npm:^1.3.0" + bech32: "npm:^1.1.4" + readonly-date: "npm:^1.0.0" + checksum: 620b3bd575f370d6c515413bab5d38a02506c2f16cc0a51e64448cafe438b31592873eac8aefe549ef71f9756ac24c6450e43a466e1e9067638f0fee625638c3 + languageName: node + linkType: hard + +"@cosmjs/json-rpc@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/json-rpc@npm:0.30.1" + dependencies: + "@cosmjs/stream": "npm:^0.30.1" + xstream: "npm:^11.14.0" + checksum: 9dd3a915f6cc1beff14fee60fe5fe10776f768efa3344d334cd2f332a14c951613ba0da38571e8a3360bc77283d6653b9ced198ae7187cb52bc2769e57754fbd + languageName: node + linkType: hard + +"@cosmjs/math@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/math@npm:0.30.1" + dependencies: + bn.js: "npm:^5.2.0" + checksum: bf273c61936d4102a4083c29d6ac445287443b7e62ce700754eb376c0ece11edaa1370cb82288352b497a6779613c85f69fb79961ee46400f2fe0665d18afdda + languageName: node + linkType: hard + +"@cosmjs/proto-signing@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/proto-signing@npm:0.30.1" + dependencies: + "@cosmjs/amino": "npm:^0.30.1" + "@cosmjs/crypto": "npm:^0.30.1" + "@cosmjs/encoding": "npm:^0.30.1" + "@cosmjs/math": "npm:^0.30.1" + "@cosmjs/utils": "npm:^0.30.1" + cosmjs-types: "npm:^0.7.1" + long: "npm:^4.0.0" + checksum: 214871f1c9f2997ec58af278b790cd533a761420ff569bed436b8f43856249d0698645082818470ddcd09f33417d7a945f58ab52d40b2d21656648f57ede11c8 + languageName: node + linkType: hard + +"@cosmjs/socket@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/socket@npm:0.30.1" + dependencies: + "@cosmjs/stream": "npm:^0.30.1" + isomorphic-ws: "npm:^4.0.1" + ws: "npm:^7" + xstream: "npm:^11.14.0" + checksum: 2fbee08d34ca2dfed08bbe4282ee600dc6aaa892aec5aa24286e648ef29e64d8e0a003824894e03332202b8ff48b7b08b8726f8d09ad0897437b3d059434ffe7 + languageName: node + linkType: hard + +"@cosmjs/stargate@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/stargate@npm:0.30.1" + dependencies: + "@confio/ics23": "npm:^0.6.8" + "@cosmjs/amino": "npm:^0.30.1" + "@cosmjs/encoding": "npm:^0.30.1" + "@cosmjs/math": "npm:^0.30.1" + "@cosmjs/proto-signing": "npm:^0.30.1" + "@cosmjs/stream": "npm:^0.30.1" + "@cosmjs/tendermint-rpc": "npm:^0.30.1" + "@cosmjs/utils": "npm:^0.30.1" + cosmjs-types: "npm:^0.7.1" + long: "npm:^4.0.0" + protobufjs: "npm:~6.11.3" + xstream: "npm:^11.14.0" + checksum: 5b1eb882029102fcc7d0021a9c9893c8fdd43de1f8662872b477f47cd719a632a3cc7e32d45857b7e3d1169cba436292d3416067a0e2439dd95218c6617df38f + languageName: node + linkType: hard + +"@cosmjs/stream@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/stream@npm:0.30.1" + dependencies: + xstream: "npm:^11.14.0" + checksum: f9e48a8377c2d3cfbf288fcf4fad745905c042dabc442d2cbb93d4280033e3c8e493a3328f58c0b645b60f9c2188d14603b2bb37a174bc0619686c5e70b13dca + languageName: node + linkType: hard + +"@cosmjs/tendermint-rpc@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/tendermint-rpc@npm:0.30.1" + dependencies: + "@cosmjs/crypto": "npm:^0.30.1" + "@cosmjs/encoding": "npm:^0.30.1" + "@cosmjs/json-rpc": "npm:^0.30.1" + "@cosmjs/math": "npm:^0.30.1" + "@cosmjs/socket": "npm:^0.30.1" + "@cosmjs/stream": "npm:^0.30.1" + "@cosmjs/utils": "npm:^0.30.1" + axios: "npm:^0.21.2" + readonly-date: "npm:^1.0.0" + xstream: "npm:^11.14.0" + checksum: 7bf1fd6b12725cf506bcaefaa4507e7d653b8dfb8faa8eddd83d0db3522308e9de5e0bbe228dabf41d5491e2e1efe32b9eaac4453a9854ead703b882e502ce0c + languageName: node + linkType: hard + +"@cosmjs/utils@npm:^0.30.1": + version: 0.30.1 + resolution: "@cosmjs/utils@npm:0.30.1" + checksum: 64ea16cdeba64d2b346a0b45ca47059ab4297fdf5c4e5fd89ec262eec488807f49f94dcdc294628142015ce4669c4eaf7426d1f8a6538146da5601dcc484cb19 + languageName: node + linkType: hard + "@crowdin/cli@npm:^3.18.0": version: 3.18.0 resolution: "@crowdin/cli@npm:3.18.0" @@ -4351,7 +4499,7 @@ __metadata: languageName: node linkType: hard -"@noble/curves@npm:1.3.0, @noble/curves@npm:^1.2.0, @noble/curves@npm:~1.3.0": +"@noble/curves@npm:1.3.0, @noble/curves@npm:^1.1.0, @noble/curves@npm:^1.2.0, @noble/curves@npm:~1.3.0": version: 1.3.0 resolution: "@noble/curves@npm:1.3.0" dependencies: @@ -4360,14 +4508,7 @@ __metadata: languageName: node linkType: hard -"@noble/hashes@npm:1.3.3, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.2, @noble/hashes@npm:~1.3.2": - version: 1.3.3 - resolution: "@noble/hashes@npm:1.3.3" - checksum: 1025ddde4d24630e95c0818e63d2d54ee131b980fe113312d17ed7468bc18f54486ac86c907685759f8a7e13c2f9b9e83ec7b67d1cc20836f36b5e4a65bb102d - languageName: node - linkType: hard - -"@noble/hashes@npm:1.3.3, @noble/hashes@npm:^1, @noble/hashes@npm:^1.0.0, @noble/hashes@npm:^1.3.2, @noble/hashes@npm:~1.3.2": +"@noble/hashes@npm:1.3.3, @noble/hashes@npm:^1, @noble/hashes@npm:^1.0.0, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.2, @noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.2": version: 1.3.3 resolution: "@noble/hashes@npm:1.3.3" checksum: 1025ddde4d24630e95c0818e63d2d54ee131b980fe113312d17ed7468bc18f54486ac86c907685759f8a7e13c2f9b9e83ec7b67d1cc20836f36b5e4a65bb102d @@ -6189,21 +6330,14 @@ __metadata: languageName: node linkType: hard -"@scure/base@npm:^1.1.3, @scure/base@npm:~1.1.4": - version: 1.1.5 - resolution: "@scure/base@npm:1.1.5" - checksum: 543fa9991c6378b6a0d5ab7f1e27b30bb9c1e860d3ac81119b4213cfdf0ad7b61be004e06506e89de7ce0cec9391c17f5c082bb34c3b617a2ee6a04129f52481 - languageName: node - linkType: hard - -"@scure/base@npm:~1.1.4": +"@scure/base@npm:^1.1.3, @scure/base@npm:~1.1.0, @scure/base@npm:~1.1.4": version: 1.1.5 resolution: "@scure/base@npm:1.1.5" checksum: 543fa9991c6378b6a0d5ab7f1e27b30bb9c1e860d3ac81119b4213cfdf0ad7b61be004e06506e89de7ce0cec9391c17f5c082bb34c3b617a2ee6a04129f52481 languageName: node linkType: hard -"@scure/bip32@npm:1.3.3": +"@scure/bip32@npm:1.3.3, @scure/bip32@npm:^1.3.1": version: 1.3.3 resolution: "@scure/bip32@npm:1.3.3" dependencies: @@ -6214,17 +6348,17 @@ __metadata: languageName: node linkType: hard -"@scure/bip39@npm:1.2.2": - version: 1.2.2 - resolution: "@scure/bip39@npm:1.2.2" +"@scure/bip39@npm:1.2.1": + version: 1.2.1 + resolution: "@scure/bip39@npm:1.2.1" dependencies: - "@noble/hashes": "npm:~1.3.2" - "@scure/base": "npm:~1.1.4" - checksum: f71aceda10a7937bf3779fd2b4c4156c95ec9813269470ddca464cb8ab610d2451b173037f4b1e6dac45414e406e7adc7b5814c51279f4474d5d38140bbee542 + "@noble/hashes": "npm:~1.3.0" + "@scure/base": "npm:~1.1.0" + checksum: 2ea368bbed34d6b1701c20683bf465e147f231a9e37e639b8c82f585d6f978bb0f3855fca7ceff04954ae248b3e313f5d322d0210614fb7acb402739415aaf31 languageName: node linkType: hard -"@scure/bip39@npm:^1.2.1": +"@scure/bip39@npm:1.2.2, @scure/bip39@npm:^1.2.1": version: 1.2.2 resolution: "@scure/bip39@npm:1.2.2" dependencies: @@ -6896,30 +7030,7 @@ __metadata: languageName: node linkType: hard -"@solana/web3.js@npm:^1.75.0": - version: 1.89.1 - resolution: "@solana/web3.js@npm:1.89.1" - dependencies: - "@babel/runtime": "npm:^7.23.4" - "@noble/curves": "npm:^1.2.0" - "@noble/hashes": "npm:^1.3.2" - "@solana/buffer-layout": "npm:^4.0.1" - agentkeepalive: "npm:^4.5.0" - bigint-buffer: "npm:^1.1.5" - bn.js: "npm:^5.2.1" - borsh: "npm:^0.7.0" - bs58: "npm:^4.0.1" - buffer: "npm:6.0.3" - fast-stable-stringify: "npm:^1.0.0" - jayson: "npm:^4.1.0" - node-fetch: "npm:^2.7.0" - rpc-websockets: "npm:^7.5.1" - superstruct: "npm:^0.14.2" - checksum: 69100bab9077489e477762357ed8e3ff6a770d069cf97e9fa681c022a0b7218ebb30624d47bde47f71b15219dbb3d3697d1c5fd011244c0a17cdd2bac116f0d1 - languageName: node - linkType: hard - -"@solana/web3.js@npm:^1.90.0": +"@solana/web3.js@npm:^1.75.0, @solana/web3.js@npm:^1.90.0": version: 1.90.0 resolution: "@solana/web3.js@npm:1.90.0" dependencies: @@ -10315,6 +10426,7 @@ __metadata: resolution: "@trezor/suite@workspace:packages/suite" dependencies: "@crowdin/cli": "npm:^3.18.0" + "@everstake/wallet-sdk": "npm:^0.3.39" "@formatjs/cli": "npm:^6.2.7" "@formatjs/intl": "npm:2.10.0" "@hookform/resolvers": "npm:3.3.4" @@ -10668,16 +10780,7 @@ __metadata: languageName: node linkType: hard -"@types/bn.js@npm:^5.1.0": - version: 5.1.1 - resolution: "@types/bn.js@npm:5.1.1" - dependencies: - "@types/node": "npm:*" - checksum: cf2c45833e67ecfc45e5336151965a47857431640b61708b6e4dc81d88ed53585c9b30be59abbbee609cdf7a63828e5b8a58c1a27eb4306e5cb7ddd9bad46650 - languageName: node - linkType: hard - -"@types/bn.js@npm:^5.1.1": +"@types/bn.js@npm:^5.1.0, @types/bn.js@npm:^5.1.1": version: 5.1.5 resolution: "@types/bn.js@npm:5.1.5" dependencies: @@ -12760,7 +12863,7 @@ __metadata: languageName: node linkType: hard -"ajv@npm:^6.10.0, ajv@npm:^6.12.0, ajv@npm:^6.12.4, ajv@npm:^6.12.5": +"ajv@npm:^6.10.0, ajv@npm:^6.12.0, ajv@npm:^6.12.3, ajv@npm:^6.12.4, ajv@npm:^6.12.5": version: 6.12.6 resolution: "ajv@npm:6.12.6" dependencies: @@ -13441,14 +13544,14 @@ __metadata: languageName: node linkType: hard -"axios@npm:^1.6.0, axios@npm:^1.6.1, axios@npm:^1.6.7": - version: 1.6.7 - resolution: "axios@npm:1.6.7" +"axios@npm:1.6.2": + version: 1.6.2 + resolution: "axios@npm:1.6.2" dependencies: - follow-redirects: "npm:^1.15.4" + follow-redirects: "npm:^1.15.0" form-data: "npm:^4.0.0" proxy-from-env: "npm:^1.1.0" - checksum: a1932b089ece759cd261f175d9ebf4d41c8994cf0c0767cda86055c7a19bcfdade8ae3464bf4cec4c8b142f4a657dc664fb77a41855e8376cf38b86d7a86518f + checksum: 612bc93f8f738a518e7c5f9de9cc782bcd36aac6bae279160ef6a10260378e21c1786520eab3336898e3d66e0839ebdf739f327fb6d0431baa4d3235703a7652 languageName: node linkType: hard @@ -13461,14 +13564,14 @@ __metadata: languageName: node linkType: hard -"axios@npm:^1.3.5": - version: 1.6.5 - resolution: "axios@npm:1.6.5" +"axios@npm:^1.3.5, axios@npm:^1.6.0, axios@npm:^1.6.1, axios@npm:^1.6.7": + version: 1.6.7 + resolution: "axios@npm:1.6.7" dependencies: follow-redirects: "npm:^1.15.4" form-data: "npm:^4.0.0" proxy-from-env: "npm:^1.1.0" - checksum: 465489d9bf8f039b9adbc8103b6299d6a5e26de77b27f0e4173d814d39bca8f4b4659d94e09ee40461aedccd8c2452f1e2b3edace1c9f81220060d2974ff9dc7 + checksum: a1932b089ece759cd261f175d9ebf4d41c8994cf0c0767cda86055c7a19bcfdade8ae3464bf4cec4c8b142f4a657dc664fb77a41855e8376cf38b86d7a86518f languageName: node linkType: hard @@ -14033,7 +14136,7 @@ __metadata: languageName: node linkType: hard -"body-parser@npm:1.20.1, body-parser@npm:^1.19.0": +"body-parser@npm:1.20.1": version: 1.20.1 resolution: "body-parser@npm:1.20.1" dependencies: @@ -14053,7 +14156,7 @@ __metadata: languageName: node linkType: hard -"body-parser@npm:^1.16.0": +"body-parser@npm:^1.16.0, body-parser@npm:^1.19.0": version: 1.20.2 resolution: "body-parser@npm:1.20.2" dependencies: @@ -15079,6 +15182,13 @@ __metadata: languageName: node linkType: hard +"class-is@npm:^1.1.0": + version: 1.1.0 + resolution: "class-is@npm:1.1.0" + checksum: 8147a3e4ce86eb103d78621d665b87e8e33fcb3f54932fdca894b8222820903b43b2f6b4335d8822104702a5dc904c8f187127fdea4e7d48d905488b35c9e6a7 + languageName: node + linkType: hard + "classnames@npm:^2.2.6": version: 2.3.2 resolution: "classnames@npm:2.3.2" @@ -17222,6 +17332,13 @@ __metadata: languageName: node linkType: hard +"dom-walk@npm:^0.1.0": + version: 0.1.2 + resolution: "dom-walk@npm:0.1.2" + checksum: 19eb0ce9c6de39d5e231530685248545d9cd2bd97b2cb3486e0bfc0f2a393a9addddfd5557463a932b52fdfcf68ad2a619020cd2c74a5fe46fbecaa8e80872f3 + languageName: node + linkType: hard + "domain-browser@npm:^1.1.1": version: 1.2.0 resolution: "domain-browser@npm:1.2.0" @@ -18737,7 +18854,7 @@ __metadata: languageName: node linkType: hard -"ethereumjs-util@npm:^7.1.0, ethereumjs-util@npm:^7.1.5": +"ethereumjs-util@npm:^7.1.5": version: 7.1.5 resolution: "ethereumjs-util@npm:7.1.5" dependencies: @@ -20009,17 +20126,7 @@ __metadata: languageName: node linkType: hard -"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.4": - version: 1.15.5 - resolution: "follow-redirects@npm:1.15.5" - peerDependenciesMeta: - debug: - optional: true - checksum: d467f13c1c6aa734599b8b369cd7a625b20081af358f6204ff515f6f4116eb440de9c4e0c49f10798eeb0df26c95dd05d5e0d9ddc5786ab1a8a8abefe92929b4 - languageName: node - linkType: hard - -"follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.15.4": +"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.15.0, follow-redirects@npm:^1.15.4": version: 1.15.5 resolution: "follow-redirects@npm:1.15.5" peerDependenciesMeta: @@ -20742,6 +20849,16 @@ __metadata: languageName: node linkType: hard +"global@npm:~4.4.0": + version: 4.4.0 + resolution: "global@npm:4.4.0" + dependencies: + min-document: "npm:^2.19.0" + process: "npm:^0.11.10" + checksum: 9c057557c8f5a5bcfbeb9378ba4fe2255d04679452be504608dd5f13b54edf79f7be1db1031ea06a4ec6edd3b9f5f17d2d172fb47e6c69dae57fd84b7e72b77f + languageName: node + linkType: hard + "globals@npm:^11.1.0": version: 11.12.0 resolution: "globals@npm:11.12.0" @@ -20975,6 +21092,23 @@ __metadata: languageName: node linkType: hard +"har-schema@npm:^2.0.0": + version: 2.0.0 + resolution: "har-schema@npm:2.0.0" + checksum: d8946348f333fb09e2bf24cc4c67eabb47c8e1d1aa1c14184c7ffec1140a49ec8aa78aa93677ae452d71d5fc0fdeec20f0c8c1237291fc2bcb3f502a5d204f9b + languageName: node + linkType: hard + +"har-validator@npm:~5.1.3": + version: 5.1.5 + resolution: "har-validator@npm:5.1.5" + dependencies: + ajv: "npm:^6.12.3" + har-schema: "npm:^2.0.0" + checksum: b998a7269ca560d7f219eedc53e2c664cd87d487e428ae854a6af4573fc94f182fe9d2e3b92ab968249baec7ebaf9ead69cf975c931dc2ab282ec182ee988280 + languageName: node + linkType: hard + "has-ansi@npm:^2.0.0": version: 2.0.0 resolution: "has-ansi@npm:2.0.0" @@ -24750,13 +24884,6 @@ __metadata: languageName: node linkType: hard -"lru-cache@npm:^10.0.0, lru-cache@npm:^9.1.1 || ^10.0.0": - version: 10.2.0 - resolution: "lru-cache@npm:10.2.0" - checksum: 502ec42c3309c0eae1ce41afca471f831c278566d45a5273a0c51102dee31e0e250a62fa9029c3370988df33a14188a38e682c16143b794de78668de3643e302 - languageName: node - linkType: hard - "lowercase-keys@npm:^3.0.0": version: 3.0.0 resolution: "lowercase-keys@npm:3.0.0" @@ -24764,6 +24891,13 @@ __metadata: languageName: node linkType: hard +"lru-cache@npm:^10.0.0, lru-cache@npm:^9.1.1 || ^10.0.0": + version: 10.2.0 + resolution: "lru-cache@npm:10.2.0" + checksum: 502ec42c3309c0eae1ce41afca471f831c278566d45a5273a0c51102dee31e0e250a62fa9029c3370988df33a14188a38e682c16143b794de78668de3643e302 + languageName: node + linkType: hard + "lru-cache@npm:^5.1.1": version: 5.1.1 resolution: "lru-cache@npm:5.1.1" @@ -25852,6 +25986,15 @@ __metadata: languageName: node linkType: hard +"min-document@npm:^2.19.0": + version: 2.19.0 + resolution: "min-document@npm:2.19.0" + dependencies: + dom-walk: "npm:^0.1.0" + checksum: 4e45a0686c81cc04509989235dc6107e2678a59bb48ce017d3c546d7d9a18d782e341103e66c78081dd04544704e2196e529905c41c2550bca069b69f95f07c8 + languageName: node + linkType: hard + "min-indent@npm:^1.0.1": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -26164,6 +26307,36 @@ __metadata: languageName: node linkType: hard +"multicodec@npm:^0.5.5": + version: 0.5.7 + resolution: "multicodec@npm:0.5.7" + dependencies: + varint: "npm:^5.0.0" + checksum: b61bbf04e1bfff180f77693661b8111bf94f65580abc455e6d83d2240c227d8c2e8af99ca93b6c02500c5da43d16e2b028dbbec1b376a85145a774f542d9ca2c + languageName: node + linkType: hard + +"multicodec@npm:^1.0.0": + version: 1.0.4 + resolution: "multicodec@npm:1.0.4" + dependencies: + buffer: "npm:^5.6.0" + varint: "npm:^5.0.0" + checksum: 3a78ac54d3715e6b095a1805f63b4c4e7d5bb4642445691c0c4e6442cad9f97823469634e73ee362ba748596570db1050d69d5cc74a88928b1e9658916cdfbcd + languageName: node + linkType: hard + +"multihashes@npm:^0.4.15, multihashes@npm:~0.4.15": + version: 0.4.21 + resolution: "multihashes@npm:0.4.21" + dependencies: + buffer: "npm:^5.5.0" + multibase: "npm:^0.7.0" + varint: "npm:^5.0.0" + checksum: a482d9ba7ed0ad41db22ca589f228e4b7a30207a229a64dfc9888796752314fca00a8d03025fe40d6d73965bbb246f54b73626c5a235463e30c06c7bf7a8785f + languageName: node + linkType: hard + "multistream@npm:^4.1.0": version: 4.1.0 resolution: "multistream@npm:4.1.0" @@ -31222,6 +31395,17 @@ __metadata: languageName: node linkType: hard +"simple-get@npm:^2.7.0": + version: 2.8.2 + resolution: "simple-get@npm:2.8.2" + dependencies: + decompress-response: "npm:^3.3.0" + once: "npm:^1.3.1" + simple-concat: "npm:^1.0.0" + checksum: b827672695bbe504217311c47c6a106358babcfbf3d69c8d67ad56da40c2ed05185eec12538dfe3637e1cf0441bcd5931b022a84dc7f8f2d84969d595f7f7fda + languageName: node + linkType: hard + "simple-get@npm:^4.0.0": version: 4.0.1 resolution: "simple-get@npm:4.0.1" @@ -31649,28 +31833,7 @@ __metadata: languageName: node linkType: hard -"sshpk@npm:^1.14.1": - version: 1.17.0 - resolution: "sshpk@npm:1.17.0" - dependencies: - asn1: "npm:~0.2.3" - assert-plus: "npm:^1.0.0" - bcrypt-pbkdf: "npm:^1.0.0" - dashdash: "npm:^1.12.0" - ecc-jsbn: "npm:~0.1.1" - getpass: "npm:^0.1.1" - jsbn: "npm:~0.1.0" - safer-buffer: "npm:^2.0.2" - tweetnacl: "npm:~0.14.0" - bin: - sshpk-conv: bin/sshpk-conv - sshpk-sign: bin/sshpk-sign - sshpk-verify: bin/sshpk-verify - checksum: 668c2a279a6ce66fd739ce5684e37927dd75427cc020c828a208f85890a4c400705d4ba09f32fa44efca894339dc6931941664f6f6ba36dfa543de6d006cbe9c - languageName: node - linkType: hard - -"sshpk@npm:^1.7.0": +"sshpk@npm:^1.14.1, sshpk@npm:^1.7.0": version: 1.18.0 resolution: "sshpk@npm:1.18.0" dependencies: @@ -34686,7 +34849,7 @@ __metadata: languageName: node linkType: hard -"web3-utils@npm:1.10.3": +"web3-utils@npm:1.10.3, web3-utils@npm:^1.10.0": version: 1.10.3 resolution: "web3-utils@npm:1.10.3" dependencies: @@ -34702,21 +34865,6 @@ __metadata: languageName: node linkType: hard -"web3-utils@npm:^1.10.0": - version: 1.10.0 - resolution: "web3-utils@npm:1.10.0" - dependencies: - bn.js: "npm:^5.2.1" - ethereum-bloom-filters: "npm:^1.0.6" - ethereumjs-util: "npm:^7.1.0" - ethjs-unit: "npm:0.1.6" - number-to-bn: "npm:1.7.0" - randombytes: "npm:^2.1.0" - utf8: "npm:3.0.0" - checksum: 8766d5bafafe37a0c647c79ea1adf5782e90b8db71133a92e5e492d04af3be65c33562a22f5a29a303c034d1fa755d08a71bd83e3a3e236101bd0e13e75b31da - languageName: node - linkType: hard - "web3@npm:^1.9.0": version: 1.10.3 resolution: "web3@npm:1.10.3" @@ -35097,14 +35245,7 @@ __metadata: languageName: node linkType: hard -"whatwg-fetch@npm:^3.0.0": - version: 3.6.2 - resolution: "whatwg-fetch@npm:3.6.2" - checksum: f05ceff9e9098db228fee84b9f9258a434283c0eb3cd8183c8b22e25e32698a2f80ee8a9c1c634d5b1441fe7692a031812d8a1f21079da76892a5119be2ac945 - languageName: node - linkType: hard - -"whatwg-fetch@npm:^3.4.1": +"whatwg-fetch@npm:^3.0.0, whatwg-fetch@npm:^3.4.1": version: 3.6.20 resolution: "whatwg-fetch@npm:3.6.20" checksum: 2b4ed92acd6a7ad4f626a6cb18b14ec982bbcaf1093e6fe903b131a9c6decd14d7f9c9ca3532663c2759d1bdf01d004c77a0adfb2716a5105465c20755a8c57c