Merge pull request #402 from lidofinance/develop

Merge Develop to Main

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 = () => (
-  <Box
-    id="nothingStaked"
-    display="flex"
-    flexDirection="column"
-    alignItems="center"
-    pt="32px"
-    pb="18px"
-  >
-    <Box textAlign="center" pb="12px">
-      You don&apos;t have staked tokens. Stake now and receive daily rewards.
-    </Box>
-    <LocalLink href={HOME_PATH}>
-      <Box width="150px">
-        <Button>Stake now</Button>
+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 (
+    <Box
+      id="nothingStaked"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      pt="32px"
+      pb="18px"
+    >
+      <Box textAlign="center" pb="12px">
+        {text}
       </Box>
-    </LocalLink>
-  </Box>
-);
+      <LocalLink href={HOME_PATH}>
+        {!hasSteth && (
+          <Box width="150px">
+            <Button>Stake now</Button>
+          </Box>
+        )}
+      </LocalLink>
+    </Box>
+  );
+};

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 <RewardsListsEmpty />;
   // showing loading when canceling requests and empty response
-  if ((!data && !error) || (initialLoading && !data?.events.length)) {
+  if (
+    (!data && !error) ||
+    (initialLoading && !data?.events.length) ||
+    isStethBalanceLoading
+  ) {
     return (
       <>
         <Divider indents="lg" />
@@ -42,7 +52,9 @@ export const RewardsListContent: FC = () => {
       </ErrorWrapper>
     );
   }
-  if (data && data.events.length === 0) return <ErrorBlockNoSteth />;
+
+  if (data && data.events.length === 0)
+    return <ErrorBlockNoSteth hasSteth={hasSteth} />;
 
   return (
     <TableWrapperStyle data-testid="rewardsContent">

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 {

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'};
   }
 `;

features/withdrawals/request/form/transaction-info.tsx

@@ -21,7 +21,7 @@ export const TransactionInfo = () => {
   const token = useWatch<RequestFormInputType, 'token'>({ 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({

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 = {

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 = {

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 && (
     <TxAmount amount={balance} symbol={balanceToken} />
@@ -50,7 +62,13 @@ export const TxStageOperationSucceedBalanceShown = ({
       title={
         <>
           Your new balance is <wbr />
-          {balance ? balanceEl : <SkeletonBalance />}
+          <BalanceContainer>
+            {balance ? balanceEl : <SkeletonBalance />}
+            <TokenToWallet
+              data-testid="txSuccessAddToken"
+              address={tokenToWalletAddress}
+            />
+          </BalanceContainer>
         </>
       }
       description={

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 (
     <Modal title="Account" onClose={onClose} {...props}>
       <WalletModalContentStyle>

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;

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"