Merge pull request #441 from lidofinance/feature/si-1562-rerturn-unsu…

…pported-banner-to-reward-page feat: return unsupported banner to reward page
lidofinance · Aug 22, 2024 · 5eabd5b · 5eabd5b
2 parents ea66b4a + d9d098a
commit 5eabd5b
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 71 deletions.
diff --git a/features/rewards/components/address-input/address-input.tsx b/features/rewards/components/address-input/address-input.tsx
@@ -13,7 +13,6 @@ export const AddressInput: FC<AddressInputProps> = (props) => {
     handleInputChange,
     address,
     addressError: invalidENSAddress,
-    loading,
   } = props;
 
   const invalidEthereumAddress = useMemo(
@@ -28,7 +27,7 @@ export const AddressInput: FC<AddressInputProps> = (props) => {
       onChange={(e) => handleInputChange(e.target.value)}
       placeholder="Ethereum address"
       leftDecorator={
-        loading || isAddressResolving ? (
+        isAddressResolving ? (
           <Loader size="small" />
         ) : invalidEthereumAddress || invalidENSAddress ? (
           <ErrorTriangle />

diff --git a/features/rewards/components/rewardsListContent/RewardsListContent.tsx b/features/rewards/components/rewardsListContent/RewardsListContent.tsx
@@ -1,23 +1,28 @@
 import { FC } from 'react';
 import { Loader, Divider } from '@lidofinance/lido-ui';
-import { useSTETHBalance } from '@lido-sdk/react';
+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 { useDappStatus } from 'shared/hooks/use-dapp-status';
 
 import { RewardsListsEmpty } from './RewardsListsEmpty';
 import { RewardsListErrorMessage } from './RewardsListErrorMessage';
+import { RewardsListsUnsupportedChain } from './RewardsListsUnsupportedChain';
 import {
   LoaderWrapper,
   TableWrapperStyle,
   ErrorWrapper,
 } from './RewardsListContentStyles';
 
 export const RewardsListContent: FC = () => {
+  const { isWalletConnected, isSupportedChain } = useDappStatus();
   const {
+    address,
     error,
     initialLoading,
     data,
@@ -26,11 +31,21 @@ export const RewardsListContent: FC = () => {
     setPage,
     isLagging,
   } = useRewardsHistory();
+  // temporarily until we switched to a new SDK
+  const { chainId } = useSDK();
   const { data: stethBalance, initialLoading: isStethBalanceLoading } =
-    useSTETHBalance(STRATEGY_LAZY);
+    useTokenBalance(
+      getTokenAddress(chainId || 1, TOKENS.STETH),
+      address,
+      STRATEGY_LAZY,
+    );
   const hasSteth = stethBalance?.gt(Zero);
 
+  if (isWalletConnected && !isSupportedChain)
+    return <RewardsListsUnsupportedChain />;
+
   if (!data && !initialLoading && !error) return <RewardsListsEmpty />;
+
   // showing loading when canceling requests and empty response
   if (
     (!data && !error) ||
@@ -46,6 +61,7 @@ export const RewardsListContent: FC = () => {
       </>
     );
   }
+
   if (error) {
     return (
       <ErrorWrapper>

diff --git a/features/rewards/components/rewardsListContent/RewardsListsUnsupportedChain.tsx b/features/rewards/components/rewardsListContent/RewardsListsUnsupportedChain.tsx
@@ -0,0 +1,32 @@
+import { FC, useMemo } from 'react';
+import { Divider } from '@lidofinance/lido-ui';
+
+import { useConfig } from 'config';
+import { CHAINS } from 'consts/chains';
+import { RewardsListEmptyWrapper } from './RewardsListsEmptyStyles';
+
+export const RewardsListsUnsupportedChain: FC = () => {
+  const {
+    config: { supportedChains },
+  } = useConfig();
+
+  const supportedChainsNames = useMemo(() => {
+    // 'Chain ID' array to 'Chain name' array exclude unknown chain id
+    const chains = supportedChains.map((id) => CHAINS[id]).filter(Boolean);
+    const lastChain = chains.pop();
+    // to str
+    return [chains.join(', '), lastChain].filter((chain) => chain).join(' or ');
+  }, [supportedChains]);
+
+  return (
+    <>
+      <Divider indents="lg" />
+      <RewardsListEmptyWrapper>
+        <p>
+          Please switch to {supportedChainsNames} in your wallet to see the
+          stats.
+        </p>
+      </RewardsListEmptyWrapper>
+    </>
+  );
+};
diff --git a/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx b/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx
@@ -8,17 +8,21 @@ import { RewardsListHeaderStyle } from './styles';
 import { TitleStyle } from './styles';
 
 export const RewardsListHeader: FC = () => {
-  const { isDappActive } = useDappStatus();
+  const { isWalletConnected, isSupportedChain } = useDappStatus();
   const { error, data } = useRewardsHistory();
+
   return (
     <RewardsListHeaderStyle data-testid="rewardsHeader">
       <TitleStyle>Reward history</TitleStyle>
-      {isDappActive && !error && data && data?.events.length > 0 && (
-        <>
-          <LeftOptions />
-          <RightOptions />
-        </>
-      )}
+      {!error &&
+        data &&
+        data?.events.length > 0 &&
+        (!isWalletConnected || (isWalletConnected && isSupportedChain)) && (
+          <>
+            <LeftOptions />
+            <RightOptions />
+          </>
+        )}
     </RewardsListHeaderStyle>
   );
 };
diff --git a/features/rewards/components/stats/average-apr-block.tsx b/features/rewards/components/stats/average-apr-block.tsx
@@ -15,28 +15,24 @@ export const AverageAprBlock: FC = () => {
       loading={loading}
       dataTestId="averageAprBlock"
       title={
-        <>
-          <FlexCenter>
-            Average APR
-            <Tooltip title={'APR on stETH over your staking period'}>
-              <Question />
-            </Tooltip>
-          </FlexCenter>
-        </>
+        <FlexCenter>
+          Average APR
+          <Tooltip title={'APR on stETH over your staking period'}>
+            <Question />
+          </Tooltip>
+        </FlexCenter>
       }
       value={
-        <>
-          {parseFloat(data?.averageApr || '0') ? (
-            <>
-              <NumberFormat number={data?.averageApr} percent />
-              <Box display="inline-block" pl="3px">
-                %
-              </Box>
-            </>
-          ) : (
-            '—'
-          )}
-        </>
+        parseFloat(data?.averageApr || '0') ? (
+          <>
+            <NumberFormat number={data?.averageApr} percent />
+            <Box display="inline-block" pl="3px">
+              %
+            </Box>
+          </>
+        ) : (
+          '—'
+        )
       }
       valueDataTestId="averageApr"
     />

diff --git a/features/rewards/components/stats/steth-balance-block.tsx b/features/rewards/components/stats/steth-balance-block.tsx
@@ -9,36 +9,40 @@ import { Item } from './components/item';
 
 export const StEthBalanceBlock: FC = () => {
   const { data: balanceData } = useRewardsBalanceData();
-  const { currencyObject: currency, loading } = useRewardsHistory();
+  const {
+    data: dataRewards,
+    currencyObject: currency,
+    loading,
+  } = useRewardsHistory();
 
   return (
     <Item
       loading={loading}
       dataTestId="stEthBalanceBlock"
       title="stETH balance"
       value={
-        !balanceData?.stEthBalanceParsed ? (
-          '—'
-        ) : (
+        balanceData?.stEthBalanceParsed && dataRewards ? (
           <>
             <NumberFormat number={balanceData?.stEthBalanceParsed} />
             <Box display="inline-block" pl={'3px'}>
               stETH
             </Box>
           </>
+        ) : (
+          '—'
         )
       }
       valueDataTestId="stEthBalance"
       underValue={
-        !balanceData?.stEthCurrencyBalance ? (
-          '—'
-        ) : (
+        balanceData?.stEthCurrencyBalance ? (
           <>
             <Box display="inline-block" pr={'3px'}>
               {currency.symbol}
             </Box>
             <NumberFormat number={balanceData?.stEthCurrencyBalance} currency />
           </>
+        ) : (
+          '—'
         )
       }
       underValueDataTestId="stEthBalanceIn$"

diff --git a/features/rewards/components/stats/steth-price-block.tsx b/features/rewards/components/stats/steth-price-block.tsx
@@ -21,31 +21,29 @@ export const StEthPriceBlock: FC = () => {
       dataTestId="stEthPriceBlock"
       title="stETH price"
       value={
-        !data?.stETHCurrencyPrice[currency.id] ? (
-          '—'
-        ) : (
+        data?.stETHCurrencyPrice[currency.id] ? (
           <>
             <Box display="inline-block" pr="3px">
               {currency.symbol}
             </Box>
             <NumberFormat number={data?.stETHCurrencyPrice[currency.id]} ETH />
           </>
+        ) : (
+          '—'
         )
       }
       valueDataTestId="stEthPrice"
       underValue={
-        <>
-          {data?.stETHCurrencyPrice[currency.id] ? (
-            <>
-              <NumberFormat number={stEthEth?.toString()} StEthEth />
-              <Box display="inline-block" pl={'3px'}>
-                ETH
-              </Box>
-            </>
-          ) : (
-            '—'
-          )}
-        </>
+        data?.stETHCurrencyPrice[currency.id] ? (
+          <>
+            <NumberFormat number={stEthEth?.toString()} StEthEth />
+            <Box display="inline-block" pl={'3px'}>
+              ETH
+            </Box>
+          </>
+        ) : (
+          '—'
+        )
       }
       underValueDataTestId="ethRate"
     />

diff --git a/features/rewards/components/stats/steth-rewarded-block.tsx b/features/rewards/components/stats/steth-rewarded-block.tsx
@@ -20,31 +20,31 @@ export const StEthRewardedBlock: FC = () => {
       dataTestId="stEthRewardedBlock"
       title="stETH rewarded"
       value={
-        !data?.totals.ethRewards ? (
-          '—'
-        ) : (
+        data?.totals.ethRewards ? (
           <GreenText>
             <NumberFormat number={data?.totals.ethRewards} />
             <Box display="inline-block" pl={'3px'}>
               stETH
             </Box>
           </GreenText>
+        ) : (
+          '—'
         )
       }
-      valueDataTestId="stEthRewardedIn$"
+      valueDataTestId="stEthRewarded"
       underValue={
-        !data?.totals.currencyRewards ? (
-          '—'
-        ) : (
+        data?.totals.currencyRewards ? (
           <>
             <Box display="inline-block" pr={'3px'}>
               {currency.symbol}
             </Box>
             <NumberFormat number={data?.totals.currencyRewards} currency />
           </>
+        ) : (
+          '—'
         )
       }
-      underValueDataTestId="stEthBalanceIn$"
+      underValueDataTestId="stEthRewardedIn$"
     />
   );
 };
diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx
@@ -2,11 +2,14 @@ import { FC, useEffect, useState } from 'react';
 
 import { StatsWrapper } from 'features/rewards/components/statsWrapper';
 import { Stats } from 'features/rewards/components/stats';
+import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { Fallback } from 'shared/wallet';
 
 import { Wallet } from './wallet';
 
 export const TopCard: FC = () => {
   const [visible, setVisible] = useState(false);
+  const { isWalletConnected, isSupportedChain } = useDappStatus();
 
   // fix flash after reload page
   useEffect(() => {
@@ -17,7 +20,8 @@ export const TopCard: FC = () => {
 
   return (
     <>
-      <Wallet />
+      {isWalletConnected && !isSupportedChain ? <Fallback /> : <Wallet />}
+
       <StatsWrapper>
         <Stats />
       </StatsWrapper>

diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx
@@ -17,7 +17,7 @@ export const Wallet: FC = () => {
   } = useRewardsHistory();
 
   return (
-    <WalletStyle>
+    <WalletStyle data-testid="inputSection">
       <ThemeProvider theme={themeDark}>
         <WalletContentStyle>
           <AddressInput

diff --git a/features/rewards/hooks/useGetCurrentAddress.ts b/features/rewards/hooks/useGetCurrentAddress.ts
@@ -6,7 +6,7 @@ import { useSDK } from '@lido-sdk/react';
 
 import { resolveEns, isValidEns, isValidAddress } from 'features/rewards/utils';
 import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider';
-import { overrideWithQAMockString } from 'utils/qa';
+import { useDappStatus } from 'shared/hooks/use-dapp-status';
 
 type UseGetCurrentAddress = () => {
   address: string;
@@ -28,6 +28,7 @@ export const useGetCurrentAddress: UseGetCurrentAddress = () => {
   const { account } = useSDK();
   const { staticRpcProvider } = useCurrentStaticRpcProvider();
   const { isReady, query } = useRouter();
+  const { isSupportedChain } = useDappStatus();
 
   const getEnsAddress = useCallback(
     async (value: string) => {
@@ -87,13 +88,11 @@ export const useGetCurrentAddress: UseGetCurrentAddress = () => {
         return;
       }
       // From a connected wallet
-      if (account) {
-        setInputValue(
-          overrideWithQAMockString(account, 'mock-qa-rewards-address'),
-        );
+      if (account && isSupportedChain) {
+        setInputValue(account);
       }
     }
-  }, [account, query.address, isReady, setInputValue]);
+  }, [account, query.address, isReady, setInputValue, isSupportedChain]);
 
   return {
     address,