From 26a32c8b50a678f911f15c8436b6d856c14113d9 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Mon, 24 Jun 2024 16:36:33 +0300 Subject: [PATCH 01/74] feat: l2 fallback banner --- assets/icons/l2/arbitrum.svg | 14 ++++++ assets/icons/l2/base.svg | 11 +++++ assets/icons/l2/linea.svg | 17 +++++++ assets/icons/l2/mantle.svg | 12 +++++ assets/icons/l2/optimism.svg | 5 ++ assets/icons/l2/polygon.svg | 4 ++ assets/icons/l2/zk-sync.svg | 5 ++ consts/chains.ts | 13 ++++- features/stake/stake-form/wallet/wallet.tsx | 17 ++++++- shared/wallet/fallback/fallback.tsx | 23 ++++++++- shared/wallet/fallback/styles.tsx | 16 +++++- shared/wallet/index.ts | 1 + shared/wallet/l2-fallback/l2-fallback.tsx | 54 +++++++++++++++++++++ shared/wallet/l2-fallback/styles.tsx | 26 ++++++++++ 14 files changed, 212 insertions(+), 6 deletions(-) create mode 100644 assets/icons/l2/arbitrum.svg create mode 100644 assets/icons/l2/base.svg create mode 100644 assets/icons/l2/linea.svg create mode 100644 assets/icons/l2/mantle.svg create mode 100644 assets/icons/l2/optimism.svg create mode 100644 assets/icons/l2/polygon.svg create mode 100644 assets/icons/l2/zk-sync.svg create mode 100644 shared/wallet/l2-fallback/l2-fallback.tsx create mode 100644 shared/wallet/l2-fallback/styles.tsx diff --git a/assets/icons/l2/arbitrum.svg b/assets/icons/l2/arbitrum.svg new file mode 100644 index 000000000..3b4d831a4 --- /dev/null +++ b/assets/icons/l2/arbitrum.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/icons/l2/base.svg b/assets/icons/l2/base.svg new file mode 100644 index 000000000..27d083313 --- /dev/null +++ b/assets/icons/l2/base.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/l2/linea.svg b/assets/icons/l2/linea.svg new file mode 100644 index 000000000..75135857b --- /dev/null +++ b/assets/icons/l2/linea.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/icons/l2/mantle.svg b/assets/icons/l2/mantle.svg new file mode 100644 index 000000000..92169d785 --- /dev/null +++ b/assets/icons/l2/mantle.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/icons/l2/optimism.svg b/assets/icons/l2/optimism.svg new file mode 100644 index 000000000..b46c370c4 --- /dev/null +++ b/assets/icons/l2/optimism.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/l2/polygon.svg b/assets/icons/l2/polygon.svg new file mode 100644 index 000000000..655884007 --- /dev/null +++ b/assets/icons/l2/polygon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/l2/zk-sync.svg b/assets/icons/l2/zk-sync.svg new file mode 100644 index 000000000..15961c14f --- /dev/null +++ b/assets/icons/l2/zk-sync.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/consts/chains.ts b/consts/chains.ts index 2b2a5f95c..be5a2ff5a 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -1,5 +1,16 @@ -export const enum CHAINS { +export enum CHAINS { Mainnet = 1, Goerli = 5, Holesky = 17000, } + +export enum L2_CHAINS { + zkSync = 324, + Optimism = 10, + Arbitrum_One = 42161, + Arbitrum_Nova = 42170, + Polygon_PoS = 137, + Base = 8453, + Mantle = 5000, + Linea = 59144, +} diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index 3e62d2f40..0884c7259 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -4,11 +4,18 @@ import { TOKENS } from '@lido-sdk/constants'; import { useSDK, useTokenAddress } from '@lido-sdk/react'; import { Divider, Question, Tooltip } from '@lidofinance/lido-ui'; +import { L2_CHAINS } from 'consts/chains'; import { LIDO_APR_TOOLTIP_TEXT, DATA_UNAVAILABLE } from 'consts/text'; import { TokenToWallet } from 'shared/components'; import { FormatToken } from 'shared/formatters'; import { useLidoApr } from 'shared/hooks'; -import { CardAccount, CardBalance, CardRow, Fallback } from 'shared/wallet'; +import { + CardAccount, + CardBalance, + CardRow, + Fallback, + L2Fallback, +} from 'shared/wallet'; import type { WalletComponentType } from 'shared/wallet/types'; import { LimitMeter } from './limit-meter'; @@ -88,6 +95,12 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { active } = useWeb3(); + const { chainId, active } = useWeb3(); + + // The widget currently doesn't support L2 networks so there is no point in checking `active from useWeb3()` first + if (Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1) { + return ; + } + return active ? : ; }); diff --git a/shared/wallet/fallback/fallback.tsx b/shared/wallet/fallback/fallback.tsx index 7ca753479..6782b2517 100644 --- a/shared/wallet/fallback/fallback.tsx +++ b/shared/wallet/fallback/fallback.tsx @@ -1,12 +1,31 @@ +import { useSDK } from '@lido-sdk/react'; +import { CHAINS } from 'consts/chains'; import { WalletCardComponent } from 'shared/wallet/card/types'; -import { FallbackWalletStyle } from './styles'; +import { FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; import { useErrorMessage } from './useErrorMessage'; export const Fallback: WalletCardComponent = (props) => { const error = useErrorMessage(); + const { supportedChainIds } = useSDK(); + + // Show mainnet if there is in supportedChainIds + let switchToChain; + if (supportedChainIds.length === 0 || supportedChainIds.indexOf(1) > -1) { + switchToChain = 'Mainnet'; + } else { + switchToChain = + Object.keys(CHAINS)[ + Object.values(CHAINS).indexOf(supportedChainIds[0] as unknown as CHAINS) + ]; + } if (error) { - return {error}; + return ( + + {error} + Switch to {switchToChain} + + ); } return null; diff --git a/shared/wallet/fallback/styles.tsx b/shared/wallet/fallback/styles.tsx index b38f8a30e..b1e0e7ce8 100644 --- a/shared/wallet/fallback/styles.tsx +++ b/shared/wallet/fallback/styles.tsx @@ -1,8 +1,22 @@ +import { Button } from '@lidofinance/lido-ui'; import { Card } from 'shared/wallet'; import styled from 'styled-components'; export const FallbackWalletStyle = styled((props) => )` text-align: center; - background: var(--lido-color-error); + background: #7a8aa0; background-image: none !important; `; + +export const TextStyle = styled.p` + margin-bottom: 16px; +`; + +export const ButtonStyle = styled((props) => + + ); +}; diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index d54c4ac36..d5fa43c47 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -1,35 +1,24 @@ import { FC } from 'react'; -import { Block, ThemeProvider, themeDark } from '@lidofinance/lido-ui'; -import { InputDescription } from 'features/rewards/components/inputDescription'; -import { AddressInput } from 'features/rewards/components/addressInput'; +import { useWeb3 } from 'reef-knot/web3-react'; +import { useAccount } from 'wagmi'; + import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; -import { InputWrapper } from 'features/rewards/components/inputWrapper'; -import { useRewardsHistory } from 'features/rewards/hooks'; +import { Fallback } from 'shared/wallet'; -const INPUT_DESC_TEXT = - 'Current balance may differ from last balance in the table due to rounding.'; +import { Wallet } from './wallet'; +import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { address, isAddressResolving, inputValue, setInputValue } = - useRewardsHistory(); + const { address } = useAccount(); + const { active } = useWeb3(); return ( - - - - - {INPUT_DESC_TEXT} - - + <> + {address ? active ? : : } - + ); }; diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx new file mode 100644 index 000000000..d30bbc4b0 --- /dev/null +++ b/features/rewards/features/top-card/wallet.tsx @@ -0,0 +1,44 @@ +import { FC } from 'react'; +import styled from 'styled-components'; +import { ThemeProvider, themeDark } from '@lidofinance/lido-ui'; + +import { InputDescription } from 'features/rewards/components/inputDescription'; +import { AddressInput } from 'features/rewards/components/addressInput'; +import { InputWrapper } from 'features/rewards/components/inputWrapper'; +import { useRewardsHistory } from 'features/rewards/hooks'; + +import { WalletCardStyle } from 'shared/wallet/card/styles'; + +const INPUT_DESC_TEXT = + 'Current balance may differ from last balance in the table due to rounding.'; + +const WalletStyle = styled(WalletCardStyle)` + background: linear-gradient( + 52.01deg, + #37394a 0%, + #363749 0.01%, + #40504f 100% + ); + padding: 0 0 24px 0; +`; + +export const Wallet: FC = () => { + const { address, isAddressResolving, inputValue, setInputValue } = + useRewardsHistory(); + + return ( + + + + + {INPUT_DESC_TEXT} + + + + ); +}; diff --git a/pages/rewards.tsx b/pages/rewards.tsx index f48f377e2..19d473e67 100644 --- a/pages/rewards.tsx +++ b/pages/rewards.tsx @@ -4,7 +4,6 @@ import Head from 'next/head'; import { Layout } from 'shared/components'; import { TopCard, RewardsList } from 'features/rewards/features'; import RewardsHistoryProvider from 'providers/rewardsHistory'; -import { Fallback } from 'shared/wallet'; import { GoerliSunsetBanner } from 'shared/banners/goerli-sunset'; const Rewards: FC = () => { @@ -23,7 +22,6 @@ const Rewards: FC = () => { /> - From c52e5e362b346393ff6ba4dafa78cb78f581961e Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 4 Jul 2024 11:09:45 +0300 Subject: [PATCH 13/74] feat(rewards top-card): connect handler --- .../features/top-card/connect-wallet.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/features/rewards/features/top-card/connect-wallet.tsx b/features/rewards/features/top-card/connect-wallet.tsx index 15c831c06..c95f35030 100644 --- a/features/rewards/features/top-card/connect-wallet.tsx +++ b/features/rewards/features/top-card/connect-wallet.tsx @@ -1,7 +1,11 @@ -import { FC } from 'react'; +import { FC, useCallback } from 'react'; import styled from 'styled-components'; +import { useConnect } from 'reef-knot/core-react'; import { Button } from '@lidofinance/lido-ui'; +import { wrapWithEventTrack } from '@lidofinance/analytics-matomo'; +import { useUserConfig } from 'config/user-config'; +import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; import { WalletCardStyle } from 'shared/wallet/card/styles'; const ConnectWalletStyle = styled(WalletCardStyle)` @@ -19,10 +23,27 @@ const ConnectWalletStyle = styled(WalletCardStyle)` `; export const ConnectWallet: FC = () => { + const { isWalletConnectionAllowed } = useUserConfig(); + const { connect } = useConnect(); + + const handleClick = wrapWithEventTrack( + MATOMO_CLICK_EVENTS.connectWallet, + useCallback(() => { + if (!isWalletConnectionAllowed) return; + void connect(); + }, [isWalletConnectionAllowed, connect]), + ); + return (

Connect your wallet to view staking stats

- From c6bbc013d27ba0267b4ccd459d248d59b5278268 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 4 Jul 2024 11:16:47 +0300 Subject: [PATCH 14/74] feat: additional checks --- shared/hooks/use-chain-id-without-account.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/shared/hooks/use-chain-id-without-account.ts b/shared/hooks/use-chain-id-without-account.ts index a935f0e4f..ffdc7f330 100644 --- a/shared/hooks/use-chain-id-without-account.ts +++ b/shared/hooks/use-chain-id-without-account.ts @@ -11,9 +11,12 @@ export const useChainIdWithoutAccount = () => { if (!checkWindowDotEthereum()) return; try { - const chainIdHex = await window.ethereum.request({ + const chainIdHex = await window?.ethereum?.request({ method: 'eth_chainId', }); + + if (!chainIdHex) return; + const chainId = parseInt(chainIdHex, 16); setChainId(chainId); } catch { @@ -24,20 +27,22 @@ export const useChainIdWithoutAccount = () => { void fetchChainId(); // Handler for chain changes - const handleChainChanged = (chainIdHex) => { + const handleChainChanged = (chainIdHex?: string | null | undefined) => { + if (!chainIdHex) return; + const chainId = parseInt(chainIdHex, 16); setChainId(chainId); }; if (checkWindowDotEthereum()) { - window.ethereum.on('chainChanged', handleChainChanged); + window?.ethereum?.on('chainChanged', handleChainChanged); } // Cleanup listener on component unmount return () => { if (!checkWindowDotEthereum()) return; - window.ethereum.removeListener('chainChanged', handleChainChanged); + window?.ethereum?.removeListener('chainChanged', handleChainChanged); }; }, []); From 2c24e5e1ac6e2c58aa82e69702a358286f69a4b9 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 4 Jul 2024 11:21:44 +0300 Subject: [PATCH 15/74] feat(rewards): add addressError to AddressInput --- features/rewards/features/top-card/wallet.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx index d30bbc4b0..a53bde21d 100644 --- a/features/rewards/features/top-card/wallet.tsx +++ b/features/rewards/features/top-card/wallet.tsx @@ -23,8 +23,13 @@ const WalletStyle = styled(WalletCardStyle)` `; export const Wallet: FC = () => { - const { address, isAddressResolving, inputValue, setInputValue } = - useRewardsHistory(); + const { + address, + addressError, + isAddressResolving, + inputValue, + setInputValue, + } = useRewardsHistory(); return ( @@ -32,6 +37,7 @@ export const Wallet: FC = () => { Date: Thu, 4 Jul 2024 11:29:32 +0300 Subject: [PATCH 16/74] feat(l2 chains): only Arbitrum_One --- consts/chains.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/consts/chains.ts b/consts/chains.ts index be5a2ff5a..eacf1bf0b 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -7,8 +7,9 @@ export enum CHAINS { export enum L2_CHAINS { zkSync = 324, Optimism = 10, - Arbitrum_One = 42161, - Arbitrum_Nova = 42170, + // Arbitrum_One = 42161, + // Arbitrum_Nova = 42170, + Arbitrum = 42161, Polygon_PoS = 137, Base = 8453, Mantle = 5000, From b8a085d8f367b16ab17e540abe96d9fc4324e0f8 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 4 Jul 2024 11:37:44 +0300 Subject: [PATCH 17/74] fix: l2 logos --- shared/wallet/l2-fallback/l2-fallback.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 45f1b0c7a..aaee2f114 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -16,8 +16,9 @@ import { WalletCardComponent } from 'shared/wallet/card/types'; import { L2FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; const l2Logos = { - [L2_CHAINS.Arbitrum_Nova]: ArbitrumLogo, - [L2_CHAINS.Arbitrum_One]: ArbitrumLogo, + // [L2_CHAINS.Arbitrum_Nova]: ArbitrumLogo, + // [L2_CHAINS.Arbitrum_One]: ArbitrumLogo, + [L2_CHAINS.Arbitrum]: ArbitrumLogo, [L2_CHAINS.Base]: BaseLogo, [L2_CHAINS.Linea]: LineaLogo, [L2_CHAINS.Mantle]: MantleLogo, From 70434c3ae048dc1ba9196099c4da2a4ef49de31e Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 4 Jul 2024 14:30:45 +0300 Subject: [PATCH 18/74] fix(@playwright): tests --- test/pages/widget.page.ts | 6 +++--- test/widget.spec.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/pages/widget.page.ts b/test/pages/widget.page.ts index a26393e30..a6cf9b2b1 100644 --- a/test/pages/widget.page.ts +++ b/test/pages/widget.page.ts @@ -4,14 +4,14 @@ import { HOME_PATH } from 'consts/urls'; export class WidgetPage { readonly page: Page; readonly title: Locator; - readonly connectWalletButton: Locator; + readonly stakeFormButton: Locator; readonly lidoStatistic: Locator; constructor(page: Page) { this.page = page; this.title = this.page.locator('h1', { hasText: 'Stake Ether' }); - this.connectWalletButton = this.page.locator('main button', { - hasText: 'Connect wallet', + this.stakeFormButton = this.page.locator('main button', { + hasText: /^(Connect wallet|Unsupported chain)$/, }); this.lidoStatistic = this.page.locator('section', { hasText: 'Lido statistic', diff --git a/test/widget.spec.ts b/test/widget.spec.ts index 904ab43a5..1568e2c2a 100644 --- a/test/widget.spec.ts +++ b/test/widget.spec.ts @@ -5,6 +5,6 @@ import { WidgetPage } from './pages/widget.page.js'; test('widget page should contain info', async ({ page }) => { const widgetPage = new WidgetPage(page); await widgetPage.goto(); - await expect(widgetPage.connectWalletButton).toBeVisible(); + await expect(widgetPage.stakeFormButton).toBeVisible(); expect(await widgetPage.lidoStatistic.textContent()).not.toContain('N/A'); }); From 0616ceeab5c80a88a332661e44e6c03df00df745 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 4 Jul 2024 14:31:34 +0300 Subject: [PATCH 19/74] fix(forms): show 'connect button' in forms --- .../controls/submit-button-hook-form.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/shared/hook-form/controls/submit-button-hook-form.tsx b/shared/hook-form/controls/submit-button-hook-form.tsx index 2d6458994..e44a9575e 100644 --- a/shared/hook-form/controls/submit-button-hook-form.tsx +++ b/shared/hook-form/controls/submit-button-hook-form.tsx @@ -1,8 +1,11 @@ import { useWeb3 } from 'reef-knot/web3-react'; import { useFormState } from 'react-hook-form'; - import { ButtonIcon, Lock } from '@lidofinance/lido-ui'; -import { UnsupportedChainButton } from 'shared/wallet'; + +import { config } from 'config'; +import { Connect, UnsupportedChainButton } from 'shared/wallet'; +import { useChainIdWithoutAccount } from 'shared/hooks/use-chain-id-without-account'; + import { isValidationErrorTypeValidate } from '../validation/validation-error'; type SubmitButtonHookFormProps = Partial< @@ -19,6 +22,7 @@ export const SubmitButtonHookForm: React.FC = ({ disabled: disabledProp, ...props }) => { + const chainId = useChainIdWithoutAccount(); const { active } = useWeb3(); const { isValidating, isSubmitting } = useFormState(); const { errors } = useFormState>(); @@ -28,7 +32,13 @@ export const SubmitButtonHookForm: React.FC = ({ isValidationErrorTypeValidate(errors[errorField]?.type)) || disabledProp; - if (!active) return ; + if (!active) { + if (chainId && config.supportedChains.indexOf(chainId) > -1) { + return ; + } + + return ; + } return ( Date: Thu, 4 Jul 2024 14:35:19 +0300 Subject: [PATCH 20/74] fix(connect button): fullwidth --- shared/hook-form/controls/submit-button-hook-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/hook-form/controls/submit-button-hook-form.tsx b/shared/hook-form/controls/submit-button-hook-form.tsx index e44a9575e..cb6a9bdba 100644 --- a/shared/hook-form/controls/submit-button-hook-form.tsx +++ b/shared/hook-form/controls/submit-button-hook-form.tsx @@ -34,7 +34,7 @@ export const SubmitButtonHookForm: React.FC = ({ if (!active) { if (chainId && config.supportedChains.indexOf(chainId) > -1) { - return ; + return ; } return ; From 6b38c510addae73464ec9b65d0992645663acb67 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 5 Jul 2024 10:45:46 +0300 Subject: [PATCH 21/74] feat(fallback): remove 'switch to mainnet' button --- shared/wallet/fallback/fallback.tsx | 26 +------------------------- shared/wallet/fallback/styles.tsx | 14 +------------- 2 files changed, 2 insertions(+), 38 deletions(-) diff --git a/shared/wallet/fallback/fallback.tsx b/shared/wallet/fallback/fallback.tsx index f3283eff6..1ab6c72ed 100644 --- a/shared/wallet/fallback/fallback.tsx +++ b/shared/wallet/fallback/fallback.tsx @@ -1,39 +1,15 @@ -import { useSwitchChain } from 'wagmi'; -import { mainnet } from '@wagmi/core/chains'; -import { useSDK } from '@lido-sdk/react'; - -import { CHAINS } from 'consts/chains'; import { WalletCardComponent } from 'shared/wallet/card/types'; -import { FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; +import { FallbackWalletStyle, TextStyle } from './styles'; import { useErrorMessage } from './useErrorMessage'; export const Fallback: WalletCardComponent = (props) => { const error = useErrorMessage(); - const { supportedChainIds } = useSDK(); - const { switchChain } = useSwitchChain(); - - // Show mainnet if there is in supportedChainIds - let switchToChain; - if (supportedChainIds.length === 0 || supportedChainIds.indexOf(1) > -1) { - switchToChain = 'Mainnet'; - } else { - switchToChain = - Object.keys(CHAINS)[ - Object.values(CHAINS).indexOf(supportedChainIds[0] as unknown as CHAINS) - ]; - } if (error) { return ( {error} - switchChain({ chainId: mainnet.id })} - > - Switch to {switchToChain} - ); } diff --git a/shared/wallet/fallback/styles.tsx b/shared/wallet/fallback/styles.tsx index b1e0e7ce8..53d167495 100644 --- a/shared/wallet/fallback/styles.tsx +++ b/shared/wallet/fallback/styles.tsx @@ -1,4 +1,3 @@ -import { Button } from '@lidofinance/lido-ui'; import { Card } from 'shared/wallet'; import styled from 'styled-components'; @@ -8,15 +7,4 @@ export const FallbackWalletStyle = styled((props) => )` background-image: none !important; `; -export const TextStyle = styled.p` - margin-bottom: 16px; -`; - -export const ButtonStyle = styled((props) => + + Connect your wallet to view staking stats + + ); }; From 10b6636ea4a57dd5e390c5a7c8fc36efa74de1b2 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 5 Jul 2024 11:01:52 +0300 Subject: [PATCH 23/74] feat: disabled forms for unsupported chains --- .../request/form/controls/token-amount-input-request.tsx | 8 ++++++-- .../request/form/controls/token-select-request.tsx | 5 ++++- .../unwrap/unwrap-form-controls/amount-input-unwrap.tsx | 9 ++++++--- .../wrap/wrap-form-controls/token-amount-input-wrap.tsx | 6 +++++- .../wsteth/wrap/wrap-form-controls/token-select-wrap.tsx | 5 +++++ shared/hook-form/controls/token-select-hook-form.tsx | 2 ++ 6 files changed, 28 insertions(+), 7 deletions(-) diff --git a/features/withdrawals/request/form/controls/token-amount-input-request.tsx b/features/withdrawals/request/form/controls/token-amount-input-request.tsx index 7bdcefd82..b3b6696b0 100644 --- a/features/withdrawals/request/form/controls/token-amount-input-request.tsx +++ b/features/withdrawals/request/form/controls/token-amount-input-request.tsx @@ -1,8 +1,7 @@ import { useController, useWatch } from 'react-hook-form'; +import { useWeb3 } from 'reef-knot/web3-react'; import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events'; -import { trackMatomoEvent } from 'utils/track-matomo-event'; -import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; import { InputDecoratorTvlStake } from 'features/withdrawals/shared/input-decorator-tvl-stake'; import { RequestFormInputType, @@ -10,7 +9,11 @@ import { } from 'features/withdrawals/request/request-form-context'; import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage'; +import { trackMatomoEvent } from 'utils/track-matomo-event'; +import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; + export const TokenAmountInputRequest = () => { + const { active } = useWeb3(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); @@ -24,6 +27,7 @@ export const TokenAmountInputRequest = () => { return ( { - return ; + const { active } = useWeb3(); + + return ; }; diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx index e8f941b2a..022046cf6 100644 --- a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx +++ b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx @@ -1,14 +1,17 @@ -import { useUnwrapFormData } from '../unwrap-form-context'; - import { Wsteth } from '@lidofinance/lido-ui'; -import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; import { TOKENS } from '@lido-sdk/constants'; +import { useWeb3 } from 'reef-knot/web3-react'; + +import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; +import { useUnwrapFormData } from '../unwrap-form-context'; export const TokenAmountInputUnwrap = () => { + const { active } = useWeb3(); const { maxAmount } = useUnwrapFormData(); return ( , 'warning' >; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { + const { active } = useWeb3(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); return ( ; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { + const { active } = useWeb3(); + return ( { trackEvent( diff --git a/shared/hook-form/controls/token-select-hook-form.tsx b/shared/hook-form/controls/token-select-hook-form.tsx index b0c12844f..357139940 100644 --- a/shared/hook-form/controls/token-select-hook-form.tsx +++ b/shared/hook-form/controls/token-select-hook-form.tsx @@ -47,6 +47,7 @@ export const TokenSelectHookForm = ({ errorField = 'amount', onChange, warning, + disabled = false, }: TokenSelectHookFormProps) => { const { field } = useController>({ name: fieldName }); const { setValue, clearErrors } = useFormContext(); @@ -58,6 +59,7 @@ export const TokenSelectHookForm = ({ return ( Date: Fri, 5 Jul 2024 11:24:28 +0300 Subject: [PATCH 24/74] fix: types --- shared/hook-form/controls/token-select-hook-form.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/shared/hook-form/controls/token-select-hook-form.tsx b/shared/hook-form/controls/token-select-hook-form.tsx index 357139940..a1c05c550 100644 --- a/shared/hook-form/controls/token-select-hook-form.tsx +++ b/shared/hook-form/controls/token-select-hook-form.tsx @@ -38,6 +38,7 @@ type TokenSelectHookFormProps = { errorField?: string; onChange?: (value: TOKENS) => void; warning?: boolean; + disabled?: boolean; }; export const TokenSelectHookForm = ({ From 1572c309416befa55c9264203a2e33aee481f58f Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 9 Jul 2024 17:49:55 +0300 Subject: [PATCH 25/74] feat: add useIsSupportedChain and useIsConnectedWalletAndSupportedChain --- .../use-is-connected-wallet-and-supported-chain.ts | 14 ++++++++++++++ shared/hooks/use-is-supported-chain.ts | 14 ++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 shared/hooks/use-is-connected-wallet-and-supported-chain.ts create mode 100644 shared/hooks/use-is-supported-chain.ts diff --git a/shared/hooks/use-is-connected-wallet-and-supported-chain.ts b/shared/hooks/use-is-connected-wallet-and-supported-chain.ts new file mode 100644 index 000000000..b9511208d --- /dev/null +++ b/shared/hooks/use-is-connected-wallet-and-supported-chain.ts @@ -0,0 +1,14 @@ +import { useMemo } from 'react'; +import { useAccount } from 'wagmi'; +import { useUserConfig } from 'config/user-config'; + +export const useIsConnectedWalletAndSupportedChain = () => { + const { chainId, isConnected } = useAccount(); + const { supportedChainIds } = useUserConfig(); + + return useMemo(() => { + if (!chainId) return false; + + return isConnected && supportedChainIds.indexOf(chainId) > -1; + }, [chainId, isConnected, supportedChainIds]); +}; diff --git a/shared/hooks/use-is-supported-chain.ts b/shared/hooks/use-is-supported-chain.ts new file mode 100644 index 000000000..dad5301ad --- /dev/null +++ b/shared/hooks/use-is-supported-chain.ts @@ -0,0 +1,14 @@ +import { useMemo } from 'react'; +import { useAccount } from 'wagmi'; +import { useUserConfig } from 'config/user-config'; + +export const useIsSupportedChain = () => { + const { chainId } = useAccount(); + const { supportedChainIds } = useUserConfig(); + + return useMemo(() => { + if (!chainId) return false; + + return supportedChainIds.indexOf(chainId) > -1; + }, [chainId, supportedChainIds]); +}; From f0595232d9600393d4deefd66d06b8105ac5e8d6 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 9 Jul 2024 17:50:39 +0300 Subject: [PATCH 26/74] refactor: l2 wallet fallback --- shared/wallet/l2-fallback/l2-fallback.tsx | 25 ++++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index aaee2f114..2fc0233e9 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react'; import { useAccount } from 'wagmi'; import { Link } from '@lidofinance/lido-ui'; @@ -9,8 +10,9 @@ import { ReactComponent as OptimismLogo } from 'assets/icons/l2/optimism.svg'; import { ReactComponent as PolygonLogo } from 'assets/icons/l2/polygon.svg'; import { ReactComponent as ZkSyncLogo } from 'assets/icons/l2/zk-sync.svg'; +import { useUserConfig } from 'config/user-config'; +import { CHAINS } from 'consts/chains'; import { L2_CHAINS } from 'consts/chains'; -import { useChainIdWithoutAccount } from 'shared/hooks/use-chain-id-without-account'; import { WalletCardComponent } from 'shared/wallet/card/types'; import { L2FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; @@ -33,22 +35,25 @@ const getL2Logo = (chainId: L2_CHAINS) => { }; export const L2Fallback: WalletCardComponent = (props) => { - const chainIdWithoutAccount = useChainIdWithoutAccount(); - const { chainId: accountChainId } = useAccount(); + const { chainId } = useAccount(); + const { defaultChain } = useUserConfig(); - const _chainId = accountChainId || chainIdWithoutAccount; + const defaultChainName = useMemo(() => { + return CHAINS[defaultChain]; + }, [defaultChain]); - const network = - Object.keys(L2_CHAINS)[ - Object.values(L2_CHAINS).indexOf(_chainId as unknown as L2_CHAINS) + const chainName = useMemo(() => { + return Object.keys(L2_CHAINS)[ + Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) ]; + }, [chainId]); return ( - {getL2Logo(_chainId as unknown as L2_CHAINS)} + {getL2Logo(chainId as unknown as L2_CHAINS)} - Learn about Lido on L2 opportunities on {network} network or switch to - Ethereum mainnet to stake + Learn about Lido on L2 opportunities on {chainName} network or switch to + Ethereum {defaultChainName} to stake Date: Tue, 9 Jul 2024 17:55:36 +0300 Subject: [PATCH 27/74] refactor: remove chainIdWithoutAccount and useWeb3 --- .../controls/stake-amount-input.tsx | 8 ++--- features/stake/stake-form/wallet/wallet.tsx | 26 +++++++++------- .../withdrawals/claim/form/submit-button.tsx | 22 +++++++++----- features/withdrawals/claim/wallet/wallet.tsx | 30 +++++++++++-------- .../controls/token-amount-input-request.tsx | 6 ++-- .../form/controls/token-select-request.tsx | 6 ++-- .../withdrawals/request/wallet/wallet.tsx | 29 +++++++++++------- features/wsteth/shared/wallet/wallet.tsx | 25 +++++++++------- .../amount-input-unwrap.tsx | 8 +++-- .../token-amount-input-wrap.tsx | 6 ++-- .../wrap-form-controls/token-select-wrap.tsx | 6 ++-- .../controls/submit-button-hook-form.tsx | 26 ++++++++-------- 12 files changed, 116 insertions(+), 82 deletions(-) diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/features/stake/stake-form/controls/stake-amount-input.tsx index 3fbebe360..908cf71bc 100644 --- a/features/stake/stake-form/controls/stake-amount-input.tsx +++ b/features/stake/stake-form/controls/stake-amount-input.tsx @@ -1,19 +1,19 @@ -import { useWeb3 } from 'reef-knot/web3-react'; import { Eth } from '@lidofinance/lido-ui'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; import { useStakeFormData } from '../stake-form-context'; import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; export const StakeAmountInput = () => { - const { active } = useWeb3(); - + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); const { maxAmount, stakingLimitInfo } = useStakeFormData(); const { limitWarning, limitError } = useStakingLimitWarning( stakingLimitInfo?.stakeLimitLevel, ); + return ( { }; export const Wallet: WalletComponentType = memo((props) => { - const chainIdWithoutAccount = useChainIdWithoutAccount(); - const { chainId: accountChainId } = useAccount(); - const { active } = useWeb3(); + const { chainId } = useAccount(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - const _chainId = accountChainId || chainIdWithoutAccount; + const isChainL2 = useMemo(() => { + return ( + Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 + ); + }, [chainId]); - // The widget currently doesn't support L2 networks so there is no point in checking `active from useWeb3()` first - if (Object.values(L2_CHAINS).indexOf(_chainId as unknown as L2_CHAINS) > -1) { + if (isChainL2) { return ; } - return active ? : ; + if (!isActiveWallet) { + return ; + } + + return ; }); diff --git a/features/withdrawals/claim/form/submit-button.tsx b/features/withdrawals/claim/form/submit-button.tsx index 96c1d6071..378152ea9 100644 --- a/features/withdrawals/claim/form/submit-button.tsx +++ b/features/withdrawals/claim/form/submit-button.tsx @@ -1,20 +1,28 @@ -import { Connect } from 'shared/wallet'; +import { useFormState } from 'react-hook-form'; +import { useAccount } from 'wagmi'; import { Button } from '@lidofinance/lido-ui'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { FormatToken } from 'shared/formatters/format-token'; -import { ClaimFormInputType, useClaimFormData } from '../claim-form-context'; import { Zero } from '@ethersproject/constants'; -import { useFormState } from 'react-hook-form'; + +import { Connect, UnsupportedChainButton } from 'shared/wallet'; +import { FormatToken } from 'shared/formatters/format-token'; +import { useIsSupportedChain } from 'shared/hooks/use-is-supported-chain'; import { isValidationErrorTypeUnhandled } from 'shared/hook-form/validation/validation-error'; +import { ClaimFormInputType, useClaimFormData } from '../claim-form-context'; + export const SubmitButton = () => { - const { active } = useWeb3(); + const { isConnected } = useAccount(); + const isSupportedChain = useIsSupportedChain(); const { isSubmitting, isValidating, errors } = useFormState(); const { ethToClaim } = useClaimFormData(); const { selectedRequests } = useClaimFormData(); - if (!active) return ; + if (!isConnected) return ; + + if (!isSupportedChain) { + return ; + } const claimButtonAmount = ethToClaim.lte(Zero) ? null : ( diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index bcc88e401..05937e225 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -1,17 +1,17 @@ -import { memo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { memo, useMemo } from 'react'; import { useAccount } from 'wagmi'; + import { Divider } from '@lidofinance/lido-ui'; import { useSDK } from '@lido-sdk/react'; import { L2_CHAINS } from 'consts/chains'; -import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; -import type { WalletComponentType } from 'shared/wallet/types'; -import { useChainIdWithoutAccount } from 'shared/hooks/use-chain-id-without-account'; import { WalletWrapperStyled, WalletMyRequests, } from 'features/withdrawals/shared'; +import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; +import type { WalletComponentType } from 'shared/wallet/types'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { WalletAvailableAmount } from './wallet-availale-amount'; import { WalletPendingAmount } from './wallet-pending-amount'; @@ -35,16 +35,22 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - const chainIdWithoutAccount = useChainIdWithoutAccount(); - const { chainId: accountChainId } = useAccount(); - const { active } = useWeb3(); + const { chainId } = useAccount(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - const _chainId = accountChainId || chainIdWithoutAccount; + const isChainL2 = useMemo(() => { + return ( + Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 + ); + }, [chainId]); - // The widget currently doesn't support L2 networks so there is no point in checking `active from useWeb3()` first - if (Object.values(L2_CHAINS).indexOf(_chainId as unknown as L2_CHAINS) > -1) { + if (isChainL2) { return ; } - return active ? : ; + if (!isActiveWallet) { + return ; + } + + return ; }); diff --git a/features/withdrawals/request/form/controls/token-amount-input-request.tsx b/features/withdrawals/request/form/controls/token-amount-input-request.tsx index b3b6696b0..89f4552f0 100644 --- a/features/withdrawals/request/form/controls/token-amount-input-request.tsx +++ b/features/withdrawals/request/form/controls/token-amount-input-request.tsx @@ -1,5 +1,4 @@ import { useController, useWatch } from 'react-hook-form'; -import { useWeb3 } from 'reef-knot/web3-react'; import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events'; import { InputDecoratorTvlStake } from 'features/withdrawals/shared/input-decorator-tvl-stake'; @@ -11,9 +10,10 @@ import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage'; import { trackMatomoEvent } from 'utils/track-matomo-event'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; export const TokenAmountInputRequest = () => { - const { active } = useWeb3(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); @@ -27,7 +27,7 @@ export const TokenAmountInputRequest = () => { return ( { - const { active } = useWeb3(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - return ; + return ; }; diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index a409fa60d..a4c2ffd94 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -1,17 +1,17 @@ -import { memo } from 'react'; +import { memo, useMemo } from 'react'; import { useWatch } from 'react-hook-form'; import { useAccount } from 'wagmi'; + import { TOKENS } from '@lido-sdk/constants'; import { Divider } from '@lidofinance/lido-ui'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useSDK } from '@lido-sdk/react'; import { L2_CHAINS } from 'consts/chains'; -import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; import { WalletMyRequests } from 'features/withdrawals/shared'; import { WalletWrapperStyled } from 'features/withdrawals/shared'; -import { useChainIdWithoutAccount } from 'shared/hooks/use-chain-id-without-account'; +import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; import type { WalletComponentType } from 'shared/wallet/types'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { WalletStethBalance } from './wallet-steth-balance'; import { WalletWstethBalance } from './wallet-wsteth-balance'; @@ -22,6 +22,7 @@ export const WalletComponent = () => { const { account } = useSDK(); const token = useWatch({ name: 'token' }); const isSteth = token === TOKENS.STETH; + return ( @@ -38,16 +39,22 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - const chainIdWithoutAccount = useChainIdWithoutAccount(); - const { chainId: accountChainId } = useAccount(); - const { active } = useWeb3(); + const { chainId } = useAccount(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - const _chainId = accountChainId || chainIdWithoutAccount; + const isChainL2 = useMemo(() => { + return ( + Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 + ); + }, [chainId]); - // The widget currently doesn't support L2 networks so there is no point in checking `active from useWeb3()` first - if (Object.values(L2_CHAINS).indexOf(_chainId as unknown as L2_CHAINS) > -1) { + if (isChainL2) { return ; } - return active ? : ; + if (!isActiveWallet) { + return ; + } + + return ; }); diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index dc23101fb..814ba78cd 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -1,5 +1,4 @@ -import { memo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { memo, useMemo } from 'react'; import { useAccount } from 'wagmi'; import { Divider, Text } from '@lidofinance/lido-ui'; @@ -16,8 +15,8 @@ import { L2_CHAINS } from 'consts/chains'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; import { TokenToWallet } from 'shared/components'; -import { useChainIdWithoutAccount } from 'shared/hooks/use-chain-id-without-account'; import { useWstethBySteth, useStethByWsteth } from 'shared/hooks'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import type { WalletComponentType } from 'shared/wallet/types'; import { CardBalance, @@ -117,16 +116,22 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const chainIdWithoutAccount = useChainIdWithoutAccount(); - const { chainId: accountChainId } = useAccount(); - const { active } = useWeb3(); + const { chainId } = useAccount(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - const _chainId = accountChainId || chainIdWithoutAccount; + const isChainL2 = useMemo(() => { + return ( + Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 + ); + }, [chainId]); - // The widget currently doesn't support L2 networks so there is no point in checking `active from useWeb3()` first - if (Object.values(L2_CHAINS).indexOf(_chainId as unknown as L2_CHAINS) > -1) { + if (isChainL2) { return ; } - return active ? : ; + if (!isActiveWallet) { + return ; + } + + return ; }); diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx index 022046cf6..01e78e25e 100644 --- a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx +++ b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx @@ -1,17 +1,19 @@ import { Wsteth } from '@lidofinance/lido-ui'; import { TOKENS } from '@lido-sdk/constants'; -import { useWeb3 } from 'reef-knot/web3-react'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; + import { useUnwrapFormData } from '../unwrap-form-context'; export const TokenAmountInputUnwrap = () => { - const { active } = useWeb3(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { maxAmount } = useUnwrapFormData(); return ( ; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { - const { active } = useWeb3(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); return ( ; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { - const { active } = useWeb3(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); return ( { trackEvent( diff --git a/shared/hook-form/controls/submit-button-hook-form.tsx b/shared/hook-form/controls/submit-button-hook-form.tsx index cb6a9bdba..8be5eec79 100644 --- a/shared/hook-form/controls/submit-button-hook-form.tsx +++ b/shared/hook-form/controls/submit-button-hook-form.tsx @@ -1,10 +1,9 @@ -import { useWeb3 } from 'reef-knot/web3-react'; import { useFormState } from 'react-hook-form'; +import { useAccount } from 'wagmi'; import { ButtonIcon, Lock } from '@lidofinance/lido-ui'; -import { config } from 'config'; +import { useIsSupportedChain } from 'shared/hooks/use-is-supported-chain'; import { Connect, UnsupportedChainButton } from 'shared/wallet'; -import { useChainIdWithoutAccount } from 'shared/hooks/use-chain-id-without-account'; import { isValidationErrorTypeValidate } from '../validation/validation-error'; @@ -22,24 +21,25 @@ export const SubmitButtonHookForm: React.FC = ({ disabled: disabledProp, ...props }) => { - const chainId = useChainIdWithoutAccount(); - const { active } = useWeb3(); + const { isConnected } = useAccount(); + const isSupportedChain = useIsSupportedChain(); const { isValidating, isSubmitting } = useFormState(); const { errors } = useFormState>(); + + if (!isConnected) { + return ; + } + + if (!isSupportedChain) { + return ; + } + const disabled = (errorField && !!errors[errorField] && isValidationErrorTypeValidate(errors[errorField]?.type)) || disabledProp; - if (!active) { - if (chainId && config.supportedChains.indexOf(chainId) > -1) { - return ; - } - - return ; - } - return ( Date: Tue, 9 Jul 2024 23:48:22 +0300 Subject: [PATCH 28/74] refactor(stake form): disabled MAX button --- shared/components/input-amount/input-amount.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/components/input-amount/input-amount.tsx b/shared/components/input-amount/input-amount.tsx index 1d55cccc9..af6c62c9b 100644 --- a/shared/components/input-amount/input-amount.tsx +++ b/shared/components/input-amount/input-amount.tsx @@ -162,7 +162,7 @@ export const InputAmount = forwardRef( <> {isLocked ? : undefined} From ea342e4359b1234b407078d8fb39ca1e5b4620fa Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 10 Jul 2024 00:10:44 +0300 Subject: [PATCH 29/74] refactor: remove Arbitrum_Nova and Arbitrum_One --- consts/chains.ts | 2 -- shared/wallet/l2-fallback/l2-fallback.tsx | 7 +------ 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/consts/chains.ts b/consts/chains.ts index eacf1bf0b..5166ba812 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -7,8 +7,6 @@ export enum CHAINS { export enum L2_CHAINS { zkSync = 324, Optimism = 10, - // Arbitrum_One = 42161, - // Arbitrum_Nova = 42170, Arbitrum = 42161, Polygon_PoS = 137, Base = 8453, diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 2fc0233e9..5c29d151b 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -18,8 +18,6 @@ import { WalletCardComponent } from 'shared/wallet/card/types'; import { L2FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; const l2Logos = { - // [L2_CHAINS.Arbitrum_Nova]: ArbitrumLogo, - // [L2_CHAINS.Arbitrum_One]: ArbitrumLogo, [L2_CHAINS.Arbitrum]: ArbitrumLogo, [L2_CHAINS.Base]: BaseLogo, [L2_CHAINS.Linea]: LineaLogo, @@ -55,10 +53,7 @@ export const L2Fallback: WalletCardComponent = (props) => { Learn about Lido on L2 opportunities on {chainName} network or switch to Ethereum {defaultChainName} to stake - console.log('Track Matomo!')} - > + Lido on L2 opportunities From 3da37267a86f18a0acaeac90d3502a02789b2e50 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 10 Jul 2024 00:27:10 +0300 Subject: [PATCH 30/74] refactor(reward top-card): simplify to read of source code and not use web3-react --- features/rewards/features/top-card/top-card.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index d5fa43c47..dc00613b9 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -1,21 +1,25 @@ import { FC } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useAccount } from 'wagmi'; import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; import { Fallback } from 'shared/wallet'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { Wallet } from './wallet'; import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { address } = useAccount(); - const { active } = useWeb3(); + const { isConnected } = useAccount(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); return ( <> - {address ? active ? : : } + {!isConnected && } + + {isConnected && !isActiveWallet && } + + {isConnected && isActiveWallet && } From 3c19e24869b8aadd686a31185804bd876ea0b3c3 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 10 Jul 2024 00:31:33 +0300 Subject: [PATCH 31/74] refactor(stake-submit-button): not use web3-react --- .../stake/stake-form/controls/stake-submit-button.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/features/stake/stake-form/controls/stake-submit-button.tsx b/features/stake/stake-form/controls/stake-submit-button.tsx index 1c01524b5..ddcebdc4a 100644 --- a/features/stake/stake-form/controls/stake-submit-button.tsx +++ b/features/stake/stake-form/controls/stake-submit-button.tsx @@ -1,16 +1,18 @@ -import { useWeb3 } from 'reef-knot/web3-react'; -import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form'; import { LIMIT_LEVEL } from 'types'; +import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; + import { useStakeFormData } from '../stake-form-context'; export const StakeSubmitButton = () => { - const { active } = useWeb3(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); const { stakingLimitInfo } = useStakeFormData(); return ( Date: Wed, 10 Jul 2024 00:39:37 +0300 Subject: [PATCH 32/74] refactor(header-wallet): not use web3-react --- .../header/components/header-wallet.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/shared/components/layout/header/components/header-wallet.tsx b/shared/components/layout/header/components/header-wallet.tsx index b9f2bc7f7..8b15fd5cd 100644 --- a/shared/components/layout/header/components/header-wallet.tsx +++ b/shared/components/layout/header/components/header-wallet.tsx @@ -1,15 +1,17 @@ import { FC, useMemo } from 'react'; import { useRouter } from 'next/router'; -import { useWeb3 } from 'reef-knot/web3-react'; -import { useSDK } from '@lido-sdk/react'; +import { useAccount } from 'wagmi'; + import { CHAINS, getChainColor } from '@lido-sdk/constants'; import { ThemeToggler } from '@lidofinance/lido-ui'; -import NoSSRWrapper from '../../../no-ssr-wrapper'; import { config } from 'config'; +import { useUserConfig } from 'config/user-config'; import { IPFSInfoBox } from 'features/ipfs/ipfs-info-box'; import { Button, Connect } from 'shared/wallet'; +import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; +import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { HeaderSettingsButton } from './header-settings-button'; import { @@ -20,21 +22,22 @@ import { const HeaderWallet: FC = () => { const router = useRouter(); - const { active } = useWeb3(); - const { account, chainId } = useSDK(); + const { chainId } = useAccount(); + const { defaultChain: defaultChainId } = useUserConfig(); + const isActiveWallet = useIsConnectedWalletAndSupportedChain(); const chainName = CHAINS[chainId]; const testNet = chainId !== CHAINS.Mainnet; - const showNet = testNet && active; + const showNet = testNet && isActiveWallet; const queryTheme = router?.query?.theme; const chainColor = useMemo(() => { try { - return getChainColor(chainId); + return getChainColor(chainId | defaultChainId); } catch { - return getChainColor(1); + return getChainColor(defaultChainId); } - }, [chainId]); + }, [chainId, defaultChainId]); return ( @@ -46,7 +49,7 @@ const HeaderWallet: FC = () => { )} - {active || account ? ( + {isActiveWallet ? ( - + Connect your wallet to view staking stats + ); }; From 9b5104e870dfbf2c8534c2c5ecdad78196b4ff67 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 10 Jul 2024 17:08:43 +0300 Subject: [PATCH 41/74] fix: polygon name --- consts/chains.ts | 2 +- shared/wallet/l2-fallback/l2-fallback.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/consts/chains.ts b/consts/chains.ts index 5166ba812..c2c168ce1 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -8,7 +8,7 @@ export enum L2_CHAINS { zkSync = 324, Optimism = 10, Arbitrum = 42161, - Polygon_PoS = 137, + Polygon = 137, Base = 8453, Mantle = 5000, Linea = 59144, diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 5c29d151b..3c24bc84a 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -23,7 +23,7 @@ const l2Logos = { [L2_CHAINS.Linea]: LineaLogo, [L2_CHAINS.Mantle]: MantleLogo, [L2_CHAINS.Optimism]: OptimismLogo, - [L2_CHAINS.Polygon_PoS]: PolygonLogo, + [L2_CHAINS.Polygon]: PolygonLogo, [L2_CHAINS.zkSync]: ZkSyncLogo, }; From 74f9bb49d6de4ffdc8562932aa3c32bb02a28e0e Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 11 Jul 2024 10:38:22 +0300 Subject: [PATCH 42/74] fix(header wallet): address badge padding --- shared/wallet/button/button.tsx | 9 +++++++-- shared/wallet/components/address-badge/address-badge.tsx | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/shared/wallet/button/button.tsx b/shared/wallet/button/button.tsx index ffe6da554..3c434e607 100644 --- a/shared/wallet/button/button.tsx +++ b/shared/wallet/button/button.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; import { useAccount } from 'wagmi'; -import { ButtonProps } from '@lidofinance/lido-ui'; +import { ButtonProps, useBreakpoint } from '@lidofinance/lido-ui'; import { useEthereumBalance } from '@lido-sdk/react'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; @@ -22,6 +22,7 @@ export const Button: FC = (props) => { const isActiveWallet = useIsConnectedWalletAndSupportedChain(); const { address } = useAccount(); + const isMobile = useBreakpoint('md'); const { openModal } = useWalletModal(); const { data: balance, initialLoading } = useEthereumBalance( @@ -35,7 +36,11 @@ export const Button: FC = (props) => { variant="text" color="secondary" onClick={() => openModal({})} - style={!initialLoading && !isActiveWallet ? { paddingLeft: '12px' } : {}} + style={ + !initialLoading && !isActiveWallet && !isMobile + ? { paddingLeft: '9px' } + : {} + } {...rest} > diff --git a/shared/wallet/components/address-badge/address-badge.tsx b/shared/wallet/components/address-badge/address-badge.tsx index 96f63aa27..918ca5379 100644 --- a/shared/wallet/components/address-badge/address-badge.tsx +++ b/shared/wallet/components/address-badge/address-badge.tsx @@ -9,7 +9,7 @@ export type AddressBadgeComponent = Component< export const AddressBadge: AddressBadgeComponent = (props) => { const { address, ...rest } = props; - const isMobile = useBreakpoint('sm'); + const isMobile = useBreakpoint('md'); return ( Date: Thu, 11 Jul 2024 15:01:04 +0300 Subject: [PATCH 43/74] feat(matomo): add matomo event by click "Lido on L2 opportunities" button --- consts/matomo-click-events.ts | 6 ++++++ shared/wallet/l2-fallback/l2-fallback.tsx | 9 ++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/consts/matomo-click-events.ts b/consts/matomo-click-events.ts index 3d2ff1044..1a1164199 100644 --- a/consts/matomo-click-events.ts +++ b/consts/matomo-click-events.ts @@ -14,6 +14,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES { l2LowFeeStake = 'l2LowFeeStake', l2LowFeeWrap = 'l2LowFeeWrap', l2swap = 'l2swap', + lidoOnL2Opportunities = 'lidoOnL2Opportunities', vaultsBannerLearnMore = 'vaultsBannerLearnMore', vaultsBannerExploreAll = 'vaultsBannerExploreAll', // FAQ @@ -128,6 +129,11 @@ export const MATOMO_CLICK_EVENTS: Record< 'Push «Swap» in Swap ETH to wstETH on L2 banner on staking widget', 'eth_widget_banner_swap_ETH_on_L2', ], + [MATOMO_CLICK_EVENTS_TYPES.lidoOnL2Opportunities]: [ + 'Ethereum_Staking_Widget', + 'Push "Lido on L2 opportunities" ', + 'eth_widget_lido_on_l2_opportunities', + ], [MATOMO_CLICK_EVENTS_TYPES.vaultsBannerLearnMore]: [ 'Ethereum_Staking_Widget', 'Click on "Learn more" on Vaults banner', diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 3c24bc84a..2dc6e1420 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -11,8 +11,8 @@ import { ReactComponent as PolygonLogo } from 'assets/icons/l2/polygon.svg'; import { ReactComponent as ZkSyncLogo } from 'assets/icons/l2/zk-sync.svg'; import { useUserConfig } from 'config/user-config'; -import { CHAINS } from 'consts/chains'; -import { L2_CHAINS } from 'consts/chains'; +import { CHAINS, L2_CHAINS } from 'consts/chains'; +import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events'; import { WalletCardComponent } from 'shared/wallet/card/types'; import { L2FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; @@ -53,7 +53,10 @@ export const L2Fallback: WalletCardComponent = (props) => { Learn about Lido on L2 opportunities on {chainName} network or switch to Ethereum {defaultChainName} to stake - + Lido on L2 opportunities From 58ceabf88953a3dffcdc186fc363bd79fee657f4 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 11 Jul 2024 16:12:18 +0300 Subject: [PATCH 44/74] fix(SelectIcon): disbaled state --- .../controls/token-select-hook-form.tsx | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/shared/hook-form/controls/token-select-hook-form.tsx b/shared/hook-form/controls/token-select-hook-form.tsx index a1c05c550..e79d298ea 100644 --- a/shared/hook-form/controls/token-select-hook-form.tsx +++ b/shared/hook-form/controls/token-select-hook-form.tsx @@ -1,3 +1,4 @@ +import styled from 'styled-components'; import { useController, useFormState, useFormContext } from 'react-hook-form'; import { @@ -8,10 +9,29 @@ import { Wsteth, OptionValue, } from '@lidofinance/lido-ui'; +import { TOKENS as TOKENS_SDK } from '@lido-sdk/constants'; import { getTokenDisplayName } from 'utils/getTokenDisplayName'; import { isValidationErrorTypeValidate } from 'shared/hook-form/validation/validation-error'; -import { TOKENS as TOKENS_SDK } from '@lido-sdk/constants'; + +// Temporarily: The 'SelectIconStyle' is being used to fix the 'SelectIcon' from the UI lib. +export const SelectIconStyle = styled((props) => )` + & > span { + // The '!important' is important here! + border-color: ${({ disabled }) => + disabled && 'var(--lido-color-border)!important'}; + background: ${({ disabled }) => + disabled ? 'var(--lido-color-background)' : 'transparent'}; + } + + &:hover { + & > span { + border-color: ${({ disabled }) => disabled && 'var(--lido-color-border)'}; + background: ${({ disabled }) => + disabled ? 'var(--lido-color-background)' : 'transparent'}; + } + } +`; export const TOKENS = { ETH: 'ETH', @@ -58,7 +78,7 @@ export const TokenSelectHookForm = ({ }); return ( - ))} - + ); }; From e3e0c2a31e0c305c63ffa955e0260f707a7ae1c5 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Thu, 11 Jul 2024 16:25:29 +0300 Subject: [PATCH 45/74] fix: text --- .../rewards/components/rewardsListContent/RewardsListsEmpty.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx index 51f0a5742..d418e9745 100644 --- a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx @@ -8,7 +8,7 @@ export const RewardsListsEmpty: FC = () => { <> - Connect your wallet or enter your Ethereum address to see the stats. + Connect your wallet to see the stats. ); From 2dfd80e30e6a360bdc249f53f88c4b0b7fb7f87d Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 13:27:52 +0300 Subject: [PATCH 46/74] refactor: use one hook for connection statuses --- .../rewards/features/top-card/top-card.tsx | 10 +++---- .../controls/stake-amount-input.tsx | 6 ++-- .../controls/stake-submit-button.tsx | 6 ++-- features/stake/stake-form/wallet/wallet.tsx | 16 +++------- .../withdrawals/claim/form/submit-button.tsx | 1 + features/withdrawals/claim/wallet/wallet.tsx | 17 +++-------- .../controls/token-amount-input-request.tsx | 6 ++-- .../form/controls/token-select-request.tsx | 6 ++-- .../withdrawals/request/wallet/wallet.tsx | 17 +++-------- features/wsteth/shared/wallet/wallet.tsx | 17 +++-------- .../amount-input-unwrap.tsx | 7 ++--- .../token-amount-input-wrap.tsx | 6 ++-- .../wrap-form-controls/token-select-wrap.tsx | 6 ++-- .../header/components/header-wallet.tsx | 6 ++-- .../controls/submit-button-hook-form.tsx | 1 + shared/hooks/use-connection-statuses.ts | 30 +++++++++++++++++++ ...is-connected-wallet-and-supported-chain.ts | 14 --------- shared/wallet/button/button.tsx | 10 +++---- 18 files changed, 81 insertions(+), 101 deletions(-) create mode 100644 shared/hooks/use-connection-statuses.ts delete mode 100644 shared/hooks/use-is-connected-wallet-and-supported-chain.ts diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index dc00613b9..23a4b8094 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -1,25 +1,23 @@ import { FC } from 'react'; -import { useAccount } from 'wagmi'; import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import { Fallback } from 'shared/wallet'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { Wallet } from './wallet'; import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { isConnected } = useAccount(); - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isConnected, isDappActive } = useConnectionStatuses(); return ( <> {!isConnected && } - {isConnected && !isActiveWallet && } + {!isDappActive && } - {isConnected && isActiveWallet && } + {isDappActive && } diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/features/stake/stake-form/controls/stake-amount-input.tsx index 908cf71bc..9b35f3982 100644 --- a/features/stake/stake-form/controls/stake-amount-input.tsx +++ b/features/stake/stake-form/controls/stake-amount-input.tsx @@ -2,10 +2,10 @@ import { Eth } from '@lidofinance/lido-ui'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; import { useStakeFormData } from '../stake-form-context'; import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; export const StakeAmountInput = () => { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); const { maxAmount, stakingLimitInfo } = useStakeFormData(); const { limitWarning, limitError } = useStakingLimitWarning( stakingLimitInfo?.stakeLimitLevel, @@ -13,7 +13,7 @@ export const StakeAmountInput = () => { return ( { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); const { stakingLimitInfo } = useStakeFormData(); return ( { }; export const Wallet: WalletComponentType = memo((props) => { - const { chainId } = useAccount(); - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - - const isChainL2 = useMemo(() => { - return ( - Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 - ); - }, [chainId]); + const { isChainL2, isDappActive } = useConnectionStatuses(); if (isChainL2) { return ; } - if (!isActiveWallet) { + if (!isDappActive) { return ; } diff --git a/features/withdrawals/claim/form/submit-button.tsx b/features/withdrawals/claim/form/submit-button.tsx index 378152ea9..f294a5c1d 100644 --- a/features/withdrawals/claim/form/submit-button.tsx +++ b/features/withdrawals/claim/form/submit-button.tsx @@ -13,6 +13,7 @@ import { ClaimFormInputType, useClaimFormData } from '../claim-form-context'; export const SubmitButton = () => { const { isConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); + const { isSubmitting, isValidating, errors } = useFormState(); const { ethToClaim } = useClaimFormData(); diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index 05937e225..91f837a0e 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -1,17 +1,15 @@ -import { memo, useMemo } from 'react'; -import { useAccount } from 'wagmi'; +import { memo } from 'react'; import { Divider } from '@lidofinance/lido-ui'; import { useSDK } from '@lido-sdk/react'; -import { L2_CHAINS } from 'consts/chains'; import { WalletWrapperStyled, WalletMyRequests, } from 'features/withdrawals/shared'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; import type { WalletComponentType } from 'shared/wallet/types'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { WalletAvailableAmount } from './wallet-availale-amount'; import { WalletPendingAmount } from './wallet-pending-amount'; @@ -35,20 +33,13 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - const { chainId } = useAccount(); - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - - const isChainL2 = useMemo(() => { - return ( - Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 - ); - }, [chainId]); + const { isChainL2, isDappActive } = useConnectionStatuses(); if (isChainL2) { return ; } - if (!isActiveWallet) { + if (!isDappActive) { return ; } diff --git a/features/withdrawals/request/form/controls/token-amount-input-request.tsx b/features/withdrawals/request/form/controls/token-amount-input-request.tsx index 89f4552f0..143a9e4ae 100644 --- a/features/withdrawals/request/form/controls/token-amount-input-request.tsx +++ b/features/withdrawals/request/form/controls/token-amount-input-request.tsx @@ -10,10 +10,10 @@ import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage'; import { trackMatomoEvent } from 'utils/track-matomo-event'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; export const TokenAmountInputRequest = () => { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); @@ -27,7 +27,7 @@ export const TokenAmountInputRequest = () => { return ( { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); - return ; + return ; }; diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index a4c2ffd94..e8860b5b1 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -1,17 +1,15 @@ -import { memo, useMemo } from 'react'; +import { memo } from 'react'; import { useWatch } from 'react-hook-form'; -import { useAccount } from 'wagmi'; import { TOKENS } from '@lido-sdk/constants'; import { Divider } from '@lidofinance/lido-ui'; import { useSDK } from '@lido-sdk/react'; -import { L2_CHAINS } from 'consts/chains'; import { WalletMyRequests } from 'features/withdrawals/shared'; import { WalletWrapperStyled } from 'features/withdrawals/shared'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import type { WalletComponentType } from 'shared/wallet/types'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { WalletStethBalance } from './wallet-steth-balance'; import { WalletWstethBalance } from './wallet-wsteth-balance'; @@ -39,20 +37,13 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - const { chainId } = useAccount(); - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - - const isChainL2 = useMemo(() => { - return ( - Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 - ); - }, [chainId]); + const { isChainL2, isDappActive } = useConnectionStatuses(); if (isChainL2) { return ; } - if (!isActiveWallet) { + if (!isDappActive) { return ; } diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 814ba78cd..050b7abea 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -1,5 +1,4 @@ -import { memo, useMemo } from 'react'; -import { useAccount } from 'wagmi'; +import { memo } from 'react'; import { Divider, Text } from '@lidofinance/lido-ui'; import { TOKENS } from '@lido-sdk/constants'; @@ -11,12 +10,11 @@ import { useTokenAddress, } from '@lido-sdk/react'; -import { L2_CHAINS } from 'consts/chains'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; import { TokenToWallet } from 'shared/components'; import { useWstethBySteth, useStethByWsteth } from 'shared/hooks'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import type { WalletComponentType } from 'shared/wallet/types'; import { CardBalance, @@ -116,20 +114,13 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { chainId } = useAccount(); - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - - const isChainL2 = useMemo(() => { - return ( - Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 - ); - }, [chainId]); + const { isChainL2, isDappActive } = useConnectionStatuses(); if (isChainL2) { return ; } - if (!isActiveWallet) { + if (!isDappActive) { return ; } diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx index 01e78e25e..20426ff84 100644 --- a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx +++ b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx @@ -2,18 +2,17 @@ import { Wsteth } from '@lidofinance/lido-ui'; import { TOKENS } from '@lido-sdk/constants'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import { useUnwrapFormData } from '../unwrap-form-context'; export const TokenAmountInputUnwrap = () => { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - + const { isDappActive } = useConnectionStatuses(); const { maxAmount } = useUnwrapFormData(); return ( ; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); return ( ; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); return ( { trackEvent( diff --git a/shared/components/layout/header/components/header-wallet.tsx b/shared/components/layout/header/components/header-wallet.tsx index ce0ece1f6..26652dbe9 100644 --- a/shared/components/layout/header/components/header-wallet.tsx +++ b/shared/components/layout/header/components/header-wallet.tsx @@ -9,9 +9,9 @@ import { config } from 'config'; import { useUserConfig } from 'config/user-config'; import { IPFSInfoBox } from 'features/ipfs/ipfs-info-box'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import { Button, Connect } from 'shared/wallet'; import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; import { HeaderSettingsButton } from './header-settings-button'; import { @@ -24,11 +24,11 @@ const HeaderWallet: FC = () => { const router = useRouter(); const { chainId, address } = useAccount(); const { defaultChain: defaultChainId } = useUserConfig(); - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); + const { isDappActive } = useConnectionStatuses(); const chainName = CHAINS[chainId || defaultChainId]; const testNet = chainId !== CHAINS.Mainnet; - const showNet = testNet && isActiveWallet; + const showNet = testNet && isDappActive; const queryTheme = router?.query?.theme; const chainColor = useMemo(() => { diff --git a/shared/hook-form/controls/submit-button-hook-form.tsx b/shared/hook-form/controls/submit-button-hook-form.tsx index 8be5eec79..baf4cf5d4 100644 --- a/shared/hook-form/controls/submit-button-hook-form.tsx +++ b/shared/hook-form/controls/submit-button-hook-form.tsx @@ -23,6 +23,7 @@ export const SubmitButtonHookForm: React.FC = ({ }) => { const { isConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); + const { isValidating, isSubmitting } = useFormState(); const { errors } = useFormState>(); diff --git a/shared/hooks/use-connection-statuses.ts b/shared/hooks/use-connection-statuses.ts new file mode 100644 index 000000000..29987ce24 --- /dev/null +++ b/shared/hooks/use-connection-statuses.ts @@ -0,0 +1,30 @@ +import { useMemo } from 'react'; +import { useAccount } from 'wagmi'; + +import { L2_CHAINS } from 'consts/chains'; + +import { useIsSupportedChain } from './use-is-supported-chain'; + +export const useConnectionStatuses = () => { + const { chainId, isConnected } = useAccount(); + const isSupportedChain = useIsSupportedChain(); + + const isChainL2 = useMemo(() => { + return ( + Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 + ); + }, [chainId]); + + const isDappActive = useMemo(() => { + if (!chainId) return false; + + return isConnected && isSupportedChain; + }, [chainId, isConnected, isSupportedChain]); + + return { + isConnected, + isSupportedChain, + isChainL2, + isDappActive, + }; +}; diff --git a/shared/hooks/use-is-connected-wallet-and-supported-chain.ts b/shared/hooks/use-is-connected-wallet-and-supported-chain.ts deleted file mode 100644 index b9511208d..000000000 --- a/shared/hooks/use-is-connected-wallet-and-supported-chain.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useMemo } from 'react'; -import { useAccount } from 'wagmi'; -import { useUserConfig } from 'config/user-config'; - -export const useIsConnectedWalletAndSupportedChain = () => { - const { chainId, isConnected } = useAccount(); - const { supportedChainIds } = useUserConfig(); - - return useMemo(() => { - if (!chainId) return false; - - return isConnected && supportedChainIds.indexOf(chainId) > -1; - }, [chainId, isConnected, supportedChainIds]); -}; diff --git a/shared/wallet/button/button.tsx b/shared/wallet/button/button.tsx index 3c434e607..084f7fcff 100644 --- a/shared/wallet/button/button.tsx +++ b/shared/wallet/button/button.tsx @@ -5,7 +5,7 @@ import { useEthereumBalance } from '@lido-sdk/react'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; -import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain'; +import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; import { AddressBadge } from '../components/address-badge/address-badge'; import { useWalletModal } from '../wallet-modal/use-wallet-modal'; @@ -20,9 +20,9 @@ import { export const Button: FC = (props) => { const { onClick, ...rest } = props; - const isActiveWallet = useIsConnectedWalletAndSupportedChain(); - const { address } = useAccount(); const isMobile = useBreakpoint('md'); + const { address } = useAccount(); + const { isDappActive } = useConnectionStatuses(); const { openModal } = useWalletModal(); const { data: balance, initialLoading } = useEthereumBalance( @@ -37,7 +37,7 @@ export const Button: FC = (props) => { color="secondary" onClick={() => openModal({})} style={ - !initialLoading && !isActiveWallet && !isMobile + !initialLoading && !isDappActive && !isMobile ? { paddingLeft: '9px' } : {} } @@ -48,7 +48,7 @@ export const Button: FC = (props) => { {initialLoading ? ( ) : ( - isActiveWallet && ( + isDappActive && ( Date: Fri, 12 Jul 2024 14:10:17 +0300 Subject: [PATCH 47/74] refactor: useConnectionStatuses --> useDappStatuses --- features/rewards/features/top-card/top-card.tsx | 4 ++-- features/stake/stake-form/controls/stake-amount-input.tsx | 4 ++-- features/stake/stake-form/controls/stake-submit-button.tsx | 4 ++-- features/stake/stake-form/wallet/wallet.tsx | 4 ++-- features/withdrawals/claim/wallet/wallet.tsx | 4 ++-- .../request/form/controls/token-amount-input-request.tsx | 4 ++-- .../request/form/controls/token-select-request.tsx | 4 ++-- features/withdrawals/request/wallet/wallet.tsx | 4 ++-- features/wsteth/shared/wallet/wallet.tsx | 4 ++-- .../unwrap/unwrap-form-controls/amount-input-unwrap.tsx | 4 ++-- .../wrap/wrap-form-controls/token-amount-input-wrap.tsx | 4 ++-- features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx | 4 ++-- shared/components/layout/header/components/header-wallet.tsx | 4 ++-- .../{use-connection-statuses.ts => use-dapp-statuses.ts} | 2 +- shared/wallet/button/button.tsx | 4 ++-- 15 files changed, 29 insertions(+), 29 deletions(-) rename shared/hooks/{use-connection-statuses.ts => use-dapp-statuses.ts} (93%) diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index 23a4b8094..e74ae111f 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -2,14 +2,14 @@ import { FC } from 'react'; import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { Fallback } from 'shared/wallet'; import { Wallet } from './wallet'; import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { isConnected, isDappActive } = useConnectionStatuses(); + const { isConnected, isDappActive } = useDappStatuses(); return ( <> diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/features/stake/stake-form/controls/stake-amount-input.tsx index 9b35f3982..6ea847016 100644 --- a/features/stake/stake-form/controls/stake-amount-input.tsx +++ b/features/stake/stake-form/controls/stake-amount-input.tsx @@ -2,10 +2,10 @@ import { Eth } from '@lidofinance/lido-ui'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; import { useStakeFormData } from '../stake-form-context'; import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; export const StakeAmountInput = () => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const { maxAmount, stakingLimitInfo } = useStakeFormData(); const { limitWarning, limitError } = useStakingLimitWarning( stakingLimitInfo?.stakeLimitLevel, diff --git a/features/stake/stake-form/controls/stake-submit-button.tsx b/features/stake/stake-form/controls/stake-submit-button.tsx index d9b085fc1..31550e866 100644 --- a/features/stake/stake-form/controls/stake-submit-button.tsx +++ b/features/stake/stake-form/controls/stake-submit-button.tsx @@ -1,11 +1,11 @@ import { LIMIT_LEVEL } from 'types'; import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { useStakeFormData } from '../stake-form-context'; export const StakeSubmitButton = () => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const { stakingLimitInfo } = useStakeFormData(); return ( diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index b8d067cdc..297a0b736 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -9,7 +9,7 @@ import { LIDO_APR_TOOLTIP_TEXT, DATA_UNAVAILABLE } from 'consts/text'; import { TokenToWallet } from 'shared/components'; import { FormatToken } from 'shared/formatters'; import { useLidoApr } from 'shared/hooks'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { CardAccount, CardBalance, @@ -96,7 +96,7 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useConnectionStatuses(); + const { isChainL2, isDappActive } = useDappStatuses(); if (isChainL2) { return ; diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index 91f837a0e..a24d0403b 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -7,7 +7,7 @@ import { WalletWrapperStyled, WalletMyRequests, } from 'features/withdrawals/shared'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; import type { WalletComponentType } from 'shared/wallet/types'; @@ -33,7 +33,7 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useConnectionStatuses(); + const { isChainL2, isDappActive } = useDappStatuses(); if (isChainL2) { return ; diff --git a/features/withdrawals/request/form/controls/token-amount-input-request.tsx b/features/withdrawals/request/form/controls/token-amount-input-request.tsx index 143a9e4ae..3d26556a2 100644 --- a/features/withdrawals/request/form/controls/token-amount-input-request.tsx +++ b/features/withdrawals/request/form/controls/token-amount-input-request.tsx @@ -10,10 +10,10 @@ import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage'; import { trackMatomoEvent } from 'utils/track-matomo-event'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; export const TokenAmountInputRequest = () => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); diff --git a/features/withdrawals/request/form/controls/token-select-request.tsx b/features/withdrawals/request/form/controls/token-select-request.tsx index 597124ba1..4b83e6ca1 100644 --- a/features/withdrawals/request/form/controls/token-select-request.tsx +++ b/features/withdrawals/request/form/controls/token-select-request.tsx @@ -3,7 +3,7 @@ import { TokenOption, TokenSelectHookForm, } from 'shared/hook-form/controls/token-select-hook-form'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; const OPTIONS: TokenOption[] = [ { token: TOKENS.STETH }, @@ -11,7 +11,7 @@ const OPTIONS: TokenOption[] = [ ]; export const TokenSelectRequest = () => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); return ; }; diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index e8860b5b1..88b9f001c 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -8,7 +8,7 @@ import { useSDK } from '@lido-sdk/react'; import { WalletMyRequests } from 'features/withdrawals/shared'; import { WalletWrapperStyled } from 'features/withdrawals/shared'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import type { WalletComponentType } from 'shared/wallet/types'; import { WalletStethBalance } from './wallet-steth-balance'; @@ -37,7 +37,7 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useConnectionStatuses(); + const { isChainL2, isDappActive } = useDappStatuses(); if (isChainL2) { return ; diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 050b7abea..950278c89 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -14,7 +14,7 @@ import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; import { TokenToWallet } from 'shared/components'; import { useWstethBySteth, useStethByWsteth } from 'shared/hooks'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import type { WalletComponentType } from 'shared/wallet/types'; import { CardBalance, @@ -114,7 +114,7 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useConnectionStatuses(); + const { isChainL2, isDappActive } = useDappStatuses(); if (isChainL2) { return ; diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx index 20426ff84..dd3e3a0a6 100644 --- a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx +++ b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx @@ -2,12 +2,12 @@ import { Wsteth } from '@lidofinance/lido-ui'; import { TOKENS } from '@lido-sdk/constants'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { useUnwrapFormData } from '../unwrap-form-context'; export const TokenAmountInputUnwrap = () => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const { maxAmount } = useUnwrapFormData(); return ( diff --git a/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx b/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx index 8d2c4d5e3..472a7ef67 100644 --- a/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx +++ b/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx @@ -1,7 +1,7 @@ import { useWatch } from 'react-hook-form'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { useWrapFormData, WrapFormInputType } from '../wrap-form-context'; @@ -11,7 +11,7 @@ type TokenAmountInputWrapProps = Pick< >; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); diff --git a/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx b/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx index d24210b2c..320c636ec 100644 --- a/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx +++ b/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx @@ -3,7 +3,7 @@ import { trackEvent } from '@lidofinance/analytics-matomo'; import { TOKENS_TO_WRAP } from 'features/wsteth/shared/types'; import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; import { TokenSelectHookForm } from 'shared/hook-form/controls/token-select-hook-form'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; const OPTIONS = [ { @@ -22,7 +22,7 @@ type TokenSelectWrapProps = Pick< >; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); return ( { const router = useRouter(); const { chainId, address } = useAccount(); const { defaultChain: defaultChainId } = useUserConfig(); - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const chainName = CHAINS[chainId || defaultChainId]; const testNet = chainId !== CHAINS.Mainnet; diff --git a/shared/hooks/use-connection-statuses.ts b/shared/hooks/use-dapp-statuses.ts similarity index 93% rename from shared/hooks/use-connection-statuses.ts rename to shared/hooks/use-dapp-statuses.ts index 29987ce24..c278c7475 100644 --- a/shared/hooks/use-connection-statuses.ts +++ b/shared/hooks/use-dapp-statuses.ts @@ -5,7 +5,7 @@ import { L2_CHAINS } from 'consts/chains'; import { useIsSupportedChain } from './use-is-supported-chain'; -export const useConnectionStatuses = () => { +export const useDappStatuses = () => { const { chainId, isConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); diff --git a/shared/wallet/button/button.tsx b/shared/wallet/button/button.tsx index 084f7fcff..1662b1288 100644 --- a/shared/wallet/button/button.tsx +++ b/shared/wallet/button/button.tsx @@ -5,7 +5,7 @@ import { useEthereumBalance } from '@lido-sdk/react'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; -import { useConnectionStatuses } from 'shared/hooks/use-connection-statuses'; +import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; import { AddressBadge } from '../components/address-badge/address-badge'; import { useWalletModal } from '../wallet-modal/use-wallet-modal'; @@ -22,7 +22,7 @@ export const Button: FC = (props) => { const isMobile = useBreakpoint('md'); const { address } = useAccount(); - const { isDappActive } = useConnectionStatuses(); + const { isDappActive } = useDappStatuses(); const { openModal } = useWalletModal(); const { data: balance, initialLoading } = useEthereumBalance( From 1719940cb5151cbabeeb00c1899bebc18c199f89 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 14:13:13 +0300 Subject: [PATCH 48/74] refactor: useDappStatuses --- features/rewards/features/top-card/top-card.tsx | 4 ++-- features/stake/stake-form/wallet/wallet.tsx | 4 ++-- features/withdrawals/claim/wallet/wallet.tsx | 4 ++-- features/withdrawals/request/wallet/wallet.tsx | 4 ++-- features/wsteth/shared/wallet/wallet.tsx | 4 ++-- shared/hooks/use-dapp-statuses.ts | 12 ++++++------ 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index e74ae111f..47f693fee 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -9,11 +9,11 @@ import { Wallet } from './wallet'; import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { isConnected, isDappActive } = useDappStatuses(); + const { isWalletConnected, isDappActive } = useDappStatuses(); return ( <> - {!isConnected && } + {!isWalletConnected && } {!isDappActive && } diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index 297a0b736..c3dd9bb3d 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -96,9 +96,9 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatuses(); - if (isChainL2) { + if (isL2Chain) { return ; } diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index a24d0403b..0a44205ac 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -33,9 +33,9 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatuses(); - if (isChainL2) { + if (isL2Chain) { return ; } diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index 88b9f001c..39c6b7eea 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -37,9 +37,9 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatuses(); - if (isChainL2) { + if (isL2Chain) { return ; } diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 950278c89..3f08cf2a9 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -114,9 +114,9 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { isChainL2, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatuses(); - if (isChainL2) { + if (isL2Chain) { return ; } diff --git a/shared/hooks/use-dapp-statuses.ts b/shared/hooks/use-dapp-statuses.ts index c278c7475..62139cace 100644 --- a/shared/hooks/use-dapp-statuses.ts +++ b/shared/hooks/use-dapp-statuses.ts @@ -6,10 +6,10 @@ import { L2_CHAINS } from 'consts/chains'; import { useIsSupportedChain } from './use-is-supported-chain'; export const useDappStatuses = () => { - const { chainId, isConnected } = useAccount(); + const { chainId, isConnected: isWalletConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); - const isChainL2 = useMemo(() => { + const isL2Chain = useMemo(() => { return ( Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 ); @@ -18,13 +18,13 @@ export const useDappStatuses = () => { const isDappActive = useMemo(() => { if (!chainId) return false; - return isConnected && isSupportedChain; - }, [chainId, isConnected, isSupportedChain]); + return isWalletConnected && isSupportedChain; + }, [chainId, isWalletConnected, isSupportedChain]); return { - isConnected, + isWalletConnected, isSupportedChain, - isChainL2, + isL2Chain, isDappActive, }; }; From 40cefc12cff50454e02d7a5d232fd455eeb6a777 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 15:32:14 +0300 Subject: [PATCH 49/74] refactor: useDappStatuses --> useDappStatus --- features/rewards/features/top-card/top-card.tsx | 4 ++-- features/stake/stake-form/controls/stake-amount-input.tsx | 4 ++-- features/stake/stake-form/controls/stake-submit-button.tsx | 4 ++-- features/stake/stake-form/wallet/wallet.tsx | 4 ++-- features/withdrawals/claim/wallet/wallet.tsx | 4 ++-- .../request/form/controls/token-amount-input-request.tsx | 4 ++-- .../request/form/controls/token-select-request.tsx | 4 ++-- features/withdrawals/request/wallet/wallet.tsx | 4 ++-- features/wsteth/shared/wallet/wallet.tsx | 4 ++-- .../unwrap/unwrap-form-controls/amount-input-unwrap.tsx | 4 ++-- .../wrap/wrap-form-controls/token-amount-input-wrap.tsx | 4 ++-- features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx | 4 ++-- shared/components/layout/header/components/header-wallet.tsx | 4 ++-- shared/hooks/{use-dapp-statuses.ts => use-dapp-status.ts} | 2 +- shared/wallet/button/button.tsx | 4 ++-- 15 files changed, 29 insertions(+), 29 deletions(-) rename shared/hooks/{use-dapp-statuses.ts => use-dapp-status.ts} (94%) diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index 47f693fee..c86ea39f2 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -2,14 +2,14 @@ import { FC } from 'react'; import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { Fallback } from 'shared/wallet'; import { Wallet } from './wallet'; import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { isWalletConnected, isDappActive } = useDappStatuses(); + const { isWalletConnected, isDappActive } = useDappStatus(); return ( <> diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/features/stake/stake-form/controls/stake-amount-input.tsx index 6ea847016..b3f487c6c 100644 --- a/features/stake/stake-form/controls/stake-amount-input.tsx +++ b/features/stake/stake-form/controls/stake-amount-input.tsx @@ -2,10 +2,10 @@ import { Eth } from '@lidofinance/lido-ui'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; import { useStakeFormData } from '../stake-form-context'; import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; export const StakeAmountInput = () => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const { maxAmount, stakingLimitInfo } = useStakeFormData(); const { limitWarning, limitError } = useStakingLimitWarning( stakingLimitInfo?.stakeLimitLevel, diff --git a/features/stake/stake-form/controls/stake-submit-button.tsx b/features/stake/stake-form/controls/stake-submit-button.tsx index 31550e866..17ac6d7ff 100644 --- a/features/stake/stake-form/controls/stake-submit-button.tsx +++ b/features/stake/stake-form/controls/stake-submit-button.tsx @@ -1,11 +1,11 @@ import { LIMIT_LEVEL } from 'types'; import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useStakeFormData } from '../stake-form-context'; export const StakeSubmitButton = () => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const { stakingLimitInfo } = useStakeFormData(); return ( diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index c3dd9bb3d..6084d0f3a 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -9,7 +9,7 @@ import { LIDO_APR_TOOLTIP_TEXT, DATA_UNAVAILABLE } from 'consts/text'; import { TokenToWallet } from 'shared/components'; import { FormatToken } from 'shared/formatters'; import { useLidoApr } from 'shared/hooks'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { CardAccount, CardBalance, @@ -96,7 +96,7 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { isL2Chain, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatus(); if (isL2Chain) { return ; diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index 0a44205ac..378bd26db 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -7,7 +7,7 @@ import { WalletWrapperStyled, WalletMyRequests, } from 'features/withdrawals/shared'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; import type { WalletComponentType } from 'shared/wallet/types'; @@ -33,7 +33,7 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - const { isL2Chain, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatus(); if (isL2Chain) { return ; diff --git a/features/withdrawals/request/form/controls/token-amount-input-request.tsx b/features/withdrawals/request/form/controls/token-amount-input-request.tsx index 3d26556a2..ca317a62a 100644 --- a/features/withdrawals/request/form/controls/token-amount-input-request.tsx +++ b/features/withdrawals/request/form/controls/token-amount-input-request.tsx @@ -10,10 +10,10 @@ import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage'; import { trackMatomoEvent } from 'utils/track-matomo-event'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; export const TokenAmountInputRequest = () => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); diff --git a/features/withdrawals/request/form/controls/token-select-request.tsx b/features/withdrawals/request/form/controls/token-select-request.tsx index 4b83e6ca1..7916744b4 100644 --- a/features/withdrawals/request/form/controls/token-select-request.tsx +++ b/features/withdrawals/request/form/controls/token-select-request.tsx @@ -3,7 +3,7 @@ import { TokenOption, TokenSelectHookForm, } from 'shared/hook-form/controls/token-select-hook-form'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; const OPTIONS: TokenOption[] = [ { token: TOKENS.STETH }, @@ -11,7 +11,7 @@ const OPTIONS: TokenOption[] = [ ]; export const TokenSelectRequest = () => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); return ; }; diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index 39c6b7eea..b488441ac 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -8,7 +8,7 @@ import { useSDK } from '@lido-sdk/react'; import { WalletMyRequests } from 'features/withdrawals/shared'; import { WalletWrapperStyled } from 'features/withdrawals/shared'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import type { WalletComponentType } from 'shared/wallet/types'; import { WalletStethBalance } from './wallet-steth-balance'; @@ -37,7 +37,7 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - const { isL2Chain, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatus(); if (isL2Chain) { return ; diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 3f08cf2a9..2b0205692 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -14,7 +14,7 @@ import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; import { TokenToWallet } from 'shared/components'; import { useWstethBySteth, useStethByWsteth } from 'shared/hooks'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import type { WalletComponentType } from 'shared/wallet/types'; import { CardBalance, @@ -114,7 +114,7 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { isL2Chain, isDappActive } = useDappStatuses(); + const { isL2Chain, isDappActive } = useDappStatus(); if (isL2Chain) { return ; diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx index dd3e3a0a6..c324b44f2 100644 --- a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx +++ b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx @@ -2,12 +2,12 @@ import { Wsteth } from '@lidofinance/lido-ui'; import { TOKENS } from '@lido-sdk/constants'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useUnwrapFormData } from '../unwrap-form-context'; export const TokenAmountInputUnwrap = () => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const { maxAmount } = useUnwrapFormData(); return ( diff --git a/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx b/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx index 472a7ef67..e73a78c1c 100644 --- a/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx +++ b/features/wsteth/wrap/wrap-form-controls/token-amount-input-wrap.tsx @@ -1,7 +1,7 @@ import { useWatch } from 'react-hook-form'; import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useWrapFormData, WrapFormInputType } from '../wrap-form-context'; @@ -11,7 +11,7 @@ type TokenAmountInputWrapProps = Pick< >; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); diff --git a/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx b/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx index 320c636ec..d67a1c884 100644 --- a/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx +++ b/features/wsteth/wrap/wrap-form-controls/token-select-wrap.tsx @@ -3,7 +3,7 @@ import { trackEvent } from '@lidofinance/analytics-matomo'; import { TOKENS_TO_WRAP } from 'features/wsteth/shared/types'; import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; import { TokenSelectHookForm } from 'shared/hook-form/controls/token-select-hook-form'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; const OPTIONS = [ { @@ -22,7 +22,7 @@ type TokenSelectWrapProps = Pick< >; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); return ( { const router = useRouter(); const { chainId, address } = useAccount(); const { defaultChain: defaultChainId } = useUserConfig(); - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const chainName = CHAINS[chainId || defaultChainId]; const testNet = chainId !== CHAINS.Mainnet; diff --git a/shared/hooks/use-dapp-statuses.ts b/shared/hooks/use-dapp-status.ts similarity index 94% rename from shared/hooks/use-dapp-statuses.ts rename to shared/hooks/use-dapp-status.ts index 62139cace..067735632 100644 --- a/shared/hooks/use-dapp-statuses.ts +++ b/shared/hooks/use-dapp-status.ts @@ -5,7 +5,7 @@ import { L2_CHAINS } from 'consts/chains'; import { useIsSupportedChain } from './use-is-supported-chain'; -export const useDappStatuses = () => { +export const useDappStatus = () => { const { chainId, isConnected: isWalletConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); diff --git a/shared/wallet/button/button.tsx b/shared/wallet/button/button.tsx index 1662b1288..898c641eb 100644 --- a/shared/wallet/button/button.tsx +++ b/shared/wallet/button/button.tsx @@ -5,7 +5,7 @@ import { useEthereumBalance } from '@lido-sdk/react'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; -import { useDappStatuses } from 'shared/hooks/use-dapp-statuses'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { AddressBadge } from '../components/address-badge/address-badge'; import { useWalletModal } from '../wallet-modal/use-wallet-modal'; @@ -22,7 +22,7 @@ export const Button: FC = (props) => { const isMobile = useBreakpoint('md'); const { address } = useAccount(); - const { isDappActive } = useDappStatuses(); + const { isDappActive } = useDappStatus(); const { openModal } = useWalletModal(); const { data: balance, initialLoading } = useEthereumBalance( From 8043373ac00563aace7ac1e9c01ce727f733712a Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 15:45:17 +0300 Subject: [PATCH 50/74] refactor: simplify of using L2_CHAINS enum --- shared/hooks/use-dapp-status.ts | 6 +++--- shared/wallet/l2-fallback/l2-fallback.tsx | 13 +++++++------ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/shared/hooks/use-dapp-status.ts b/shared/hooks/use-dapp-status.ts index 067735632..4f41d1860 100644 --- a/shared/hooks/use-dapp-status.ts +++ b/shared/hooks/use-dapp-status.ts @@ -10,9 +10,9 @@ export const useDappStatus = () => { const isSupportedChain = useIsSupportedChain(); const isL2Chain = useMemo(() => { - return ( - Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) > -1 - ); + if (!chainId) return false; + + return !!L2_CHAINS[chainId]; }, [chainId]); const isDappActive = useMemo(() => { diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 2dc6e1420..365a42f65 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -40,18 +40,19 @@ export const L2Fallback: WalletCardComponent = (props) => { return CHAINS[defaultChain]; }, [defaultChain]); - const chainName = useMemo(() => { - return Object.keys(L2_CHAINS)[ - Object.values(L2_CHAINS).indexOf(chainId as unknown as L2_CHAINS) - ]; + const l2ChainName = useMemo(() => { + // Trick. Anyway, this condition is working only SPA starting. + if (!chainId) return ''; + + return L2_CHAINS[chainId]; }, [chainId]); return ( {getL2Logo(chainId as unknown as L2_CHAINS)} - Learn about Lido on L2 opportunities on {chainName} network or switch to - Ethereum {defaultChainName} to stake + Learn about Lido on L2 opportunities on {l2ChainName} network or switch + to Ethereum {defaultChainName} to stake Date: Fri, 12 Jul 2024 15:49:46 +0300 Subject: [PATCH 51/74] refactor: simplify of using L2_CHAINS enum --- shared/hooks/use-dapp-status.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/shared/hooks/use-dapp-status.ts b/shared/hooks/use-dapp-status.ts index 4f41d1860..64522cfed 100644 --- a/shared/hooks/use-dapp-status.ts +++ b/shared/hooks/use-dapp-status.ts @@ -9,11 +9,7 @@ export const useDappStatus = () => { const { chainId, isConnected: isWalletConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); - const isL2Chain = useMemo(() => { - if (!chainId) return false; - - return !!L2_CHAINS[chainId]; - }, [chainId]); + const isL2Chain = useMemo(() => !!chainId && !!L2_CHAINS[chainId], [chainId]); const isDappActive = useMemo(() => { if (!chainId) return false; From cbf4f8bcdf38eadec1051b92bf76f438c6dc488b Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 15:51:43 +0300 Subject: [PATCH 52/74] refactor: simplify of using L2_CHAINS enum --- shared/wallet/l2-fallback/l2-fallback.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 365a42f65..312520dd5 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -42,9 +42,7 @@ export const L2Fallback: WalletCardComponent = (props) => { const l2ChainName = useMemo(() => { // Trick. Anyway, this condition is working only SPA starting. - if (!chainId) return ''; - - return L2_CHAINS[chainId]; + return chainId ? L2_CHAINS[chainId] : ''; }, [chainId]); return ( From 0d33186152bb883030962408436a26f05857fd79 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 15:57:50 +0300 Subject: [PATCH 53/74] refactor: simplify of using L2_CHAINS enum --- shared/wallet/l2-fallback/l2-fallback.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 312520dd5..5d8a5fbb0 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -42,7 +42,7 @@ export const L2Fallback: WalletCardComponent = (props) => { const l2ChainName = useMemo(() => { // Trick. Anyway, this condition is working only SPA starting. - return chainId ? L2_CHAINS[chainId] : ''; + return (!!chainId && L2_CHAINS[chainId]) || 'unknown'; }, [chainId]); return ( From e9776ae0209e7ede0edc5c07d48f6104ef84a250 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 16:09:32 +0300 Subject: [PATCH 54/74] chore: comments --- shared/hook-form/controls/token-select-hook-form.tsx | 4 +++- shared/wallet/l2-fallback/l2-fallback.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/shared/hook-form/controls/token-select-hook-form.tsx b/shared/hook-form/controls/token-select-hook-form.tsx index e79d298ea..a96db5cd6 100644 --- a/shared/hook-form/controls/token-select-hook-form.tsx +++ b/shared/hook-form/controls/token-select-hook-form.tsx @@ -17,7 +17,9 @@ import { isValidationErrorTypeValidate } from 'shared/hook-form/validation/valid // Temporarily: The 'SelectIconStyle' is being used to fix the 'SelectIcon' from the UI lib. export const SelectIconStyle = styled((props) => )` & > span { - // The '!important' is important here! + // The '!important' is important here, + // because the 'lido-ui' lib has a bug with a disabled state + // when we move the cursor away from a SelectIcon (without the '!important' the SelectIcon becomes active). border-color: ${({ disabled }) => disabled && 'var(--lido-color-border)!important'}; background: ${({ disabled }) => diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx index 5d8a5fbb0..2fcaca055 100644 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ b/shared/wallet/l2-fallback/l2-fallback.tsx @@ -47,7 +47,7 @@ export const L2Fallback: WalletCardComponent = (props) => { return ( - {getL2Logo(chainId as unknown as L2_CHAINS)} + {getL2Logo(chainId as L2_CHAINS)} Learn about Lido on L2 opportunities on {l2ChainName} network or switch to Ethereum {defaultChainName} to stake From 3cb39f2c4612d9d468ec52c54f28617fe7ff587a Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Fri, 12 Jul 2024 16:16:54 +0300 Subject: [PATCH 55/74] refactor: styles file --- features/rewards/features/top-card/styles.tsx | 12 ++++++++++++ features/rewards/features/top-card/wallet.tsx | 13 +------------ shared/wallet/unsupported-chain-button/styles.tsx | 7 +++++++ .../unsupported-chain-button.tsx | 8 ++------ 4 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 features/rewards/features/top-card/styles.tsx create mode 100644 shared/wallet/unsupported-chain-button/styles.tsx diff --git a/features/rewards/features/top-card/styles.tsx b/features/rewards/features/top-card/styles.tsx new file mode 100644 index 000000000..5f9b5d6ab --- /dev/null +++ b/features/rewards/features/top-card/styles.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import { WalletCardStyle } from 'shared/wallet/card/styles'; + +export const WalletStyle = styled(WalletCardStyle)` + background: linear-gradient( + 52.01deg, + #37394a 0%, + #363749 0.01%, + #40504f 100% + ); + padding: 0 0 24px 0; +`; diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx index a53bde21d..b845facf3 100644 --- a/features/rewards/features/top-card/wallet.tsx +++ b/features/rewards/features/top-card/wallet.tsx @@ -1,5 +1,4 @@ import { FC } from 'react'; -import styled from 'styled-components'; import { ThemeProvider, themeDark } from '@lidofinance/lido-ui'; import { InputDescription } from 'features/rewards/components/inputDescription'; @@ -7,21 +6,11 @@ import { AddressInput } from 'features/rewards/components/addressInput'; import { InputWrapper } from 'features/rewards/components/inputWrapper'; import { useRewardsHistory } from 'features/rewards/hooks'; -import { WalletCardStyle } from 'shared/wallet/card/styles'; +import { WalletStyle } from './styles'; const INPUT_DESC_TEXT = 'Current balance may differ from last balance in the table due to rounding.'; -const WalletStyle = styled(WalletCardStyle)` - background: linear-gradient( - 52.01deg, - #37394a 0%, - #363749 0.01%, - #40504f 100% - ); - padding: 0 0 24px 0; -`; - export const Wallet: FC = () => { const { address, diff --git a/shared/wallet/unsupported-chain-button/styles.tsx b/shared/wallet/unsupported-chain-button/styles.tsx new file mode 100644 index 000000000..703ef90da --- /dev/null +++ b/shared/wallet/unsupported-chain-button/styles.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; +import { Button } from '@lidofinance/lido-ui'; + +export const ButtonStyle = styled((props) => ); diff --git a/features/rewards/features/top-card/connect-wallet.tsx b/features/rewards/features/top-card/connect-wallet.tsx index 0c9083880..21905e504 100644 --- a/features/rewards/features/top-card/connect-wallet.tsx +++ b/features/rewards/features/top-card/connect-wallet.tsx @@ -1,39 +1,11 @@ -import { FC, useCallback } from 'react'; -import { useConnect } from 'reef-knot/core-react'; -import { Button } from '@lidofinance/lido-ui'; -import { wrapWithEventTrack } from '@lidofinance/analytics-matomo'; +import { FC } from 'react'; -import { useUserConfig } from 'config/user-config'; -import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; - -import { ConnectWalletStyle, ConnectWalletTextStyle } from './styles'; +import { ConnectWalletStyle } from './styles'; export const ConnectWallet: FC = () => { - const { isWalletConnectionAllowed } = useUserConfig(); - const { connect } = useConnect(); - - const handleClick = wrapWithEventTrack( - MATOMO_CLICK_EVENTS.connectWallet, - useCallback(() => { - if (!isWalletConnectionAllowed) return; - void connect(); - }, [isWalletConnectionAllowed, connect]), - ); - return ( - - Connect your wallet to view staking stats - - +

Connect your wallet to view staking stats

 ); }; diff --git a/features/rewards/features/top-card/styles.tsx b/features/rewards/features/top-card/styles.tsx index 2b03a3d26..3e0c460ea 100644 --- a/features/rewards/features/top-card/styles.tsx +++ b/features/rewards/features/top-card/styles.tsx @@ -26,7 +26,3 @@ export const ConnectWalletStyle = styled(WalletCardStyle)` background: linear-gradient(48.34deg, #d2ddff -5.55%, #e6e6e6 100%); `} `; - -export const ConnectWalletTextStyle = styled.p` - margin-bottom: 12px; -`; From 857b98f8ce884de5e1564980a8411ab8da95705f Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Mon, 22 Jul 2024 19:09:27 +0300 Subject: [PATCH 64/74] refactor(forms): not disabled forms for not connected wallets --- .../stake/stake-form/controls/stake-amount-input.tsx | 4 ++-- .../request/form/controls/token-amount-input-request.tsx | 4 ++-- .../request/form/controls/token-select-request.tsx | 9 +++++++-- .../unwrap/unwrap-form-controls/amount-input-unwrap.tsx | 4 ++-- .../wrap/wrap-form-controls/token-amount-input-wrap.tsx | 4 ++-- .../wsteth/wrap/wrap-form-controls/token-select-wrap.tsx | 4 ++-- .../hook-form/controls/token-select-hook-form/styles.tsx | 6 +++--- 7 files changed, 20 insertions(+), 15 deletions(-) diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/features/stake/stake-form/controls/stake-amount-input.tsx index b3f487c6c..3b892e2e4 100644 --- a/features/stake/stake-form/controls/stake-amount-input.tsx +++ b/features/stake/stake-form/controls/stake-amount-input.tsx @@ -5,7 +5,7 @@ import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; export const StakeAmountInput = () => { - const { isDappActive } = useDappStatus(); + const { isWalletConnected, isDappActive } = useDappStatus(); const { maxAmount, stakingLimitInfo } = useStakeFormData(); const { limitWarning, limitError } = useStakingLimitWarning( stakingLimitInfo?.stakeLimitLevel, @@ -13,7 +13,7 @@ export const StakeAmountInput = () => { return ( { - const { isDappActive } = useDappStatus(); + const { isWalletConnected, isDappActive } = useDappStatus(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); @@ -27,7 +27,7 @@ export const TokenAmountInputRequest = () => { return ( { - const { isDappActive } = useDappStatus(); + const { isWalletConnected, isDappActive } = useDappStatus(); - return ; + return ( + + ); }; diff --git a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx index c324b44f2..fe6558f7c 100644 --- a/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx +++ b/features/wsteth/unwrap/unwrap-form-controls/amount-input-unwrap.tsx @@ -7,12 +7,12 @@ import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { useUnwrapFormData } from '../unwrap-form-context'; export const TokenAmountInputUnwrap = () => { - const { isDappActive } = useDappStatus(); + const { isWalletConnected, isDappActive } = useDappStatus(); const { maxAmount } = useUnwrapFormData(); return ( ; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { - const { isDappActive } = useDappStatus(); + const { isWalletConnected, isDappActive } = useDappStatus(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); return ( ; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { - const { isDappActive } = useDappStatus(); + const { isWalletConnected, isDappActive } = useDappStatus(); return ( { trackEvent( diff --git a/shared/hook-form/controls/token-select-hook-form/styles.tsx b/shared/hook-form/controls/token-select-hook-form/styles.tsx index d54691897..c4963fa0f 100644 --- a/shared/hook-form/controls/token-select-hook-form/styles.tsx +++ b/shared/hook-form/controls/token-select-hook-form/styles.tsx @@ -9,15 +9,15 @@ export const SelectIconStyle = styled((props) => )` // when we move the cursor away from a SelectIcon (without the '!important' the SelectIcon becomes active). border-color: ${({ disabled }) => disabled && 'var(--lido-color-border)!important'}; - background: ${({ disabled }) => - disabled ? 'var(--lido-color-background)' : 'transparent'}; + background: ${({ disabled }) => disabled && 'var(--lido-color-background)'}; } &:hover { & > span { border-color: ${({ disabled }) => disabled && 'var(--lido-color-border)'}; background: ${({ disabled }) => - disabled ? 'var(--lido-color-background)' : 'transparent'}; + disabled && 'var(--lido-color-background)'}; } + cursor: ${({ disabled }) => disabled && 'default'}; } `; From e736c7ff8733c7188ef73d570ad5256ef941726e Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Mon, 22 Jul 2024 20:55:54 +0300 Subject: [PATCH 65/74] refactor(forms): change disabled color --- .../components/input-amount/input-amount.tsx | 3 ++- shared/components/input-amount/styles.tsx | 15 ++++++++++++ .../token-select-hook-form/styles.tsx | 24 +++++++++++++++---- .../unsupported-chain-button/styles.tsx | 4 ++++ 4 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 shared/components/input-amount/styles.tsx diff --git a/shared/components/input-amount/input-amount.tsx b/shared/components/input-amount/input-amount.tsx index af6c62c9b..86b081a97 100644 --- a/shared/components/input-amount/input-amount.tsx +++ b/shared/components/input-amount/input-amount.tsx @@ -17,6 +17,7 @@ import { Input } from '@lidofinance/lido-ui'; import { InputDecoratorMaxButton } from './input-decorator-max-button'; import { InputDecoratorLocked } from './input-decorator-locked'; +import { InputStyle } from './styles'; type InputAmountProps = { onChange?: (value: BigNumber | null) => void; @@ -154,7 +155,7 @@ export const InputAmount = forwardRef( : undefined; return ( - )` + & > span { + ${({ theme, disabled }) => + theme.name === 'dark' + ? css` + background: ${disabled && '#27272E8F'}; + ` + : css` + background: ${disabled && '#EFF2F68F'}; + `} + } +`; diff --git a/shared/hook-form/controls/token-select-hook-form/styles.tsx b/shared/hook-form/controls/token-select-hook-form/styles.tsx index c4963fa0f..ea4756e60 100644 --- a/shared/hook-form/controls/token-select-hook-form/styles.tsx +++ b/shared/hook-form/controls/token-select-hook-form/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { SelectIcon } from '@lidofinance/lido-ui'; // Temporarily: The 'SelectIconStyle' is being used to fix the 'SelectIcon' from the UI lib. @@ -9,15 +9,31 @@ export const SelectIconStyle = styled((props) => )` // when we move the cursor away from a SelectIcon (without the '!important' the SelectIcon becomes active). border-color: ${({ disabled }) => disabled && 'var(--lido-color-border)!important'}; - background: ${({ disabled }) => disabled && 'var(--lido-color-background)'}; + + ${({ theme, disabled }) => + theme.name === 'dark' + ? css` + background: ${disabled && '#27272E8F'}; + ` + : css` + background: ${disabled && '#EFF2F68F'}; + `} } &:hover { & > span { border-color: ${({ disabled }) => disabled && 'var(--lido-color-border)'}; - background: ${({ disabled }) => - disabled && 'var(--lido-color-background)'}; + + ${({ theme, disabled }) => + theme.name === 'dark' + ? css` + background: ${disabled && '#27272E8F'}; + ` + : css` + background: ${disabled && '#EFF2F68F'}; + `} } + cursor: ${({ disabled }) => disabled && 'default'}; } `; diff --git a/shared/wallet/unsupported-chain-button/styles.tsx b/shared/wallet/unsupported-chain-button/styles.tsx index 703ef90da..dd5cc27c2 100644 --- a/shared/wallet/unsupported-chain-button/styles.tsx +++ b/shared/wallet/unsupported-chain-button/styles.tsx @@ -4,4 +4,8 @@ import { Button } from '@lidofinance/lido-ui'; export const ButtonStyle = styled((props) => + Connect your wallet or enter your Ethereum address to see the stats. ); diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index c86ea39f2..16bd62508 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -2,22 +2,13 @@ import { FC } from 'react'; import { StatsWrapper } from 'features/rewards/components/statsWrapper'; import { Stats } from 'features/rewards/components/stats'; -import { useDappStatus } from 'shared/hooks/use-dapp-status'; -import { Fallback } from 'shared/wallet'; import { Wallet } from './wallet'; -import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - const { isWalletConnected, isDappActive } = useDappStatus(); - return ( <> - {!isWalletConnected && } - - {!isDappActive && } - - {isDappActive && } + diff --git a/pages/rewards.tsx b/pages/rewards.tsx index 02113154c..06063e494 100644 --- a/pages/rewards.tsx +++ b/pages/rewards.tsx @@ -1,11 +1,17 @@ import { FC } from 'react'; import { GetStaticProps } from 'next'; import Head from 'next/head'; -import { Layout } from 'shared/components'; + import { TopCard, RewardsList } from 'features/rewards/features'; import RewardsHistoryProvider from 'providers/rewardsHistory'; +import { Layout } from 'shared/components'; +import { Fallback } from 'shared/wallet'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; + const Rewards: FC = () => { + const { isWalletConnected, isDappActive } = useDappStatus(); + return ( { /> + {isWalletConnected && !isDappActive && } From 9763d6972d706c05a62dea73bd657287fcbda2c3 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 15:19:50 +0300 Subject: [PATCH 67/74] refactor: show L2 banners for defaultChain=Mainnet --- features/stake/stake-form/wallet/wallet.tsx | 14 +++++++++++++- features/withdrawals/claim/wallet/wallet.tsx | 13 ++++++++++++- features/withdrawals/request/wallet/wallet.tsx | 13 ++++++++++++- features/wsteth/shared/wallet/wallet.tsx | 13 ++++++++++++- 4 files changed, 49 insertions(+), 4 deletions(-) diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index 6084d0f3a..2eb1eda20 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -5,7 +5,10 @@ import { TOKENS } from '@lido-sdk/constants'; import { useTokenAddress } from '@lido-sdk/react'; import { Divider, Question, Tooltip } from '@lidofinance/lido-ui'; +import { useConfig } from 'config'; import { LIDO_APR_TOOLTIP_TEXT, DATA_UNAVAILABLE } from 'consts/text'; +import { CHAINS } from 'consts/chains'; + import { TokenToWallet } from 'shared/components'; import { FormatToken } from 'shared/formatters'; import { useLidoApr } from 'shared/hooks'; @@ -18,6 +21,7 @@ import { L2Fallback, } from 'shared/wallet'; import type { WalletComponentType } from 'shared/wallet/types'; +import { overrideWithQAMockBoolean } from 'utils/qa'; import { LimitMeter } from './limit-meter'; import { FlexCenter, LidoAprStyled, StyledCard } from './styles'; @@ -96,9 +100,17 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { + const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - if (isL2Chain) { + // Display L2 banners only for defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + isL2Chain && config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (showL2Chain) { return ; } diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index 378bd26db..102e9ebb6 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -3,6 +3,8 @@ import { memo } from 'react'; import { Divider } from '@lidofinance/lido-ui'; import { useSDK } from '@lido-sdk/react'; +import { useConfig } from 'config'; +import { CHAINS } from 'consts/chains'; import { WalletWrapperStyled, WalletMyRequests, @@ -13,6 +15,7 @@ import type { WalletComponentType } from 'shared/wallet/types'; import { WalletAvailableAmount } from './wallet-availale-amount'; import { WalletPendingAmount } from './wallet-pending-amount'; +import { overrideWithQAMockBoolean } from 'utils/qa'; export const WalletComponent = () => { const { account } = useSDK(); @@ -33,9 +36,17 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { + const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - if (isL2Chain) { + // Display L2 banners only for defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + isL2Chain && config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (showL2Chain) { return ; } diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index b488441ac..199384650 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -5,11 +5,14 @@ import { TOKENS } from '@lido-sdk/constants'; import { Divider } from '@lidofinance/lido-ui'; import { useSDK } from '@lido-sdk/react'; +import { useConfig } from 'config'; +import { CHAINS } from 'consts/chains'; import { WalletMyRequests } from 'features/withdrawals/shared'; import { WalletWrapperStyled } from 'features/withdrawals/shared'; import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; import type { WalletComponentType } from 'shared/wallet/types'; +import { overrideWithQAMockBoolean } from 'utils/qa'; import { WalletStethBalance } from './wallet-steth-balance'; import { WalletWstethBalance } from './wallet-wsteth-balance'; @@ -37,9 +40,17 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { + const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - if (isL2Chain) { + // Display L2 banners only for defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + isL2Chain && config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (showL2Chain) { return ; } diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 2b0205692..dd908c829 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -10,6 +10,8 @@ import { useTokenAddress, } from '@lido-sdk/react'; +import { useConfig } from 'config'; +import { CHAINS } from 'consts/chains'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { FormatToken } from 'shared/formatters'; import { TokenToWallet } from 'shared/components'; @@ -23,6 +25,7 @@ import { Fallback, L2Fallback, } from 'shared/wallet'; +import { overrideWithQAMockBoolean } from 'utils/qa'; import { StyledCard } from './styles'; @@ -114,9 +117,17 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { + const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - if (isL2Chain) { + // Display L2 banners only for defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + isL2Chain && config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (showL2Chain) { return ; } From e60810f62227774a7d3b871b7def6b8a5e6df72c Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 15:31:28 +0300 Subject: [PATCH 68/74] refactor(withdrawals/claim): text for 'isWalletConnected && !isDappActive' state --- .../form/requests-list/requests-empty.tsx | 21 ++++++++++++++++++- .../form/requests-list/requests-list.tsx | 14 +++++++++---- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/features/withdrawals/claim/form/requests-list/requests-empty.tsx b/features/withdrawals/claim/form/requests-list/requests-empty.tsx index 872a76f05..e959f5cc0 100644 --- a/features/withdrawals/claim/form/requests-list/requests-empty.tsx +++ b/features/withdrawals/claim/form/requests-list/requests-empty.tsx @@ -1,10 +1,19 @@ +import { CHAINS } from '@lido-sdk/constants'; +import { useUserConfig } from 'config/user-config'; + import { EmptyText, WrapperEmpty } from './styles'; type RequestsEmptyProps = { isWalletConnected?: boolean; + isDappActive?: boolean; }; -export const RequestsEmpty = ({ isWalletConnected }: RequestsEmptyProps) => { +export const RequestsEmpty = ({ + isWalletConnected, + isDappActive, +}: RequestsEmptyProps) => { + const { defaultChain } = useUserConfig(); + if (!isWalletConnected) { return ( @@ -13,6 +22,16 @@ export const RequestsEmpty = ({ isWalletConnected }: RequestsEmptyProps) => { ); } + if (isWalletConnected && !isDappActive) { + return ( + + + Switch to {CHAINS[defaultChain]} to see your withdrawal requests + + + ); + } + return ( No withdrawal requests detected. diff --git a/features/withdrawals/claim/form/requests-list/requests-list.tsx b/features/withdrawals/claim/form/requests-list/requests-list.tsx index 47ace4b23..4ed62d276 100644 --- a/features/withdrawals/claim/form/requests-list/requests-list.tsx +++ b/features/withdrawals/claim/form/requests-list/requests-list.tsx @@ -1,13 +1,14 @@ +import { useDappStatus } from 'shared/hooks/use-dapp-status'; + import { RequestItem } from './request-item'; import { RequestsEmpty } from './requests-empty'; import { Wrapper } from './styles'; import { RequestsLoader } from './requests-loader'; import { useFieldArray, useFormContext, useFormState } from 'react-hook-form'; import { ClaimFormInputType } from '../../claim-form-context'; -import { useWeb3 } from 'reef-knot/web3-react'; export const RequestsList: React.FC = () => { - const { active } = useWeb3(); + const { isWalletConnected, isDappActive } = useDappStatus(); const { isLoading } = useFormState(); const { register } = useFormContext(); const { fields } = useFieldArray({ @@ -18,8 +19,13 @@ export const RequestsList: React.FC = () => { return ; } - if (!active || fields.length === 0) { - return ; + if (!isDappActive || fields.length === 0) { + return ( + + ); } return ( From b627d13e9f29f569094cc70acf9dcad0b3332f77 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 16:23:32 +0300 Subject: [PATCH 69/74] fix: pass amount from query --- .../components/input-amount/input-amount.tsx | 43 ++++++++++--------- shared/components/input-amount/styles.tsx | 23 +++++----- 2 files changed, 35 insertions(+), 31 deletions(-) diff --git a/shared/components/input-amount/input-amount.tsx b/shared/components/input-amount/input-amount.tsx index 86b081a97..a153678db 100644 --- a/shared/components/input-amount/input-amount.tsx +++ b/shared/components/input-amount/input-amount.tsx @@ -17,7 +17,7 @@ import { Input } from '@lidofinance/lido-ui'; import { InputDecoratorMaxButton } from './input-decorator-max-button'; import { InputDecoratorLocked } from './input-decorator-locked'; -import { InputStyle } from './styles'; +import { InputWrapperStyle } from './styles'; type InputAmountProps = { onChange?: (value: BigNumber | null) => void; @@ -154,26 +154,29 @@ export const InputAmount = forwardRef( } : undefined; + // Fix: We use InputWrapperStyle as wrapper, because `StakeFormProvider` works incorrect with Input styled (issue with ForwardRef) return ( - - - {isLocked ? : undefined} - - ) - } - inputMode="decimal" - defaultValue={defaultValue} - onChange={handleChange} - ref={inputRef} - /> + + + + {isLocked ? : undefined} + + ) + } + inputMode="decimal" + defaultValue={defaultValue} + onChange={handleChange} + ref={inputRef} + /> + ); }, ); diff --git a/shared/components/input-amount/styles.tsx b/shared/components/input-amount/styles.tsx index ffb0e580b..9258e56ee 100644 --- a/shared/components/input-amount/styles.tsx +++ b/shared/components/input-amount/styles.tsx @@ -1,15 +1,16 @@ import styled, { css } from 'styled-components'; -import { Input } from '@lidofinance/lido-ui'; -export const InputStyle = styled((props) => )` - & > span { - ${({ theme, disabled }) => - theme.name === 'dark' - ? css` - background: ${disabled && '#27272E8F'}; - ` - : css` - background: ${disabled && '#EFF2F68F'}; - `} +export const InputWrapperStyle = styled.div<{ $disabled?: boolean }>` + & > label { + & > span { + ${({ theme, $disabled }) => + theme.name === 'dark' + ? css` + background: ${$disabled && '#27272E8F'}; + ` + : css` + background: ${$disabled && '#EFF2F68F'}; + `} + } } `; From eed21987be8ef7cc3aaaf22a80163b8ace37084a Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 20:33:10 +0300 Subject: [PATCH 70/74] Revert "fix: pass amount from query" This reverts commit b627d13e9f29f569094cc70acf9dcad0b3332f77. --- .../components/input-amount/input-amount.tsx | 43 +++++++++---------- shared/components/input-amount/styles.tsx | 23 +++++----- 2 files changed, 31 insertions(+), 35 deletions(-) diff --git a/shared/components/input-amount/input-amount.tsx b/shared/components/input-amount/input-amount.tsx index a153678db..86b081a97 100644 --- a/shared/components/input-amount/input-amount.tsx +++ b/shared/components/input-amount/input-amount.tsx @@ -17,7 +17,7 @@ import { Input } from '@lidofinance/lido-ui'; import { InputDecoratorMaxButton } from './input-decorator-max-button'; import { InputDecoratorLocked } from './input-decorator-locked'; -import { InputWrapperStyle } from './styles'; +import { InputStyle } from './styles'; type InputAmountProps = { onChange?: (value: BigNumber | null) => void; @@ -154,29 +154,26 @@ export const InputAmount = forwardRef( } : undefined; - // Fix: We use InputWrapperStyle as wrapper, because `StakeFormProvider` works incorrect with Input styled (issue with ForwardRef) return ( - - - - {isLocked ? : undefined} - - ) - } - inputMode="decimal" - defaultValue={defaultValue} - onChange={handleChange} - ref={inputRef} - /> - + + + {isLocked ? : undefined} + + ) + } + inputMode="decimal" + defaultValue={defaultValue} + onChange={handleChange} + ref={inputRef} + /> ); }, ); diff --git a/shared/components/input-amount/styles.tsx b/shared/components/input-amount/styles.tsx index 9258e56ee..ffb0e580b 100644 --- a/shared/components/input-amount/styles.tsx +++ b/shared/components/input-amount/styles.tsx @@ -1,16 +1,15 @@ import styled, { css } from 'styled-components'; +import { Input } from '@lidofinance/lido-ui'; -export const InputWrapperStyle = styled.div<{ $disabled?: boolean }>` - & > label { - & > span { - ${({ theme, $disabled }) => - theme.name === 'dark' - ? css` - background: ${$disabled && '#27272E8F'}; - ` - : css` - background: ${$disabled && '#EFF2F68F'}; - `} - } +export const InputStyle = styled((props) => )` + & > span { + ${({ theme, disabled }) => + theme.name === 'dark' + ? css` + background: ${disabled && '#27272E8F'}; + ` + : css` + background: ${disabled && '#EFF2F68F'}; + `} } `; From b48d8cb9e2c16fdb19221a0063383a17162587c4 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 21:01:51 +0300 Subject: [PATCH 71/74] fix(SelectIconStyle): styled components + react hook form --- shared/hook-form/controls/token-select-hook-form/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/hook-form/controls/token-select-hook-form/styles.tsx b/shared/hook-form/controls/token-select-hook-form/styles.tsx index ea4756e60..0082fa309 100644 --- a/shared/hook-form/controls/token-select-hook-form/styles.tsx +++ b/shared/hook-form/controls/token-select-hook-form/styles.tsx @@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'; import { SelectIcon } from '@lidofinance/lido-ui'; // Temporarily: The 'SelectIconStyle' is being used to fix the 'SelectIcon' from the UI lib. -export const SelectIconStyle = styled((props) => )` +export const SelectIconStyle = styled(SelectIcon)` & > span { // The '!important' is important here, // because the 'lido-ui' lib has a bug with a disabled state From a7ad507dd986a09d46edb60e3b56541627c5d2ad Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 21:02:01 +0300 Subject: [PATCH 72/74] fix(InputStyle): styled components + react hook form --- shared/components/input-amount/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/components/input-amount/styles.tsx b/shared/components/input-amount/styles.tsx index ffb0e580b..04b9891fa 100644 --- a/shared/components/input-amount/styles.tsx +++ b/shared/components/input-amount/styles.tsx @@ -1,7 +1,7 @@ import styled, { css } from 'styled-components'; import { Input } from '@lidofinance/lido-ui'; -export const InputStyle = styled((props) => )` +export const InputStyle = styled(Input)` & > span { ${({ theme, disabled }) => theme.name === 'dark' From a8fbf224e49f1833d6273dab6c92b3665d754f50 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Wed, 24 Jul 2024 21:19:16 +0300 Subject: [PATCH 73/74] feat(qa): more accurate check for l2 banners --- features/stake/stake-form/wallet/wallet.tsx | 6 +++--- features/withdrawals/claim/wallet/wallet.tsx | 6 +++--- features/withdrawals/request/wallet/wallet.tsx | 6 +++--- features/wsteth/shared/wallet/wallet.tsx | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index 2eb1eda20..e7bca3dbb 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -103,14 +103,14 @@ export const Wallet: WalletComponentType = memo((props) => { const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - // Display L2 banners only for defaultChain=Mainnet + // Display L2 banners only if defaultChain=Mainnet // Or via QA helpers override const showL2Chain = overrideWithQAMockBoolean( - isL2Chain && config.defaultChain === CHAINS.Mainnet, + config.defaultChain === CHAINS.Mainnet, 'mock-qa-helpers-show-l2-banners-on-testnet', ); - if (showL2Chain) { + if (isL2Chain && showL2Chain) { return ; } diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index 102e9ebb6..174a62404 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -39,14 +39,14 @@ export const ClaimWallet: WalletComponentType = memo((props) => { const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - // Display L2 banners only for defaultChain=Mainnet + // Display L2 banners only if defaultChain=Mainnet // Or via QA helpers override const showL2Chain = overrideWithQAMockBoolean( - isL2Chain && config.defaultChain === CHAINS.Mainnet, + config.defaultChain === CHAINS.Mainnet, 'mock-qa-helpers-show-l2-banners-on-testnet', ); - if (showL2Chain) { + if (isL2Chain && showL2Chain) { return ; } diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index 199384650..ffb83d94a 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -43,14 +43,14 @@ export const RequestWallet: WalletComponentType = memo((props) => { const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - // Display L2 banners only for defaultChain=Mainnet + // Display L2 banners only if defaultChain=Mainnet // Or via QA helpers override const showL2Chain = overrideWithQAMockBoolean( - isL2Chain && config.defaultChain === CHAINS.Mainnet, + config.defaultChain === CHAINS.Mainnet, 'mock-qa-helpers-show-l2-banners-on-testnet', ); - if (showL2Chain) { + if (isL2Chain && showL2Chain) { return ; } diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index dd908c829..d06df033b 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -120,14 +120,14 @@ export const Wallet: WalletComponentType = memo((props) => { const { config } = useConfig(); const { isL2Chain, isDappActive } = useDappStatus(); - // Display L2 banners only for defaultChain=Mainnet + // Display L2 banners only if defaultChain=Mainnet // Or via QA helpers override const showL2Chain = overrideWithQAMockBoolean( - isL2Chain && config.defaultChain === CHAINS.Mainnet, + config.defaultChain === CHAINS.Mainnet, 'mock-qa-helpers-show-l2-banners-on-testnet', ); - if (showL2Chain) { + if (isL2Chain && showL2Chain) { return ; } From 37735e7615ca0c21eaf14f0bc9b6c938f256c722 Mon Sep 17 00:00:00 2001 From: Andrew Finaev Date: Thu, 25 Jul 2024 17:49:24 +0300 Subject: [PATCH 74/74] Revert "[fix] remove usage of wallet rpc during tx" --- features/stake/stake-form/hooks.ts | 2 +- features/stake/stake-form/use-stake.ts | 34 ++-- features/stake/stake-form/utils.ts | 7 +- .../withdrawals/hooks/contract/useClaim.ts | 41 +++-- .../withdrawals/hooks/contract/useRequest.ts | 169 +++++++++++------- .../unwrap/hooks/use-unwrap-tx-processing.ts | 21 ++- .../wsteth/wrap/hooks/use-wrap-gas-limit.ts | 14 +- .../wrap/hooks/use-wrap-tx-processing.ts | 58 +++--- shared/hooks/useApprove.ts | 30 ++-- utils/apply-gas-limit-ratio.ts | 7 - utils/estimate-gas.ts | 25 --- utils/send-tx.ts | 42 ----- 12 files changed, 231 insertions(+), 219 deletions(-) delete mode 100644 utils/apply-gas-limit-ratio.ts delete mode 100644 utils/estimate-gas.ts delete mode 100644 utils/send-tx.ts diff --git a/features/stake/stake-form/hooks.ts b/features/stake/stake-form/hooks.ts index 96718bc2c..3414c044f 100644 --- a/features/stake/stake-form/hooks.ts +++ b/features/stake/stake-form/hooks.ts @@ -5,7 +5,7 @@ import { useLidoSWR, useSDK, useSTETHContractRPC } from '@lido-sdk/react'; import { config } from 'config'; import { STRATEGY_CONSTANT } from 'consts/swr-strategies'; -import { applyGasLimitRatio } from 'utils/apply-gas-limit-ratio'; +import { applyGasLimitRatio } from './utils'; type UseStethSubmitGasLimit = () => BigNumber; diff --git a/features/stake/stake-form/use-stake.ts b/features/stake/stake-form/use-stake.ts index c2bc8832f..997836c81 100644 --- a/features/stake/stake-form/use-stake.ts +++ b/features/stake/stake-form/use-stake.ts @@ -8,17 +8,17 @@ import { useSDK, useSTETHContractWeb3 } from '@lido-sdk/react'; import { config } from 'config'; import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; import { isContract } from 'utils/isContract'; +import { getFeeData } from 'utils/getFeeData'; import { runWithTransactionLogger } from 'utils'; import { MockLimitReachedError, getAddress, + applyGasLimitRatio, applyCalldataSuffix, } from './utils'; import { useTxModalStagesStake } from './hooks/use-tx-modal-stages-stake'; -import { sendTx } from 'utils/send-tx'; - type StakeArguments = { amount: BigNumber | null; referral: string | null; @@ -33,7 +33,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { const stethContractWeb3 = useSTETHContractWeb3(); const { account, chainId } = useWeb3(); const { staticRpcProvider } = useCurrentStaticRpcProvider(); - const { providerWeb3 } = useSDK(); + const { providerWeb3, providerRpc } = useSDK(); const { txModalStages } = useTxModalStagesStake(); // temporary disable until Ledger is fixed @@ -58,9 +58,9 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { txModalStages.sign(amount); const [isMultisig, referralAddress] = await Promise.all([ - isContract(account, staticRpcProvider), + isContract(account, providerRpc), referral - ? getAddress(referral, staticRpcProvider) + ? getAddress(referral, providerRpc) : config.STAKE_FALLBACK_REFERRAL_ADDRESS, ]); @@ -74,13 +74,22 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { if (shouldApplyCalldataSuffix) applyCalldataSuffix(tx); - return sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - shouldApplyGasLimitRatio: true, - }); + if (isMultisig) { + return providerWeb3.getSigner().sendUncheckedTransaction(tx); + } else { + const { maxFeePerGas, maxPriorityFeePerGas } = + await getFeeData(staticRpcProvider); + + tx.maxFeePerGas = maxFeePerGas; + tx.maxPriorityFeePerGas = maxPriorityFeePerGas; + + const originalGasLimit = await providerWeb3.estimateGas(tx); + const gasLimit = applyGasLimitRatio(originalGasLimit); + + tx.gasLimit = gasLimit; + + return providerWeb3.getSigner().sendTransaction(tx); + } }; const tx = await runWithTransactionLogger('Stake signing', callback); @@ -118,6 +127,7 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => { providerWeb3, stethContractWeb3, txModalStages, + providerRpc, onConfirm, staticRpcProvider, shouldApplyCalldataSuffix, diff --git a/features/stake/stake-form/utils.ts b/features/stake/stake-form/utils.ts index 7ebb9daf8..ed0cd4ead 100644 --- a/features/stake/stake-form/utils.ts +++ b/features/stake/stake-form/utils.ts @@ -1,10 +1,15 @@ -import type { PopulatedTransaction } from 'ethers'; +import type { BigNumber, PopulatedTransaction } from 'ethers'; import { isAddress } from 'ethers/lib/utils'; import type { BaseProvider } from '@ethersproject/providers'; import { config } from 'config'; import invariant from 'tiny-invariant'; +export const applyGasLimitRatio = (gasLimit: BigNumber): BigNumber => + gasLimit + .mul(config.SUBMIT_EXTRA_GAS_TRANSACTION_RATIO * config.PRECISION) + .div(config.PRECISION); + export const getAddress = async ( input: string, providerRpc: BaseProvider, diff --git a/features/withdrawals/hooks/contract/useClaim.ts b/features/withdrawals/hooks/contract/useClaim.ts index 04f6402b1..9cd1bcdf8 100644 --- a/features/withdrawals/hooks/contract/useClaim.ts +++ b/features/withdrawals/hooks/contract/useClaim.ts @@ -11,8 +11,6 @@ import { isContract } from 'utils/isContract'; import { useWeb3 } from 'reef-knot/web3-react'; import { useSDK } from '@lido-sdk/react'; import { useTxModalStagesClaim } from 'features/withdrawals/claim/transaction-modal-claim/use-tx-modal-stages-claim'; -import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; -import { sendTx } from 'utils/send-tx'; type Args = { onRetry?: () => void; @@ -22,7 +20,6 @@ export const useClaim = ({ onRetry }: Args) => { const { account } = useWeb3(); const { providerWeb3 } = useSDK(); const { contractWeb3 } = useWithdrawalsContract(); - const { staticRpcProvider } = useCurrentStaticRpcProvider(); const { optimisticClaimRequests } = useClaimData(); const { txModalStages } = useTxModalStagesClaim(); @@ -46,16 +43,31 @@ export const useClaim = ({ onRetry }: Args) => { const ids = sortedRequests.map((r) => r.id); const hints = sortedRequests.map((r) => r.hint); const callback = async () => { - const tx = await contractWeb3.populateTransaction.claimWithdrawals( - ids, - hints, - ); - return sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + if (isMultisig) { + const tx = await contractWeb3.populateTransaction.claimWithdrawals( + ids, + hints, + ); + return providerWeb3.getSigner().sendUncheckedTransaction(tx); + } else { + const feeData = await contractWeb3.provider.getFeeData(); + const maxFeePerGas = feeData.maxFeePerGas ?? undefined; + const maxPriorityFeePerGas = + feeData.maxPriorityFeePerGas ?? undefined; + const gasLimit = await contractWeb3.estimateGas.claimWithdrawals( + ids, + hints, + { + maxFeePerGas, + maxPriorityFeePerGas, + }, + ); + return contractWeb3.claimWithdrawals(ids, hints, { + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit, + }); + } }; const tx = await runWithTransactionLogger('Claim signing', callback); @@ -88,9 +100,8 @@ export const useClaim = ({ onRetry }: Args) => { contractWeb3, account, providerWeb3, - txModalStages, - staticRpcProvider, optimisticClaimRequests, + txModalStages, onRetry, ], ); diff --git a/features/withdrawals/hooks/contract/useRequest.ts b/features/withdrawals/hooks/contract/useRequest.ts index 7ce7b71f9..45896bd3c 100644 --- a/features/withdrawals/hooks/contract/useRequest.ts +++ b/features/withdrawals/hooks/contract/useRequest.ts @@ -1,4 +1,3 @@ -/* eslint-disable sonarjs/no-identical-functions */ import { useCallback } from 'react'; import { BigNumber } from 'ethers'; import invariant from 'tiny-invariant'; @@ -23,11 +22,11 @@ import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc import { useApprove } from 'shared/hooks/useApprove'; import { runWithTransactionLogger } from 'utils'; import { isContract } from 'utils/isContract'; +import { getFeeData } from 'utils/getFeeData'; import { useWithdrawalsContract } from './useWithdrawalsContract'; import { useTxModalStagesRequest } from 'features/withdrawals/request/transaction-modal-request/use-tx-modal-stages-request'; import { useTransactionModal } from 'shared/transaction-modal/transaction-modal'; -import { sendTx } from 'utils/send-tx'; // this encapsulates permit/approval & steth/wsteth flows const useWithdrawalRequestMethods = () => { @@ -45,34 +44,41 @@ const useWithdrawalRequestMethods = () => { }) => { invariant(chainId, 'must have chainId'); invariant(account, 'must have account'); - invariant(providerWeb3, 'must have providerWeb3'); invariant(signature, 'must have signature'); invariant(contractWeb3, 'must have contractWeb3'); - const tx = - await contractWeb3.populateTransaction.requestWithdrawalsWithPermit( - requests, - signature.owner, - { - value: signature.value, - deadline: signature.deadline, - v: signature.v, - r: signature.r, - s: signature.s, - }, - ); + const params = [ + requests, + signature.owner, + { + value: signature.value, + deadline: signature.deadline, + v: signature.v, + r: signature.r, + s: signature.s, + }, + ] as const; + + const { maxFeePerGas, maxPriorityFeePerGas } = + await getFeeData(staticRpcProvider); + const gasLimit = + await contractWeb3.estimateGas.requestWithdrawalsWithPermit(...params, { + maxFeePerGas, + maxPriorityFeePerGas, + }); + + const txOptions = { + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit, + }; const callback = () => - sendTx({ - tx, - isMultisig: false, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + contractWeb3.requestWithdrawalsWithPermit(...params, txOptions); return callback; }, - [account, chainId, contractWeb3, providerWeb3, staticRpcProvider], + [account, chainId, contractWeb3, staticRpcProvider], ); const permitWsteth = useCallback( @@ -86,33 +92,44 @@ const useWithdrawalRequestMethods = () => { invariant(chainId, 'must have chainId'); invariant(account, 'must have account'); invariant(signature, 'must have signature'); - invariant(providerWeb3, 'must have providerWeb3'); invariant(contractWeb3, 'must have contractWeb3'); - const tx = - await contractWeb3.populateTransaction.requestWithdrawalsWstETHWithPermit( - requests, - signature.owner, + const params = [ + requests, + signature.owner, + { + value: signature.value, + deadline: signature.deadline, + v: signature.v, + r: signature.r, + s: signature.s, + }, + ] as const; + + const feeData = await getFeeData(staticRpcProvider); + const maxFeePerGas = feeData.maxFeePerGas ?? undefined; + const maxPriorityFeePerGas = feeData.maxPriorityFeePerGas ?? undefined; + const gasLimit = + await contractWeb3.estimateGas.requestWithdrawalsWstETHWithPermit( + ...params, { - value: signature.value, - deadline: signature.deadline, - v: signature.v, - r: signature.r, - s: signature.s, + maxFeePerGas, + maxPriorityFeePerGas, }, ); + const txOptions = { + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit, + }; + const callback = () => - sendTx({ - tx, - isMultisig: false, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + contractWeb3.requestWithdrawalsWstETHWithPermit(...params, txOptions); return callback; }, - [account, chainId, contractWeb3, providerWeb3, staticRpcProvider], + [account, chainId, contractWeb3, staticRpcProvider], ); const steth = useCallback( @@ -124,18 +141,31 @@ const useWithdrawalRequestMethods = () => { const isMultisig = await isContract(account, contractWeb3.provider); - const tx = await contractWeb3.populateTransaction.requestWithdrawals( - requests, - account, - ); - - const callback = async () => - sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + const params = [requests, account] as const; + + const callback = async () => { + if (isMultisig) { + const tx = await contractWeb3.populateTransaction.requestWithdrawals( + ...params, + ); + return providerWeb3?.getSigner().sendUncheckedTransaction(tx); + } else { + const { maxFeePerGas, maxPriorityFeePerGas } = + await getFeeData(staticRpcProvider); + const gasLimit = await contractWeb3.estimateGas.requestWithdrawals( + ...params, + { + maxFeePerGas, + maxPriorityFeePerGas, + }, + ); + return contractWeb3.requestWithdrawals(...params, { + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit, + }); + } + }; return callback; }, @@ -150,19 +180,30 @@ const useWithdrawalRequestMethods = () => { invariant(providerWeb3, 'must have providerWeb3'); const isMultisig = await isContract(account, contractWeb3.provider); - const tx = - await contractWeb3.populateTransaction.requestWithdrawalsWstETH( - requests, - account, - ); - - const callback = async () => - sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + const params = [requests, account] as const; + const callback = async () => { + if (isMultisig) { + const tx = + await contractWeb3.populateTransaction.requestWithdrawalsWstETH( + requests, + account, + ); + return providerWeb3?.getSigner().sendUncheckedTransaction(tx); + } else { + const { maxFeePerGas, maxPriorityFeePerGas } = + await getFeeData(staticRpcProvider); + const gasLimit = + await contractWeb3.estimateGas.requestWithdrawalsWstETH(...params, { + maxFeePerGas, + maxPriorityFeePerGas, + }); + return contractWeb3.requestWithdrawalsWstETH(...params, { + maxFeePerGas, + maxPriorityFeePerGas, + gasLimit, + }); + } + }; return callback; }, diff --git a/features/wsteth/unwrap/hooks/use-unwrap-tx-processing.ts b/features/wsteth/unwrap/hooks/use-unwrap-tx-processing.ts index eb0742eed..a2ec46b77 100644 --- a/features/wsteth/unwrap/hooks/use-unwrap-tx-processing.ts +++ b/features/wsteth/unwrap/hooks/use-unwrap-tx-processing.ts @@ -4,9 +4,9 @@ import invariant from 'tiny-invariant'; import { useSDK, useWSTETHContractWeb3 } from '@lido-sdk/react'; import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; +import { getFeeData } from 'utils/getFeeData'; import type { UnwrapFormInputType } from '../unwrap-form-context'; -import { sendTx } from 'utils/send-tx'; type UnwrapTxProcessorArgs = Omit & { isMultisig: boolean; @@ -24,14 +24,17 @@ export const useUnwrapTxProcessing = () => { invariant(providerWeb3, 'providerWeb3 must be presented'); invariant(wstethContractWeb3, 'must have wstethContractWeb3'); - const tx = await wstethContractWeb3.populateTransaction.unwrap(amount); - - return sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + if (isMultisig) { + const tx = await wstethContractWeb3.populateTransaction.unwrap(amount); + return providerWeb3.getSigner().sendUncheckedTransaction(tx); + } else { + const { maxFeePerGas, maxPriorityFeePerGas } = + await getFeeData(staticRpcProvider); + return wstethContractWeb3.unwrap(amount, { + maxPriorityFeePerGas: maxPriorityFeePerGas ?? undefined, + maxFeePerGas: maxFeePerGas ?? undefined, + }); + } }, [chainId, providerWeb3, staticRpcProvider, wstethContractWeb3], ); diff --git a/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts b/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts index 60d44f792..ac2231866 100644 --- a/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts +++ b/features/wsteth/wrap/hooks/use-wrap-gas-limit.ts @@ -4,7 +4,7 @@ import { useLidoSWR, useWSTETHContractRPC } from '@lido-sdk/react'; import { config } from 'config'; import { WRAP_FROM_ETH_GAS_LIMIT, WRAP_GAS_LIMIT } from 'consts/tx'; import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; -import { applyGasLimitRatio } from 'utils/apply-gas-limit-ratio'; +import { applyGasLimitRatio } from 'features/stake/stake-form/utils'; export const useWrapGasLimit = () => { const wsteth = useWSTETHContractRPC(); @@ -18,13 +18,11 @@ export const useWrapGasLimit = () => { const fetchGasLimitETH = async () => { try { - return applyGasLimitRatio( - await staticRpcProvider.estimateGas({ - from: config.ESTIMATE_ACCOUNT, - to: wsteth.address, - value: config.ESTIMATE_AMOUNT, - }), - ); + return await staticRpcProvider.estimateGas({ + from: config.ESTIMATE_ACCOUNT, + to: wsteth.address, + value: config.ESTIMATE_AMOUNT, + }); } catch (error) { console.warn(`${_key}::[eth]`, error); return applyGasLimitRatio(WRAP_FROM_ETH_GAS_LIMIT); diff --git a/features/wsteth/wrap/hooks/use-wrap-tx-processing.ts b/features/wsteth/wrap/hooks/use-wrap-tx-processing.ts index 00d994ebb..8a3fe44c6 100644 --- a/features/wsteth/wrap/hooks/use-wrap-tx-processing.ts +++ b/features/wsteth/wrap/hooks/use-wrap-tx-processing.ts @@ -2,18 +2,19 @@ import { useCallback } from 'react'; import invariant from 'tiny-invariant'; import { useSDK, useWSTETHContractWeb3 } from '@lido-sdk/react'; -import { TOKENS } from '@lido-sdk/constants'; +import { getTokenAddress, TOKENS } from '@lido-sdk/constants'; import { StaticJsonRpcBatchProvider } from '@lidofinance/eth-providers'; import { config } from 'config'; -import { MockLimitReachedError } from 'features/stake/stake-form/utils'; +import { + MockLimitReachedError, + applyGasLimitRatio, +} from 'features/stake/stake-form/utils'; import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider'; import { getFeeData } from 'utils/getFeeData'; import type { WrapFormInputType } from '../wrap-form-context'; -import { sendTx } from 'utils/send-tx'; -import { PopulatedTransaction } from 'ethers'; export const getGasParameters = async ( provider: StaticJsonRpcBatchProvider, @@ -42,13 +43,15 @@ export const useWrapTxProcessing = () => { invariant(wstethContractWeb3, 'wstethContractWeb3 must be presented'); if (token === TOKENS.STETH) { - const tx = await wstethContractWeb3.populateTransaction.wrap(amount); - return sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + if (isMultisig) { + const tx = await wstethContractWeb3.populateTransaction.wrap(amount); + return providerWeb3.getSigner().sendUncheckedTransaction(tx); + } else { + return wstethContractWeb3.wrap( + amount, + await getGasParameters(staticRpcProvider), + ); + } } else { if ( config.enableQaHelpers && @@ -56,20 +59,27 @@ export const useWrapTxProcessing = () => { ) { throw new MockLimitReachedError('Stake limit reached'); } - const from = await providerWeb3.getSigner().getAddress(); - const tx: PopulatedTransaction = { - to: wstethContractWeb3.address, - value: amount, - from, - }; - return sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - shouldApplyGasLimitRatio: true, - }); + const wstethTokenAddress = getTokenAddress(chainId, TOKENS.WSTETH); + if (isMultisig) { + return providerWeb3.getSigner().sendUncheckedTransaction({ + to: wstethTokenAddress, + value: amount, + }); + } else { + const originalGasLimit = await wstethContractWeb3.signer.estimateGas({ + to: wstethTokenAddress, + value: amount, + }); + + const gasLimit = applyGasLimitRatio(originalGasLimit); + return wstethContractWeb3.signer.sendTransaction({ + to: wstethTokenAddress, + value: amount, + gasLimit, + ...(await getGasParameters(staticRpcProvider)), + }); + } } }, [chainId, providerWeb3, staticRpcProvider, wstethContractWeb3], diff --git a/shared/hooks/useApprove.ts b/shared/hooks/useApprove.ts index f6381832e..5d7b19d9d 100644 --- a/shared/hooks/useApprove.ts +++ b/shared/hooks/useApprove.ts @@ -7,11 +7,11 @@ import { getERC20Contract } from '@lido-sdk/contracts'; import { useAllowance, useSDK } from '@lido-sdk/react'; import { isContract } from 'utils/isContract'; +import { getFeeData } from 'utils/getFeeData'; import { runWithTransactionLogger } from 'utils'; import { useCurrentStaticRpcProvider } from './use-current-static-rpc-provider'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; -import { sendTx } from 'utils/send-tx'; type ApproveOptions = | { @@ -60,16 +60,24 @@ export const useApprove = ( const isMultisig = await isContract(account, providerWeb3); const processApproveTx = async () => { - const tx = await contractWeb3.populateTransaction.approve( - spender, - amount, - ); - return sendTx({ - tx, - isMultisig, - staticProvider: staticRpcProvider, - walletProvider: providerWeb3, - }); + if (isMultisig) { + const tx = await contractWeb3.populateTransaction.approve( + spender, + amount, + ); + const hash = await providerWeb3 + .getSigner() + .sendUncheckedTransaction(tx); + return hash; + } else { + const { maxFeePerGas, maxPriorityFeePerGas } = + await getFeeData(staticRpcProvider); + const tx = await contractWeb3.approve(spender, amount, { + maxFeePerGas, + maxPriorityFeePerGas, + }); + return tx; + } }; const approveTx = await runWithTransactionLogger( diff --git a/utils/apply-gas-limit-ratio.ts b/utils/apply-gas-limit-ratio.ts deleted file mode 100644 index c0d3b9c54..000000000 --- a/utils/apply-gas-limit-ratio.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { config } from 'config'; -import type { BigNumber } from 'ethers'; - -export const applyGasLimitRatio = (gasLimit: BigNumber): BigNumber => - gasLimit - .mul(config.SUBMIT_EXTRA_GAS_TRANSACTION_RATIO * config.PRECISION) - .div(config.PRECISION); diff --git a/utils/estimate-gas.ts b/utils/estimate-gas.ts deleted file mode 100644 index 51f4dca20..000000000 --- a/utils/estimate-gas.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { StaticJsonRpcBatchProvider } from '@lidofinance/eth-providers'; -import { PopulatedTransaction } from 'ethers'; - -export const estimateGas = async ( - tx: PopulatedTransaction, - provider: StaticJsonRpcBatchProvider, -) => { - try { - return await provider.estimateGas(tx); - } catch (error) { - // retry without fees to see if just fails - const result = await provider - .estimateGas({ - ...tx, - maxFeePerGas: undefined, - maxPriorityFeePerGas: undefined, - }) - .catch(() => null); - // rethrow original not enough ether error - if (result) { - throw error; - } - throw new Error('Something went wrong'); - } -}; diff --git a/utils/send-tx.ts b/utils/send-tx.ts deleted file mode 100644 index 71c4af2a0..000000000 --- a/utils/send-tx.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type { - JsonRpcBatchProvider, - Web3Provider, -} from '@ethersproject/providers'; -import type { PopulatedTransaction } from 'ethers'; - -import { getFeeData } from './getFeeData'; -import { estimateGas } from './estimate-gas'; -import { applyGasLimitRatio } from 'utils/apply-gas-limit-ratio'; - -export type SendTxOptions = { - tx: PopulatedTransaction; - isMultisig: boolean; - walletProvider: Web3Provider; - staticProvider: JsonRpcBatchProvider; - shouldApplyGasLimitRatio?: boolean; -}; - -export const sendTx = async ({ - tx, - isMultisig, - staticProvider, - walletProvider, - shouldApplyGasLimitRatio = false, -}: SendTxOptions) => { - if (isMultisig) - return walletProvider.getSigner().sendUncheckedTransaction(tx); - - const { maxFeePerGas, maxPriorityFeePerGas } = - await getFeeData(staticProvider); - - tx.maxFeePerGas = maxFeePerGas; - tx.maxPriorityFeePerGas = maxPriorityFeePerGas; - - const gasLimit = await estimateGas(tx, staticProvider); - - tx.gasLimit = shouldApplyGasLimitRatio - ? applyGasLimitRatio(gasLimit) - : gasLimit; - - return walletProvider.getSigner().sendTransaction(tx); -};