diff --git a/features/rewards/components/CurrencySelector.tsx b/features/rewards/components/CurrencySelector.tsx index 0de84f3ed..16f9cf297 100644 --- a/features/rewards/components/CurrencySelector.tsx +++ b/features/rewards/components/CurrencySelector.tsx @@ -11,6 +11,10 @@ const StyledSelect = styled(Select)` height: 32px; width: 72px; + ${({ theme }) => theme.mediaQueries.lg} { + width: 100%; + } + border-radius: 6px; & > span { diff --git a/features/rewards/components/NumberFormat.tsx b/features/rewards/components/NumberFormat.tsx index c3c8cd6d8..1c69066fd 100644 --- a/features/rewards/components/NumberFormat.tsx +++ b/features/rewards/components/NumberFormat.tsx @@ -48,7 +48,11 @@ type Props = Partial & { const NumberFormat = (props: Props) => { if (props.pending) - return ; + return ( + + ); return props.number ? ( = (props) => { - const { - inputValue, - isAddressResolving, - handleInputChange, - address, - addressError, - } = props; - - return ( - handleInputChange(e.target.value)} - placeholder="Ethereum address" - leftDecorator={ - isAddressResolving ? ( - - ) : address ? ( - - ) : null - } - rightDecorator={address ? : null} - spellCheck="false" - error={ - (inputValue.length > 0 && !isValidAnyAddress(inputValue)) || - addressError - } - /> - ); -}; diff --git a/features/rewards/components/addressInput/index.ts b/features/rewards/components/addressInput/index.ts deleted file mode 100644 index 1845571c0..000000000 --- a/features/rewards/components/addressInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './AddressInput'; diff --git a/features/rewards/components/addressInput/types.ts b/features/rewards/components/addressInput/types.ts deleted file mode 100644 index 063bc0b23..000000000 --- a/features/rewards/components/addressInput/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type AddressInputProps = { - inputValue: string; - isAddressResolving: boolean; - handleInputChange: (value: string) => void; - address: string; - addressError: string; -}; diff --git a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx index 65ee3b46f..f2d09ec0f 100644 --- a/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx +++ b/features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx @@ -25,8 +25,8 @@ export const ErrorBlockNoSteth = ({ hasSteth }: ErrorBlockNoStethProps) => { {!hasSteth && ( - - + + )} diff --git a/features/rewards/components/export/Exportstyled.ts b/features/rewards/components/export/Exportstyled.ts index 42bcaa6be..930675c72 100644 --- a/features/rewards/components/export/Exportstyled.ts +++ b/features/rewards/components/export/Exportstyled.ts @@ -7,4 +7,9 @@ export const ButtonStyle = styled(Button)` min-width: unset; padding: 0 15px; font-size: 12px; + color: var(--lido-color-text); + + &::before { + border-color: var(--lido-color-border); + } `; diff --git a/features/rewards/components/inputDescription/InputDescription.tsx b/features/rewards/components/inputDescription/InputDescription.tsx deleted file mode 100644 index a20fa44dc..000000000 --- a/features/rewards/components/inputDescription/InputDescription.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { FC, PropsWithChildren } from 'react'; - -import { WrapperStyle } from './InputDescriptionStyles'; - -export const InputDescription: FC = ({ children }) => { - return {children}; -}; diff --git a/features/rewards/components/inputDescription/InputDescriptionStyles.ts b/features/rewards/components/inputDescription/InputDescriptionStyles.ts deleted file mode 100644 index b874bbfdd..000000000 --- a/features/rewards/components/inputDescription/InputDescriptionStyles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components'; - -export const WrapperStyle = styled.div` - padding: ${({ theme }) => theme.spaceMap.sm}px; - border-radius: ${({ theme }) => theme.spaceMap.sm}px; - color: #ffac2f; - background-color: rgb(255, 172, 47, 0.1); - text-align: center; - margin-top: 16px; -`; diff --git a/features/rewards/components/inputDescription/index.ts b/features/rewards/components/inputDescription/index.ts deleted file mode 100644 index 264c3cb95..000000000 --- a/features/rewards/components/inputDescription/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './InputDescription'; diff --git a/features/rewards/components/inputWrapper/InputWrapper.tsx b/features/rewards/components/inputWrapper/InputWrapper.tsx deleted file mode 100644 index 4de38fd82..000000000 --- a/features/rewards/components/inputWrapper/InputWrapper.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FC, PropsWithChildren } from 'react'; -import { BlockProps } from '@lidofinance/lido-ui'; - -import { InputWrapperStyle } from './InputWrapperStyles'; - -export const InputWrapper: FC> = ({ - children, - ...rest -}) => { - return {children}; -}; diff --git a/features/rewards/components/inputWrapper/InputWrapperStyles.ts b/features/rewards/components/inputWrapper/InputWrapperStyles.ts deleted file mode 100644 index 268743da1..000000000 --- a/features/rewards/components/inputWrapper/InputWrapperStyles.ts +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components'; -import { Block } from '@lidofinance/lido-ui'; - -export const InputWrapperStyle = styled(Block)` - background: transparent; - padding-bottom: 24px; -`; diff --git a/features/rewards/components/inputWrapper/index.ts b/features/rewards/components/inputWrapper/index.ts deleted file mode 100644 index ff6f77010..000000000 --- a/features/rewards/components/inputWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './InputWrapper'; diff --git a/features/rewards/components/rewardsListContent/RewardsListContent.tsx b/features/rewards/components/rewardsListContent/RewardsListContent.tsx index e74523842..ff5d9de6e 100644 --- a/features/rewards/components/rewardsListContent/RewardsListContent.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListContent.tsx @@ -1,7 +1,13 @@ import { FC } from 'react'; import { Loader, Divider } from '@lidofinance/lido-ui'; +import { useSTETHBalance } from '@lido-sdk/react'; +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'; @@ -10,12 +16,9 @@ import { TableWrapperStyle, ErrorWrapper, } from './RewardsListContentStyles'; -import { RewardsTable } from 'features/rewards/components/rewardsTable'; -import { useSTETHBalance } from '@lido-sdk/react'; -import { STRATEGY_LAZY } from 'consts/swr-strategies'; -import { Zero } from '@ethersproject/constants'; export const RewardsListContent: FC = () => { + const { isDappActive } = useDappStatus(); const { error, initialLoading, @@ -29,7 +32,8 @@ export const RewardsListContent: FC = () => { useSTETHBalance(STRATEGY_LAZY); const hasSteth = stethBalance?.gt(Zero); - if (!data && !initialLoading && !error) return ; + if (!isDappActive || (!data && !initialLoading && !error)) + return ; // showing loading when canceling requests and empty response if ( (!data && !error) || diff --git a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx index 3505cabf0..1e8d5b9e7 100644 --- a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx +++ b/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx @@ -1,15 +1,47 @@ -import { FC } from 'react'; +import { FC, useCallback } from 'react'; +import { useConnect } from 'reef-knot/core-react'; +import { wrapWithEventTrack } from '@lidofinance/analytics-matomo'; +import { Button, Divider } from '@lidofinance/lido-ui'; -import { Divider } from '@lidofinance/lido-ui'; - -import { RewardsListEmptyWrapper } from './RewardsListsEmptyStyles'; +import { useUserConfig } from 'config/user-config'; +import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; +import { + RewardsListEmptyButtonWrapper, + RewardsListEmptyWrapper, +} from './RewardsListsEmptyStyles'; export const RewardsListsEmpty: FC = () => { + const { isWalletConnectionAllowed } = useUserConfig(); + const { isWalletConnected } = useDappStatus(); + + const { connect } = useConnect(); + + const handleClick = wrapWithEventTrack( + MATOMO_CLICK_EVENTS.connectWallet, + useCallback(() => { + if (!isWalletConnectionAllowed) return; + void connect(); + }, [isWalletConnectionAllowed, connect]), + ); + return ( <> - Connect your wallet or enter your Ethereum address to see the stats. +

Connect your wallet to view your staking rewards

+ {isWalletConnected ? null : ( + + + + )}
); diff --git a/features/rewards/components/rewardsListContent/RewardsListsEmptyStyles.ts b/features/rewards/components/rewardsListContent/RewardsListsEmptyStyles.ts index 3dd077d9c..2cbcda20e 100644 --- a/features/rewards/components/rewardsListContent/RewardsListsEmptyStyles.ts +++ b/features/rewards/components/rewardsListContent/RewardsListsEmptyStyles.ts @@ -3,3 +3,7 @@ import styled from 'styled-components'; export const RewardsListEmptyWrapper = styled.div` text-align: center; `; + +export const RewardsListEmptyButtonWrapper = styled.div` + margin-top: ${({ theme }) => theme.spaceMap.md}px; +`; diff --git a/features/rewards/components/rewardsListHeader/LeftOptions.tsx b/features/rewards/components/rewardsListHeader/LeftOptions.tsx index 5383d2c75..fef130268 100644 --- a/features/rewards/components/rewardsListHeader/LeftOptions.tsx +++ b/features/rewards/components/rewardsListHeader/LeftOptions.tsx @@ -1,19 +1,30 @@ import { FC } from 'react'; import { Tooltip, Checkbox } from '@lidofinance/lido-ui'; -import { LeftOptionsWrapper } from './styles'; import { useRewardsHistory } from 'features/rewards/hooks/useRewardsHistory'; +import { LeftOptionsWrapper } from './styles'; export const LeftOptions: FC = () => { const { isUseArchiveExchangeRate, - isOnlyRewards, + isIncludeTransfers, setIsUseArchiveExchangeRate, - setIsOnlyRewards, + setIsIncludeTransfers, } = useRewardsHistory(); return ( + + setIsIncludeTransfers(!isIncludeTransfers)} + data-testid="includeTransfersCheckbox" + label="Include transfers" + /> + - - setIsOnlyRewards(!isOnlyRewards)} - data-testid="onlyRewardsCheckbox" - label="Only Show Rewards" - /> - ); }; diff --git a/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx b/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx index 9781d558e..d156454c4 100644 --- a/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx +++ b/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx @@ -1,5 +1,6 @@ import { FC } from 'react'; import { useRewardsHistory } from 'features/rewards/hooks'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { LeftOptions } from './LeftOptions'; import { RightOptions } from './RightOptions'; @@ -7,12 +8,17 @@ import { RewardsListHeaderStyle } from './styles'; import { TitleStyle } from './styles'; export const RewardsListHeader: FC = () => { + const { isDappActive } = useDappStatus(); const { error, data } = useRewardsHistory(); return ( Reward history - - {!error && data && data?.events.length > 0 && } + {isDappActive && !error && data && data?.events.length > 0 && ( + <> + + + + )} ); }; diff --git a/features/rewards/components/rewardsListHeader/RightOptions.tsx b/features/rewards/components/rewardsListHeader/RightOptions.tsx index 0b5252024..5b5632b6d 100644 --- a/features/rewards/components/rewardsListHeader/RightOptions.tsx +++ b/features/rewards/components/rewardsListHeader/RightOptions.tsx @@ -11,7 +11,7 @@ export const RightOptions: FC = () => { currencyObject, setCurrency, isUseArchiveExchangeRate, - isOnlyRewards, + isIncludeTransfers, } = useRewardsHistory(); return ( @@ -20,7 +20,7 @@ export const RightOptions: FC = () => { currency={currencyObject} address={address} archiveRate={isUseArchiveExchangeRate} - onlyRewards={isOnlyRewards} + onlyRewards={!isIncludeTransfers} /> ); diff --git a/features/rewards/components/rewardsListHeader/styles.ts b/features/rewards/components/rewardsListHeader/styles.ts index 98190d54b..ca4af30c3 100644 --- a/features/rewards/components/rewardsListHeader/styles.ts +++ b/features/rewards/components/rewardsListHeader/styles.ts @@ -4,7 +4,7 @@ export const RewardsListHeaderStyle = styled.div` display: flex; flex-wrap: wrap; align-items: center; - gap: 20px 32px; + gap: 20px 28px; height: 32px; align-items: center; @@ -39,7 +39,7 @@ export const LeftOptionsWrapper = styled.div` } ${({ theme }) => theme.mediaQueries.md} { - flex-direction: column; + flex-direction: row; } `; diff --git a/features/rewards/components/rewardsTable/RewardsTableLoaderStyles.ts b/features/rewards/components/rewardsTable/RewardsTableLoaderStyles.ts index 9d63dacca..931beec00 100644 --- a/features/rewards/components/rewardsTable/RewardsTableLoaderStyles.ts +++ b/features/rewards/components/rewardsTable/RewardsTableLoaderStyles.ts @@ -35,6 +35,7 @@ export const ContentStyle = styled.div` display: flex; height: 100%; justify-content: center; + align-items: center; `; export const LoaderStyle = styled(Loader)` diff --git a/features/rewards/components/stats/Item.tsx b/features/rewards/components/stats/Item.tsx index f47158b84..057337509 100644 --- a/features/rewards/components/stats/Item.tsx +++ b/features/rewards/components/stats/Item.tsx @@ -9,6 +9,7 @@ export const Item = ({ children, ...rest }: BoxProps) => ( width={['100%', '100%', 'initial']} display={['flex', 'flex', 'initial']} justifyContent={['space-between', 'space-between', null]} + marginBottom={['6px']} {...rest} > {children} diff --git a/features/rewards/components/stats/Stat.tsx b/features/rewards/components/stats/Stat.tsx index f7785f6d9..f290a1376 100644 --- a/features/rewards/components/stats/Stat.tsx +++ b/features/rewards/components/stats/Stat.tsx @@ -7,11 +7,11 @@ export const Stat = ({ children, ...rest }: BoxProps) => ( diff --git a/features/rewards/components/stats/Stats.tsx b/features/rewards/components/stats/Stats.tsx index b8e11f708..ca0a18a01 100644 --- a/features/rewards/components/stats/Stats.tsx +++ b/features/rewards/components/stats/Stats.tsx @@ -2,10 +2,9 @@ import { Box, Link } from '@lidofinance/lido-ui'; import { config } from 'config'; import { useRewardsHistory } from 'features/rewards/hooks'; -import EthSymbol from 'features/rewards/components/EthSymbol'; import NumberFormat from 'features/rewards/components/NumberFormat'; import { useStethEthRate } from 'features/rewards/hooks/use-steth-eth-rate'; -import { useRewardsBalanceData } from 'features/rewards/hooks/use-rewards-balance-data'; +import { useDappStatus } from 'shared/hooks/use-dapp-status'; import { Item } from './Item'; import { Stat } from './Stat'; @@ -19,42 +18,27 @@ export const Stats: React.FC = () => { initialLoading: pending, } = useRewardsHistory(); const stEthEth = useStethEthRate(); - const { data: balanceData } = useRewardsBalanceData(); + const { isDappActive } = useDappStatus(); return ( <> - - stETH balance - - + + stETH rewarded + - - - <Box display="inline-block" pr="3px"> - {currency.symbol} + <Box display="inline-block" pl={'3px'}> + stETH </Box> - <NumberFormat - number={balanceData?.stEthCurrencyBalance} - currency - pending={pending} - /> - - - - stETH rewarded - - - - <Box display="inline-block" pr="3px"> + <Box display="inline-block" pr={'3px'}> {currency.symbol} </Box> <NumberFormat - number={data?.totals.currencyRewards} + number={isDappActive ? data?.totals.currencyRewards : undefined} currency pending={pending} /> @@ -62,44 +46,49 @@ export const Stats: React.FC = () => { </Item> <Item data-testid="averageAprBlock"> <Title mb="8px">Average APR - + {parseFloat(data?.averageApr || '0') ? ( - + ) : ( '-' )} + + % + <Link href={`${config.rootOrigin}/ethereum#apr`}> - <Box - data-testid="moreInfo" - color="secondary" - style={{ textDecoration: 'underline' }} - > - More info - </Box> + <Box data-testid="moreInfo">More info</Box> </Link> stETH price - + {currency.symbol} - <EthSymbol /> <NumberFormat - number={stEthEth?.toString()} + number={isDappActive ? stEthEth?.toString() : undefined} StEthEth pending={pending} /> + <Box display="inline-block" pl={'3px'}> + ETH + </Box> diff --git a/features/rewards/components/stats/Title.tsx b/features/rewards/components/stats/Title.tsx index 14dd8176f..8e1269c24 100644 --- a/features/rewards/components/stats/Title.tsx +++ b/features/rewards/components/stats/Title.tsx @@ -8,8 +8,7 @@ type TitleProps = BoxProps & { // TODO: refactoring to style files export const Title = ({ children, hideMobile, ...rest }: TitleProps) => ( { return ( -

Connect your wallet to view staking stats

+

Connect your wallet to view your staking rewards

); }; diff --git a/features/rewards/features/top-card/styles.tsx b/features/rewards/features/top-card/styles.tsx index 3e0c460ea..7ba12c78e 100644 --- a/features/rewards/features/top-card/styles.tsx +++ b/features/rewards/features/top-card/styles.tsx @@ -1,5 +1,6 @@ import styled, { css } from 'styled-components'; import { WalletCardStyle } from 'shared/wallet/card/styles'; +import { AddressBadge } from 'shared/wallet/components/address-badge/address-badge'; export const WalletStyle = styled(WalletCardStyle)` background: linear-gradient( @@ -11,6 +12,25 @@ export const WalletStyle = styled(WalletCardStyle)` padding: 0 0 24px 0; `; +export const WalletContentStyle = styled.div` + padding: ${({ theme }) => theme.spaceMap.xxl}px; +`; + +export const WalletContentRowStyle = styled.div` + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; + justify-content: space-between; + + color: var(--lido-color-text); +`; + +export const WalletContentAddressBadgeStyle = styled(AddressBadge)` + background: #00000033; + cursor: pointer; +`; + export const ConnectWalletStyle = styled(WalletCardStyle)` padding: 27px 27px 47px 27px; text-align: center; diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx index 16bd62508..267522a8f 100644 --- a/features/rewards/features/top-card/top-card.tsx +++ b/features/rewards/features/top-card/top-card.tsx @@ -1,14 +1,30 @@ -import { FC } from 'react'; +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'; +import { ConnectWallet } from './connect-wallet'; export const TopCard: FC = () => { - return ( + const [visible, setVisible] = useState(false); + const { isWalletConnected, isDappActive } = useDappStatus(); + + // fix flash after reload page + useEffect(() => { + setVisible(true); + }, []); + + return !visible ? null : ( <> - + {!isWalletConnected && } + + {!isDappActive && } + + {isDappActive && } + diff --git a/features/rewards/features/top-card/wallet.tsx b/features/rewards/features/top-card/wallet.tsx index b845facf3..061a6ac3b 100644 --- a/features/rewards/features/top-card/wallet.tsx +++ b/features/rewards/features/top-card/wallet.tsx @@ -1,39 +1,72 @@ import { FC } from 'react'; -import { ThemeProvider, themeDark } from '@lidofinance/lido-ui'; +import { Box, ThemeProvider, themeDark } from '@lidofinance/lido-ui'; -import { InputDescription } from 'features/rewards/components/inputDescription'; -import { AddressInput } from 'features/rewards/components/addressInput'; -import { InputWrapper } from 'features/rewards/components/inputWrapper'; +import NumberFormat from 'features/rewards/components/NumberFormat'; +import { Title } from 'features/rewards/components/stats/Title'; import { useRewardsHistory } from 'features/rewards/hooks'; +import { useRewardsBalanceData } from 'features/rewards/hooks/use-rewards-balance-data'; +import { FlexCenter } from 'features/stake/stake-form/wallet/styles'; +import { CardBalance } from 'shared/wallet'; +import { useWalletModal } from 'shared/wallet/wallet-modal/use-wallet-modal'; -import { WalletStyle } from './styles'; - -const INPUT_DESC_TEXT = - 'Current balance may differ from last balance in the table due to rounding.'; +import { + WalletStyle, + WalletContentStyle, + WalletContentAddressBadgeStyle, + WalletContentRowStyle, +} from './styles'; export const Wallet: FC = () => { - const { - address, - addressError, - isAddressResolving, - inputValue, - setInputValue, - } = useRewardsHistory(); + const { data: balanceData } = useRewardsBalanceData(); + const { currencyObject: currency, address, loading } = useRewardsHistory(); + const { openModal } = useWalletModal(); return ( - - - - {INPUT_DESC_TEXT} - - + + + + + stETH balance + + } + loading={loading} + value={ +
+ + + stETH + +
+ } + > + + <Box display="inline-block" pr={'3px'}> + {currency.symbol} + </Box> + <NumberFormat + number={balanceData?.stEthCurrencyBalance} + currency + pending={loading} + /> + +
+ + openModal({})} + /> +
+
+
); }; diff --git a/features/rewards/hooks/useGetCurrentAddress.ts b/features/rewards/hooks/useGetCurrentAddress.ts index 9f46299be..3a0e672c1 100644 --- a/features/rewards/hooks/useGetCurrentAddress.ts +++ b/features/rewards/hooks/useGetCurrentAddress.ts @@ -6,6 +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'; type UseGetCurrentAddress = () => { address: string; @@ -86,7 +87,11 @@ export const useGetCurrentAddress: UseGetCurrentAddress = () => { return; } // From a connected wallet - if (account) setInputValue(account); + if (account) { + setInputValue( + overrideWithQAMockString(account, 'mock-qa-rewards-address'), + ); + } } }, [account, query.address, isReady, setInputValue]); diff --git a/features/rewards/hooks/useRewardsDataLoad.ts b/features/rewards/hooks/useRewardsDataLoad.ts index 064219e8a..5696098cf 100644 --- a/features/rewards/hooks/useRewardsDataLoad.ts +++ b/features/rewards/hooks/useRewardsDataLoad.ts @@ -7,7 +7,7 @@ import { useLaggyDataWrapper } from './use-laggy-data-wrapper'; type UseRewardsDataLoad = (props: { address: string; currency: string; - isOnlyRewards: boolean; + isIncludeTransfers: boolean; isUseArchiveExchangeRate: boolean; skip: number; limit: number; @@ -23,7 +23,7 @@ export const useRewardsDataLoad: UseRewardsDataLoad = (props) => { const { address, currency, - isOnlyRewards, + isIncludeTransfers, isUseArchiveExchangeRate, skip, limit, @@ -32,7 +32,7 @@ export const useRewardsDataLoad: UseRewardsDataLoad = (props) => { const requestOptions = { address, currency, - onlyRewards: isOnlyRewards, + onlyRewards: !isIncludeTransfers, archiveRate: isUseArchiveExchangeRate, skip, limit, diff --git a/features/rewards/utils/numberFormatting.ts b/features/rewards/utils/numberFormatting.ts index 496d5e3bb..578c25937 100644 --- a/features/rewards/utils/numberFormatting.ts +++ b/features/rewards/utils/numberFormatting.ts @@ -47,8 +47,8 @@ export const simpleFormatCurrency = ( const decimals = decimalOverride ? HUMAN_DECIMALS_CURRENCY + decimalOverride : manyDigits - ? PRECISE_DECIMALS_CURRENCY - : HUMAN_DECIMALS_CURRENCY; + ? PRECISE_DECIMALS_CURRENCY + : HUMAN_DECIMALS_CURRENCY; const options = { currency: 'USD', // TODO: make dynamic if beneficial @@ -85,5 +85,5 @@ export const formatPercentage = (input: BigNumber, manyDigits: boolean) => { ? PRECISE_DECIMALS_PERCENT : HUMAN_DECIMALS_PERCENT; - return input.decimalPlaces(decimals).toString() + '%'; + return input.decimalPlaces(decimals).toString(); }; diff --git a/pages/rewards.tsx b/pages/rewards.tsx index 06063e494..609d89a62 100644 --- a/pages/rewards.tsx +++ b/pages/rewards.tsx @@ -6,12 +6,8 @@ import { TopCard, RewardsList } from 'features/rewards/features'; import RewardsHistoryProvider from 'providers/rewardsHistory'; import { Layout } from 'shared/components'; -import { Fallback } from 'shared/wallet'; -import { useDappStatus } from 'shared/hooks/use-dapp-status'; const Rewards: FC = () => { - const { isWalletConnected, isDappActive } = useDappStatus(); - return ( { /> - {isWalletConnected && !isDappActive && } diff --git a/providers/rewardsHistory.tsx b/providers/rewardsHistory.tsx index 05dbb6ced..fe25eea3f 100644 --- a/providers/rewardsHistory.tsx +++ b/providers/rewardsHistory.tsx @@ -34,11 +34,11 @@ export type RewardsHistoryValue = { address: string; addressError: string; inputValue: string; - isOnlyRewards: boolean; + isIncludeTransfers: boolean; isUseArchiveExchangeRate: boolean; isLagging: boolean; setInputValue: (value: string) => void; - setIsOnlyRewards: (value: boolean) => void; + setIsIncludeTransfers: (value: boolean) => void; setIsUseArchiveExchangeRate: (value: boolean) => void; setPage: (page: number) => void; setCurrency: (value: string) => void; @@ -56,7 +56,7 @@ const RewardsHistoryProvider: FC = (props) => { if (currencyValue) setCurrency(currencyValue); }, []); - const [isOnlyRewards, setIsOnlyRewards] = useState(false); + const [isIncludeTransfers, setIsIncludeTransfers] = useState(false); const [isUseArchiveExchangeRate, setIsUseArchiveExchangeRate] = useState(true); const [page, setPage] = useState(0); @@ -75,7 +75,7 @@ const RewardsHistoryProvider: FC = (props) => { const { data, error, loading, initialLoading, isLagging } = useRewardsDataLoad({ address, - isOnlyRewards, + isIncludeTransfers, isUseArchiveExchangeRate, currency, skip, @@ -84,7 +84,7 @@ const RewardsHistoryProvider: FC = (props) => { useEffect(() => { setPage(0); - }, [isUseArchiveExchangeRate, isOnlyRewards]); + }, [isUseArchiveExchangeRate, isIncludeTransfers]); const currencyObject = getCurrency(currency); @@ -99,8 +99,8 @@ const RewardsHistoryProvider: FC = (props) => { limit, page, setPage, - isOnlyRewards, - setIsOnlyRewards, + isIncludeTransfers, + setIsIncludeTransfers, setIsUseArchiveExchangeRate, isUseArchiveExchangeRate, setCurrency, @@ -121,7 +121,7 @@ const RewardsHistoryProvider: FC = (props) => { inputValue, isAddressResolving, isLagging, - isOnlyRewards, + isIncludeTransfers, isUseArchiveExchangeRate, limit, loading, diff --git a/shared/components/layout/main/styles.tsx b/shared/components/layout/main/styles.tsx index 75189f9fa..fad7cad81 100644 --- a/shared/components/layout/main/styles.tsx +++ b/shared/components/layout/main/styles.tsx @@ -3,6 +3,6 @@ import styled from 'styled-components'; export const MainStyle = styled(Container)` position: relative; - margin-top: ${({ theme }) => theme.spaceMap.sm}px; - margin-bottom: ${({ theme }) => theme.spaceMap.sm}px; + padding-top: ${({ theme }) => theme.spaceMap.sm}px; + padding-bottom: ${({ theme }) => theme.spaceMap.sm}px; `; diff --git a/shared/wallet/card/card.tsx b/shared/wallet/card/card.tsx index cc8c4cd3e..68a3b3566 100644 --- a/shared/wallet/card/card.tsx +++ b/shared/wallet/card/card.tsx @@ -1,4 +1,3 @@ -import { InlineLoader } from '@lidofinance/lido-ui'; import { Component } from 'types'; import { useWalletModal } from '../wallet-modal/use-wallet-modal'; import { AddressBadge } from '../components/address-badge/address-badge'; @@ -11,6 +10,7 @@ import { WalletCardExtraStyle, WalletCardAccountStyle, WalletCardContentStyle, + InlineLoaderStyled, } from './styles'; import { WalletCardBalanceComponent, @@ -44,11 +44,11 @@ export const CardBalance: WalletCardBalanceComponent = (props) => { {title} - {loading ? : value} + {loading ? : value} {hasExtra && ( - {loading ? : extra} + {loading ? : extra} )} {hasChildren && ( diff --git a/shared/wallet/card/styles.tsx b/shared/wallet/card/styles.tsx index aa6940c92..81bf97020 100644 --- a/shared/wallet/card/styles.tsx +++ b/shared/wallet/card/styles.tsx @@ -1,5 +1,9 @@ import styled from 'styled-components'; -import { Block } from '@lidofinance/lido-ui'; +import { Block, InlineLoader } from '@lidofinance/lido-ui'; + +export const InlineLoaderStyled = styled(InlineLoader)` + max-width: 120px; +`; export const WalletCardStyle = styled((props) => )` margin-bottom: ${({ theme }) => -theme.borderRadiusesMap.xl}px; diff --git a/shared/wallet/components/address-badge/address-badge.tsx b/shared/wallet/components/address-badge/address-badge.tsx index 918ca5379..90f97e66b 100644 --- a/shared/wallet/components/address-badge/address-badge.tsx +++ b/shared/wallet/components/address-badge/address-badge.tsx @@ -1,19 +1,22 @@ import { useBreakpoint, IdenticonBadgeProps } from '@lidofinance/lido-ui'; -import { AddressBadgeStyle } from './styles'; import { Component } from 'types'; +import { AddressBadgeStyle } from './styles'; export type AddressBadgeComponent = Component< 'div', - Omit & { address?: string | null } + Omit & { address?: string | null } & { + symbolsMobile?: number; + symbolsDesktop?: number; + } >; export const AddressBadge: AddressBadgeComponent = (props) => { - const { address, ...rest } = props; + const { address, symbolsMobile = 3, symbolsDesktop = 6, ...rest } = props; const isMobile = useBreakpoint('md'); return ( diff --git a/utils/qa.ts b/utils/qa.ts index e5e56bda3..f7b46c421 100644 --- a/utils/qa.ts +++ b/utils/qa.ts @@ -20,6 +20,16 @@ export const overrideWithQAMockNumber = (value: number, key: string) => { return value; }; +export const overrideWithQAMockString = (value: string, key: string) => { + if (config.enableQaHelpers && typeof window !== 'undefined') { + const mock = localStorage.getItem(key); + if (mock) { + return mock; + } + } + return value; +}; + export const overrideWithQAMockArray = ( value: TArrayElement[], key: string,