refactor: remove input form from reward page

features/rewards/components/inputDescription/InputDescriptionStyles.ts

@@ -1,10 +1,18 @@
 import styled from 'styled-components';
 
 export const WrapperStyle = styled.div`
+  flex: 1;
   padding: ${({ theme }) => theme.spaceMap.sm}px;
+  margin-right: ${({ theme }) => theme.spaceMap.xl}px;
+
   border-radius: ${({ theme }) => theme.spaceMap.sm}px;
-  color: #ffac2f;
+
   background-color: rgb(255, 172, 47, 0.1);
+  color: #ffac2f;
   text-align: center;
-  margin-top: 16px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    margin-right: 0;
+    margin-top: ${({ theme }) => theme.spaceMap.xl}px;
+  }
 `;

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

@@ -8,7 +8,7 @@ export const RewardsListsEmpty: FC = () => {
     <>
       <Divider indents="lg" />
       <RewardsListEmptyWrapper>
-        Connect your wallet to see the stats.
+        Connect your wallet to view your staking stats.
       </RewardsListEmptyWrapper>
     </>
   );

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/Stats.tsx

@@ -71,11 +71,7 @@ export const Stats: React.FC = () => {
         </Stat>
         <Title hideMobile>
           <Link href={`${config.rootOrigin}/ethereum#apr`}>
-            <Box
-              data-testid="moreInfo"
-              color="secondary"
-              style={{ textDecoration: 'underline' }}
-            >
+            <Box data-testid="moreInfo" style={{ textDecoration: 'underline' }}>
               More info
             </Box>
           </Link>

features/rewards/components/stats/Title.tsx

@@ -8,7 +8,6 @@ type TitleProps = BoxProps & {
 // TODO: refactoring to style files
 export const Title = ({ children, hideMobile, ...rest }: TitleProps) => (
   <Box
-    color="secondary"
     fontSize="14px"
     fontStyle="normal"
     fontWeight="normal"

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`
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: ${({ theme }) => theme.spaceMap.xxl}px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    align-items: end;
+    flex-direction: column-reverse;
+  }
+`;
+
+export const WalletContentAddressBadgeStyle = styled(AddressBadge)`
+  background: #00000033;
+`;
+
 export const ConnectWalletStyle = styled(WalletCardStyle)`
   padding: 27px 27px 47px 27px;
   text-align: center;

features/rewards/features/top-card/top-card.tsx

@@ -18,6 +18,7 @@ export const TopCard: FC = () => {
       {!isDappActive && <Fallback />}
 
       {isDappActive && <Wallet />}
+
       <StatsWrapper>
         <Stats />
       </StatsWrapper>

features/rewards/features/top-card/wallet.tsx

@@ -2,38 +2,32 @@ import { FC } from 'react';
 import { 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 { useRewardsHistory } from 'features/rewards/hooks';
 
-import { WalletStyle } from './styles';
+import {
+  WalletStyle,
+  WalletContentStyle,
+  WalletContentAddressBadgeStyle,
+} from './styles';
 
 const INPUT_DESC_TEXT =
   'Current balance may differ from last balance in the table due to rounding.';
 
 export const Wallet: FC = () => {
-  const {
-    address,
-    addressError,
-    isAddressResolving,
-    inputValue,
-    setInputValue,
-  } = useRewardsHistory();
+  const { address } = useRewardsHistory();
 
   return (
     <WalletStyle>
-      <InputWrapper data-testid="inputSection" color="accent">
-        <ThemeProvider theme={themeDark}>
-          <AddressInput
-            address={address}
-            addressError={addressError}
-            inputValue={inputValue}
-            handleInputChange={setInputValue}
-            isAddressResolving={isAddressResolving}
-          />
+      <ThemeProvider theme={themeDark}>
+        <WalletContentStyle>
           <InputDescription>{INPUT_DESC_TEXT}</InputDescription>
-        </ThemeProvider>
-      </InputWrapper>
+          <WalletContentAddressBadgeStyle
+            address={address as `0x${string}`}
+            symbolsMobile={6}
+            symbolsDesktop={6}
+          />
+        </WalletContentStyle>
+      </ThemeProvider>
     </WalletStyle>
   );
 };

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<IdenticonBadgeProps, 'address' | 'as'> & { address?: string | null }
+  Omit<IdenticonBadgeProps, 'address' | 'as'> & { 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 (
     <AddressBadgeStyle
-      symbols={isMobile ? 3 : 6}
+      symbols={isMobile ? symbolsMobile : symbolsDesktop}
       address={address ?? ''}
       {...rest}
     />