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/scroll.svg b/assets/icons/l2/scroll.svg new file mode 100644 index 000000000..a16a70807 --- /dev/null +++ b/assets/icons/l2/scroll.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + 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 1c5e10122..e6aa044f4 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -1,4 +1,15 @@ -export const enum CHAINS { +export enum CHAINS { Mainnet = 1, Holesky = 17000, } + +export enum L2_CHAINS { + zkSync = 324, + Optimism = 10, + Arbitrum = 42161, + Polygon = 137, + Base = 8453, + Mantle = 5000, + Linea = 59144, + Scroll = 534352, +} diff --git a/consts/matomo-click-events.ts b/consts/matomo-click-events.ts index 71b5f8b5b..4d72e7c8d 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 @@ -129,6 +130,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/features/rewards/components/inputWrapper/InputWrapperStyles.ts b/features/rewards/components/inputWrapper/InputWrapperStyles.ts index 65cf098cd..268743da1 100644 --- a/features/rewards/components/inputWrapper/InputWrapperStyles.ts +++ b/features/rewards/components/inputWrapper/InputWrapperStyles.ts @@ -2,5 +2,6 @@ import styled from 'styled-components'; import { Block } from '@lidofinance/lido-ui'; export const InputWrapperStyle = styled(Block)` + background: transparent; padding-bottom: 24px; `; diff --git a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx index 51f0a5742..3505cabf0 100644 --- a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx @@ -1,4 +1,5 @@ import { FC } from 'react'; + import { Divider } from '@lidofinance/lido-ui'; import { RewardsListEmptyWrapper } from './RewardsListsEmptyStyles'; diff --git a/features/rewards/features/top-card/connect-wallet.tsx b/features/rewards/features/top-card/connect-wallet.tsx new file mode 100644 index 000000000..21905e504 --- /dev/null +++ b/features/rewards/features/top-card/connect-wallet.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react'; + +import { ConnectWalletStyle } from './styles'; + +export const ConnectWallet: FC = () => { + return ( + +

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 new file mode 100644 index 000000000..3e0c460ea --- /dev/null +++ b/features/rewards/features/top-card/styles.tsx @@ -0,0 +1,28 @@ +import styled, { css } 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; +`; + +export const ConnectWalletStyle = styled(WalletCardStyle)` + padding: 27px 27px 47px 27px; + text-align: center; + + ${({ theme }) => + theme.name === 'dark' + ? css` + color: var(--lido-color-text); + background: linear-gradient(48.34deg, #46464f -5.55%, #3b3b47 100%); + ` + : css` + color: var(--lido-color-secondary); + background: linear-gradient(48.34deg, #d2ddff -5.55%, #e6e6e6 100%); + `} +`; diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index 3f2ee2b8c..16bd62508 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -1,41 +1,17 @@ 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 { 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'; -const INPUT_DESC_TEXT = - 'Current balance may differ from last balance in the table due to rounding.'; +import { Wallet } from './wallet'; export const TopCard: FC = () => { - const { - address, - addressError, - isAddressResolving, - inputValue, - setInputValue, - } = useRewardsHistory(); - return ( - - - - - {INPUT_DESC_TEXT} - - + <> + - + ); }; diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx new file mode 100644 index 000000000..b845facf3 --- /dev/null +++ b/features/rewards/features/top-card/wallet.tsx @@ -0,0 +1,39 @@ +import { FC } from 'react'; +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 { WalletStyle } from './styles'; + +const INPUT_DESC_TEXT = + 'Current balance may differ from last balance in the table due to rounding.'; + +export const Wallet: FC = () => { + const { + address, + addressError, + isAddressResolving, + inputValue, + setInputValue, + } = useRewardsHistory(); + + return ( + + + + + {INPUT_DESC_TEXT} + + + + ); +}; diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/features/stake/stake-form/controls/stake-amount-input.tsx index edca6522a..3b892e2e4 100644 --- a/features/stake/stake-form/controls/stake-amount-input.tsx +++ b/features/stake/stake-form/controls/stake-amount-input.tsx @@ -2,14 +2,18 @@ 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 { useDappStatus } from 'shared/hooks/use-dapp-status'; export const StakeAmountInput = () => { + const { isWalletConnected, isDappActive } = useDappStatus(); const { maxAmount, stakingLimitInfo } = useStakeFormData(); const { limitWarning, limitError } = useStakingLimitWarning( stakingLimitInfo?.stakeLimitLevel, ); + return ( { + 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 3e62d2f40..e7bca3dbb 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -1,22 +1,34 @@ import { memo } from 'react'; -import { useWeb3 } from 'reef-knot/web3-react'; +import { useAccount } from 'wagmi'; + import { TOKENS } from '@lido-sdk/constants'; -import { useSDK, useTokenAddress } from '@lido-sdk/react'; +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'; -import { CardAccount, CardBalance, CardRow, Fallback } from 'shared/wallet'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { + CardAccount, + CardBalance, + CardRow, + Fallback, + 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'; import { useStakeFormData } from '../stake-form-context'; const WalletComponent: WalletComponentType = (props) => { - const { account } = useSDK(); + const { address } = useAccount(); const { stakeableEther, stethBalance, loading } = useStakeFormData(); const stethAddress = useTokenAddress(TOKENS.STETH); @@ -41,7 +53,7 @@ const WalletComponent: WalletComponentType = (props) => { /> } /> - + @@ -88,6 +100,23 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { active } = useWeb3(); - return active ? : ; + const { config } = useConfig(); + const { isL2Chain, isDappActive } = useDappStatus(); + + // Display L2 banners only if defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (isL2Chain && showL2Chain) { + return ; + } + + if (!isDappActive) { + return ; + } + + return ; }); 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 ( diff --git a/features/withdrawals/claim/form/submit-button.tsx b/features/withdrawals/claim/form/submit-button.tsx index 96c1d6071..f294a5c1d 100644 --- a/features/withdrawals/claim/form/submit-button.tsx +++ b/features/withdrawals/claim/form/submit-button.tsx @@ -1,20 +1,29 @@ -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 910f008ef..174a62404 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -1,17 +1,21 @@ import { memo } from 'react'; + import { Divider } from '@lidofinance/lido-ui'; -import { useWeb3 } from 'reef-knot/web3-react'; import { useSDK } from '@lido-sdk/react'; -import { CardAccount, CardRow, Fallback } from 'shared/wallet'; -import type { WalletComponentType } from 'shared/wallet/types'; +import { useConfig } from 'config'; +import { CHAINS } from 'consts/chains'; import { WalletWrapperStyled, WalletMyRequests, } from 'features/withdrawals/shared'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; +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(); @@ -32,6 +36,23 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - const { active } = useWeb3(); - return active ? : ; + const { config } = useConfig(); + const { isL2Chain, isDappActive } = useDappStatus(); + + // Display L2 banners only if defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (isL2Chain && showL2Chain) { + return ; + } + + if (!isDappActive) { + 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 7bdcefd82..ab5e9b255 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,6 @@ import { useController, useWatch } from 'react-hook-form'; 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 +8,12 @@ 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'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; + export const TokenAmountInputRequest = () => { + const { isWalletConnected, isDappActive } = useDappStatus(); const token = useWatch({ name: 'token' }); const { maxAmount, isTokenLocked } = useRequestFormData(); @@ -24,6 +27,7 @@ export const TokenAmountInputRequest = () => { return ( { - return ; + const { isWalletConnected, isDappActive } = useDappStatus(); + + return ( + + ); }; diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index cbf155902..ffb83d94a 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -1,24 +1,29 @@ import { memo } from 'react'; +import { useWatch } from 'react-hook-form'; + +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 { CardAccount, CardRow, Fallback } from 'shared/wallet'; +import { useConfig } from 'config'; +import { CHAINS } from 'consts/chains'; import { WalletMyRequests } from 'features/withdrawals/shared'; -import type { WalletComponentType } from 'shared/wallet/types'; 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'; import { WalletMode } from './wallet-mode'; import { RequestFormInputType } from '../request-form-context'; -import { useWatch } from 'react-hook-form'; -import { TOKENS } from '@lido-sdk/constants'; export const WalletComponent = () => { const { account } = useSDK(); const token = useWatch({ name: 'token' }); const isSteth = token === TOKENS.STETH; + return ( @@ -35,6 +40,23 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - const { active } = useWeb3(); - return active ? : ; + const { config } = useConfig(); + const { isL2Chain, isDappActive } = useDappStatus(); + + // Display L2 banners only if defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (isL2Chain && showL2Chain) { + return ; + } + + if (!isDappActive) { + return ; + } + + return ; }); diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 03d21471c..d06df033b 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -1,4 +1,5 @@ import { memo } from 'react'; + import { Divider, Text } from '@lidofinance/lido-ui'; import { TOKENS } from '@lido-sdk/constants'; import { @@ -8,14 +9,25 @@ import { useWSTETHBalance, useTokenAddress, } from '@lido-sdk/react'; -import { useWeb3 } from 'reef-knot/web3-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'; import { useWstethBySteth, useStethByWsteth } from 'shared/hooks'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import type { WalletComponentType } from 'shared/wallet/types'; -import { CardBalance, CardRow, CardAccount, Fallback } from 'shared/wallet'; +import { + CardBalance, + CardRow, + CardAccount, + Fallback, + L2Fallback, +} from 'shared/wallet'; +import { overrideWithQAMockBoolean } from 'utils/qa'; + import { StyledCard } from './styles'; -import { STRATEGY_LAZY } from 'consts/swr-strategies'; const WalletComponent: WalletComponentType = (props) => { const { account } = useSDK(); @@ -105,6 +117,23 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { active } = useWeb3(); - return active ? : ; + const { config } = useConfig(); + const { isL2Chain, isDappActive } = useDappStatus(); + + // Display L2 banners only if defaultChain=Mainnet + // Or via QA helpers override + const showL2Chain = overrideWithQAMockBoolean( + config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-l2-banners-on-testnet', + ); + + if (isL2Chain && showL2Chain) { + return ; + } + + if (!isDappActive) { + 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 e8f941b2a..fe6558f7c 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,18 @@ -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 { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; + +import { useUnwrapFormData } from '../unwrap-form-context'; + export const TokenAmountInputUnwrap = () => { + const { isWalletConnected, isDappActive } = useDappStatus(); const { maxAmount } = useUnwrapFormData(); return ( , @@ -9,11 +11,13 @@ type TokenAmountInputWrapProps = Pick< >; export const TokenAmountInputWrap = (props: TokenAmountInputWrapProps) => { + const { isWalletConnected, isDappActive } = useDappStatus(); const token = useWatch({ name: 'token' }); const { maxAmount, isApprovalNeededBeforeWrap } = useWrapFormData(); return ( ; export const TokenSelectWrap = (props: TokenSelectWrapProps) => { + const { isWalletConnected, isDappActive } = useDappStatus(); + return ( { trackEvent( diff --git a/package.json b/package.json index 9aa45dbde..e53d76cea 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@lidofinance/rpc": "^0.41.0", "@lidofinance/satanizer": "^0.41.0", "@tanstack/react-query": "^5.48.0", + "@wagmi/core": "^2.11.6", "bignumber.js": "9.1.0", "copy-to-clipboard": "^3.3.1", "cors": "^2.8.5", diff --git a/pages/rewards.tsx b/pages/rewards.tsx index 9069f247e..06063e494 100644 --- a/pages/rewards.tsx +++ b/pages/rewards.tsx @@ -1,12 +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 && } diff --git a/shared/components/input-amount/input-amount.tsx b/shared/components/input-amount/input-amount.tsx index 1d55cccc9..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 ( - ( <> {isLocked ? : undefined} diff --git a/shared/components/input-amount/styles.tsx b/shared/components/input-amount/styles.tsx new file mode 100644 index 000000000..04b9891fa --- /dev/null +++ b/shared/components/input-amount/styles.tsx @@ -0,0 +1,15 @@ +import styled, { css } from 'styled-components'; +import { Input } from '@lidofinance/lido-ui'; + +export const InputStyle = styled(Input)` + & > span { + ${({ theme, disabled }) => + theme.name === 'dark' + ? css` + background: ${disabled && '#27272E8F'}; + ` + : css` + background: ${disabled && '#EFF2F68F'}; + `} + } +`; diff --git a/shared/components/layout/header/components/header-wallet.tsx b/shared/components/layout/header/components/header-wallet.tsx index 2b646fae2..f7c5a0f45 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 } from 'react'; +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 { useDappStatus } from 'shared/hooks/use-dapp-status'; import { Button, Connect } from 'shared/wallet'; +import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; import { HeaderSettingsButton } from './header-settings-button'; import { @@ -20,25 +22,34 @@ import { const HeaderWallet: FC = () => { const router = useRouter(); - const { active } = useWeb3(); - const { chainId } = useSDK(); + const { chainId, address } = useAccount(); + const { defaultChain: defaultChainId } = useUserConfig(); + const { isDappActive } = useDappStatus(); - const chainName = CHAINS[chainId]; + const chainName = CHAINS[chainId || defaultChainId]; const testNet = chainId !== CHAINS.Mainnet; - const showNet = testNet && active; + const showNet = testNet && isDappActive; const queryTheme = router?.query?.theme; + const chainColor = useMemo(() => { + try { + return getChainColor(chainId || defaultChainId); + } catch { + return getChainColor(defaultChainId); + } + }, [chainId, defaultChainId]); + return ( {showNet && ( <> - + {chainName} )} - {active ? ( + {address ? (