Merge develop to goerli

features/home/one-inch-info/one-inch-info.tsx

@@ -24,7 +24,7 @@ const ONE_INCH_RATE_LIMIT = 1.004;
 export const OneInchInfo: FC = () => {
   const linkProps = use1inchLinkProps();
 
-  const apiOneInchRatePath = 'api/oneinch-rate?token=eth';
+  const apiOneInchRatePath = 'api/oneinch-rate/?token=eth';
   const { data, initialLoading } = useLidoSWR<{ rate: number }>(
     dynamics.ipfsMode
       ? `${dynamics.widgetApiBasePathForIpfs}/${apiOneInchRatePath}`

features/ipfs/csp-violation-box/csp-violation-box.tsx

@@ -0,0 +1,31 @@
+import { Wrap, InfoLink, Text } from './styles';
+
+const GATEWAY_CHECKER_URL = 'https://ipfs.github.io/public-gateway-checker/';
+const DESKTOP_APP_URL = 'https://github.com/ipfs/ipfs-desktop#ipfs-desktop';
+
+export const CSPViolationBox = () => {
+  return (
+    <Wrap>
+      <Text weight={700} size="xs">
+        Insufficient Gateway CSP
+      </Text>
+      <Text weight={400} size="xxs">
+        RPC requests are blocked by Content Security Policy set by IPFS Gateway
+        service you are using.
+      </Text>
+      <Text weight={700} size="xxs">
+        Possible actions:
+      </Text>
+      <Text weight={400} size="xxs">
+        Use another gateway service:
+        <br />
+        <InfoLink href={GATEWAY_CHECKER_URL}>Public Gateway Checker</InfoLink>
+      </Text>
+      <Text weight={400} size="xxs">
+        Or install your IPFS Gateway:
+        <br />
+        <InfoLink href={DESKTOP_APP_URL}>IPFS Desktop</InfoLink>
+      </Text>
+    </Wrap>
+  );
+};

features/ipfs/csp-violation-box/index.tsx

@@ -0,0 +1 @@
+export * from './csp-violation-box';

features/ipfs/csp-violation-box/styles.tsx

@@ -0,0 +1,35 @@
+import { ComponentProps, FC } from 'react';
+import styled from 'styled-components';
+import { Text as TextOriginal, themeDefault } from '@lidofinance/lido-ui';
+import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
+
+type TextProps = Omit<ComponentProps<typeof TextOriginal>, 'color'> & {
+  color?: keyof typeof themeDefault.colors;
+};
+export const Text: FC<TextProps> = styled(TextOriginal)<TextProps>`
+  color: ${({ color }) => `var(--lido-color-${color})`};
+`;
+
+export const Wrap = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;
+  padding: ${({ theme }) => theme.spaceMap.md}px
+    ${({ theme }) => theme.spaceMap.md}px;
+
+  color: var(--lido-color-accentContrast);
+  background-color: var(--lido-color-error);
+`;
+
+export const InfoLink = styled(LinkArrow)`
+  font-weight: 700;
+
+  &,
+  &:visited,
+  &:hover {
+    color: var(--lido-color-accentContrast);
+  }
+`;

features/ipfs/csp-violation-box/use-csp-violation.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export const useCSPViolation = () => {
+  const [isCSPViolated, setCSPViolated] = useState(false);
+
+  useEffect(() => {
+    const handler = () => {
+      setCSPViolated(true);
+    };
+    document.addEventListener('securitypolicyviolation', handler);
+
+    return () => {
+      document.removeEventListener('securitypolicyviolation', handler);
+    };
+  }, []);
+
+  return {
+    isCSPViolated,
+  };
+};

features/ipfs/ipfs-info-box/ipfs-info-box.tsx

@@ -1,102 +1,15 @@
-import { useCallback } from 'react';
-import { useLidoSWR, useLocalStorage, useSDK } from '@lido-sdk/react';
+import { useIPFSInfoBoxStatuses } from 'providers/ipfs-info-box-statuses';
 
-import { useRpcUrl } from 'config/rpc';
-import { SETTINGS_PATH } from 'config/urls';
-import { usePrefixedPush } from 'shared/hooks/use-prefixed-history';
-import { useRouterPath } from 'shared/hooks/use-router-path';
-import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
-
-import { Check, Close } from '@lidofinance/lido-ui';
-import { Wrap, RpcStatusBox, Button, Text } from './styles';
-
-import { checkRpcUrl } from 'utils/check-rpc-url';
-import { STORAGE_IPFS_INFO_DISMISS } from 'config/storage';
-
-const IPFS_INFO_URL = 'https://docs.ipfs.tech/concepts/what-is-ipfs/';
+import { CSPViolationBox } from '../csp-violation-box';
+import { RPCAvailabilityCheckResultBox } from '../rpc-availability-check-result-box';
 
 export const IPFSInfoBox = () => {
-  const { chainId } = useSDK();
-  const push = usePrefixedPush();
-  const [isDismissed, setDismissStorage] = useLocalStorage(
-    STORAGE_IPFS_INFO_DISMISS,
-    false,
-  );
-
-  const rpcUrl = useRpcUrl();
-  const { data: rpcCheckResult, initialLoading: isLoading } = useLidoSWR(
-    `rpc-url-check-${rpcUrl}-${chainId}`,
-    async () => {
-      return await checkRpcUrl(rpcUrl, chainId);
-    },
-  );
-
-  const handleClickDismiss = useCallback(() => {
-    setDismissStorage(true);
-  }, [setDismissStorage]);
-
-  const handleClickSettings = useCallback(() => {
-    void push(SETTINGS_PATH);
-    setDismissStorage(true);
-  }, [push, setDismissStorage]);
+  const { isCSPViolated, isShownTheRPCNotAvailableBox } =
+    useIPFSInfoBoxStatuses();
 
-  const pathname = useRouterPath();
-  const isSettingsPage = pathname === SETTINGS_PATH;
+  if (isCSPViolated) return <CSPViolationBox />;
 
-  if ((isDismissed && rpcCheckResult === true) || isLoading || isSettingsPage) {
-    return null;
-  }
+  if (isShownTheRPCNotAvailableBox) return <RPCAvailabilityCheckResultBox />;
 
-  return (
-    <Wrap>
-      <Text weight={700} size="xs" color="accentContrast">
-        You are currently using the IPFS widget&apos;s version.
-      </Text>
-      <LinkArrow href={IPFS_INFO_URL}>IPFS</LinkArrow>
-      {rpcCheckResult === true && (
-        <>
-          <RpcStatusBox status="success">
-            <Text
-              weight={700}
-              size="xxs"
-              color="success"
-              style={{ paddingRight: 10 }}
-            >
-              The pre-installed RPC node URL is now functioning correctly.
-            </Text>
-            <Check width={24} height={24} />
-          </RpcStatusBox>
-          <Text weight={400} size="xxs" color="accentContrast">
-            However, you can visit the settings if you wish to customize your
-            own RPC node URL.
-          </Text>
-          <Button size="xs" onClick={handleClickDismiss}>
-            Dismiss
-          </Button>
-        </>
-      )}
-      {rpcCheckResult !== true && (
-        <>
-          <RpcStatusBox status="error">
-            <Text
-              weight={700}
-              size="xxs"
-              color="error"
-              style={{ paddingRight: 10 }}
-            >
-              The pre-installed RPC node URL is not now functioning.
-            </Text>
-            <Close width={20} height={20} />
-          </RpcStatusBox>
-          <Text weight={400} size="xxs" color="accentContrast">
-            You should visit the settings page and specify your own RPC node
-            URL.
-          </Text>
-          <Button size="xs" onClick={handleClickSettings}>
-            Open settings page
-          </Button>
-        </>
-      )}
-    </Wrap>
-  );
+  return null;
 };

features/ipfs/rpc-availability-check-result-box/index.tsx

@@ -0,0 +1 @@
+export * from './rpc-availability-check-result-box';

features/ipfs/rpc-availability-check-result-box/rpc-availability-check-result-box.tsx

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { Check, Close } from '@lidofinance/lido-ui';
+
+import { SETTINGS_PATH } from 'config/urls';
+import { useIPFSInfoBoxStatuses } from 'providers/ipfs-info-box-statuses';
+import { usePrefixedPush } from 'shared/hooks/use-prefixed-history';
+import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
+
+import { Wrap, RpcStatusBox, Button, Text } from './styles';
+
+const IPFS_INFO_URL = 'https://docs.ipfs.tech/concepts/what-is-ipfs/';
+
+export const RPCAvailabilityCheckResultBox = () => {
+  const { isRPCAvailable, handleClickDismiss } = useIPFSInfoBoxStatuses();
+
+  const push = usePrefixedPush();
+
+  const handleClickSettings = useCallback(() => {
+    void push(SETTINGS_PATH);
+    handleClickDismiss();
+  }, [push, handleClickDismiss]);
+
+  return (
+    <Wrap>
+      <Text weight={700} size="xs" color="accentContrast">
+        You are currently using the IPFS widget&apos;s version.
+      </Text>
+      <LinkArrow href={IPFS_INFO_URL}>IPFS</LinkArrow>
+      {isRPCAvailable && (
+        <>
+          <RpcStatusBox status="success">
+            <Text
+              weight={700}
+              size="xxs"
+              color="success"
+              style={{ paddingRight: 10 }}
+            >
+              The pre-installed RPC node URL is now functioning correctly.
+            </Text>
+            <Check width={24} height={24} />
+          </RpcStatusBox>
+          <Text weight={400} size="xxs" color="accentContrast">
+            However, you can visit the settings if you wish to customize your
+            own RPC node URL.
+          </Text>
+          <Button size="xs" onClick={handleClickDismiss}>
+            Dismiss
+          </Button>
+        </>
+      )}
+      {!isRPCAvailable && (
+        <>
+          <RpcStatusBox status="error">
+            <Text
+              weight={700}
+              size="xxs"
+              color="error"
+              style={{ paddingRight: 10 }}
+            >
+              The pre-installed RPC node URL is not now functioning.
+            </Text>
+            <Close width={20} height={20} />
+          </RpcStatusBox>
+          <Text weight={400} size="xxs" color="accentContrast">
+            You should visit the settings page and specify your own RPC node
+            URL.
+          </Text>
+          <Button size="xs" onClick={handleClickSettings}>
+            Open settings page
+          </Button>
+        </>
+      )}
+    </Wrap>
+  );
+};

features/rewards/components/rewardsListContent/RewardsListContent.tsx

@@ -5,7 +5,11 @@ import { ErrorBlockNoSteth } from 'features/rewards/components/errorBlocks/Error
 
 import { RewardsListsEmpty } from './RewardsListsEmpty';
 import { RewardsListErrorMessage } from './RewardsListErrorMessage';
-import { LoaderWrapper, TableWrapperStyle } from './RewardsListContentStyles';
+import {
+  LoaderWrapper,
+  TableWrapperStyle,
+  ErrorWrapper,
+} from './RewardsListContentStyles';
 import { RewardsTable } from 'features/rewards/components/rewardsTable';
 
 export const RewardsListContent: FC = () => {
@@ -31,7 +35,13 @@ export const RewardsListContent: FC = () => {
       </>
     );
   }
-  if (error) return <RewardsListErrorMessage error={error} />;
+  if (error) {
+    return (
+      <ErrorWrapper>
+        <RewardsListErrorMessage error={error} />
+      </ErrorWrapper>
+    );
+  }
   if (data && data.events.length === 0) return <ErrorBlockNoSteth />;
 
   return (

features/rewards/components/rewardsListContent/RewardsListContentStyles.ts

@@ -8,3 +8,7 @@ export const LoaderWrapper = styled.div`
 export const TableWrapperStyle = styled.div`
   margin-top: 20px;
 `;
+
+export const ErrorWrapper = styled.div`
+  word-wrap: break-word;
+`;

features/rewards/components/rewardsListHeader/styles.ts

@@ -10,7 +10,7 @@ export const RewardsListHeaderStyle = styled.div`
 
   color: ${({ theme }) => theme.colors.secondary};
 
-  ${({ theme }) => theme.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.lg} {
     flex-direction: column;
     height: auto;
     align-items: initial;
@@ -28,6 +28,7 @@ export const LeftOptionsWrapper = styled.div`
   flex-wrap: wrap;
   margin-right: auto;
   gap: 16px;
+
   ${({ theme }) => theme.mediaQueries.lg} {
     order: 3;
     margin-right: 0;
@@ -36,6 +37,10 @@ export const LeftOptionsWrapper = styled.div`
       flex: 1 0;
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    flex-direction: column;
+  }
 `;
 
 export const RightOptionsWrapper = styled.div`

features/rewards/fetchers/requesters/json/backend.ts

@@ -1,3 +1,5 @@
+import { dynamics } from 'config';
+
 export type BackendQuery = {
   address: string;
   currency?: string;
@@ -12,7 +14,11 @@ export const backendRequest = async (query: BackendQuery) => {
 
   Object.entries(query).forEach(([k, v]) => params.append(k, v.toString()));
 
-  const requested = await fetch(`/api/rewards?${params.toString()}`);
+  const apiRewardsPath = `/api/rewards/?${params.toString()}`;
+  const apiRewardsUrl = dynamics.ipfsMode
+    ? `${dynamics.widgetApiBasePathForIpfs}${apiRewardsPath}`
+    : apiRewardsPath;
+  const requested = await fetch(apiRewardsUrl);
 
   if (!requested.ok) {
     const responded = await requested.json();

features/rewards/hooks/useRewardsDataLoad.ts

@@ -1,5 +1,6 @@
-import { Backend } from 'features/rewards/types';
 import { useEffect, useRef } from 'react';
+import { Backend } from 'features/rewards/types';
+import { dynamics } from 'config';
 import { useLidoSWR } from 'shared/hooks';
 import { swrAbortableMiddleware } from 'utils';
 
@@ -43,8 +44,14 @@ export const useRewardsDataLoad: UseRewardsDataLoad = (props) => {
   Object.entries(requestOptions).forEach(([k, v]) =>
     params.append(k, v.toString()),
   );
+
+  const apiRewardsPath = `/api/rewards/?${params.toString()}`;
+  const apiRewardsUrl = dynamics.ipfsMode
+    ? `${dynamics.widgetApiBasePathForIpfs}${apiRewardsPath}`
+    : apiRewardsPath;
+
   const { data, ...rest } = useLidoSWR<Backend>(
-    address ? `/api/rewards?${params.toString()}` : null,
+    address ? apiRewardsUrl : null,
     {
       shouldRetryOnError: false,
       revalidateOnFocus: false,