diff --git a/features/rewards/components/address-input/address-input.tsx b/features/rewards/components/address-input/address-input.tsx index a50daf068..7c222de2a 100644 --- 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 = (props) => { handleInputChange, address, addressError: invalidENSAddress, - loading, } = props; const invalidEthereumAddress = useMemo( @@ -28,7 +27,7 @@ export const AddressInput: FC = (props) => { onChange={(e) => handleInputChange(e.target.value)} placeholder="Ethereum address" leftDecorator={ - loading || isAddressResolving ? ( + isAddressResolving ? ( ) : invalidEthereumAddress || invalidENSAddress ? ( diff --git a/features/rewards/components/rewardsListContent/RewardsListContent.tsx b/features/rewards/components/rewardsListContent/RewardsListContent.tsx index a47f1a6a7..e868152ae 100644 --- a/features/rewards/components/rewardsListContent/RewardsListContent.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListContent.tsx @@ -1,15 +1,18 @@ 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, @@ -17,7 +20,9 @@ import { } 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 ; + if (!data && !initialLoading && !error) return ; + // showing loading when canceling requests and empty response if ( (!data && !error) || @@ -46,6 +61,7 @@ export const RewardsListContent: FC = () => { ); } + if (error) { return ( diff --git a/features/rewards/components/rewardsListContent/RewardsListsUnsupportedChain.tsx b/features/rewards/components/rewardsListContent/RewardsListsUnsupportedChain.tsx new file mode 100644 index 000000000..9f5aaa755 --- /dev/null +++ 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 ( + <> + + +

+ Please switch to {supportedChainsNames} in your wallet to see the + stats. +

+
+ + ); +}; diff --git a/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx b/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx index d156454c4..a1d4a1587 100644 --- 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 ( Reward history - {isDappActive && !error && data && data?.events.length > 0 && ( - <> - - - - )} + {!error && + data && + data?.events.length > 0 && + (!isWalletConnected || (isWalletConnected && isSupportedChain)) && ( + <> + + + + )} ); }; diff --git a/features/rewards/components/stats/average-apr-block.tsx b/features/rewards/components/stats/average-apr-block.tsx index 5b32ed11e..e2e5aefeb 100644 --- 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={ - <> - - Average APR - - - - - + + Average APR + + + + } value={ - <> - {parseFloat(data?.averageApr || '0') ? ( - <> - - - % - - - ) : ( - '—' - )} - + parseFloat(data?.averageApr || '0') ? ( + <> + + + % + + + ) : ( + '—' + ) } valueDataTestId="averageApr" /> diff --git a/features/rewards/components/stats/steth-balance-block.tsx b/features/rewards/components/stats/steth-balance-block.tsx index fbff25179..9fb0832ce 100644 --- a/features/rewards/components/stats/steth-balance-block.tsx +++ b/features/rewards/components/stats/steth-balance-block.tsx @@ -9,7 +9,11 @@ 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 ( { dataTestId="stEthBalanceBlock" title="stETH balance" value={ - !balanceData?.stEthBalanceParsed ? ( - '—' - ) : ( + balanceData?.stEthBalanceParsed && dataRewards ? ( <> stETH + ) : ( + '—' ) } valueDataTestId="stEthBalance" underValue={ - !balanceData?.stEthCurrencyBalance ? ( - '—' - ) : ( + balanceData?.stEthCurrencyBalance ? ( <> {currency.symbol} + ) : ( + '—' ) } underValueDataTestId="stEthBalanceIn$" diff --git a/features/rewards/components/stats/steth-price-block.tsx b/features/rewards/components/stats/steth-price-block.tsx index 8a3e90a0e..dcc091cd4 100644 --- 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] ? ( <> {currency.symbol} + ) : ( + '—' ) } valueDataTestId="stEthPrice" underValue={ - <> - {data?.stETHCurrencyPrice[currency.id] ? ( - <> - - - ETH - - - ) : ( - '—' - )} - + data?.stETHCurrencyPrice[currency.id] ? ( + <> + + + ETH + + + ) : ( + '—' + ) } underValueDataTestId="ethRate" /> diff --git a/features/rewards/components/stats/steth-rewarded-block.tsx b/features/rewards/components/stats/steth-rewarded-block.tsx index 583c34e57..2881eca8a 100644 --- 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 ? ( stETH + ) : ( + '—' ) } - valueDataTestId="stEthRewardedIn$" + valueDataTestId="stEthRewarded" underValue={ - !data?.totals.currencyRewards ? ( - '—' - ) : ( + data?.totals.currencyRewards ? ( <> {currency.symbol} + ) : ( + '—' ) } - underValueDataTestId="stEthBalanceIn$" + underValueDataTestId="stEthRewardedIn$" /> ); }; diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index 9ae2f7ef9..2e44058a5 100644 --- 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 ( <> - + {isWalletConnected && !isSupportedChain ? : } + diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx index f81924e74..7a429f731 100644 --- 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 ( - + { 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, diff --git a/providers/rewardsHistory.tsx b/providers/rewardsHistory.tsx index fe25eea3f..fbf354ef9 100644 --- a/providers/rewardsHistory.tsx +++ b/providers/rewardsHistory.tsx @@ -18,8 +18,8 @@ import { useRewardsDataLoad, useGetCurrentAddress, } from 'features/rewards/hooks'; - import { getCurrencyCookie } from 'features/rewards/components/CurrencySelector'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; export type RewardsHistoryValue = { currencyObject: CurrencyType; @@ -49,6 +49,8 @@ export const RewardsHistoryContext = createContext({} as RewardsHistoryValue); const RewardsHistoryProvider: FC = (props) => { const { children } = props; + const { isWalletConnected, isSupportedChain } = useDappStatus(); + const [currency, setCurrency] = useState(DEFAULT_CURRENCY.id); useEffect(() => { @@ -88,9 +90,16 @@ const RewardsHistoryProvider: FC = (props) => { const currencyObject = getCurrency(currency); + const isDataAvailable = useMemo(() => { + const isDataNotAvailable = + !data || (isWalletConnected && !isSupportedChain); + return !isDataNotAvailable; + }, [data, isWalletConnected, isSupportedChain]); + const value = useMemo( (): RewardsHistoryValue => ({ - data, + // we want user to not confuse which chain rewards are showing + data: isDataAvailable ? data : undefined, error, loading, initialLoading, @@ -115,6 +124,7 @@ const RewardsHistoryProvider: FC = (props) => { address, addressError, currencyObject, + isDataAvailable, data, error, initialLoading,