Move baker intro text to translations

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/Intro/BakerIntro.tsx

@@ -1,55 +1,29 @@
 import React from 'react';
 import Carousel from '@popup/popupX/shared/Carousel';
-import { relativeRoutes } from '@popup/popupX/constants/routes';
+import { absoluteRoutes } from '@popup/popupX/constants/routes';
 import { useNavigate } from 'react-router-dom';
+import Page from '@popup/popupX/shared/Page';
+import { Trans, useTranslation } from 'react-i18next';
 
 export default function BakerIntro() {
     const nav = useNavigate();
+    const { t } = useTranslation('x', { keyPrefix: 'earn.validator.intro' });
     return (
-        <div className="baker-intro-container">
-            <div className="baker-intro__title">
-                <span className="heading_medium">Become a baker</span>
-            </div>
-            <Carousel onDone={() => nav(`../${relativeRoutes.settings.earn.baker.register}`)}>
+        <Page className="baker-intro-container">
+            <Carousel onDone={() => nav(absoluteRoutes.settings.earn.baker.register.path)}>
                 <span className="capture__main_small">
-                    <div>
-                        A baker is a mode that participates in the network by baking (creating) new blocks that are
-                        added to the chain. Each baker has a set of cryptographic keys called baker keys that are node
-                        needs to bake blocks.
-                    </div>
-                    <div>
-                        You generate the baker keys in the Mobile Wallet when you add a baker account. Once the baker
-                        node has been restarted with the baker keys, it will start baking two epochs after the
-                        transaction has been approved.
-                    </div>
+                    <Page.Top heading={t('1.title')} />
+                    <Trans t={t} i18nKey="1.body" />
                 </span>
                 <span className="capture__main_small">
-                    <div>
-                        To become a baker you must run a node on the Concordium blockchain. Make sure that you have a
-                        setup where the node can operate around the clock.
-                    </div>
-                    <div>
-                        You can run the node yourself or use a third-party provider. Make sure your account in the
-                        wallet has the required amount of CCD to become a baker.
-                    </div>
+                    <Page.Top heading={t('2.title')} />
+                    <Trans t={t} i18nKey="2.body" />
                 </span>
                 <span className="capture__main_small">
-                    <div>
-                        You have the option when adding a baker to open a staking pool or not. A staking pool allows
-                        others who want to earn rewards to do so without the need to run a node or become a baker
-                        themselves.
-                    </div>
-                    <div>
-                        To do this they delegate an amount to your staking pool which then increases your total stake
-                        and your chances of winning the lottery to bake a block. At each pay day the rewards will be
-                        distributed to you and your delegators.
-                    </div>
-                    <div>
-                        You can also choose not to open a pool, in which case only your own stake applies toward the
-                        lottery. You can always open or close a pool later.
-                    </div>
+                    <Page.Top heading={t('3.title')} />
+                    <Trans t={t} i18nKey="3.body" />
                 </span>
             </Carousel>
-        </div>
+        </Page>
     );
 }

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts

@@ -38,6 +38,22 @@ const t = {
             },
         },
     },
+    validator: {
+        intro: {
+            '1': {
+                title: 'Become a validator',
+                body: 'A validator is a node that participates in the network by producing new blocks that are added to the chain.\n\nEach validator has a set of cryptographic keys called validator keys that the node needs to produce blocks. You generate the validator keys when you add a validator account.\n\nOnce the validator node has been restarted with the validator keys, it will start validation two epochs after the transaction has been approved.',
+            },
+            '2': {
+                title: 'The node',
+                body: 'To become a validator you must run a node on the Concordium blockchain. Make sure that you have a setup where the node can operate around the clock.  You can run the node yourself or use a third-party provider. Make sure your account in the wallet has the required amount of CCD to become a validator.',
+            },
+            '3': {
+                title: 'Opening a pool',
+                body: 'You have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to earn rewards to do so without the need to run a node or become a validator themselves.\n\nTo do this they delegate an amount to your staking pool which then increases your total stake and your chances of winning the lottery to bake a block. At each pay day the rewards will be distributed to you and your delegators.\n\nYou can also choose not to open a pool, in which case only your own stake applies toward the lottery. You can always open or close a pool later.',
+            },
+        },
+    },
 };
 
 export default t;