[WAL-1454] FCA-compliance text changes

packages/browser-wallet/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Updated texts across the wallet to be FCA legally compliant
+
 ### Fixed
 
 -   Fixed accounts display under incorrect identities

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx

@@ -70,7 +70,7 @@ export default function MenuTiles({ menuOpen, setMenuOpen }: MenuTilesProps) {
                 <Link to={absoluteRoutes.settings.earn.path}>
                     <IconButton className="main-header__menu-tiles_tile">
                         <Percent />
-                        <Text.Capture>{t('earn')}</Text.Capture>
+                        <Text.Capture>{t('stake')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to={absoluteRoutes.settings.network.path}>

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts

@@ -5,7 +5,7 @@ const t = {
         seedPhrase: 'Seed phrase',
         passcode: 'Passcode',
         web3Id: 'Web3 ID',
-        earn: 'Earn',
+        stake: 'Stake',
         network: 'Network',
         about: 'About',
         restore: 'Restore',

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.scss

@@ -14,4 +14,8 @@
             margin-bottom: rem(16px);
         }
     }
+
+    .confirm-checkbox {
+        gap: rem(12px);
+    }
 }

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormRadio } from '@popup/popupX/shared/Form/Radios';
 import { Trans, useTranslation } from 'react-i18next';
 import { Validate } from 'react-hook-form';
@@ -10,6 +10,7 @@ import ExternalLink from '@popup/popupX/shared/ExternalLink';
 import Form, { useForm } from '@popup/popupX/shared/Form';
 import Button from '@popup/popupX/shared/Button';
 import FormInput from '@popup/popupX/shared/Form/Input/Input';
+import { Checkbox } from '@popup/popupX/shared/Form/Checkbox';
 import Text from '@popup/popupX/shared/Text';
 import { grpcClientAtom, networkConfigurationAtom } from '@popup/store/settings';
 import { DelegationTypeForm } from '../util';
@@ -26,6 +27,7 @@ export default function DelegationType({ initialValues, onSubmit, title }: Props
     const network = useAtomValue(networkConfigurationAtom);
     const client = useAtomValue(grpcClientAtom);
     const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.target' });
+    const [confirmCheckbox, setConfirmCheckbox] = useState(false);
 
     const form = useForm<DelegationTypeForm>({
         defaultValues: initialValues ?? { type: DelegationTargetType.PassiveDelegation },
@@ -57,12 +59,14 @@ export default function DelegationType({ initialValues, onSubmit, title }: Props
                         <FormRadio
                             id={DelegationTargetType.Baker}
                             label={t('radioValidatorLabel')}
+                            subText={t('radioValidatorSubText')}
                             name="type"
                             register={f.register}
                         />
                         <FormRadio
                             id={DelegationTargetType.PassiveDelegation}
                             label={t('radioPassiveLabel')}
+                            subText={t('radioPassiveSubText')}
                             name="type"
                             register={f.register}
                         />
@@ -104,8 +108,23 @@ export default function DelegationType({ initialValues, onSubmit, title }: Props
                     />
                 )}
             </Text.Capture>
+            <Text.Capture>
+                <Trans
+                    t={t}
+                    i18nKey="delegationWarnInfo"
+                    components={{
+                        '1': <Text.ExternalLink path="https://www.fca.org.uk" />,
+                    }}
+                />
+            </Text.Capture>
+            <Checkbox
+                className="confirm-checkbox"
+                description={<Text.Capture>{t('iConfirm')}</Text.Capture>}
+                checked={confirmCheckbox}
+                onChange={() => setConfirmCheckbox(!confirmCheckbox)}
+            />
             <Page.Footer>
-                <Button.Main label={t('buttonContinue')} onClick={submit} />
+                <Button.Main label={t('buttonContinue')} onClick={submit} disabled={!confirmCheckbox} />
             </Page.Footer>
         </Page>
     );

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.scss

@@ -4,7 +4,8 @@
             margin-bottom: rem(16px);
         }
 
-        &__cooldowns, &__card {
+        &__cooldowns,
+        &__card {
             margin-bottom: rem(8px);
         }
 
@@ -34,7 +35,6 @@
         &__info {
             display: flex;
             gap: rem(8px);
-            margin-top: rem(26px);
 
             svg {
                 height: rem(16px);

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

@@ -5,7 +5,7 @@ import Page from '@popup/popupX/shared/Page';
 import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
 import { cpBakingThreshold } from '@shared/utils/chain-parameters-helpers';
 import { displayAsCcd } from 'wallet-common-helpers';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { Link, Navigate } from 'react-router-dom';
 import { absoluteRoutes, relativeRoutes } from '@popup/popupX/constants/routes';
 import Text from '@popup/popupX/shared/Text';
@@ -36,7 +36,7 @@ export default function EarningRewards() {
 
     return (
         <Page className="earn-container">
-            <Page.Top heading="Earning Rewards" />
+            <Page.Top heading={t('title')} />
             <Page.Main>
                 {accountInfo !== undefined && (
                     <AccountCooldowns className="earn__cooldowns" cooldowns={accountInfo.accountCooldowns} />
@@ -67,7 +67,15 @@ export default function EarningRewards() {
                     <div className="earn__info_icon">
                         <Info />
                     </div>
-                    <Text.Capture>{t('note')}</Text.Capture>
+                    <Text.Capture>
+                        <Trans
+                            t={t}
+                            i18nKey="note"
+                            components={{
+                                '1': <Text.ExternalLink path="https://www.fca.org.uk" />,
+                            }}
+                        />
+                    </Text.Capture>
                 </div>
             </Page.Main>
         </Page>