Merge pull request #438 from lidofinance/feature/si-1557-rewards-hist…

…ory-with-address-input-back

feat: rewards history with address input back

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

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

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

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

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

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

features/rewards/components/errorBlocks/ErrorBlockServer.tsx

@@ -3,6 +3,6 @@ import { ErrorBlockBase } from './ErrorBlockBase';
 export const ErrorBlockServer = () => (
   <ErrorBlockBase
     textProps={{ color: 'error' }}
-    text="Subgraph returned a fatal error. Lido contributors were alerted and are working on a fix. Please repeat the request in a while."
+    text="Failed to fetch data from the Subgraph. Maintainers are notified and working on a fix."
   />
 );

features/rewards/components/rewardsListContent/RewardsListContent.tsx

@@ -7,7 +7,6 @@ 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';
@@ -18,7 +17,6 @@ import {
 } from './RewardsListContentStyles';
 
 export const RewardsListContent: FC = () => {
-  const { isDappActive } = useDappStatus();
   const {
     error,
     initialLoading,
@@ -32,8 +30,7 @@ export const RewardsListContent: FC = () => {
     useSTETHBalance(STRATEGY_LAZY);
   const hasSteth = stethBalance?.gt(Zero);
 
-  if (!isDappActive || (!data && !initialLoading && !error))
-    return <RewardsListsEmpty />;
+  if (!data && !initialLoading && !error) return <RewardsListsEmpty />;
   // showing loading when canceling requests and empty response
   if (
     (!data && !error) ||

features/rewards/components/rewardsListContent/RewardsListErrorMessage.tsx

@@ -25,5 +25,5 @@ export const RewardsListErrorMessage: React.FC<Props> = ({ error }) => {
     return <ErrorUnprocessable />;
   }
 
-  return <ErrorBlockBase text={errorMessage} />;
+  return <ErrorBlockBase textProps={{ color: 'error' }} text={errorMessage} />;
 };

features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx

@@ -29,7 +29,9 @@ export const RewardsListsEmpty: FC = () => {
     <>
       <Divider indents="lg" />
       <RewardsListEmptyWrapper>
-        <p>Connect your wallet to view your staking rewards</p>
+        <p>
+          Connect your wallet or enter your Ethereum address to see the stats.
+        </p>
         {isWalletConnected ? null : (
           <RewardsListEmptyButtonWrapper>
             <Button

features/rewards/components/stats/average-apr-block.tsx

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { Box, Question, Tooltip } from '@lidofinance/lido-ui';
+
+import NumberFormat from 'features/rewards/components/NumberFormat';
+import { useRewardsHistory } from 'features/rewards/hooks';
+
+import { Item } from './components/item';
+import { FlexCenter } from './components/styles';
+
+export const AverageAprBlock: FC = () => {
+  const { data, initialLoading: loading } = useRewardsHistory();
+
+  return (
+    <Item
+      loading={loading}
+      dataTestId="averageAprBlock"
+      title={
+        <>
+          <FlexCenter>
+            Average APR
+            <Tooltip title={'APR on stETH over your staking period'}>
+              <Question />
+            </Tooltip>
+          </FlexCenter>
+        </>
+      }
+      value={
+        <>
+          {parseFloat(data?.averageApr || '0') ? (
+            <>
+              <NumberFormat number={data?.averageApr} percent />
+              <Box display="inline-block" pl="3px">
+                %
+              </Box>
+            </>
+          ) : (
+            '—'
+          )}
+        </>
+      }
+      valueDataTestId="averageApr"
+    />
+  );
+};

features/rewards/components/stats/components/item.tsx

@@ -0,0 +1,40 @@
+import { FC, ReactNode } from 'react';
+
+import { Block, Title, Value, UnderValue, InlineLoader } from './styles';
+
+type ItemProps = {
+  dataTestId: string;
+  title: ReactNode | ReactNode[];
+
+  value: ReactNode | ReactNode[];
+  valueDataTestId: string;
+
+  underValue?: ReactNode | ReactNode[] | undefined;
+  underValueDataTestId?: string | undefined;
+
+  loading: boolean;
+};
+
+export const Item: FC<ItemProps> = (props) => {
+  const {
+    dataTestId,
+    title,
+    value,
+    valueDataTestId,
+    underValue,
+    underValueDataTestId,
+    loading,
+  } = props;
+
+  return (
+    <Block data-testid={dataTestId}>
+      <Title>{title}</Title>
+      <Value data-testid={valueDataTestId}>
+        {!loading ? value : <InlineLoader />}
+      </Value>
+      <UnderValue data-testid={underValueDataTestId}>
+        {!loading ? underValue : <InlineLoader />}
+      </UnderValue>
+    </Block>
+  );
+};