From 90cfd8a3cd9eb5c37804f72007350557a811dfc4 Mon Sep 17 00:00:00 2001 From: Alexander Khramov Date: Mon, 1 Jul 2024 23:14:55 +0300 Subject: [PATCH 01/10] fix: close wallet-modal if a wallet was disconnected --- shared/wallet/wallet-modal/wallet-modal.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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 ( From 9c06ae21a3a1e0c888e453e73690bd8965d8e027 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 5 Jul 2024 09:12:36 +0000 Subject: [PATCH 02/10] build(deps): bump braces from 3.0.2 to 3.0.3 Bumps [braces](https://github.com/micromatch/braces) from 3.0.2 to 3.0.3. - [Changelog](https://github.com/micromatch/braces/blob/master/CHANGELOG.md) - [Commits](https://github.com/micromatch/braces/compare/3.0.2...3.0.3) --- updated-dependencies: - dependency-name: braces dependency-type: indirect ... Signed-off-by: dependabot[bot] --- yarn.lock | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4bd89b6a9..0c610ac33 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" From 5bab05377ec953fe9276660dc83c8e00d29e2445 Mon Sep 17 00:00:00 2001 From: Alexander Khramov Date: Wed, 10 Jul 2024 18:35:36 +0300 Subject: [PATCH 03/10] feat: add "add token" button after successful tx --- .../tx-stage-operation-succeed-balance-shown.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) 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..a5d3b6bdf 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', @@ -32,6 +35,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 && ( @@ -51,6 +58,10 @@ export const TxStageOperationSucceedBalanceShown = ({ <> Your new balance is {balance ? balanceEl : } + } description={ From 46e36c6fee927e8ce5c4d5dbd3d21d9e6b69806a Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Thu, 11 Jul 2024 13:55:33 +0700 Subject: [PATCH 04/10] fix: dex icon styles --- .../form/options/dex-options/styles.ts | 8 ++---- .../request/form/options/styles.tsx | 27 ++++++------------- styles/global.ts | 5 ++++ 3 files changed, 15 insertions(+), 25 deletions(-) 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..d18b30449 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,12 @@ 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'}; + /* match background on light but light up on dark theme */ + border-color: var(--custom-background-secondary-light); + background-color: var(--custom-background-secondary-light); 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/styles/global.ts b/styles/global.ts index 20c3b9444..f3cd2d40d 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,10 @@ const GlobalStyle = createGlobalStyle` --footer-mobile-padding-x: 20px; --footer-mobile-padding-y: 18px; --footer-mobile-margin-bottom: 60px; + + --custom-background-secondary-light: #F6F8FA; + --custom-background-secondary-dark: #2D2D35; + --custom-background-secondary: ${({ theme }) => (theme.name === ThemeName.light ? 'var(--custom-background-secondary-light)' : 'var(--custom-background-secondary-dark)')} ; } * { margin: 0; From cf8e5087a997ea47bf6201f2ef19b4aa065d31cd Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Thu, 11 Jul 2024 14:19:48 +0700 Subject: [PATCH 05/10] fix: change to unlock wording --- features/withdrawals/request/form/transaction-info.tsx | 2 +- .../transaction-modal-request/use-tx-modal-stages-request.tsx | 2 +- features/wsteth/wrap/hooks/use-tx-modal-stages-wrap.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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 = { From 51968f21a730ffa8b069698706a7559bc154c606 Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Thu, 11 Jul 2024 14:28:40 +0700 Subject: [PATCH 06/10] fix: case for no rewards yet --- .../errorBlocks/ErrorBlockNoSteth.tsx | 49 ++++++++++++------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx index c847ff84d..3c91106b7 100644 --- a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx +++ b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx @@ -1,23 +1,36 @@ +import { Zero } from '@ethersproject/constants'; +import { useSTETHBalance } from '@lido-sdk/react'; import { Box, Button } from '@lidofinance/lido-ui'; +import { STRATEGY_LAZY } from 'consts/swr-strategies'; 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. - - - - +export const ErrorBlockNoSteth = () => { + const { data } = useSTETHBalance(STRATEGY_LAZY); + const hasSteth = data?.gt(Zero); + 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 && ( + + + + )} + + + ); +}; From 633a95cabac2fab03b3f131240cdbc2a5584c10d Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Thu, 11 Jul 2024 17:35:18 +0700 Subject: [PATCH 07/10] fix: update by design --- features/withdrawals/request/form/options/styles.tsx | 5 ++--- styles/global.ts | 6 ++---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/features/withdrawals/request/form/options/styles.tsx b/features/withdrawals/request/form/options/styles.tsx index d18b30449..28b609345 100644 --- a/features/withdrawals/request/form/options/styles.tsx +++ b/features/withdrawals/request/form/options/styles.tsx @@ -165,9 +165,8 @@ export const OptionsPickerIcons = styled.div` height: 20px; border-radius: 100%; border: 1px solid; - /* match background on light but light up on dark theme */ - border-color: var(--custom-background-secondary-light); - background-color: var(--custom-background-secondary-light); + border-color: var(--custom-background-secondary); + background-color: var(--custom-background-secondary); margin: -1px 0 -1px -8px; &:first-child { margin-left: 0px; diff --git a/styles/global.ts b/styles/global.ts index f3cd2d40d..003086e78 100644 --- a/styles/global.ts +++ b/styles/global.ts @@ -23,10 +23,8 @@ const GlobalStyle = createGlobalStyle` --footer-mobile-padding-x: 20px; --footer-mobile-padding-y: 18px; --footer-mobile-margin-bottom: 60px; - - --custom-background-secondary-light: #F6F8FA; - --custom-background-secondary-dark: #2D2D35; - --custom-background-secondary: ${({ theme }) => (theme.name === ThemeName.light ? 'var(--custom-background-secondary-light)' : 'var(--custom-background-secondary-dark)')} ; + + --custom-background-secondary: ${({ theme }) => (theme.name === ThemeName.light ? '#F6F8FA' : '#2D2D35')} ; } * { margin: 0; From 7a7c9293e326bc5724572ec969e70909d316c24f Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Tue, 16 Jul 2024 13:15:53 +0700 Subject: [PATCH 08/10] fix: loading state --- .../components/errorBlocks/ErrorBlockNoSteth.tsx | 11 +++++------ .../rewardsListContent/RewardsListContent.tsx | 16 ++++++++++++++-- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx index 3c91106b7..f1d44e75d 100644 --- a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx +++ b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx @@ -1,13 +1,12 @@ -import { Zero } from '@ethersproject/constants'; -import { useSTETHBalance } from '@lido-sdk/react'; import { Box, Button } from '@lidofinance/lido-ui'; -import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { HOME_PATH } from 'consts/urls'; import { LocalLink } from 'shared/components/local-link'; -export const ErrorBlockNoSteth = () => { - const { data } = useSTETHBalance(STRATEGY_LAZY); - const hasSteth = data?.gt(Zero); +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."; 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 ( From e092409c792f1e186b0f405ca2187ccb23c63abd Mon Sep 17 00:00:00 2001 From: Evgeny Taktarov Date: Tue, 16 Jul 2024 13:46:15 +0700 Subject: [PATCH 09/10] fix: type --- features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx index f1d44e75d..65ee3b46f 100644 --- a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx +++ b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx @@ -3,7 +3,7 @@ import { HOME_PATH } from 'consts/urls'; import { LocalLink } from 'shared/components/local-link'; type ErrorBlockNoStethProps = { - hasSteth: boolean; + hasSteth?: boolean; }; export const ErrorBlockNoSteth = ({ hasSteth }: ErrorBlockNoStethProps) => { From 2a75db2d71485e5923564e3178d866f9bdabc64f Mon Sep 17 00:00:00 2001 From: Alexander Khramov Date: Tue, 16 Jul 2024 14:24:06 +0300 Subject: [PATCH 10/10] fix: add nowrap container for balance with "add token" button --- ...tx-stage-operation-succeed-balance-shown.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) 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 a5d3b6bdf..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 @@ -21,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; @@ -57,11 +62,13 @@ export const TxStageOperationSucceedBalanceShown = ({ title={ <> Your new balance is - {balance ? balanceEl : } - + + {balance ? balanceEl : } + + } description={