refactor: remove input form from reward page

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 {

features/rewards/components/NumberFormat.tsx

@@ -48,7 +48,11 @@ type Props = Partial<FormatArgs> & {
 
 const NumberFormat = (props: Props) => {
   if (props.pending)
-    return <InlineLoader style={{ flexBasis: '60%', minWidth: '60px' }} />;
+    return (
+      <InlineLoader
+        style={{ flexBasis: '60%', minWidth: '60px', maxWidth: '120px' }}
+      />
+    );
 
   return props.number ? (
     <Tooltip

features/rewards/components/errorBlocks/ErrorBlockNoSteth.tsx

@@ -25,8 +25,8 @@ export const ErrorBlockNoSteth = ({ hasSteth }: ErrorBlockNoStethProps) => {
       </Box>
       <LocalLink href={HOME_PATH}>
         {!hasSteth && (
-          <Box width="150px">
-            <Button>Stake now</Button>
+          <Box>
+            <Button size={'xs'}>Stake now</Button>
           </Box>
         )}
       </LocalLink>

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);
+  }
 `;

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 <RewardsListsEmpty />;
+  if (!isDappActive || (!data && !initialLoading && !error))
+    return <RewardsListsEmpty />;
   // showing loading when canceling requests and empty response
   if (
     (!data && !error) ||

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 (
     <>
       <Divider indents="lg" />
       <RewardsListEmptyWrapper>
-        Connect your wallet or enter your Ethereum address to see the stats.
+        <p>Connect your wallet to view your staking rewards</p>
+        {isWalletConnected ? null : (
+          <RewardsListEmptyButtonWrapper>
+            <Button
+              size={'xs'}
+              disabled={!isWalletConnectionAllowed}
+              onClick={handleClick}
+              data-testid="connectBtn"
+            >
+              Connect wallet
+            </Button>
+          </RewardsListEmptyButtonWrapper>
+        )}
       </RewardsListEmptyWrapper>
     </>
   );

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;
+`;

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 (
     <LeftOptionsWrapper>
+      <Tooltip
+        placement="bottom"
+        title="Display only rewards in the table. Other events will be hidden."
+      >
+        <Checkbox
+          checked={isIncludeTransfers}
+          onChange={() => setIsIncludeTransfers(!isIncludeTransfers)}
+          data-testid="includeTransfersCheckbox"
+          label="Include transfers"
+        />
+      </Tooltip>
       <Tooltip
         placement="bottom"
         title="Calculate USD values using an exchange rate at the time of the
@@ -29,17 +40,6 @@ export const LeftOptions: FC = () => {
           label="Historical stETH price"
         />
       </Tooltip>
-      <Tooltip
-        placement="bottom"
-        title="Display only transfers in the table. Other events will be hidden."
-      >
-        <Checkbox
-          checked={isOnlyRewards}
-          onChange={() => setIsOnlyRewards(!isOnlyRewards)}
-          data-testid="onlyRewardsCheckbox"
-          label="Only Show Rewards"
-        />
-      </Tooltip>
     </LeftOptionsWrapper>
   );
 };

features/rewards/components/rewardsListHeader/RewardsListHeader.tsx

@@ -1,18 +1,24 @@
 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';
 import { RewardsListHeaderStyle } from './styles';
 import { TitleStyle } from './styles';
 
 export const RewardsListHeader: FC = () => {
+  const { isDappActive } = useDappStatus();
   const { error, data } = useRewardsHistory();
   return (
     <RewardsListHeaderStyle data-testid="rewardsHeader">
       <TitleStyle>Reward history</TitleStyle>
-      <LeftOptions />
-      {!error && data && data?.events.length > 0 && <RightOptions />}
+      {isDappActive && !error && data && data?.events.length > 0 && (
+        <>
+          <LeftOptions />
+          <RightOptions />
+        </>
+      )}
     </RewardsListHeaderStyle>
   );
 };

features/rewards/components/rewardsListHeader/RightOptions.tsx

@@ -11,7 +11,7 @@ export const RightOptions: FC = () => {
     currencyObject,
     setCurrency,
     isUseArchiveExchangeRate,
-    isOnlyRewards,
+    isIncludeTransfers,
   } = useRewardsHistory();
   return (
     <RightOptionsWrapper>
@@ -20,7 +20,7 @@ export const RightOptions: FC = () => {
         currency={currencyObject}
         address={address}
         archiveRate={isUseArchiveExchangeRate}
-        onlyRewards={isOnlyRewards}
+        onlyRewards={!isIncludeTransfers}
       />
     </RightOptionsWrapper>
   );

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;
   }
 `;
 

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)`

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}

features/rewards/components/stats/Stat.tsx

@@ -7,11 +7,11 @@ export const Stat = ({ children, ...rest }: BoxProps) => (
   <Box
     fontStyle="normal"
     fontWeight={[null, null, 600]}
-    fontSize={['14px', '14px', '20px']}
+    fontSize={['12px', '12px', '16px']}
     lineHeight="20px"
     color="text"
     height="20px"
-    mb="6px"
+    mb="2px"
     display={'flex'}
     {...rest}
   >