Merge pull request #461 from lidofinance/develop

Develop to main

IPFS.json

@@ -3,7 +3,8 @@
     "cid": "bafybeib3zmyqlmantvdd6i5q4ehmo4larvorgquyanne3uoqdbedwgh3aq",
     "leastSafeVersion": "0.36.1",
     "config": {
-      "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"]
+      "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"],
+      "multiChainBanner": [324, 10, 42161, 137, 8453, 5000, 59144, 534352, 56]
     }
   },
   "5": {
@@ -16,7 +17,10 @@
     "cid": "bafybeibbsoqlofslw273b4ih2pdxfaz2zbjmred2ijog725tcmfoewix7y",
     "leastSafeVersion": "0.36.1",
     "config": {
-      "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"]
+      "enabledWithdrawalDexes": ["one-inch", "paraswap", "bebop"],
+      "multiChainBanner": [
+        324, 10, 42161, 137, 8453, 5000, 59144, 534352, 56, 34443
+      ]
     }
   }
 }

config/external-config/types.ts

@@ -12,6 +12,7 @@ export type ManifestEntry = {
 
 export type ManifestConfig = {
   enabledWithdrawalDexes: DexWithdrawalApi[];
+  multiChainBanner: number[];
 };
 
 export type ExternalConfig = Omit<ManifestEntry, 'config'> &

config/external-config/utils.ts

@@ -4,7 +4,45 @@ import { getDexConfig } from 'features/withdrawals/request/withdrawal-rates';
 
 import FallbackLocalManifest from 'IPFS.json' assert { type: 'json' };
 
-// TODO: refactor on config expansion
+const isEnabledDexesValid = (config: object) => {
+  if (
+    !(
+      'enabledWithdrawalDexes' in config &&
+      Array.isArray(config.enabledWithdrawalDexes)
+    )
+  )
+    return false;
+
+  const enabledWithdrawalDexes = config.enabledWithdrawalDexes;
+
+  if (
+    !enabledWithdrawalDexes.every(
+      (dex) => typeof dex === 'string' && dex !== '',
+    )
+  )
+    return false;
+
+  return new Set(enabledWithdrawalDexes).size === enabledWithdrawalDexes.length;
+};
+
+const isMultiChainBannerValid = (config: object) => {
+  // allow empty config
+  if (!('multiChainBanner' in config) || !config.multiChainBanner) return true;
+
+  if (!Array.isArray(config.multiChainBanner)) return false;
+
+  const multiChainBanner = config.multiChainBanner;
+
+  if (
+    !multiChainBanner.every(
+      (chainId) => typeof chainId === 'number' && chainId > 0,
+    )
+  )
+    return false;
+
+  return !(new Set(multiChainBanner).size !== multiChainBanner.length);
+};
+
 export const isManifestEntryValid = (
   entry?: unknown,
 ): entry is ManifestEntry => {
@@ -18,16 +56,10 @@ export const isManifestEntryValid = (
     entry.config
   ) {
     const config = entry.config;
-    if (
-      'enabledWithdrawalDexes' in config &&
-      Array.isArray(config.enabledWithdrawalDexes)
-    ) {
-      const enabledWithdrawalDexes = config.enabledWithdrawalDexes;
-      return (
-        new Set(enabledWithdrawalDexes).size === enabledWithdrawalDexes.length
-      );
-    }
-    return false;
+
+    return [isEnabledDexesValid, isMultiChainBannerValid]
+      .map((validator) => validator(config))
+      .every((isValid) => isValid);
   }
   return false;
 };
@@ -39,6 +71,7 @@ export const getBackwardCompatibleConfig = (
     enabledWithdrawalDexes: config.enabledWithdrawalDexes.filter(
       (dex) => !!getDexConfig(dex),
     ),
+    multiChainBanner: config.multiChainBanner ?? [],
   };
 };
 

config/groups/revalidation.ts

@@ -1,15 +1,2 @@
-import type { ManifestConfig, ManifestEntry } from 'config/external-config';
-
 export const DEFAULT_REVALIDATION = 60 * 15; // 15 minutes
 export const ERROR_REVALIDATION_SECONDS = 60; // 1 minute
-
-export const FALLBACK_CONFIG: ManifestConfig = {
-  enabledWithdrawalDexes: [],
-};
-
-export const FALLBACK_MANIFEST_ENTRY: ManifestEntry = {
-  cid: undefined,
-  ens: undefined,
-  leastSafeVersion: undefined,
-  config: FALLBACK_CONFIG,
-};

config/groups/web3.ts

@@ -2,6 +2,8 @@ import { parseEther } from '@ethersproject/units';
 
 // interval in ms for RPC event polling for token balance and tx updates
 export const PROVIDER_POLLING_INTERVAL = 12_000;
+// how long in ms to wait for RPC batching(multicall and provider)
+export const PROVIDER_BATCH_TIME = 150;
 
 // account for gas estimation
 // will always have >=0.001 ether, >=0.001 stETH, >=0.001 wstETH

consts/chains.ts

@@ -14,4 +14,5 @@ export enum LIDO_MULTICHAIN_CHAINS {
   Linea = 59144,
   Scroll = 534352,
   'BNB Chain' = 56,
+  'Mode Chain' = 34443,
 }

consts/external-links.ts

@@ -5,6 +5,6 @@ export const LINK_ADD_NFT_GUIDE = `${config.helpOrigin}/en/articles/7858367-how-
 export const OPEN_OCEAN_REFERRAL_ADDRESS =
   '0xbb1263222b2c020f155d409dba05c4a3861f18f8';
 
-// for dev and local testing you can set to 'http:/localhost:3000/runtime/IPFS.json' and have file at /public/runtime/IPFS.json
+// for dev and local testing you can set to 'http://localhost:3000/runtime/IPFS.json' and have file at /public/runtime/IPFS.json
 export const IPFS_MANIFEST_URL =
   'https://raw.githubusercontent.com/lidofinance/ethereum-staking-widget/main/IPFS.json';

consts/matomo-click-events.ts

@@ -63,6 +63,16 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   // /withdrawal/request and /withdrawal/claim shared events
   withdrawalWhatAreStakingPenaltiesFAQ = 'withdrawalWhatAreStakingPenaltiesFAQ',
   withdrawalNFTGuideFAQ = 'withdrawalNFTGuideFAQ',
+
+  // /rewards page
+  rewardsExportCSV = 'rewardsExportCSV',
+  rewardsHistoricalStethPriceCheck = 'rewardsHistoricalStethPriceCheck',
+  rewardsHistoricalStethPriceUncheck = 'rewardsHistoricalStethPriceUncheck',
+  rewardsIncludeTransfersCheck = 'rewardsIncludeTransfersCheck',
+  rewardsIncludeTransfersUncheck = 'rewardsIncludeTransfersUncheck',
+  rewardsHistoricalCurrencyUSD = 'rewardsHistoricalCurrencyUSD',
+  rewardsHistoricalCurrencyEUR = 'rewardsHistoricalCurrencyEUR',
+  rewardsHistoricalCurrencyGBP = 'rewardsHistoricalCurrencyGBP',
 }
 
 export const MATOMO_CLICK_EVENTS: Record<
@@ -339,4 +349,46 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push on "How do I add the Lido NFT to my wallet" guide link in FAQ',
     'eth_withdrawals_how_to_add_nft_guide_FAQ',
   ],
+
+  // /rewards page
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsExportCSV]: [
+    'Ethereum_Rewards_Widget',
+    'Click on "Export CSV"',
+    'eth_rewards_export_csv',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsHistoricalStethPriceCheck]: [
+    'Ethereum_Rewards_Widget',
+    'Click check on "Historical stETH price" in check-box',
+    'eth_historical_stETH_price_check_box_check',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsHistoricalStethPriceUncheck]: [
+    'Ethereum_Rewards_Widget',
+    'Click uncheck on "Historical stETH price" in check-box',
+    'eth_historical_stETH_price_check_box_uncheck',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsIncludeTransfersCheck]: [
+    'Ethereum_Rewards_Widget',
+    'Click check on "Include transfers" in check-box',
+    'eth_include_transfers_check_box_check',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsIncludeTransfersUncheck]: [
+    'Ethereum_Rewards_Widget',
+    'Click uncheck on "Include transfers" in check-box',
+    'eth_include_transfers_check_box_uncheck',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsHistoricalCurrencyUSD]: [
+    'Ethereum_Rewards_Widget',
+    'Click on "USD" in currency choice',
+    'eth_historical_usd_currency_choice',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsHistoricalCurrencyEUR]: [
+    'Ethereum_Rewards_Widget',
+    'Click on "EUR" in currency choice',
+    'eth_historical_eur_currency_choice',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.rewardsHistoricalCurrencyGBP]: [
+    'Ethereum_Rewards_Widget',
+    'Click on "GBP" in currency choice',
+    'eth_historical_gbp_currency_choice',
+  ],
 };

features/ipfs/security-status-banner/use-version-check.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import { useLidoSWR } from '@lido-sdk/react';
-import { useWeb3 } from 'reef-knot/web3-react';
 import { useForceDisconnect } from 'reef-knot/core-react';
+import { useLidoSWR } from '@lido-sdk/react';
 
 import buildInfo from 'build-info.json';
 import { config } from 'config';
 import { useUserConfig } from 'config/user-config';
 import { STRATEGY_IMMUTABLE } from 'consts/swr-strategies';
+import { useDappStatus } from 'shared/hooks/use-dapp-status';
 import { overrideWithQAMockBoolean } from 'utils/qa';
 
 import { isVersionLess } from './utils';
@@ -19,7 +19,7 @@ const URL_CID_REGEX =
   /[/.](?<cid>Qm[1-9A-HJ-NP-Za-km-z]{44,}|b[A-Za-z2-7]{58,}|B[A-Z2-7]{58,}|z[1-9A-HJ-NP-Za-km-z]{48,}|F[0-9A-F]{50,})([./#?]|$)/;
 
 export const useVersionCheck = () => {
-  const { active } = useWeb3();
+  const { isDappActive } = useDappStatus();
   const { setIsWalletConnectionAllowed } = useUserConfig();
   const { forceDisconnect } = useForceDisconnect();
   const [areConditionsAccepted, setConditionsAccepted] = useState(false);
@@ -84,7 +84,7 @@ export const useVersionCheck = () => {
       forceDisconnect();
     }
   }, [
-    active,
+    isDappActive,
     forceDisconnect,
     isNotVerifiable,
     isVersionUnsafe,

features/rewards/components/export/Export.tsx

@@ -5,6 +5,8 @@ import { backendRequest } from 'features/rewards/fetchers/backend';
 import { ButtonStyle } from './Exportstyled';
 
 import type { CurrencyType } from 'features/rewards/constants';
+import { trackEvent } from '@lidofinance/analytics-matomo';
+import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
 
 type ExportProps = {
   currency: CurrencyType;
@@ -33,6 +35,7 @@ export const Export = ({
     });
     const formatted = genExportData(currencyObject, result.events);
     saveAsCSV(formatted);
+    trackEvent(...MATOMO_CLICK_EVENTS.rewardsExportCSV);
   };
 
   return (

features/rewards/components/rewardsListContent/RewardsListContent.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react';
 import { Loader, Divider } from '@lidofinance/lido-ui';
-import { useSDK, useTokenBalance } from '@lido-sdk/react';
-import { TOKENS, getTokenAddress } from '@lido-sdk/constants';
 import { Zero } from '@ethersproject/constants';
 
-import { STRATEGY_LAZY } from 'consts/swr-strategies';
 import { useRewardsHistory } from 'features/rewards/hooks';
 import { ErrorBlockNoSteth } from 'features/rewards/components/errorBlocks/ErrorBlockNoSteth';
 import { RewardsTable } from 'features/rewards/components/rewardsTable';
+import { useStethBalance } from 'shared/hooks/use-balance';
 import { useDappStatus } from 'shared/hooks/use-dapp-status';
 
 import { RewardsListsEmpty } from './RewardsListsEmpty';
@@ -19,6 +17,8 @@ import {
   ErrorWrapper,
 } from './RewardsListContentStyles';
 
+import type { Address } from 'viem';
+
 export const RewardsListContent: FC = () => {
   const { isWalletConnected, isSupportedChain } = useDappStatus();
   const {
@@ -31,14 +31,11 @@ export const RewardsListContent: FC = () => {
     setPage,
     isLagging,
   } = useRewardsHistory();
-  // temporarily until we switched to a new SDK
-  const { chainId } = useSDK();
-  const { data: stethBalance, initialLoading: isStethBalanceLoading } =
-    useTokenBalance(
-      getTokenAddress(chainId || 1, TOKENS.STETH),
-      address,
-      STRATEGY_LAZY,
-    );
+  const { data: stethBalance, isLoading: isStethBalanceLoading } =
+    useStethBalance({
+      account: address as Address,
+      shouldSubscribeToUpdates: false,
+    });
   const hasSteth = stethBalance?.gt(Zero);
 
   if (isWalletConnected && !isSupportedChain)

features/rewards/components/rewardsListHeader/LeftOptions.tsx

@@ -3,6 +3,8 @@ import { Tooltip, Checkbox } from '@lidofinance/lido-ui';
 
 import { useRewardsHistory } from 'features/rewards/hooks/useRewardsHistory';
 import { LeftOptionsWrapper } from './styles';
+import { trackEvent } from '@lidofinance/analytics-matomo';
+import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
 
 export const LeftOptions: FC = () => {
   const {
@@ -20,7 +22,14 @@ export const LeftOptions: FC = () => {
       >
         <Checkbox
           checked={isIncludeTransfers}
-          onChange={() => setIsIncludeTransfers(!isIncludeTransfers)}
+          onChange={() => {
+            trackEvent(
+              ...(!isIncludeTransfers
+                ? MATOMO_CLICK_EVENTS.rewardsIncludeTransfersCheck
+                : MATOMO_CLICK_EVENTS.rewardsIncludeTransfersUncheck),
+            );
+            setIsIncludeTransfers(!isIncludeTransfers);
+          }}
           data-testid="includeTransfersCheckbox"
           label="Include transfers"
         />
@@ -33,9 +42,14 @@ export const LeftOptions: FC = () => {
       >
         <Checkbox
           checked={isUseArchiveExchangeRate}
-          onChange={() =>
-            setIsUseArchiveExchangeRate(!isUseArchiveExchangeRate)
-          }
+          onChange={() => {
+            trackEvent(
+              ...(!isUseArchiveExchangeRate
+                ? MATOMO_CLICK_EVENTS.rewardsHistoricalStethPriceCheck
+                : MATOMO_CLICK_EVENTS.rewardsHistoricalStethPriceUncheck),
+            );
+            setIsUseArchiveExchangeRate(!isUseArchiveExchangeRate);
+          }}
           data-testid="historicalStEthCheckbox"
           label="Historical stETH price"
         />

features/rewards/components/rewardsListHeader/RightOptions.tsx

@@ -4,6 +4,14 @@ import { Export } from 'features/rewards/components/export';
 
 import { RightOptionsWrapper } from './styles';
 import { useRewardsHistory } from 'features/rewards/hooks/useRewardsHistory';
+import { MatomoEventType, trackEvent } from '@lidofinance/analytics-matomo';
+import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
+
+const MATOMO_EVENTS_MAP_CURRENCY_SELECTOR: Record<string, MatomoEventType> = {
+  usd: MATOMO_CLICK_EVENTS.rewardsHistoricalCurrencyUSD,
+  eur: MATOMO_CLICK_EVENTS.rewardsHistoricalCurrencyEUR,
+  gbp: MATOMO_CLICK_EVENTS.rewardsHistoricalCurrencyGBP,
+};
 
 export const RightOptions: FC = () => {
   const {
@@ -15,7 +23,14 @@ export const RightOptions: FC = () => {
   } = useRewardsHistory();
   return (
     <RightOptionsWrapper>
-      <CurrencySelector currency={currencyObject} onChange={setCurrency} />
+      <CurrencySelector
+        currency={currencyObject}
+        onChange={(value) => {
+          const event = MATOMO_EVENTS_MAP_CURRENCY_SELECTOR[value];
+          if (event) trackEvent(...event);
+          setCurrency(value);
+        }}
+      />
       <Export
         currency={currencyObject}
         address={address}