Feature/landing link

consts/external-links.ts

@@ -46,6 +46,7 @@ type ExternalLinksConstants = {
   rewardsTree: string;
   feedbackForm: string;
   stakeWidget: string;
+  landing?: string;
 
   beaconchain: string;
   feesMonitoring: string;
@@ -66,6 +67,7 @@ export const EXTERNAL_LINKS_BY_NETWORK: Record<
       'https://raw.githubusercontent.com/lidofinance/csm-rewards/mainnet/tree.json',
     feedbackForm: 'https://forms.gle/GL9RYeV2g4px58Sv8',
     stakeWidget: 'https://stake.lido.fi',
+    landing: 'https://lido.fi/csm',
 
     feesMonitoring: 'https://fees-monitoring.lido.fi',
     operatorsWidget: 'https://operators.lido.fi',
@@ -81,6 +83,7 @@ export const EXTERNAL_LINKS_BY_NETWORK: Record<
       'https://raw.githubusercontent.com/lidofinance/csm-rewards/hoodi/tree.json',
     feedbackForm: 'https://forms.gle/ZBUqbykaZokJLf4M7',
     stakeWidget: 'https://stake-hoodi.testnet.fi',
+    landing: 'https://testnet.fi/csm',
 
     feesMonitoring: 'https://fees-monitoring-hoodi.testnet.fi',
     operatorsWidget: 'https://operators-hoodi.testnet.fi',

features/exit-keys/exit-keys.tsx

@@ -1,8 +1,8 @@
 import { Text } from '@lidofinance/lido-ui';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts';
 import {
-  ExternalMatomoLink,
   FormTitle,
+  MatomoLink,
   StackStyle,
   WarningBlock,
 } from 'shared/components';
@@ -17,52 +17,58 @@ export const ExitKeys = () => {
       </Text>
       <StackStyle as="ul" $gap="sm" $direction="column">
         <li>
-          <ExternalMatomoLink
+          <MatomoLink
+            icon="external"
             href="https://docs.lido.fi/run-on-lido/csm/lido-csm-widget/exiting-csm-validators/exit-using-validator-keystores#dappnode"
             matomoEvent={MATOMO_CLICK_EVENTS_TYPES.exitKeysDappnodeLink}
           >
             Guide for Dappnode
-          </ExternalMatomoLink>
+          </MatomoLink>
         </li>
         <li>
-          <ExternalMatomoLink
+          <MatomoLink
+            icon="external"
             href="https://docs.lido.fi/run-on-lido/csm/lido-csm-widget/exiting-csm-validators/exit-using-validator-keystores#sedge"
             matomoEvent={MATOMO_CLICK_EVENTS_TYPES.exitKeysSedgeLink}
           >
             Guide for Sedge
-          </ExternalMatomoLink>
+          </MatomoLink>
         </li>
         <li>
-          <ExternalMatomoLink
+          <MatomoLink
+            icon="external"
             href="https://docs.lido.fi/run-on-lido/csm/lido-csm-widget/exiting-csm-validators/exit-using-validator-keystores#stereum"
             matomoEvent={MATOMO_CLICK_EVENTS_TYPES.exitKeysSteureumLink}
           >
             Guide for Stereum
-          </ExternalMatomoLink>
+          </MatomoLink>
         </li>
         <li>
-          <ExternalMatomoLink
+          <MatomoLink
+            icon="external"
             href="https://docs.lido.fi/run-on-lido/csm/lido-csm-widget/exiting-csm-validators/exit-using-validator-keystores#ethpillar"
             matomoEvent={MATOMO_CLICK_EVENTS_TYPES.exitKeysEthpillarLink}
           >
             Guide for EthPillar
-          </ExternalMatomoLink>
+          </MatomoLink>
         </li>
         <li>
-          <ExternalMatomoLink
+          <MatomoLink
+            icon="external"
             href="https://docs.lido.fi/run-on-lido/csm/lido-csm-widget/exiting-csm-validators/exit-using-validator-keystores#eth-docker"
             matomoEvent={MATOMO_CLICK_EVENTS_TYPES.exitKeysEthdockerLink}
           >
             Guide for EthDocker
-          </ExternalMatomoLink>
+          </MatomoLink>
         </li>
         <li>
-          <ExternalMatomoLink
+          <MatomoLink
+            icon="external"
             href="https://docs.lido.fi/run-on-lido/csm/lido-csm-widget/exiting-csm-validators/exit-using-validator-keystores#systemd"
             matomoEvent={MATOMO_CLICK_EVENTS_TYPES.exitKeysSystemdLink}
           >
             Guide for Systemd
-          </ExternalMatomoLink>
+          </MatomoLink>
         </li>
       </StackStyle>
       <WarningBlock type="notice">

features/ics/ics-apply.tsx

@@ -3,7 +3,7 @@ import { useDappStatus } from 'modules/web3';
 import { FC } from 'react';
 import { NoSSRWrapper, Stack, WhenLoaded } from 'shared/components';
 import { SiweAuthProvider, useSiweAuth } from 'shared/siwe';
-import { Connect, Fallback } from 'shared/wallet';
+import { Connect } from 'shared/wallet';
 import { ApplyForm } from './apply-form';
 import { FormStatus } from './form-status';
 import { ProofStatus } from './form-status/proof-status';
@@ -70,13 +70,8 @@ const IcsApplyContent: FC = () => {
 };
 
 export const IcsApply: FC = () => {
-  const { isSupportedChain, isWalletConnected } = useDappStatus();
-
-  const isWrongChain = isWalletConnected && !isSupportedChain;
-
   return (
     <NoSSRWrapper>
-      {isWrongChain && <Fallback />}
       <SiweAuthProvider
         contextName="ics"
         statement="Sign in to use the ICS Apply form"

features/ics/round-banner/styles.tsx

@@ -1,13 +1,8 @@
-import { Block, ThemeName } from '@lidofinance/lido-ui';
+import { ThemeName } from '@lidofinance/lido-ui';
+import { HatBlock } from 'shared/components';
 import styled from 'styled-components';
 
-export const StyledBlock = styled(Block)`
-  margin-bottom: -52px;
-  padding-bottom: 52px;
-
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
+export const StyledBlock = styled(HatBlock)`
   --first-color: ${({ theme }) =>
     theme.name === ThemeName.light ? `#bfdbfe` : `#55657b`};
   --second-color: ${({ theme }) =>

features/surveys/surveys-page.tsx

@@ -1,24 +1,19 @@
 import { PATH } from 'consts/urls';
 import { FC, useMemo } from 'react';
+import { NoSSRWrapper } from 'shared/components';
+import { Layout } from 'shared/layout';
 import { SiweAuthGate, SiweAuthProvider } from 'shared/siwe';
 import { SurveysContactsPage } from './surveys-contacts-page';
 import { SurveysDelegatesPage } from './surveys-delegates-page';
-import { SurveysExperiencePage } from './surveys-experience-page';
-import { SurveysHowDidYouLearnCsmPage } from './surveys-how-did-you-learn-page';
-import { SurveysSetupPage } from './surveys-setup-page';
 import { SurveysDelegatorPage } from './surveys-delegator-page';
+import { SurveysExperiencePage } from './surveys-experience-page';
 import { SurveysHomePage } from './surveys-home-page';
+import { SurveysHowDidYouLearnCsmPage } from './surveys-how-did-you-learn-page';
 import { SurveyProvider } from './surveys-provider';
+import { SurveysSetupPage } from './surveys-setup-page';
 import { SurveysSignInPage } from './surveys-signin-page';
-import { Layout } from 'shared/layout';
-import { NoSSRWrapper } from 'shared/components';
-import { useDappStatus } from 'modules/web3';
-import { Fallback } from 'shared/wallet';
 
 export const SurveysPage: FC<{ slug?: string[] }> = ({ slug = [] }) => {
-  const { isSupportedChain, isWalletConnected } = useDappStatus();
-  const isWrongChain = isWalletConnected && !isSupportedChain;
-
   const page = useMemo(() => {
     const [page, id1, id2] = slug;
     const path = `/surveys/${page}`;
@@ -45,7 +40,6 @@ export const SurveysPage: FC<{ slug?: string[] }> = ({ slug = [] }) => {
   return (
     <Layout title="Surveys" subtitle="Voluntary report form" pageName="Surveys">
       <NoSSRWrapper>
-        {isWrongChain && <Fallback />}
         <SiweAuthProvider
           contextName="surveys"
           statement="Sign in to use the CSM Surveys"

features/welcome/landing/index.ts

@@ -0,0 +1 @@
+export * from './landing-block';

features/welcome/landing/landing-block.tsx

@@ -0,0 +1,17 @@
+import { DarkThemeProvider } from '@lidofinance/lido-ui';
+import { getExternalLinks } from 'consts';
+import { FC } from 'react';
+import { MatomoLink } from 'shared/components';
+import { ArrowStyled, BlockStyled } from './styles';
+
+const { landing } = getExternalLinks();
+
+export const LandingBlock: FC = () => (
+  <BlockStyled>
+    <DarkThemeProvider>
+      <MatomoLink href={landing}>
+        Learn more about CSM <ArrowStyled />
+      </MatomoLink>
+    </DarkThemeProvider>
+  </BlockStyled>
+);

features/welcome/landing/styles.ts

@@ -0,0 +1,41 @@
+import { ArrowBack } from '@lidofinance/lido-ui';
+import { HatBlock } from 'shared/components';
+import styled from 'styled-components';
+
+export const BlockStyled = styled(HatBlock)`
+  padding: 12px 32px 42px;
+
+  background: linear-gradient(
+      289deg,
+      #ef81f9 17.83%,
+      rgba(38, 0, 255, 0) 133.66%
+    ),
+    radial-gradient(
+      711.17% 355.33% at 142.36% -215.44%,
+      #9995ff 0%,
+      #2238ff 100%
+    );
+
+  display: flex;
+  justify-content: center;
+
+  a {
+    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
+    line-height: ${({ theme }) => theme.fontSizesMap.xl}px;
+    font-weight: 700;
+    color: var(--lido-color-secondary);
+
+    &:hover {
+      color: var(--lido-color-secondaryHover);
+    }
+
+    &:visited {
+      color: var(--lido-color-secondary);
+    }
+  }
+`;
+
+export const ArrowStyled = styled(ArrowBack)`
+  transform: rotate(180deg);
+  margin-left: 8px;
+`;

features/welcome/welcome.tsx

@@ -1,19 +1,15 @@
 import { FC } from 'react';
 
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
-import { useDappStatus } from 'modules/web3';
 import { Stack, WelcomeSection } from 'shared/components';
-import { Connect, Fallback } from 'shared/wallet';
+import { Connect } from 'shared/wallet';
 import styled from 'styled-components';
+import { LandingBlock } from './landing';
 
 export const Welcome: FC = () => {
-  const { isSupportedChain, isWalletConnected } = useDappStatus();
-
-  const isWrongChain = isWalletConnected && !isSupportedChain;
-
   return (
     <>
-      {isWrongChain && <Fallback />}
+      <LandingBlock />
       <WelcomeSection>
         <Stack wrap>
           <ConnectStyle

shared/alerts/alerts-watcher-provider.tsx

@@ -6,7 +6,10 @@ import {
   useOperatorInfo,
   useOperatorKeysWithStatus,
 } from 'modules/web3';
-import { useOperatorKeysWithWrongFeeRecipient } from 'modules/web3/hooks';
+import {
+  useDappStatus,
+  useOperatorKeysWithWrongFeeRecipient,
+} from 'modules/web3/hooks';
 import { useOperatorKeysToMigrate } from 'modules/web3/hooks/use-operator-keys-to-migrate';
 import { useRouter } from 'next/router';
 import { FC, PropsWithChildren, useMemo } from 'react';
@@ -17,12 +20,14 @@ import { AlertLockedBond } from './components/alert-locked-bond';
 import { AlertNomalizeQueue } from './components/alert-normalize-queue';
 import { AlertRequestToExit } from './components/alert-request-to-exit';
 import { AlertTransferKeys } from './components/alert-transfer-keys';
+import { AlertUnsupportedChain } from './components/alert-unsupported-chain';
 import { AlertWrongFeeRecipient } from './components/alert-wrong-fee-recipient';
 import { useAlertWatcher } from './use-alert-watcher';
 
 export const AlertsWatcherProvider: FC<PropsWithChildren> = ({ children }) => {
   const { closeAlert } = useAlertActions();
 
+  const { isSupportedChain } = useDappStatus();
   const { nodeOperator } = useNodeOperator();
   const { data: info } = useOperatorInfo(nodeOperator?.id);
   const { data: keysToTransfer } = useOperatorKeysToMigrate(nodeOperator?.id);
@@ -60,6 +65,11 @@ export const AlertsWatcherProvider: FC<PropsWithChildren> = ({ children }) => {
     ALERT_FEE_RECIPIENT_DISMISS_HOURS,
   );
 
+  useAlertWatcher({
+    component: AlertUnsupportedChain,
+    shouldShow: !isSupportedChain,
+  });
+
   useAlertWatcher({
     component: AlertRequestToExit,
     shouldShow: !!hasRequestsToExit,

shared/alerts/components/alert-container.tsx

@@ -1,45 +1,10 @@
 import { DarkThemeProvider } from '@lidofinance/lido-ui';
 import { FC } from 'react';
-import styled from 'styled-components';
 import { useAlertActions } from '../alert-provider';
-import { MEDIA_QUERY_XXL } from 'styles/constants';
-import { useDappStatus } from 'modules/web3';
-
-const AlertContainerStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spaceMap.md}px;
-
-  margin: 0 auto;
-
-  :not(:empty) {
-    margin-top: 76px;
-  }
-
-  grid-area: none;
-  position: absolute;
-  right: 32px;
-  top: 80px;
-  width: calc(50% - 400px);
-  max-width: 300px;
-  grid-area: none;
-
-  ${MEDIA_QUERY_XXL} {
-    width: calc(50% - 350px);
-  }
-
-  ${({ theme }) => theme.mediaQueries.xl} {
-    grid-area: alerts;
-    position: static;
-    width: 100%;
-    max-width: var(--layout-main-width);
-  }
-`;
+import { AlertContainerStyled } from './styles';
 
 export const AlertContainer: FC = () => {
   const { alerts } = useAlertActions();
-  const { isSupportedChain } = useDappStatus();
-  if (!isSupportedChain) return null;
 
   return (
     <DarkThemeProvider>

shared/alerts/components/alert-unsupported-chain.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { useChainName } from 'shared/hooks';
+import { Alert } from './alert';
+
+export const AlertUnsupportedChain: FC = () => {
+  const chainName = useChainName(true);
+
+  return (
+    <Alert title="Unsupported chain">
+      <p>Please switch to {chainName} in your wallet.</p>
+    </Alert>
+  );
+};