Feat/1278: Link to validator profiles on the forum (#1851)

apps/token/src/config/links.ts

@@ -12,4 +12,5 @@ export const Links = {
     'https://docs.vega.xyz/docs/mainnet/concepts/vega-chain/#staking-on-vega',
   GOVERNANCE_PAGE: 'https://vega.xyz/governance',
   PROPOSALS_GUIDE: 'https://docs.vega.xyz/docs/mainnet/tutorials/proposals',
+  VALIDATOR_FORUM: 'https://community.vega.xyz/c/mainnet-validator-candidates',
 };

apps/token/src/i18n/translations/dev.json

@@ -533,10 +533,11 @@
   "unknownEthereumConnectionError": "An unknown error occurred. Check the console in your browser's web developer tools for more details",
   "stakingDescriptionTitle": "How does staking on Vega work?",
   "stakingDescription1": "1. VEGA is an ERC20 token. Associate it with a Vega wallet using the",
-  "stakingDescription2": "2. Use this site and your Vega wallet to nominate a validator",
+  "stakingDescription2": "2. Use this site and your Vega wallet to nominate a validator. View the validator profile pitches and discussion",
   "stakingDescription3": "3. Earn a share of trading fees and treasury rewards for each full epoch staked",
   "stakingDescription4": "4. Move your stake if your validator is penalised",
   "stakingBridge": "staking bridge",
+  "onTheForum": "on the forum",
   "readMoreStaking": "Read more about staking on Vega",
   "networkDown": "This site is not currently connecting to the network please try again later.",
   "ethTransactionModalTitle": "Ethereum Transactions",

apps/token/src/routes/staking/home/staking-intro.spec.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { StakingIntro } from './staking-intro';
+
+describe('Staking', () => {
+  it('should render the component', () => {
+    render(
+      <Router>
+        <StakingIntro />
+      </Router>
+    );
+    expect(screen.getByTestId('staking-intro')).toBeInTheDocument();
+    expect(screen.getByTestId('callout')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        '1. VEGA is an ERC20 token. Associate it with a Vega wallet using the'
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('staking-associate-link')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        '2. Use this site and your Vega wallet to nominate a validator. View the validator profile pitches and discussion'
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('validator-forum-link')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        '3. Earn a share of trading fees and treasury rewards for each full epoch staked'
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('4. Move your stake if your validator is penalised')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('staking-guide-link')).toBeInTheDocument();
+  });
+});

apps/token/src/routes/staking/home/staking-intro.tsx

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Callout,
+  Intent,
+  Link as UTLink,
+} from '@vegaprotocol/ui-toolkit';
+import { Links } from '../../../config';
+
+export const StakingIntro = () => {
+  const { t } = useTranslation();
+
+  return (
+    <section className="mb-8" data-testid="staking-intro">
+      <Callout
+        intent={Intent.Primary}
+        iconName="help"
+        title={t('stakingDescriptionTitle')}
+      >
+        <ol className="mb-4">
+          <li>
+            {t('stakingDescription1')}{' '}
+            <Link
+              to="/staking/associate"
+              className="underline"
+              data-testid="staking-associate-link"
+            >
+              {t('stakingBridge')}
+            </Link>
+          </li>
+          <li>
+            {t('stakingDescription2')}{' '}
+            <UTLink
+              href={Links.VALIDATOR_FORUM}
+              target="_blank"
+              data-testid="validator-forum-link"
+            >
+              {t('onTheForum')}
+            </UTLink>
+          </li>
+          <li>{t('stakingDescription3')}</li>
+          <li>{t('stakingDescription4')}</li>
+        </ol>
+
+        <UTLink
+          href={Links.STAKING_GUIDE}
+          target="_blank"
+          data-testid="staking-guide-link"
+        >
+          <Button>{t('readMoreStaking')}</Button>
+        </UTLink>
+      </Callout>
+    </section>
+  );
+};

apps/token/src/routes/staking/home/staking.tsx

@@ -1,12 +1,5 @@
-import {
-  Button,
-  Callout,
-  Intent,
-  Link as UTLink,
-} from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { StakingIntro } from './staking-intro';
-import { Links } from '../../../config';
 import { NodeList } from './node-list';
 
 export const Staking = () => {
@@ -14,33 +7,7 @@ export const Staking = () => {
 
   return (
     <>
-      <section className="mb-8">
+      <StakingIntro />
-        <Callout
-          intent={Intent.Primary}
-          iconName="help"
-          title={t('stakingDescriptionTitle')}
-        >
-          <ol className="mb-4">
-            <li>
-              {t('stakingDescription1')}{' '}
-              <Link to="/staking/associate" className="underline">
-                {t('stakingBridge')}
-              </Link>
-            </li>
-            <li>{t('stakingDescription2')}</li>
-            <li>{t('stakingDescription3')}</li>
-            <li>{t('stakingDescription4')}</li>
-          </ol>
-
-          <UTLink
-            href={Links.STAKING_GUIDE}
-            target="_blank"
-            data-testid="staking-guide-link"
-          >
-            <Button>{t('readMoreStaking')}</Button>
-          </UTLink>
-        </Callout>
-      </section>
       <section>
         <h2 className="text-2xl uppercase">{t('Validator nodes')}</h2>
         <NodeList data-testid="node-list" />