Merge pull request #578 from lidofinance/feature/soneium-based-on-dev…

…elop

Add support for Soneium and SoneiumMinato chains

.env.example

@@ -11,13 +11,17 @@ EL_RPC_URLS_17000=
 EL_RPC_URLS_11155111=
 EL_RPC_URLS_10=
 EL_RPC_URLS_11155420=
+EL_RPC_URLS_1868=https://rpc.soneium.org
+EL_RPC_URLS_1946=https://rpc.minato.soneium.org
 
 # IPFS prefill RPC URLs - list of URLs delimited by commas
 PREFILL_UNSAFE_EL_RPC_URLS_1=
 PREFILL_UNSAFE_EL_RPC_URLS_17000=
 PREFILL_UNSAFE_EL_RPC_URLS_11155111=
 PREFILL_UNSAFE_EL_RPC_URLS_10=
 PREFILL_UNSAFE_EL_RPC_URLS_11155420=
+PREFILL_UNSAFE_EL_RPC_URLS_1868=
+PREFILL_UNSAFE_EL_RPC_URLS_1946=
 
 # supported networks for connecting wallet
 SUPPORTED_CHAINS=1,17000,11155111,1115542

IPFS.json

@@ -5,7 +5,7 @@
     "config": {
       "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"],
       "multiChainBanner": [
-        324, 10, 42161, 137, 8453, 5000, 59144, 534352, 56, 34443, 48900
+        324, 10, 42161, 137, 8453, 5000, 59144, 534352, 56, 34443, 48900, 1868
       ],
       "featureFlags": {}
     }

config/get-secret-config.ts

@@ -14,6 +14,10 @@ export type SecretConfigType = Modify<
 
     rpcUrls_10: [string, ...string[]];
     rpcUrls_11155420: [string, ...string[]];
+
+    rpcUrls_1868: [string, ...string[]];
+    rpcUrls_1946: [string, ...string[]];
+
     // Dynamic keys like rpcUrls_<number>
     [key: `rpcUrls_${number}`]: string[];
 
@@ -55,6 +59,15 @@ export const getSecretConfig = (): SecretConfigType => {
     rpcUrls_11155420: (serverRuntimeConfig.rpcUrls_11155420?.split(',') ??
       []) as [string, ...string[]],
 
+    rpcUrls_1868: (serverRuntimeConfig.rpcUrls_1868?.split(',') ?? []) as [
+      string,
+      ...string[],
+    ],
+    rpcUrls_1946: (serverRuntimeConfig.rpcUrls_1946?.split(',') ?? []) as [
+      string,
+      ...string[],
+    ],
+
     cspReportOnly: toBoolean(serverRuntimeConfig.cspReportOnly),
 
     rateLimit: Number(serverRuntimeConfig.rateLimit) || 100,

config/user-config/types.ts

@@ -9,6 +9,8 @@ export type UserConfigDefaultType = {
     [CHAINS.Sepolia]: string[];
     [CHAINS.OptimismSepolia]: string[];
     [CHAINS.Optimism]: string[];
+    [CHAINS.Soneium]: string[];
+    [CHAINS.SoneiumMinato]: string[];
   };
   walletconnectProjectId: string | undefined;
 };

config/user-config/utils.ts

@@ -18,6 +18,8 @@ export const getUserConfigDefault = (): UserConfigDefaultType => {
       [CHAINS.Sepolia]: config.prefillUnsafeElRpcUrls11155111,
       [CHAINS.Optimism]: config.prefillUnsafeElRpcUrls10,
       [CHAINS.OptimismSepolia]: config.prefillUnsafeElRpcUrls11155420,
+      [CHAINS.Soneium]: config.prefillUnsafeElRpcUrls1868,
+      [CHAINS.SoneiumMinato]: config.prefillUnsafeElRpcUrls1946,
     },
     walletconnectProjectId: config.walletconnectProjectId,
   };

consts/chains.ts

@@ -6,6 +6,8 @@ export enum CHAINS {
   Sepolia = 11155111,
   Optimism = 10,
   OptimismSepolia = 11155420,
+  Soneium = 1868,
+  SoneiumMinato = 1946,
 }
 
 export enum LIDO_MULTICHAIN_CHAINS {
@@ -22,6 +24,7 @@ export enum LIDO_MULTICHAIN_CHAINS {
   'Zircuit Chain' = 48900,
   Unichain = 130,
   Metis = 1088,
+  Soneium = 1868,
 }
 
 // TODO: move to @lidofinance/lido-ethereum-sdk package

consts/matomo-click-events.ts

@@ -35,17 +35,29 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   faqHowCanIUnstakeStEthIntegrations = 'faqHowCanIUnstakeStEthIntegrations',
   faqHowCanIGetWstethWrapLink = 'faqHowCanIGetWstethWrapLink',
   faqHowCanIGetWstethIntegrationsLink = 'faqHowCanIGetWstethIntegrationsLink',
-  faqHowCanIGetWstethOnOptimismWrapLink = 'faqHowCanIGetWstethOnOptimismWrapLink',
-  faqHowCanIGetWstethOnOptimismBridgeYourWstETHFromEthereumToOptimism = 'faqHowCanIGetWstethOnOptimismBridgeYourWstETHFromEthereumToOptimism',
-  faqHowCanIGetWstethOnOptimismIntegrations = 'faqHowCanIGetWstethOnOptimismIntegrations',
   faqHowDoIUnwrapWstethUnwrapLink = 'faqHowDoIUnwrapWstethUnwrapLink',
   faqHowCanIUseWstethLidoMultichain = 'faqHowCanIUseWstethLidoMultichain',
   faqHowCanIUseWstethDefiProtocols = 'faqHowCanIUseWstethDefiProtocols',
-  faqHowCanIUseWstethOnOptimismDefiProtocols = 'faqHowCanIUseWstethOnOptimismDefiProtocols',
   faqDoINeedToUnwrapMyWstethWithdrawalsTabs = 'faqDoINeedToUnwrapMyWstethWithdrawalsTabs',
+
+  // Optimism
+  faqHowCanIGetWstethOnOptimismWrapLink = 'faqHowCanIGetWstethOnOptimismWrapLink',
+  faqHowCanIGetWstethOnOptimismBridgeYourWstETHFromEthereumToOptimism = 'faqHowCanIGetWstethOnOptimismBridgeYourWstETHFromEthereumToOptimism',
+  faqHowCanIGetWstethOnOptimismIntegrations = 'faqHowCanIGetWstethOnOptimismIntegrations',
+  faqHowCanIUseWstethOnOptimismDefiProtocols = 'faqHowCanIUseWstethOnOptimismDefiProtocols',
   faqHowCouldIUnwrapWstETHBackToStETHOnOptimismUnwrapLink = 'faqHowCouldIUnwrapWstETHBackToStETHOnOptimismUnwrapLink',
   faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismBridgeYourWstETHOrStETHBack = 'faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismBridgeYourWstETHOrStETHBack',
   faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismWithdrawalsRequestAndClaim = 'faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismWithdrawalsRequestAndClaim',
+
+  // Soneium
+  faqHowCanIGetWstethOnSoneiumWrapLink = 'faqHowCanIGetWstethOnSoneiumWrapLink',
+  faqHowCanIGetWstethOnSoneiumBridgeYourWstETHFromEthereumToSoneium = 'faqHowCanIGetWstethOnSoneiumBridgeYourWstETHFromEthereumToSoneium',
+  faqHowCanIGetWstethOnSoneiumIntegrations = 'faqHowCanIGetWstethOnSoneiumIntegrations',
+  faqHowCanIUseWstethOnSoneiumDefiProtocols = 'faqHowCanIUseWstethOnSoneiumDefiProtocols',
+  faqHowCouldIUnwrapWstETHBackToStETHOnSoneiumUnwrapLink = 'faqHowCouldIUnwrapWstETHBackToStETHOnSoneiumUnwrapLink',
+  faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumBridgeYourWstETHOrStETHBack = 'faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumBridgeYourWstETHOrStETHBack',
+  faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumWithdrawalsRequestAndClaim = 'faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumWithdrawalsRequestAndClaim',
+
   // /wrap page
   wrapTokenSelectSTETH = 'wrapTokenSelectSteth',
   wrapTokenSelectETH = 'wrapTokenSelectEth',
@@ -249,17 +261,33 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push «Wrap & Unwrap staking widget» in FAQ How can I get wstETH (Optimism)',
     'eth_widget_faq_howgetwsteth_wrap_optimism',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetWstethOnSoneiumWrapLink]: [
+    'Ethereum_Staking_Widget',
+    'Push «Wrap & Unwrap staking widget» in FAQ How can I get wstETH (Soneium)',
+    'eth_widget_faq_howgetwsteth_wrap_soneium',
+  ],
   [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetWstethOnOptimismBridgeYourWstETHFromEthereumToOptimism]:
     [
       'Ethereum_Staking_Widget',
       'Push «bridge your wstETH from Ethereum to Optimism» in How can I get wstETH on Optimism?',
       'eth_widget_faq_howCanIGetWstethOnOptimism_bridgeYourWstETHFromEthereumToOptimism',
     ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetWstethOnSoneiumBridgeYourWstETHFromEthereumToSoneium]:
+    [
+      'Ethereum_Staking_Widget',
+      'Push «bridge your wstETH from Ethereum to Soneium» in How can I get wstETH on Soneium?',
+      'eth_widget_faq_howCanIGetWstethOnSoneium_bridgeYourWstETHFromEthereumToSoneium',
+    ],
   [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetWstethOnOptimismIntegrations]: [
     'Ethereum_Staking_Widget',
     'Push «DEX Lido integrations» in FAQ How can I get wstETH (Optimism)',
     'eth_widget_faq_howgetwsteth_dexLidoIntegrations_optimism',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetWstethOnSoneiumIntegrations]: [
+    'Ethereum_Staking_Widget',
+    'Push «DEX Lido integrations» in FAQ How can I get wstETH (Soneium)',
+    'eth_widget_faq_howgetwsteth_dexLidoIntegrations_soneium',
+  ],
   [MATOMO_CLICK_EVENTS_TYPES.faqHowDoIUnwrapWstethUnwrapLink]: [
     'Ethereum_Staking_Widget',
     'Push «stake.lido.fi/wrap/unwrap» How do I unwrap wstETH back to stETH?',
@@ -275,6 +303,11 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push «L2» How can I use wstETH? (Optimism)',
     'eth_widget_faq_howCanIUseWstETH_l2_optimism',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethOnSoneiumDefiProtocols]: [
+    'Ethereum_Staking_Widget',
+    'Push «L2» How can I use wstETH? (Soneium)',
+    'eth_widget_faq_howCanIUseWstETH_l2_soneium',
+  ],
   [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseWstethDefiProtocols]: [
     'Ethereum_Staking_Widget',
     'Push «DeFi protocols» How can I use wstETH?',
@@ -291,18 +324,36 @@ export const MATOMO_CLICK_EVENTS: Record<
       'Push «Wrap & Unwrap staking widget» How could I unwrap wstETH back to stETH on Optimism?',
       'eth_widget_faq_howCouldIUnwrapWstETHBackToStETHOnOptimismUnwrapLink',
     ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqHowCouldIUnwrapWstETHBackToStETHOnSoneiumUnwrapLink]:
+    [
+      'Ethereum_Staking_Widget',
+      'Push «Wrap & Unwrap staking widget» How could I unwrap wstETH back to stETH on Soneium?',
+      'eth_widget_faq_howCouldIUnwrapWstETHBackToStETHOnSoneiumUnwrapLink',
+    ],
   [MATOMO_CLICK_EVENTS_TYPES.faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismBridgeYourWstETHOrStETHBack]:
     [
       'Ethereum_Staking_Widget',
       'Push «bridge your wstETH or stETH back» What happens if I want to unstake ETH on Ethereum? Can I do that from Optimism?',
       'eth_widget_faq_WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismBridgeYourWstETHOrStETHBack',
     ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumBridgeYourWstETHOrStETHBack]:
+    [
+      'Ethereum_Staking_Widget',
+      'Push «bridge your wstETH or stETH back» What happens if I want to unstake ETH on Ethereum? Can I do that from Soneium?',
+      'eth_widget_faq_WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumBridgeYourWstETHOrStETHBack',
+    ],
   [MATOMO_CLICK_EVENTS_TYPES.faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismWithdrawalsRequestAndClaim]:
     [
       'Ethereum_Staking_Widget',
       'Push «Withdrawals Request and Claim» What happens if I want to unstake ETH on Ethereum? Can I do that from Optimism?',
       'eth_widget_faq_WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimismWithdrawalsRequestAndClaim',
     ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqWhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumWithdrawalsRequestAndClaim]:
+    [
+      'Ethereum_Staking_Widget',
+      'Push «Withdrawals Request and Claim» What happens if I want to unstake ETH on Ethereum? Can I do that from Soneium?',
+      'eth_widget_faq_WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneiumWithdrawalsRequestAndClaim',
+    ],
   // /wrap page
   [MATOMO_CLICK_EVENTS_TYPES.wrapTokenSelectETH]: [
     'Ethereum_Staking_Widget',

env-dynamics.mjs

@@ -64,6 +64,10 @@ export const prefillUnsafeElRpcUrls11155111 =
 export const prefillUnsafeElRpcUrls10 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_10?.split(',') ?? [];
 /** @type string[] */
 export const prefillUnsafeElRpcUrls11155420 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_11155420?.split(',') ?? [];
+/** @type string[] */
+export const prefillUnsafeElRpcUrls1868 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_1868?.split(',') ?? [];
+/** @type string[] */
+export const prefillUnsafeElRpcUrls1946 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_1946?.split(',') ?? [];
 
 /** @type boolean */
 export const enableQaHelpers = toBoolean(process.env.ENABLE_QA_HELPERS);

features/wsteth/shared/wallet/styles.tsx

@@ -2,12 +2,18 @@ import { Card } from 'shared/wallet';
 import styled from 'styled-components';
 
 interface StyledCardProps {
-  $redBg?: boolean;
+  $optimism?: boolean;
+  $soneium?: boolean;
 }
 
 export const StyledCard = styled(Card)<StyledCardProps>`
-  background: ${({ $redBg }) =>
-    $redBg
-      ? 'linear-gradient(52.01deg, #37394A 0%, #1D1E35 0.01%, #B73544 100%)'
-      : 'linear-gradient(52.01deg, #1b3349 0%, #25697e 100%)'};
+  background: ${({ $optimism, $soneium }) => {
+    if ($optimism) {
+      return 'linear-gradient(52.01deg, #37394A 0%, #1D1E35 0.01%, #B73544 100%)';
+    }
+    if ($soneium) {
+      return 'linear-gradient(52.01deg, #9d1451 0.01%, #630876 100%);';
+    }
+    return 'linear-gradient(52.01deg, #1b3349 0%, #25697e 100%)';
+  }};
 `;

features/wsteth/shared/wallet/wallet.tsx

@@ -1,3 +1,5 @@
+import { useAccount } from 'wagmi';
+import { useConnectorInfo } from 'reef-knot/core-react';
 import { Divider, Text } from '@lidofinance/lido-ui';
 
 import { FormatToken } from 'shared/formatters';
@@ -16,19 +18,25 @@ import { CardBalance, CardRow, CardAccount, Fallback } from 'shared/wallet';
 import { StyledCard } from './styles';
 import { useIsLedgerLive } from 'shared/hooks/useIsLedgerLive';
 import { useConfig } from 'config';
-import { useConnectorInfo } from 'reef-knot/core-react';
 
 const WalletComponent = () => {
-  const { isDappActiveOnL2 } = useDappStatus();
+  const { chainType } = useDappStatus();
   const ethBalance = useEthereumBalance();
   const stethBalance = useStethBalance();
   const wstethBalance = useWstethBalance();
 
   const wstethBySteth = useWstethBySteth(stethBalance?.data);
   const stethByWsteth = useStETHByWstETH(wstethBalance?.data);
 
+  const isOptimism = chainType === DAPP_CHAIN_TYPE.Optimism;
+  const isSoneium = chainType === DAPP_CHAIN_TYPE.Soneium;
+
   return (
-    <StyledCard data-testid="wrapCardSection" $redBg={isDappActiveOnL2}>
+    <StyledCard
+      data-testid="wrapCardSection"
+      $optimism={isOptimism}
+      $soneium={isSoneium}
+    >
       <CardRow>
         <CardBalance
           title="ETH balance"
@@ -110,17 +118,15 @@ export const Wallet = ({ isUnwrapMode }: WrapWalletProps) => {
   const isLedgerLive = useIsLedgerLive();
   const { isLedger: isLedgerHardware } = useConnectorInfo();
   const { featureFlags } = useConfig().externalConfig;
-  const { chainType } = useDappStatus();
+  const { isChainTypeOnL2 } = useDappStatus();
+  const { chain } = useAccount();
 
-  const isLedgerLiveOptimism =
-    !featureFlags.ledgerLiveL2 &&
-    isLedgerLive &&
-    chainType === DAPP_CHAIN_TYPE.Optimism;
-  const isLedgerHardwareOptimism =
-    isLedgerHardware && chainType === DAPP_CHAIN_TYPE.Optimism;
+  const isLedgerLiveOnL2 =
+    !featureFlags.ledgerLiveL2 && isLedgerLive && isChainTypeOnL2;
+  const isLedgerHardwareL2 = isLedgerHardware && isChainTypeOnL2;
 
-  if (isLedgerLiveOptimism || isLedgerHardwareOptimism) {
-    const error = `Optimism is currently not supported in ${isLedgerLiveOptimism ? 'Ledger Live' : 'Ledger Hardware'}.`;
+  if (isLedgerLiveOnL2 || isLedgerHardwareL2) {
+    const error = `${chain?.name} is currently not supported in ${isLedgerLiveOnL2 ? 'Ledger Live' : 'Ledger Hardware'}.`;
     return <Fallback error={error} />;
   }
 

features/wsteth/shared/wrap-faq/soneium-faq/faq.tsx

@@ -0,0 +1,23 @@
+import {
+  WhatIsWstethOnSoneium,
+  HowCanIGetWstethOnSoneium,
+  HowCanIUseWstethOnSoneium,
+  CanIStakeMyETHDirectlyOnSoneium,
+  DoIStillGetStakingRewardsWithStETHOrWstETHOnSoneium,
+  DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnSoneium,
+  HowCouldIUnwrapWstETHBackToStETHOnSoneium,
+  WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneium,
+} from './list';
+
+export const SoneiumFAQ = () => (
+  <>
+    <WhatIsWstethOnSoneium />
+    <HowCanIGetWstethOnSoneium />
+    <HowCanIUseWstethOnSoneium />
+    <CanIStakeMyETHDirectlyOnSoneium />
+    <DoIStillGetStakingRewardsWithStETHOrWstETHOnSoneium />
+    <DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnSoneium />
+    <HowCouldIUnwrapWstETHBackToStETHOnSoneium />
+    <WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromSoneium />
+  </>
+);

features/wsteth/shared/wrap-faq/soneium-faq/list/can-i-stake-my-eth-directly-on-soneium.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Accordion } from '@lidofinance/lido-ui';
+
+export const CanIStakeMyETHDirectlyOnSoneium: FC = () => {
+  return (
+    <Accordion summary="Can I stake my ETH directly on Soneium?">
+      <p>
+        No, staking in the Lido Protocol is available only on the Ethereum
+        mainnet.
+      </p>
+    </Accordion>
+  );
+};

features/wsteth/shared/wrap-faq/soneium-faq/list/do-i-need-to-claim-my-staking-rewards-if-i-wrap-steth-to-wsteth-on-soneium.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Accordion } from '@lidofinance/lido-ui';
+
+export const DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnSoneium: FC =
+  () => {
+    return (
+      <Accordion summary="Do I need to claim my staking rewards if I wrap stETH to wstETH on Soneium?">
+        <p>No, staking rewards accrue to wstETH automatically.</p>
+      </Accordion>
+    );
+  };

features/wsteth/shared/wrap-faq/soneium-faq/list/do-i-still-get-staking-rewards-with-steth-or-wsteth-on-soneium.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { Accordion } from '@lidofinance/lido-ui';
+
+export const DoIStillGetStakingRewardsWithStETHOrWstETHOnSoneium: FC = () => {
+  return (
+    <Accordion summary="Do I still get staking rewards with stETH or wstETH on Soneium?">
+      <p>
+        Yes, wrapped stETH gets staking rewards at the same rate as regular
+        stETH. When you keep your stETH in a wrapper, you cannot see your daily
+        staking rewards. However, when you unwrap your wstETH your new stETH
+        balance will have increased relative to the pre-wrapped amount to
+        reflect your received rewards, regardless of whether it&apos;s held on
+        Ethereum or Soneium.
+      </p>
+    </Accordion>
+  );
+};