revert: rewards input address

features/rewards/components/address-input/address-input.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { Input, Loader, Identicon } from '@lidofinance/lido-ui';
+import CopyAddressUrl from 'features/rewards/components/CopyAddressUrl';
+import { isValidAnyAddress } from 'features/rewards/utils';
+
+import { AddressInputProps } from './types';
+
+export const AddressInput: FC<AddressInputProps> = (props) => {
+  const {
+    inputValue,
+    isAddressResolving,
+    handleInputChange,
+    address,
+    addressError,
+  } = props;
+
+  return (
+    <Input
+      fullwidth
+      value={inputValue}
+      onChange={(e) => handleInputChange(e.target.value)}
+      placeholder="Ethereum address"
+      leftDecorator={
+        isAddressResolving ? (
+          <Loader size="small" />
+        ) : address ? (
+          <Identicon data-testid="addressIcon" address={address} />
+        ) : null
+      }
+      rightDecorator={address ? <CopyAddressUrl address={inputValue} /> : null}
+      spellCheck="false"
+      error={
+        (inputValue.length > 0 && !isValidAnyAddress(inputValue)) ||
+        addressError
+      }
+    />
+  );
+};

features/rewards/components/address-input/index.ts

@@ -0,0 +1 @@
+export * from './address-input';

features/rewards/components/address-input/types.ts

@@ -0,0 +1,7 @@
+export type AddressInputProps = {
+  inputValue: string;
+  isAddressResolving: boolean;
+  handleInputChange: (value: string) => void;
+  address: string;
+  addressError: string;
+};

features/rewards/components/stats/steth-rewarded-block.tsx

@@ -20,7 +20,7 @@ export const StEthRewardedBlock: FC = () => {
       title="stETH rewarded"
       value={
         <>
-          <NumberFormat number={data?.totals.ethRewards} StEthEth />
+          <NumberFormat number={data?.totals.ethRewards} />
           <Box display="inline-block" pl={'3px'}>
             stETH
           </Box>

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

@@ -1,48 +1,11 @@
-import styled, { css } from 'styled-components';
+import styled 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(
-    52.01deg,
-    #37394a 0%,
-    #363749 0.01%,
-    #40504f 100%
-  );
+  background: linear-gradient(61.64deg, #413e58 17.53%, #30363f 100%);
   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;
-
-  ${({ theme }) =>
-    theme.name === 'dark'
-      ? css`
-          color: var(--lido-color-text);
-          background: linear-gradient(48.34deg, #46464f -5.55%, #3b3b47 100%);
-        `
-      : css`
-          color: var(--lido-color-secondary);
-          background: linear-gradient(48.34deg, #d2ddff -5.55%, #e6e6e6 100%);
-        `}
-`;

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

@@ -3,14 +3,12 @@ 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 = () => {
   const [visible, setVisible] = useState(false);
-  const { isWalletConnected, isDappActive } = useDappStatus();
+  const { isDappActive } = useDappStatus();
 
   // fix flash after reload page
   useEffect(() => {
@@ -19,10 +17,6 @@ export const TopCard: FC = () => {
 
   return !visible ? null : (
     <>
-      {!isWalletConnected && <ConnectWallet />}
-
-      {!isDappActive && <Fallback />}
-
       {isDappActive && <Wallet />}
 
       <StatsWrapper>

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

@@ -1,18 +1,32 @@
 import { FC } from 'react';
 import { ThemeProvider, themeDark } from '@lidofinance/lido-ui';
 
-import {
-  WalletStyle,
-  WalletContentStyle,
-  // WalletContentAddressBadgeStyle,
-  // WalletContentRowStyle,
-} from './styles';
+import { useRewardsHistory } from 'features/rewards/hooks';
+import { AddressInput } from 'features/rewards/components/address-input';
+
+import { WalletContentStyle, WalletStyle } from './styles';
 
 export const Wallet: FC = () => {
+  const {
+    address,
+    addressError,
+    isAddressResolving,
+    inputValue,
+    setInputValue,
+  } = useRewardsHistory();
+
   return (
     <WalletStyle>
       <ThemeProvider theme={themeDark}>
-        <WalletContentStyle>123</WalletContentStyle>
+        <WalletContentStyle>
+          <AddressInput
+            address={address}
+            addressError={addressError}
+            inputValue={inputValue}
+            handleInputChange={setInputValue}
+            isAddressResolving={isAddressResolving}
+          />
+        </WalletContentStyle>
       </ThemeProvider>
     </WalletStyle>
   );