Merge pull request #122 from lidofinance/develop

Merge develop into main

modules/blockChain/ui/NetworkSwitcher/NetworkSwitcher.tsx

@@ -1,18 +1,14 @@
 import { useErrorMessage } from 'modules/blockChain/hooks/useErrorMessage'
 
 import { Container } from '@lidofinance/lido-ui'
-import { Wrap } from './NetworkSwitcherStyle'
-import DangerIconSVG from 'assets/danger.com.svg.react'
+import { AttentionBanner } from 'modules/shared/ui/Common/AttentionBanner'
 
 export function NetworkSwitcher() {
   const errorMessage = useErrorMessage()
 
   return (
     <Container size="full">
-      <Wrap>
-        <DangerIconSVG />
-        <span>{errorMessage}</span>
-      </Wrap>
+      <AttentionBanner>{errorMessage}</AttentionBanner>
     </Container>
   )
 }

modules/dashboard/ui/DashboardGrid/DashboardGrid.tsx

@@ -8,6 +8,7 @@ import { DashboardVote } from '../DashboardVote'
 import { DashboardVoteSkeleton } from '../DashboardVoteSkeleton'
 import { SkeletonBar } from 'modules/shared/ui/Skeletons/SkeletonBar'
 import { GridWrap, PaginationWrap } from './DashboardGridStyle'
+import { FetchErrorBanner } from 'modules/shared/ui/Common/FetchErrorBanner'
 import { ContractVoting } from 'modules/blockChain/contracts'
 import { getVoteStatus } from 'modules/votes/utils/getVoteStatus'
 import { getEventStartVote } from 'modules/votes/utils/getEventVoteStart'
@@ -124,6 +125,14 @@ export function DashboardGrid({ currentPage }: Props) {
     return null
   }
 
+  if (swrVotes.error || infoSwr.error) {
+    return (
+      <Container as="main" size="tight">
+        <FetchErrorBanner error={swrVotes.error || infoSwr.error} />
+      </Container>
+    )
+  }
+
   return (
     <Container as="main" size="full">
       <GridWrap>

modules/shared/ui/Common/AttentionBanner/AttentionBanner.tsx

@@ -0,0 +1,16 @@
+import { Wrap } from './AttentionBannerStyle'
+import DangerIconSVG from 'assets/danger.com.svg.react'
+
+type Props = {
+  type?: 'error' | 'warning'
+  children?: React.ReactNode
+}
+
+export const AttentionBanner = ({ type = 'warning', children }: Props) => {
+  return (
+    <Wrap type={type}>
+      <DangerIconSVG />
+      <span>{children}</span>
+    </Wrap>
+  )
+}

modules/shared/ui/Common/AttentionBanner/AttentionBannerStyle.ts

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components'
+
+type WrapProps = {
+  type: 'error' | 'warning'
+}
+
+export const Wrap = styled.div<WrapProps>`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${({ theme }) => theme.spaceMap.xxl}px;
+  padding: ${({ theme }) => theme.spaceMap.lg}px;
+  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
+  font-weight: 400;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.md}px;
+
+  & svg {
+    display: block;
+    flex: 0 0 auto;
+    margin-right: ${({ theme }) => theme.spaceMap.sm}px;
+    fill: var(--lido-color-textDark);
+  }
+
+  ${({ type }) =>
+    type === 'error' &&
+    css`
+      background-color: var(--lido-color-error);
+
+      &,
+      & a {
+        color: var(--lido-color-errorContrast);
+      }
+
+      & svg {
+        fill: var(--lido-color-errorContrast);
+      }
+    `}
+
+  ${({ type }) =>
+    type === 'warning' &&
+    css`
+      background-color: var(--lido-color-warningBackground);
+
+      &,
+      & a {
+        color: var(--lido-color-textDark);
+      }
+
+      & svg {
+        fill: var(--lido-color-textDark);
+      }
+    `}
+`

modules/shared/ui/Common/AttentionBanner/index.ts

@@ -0,0 +1 @@
+export * from './AttentionBanner'

modules/shared/ui/Common/FetchErrorBanner/FetchErrorBanner.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import { AttentionBanner } from '../AttentionBanner'
+import { ErrorMessageDisplayText } from 'modules/shared/utils/getErrorMessage'
+import * as urls from 'modules/network/utils/urls'
+
+type Props = {
+  error: unknown
+}
+
+export const FetchErrorBanner = ({ error }: Props) => {
+  let topLine = 'There is a problem with rpc node currently in use.'
+
+  if (
+    error &&
+    typeof error === 'object' &&
+    'code' in error &&
+    error.code === 429
+  ) {
+    topLine = ErrorMessageDisplayText.RPC_TOO_MANY_REQUESTS
+  }
+
+  return (
+    <AttentionBanner type="error">
+      {topLine}
+      <br />
+      You can set your own url on <Link href={urls.settings}>
+        settings
+      </Link>{' '}
+      page.
+    </AttentionBanner>
+  )
+}

modules/shared/ui/Common/FetchErrorBanner/index.ts

@@ -0,0 +1 @@
+export * from './FetchErrorBanner'

modules/shared/utils/csp.ts

@@ -32,6 +32,7 @@ export const contentSecurityPolicy = {
       'https://api.thegraph.com',
       'https://*.infura.io',
       'https://*.alchemyapi.io',
+      'https://*.alchemy.com',
       'https://*.etherscan.io/api',
       ...trustedHosts,
     ],

modules/shared/utils/getErrorMessage.ts

@@ -6,6 +6,8 @@ export const ErrorMessageDisplayText = {
     'Please enable blind signing on your Ledger hardware wallet.',
   LIMIT_REACHED:
     'Transaction could not be completed because stake limit is exhausted. Please wait until the stake limit restores and try again. Otherwise, you can swap your Ethereum on 1inch platform instantly.',
+  RPC_TOO_MANY_REQUESTS:
+    'RPC service has reached its requests limit or compute capacity.',
 } as const
 
 // type safe error code extractor
@@ -84,6 +86,8 @@ export const getErrorMessage = (error: unknown) => {
       return ErrorMessageDisplayText.LIMIT_REACHED
     case 'ENABLE_BLIND_SIGNING':
       return ErrorMessageDisplayText.ENABLE_BLIND_SIGNING
+    case 429:
+      return ErrorMessageDisplayText.RPC_TOO_MANY_REQUESTS
     default:
       return ErrorMessageDisplayText.SOMETHING_WRONG
   }

modules/votes/ui/VoteForm/VoteForm.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import { useFormVoteInfo } from './useFormVoteInfo'
 import { useFormVoteSubmit } from './useFormVoteSubmit'
 import { useVotePassedCallback } from '../../hooks/useVotePassedCallback'
@@ -13,10 +12,10 @@ import { VoteFormActions } from '../VoteFormActions'
 import { VoteFormMustConnect } from '../VoteFormMustConnect'
 import { VoteFormVoterState } from '../VoteFormVoterState'
 import { VoteVotersList } from '../VoteVotersList'
-import { Desc, ErrorMessage, ClearButton } from './VoteFormStyle'
+import { Desc, ClearButton } from './VoteFormStyle'
+import { FetchErrorBanner } from 'modules/shared/ui/Common/FetchErrorBanner'
 
 import { VoteStatus } from 'modules/votes/types'
-import * as urls from 'modules/network/utils/urls'
 
 type Props = {
   voteId?: string
@@ -104,13 +103,7 @@ export function VoteForm({ voteId }: Props) {
       )}
 
       {!isLoading && swrVote.error && !isNotFound && (
-        <ErrorMessage>
-          <p>There is a problem with rpc node currently in use.</p>
-          <p>
-            You can set your own url on{' '}
-            <Link href={urls.settings}>settings</Link> page.
-          </p>
-        </ErrorMessage>
+        <FetchErrorBanner error={swrVote.error} />
       )}
 
       {isFound && (

modules/votes/ui/VoteForm/VoteFormStyle.ts

@@ -10,17 +10,6 @@ export const Desc = styled.div`
   }
 `
 
-export const ErrorMessage = styled.div`
-  padding: ${({ theme }) => theme.spaceMap.lg}px;
-  color: #fff;
-  background-color: var(--lido-color-error);
-  border-radius: ${({ theme }) => theme.borderRadiusesMap.xl}px;
-
-  & a {
-    color: #fff;
-  }
-`
-
 export const ClearButton = styled(Text).attrs({
   size: 'xs',
   weight: 700,