From f782e58080a988033948d5b3370a17e9647bc96d Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Tue, 13 Aug 2024 21:20:34 +0700 Subject: [PATCH 1/3] feat: l2 is lido multichain now, bnb network fallback banner --- assets/icons/l2-banner-icons.svg | 12 --- assets/icons/l2-swap-dark.svg | 86 ------------------- assets/icons/l2-swap-light.svg | 86 ------------------- .../{l2 => lido-multichain}/arbitrum.svg | 0 assets/icons/{l2 => lido-multichain}/base.svg | 0 assets/icons/lido-multichain/bnb.svg | 11 +++ .../icons/{l2 => lido-multichain}/linea.svg | 0 .../icons/{l2 => lido-multichain}/mantle.svg | 0 .../{l2 => lido-multichain}/optimism.svg | 0 .../icons/{l2 => lido-multichain}/polygon.svg | 0 .../icons/{l2 => lido-multichain}/scroll.svg | 0 .../icons/{l2 => lido-multichain}/zk-sync.svg | 0 config/feature-flags/types.ts | 2 - config/feature-flags/utils.ts | 1 - consts/chains.ts | 3 +- consts/matomo-click-events.ts | 54 ++---------- features/stake/stake-form/stake-form.tsx | 9 +- features/stake/stake-form/wallet/wallet.tsx | 21 ++--- features/withdrawals/claim/wallet/wallet.tsx | 28 +++--- .../withdrawals/request/wallet/wallet.tsx | 33 +++---- features/wsteth/shared/wallet/wallet.tsx | 21 ++--- .../wrap-faq/list/how-can-i-use-wsteth.tsx | 6 +- .../wsteth/unwrap/unwrap-form/unwrap-form.tsx | 11 +-- features/wsteth/wrap/wrap-form/wrap-form.tsx | 10 +-- shared/banners/l2-banner/index.ts | 1 - shared/banners/l2-banner/l2-banner.tsx | 46 ---------- shared/banners/l2-banner/styles.ts | 76 ---------------- shared/banners/l2-banners/l2-after-stake.tsx | 23 ----- shared/banners/l2-banners/l2-after-wrap.tsx | 28 ------ .../l2-banners/l2-from-stake-to-wrap.tsx | 21 ----- shared/banners/l2-banners/l2-wsteth.tsx | 33 ------- shared/hooks/use-dapp-status.ts | 9 +- .../use-lido-multichain-fallback-condition.ts | 23 +++++ ...-stage-operation-succeed-balance-shown.tsx | 13 +-- shared/wallet/index.ts | 2 +- shared/wallet/l2-fallback/l2-fallback.tsx | 72 ---------------- .../lido-multichain-fallback.tsx | 84 ++++++++++++++++++ .../styles.tsx | 4 +- 38 files changed, 188 insertions(+), 641 deletions(-) delete mode 100644 assets/icons/l2-banner-icons.svg delete mode 100644 assets/icons/l2-swap-dark.svg delete mode 100644 assets/icons/l2-swap-light.svg rename assets/icons/{l2 => lido-multichain}/arbitrum.svg (100%) rename assets/icons/{l2 => lido-multichain}/base.svg (100%) create mode 100644 assets/icons/lido-multichain/bnb.svg rename assets/icons/{l2 => lido-multichain}/linea.svg (100%) rename assets/icons/{l2 => lido-multichain}/mantle.svg (100%) rename assets/icons/{l2 => lido-multichain}/optimism.svg (100%) rename assets/icons/{l2 => lido-multichain}/polygon.svg (100%) rename assets/icons/{l2 => lido-multichain}/scroll.svg (100%) rename assets/icons/{l2 => lido-multichain}/zk-sync.svg (100%) delete mode 100644 shared/banners/l2-banner/index.ts delete mode 100644 shared/banners/l2-banner/l2-banner.tsx delete mode 100644 shared/banners/l2-banner/styles.ts delete mode 100644 shared/banners/l2-banners/l2-after-stake.tsx delete mode 100644 shared/banners/l2-banners/l2-after-wrap.tsx delete mode 100644 shared/banners/l2-banners/l2-from-stake-to-wrap.tsx delete mode 100644 shared/banners/l2-banners/l2-wsteth.tsx create mode 100644 shared/hooks/use-lido-multichain-fallback-condition.ts delete mode 100644 shared/wallet/l2-fallback/l2-fallback.tsx create mode 100644 shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx rename shared/wallet/{l2-fallback => lido-multichain-fallback}/styles.tsx (83%) diff --git a/assets/icons/l2-banner-icons.svg b/assets/icons/l2-banner-icons.svg deleted file mode 100644 index 0f96851c6..000000000 --- a/assets/icons/l2-banner-icons.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/assets/icons/l2-swap-dark.svg b/assets/icons/l2-swap-dark.svg deleted file mode 100644 index 82e9ecc7c..000000000 --- a/assets/icons/l2-swap-dark.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/icons/l2-swap-light.svg b/assets/icons/l2-swap-light.svg deleted file mode 100644 index 057ec77e4..000000000 --- a/assets/icons/l2-swap-light.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/icons/l2/arbitrum.svg b/assets/icons/lido-multichain/arbitrum.svg similarity index 100% rename from assets/icons/l2/arbitrum.svg rename to assets/icons/lido-multichain/arbitrum.svg diff --git a/assets/icons/l2/base.svg b/assets/icons/lido-multichain/base.svg similarity index 100% rename from assets/icons/l2/base.svg rename to assets/icons/lido-multichain/base.svg diff --git a/assets/icons/lido-multichain/bnb.svg b/assets/icons/lido-multichain/bnb.svg new file mode 100644 index 000000000..97b67eb4d --- /dev/null +++ b/assets/icons/lido-multichain/bnb.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/l2/linea.svg b/assets/icons/lido-multichain/linea.svg similarity index 100% rename from assets/icons/l2/linea.svg rename to assets/icons/lido-multichain/linea.svg diff --git a/assets/icons/l2/mantle.svg b/assets/icons/lido-multichain/mantle.svg similarity index 100% rename from assets/icons/l2/mantle.svg rename to assets/icons/lido-multichain/mantle.svg diff --git a/assets/icons/l2/optimism.svg b/assets/icons/lido-multichain/optimism.svg similarity index 100% rename from assets/icons/l2/optimism.svg rename to assets/icons/lido-multichain/optimism.svg diff --git a/assets/icons/l2/polygon.svg b/assets/icons/lido-multichain/polygon.svg similarity index 100% rename from assets/icons/l2/polygon.svg rename to assets/icons/lido-multichain/polygon.svg diff --git a/assets/icons/l2/scroll.svg b/assets/icons/lido-multichain/scroll.svg similarity index 100% rename from assets/icons/l2/scroll.svg rename to assets/icons/lido-multichain/scroll.svg diff --git a/assets/icons/l2/zk-sync.svg b/assets/icons/lido-multichain/zk-sync.svg similarity index 100% rename from assets/icons/l2/zk-sync.svg rename to assets/icons/lido-multichain/zk-sync.svg diff --git a/config/feature-flags/types.ts b/config/feature-flags/types.ts index 23f53be3a..ec8a110b3 100644 --- a/config/feature-flags/types.ts +++ b/config/feature-flags/types.ts @@ -1,8 +1,6 @@ export const RPC_SETTINGS_PAGE_ON_INFRA_IS_ENABLED = 'rpcSettingsPageOnInfraIsEnabled'; -export const VAULTS_BANNER_IS_ENABLED = 'vaultsBannerIsEnabled'; export type FeatureFlagsType = { [RPC_SETTINGS_PAGE_ON_INFRA_IS_ENABLED]: boolean; - [VAULTS_BANNER_IS_ENABLED]: boolean; }; diff --git a/config/feature-flags/utils.ts b/config/feature-flags/utils.ts index 54bcd1d7e..d4d721b5f 100644 --- a/config/feature-flags/utils.ts +++ b/config/feature-flags/utils.ts @@ -3,6 +3,5 @@ import { FeatureFlagsType } from './types'; export const getFeatureFlagsDefault = (): FeatureFlagsType => { return { rpcSettingsPageOnInfraIsEnabled: false, - vaultsBannerIsEnabled: true, }; }; diff --git a/consts/chains.ts b/consts/chains.ts index 6a2458ac8..7972923d9 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -4,7 +4,7 @@ export enum CHAINS { Sepolia = 11155111, } -export enum L2_CHAINS { +export enum LIDO_MULTICHAIN_CHAINS { zkSync = 324, Optimism = 10, Arbitrum = 42161, @@ -13,4 +13,5 @@ export enum L2_CHAINS { Mantle = 5000, Linea = 59144, Scroll = 534352, + BNB = 56, } diff --git a/consts/matomo-click-events.ts b/consts/matomo-click-events.ts index b3a0ae331..2183b84ab 100644 --- a/consts/matomo-click-events.ts +++ b/consts/matomo-click-events.ts @@ -12,11 +12,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES { openOceanDiscount = 'openOceanDiscount', oneInchDiscount = 'oneInchDiscount', viewEtherscanOnStakePage = 'viewEtherscanOnStakePage', - l2BannerStake = 'l2BannerStake', - l2LowFeeStake = 'l2LowFeeStake', - l2LowFeeWrap = 'l2LowFeeWrap', - l2swap = 'l2swap', - lidoOnL2Opportunities = 'lidoOnL2Opportunities', + lidoOnLidoMultichainOpportunities = 'lidoOnLidoMultichainOpportunities', vaultsBannerLearnMore = 'vaultsBannerLearnMore', vaultsBannerExploreAll = 'vaultsBannerExploreAll', // FAQ @@ -38,15 +34,12 @@ export const enum MATOMO_CLICK_EVENTS_TYPES { faqHowCanIGetWstethWrapLink = 'faqHowCanIGetWstethWrapLink', faqHowCanIGetWstethIntegrationsLink = 'faqHowCanIGetWstethIntegrationsLink', faqHowDoIUnwrapWstethUnwrapLink = 'faqHowDoIUnwrapWstethUnwrapLink', - faqHowCanIUseWstethL2 = 'faqHowCanIUseWstethL2', + faqHowCanIUseWstethLidoMultichain = 'faqHowCanIUseWstethLidoMultichain', faqHowCanIUseWstethDefiProtocols = 'faqHowCanIUseWstethDefiProtocols', faqDoINeedToUnwrapMyWstethWithdrawalsTabs = 'faqDoINeedToUnwrapMyWstethWithdrawalsTabs', // /wrap page - l2BannerWrap = 'l2BannerWrap', wrapTokenSelectSTETH = 'wrapTokenSelectSteth', wrapTokenSelectETH = 'wrapTokenSelectEth', - // Unwrap tab - l2BannerUnwrap = 'l2BannerUnwrap', // /withdrawal page withdrawalUseLido = 'withdrawalUseLido', @@ -121,30 +114,10 @@ export const MATOMO_CLICK_EVENTS: Record< 'Push «View on Etherscan» on the right side of Lido Statistics', 'eth_widget_etherscan_stakePage', ], - [MATOMO_CLICK_EVENTS_TYPES.l2BannerStake]: [ + [MATOMO_CLICK_EVENTS_TYPES.lidoOnLidoMultichainOpportunities]: [ 'Ethereum_Staking_Widget', - 'Push "Learn more" at the L2 banner on "Stake" tab', - 'eth_widget_banner_l2_stake', - ], - [MATOMO_CLICK_EVENTS_TYPES.l2LowFeeStake]: [ - 'Ethereum_Staking_Widget', - 'Push «Learn more» in Unlock Low-Fee transactions on L2 on Transaction success banner on "Stake" tab', - 'eth_widget_banner_learn_more_L2_stake', - ], - [MATOMO_CLICK_EVENTS_TYPES.l2LowFeeWrap]: [ - 'Ethereum_Staking_Widget', - 'Push «Learn more» in Unlock Low-Fee transactions on L2 on Transaction success banner on "Wrap" tab', - 'eth_widget_banner_learn_more_L2_wrap', - ], - [MATOMO_CLICK_EVENTS_TYPES.l2swap]: [ - 'Ethereum_Staking_Widget', - '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', + 'Push "Lido on L2 opportunities" ', // L2 naiming for analytics history consistency + 'eth_widget_lido_on_l2_opportunities', // L2 naiming for analytics history consistency ], [MATOMO_CLICK_EVENTS_TYPES.vaultsBannerLearnMore]: [ 'Ethereum_Staking_Widget', @@ -247,10 +220,10 @@ export const MATOMO_CLICK_EVENTS: Record< 'Push «stake.lido.fi/wrap/unwrap» How do I unwrap wstETH back to stETH?', 'eth_widget_faq_howunwrapwsteth_unwrap', ], - [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethL2]: [ + [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethLidoMultichain]: [ 'Ethereum_Staking_Widget', - 'Push «L2» How can I use wstETH?', - 'eth_widget_faq_howCanIUseWstETH_l2', + 'Push «L2» How can I use wstETH?', // L2 naiming for analytics history consistency + 'eth_widget_faq_howCanIUseWstETH_l2', // L2 naiming for analytics history consistency ], [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethDefiProtocols]: [ 'Ethereum_Staking_Widget', @@ -263,11 +236,6 @@ export const MATOMO_CLICK_EVENTS: Record< 'eth_widget_faq_doINeedToUnwrapMyWsteth_withdrawalsRequestAndClaimTabs', ], // /wrap page - [MATOMO_CLICK_EVENTS_TYPES.l2BannerWrap]: [ - 'Ethereum_Staking_Widget', - 'Push "Learn more" at the L2 banner on "Wrap" tab', - 'eth_widget_banner_l2_wrap', - ], [MATOMO_CLICK_EVENTS_TYPES.wrapTokenSelectETH]: [ 'Ethereum_Staking_Widget', 'Select ETH to wrap to wsteth on wrap page', @@ -278,12 +246,6 @@ export const MATOMO_CLICK_EVENTS: Record< 'Select STETH to wrap to wsteth on wrap page', 'eth_widget_wrap_select_token_steth', ], - // Unwrap tab - [MATOMO_CLICK_EVENTS_TYPES.l2BannerUnwrap]: [ - 'Ethereum_Staking_Widget', - 'Push "Learn more" at the L2 banner on "Unwrap" tab', - 'eth_widget_banner_l2_unwrap', - ], // /withdrawal page [MATOMO_CLICK_EVENTS_TYPES.withdrawalUseLido]: [ diff --git a/features/stake/stake-form/stake-form.tsx b/features/stake/stake-form/stake-form.tsx index 695b6570e..18330f4e8 100644 --- a/features/stake/stake-form/stake-form.tsx +++ b/features/stake/stake-form/stake-form.tsx @@ -1,5 +1,4 @@ import { FC, memo } from 'react'; -import { useFeatureFlag, VAULTS_BANNER_IS_ENABLED } from 'config/feature-flags'; import { StakeFormProvider } from './stake-form-context'; @@ -9,11 +8,9 @@ import { StakeSubmitButton } from './controls/stake-submit-button'; import { StakeFormInfo } from './stake-form-info'; import { SwapDiscountBanner } from '../swap-discount-banner'; import { StakeBlock, FormControllerStyled } from './styles'; -import { L2FromStakeToWrap } from 'shared/banners/l2-banners/l2-from-stake-to-wrap'; import { VaultsBannerInfo } from 'shared/banners/vaults-banner-info'; export const StakeForm: FC = memo(() => { - const { vaultsBannerIsEnabled } = useFeatureFlag(VAULTS_BANNER_IS_ENABLED); return ( @@ -22,11 +19,7 @@ export const StakeForm: FC = memo(() => { - {vaultsBannerIsEnabled ? ( - - ) : ( - - )} + diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx index 0186629ad..3eba3d6a3 100644 --- a/features/stake/stake-form/wallet/wallet.tsx +++ b/features/stake/stake-form/wallet/wallet.tsx @@ -5,23 +5,21 @@ 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'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { useLidoMultichainFallbackCondition } from 'shared/hooks/use-lido-multichain-fallback-condition'; import { CardAccount, CardBalance, CardRow, Fallback, - L2Fallback, + LidoMultichainFallback, } 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'; @@ -100,18 +98,11 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { config } = useConfig(); - const { isL2Chain, isDappActive } = useDappStatus(); + const { isDappActive } = useDappStatus(); + const { showLidoMultichainFallback } = useLidoMultichainFallbackCondition(); - // 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 (showLidoMultichainFallback) { + return ; } if (!isDappActive) { diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx index 8b7a8e308..81b0b7488 100644 --- a/features/withdrawals/claim/wallet/wallet.tsx +++ b/features/withdrawals/claim/wallet/wallet.tsx @@ -3,19 +3,22 @@ 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, } from 'features/withdrawals/shared'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; -import { CardAccount, CardRow, Fallback, L2Fallback } from 'shared/wallet'; +import { useLidoMultichainFallbackCondition } from 'shared/hooks/use-lido-multichain-fallback-condition'; +import { + CardAccount, + CardRow, + Fallback, + LidoMultichainFallback, +} 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(); @@ -36,18 +39,13 @@ export const WalletComponent = () => { }; export const ClaimWallet: WalletComponentType = memo((props) => { - 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', - ); + const { isDappActive } = useDappStatus(); + const { showLidoMultichainFallback } = useLidoMultichainFallbackCondition(); - if (isL2Chain && showL2Chain) { - return ; + if (showLidoMultichainFallback) { + return ( + + ); } if (!isDappActive) { diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx index 46a78d6bd..1f3eecb45 100644 --- a/features/withdrawals/request/wallet/wallet.tsx +++ b/features/withdrawals/request/wallet/wallet.tsx @@ -5,14 +5,17 @@ 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 { + CardAccount, + CardRow, + Fallback, + LidoMultichainFallback, +} from 'shared/wallet'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { useLidoMultichainFallbackCondition } from 'shared/hooks/use-lido-multichain-fallback-condition'; import type { WalletComponentType } from 'shared/wallet/types'; -import { overrideWithQAMockBoolean } from 'utils/qa'; import { WalletStethBalance } from './wallet-steth-balance'; import { WalletWstethBalance } from './wallet-wsteth-balance'; @@ -40,18 +43,16 @@ export const WalletComponent = () => { }; export const RequestWallet: WalletComponentType = memo((props) => { - 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 ; + const { isDappActive } = useDappStatus(); + const { showLidoMultichainFallback } = useLidoMultichainFallbackCondition(); + + if (showLidoMultichainFallback) { + return ( + + ); } if (!isDappActive) { diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx index 9f4b133f0..3f9276051 100644 --- a/features/wsteth/shared/wallet/wallet.tsx +++ b/features/wsteth/shared/wallet/wallet.tsx @@ -10,22 +10,20 @@ 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'; import { useWstethBySteth, useStethByWsteth } from 'shared/hooks'; import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { useLidoMultichainFallbackCondition } from 'shared/hooks/use-lido-multichain-fallback-condition'; import type { WalletComponentType } from 'shared/wallet/types'; import { CardBalance, CardRow, CardAccount, Fallback, - L2Fallback, + LidoMultichainFallback, } from 'shared/wallet'; -import { overrideWithQAMockBoolean } from 'utils/qa'; import { StyledCard } from './styles'; @@ -117,18 +115,11 @@ const WalletComponent: WalletComponentType = (props) => { }; export const Wallet: WalletComponentType = memo((props) => { - const { config } = useConfig(); - const { isL2Chain, isDappActive } = useDappStatus(); + const { isDappActive } = useDappStatus(); + const { showLidoMultichainFallback } = useLidoMultichainFallbackCondition(); - // 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 (showLidoMultichainFallback) { + return ; } if (!isDappActive) { diff --git a/features/wsteth/shared/wrap-faq/list/how-can-i-use-wsteth.tsx b/features/wsteth/shared/wrap-faq/list/how-can-i-use-wsteth.tsx index a3265bcb6..1cd41d4e7 100644 --- a/features/wsteth/shared/wrap-faq/list/how-can-i-use-wsteth.tsx +++ b/features/wsteth/shared/wrap-faq/list/how-can-i-use-wsteth.tsx @@ -11,9 +11,11 @@ export const HowCanIUseWsteth: FC = () => { wstETH is useful across{' '} - L2 + Lido Multichain {' '} and other{' '} { - const { vaultsBannerIsEnabled } = useFeatureFlag(VAULTS_BANNER_IS_ENABLED); - return ( @@ -24,11 +19,7 @@ export const UnwrapForm: FC = memo(() => { - {vaultsBannerIsEnabled ? ( - - ) : ( - - )} + diff --git a/features/wsteth/wrap/wrap-form/wrap-form.tsx b/features/wsteth/wrap/wrap-form/wrap-form.tsx index 5ecafbdfc..05f238ddd 100644 --- a/features/wsteth/wrap/wrap-form/wrap-form.tsx +++ b/features/wsteth/wrap/wrap-form/wrap-form.tsx @@ -1,10 +1,7 @@ import { memo } from 'react'; -import { useFeatureFlag, VAULTS_BANNER_IS_ENABLED } from 'config/feature-flags'; -import { L2Wsteth } from 'shared/banners/l2-banners/l2-wsteth'; import { VaultsBannerInfo } from 'shared/banners/vaults-banner-info'; import { FormController } from 'shared/hook-form/form-controller'; -import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; import { WrapFormStats } from './wrap-stats'; import { WrapBlock } from '../../shared/styles'; @@ -13,7 +10,6 @@ import { InputGroupWrap } from '../wrap-form-controls/input-group-wrap'; import { SubmitButtonWrap } from '../wrap-form-controls/submit-button-wrap'; export const WrapForm: React.FC = memo(() => { - const { vaultsBannerIsEnabled } = useFeatureFlag(VAULTS_BANNER_IS_ENABLED); return ( @@ -21,11 +17,7 @@ export const WrapForm: React.FC = memo(() => { - {vaultsBannerIsEnabled ? ( - - ) : ( - - )} + diff --git a/shared/banners/l2-banner/index.ts b/shared/banners/l2-banner/index.ts deleted file mode 100644 index 1bdab827e..000000000 --- a/shared/banners/l2-banner/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './l2-banner'; diff --git a/shared/banners/l2-banner/l2-banner.tsx b/shared/banners/l2-banner/l2-banner.tsx deleted file mode 100644 index 79594f0d9..000000000 --- a/shared/banners/l2-banner/l2-banner.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { config } from 'config'; - -import { BannerLinkButton } from '../banner-link-button'; -import { Wrapper, L2Icons, TextWrap, TextHeader, FooterWrap } from './styles'; - -type L2BannerProps = { - title?: React.ReactNode; - text: React.ReactNode; - buttonText: React.ReactNode; - buttonHref?: string; - isLocalLink?: boolean; - testId?: string; - testidButton?: string; - onClickButton?: () => void; -}; - -export const L2_DISCOVERY_LINK = `${config.rootOrigin}/lido-on-l2`; - -export const L2Banner = ({ - title, - text, - buttonText, - buttonHref = L2_DISCOVERY_LINK, - isLocalLink, - testId, - testidButton, - onClickButton, -}: L2BannerProps) => { - return ( - - {title && {title}} - {text} - - - - {buttonText} - - - - ); -}; diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts deleted file mode 100644 index 1b0ed9218..000000000 --- a/shared/banners/l2-banner/styles.ts +++ /dev/null @@ -1,76 +0,0 @@ -import styled, { css } from 'styled-components'; -import IconsLight from 'assets/icons/l2-swap-light.svg'; -import IconsDark from 'assets/icons/l2-swap-dark.svg'; - -export const Wrapper = styled.div` - position: relative; - display: flex; - flex-direction: column; - text-align: left; - padding: ${({ theme }) => theme.spaceMap.lg}px; - border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; - gap: 10px; - overflow: hidden; - box-sizing: border-box; - - ${({ theme }) => - theme.name === 'dark' - ? css` - background: linear-gradient( - 275.17deg, - #0a5dff 8.63%, - #4d5dff 46.27%, - #905cff 81.73% - ); - ` - : css` - background: radial-gradient( - 100% 1200% at 120% 110%, - rgba(255, 255, 255, 0.95) 2%, - rgba(219, 255, 255, 0.95) 35%, - rgba(255, 255, 255, 0) 100% - ), - linear-gradient(130deg, #a6a5ff 7%, rgba(181, 180, 255, 0) 55%); - `} - - ${({ theme }) => theme.mediaQueries.md} { - gap: 6px; - padding: ${({ theme }) => theme.spaceMap.md}px; - } - - ${({ theme }) => theme.mediaQueries.sm} { - cursor: pointer; - padding: ${({ theme }) => theme.spaceMap.sm}px; - } -`; - -export const L2Icons = styled.div` - display: block; - width: 214px; - height: 32px; - background-image: url(${({ theme }) => - theme.name === 'dark' ? IconsDark : IconsLight}); -`; - -export const FooterWrap = styled.div` - display: flex; - align-items: center; - justify-content: space-between; -`; - -export const TextHeader = styled.div` - margin-bottom: 4px; - font-size: 14px; - line-height: 16px; - font-weight: 700; - color: var(--lido-color-text); -`; - -export const TextWrap = styled.div` - flex: 1 1 auto; - color: var(--lido-color-text); - line-height: 20px; - font-size: 12px; - font-weight: 400; - position: relative; -`; diff --git a/shared/banners/l2-banners/l2-after-stake.tsx b/shared/banners/l2-banners/l2-after-stake.tsx deleted file mode 100644 index 555d0e9fb..000000000 --- a/shared/banners/l2-banners/l2-after-stake.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { trackEvent } from '@lidofinance/analytics-matomo'; -import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; -import { L2Banner, L2_DISCOVERY_LINK } from '../l2-banner'; - -const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2LowFeeStake); - -export const L2AfterStake: React.FC = () => { - return ( - - Learn about Lido on L2 and enjoy various opportunities in DeFi - - } - buttonText="Learn more" - buttonHref={L2_DISCOVERY_LINK} - testId="l2LowFeeBanner" - testidButton="l2LowFee" - onClickButton={linkClickHandler} - /> - ); -}; diff --git a/shared/banners/l2-banners/l2-after-wrap.tsx b/shared/banners/l2-banners/l2-after-wrap.tsx deleted file mode 100644 index 55caf55b3..000000000 --- a/shared/banners/l2-banners/l2-after-wrap.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { trackEvent } from '@lidofinance/analytics-matomo'; - -import { config } from 'config'; -import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; - -import { L2Banner } from '../l2-banner'; - -const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2LowFeeWrap); - -const L2_LEARN_MORE_AFTER_WRAP_LINK = `${config.rootOrigin}/lido-ecosystem?networks=arbitrum%2Coptimism%2Cbase%2Czksync+era%2Cmantle%2Clinea%2Cpolygon&criteria=or&tokens=wsteth`; - -export const L2AfterWrap = () => { - return ( - - Learn about DeFi opportunities using wstETH across multiple L2 - networks - - } - buttonText="Learn more" - buttonHref={L2_LEARN_MORE_AFTER_WRAP_LINK} - testId="l2LowFeeBanner" - testidButton="l2LowFee" - onClickButton={linkClickHandler} - /> - ); -}; diff --git a/shared/banners/l2-banners/l2-from-stake-to-wrap.tsx b/shared/banners/l2-banners/l2-from-stake-to-wrap.tsx deleted file mode 100644 index fa3ec495f..000000000 --- a/shared/banners/l2-banners/l2-from-stake-to-wrap.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { trackEvent } from '@lidofinance/analytics-matomo'; -import { WRAP_PATH } from 'consts/urls'; -import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; - -import { L2Banner } from '../l2-banner'; - -const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2BannerStake); - -export const L2FromStakeToWrap = () => { - return ( - - ); -}; diff --git a/shared/banners/l2-banners/l2-wsteth.tsx b/shared/banners/l2-banners/l2-wsteth.tsx deleted file mode 100644 index 0de6e197e..000000000 --- a/shared/banners/l2-banners/l2-wsteth.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useCallback } from 'react'; -import { trackEvent } from '@lidofinance/analytics-matomo'; - -import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; - -import { L2Banner } from '../l2-banner'; - -type L2WstethProps = { - matomoEventLink: - | typeof MATOMO_CLICK_EVENTS.l2BannerWrap - | typeof MATOMO_CLICK_EVENTS.l2BannerUnwrap; -}; - -export const L2Wsteth = ({ matomoEventLink }: L2WstethProps) => { - const linkClickHandler = useCallback( - () => trackEvent(...matomoEventLink), - [matomoEventLink], - ); - return ( - - Enjoy lower gas fees and DeFi opportunities using wstETH - across multiple L2 networks - - } - /> - ); -}; diff --git a/shared/hooks/use-dapp-status.ts b/shared/hooks/use-dapp-status.ts index 64522cfed..2ddc41cb1 100644 --- a/shared/hooks/use-dapp-status.ts +++ b/shared/hooks/use-dapp-status.ts @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { useAccount } from 'wagmi'; -import { L2_CHAINS } from 'consts/chains'; +import { LIDO_MULTICHAIN_CHAINS } from 'consts/chains'; import { useIsSupportedChain } from './use-is-supported-chain'; @@ -9,7 +9,10 @@ export const useDappStatus = () => { const { chainId, isConnected: isWalletConnected } = useAccount(); const isSupportedChain = useIsSupportedChain(); - const isL2Chain = useMemo(() => !!chainId && !!L2_CHAINS[chainId], [chainId]); + const isLidoMultichainChain = useMemo( + () => !!chainId && !!LIDO_MULTICHAIN_CHAINS[chainId], + [chainId], + ); const isDappActive = useMemo(() => { if (!chainId) return false; @@ -20,7 +23,7 @@ export const useDappStatus = () => { return { isWalletConnected, isSupportedChain, - isL2Chain, + isLidoMultichainChain, isDappActive, }; }; diff --git a/shared/hooks/use-lido-multichain-fallback-condition.ts b/shared/hooks/use-lido-multichain-fallback-condition.ts new file mode 100644 index 000000000..ba20e9b35 --- /dev/null +++ b/shared/hooks/use-lido-multichain-fallback-condition.ts @@ -0,0 +1,23 @@ +import { useConfig } from 'config'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { CHAINS } from 'consts/chains'; +import { overrideWithQAMockBoolean } from 'utils/qa'; + +export const useLidoMultichainFallbackCondition = () => { + const { config } = useConfig(); + const { isLidoMultichainChain } = useDappStatus(); + + // Display Lido Multichain banners only if defaultChain=Mainnet + // Or via QA helpers override + const isLidoMultichainFallbackEnabled = overrideWithQAMockBoolean( + config.defaultChain === CHAINS.Mainnet, + 'mock-qa-helpers-show-lido-multichain-banners-on-testnet', + ); + + const showLidoMultichainFallback = + isLidoMultichainChain && isLidoMultichainFallbackEnabled; + + return { + showLidoMultichainFallback, + }; +}; diff --git a/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx b/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx index 6257acd68..5106ccd5b 100644 --- a/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx +++ b/shared/transaction-modal/tx-stages-composed/tx-stage-operation-succeed-balance-shown.tsx @@ -3,15 +3,12 @@ import styled from 'styled-components'; import { useTokenAddress } from '@lido-sdk/react'; import { TOKENS } from '@lido-sdk/constants'; import { InlineLoader } from '@lidofinance/lido-ui'; -import { L2AfterStake } from 'shared/banners/l2-banners/l2-after-stake'; -import { L2AfterWrap } from 'shared/banners/l2-banners/l2-after-wrap'; import { VaultsBannerStrategies } from 'shared/banners/vaults-banner-strategies'; import { TxAmount } from '../tx-stages-parts/tx-amount'; import { SuccessText } from '../tx-stages-parts/success-text'; import { TxStageSuccess } from '../tx-stages-basic'; import type { BigNumber } from 'ethers'; -import { useFeatureFlag, VAULTS_BANNER_IS_ENABLED } from 'config/feature-flags'; import { TokenToWallet } from '../../components'; export const SkeletonBalance = styled(InlineLoader).attrs({ @@ -39,7 +36,6 @@ export const TxStageOperationSucceedBalanceShown = ({ operationText, txHash, }: TxStageOperationSucceedBalanceShownProps) => { - const { vaultsBannerIsEnabled } = useFeatureFlag(VAULTS_BANNER_IS_ENABLED); const stethAddress = useTokenAddress(TOKENS.STETH); const wstethAddress = useTokenAddress(TOKENS.WSTETH); const tokenToWalletAddress = @@ -49,13 +45,6 @@ export const TxStageOperationSucceedBalanceShown = ({ ); - const renderBanner = () => { - if (vaultsBannerIsEnabled) return ; - if (balanceToken === 'stETH') return ; - if (balanceToken === 'wstETH') return ; - return undefined; - }; - return ( } showEtherscan={false} - footer={renderBanner()} + footer={} /> ); }; diff --git a/shared/wallet/index.ts b/shared/wallet/index.ts index fa0fba6b0..e7f23c038 100644 --- a/shared/wallet/index.ts +++ b/shared/wallet/index.ts @@ -2,5 +2,5 @@ export { Button } from './button/button'; export { Card, CardRow, CardBalance, CardAccount } from './card/card'; export { Connect } from './connect/connect'; export { Fallback } from './fallback/fallback'; -export { L2Fallback } from './l2-fallback/l2-fallback'; +export { LidoMultichainFallback } from './lido-multichain-fallback/lido-multichain-fallback'; export { UnsupportedChainButton } from './unsupported-chain-button/unsupported-chain-button'; diff --git a/shared/wallet/l2-fallback/l2-fallback.tsx b/shared/wallet/l2-fallback/l2-fallback.tsx deleted file mode 100644 index 14a0650e3..000000000 --- a/shared/wallet/l2-fallback/l2-fallback.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { FC, useMemo } from 'react'; -import { useAccount } from 'wagmi'; -import { BlockProps, Link } from '@lidofinance/lido-ui'; - -import { ReactComponent as ArbitrumLogo } from 'assets/icons/l2/arbitrum.svg'; -import { ReactComponent as BaseLogo } from 'assets/icons/l2/base.svg'; -import { ReactComponent as LineaLogo } from 'assets/icons/l2/linea.svg'; -import { ReactComponent as MantleLogo } from 'assets/icons/l2/mantle.svg'; -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 { ReactComponent as ScrollLogo } from 'assets/icons/l2/scroll.svg'; - -import { config } from 'config'; -import { useUserConfig } from 'config/user-config'; -import { CHAINS, L2_CHAINS } from 'consts/chains'; -import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events'; - -import { L2FallbackWalletStyle, TextStyle, ButtonStyle } from './styles'; -import { trackMatomoEvent } from '../../../utils/track-matomo-event'; - -export type L2FallbackComponent = FC<{ textEnding: string } & BlockProps>; - -const l2Logos = { - [L2_CHAINS.Arbitrum]: ArbitrumLogo, - [L2_CHAINS.Base]: BaseLogo, - [L2_CHAINS.Linea]: LineaLogo, - [L2_CHAINS.Mantle]: MantleLogo, - [L2_CHAINS.Optimism]: OptimismLogo, - [L2_CHAINS.Polygon]: PolygonLogo, - [L2_CHAINS.zkSync]: ZkSyncLogo, - [L2_CHAINS.Scroll]: ScrollLogo, -}; - -const getL2Logo = (chainId: L2_CHAINS) => { - const SVGLogo = l2Logos[chainId]; - return SVGLogo ? : null; -}; - -export const L2Fallback: L2FallbackComponent = (props) => { - const { chainId } = useAccount(); - const { defaultChain } = useUserConfig(); - - const defaultChainName = useMemo(() => { - return CHAINS[defaultChain]; - }, [defaultChain]); - - const l2ChainName = useMemo(() => { - // Trick. Anyway, this condition is working only SPA starting. - return (!!chainId && L2_CHAINS[chainId]) || 'unknown'; - }, [chainId]); - - return ( - - {getL2Logo(chainId as L2_CHAINS)} - - Learn about Lido on L2 opportunities on {l2ChainName} network or switch - to Ethereum {defaultChainName} {props.textEnding} - - - - trackMatomoEvent(MATOMO_CLICK_EVENTS_TYPES.lidoOnL2Opportunities) - } - > - Lido on L2 opportunities - - - - ); -}; diff --git a/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx b/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx new file mode 100644 index 000000000..59a14271c --- /dev/null +++ b/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx @@ -0,0 +1,84 @@ +import { FC, useMemo } from 'react'; +import { useAccount } from 'wagmi'; +import { BlockProps, Link } from '@lidofinance/lido-ui'; + +import { ReactComponent as ArbitrumLogo } from 'assets/icons/lido-multichain/arbitrum.svg'; +import { ReactComponent as BaseLogo } from 'assets/icons/lido-multichain/base.svg'; +import { ReactComponent as LineaLogo } from 'assets/icons/lido-multichain/linea.svg'; +import { ReactComponent as MantleLogo } from 'assets/icons/lido-multichain/mantle.svg'; +import { ReactComponent as OptimismLogo } from 'assets/icons/lido-multichain/optimism.svg'; +import { ReactComponent as PolygonLogo } from 'assets/icons/lido-multichain/polygon.svg'; +import { ReactComponent as ZkSyncLogo } from 'assets/icons/lido-multichain/zk-sync.svg'; +import { ReactComponent as ScrollLogo } from 'assets/icons/lido-multichain/scroll.svg'; +import { ReactComponent as BNBLogo } from 'assets/icons/lido-multichain/bnb.svg'; + +import { config } from 'config'; +import { useUserConfig } from 'config/user-config'; +import { CHAINS, LIDO_MULTICHAIN_CHAINS } from 'consts/chains'; +import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events'; + +import { + LidoMultichainFallbackWalletStyle, + TextStyle, + ButtonStyle, +} from './styles'; +import { trackMatomoEvent } from '../../../utils/track-matomo-event'; + +export type LidoMultichainFallbackComponent = FC< + { textEnding: string } & BlockProps +>; + +const multichainLogos = { + [LIDO_MULTICHAIN_CHAINS.Arbitrum]: ArbitrumLogo, + [LIDO_MULTICHAIN_CHAINS.Base]: BaseLogo, + [LIDO_MULTICHAIN_CHAINS.Linea]: LineaLogo, + [LIDO_MULTICHAIN_CHAINS.Mantle]: MantleLogo, + [LIDO_MULTICHAIN_CHAINS.Optimism]: OptimismLogo, + [LIDO_MULTICHAIN_CHAINS.Polygon]: PolygonLogo, + [LIDO_MULTICHAIN_CHAINS.zkSync]: ZkSyncLogo, + [LIDO_MULTICHAIN_CHAINS.Scroll]: ScrollLogo, + [LIDO_MULTICHAIN_CHAINS.BNB]: BNBLogo, +}; + +const getChainLogo = (chainId: LIDO_MULTICHAIN_CHAINS) => { + const SVGLogo = multichainLogos[chainId]; + return SVGLogo ? : null; +}; + +export const LidoMultichainFallback: LidoMultichainFallbackComponent = ( + props, +) => { + const { chainId } = useAccount(); + const { defaultChain } = useUserConfig(); + + const defaultChainName = useMemo(() => { + return CHAINS[defaultChain]; + }, [defaultChain]); + + const lidoMultichainChainName = useMemo(() => { + // Trick. Anyway, this condition is working only SPA starting. + return (!!chainId && LIDO_MULTICHAIN_CHAINS[chainId]) || 'unknown'; + }, [chainId]); + + return ( + + {getChainLogo(chainId as LIDO_MULTICHAIN_CHAINS)} + + Explore DeFi opportunities on {lidoMultichainChainName} network or + switch to Ethereum {defaultChainName} {props.textEnding} + + + + trackMatomoEvent( + MATOMO_CLICK_EVENTS_TYPES.lidoOnLidoMultichainOpportunities, + ) + } + > + Lido Multichain + + + + ); +}; diff --git a/shared/wallet/l2-fallback/styles.tsx b/shared/wallet/lido-multichain-fallback/styles.tsx similarity index 83% rename from shared/wallet/l2-fallback/styles.tsx rename to shared/wallet/lido-multichain-fallback/styles.tsx index a23651706..4d42b4cc7 100644 --- a/shared/wallet/l2-fallback/styles.tsx +++ b/shared/wallet/lido-multichain-fallback/styles.tsx @@ -2,7 +2,9 @@ import { Button } from '@lidofinance/lido-ui'; import { Card } from 'shared/wallet'; import styled from 'styled-components'; -export const L2FallbackWalletStyle = styled((props) => )` +export const LidoMultichainFallbackWalletStyle = styled((props) => ( + +))` text-align: center; background: linear-gradient( 180deg, From 619dfe530ecb86d298852c78a29c80b2c1c95bfe Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Thu, 15 Aug 2024 03:21:16 +0700 Subject: [PATCH 2/3] feat: lido multichain banners colors and texts updated --- consts/chains.ts | 6 +- .../lido-multichain-fallback.tsx | 23 +++--- .../lido-multichain-fallback/styles.tsx | 82 ++++++++++++++++--- 3 files changed, 86 insertions(+), 25 deletions(-) diff --git a/consts/chains.ts b/consts/chains.ts index 7972923d9..e5bb343be 100644 --- a/consts/chains.ts +++ b/consts/chains.ts @@ -5,13 +5,13 @@ export enum CHAINS { } export enum LIDO_MULTICHAIN_CHAINS { - zkSync = 324, + 'zkSync Era' = 324, Optimism = 10, Arbitrum = 42161, - Polygon = 137, + 'Polygon PoS' = 137, Base = 8453, Mantle = 5000, Linea = 59144, Scroll = 534352, - BNB = 56, + 'BNB Chain' = 56, } diff --git a/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx b/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx index 59a14271c..bbf6b4784 100644 --- a/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx +++ b/shared/wallet/lido-multichain-fallback/lido-multichain-fallback.tsx @@ -17,11 +17,7 @@ import { useUserConfig } from 'config/user-config'; import { CHAINS, LIDO_MULTICHAIN_CHAINS } from 'consts/chains'; import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events'; -import { - LidoMultichainFallbackWalletStyle, - TextStyle, - ButtonStyle, -} from './styles'; +import { Wrap, TextStyle, ButtonStyle } from './styles'; import { trackMatomoEvent } from '../../../utils/track-matomo-event'; export type LidoMultichainFallbackComponent = FC< @@ -34,10 +30,10 @@ const multichainLogos = { [LIDO_MULTICHAIN_CHAINS.Linea]: LineaLogo, [LIDO_MULTICHAIN_CHAINS.Mantle]: MantleLogo, [LIDO_MULTICHAIN_CHAINS.Optimism]: OptimismLogo, - [LIDO_MULTICHAIN_CHAINS.Polygon]: PolygonLogo, - [LIDO_MULTICHAIN_CHAINS.zkSync]: ZkSyncLogo, + [LIDO_MULTICHAIN_CHAINS['Polygon PoS']]: PolygonLogo, + [LIDO_MULTICHAIN_CHAINS['zkSync Era']]: ZkSyncLogo, [LIDO_MULTICHAIN_CHAINS.Scroll]: ScrollLogo, - [LIDO_MULTICHAIN_CHAINS.BNB]: BNBLogo, + [LIDO_MULTICHAIN_CHAINS['BNB Chain']]: BNBLogo, }; const getChainLogo = (chainId: LIDO_MULTICHAIN_CHAINS) => { @@ -52,6 +48,7 @@ export const LidoMultichainFallback: LidoMultichainFallbackComponent = ( const { defaultChain } = useUserConfig(); const defaultChainName = useMemo(() => { + if (CHAINS[defaultChain] === 'Mainnet') return 'Ethereum'; return CHAINS[defaultChain]; }, [defaultChain]); @@ -61,11 +58,13 @@ export const LidoMultichainFallback: LidoMultichainFallbackComponent = ( }, [chainId]); return ( - + {getChainLogo(chainId as LIDO_MULTICHAIN_CHAINS)} - Explore DeFi opportunities on {lidoMultichainChainName} network or - switch to Ethereum {defaultChainName} {props.textEnding} + You’re currently on {lidoMultichainChainName}. +
+ Explore Lido Multichain or switch to {defaultChainName}{' '} + {props.textEnding}. - + ); }; diff --git a/shared/wallet/lido-multichain-fallback/styles.tsx b/shared/wallet/lido-multichain-fallback/styles.tsx index 4d42b4cc7..965a0057c 100644 --- a/shared/wallet/lido-multichain-fallback/styles.tsx +++ b/shared/wallet/lido-multichain-fallback/styles.tsx @@ -1,17 +1,79 @@ import { Button } from '@lidofinance/lido-ui'; +import { LIDO_MULTICHAIN_CHAINS } from 'consts/chains'; import { Card } from 'shared/wallet'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; -export const LidoMultichainFallbackWalletStyle = styled((props) => ( - -))` +type WrapProps = React.ComponentProps & { + chainId: LIDO_MULTICHAIN_CHAINS; +}; +export const Wrap = styled((props) => )` text-align: center; - background: linear-gradient( - 180deg, - #6562ff 11.28%, - #00a3ff 61.02%, - #63d6d2 100% - ); + ${({ chainId }: WrapProps) => { + switch (chainId) { + case LIDO_MULTICHAIN_CHAINS['zkSync Era']: + return css` + background: linear-gradient(52.01deg, #1d1e35 0.01%, #375192 100%); + `; + case LIDO_MULTICHAIN_CHAINS.Optimism: + return css` + background: linear-gradient( + 52.01deg, + #37394a 0%, + #1d1e35 0.01%, + #b73544 100% + ); + `; + case LIDO_MULTICHAIN_CHAINS.Arbitrum: + return css` + background: linear-gradient(52.01deg, #1d1e35 0.01%, #12aaff 100%); + `; + case LIDO_MULTICHAIN_CHAINS['Polygon PoS']: + return css` + background: linear-gradient(52.01deg, #1d1e35 0.01%, #8355cf 100%); + `; + case LIDO_MULTICHAIN_CHAINS.Base: + return css` + background: linear-gradient(52.01deg, #1d1e35 0.01%, #4782fc 100%); + `; + case LIDO_MULTICHAIN_CHAINS.Mantle: + return css` + background: linear-gradient(52.56deg, #141b1a 0.01%, #6ad1af 101.31%); + `; + case LIDO_MULTICHAIN_CHAINS.Linea: + return css` + background: linear-gradient( + 54.15deg, + #4591ac -13.73%, + #84dcfb 91.51% + ); + `; + case LIDO_MULTICHAIN_CHAINS.Scroll: + return css` + background: linear-gradient( + 53.11deg, + #533a1d -16.35%, + #ebc28e 91.56% + ); + `; + case LIDO_MULTICHAIN_CHAINS['BNB Chain']: + return css` + background: linear-gradient( + 54.14deg, + #8e5e17 -22.38%, + #f0b90b 91.42% + ); + `; + default: + return css` + background: linear-gradient( + 180deg, + #6562ff 11.28%, + #00a3ff 61.02%, + #63d6d2 100% + ); + `; + } + }} `; export const TextStyle = styled.p` From e441eaae666c74e2cd9da942c8629ae3f96162de Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Thu, 15 Aug 2024 03:33:41 +0700 Subject: [PATCH 3/3] feat: bnb icon updated --- assets/icons/lido-multichain/bnb.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/icons/lido-multichain/bnb.svg b/assets/icons/lido-multichain/bnb.svg index 97b67eb4d..42c382bfb 100644 --- a/assets/icons/lido-multichain/bnb.svg +++ b/assets/icons/lido-multichain/bnb.svg @@ -1,10 +1,10 @@ - - - + + + - +