diff --git a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx index c847ff84d..65ee3b46f 100644 --- a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx +++ b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx @@ -2,22 +2,34 @@ import { Box, Button } from '@lidofinance/lido-ui'; import { HOME_PATH } from 'consts/urls'; import { LocalLink } from 'shared/components/local-link'; -export const ErrorBlockNoSteth = () => ( - - - You don't have staked tokens. Stake now and receive daily rewards. - - - - +type ErrorBlockNoStethProps = { + hasSteth?: boolean; +}; + +export const ErrorBlockNoSteth = ({ hasSteth }: ErrorBlockNoStethProps) => { + const text = hasSteth + ? "You haven't received rewards on your staked tokens yet. Please check back later to see your rewards." + : "You don't have staked tokens. Stake now and receive daily rewards."; + + return ( + + + {text} - - -); + + {!hasSteth && ( + + + + )} + + + ); +}; diff --git a/features/rewards/components/rewardsListContent/RewardsListContent.tsx b/features/rewards/components/rewardsListContent/RewardsListContent.tsx index a487d3e8d..e74523842 100644 --- a/features/rewards/components/rewardsListContent/RewardsListContent.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListContent.tsx @@ -11,6 +11,9 @@ import { ErrorWrapper, } from './RewardsListContentStyles'; import { RewardsTable } from 'features/rewards/components/rewardsTable'; +import { useSTETHBalance } from '@lido-sdk/react'; +import { STRATEGY_LAZY } from 'consts/swr-strategies'; +import { Zero } from '@ethersproject/constants'; export const RewardsListContent: FC = () => { const { @@ -22,10 +25,17 @@ export const RewardsListContent: FC = () => { setPage, isLagging, } = useRewardsHistory(); + const { data: stethBalance, initialLoading: isStethBalanceLoading } = + useSTETHBalance(STRATEGY_LAZY); + const hasSteth = stethBalance?.gt(Zero); if (!data && !initialLoading && !error) return ; // showing loading when canceling requests and empty response - if ((!data && !error) || (initialLoading && !data?.events.length)) { + if ( + (!data && !error) || + (initialLoading && !data?.events.length) || + isStethBalanceLoading + ) { return ( <> @@ -42,7 +52,9 @@ export const RewardsListContent: FC = () => { ); } - if (data && data.events.length === 0) return ; + + if (data && data.events.length === 0) + return ; return ( diff --git a/features/withdrawals/request/form/options/dex-options/styles.ts b/features/withdrawals/request/form/options/dex-options/styles.ts index 10100871f..9654808f3 100644 --- a/features/withdrawals/request/form/options/dex-options/styles.ts +++ b/features/withdrawals/request/form/options/dex-options/styles.ts @@ -59,9 +59,7 @@ export const DexOptionStyled = styled.div<{ $loading?: boolean }>` min-height: var(--itemHeight); max-height: var(--itemHeight); - // we need to update lido ui - background-color: ${({ theme }) => - theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'}; + background-color: var(--custom-background-secondary); border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; padding: 16px 20px; @@ -131,9 +129,7 @@ export const DexWarning = styled.div` padding: ${({ theme }) => theme.spaceMap.md}px; font-weight: 400; font-size: ${({ theme }) => theme.fontSizesMap.xs}px; - // we need to update lido ui - background-color: ${({ theme }) => - theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'}; + background-color: var(--custom-background-secondary); border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; svg { diff --git a/features/withdrawals/request/form/options/styles.tsx b/features/withdrawals/request/form/options/styles.tsx index 68bffb3d4..28b609345 100644 --- a/features/withdrawals/request/form/options/styles.tsx +++ b/features/withdrawals/request/form/options/styles.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { InlineLoader, ThemeName } from '@lidofinance/lido-ui'; +import { InlineLoader } from '@lidofinance/lido-ui'; import { FormatToken } from 'shared/formatters'; import Lido from 'assets/icons/lido.svg'; @@ -27,9 +27,8 @@ export const InlineLoaderSmall = styled(InlineLoader)` export const LidoOptionContainer = styled.div` width: 100%; min-height: 82px; - // we need to update lido ui - background-color: ${({ theme }) => - theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'}; + + background-color: var(--custom-background-secondary); border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; padding: 16px 20px; @@ -81,9 +80,8 @@ export const OptionsPickerButton = styled.button<{ $active?: boolean }>` gap: 4px; position: relative; cursor: pointer; - // we need to update lido ui - background-color: ${({ theme }) => - theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35'}; + + background-color: var(--custom-background-secondary); border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; border: ${({ $active }) => ($active ? '2' : '1')}px solid @@ -167,21 +165,11 @@ export const OptionsPickerIcons = styled.div` height: 20px; border-radius: 100%; border: 1px solid; - border-color: ${({ theme }) => - theme.name === ThemeName.light - ? 'var(--lido-color-backgroundSecondary)' - : '#F6F8FA'}; - background-color: ${({ theme }) => - theme.name === ThemeName.light - ? 'var(--lido-color-backgroundSecondary)' - : '#F6F8FA'}; + border-color: var(--custom-background-secondary); + background-color: var(--custom-background-secondary); margin: -1px 0 -1px -8px; &:first-child { margin-left: 0px; } - filter: ${({ theme }) => - theme.name === ThemeName.light - ? 'drop-shadow(0px 0px 1px rgba(246, 248, 250, 255))' - : 'unset'}; } `; diff --git a/features/withdrawals/request/form/transaction-info.tsx b/features/withdrawals/request/form/transaction-info.tsx index 866b466b8..995b806ae 100644 --- a/features/withdrawals/request/form/transaction-info.tsx +++ b/features/withdrawals/request/form/transaction-info.tsx @@ -21,7 +21,7 @@ export const TransactionInfo = () => { const token = useWatch({ name: 'token' }); const { requests } = useValidationResults(); const unlockCostTooltip = isApprovalFlow ? undefined : ( - <>Lido leverages gasless token approvals via ERC-2612 permits + <>Lido leverages gasless token unlocks via ERC-2612 permits ); const { txPriceUsd: requestTxPriceInUsd, loading: requestTxPriceLoading } = useRequestTxPrice({ diff --git a/features/withdrawals/request/transaction-modal-request/use-tx-modal-stages-request.tsx b/features/withdrawals/request/transaction-modal-request/use-tx-modal-stages-request.tsx index df86b7f12..a3c4ede82 100644 --- a/features/withdrawals/request/transaction-modal-request/use-tx-modal-stages-request.tsx +++ b/features/withdrawals/request/transaction-modal-request/use-tx-modal-stages-request.tsx @@ -17,7 +17,7 @@ import type { TokensWithdrawable } from 'features/withdrawals/types/tokens-withd const STAGE_APPROVE_ARGS = { willReceiveToken: 'wstETH', - operationText: 'Approving', + operationText: 'Unlocking', }; const STAGE_OPERATION_ARGS = { diff --git a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx index 6704fd014..b01d7698b 100644 --- a/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx +++ b/features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx @@ -13,7 +13,7 @@ import type { TokensWrappable } from 'features/wsteth/shared/types'; const STAGE_APPROVE_ARGS = { willReceiveToken: 'wstETH', - operationText: 'Approving', + operationText: 'Unlocking', }; const STAGE_OPERATION_ARGS = { diff --git a/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx b/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx index 6589234b7..6257acd68 100644 --- a/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx +++ b/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx @@ -1,5 +1,7 @@ import styled from 'styled-components'; +import { useTokenAddress } from '@lido-sdk/react'; +import { TOKENS } from '@lido-sdk/constants'; import { InlineLoader } from '@lidofinance/lido-ui'; import { L2AfterStake } from 'shared/banners/l2-banners/l2-after-stake'; import { L2AfterWrap } from 'shared/banners/l2-banners/l2-after-wrap'; @@ -10,6 +12,7 @@ import { TxStageSuccess } from '../tx-stages-basic'; import type { BigNumber } from 'ethers'; import { useFeatureFlag, VAULTS_BANNER_IS_ENABLED } from 'config/feature-flags'; +import { TokenToWallet } from '../../components'; export const SkeletonBalance = styled(InlineLoader).attrs({ color: 'text', @@ -18,6 +21,11 @@ export const SkeletonBalance = styled(InlineLoader).attrs({ width: 100px; `; +export const BalanceContainer = styled('div')` + display: inline-block; + white-space: nowrap; +`; + type TxStageOperationSucceedBalanceShownProps = { balance?: BigNumber; balanceToken: string; @@ -32,6 +40,10 @@ export const TxStageOperationSucceedBalanceShown = ({ txHash, }: TxStageOperationSucceedBalanceShownProps) => { const { vaultsBannerIsEnabled } = useFeatureFlag(VAULTS_BANNER_IS_ENABLED); + const stethAddress = useTokenAddress(TOKENS.STETH); + const wstethAddress = useTokenAddress(TOKENS.WSTETH); + const tokenToWalletAddress = + balanceToken === 'wstETH' ? wstethAddress : stethAddress; const balanceEl = balance && ( @@ -50,7 +62,13 @@ export const TxStageOperationSucceedBalanceShown = ({ title={ <> Your new balance is - {balance ? balanceEl : } + + {balance ? balanceEl : } + + } description={ diff --git a/shared/wallet/wallet-modal/wallet-modal.tsx b/shared/wallet/wallet-modal/wallet-modal.tsx index 33361423b..4433fd70a 100644 --- a/shared/wallet/wallet-modal/wallet-modal.tsx +++ b/shared/wallet/wallet-modal/wallet-modal.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useEffect } from 'react'; import { ButtonIcon, Modal, @@ -36,6 +36,13 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => { const handleCopy = useCopyToClipboard(account ?? ''); const handleEtherscan = useEtherscanOpen(account ?? '', 'address'); + useEffect(() => { + // Close the modal if a wallet was somehow disconnected while the modal was open + if (account == null || account.length === 0) { + onClose?.(); + } + }, [account, onClose]); + return ( diff --git a/styles/global.ts b/styles/global.ts index 20c3b9444..003086e78 100644 --- a/styles/global.ts +++ b/styles/global.ts @@ -1,6 +1,7 @@ import { createGlobalStyle } from 'styled-components'; import { NAV_MOBILE_HEIGHT, NAV_MOBILE_MAX_WIDTH } from './constants'; +import { ThemeName } from '@lidofinance/lido-ui'; export const devicesHeaderMedia = { mobile: `screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`, @@ -22,6 +23,8 @@ const GlobalStyle = createGlobalStyle` --footer-mobile-padding-x: 20px; --footer-mobile-padding-y: 18px; --footer-mobile-margin-bottom: 60px; + + --custom-background-secondary: ${({ theme }) => (theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35')} ; } * { margin: 0; diff --git a/yarn.lock b/yarn.lock index 949405e8e..50be98e6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4635,11 +4635,11 @@ brace-expansion@^2.0.1: balanced-match "^1.0.0" braces@^3.0.2, braces@~3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" - integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + version "3.0.3" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== dependencies: - fill-range "^7.0.1" + fill-range "^7.1.1" brorand@^1.1.0: version "1.1.0" @@ -6260,10 +6260,10 @@ file-entry-cache@^6.0.1: dependencies: flat-cache "^3.0.4" -fill-range@^7.0.1: - version "7.0.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" - integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== +fill-range@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== dependencies: to-regex-range "^5.0.1"