Merge pull request #335 from lidofinance/develop

Develop to main

config/groups/stake.ts

@@ -1,6 +1,6 @@
 import { BigNumber } from 'ethers';
-import { AddressZero } from '@ethersproject/constants';
 import { parseEther } from '@ethersproject/units';
+import { AddressZero } from '@ethersproject/constants';
 
 import { StakeSwapDiscountIntegrationKey } from 'features/stake/swap-discount-banner';
 
@@ -26,6 +26,8 @@ export const STAKE_GASLIMIT_FALLBACK = BigNumber.from(
   ),
 );
 
+export const STAKE_WIDGET_METRIC_SUFFIX = '01';
+
 export const STAKE_FALLBACK_REFERRAL_ADDRESS = preConfig.ipfsMode
   ? IPFS_REFERRAL_ADDRESS
   : AddressZero;

consts/matomo-click-events.ts

@@ -20,6 +20,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   faqLidoEthAprDocs = 'faqLidoEthAprDocs',
   faqHowCanIGetStEthWidget = 'faqHowCanIGetStEthWidget',
   faqHowCanIGetStEthIntegrations = 'faqHowCanIGetStEthIntegrations',
+  faqHowCanIGetStEthLedger = 'faqHowCanIGetStEthLedger',
   faqHowCanIUseSteth = 'faqHowCanIUseSteth',
   faqWhereCanICoverIdleFinance = 'faqWhereCanICoverIdleFinance',
   faqWhereCanICoverNexusMutual = 'faqWhereCanICoverNexusMutual',
@@ -151,6 +152,11 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push «DEX Lido integrations» in FAQ How can I get stETH? on stake widget',
     'eth_widget_faq_howCanIGetStEth_dexLidoIntegrations',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetStEthLedger]: [
+    'Ethereum_Staking_Widget',
+    'Push «Ledger Ethereum wallet» in FAQ How can I get stETH? on stake widget',
+    'eth_widget_faq_howCanIGetStEth_ledgerEthereumWallet',
+  ],
   [MATOMO_CLICK_EVENTS_TYPES.faqHowCanIUseSteth]: [
     'Ethereum_Staking_Widget',
     'Push «more» in FAQ How can I use stETH? on stake widget',

features/stake/stake-faq/list/how-can-i-get-steth.tsx

@@ -11,7 +11,7 @@ export const HowCanIGetSteth: FC = () => {
     <Accordion summary="How can I get stETH?">
       <p>
         You can get stETH many ways, including interacting with the smart
-        contract directly.Yet, it is much easier to use a{' '}
+        contract directly. Yet, it is much easier to use a{' '}
         <LocalLink
           href={HOME_PATH}
           onClick={() =>
@@ -20,8 +20,15 @@ export const HowCanIGetSteth: FC = () => {
           aria-hidden="true"
         >
           Lido Ethereum staking widget
-        </LocalLink>{' '}
-        and in other{' '}
+        </LocalLink>
+        , stake your tokens directly from{' '}
+        <OuterLink
+          href={'https://www.ledger.com/coin/wallet/ethereum'}
+          data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetStEthLedger}
+        >
+          Ledger Ethereum wallet
+        </OuterLink>
+        , or in other{' '}
         <OuterLink
           href={'https://lido.fi/lido-ecosystem?tokens=stETH&categories=Get'}
           data-matomo={MATOMO_CLICK_EVENTS_TYPES.faqHowCanIGetStEthIntegrations}

features/stake/stake-form/stake-form-context/stake-form-context.tsx

@@ -151,7 +151,6 @@ const useStakeFormNetworkData = (): StakeFormNetworkData => {
 // Data provider
 //
 export const StakeFormProvider: FC<PropsWithChildren> = ({ children }) => {
-  const router = useRouter();
   const networkData = useStakeFormNetworkData();
   const validationContextPromise = useStakeFormValidationContext(networkData);
 
@@ -168,22 +167,24 @@ export const StakeFormProvider: FC<PropsWithChildren> = ({ children }) => {
 
   // consumes amount query param
   // SSG safe
+  const { isReady, query, pathname, replace } = useRouter();
   useEffect(() => {
-    if (!router.isReady) return;
+    if (!isReady) return;
     try {
-      const { amount, ref, ...rest } = router.query;
+      const { amount, ref, ...rest } = query;
+
       if (typeof ref === 'string') {
         setValue('referral', ref);
       }
       if (typeof amount === 'string') {
-        void router.replace({ pathname: router.pathname, query: rest });
+        void replace({ pathname, query: rest });
         const amountBN = parseEther(amount);
         setValue('amount', amountBN);
       }
     } catch {
       //noop
     }
-  }, [router, setValue]);
+  }, [isReady, pathname, query, replace, setValue]);
 
   const { retryEvent, retryFire } = useFormControllerRetry();
 

features/stake/stake-form/use-stake.ts

@@ -1,5 +1,6 @@
 import { BigNumber } from 'ethers';
 import { useCallback } from 'react';
+import { useConnectorInfo } from 'reef-knot/core-react';
 import { useWeb3 } from 'reef-knot/web3-react';
 import invariant from 'tiny-invariant';
 
@@ -11,7 +12,12 @@ import { isContract } from 'utils/isContract';
 import { getFeeData } from 'utils/getFeeData';
 import { runWithTransactionLogger } from 'utils';
 
-import { MockLimitReachedError, getAddress, applyGasLimitRatio } from './utils';
+import {
+  MockLimitReachedError,
+  getAddress,
+  applyGasLimitRatio,
+  applyCalldataSuffix,
+} from './utils';
 import { useTxModalStagesStake } from './hooks/use-tx-modal-stages-stake';
 
 type StakeArguments = {
@@ -30,6 +36,10 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
   const { staticRpcProvider } = useCurrentStaticRpcProvider();
   const { providerWeb3, providerRpc } = useSDK();
   const { txModalStages } = useTxModalStagesStake();
+  const { isLedgerLive, isLedger } = useConnectorInfo();
+
+  // modifying calldata brakes clear sign
+  const shouldApplyCalldataSuffix = !isLedger && !isLedgerLive;
 
   return useCallback(
     async ({ amount, referral }: StakeArguments): Promise<boolean> => {
@@ -74,17 +84,20 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
               maxFeePerGas,
             };
 
-            const originalGasLimit = await stethContractWeb3.estimateGas.submit(
+            const tx = await stethContractWeb3.populateTransaction.submit(
               referralAddress,
               overrides,
             );
 
+            if (shouldApplyCalldataSuffix) applyCalldataSuffix(tx);
+
+            const originalGasLimit = await providerWeb3.estimateGas(tx);
             const gasLimit = applyGasLimitRatio(originalGasLimit);
 
-            return stethContractWeb3.submit(referralAddress, {
-              ...overrides,
-              gasLimit,
-            });
+            tx.gasLimit = gasLimit;
+
+            const signer = providerWeb3.getSigner();
+            return signer.sendTransaction(tx);
           }
         };
 
@@ -122,10 +135,11 @@ export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
       account,
       providerWeb3,
       stethContractWeb3,
-      providerRpc,
       txModalStages,
+      providerRpc,
       onConfirm,
       staticRpcProvider,
+      shouldApplyCalldataSuffix,
       onRetry,
     ],
   );

features/stake/stake-form/utils.ts

@@ -1,8 +1,9 @@
-import { BigNumber } 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
@@ -20,9 +21,19 @@ export const getAddress = async (
   } catch {
     // noop
   }
+  // if code gets here, ref is invalid and we need to throw error
   throw new ReferralAddressError();
 };
 
+// adds metrics indicator for widget tx
+export const applyCalldataSuffix = (tx: PopulatedTransaction) => {
+  if (!config.ipfsMode) {
+    invariant(tx.data, 'transaction must have calldata');
+    tx.data = tx.data + config.STAKE_WIDGET_METRIC_SUFFIX;
+  }
+  return tx;
+};
+
 export class ReferralAddressError extends Error {
   reason: string;
   constructor() {

pages/index.tsx

@@ -2,5 +2,10 @@ import { config } from 'config';
 
 import { StakePage } from 'features/stake';
 import { HomePageIpfs } from 'features/ipfs';
+import { GetStaticProps } from 'next';
+
+export const getStaticProps: GetStaticProps = async () => {
+  return { props: {} };
+};
 
 export default config.ipfsMode ? HomePageIpfs : StakePage;

shared/hooks/useIsLedgerLive.ts

@@ -1,4 +1,4 @@
-import { useConnectorInfo } from 'reef-knot/web3-react';
+import { useConnectorInfo } from 'reef-knot/core-react';
 import { useAppFlag } from 'providers/app-flag';
 
 export const useIsLedgerLive = () => {

yarn.lock

@@ -2429,11 +2429,16 @@
   dependencies:
     "@noble/hashes" "1.3.3"
 
-"@noble/[email protected]", "@noble/hashes@^1.3.2":
+"@noble/[email protected]":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.3.tgz#39908da56a4adc270147bb07968bf3b16cfe1699"
   integrity sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==
 
+"@noble/hashes@^1.3.3":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.4.0.tgz#45814aa329f30e4fe0ba49426f49dfccdd066426"
+  integrity sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -2793,13 +2798,13 @@
     buffer "~6.0.3"
 
 "@solana/web3.js@^1.70.1":
-  version "1.89.1"
-  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.89.1.tgz#52df6820f2d088c4558aa359af40580a03d10ec9"
-  integrity sha512-t9TTLtPQxtQB3SAf/5E8xPXfVDsC6WGOsgKY02l2cbe0HLymT7ynE8Hu48Lk5qynHCquj6nhISfEHcjMkYpu/A==
+  version "1.91.6"
+  resolved "https://registry.yarnpkg.com/@solana/web3.js/-/web3.js-1.91.6.tgz#c090661c344cbc61e6cdeb0da67d3ea80d5848e1"
+  integrity sha512-dm20nN6HQvXToo+kM51nxHdtaa2wMSRdeK37p+WIWESfeiVHqV8XbV4XnWupq6ngt5vIckhGFG7ZnTBxUgLzDA==
   dependencies:
     "@babel/runtime" "^7.23.4"
     "@noble/curves" "^1.2.0"
-    "@noble/hashes" "^1.3.2"
+    "@noble/hashes" "^1.3.3"
     "@solana/buffer-layout" "^4.0.1"
     agentkeepalive "^4.5.0"
     bigint-buffer "^1.1.5"