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"