From 87a660cd3bf46aaf8f453acb11c2149ffff3b681 Mon Sep 17 00:00:00 2001 From: IvanMahda Date: Fri, 21 Nov 2025 20:58:50 +0200 Subject: [PATCH 1/4] [WAL-1454] Do FCA-compliance text changes Updated texts for new UI --- .../Header/components/MenuTiles.tsx | 2 +- .../page-layouts/MainLayout/Header/i18n/en.ts | 2 +- .../Delegator/Type/DelegationType.scss | 4 ++ .../Delegator/Type/DelegationType.tsx | 23 +++++++++++- .../pages/EarningRewards/EarningRewards.scss | 4 +- .../pages/EarningRewards/EarningRewards.tsx | 14 +++++-- .../popupX/pages/EarningRewards/i18n/en.ts | 37 +++++++++++-------- .../popup/popupX/pages/MainPage/MainPage.tsx | 4 +- .../popup/popupX/pages/MainPage/i18n/en.ts | 2 +- .../popup/popupX/pages/Onboarding/i18n/en.ts | 2 +- .../src/popup/popupX/pages/Onramp/Onramp.scss | 4 ++ .../src/popup/popupX/pages/Onramp/Onramp.tsx | 18 +++++++-- .../src/popup/popupX/pages/Onramp/i18n/en.ts | 11 ++++-- .../pages/TokenDetails/TokenDetailsCcd.tsx | 4 +- .../popupX/pages/TokenDetails/i18n/en.ts | 4 +- .../popupX/pages/TransactionLog/i18n/en.ts | 2 +- .../popup/popupX/pages/TransactionLog/util.ts | 2 +- .../src/popup/popupX/shared/Form/Form.scss | 9 +++++ .../popupX/shared/Form/Radios/Radios.tsx | 9 ++++- 19 files changed, 114 insertions(+), 43 deletions(-) diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx index a89d38dd5..333b37930 100644 --- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx +++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx @@ -70,7 +70,7 @@ export default function MenuTiles({ menuOpen, setMenuOpen }: MenuTilesProps) { - {t('earn')} + {t('stake')} diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts index 6e300c53b..2f5521fd2 100644 --- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts +++ b/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', diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.scss b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.scss index f687044ae..db81c03b2 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.scss +++ b/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); + } } diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.tsx b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.tsx index dddca3454..a6cc15bc9 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Type/DelegationType.tsx +++ b/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({ defaultValues: initialValues ?? { type: DelegationTargetType.PassiveDelegation }, @@ -57,12 +59,14 @@ export default function DelegationType({ initialValues, onSubmit, title }: Props @@ -104,8 +108,23 @@ export default function DelegationType({ initialValues, onSubmit, title }: Props /> )} + + , + }} + /> + + {t('iConfirm')}} + checked={confirmCheckbox} + onChange={() => setConfirmCheckbox(!confirmCheckbox)} + /> - + ); diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.scss b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.scss index a23699da4..b292cfe29 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.scss +++ b/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); diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.tsx b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.tsx index 1c6a291f4..4c08e6f3b 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/EarningRewards.tsx +++ b/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 ( - + {accountInfo !== undefined && ( @@ -67,7 +67,15 @@ export default function EarningRewards() {
- {t('note')} + + , + }} + /> + diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts index 07b02a2b6..14f369f51 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts +++ b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/i18n/en.ts @@ -1,5 +1,6 @@ const t = { root: { + title: 'Staking', validatorTitle: 'Validation', validatorDescription: 'As a validator, you can participate in the network by validating blocks on the Concordium network. This requires a minimum of {{amount}} CCD and access to a dedicated node.', @@ -8,7 +9,7 @@ const t = { delegationDescription: 'If you don’t have access to your own node, you may delegate your stake to one of the other validators. There is no minimum amount of CCD required when delegating.', delegationAction: 'Continue to delegation setup', - note: 'Please note, a single account cannot both be a validator and a delegator, but it is possible to stop one and change to the other.', + note: 'Don’t stake any funds unless you’re prepared to lose all the funds you staked with your crypto assets. This is a high-risk transaction and you are unlikely to be protected if something goes wrong. Learn more at <1>fca.org.uk\n\nPlease note, a single account cannot both be a validator and a delegator, but it is possible to stop one and change to the other.', }, cooldowns: { header: 'Cooldown', @@ -38,12 +39,12 @@ const t = { buttonUpdate: 'Update', buttonStop: 'Stop', validatorSuspended: 'Your validator has been suspended', - validatorSuspendedInfo: 'Your delegation amount does not earn rewards until validation is resumed.', + validatorSuspendedInfo: 'Your delegation amount does not receive rewards until validation is resumed.', }, intro: { '1': { title: 'Delegation', - body: 'Delegation allows users on the Concordium blockchain to earn rewards without the need to become a validator or run a node.\n\nBy delegating some of your funds to a pool, you can earn rewards.\n\nOn the next few pages, we will go through the basics of delegation. If you want to learn more, you can visit our <1>documentation website.', + body: 'Delegation allows users on the Concordium blockchain to stake rewards without the need to become a validator or run a node.\n\nBy delegating some of your funds to a pool, you can stake rewards.\n\nOn the next few pages, we will go through the basics of delegation. If you want to learn more, you can visit our <1>documentation website.', }, '2': { title: 'Delegation models', @@ -51,11 +52,11 @@ const t = { }, '3': { title: 'Staking pools', - body: "A staking pool is managed by an individual validator.\n\nRunning a pool allows a validator to attract more stake and thus increase chances of being selected to produce a block.\n\nValidators earn a commission from the delegators upon producing a block.\n\nDelegating to a staking pool is usually more profitable than passive delegation, but there is also a risk of losing out on rewards if the validator is not running properly. It is therefore a good idea to keep an eye on the validator's performance.\n\nYou can read more about how to investigate a validator's performance on our <1>documentation website.", + body: "A staking pool is managed by an individual validator.\n\nRunning a pool allows a validator to attract more stake and thus increase chances of being selected to produce a block.\n\nValidators receive a commission from the delegators upon producing a block.\n\nDelegating to a staking pool is usually more profitable than passive delegation, but there is also a risk of losing out on rewards if the validator is not running properly. It is therefore a good idea to keep an eye on the validator's performance.\n\nYou can read more about how to investigate a validator's performance on our <1>documentation website.", }, '4': { title: 'Passive delegation', - body: 'For CCD holders who do not want to regularly check the performance of a chosen pool, but just want a stable way of earning rewards, passive delegation offers a low-risk, low-reward alternative.\n\nThis staking strategy is not associated with a specific validator, so there is no risk of poor validator health.\n\nThe trade-off when choosing passive delegation is that the return on your stake will be less than what you may receive when delegating to a specific staking pool.', + body: 'For CCD holders who do not want to regularly check the performance of a chosen pool, but just want a stable way of receiving rewards, passive delegation offers a low-risk, low-reward alternative.\n\nThis staking strategy is not associated with a specific validator, so there is no risk of poor validator health.\n\nThe trade-off when choosing passive delegation is that the return on your stake will be less than what you may receive when delegating to a specific staking pool.', }, '5': { title: 'Pay days', @@ -68,7 +69,7 @@ const t = { }, register: { title: 'Register delegation', - backTitle: 'Earning rewards', + backTitle: 'Staking', notice: 'This will lock your delegation amount. Amount is released after {{cooldown}} days from the time you remove or decrease your delegation.', }, update: { @@ -88,7 +89,9 @@ const t = { target: { description: 'You can delegate to an open pool of your choice, or you can stake using passive delegation.', radioValidatorLabel: 'Validator', + radioValidatorSubText: 'Manually delegate to a validator of your choice.', radioPassiveLabel: 'Passive', + radioPassiveSubText: 'Distribute stake among all staking pools. No validator selection required.', inputValidatorId: { label: 'Enter validator pool ID', errorRequired: 'Please specify a validator ID', @@ -100,6 +103,10 @@ const t = { 'If you don’t already know which validator pool you want to delegate an amount to, you can look for one <1>here.', passiveDelegationDescription: 'Passive delegation is an alternative to delegation to a specific validator pool that has lower rewards. With passive delegation, you do not have to worry about the uptime or quality of a validator node.\nFor more info, you can visit <1>developer.concordium.software', + delegationWarnInfo: + '\nDon’t stake any funds unless you’re prepared to lose all the funds you staked with your crypto assets. This is a high-risk transaction and you are unlikely to be protected if something goes wrong. Learn more at <1>fca.org.uk. Projected rewards are estimates only. Actual returns may vary and are not guaranteed.\nStaking is not available to users located in, or residents of any jurisdiction where staking services are prohibited by law. By continuing, you confirm that you are not located in or a resident of a restricted country.\n\n', + iConfirm: + 'I confirm I am not a resident of a restricted jurisdiction and that I am eligible to use staking services under applicable law. I agree to the Staking Terms of Use.\n\n', buttonContinue: 'Continue', }, stake: { @@ -180,10 +187,10 @@ const t = { buttonResume: 'Resume', validationSuspended: 'Your validation has been suspended', validationSuspendedInfo: - 'Your node does not earn rewards at the moment.\n\nTo lift the suspension and earn rewards again ensure your node is up-to-date and click “Resume”.', + 'Your node does not receive rewards at the moment.\n\nTo lift the suspension and receive rewards again ensure your node is up-to-date and click “Resume”.', validationIsPrimedForSuspension: 'Your validation is primed for suspension', validationIsPrimedForSuspensionInfo: - 'Your node was inactive for a number of hours. If it has been inactive for too long it will be suspended. Suspended nodes don’t earn rewards.\n\nTo prevent suspension ensure your node is up-to-date and active. Once your node is active you will no longer be primed for suspension.', + 'Your node was inactive for a number of hours. If it has been inactive for too long it will be suspended. Suspended nodes don’t receive rewards.\n\nTo prevent suspension ensure your node is up-to-date and active. Once your node is active you will no longer be primed for suspension.', }, intro: { '1': { @@ -196,21 +203,21 @@ const t = { }, '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 produce 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.', + body: 'You have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to receive 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 produce 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.', }, '4': { title: 'Suspension', - body: 'Validators will be marked for suspension if their node is inactive for a longer period of time. \nTo prevent suspension ensure your node is up-to-date and active. Once your node is active you will no longer be primed for suspension.\n\nOnce it has been inactive for a longer period of time the validation will be suspended. \n\n
  • Suspended validators don’t earn rewards
  • Your delegators will stop earning rewards
  • Your delegators will be notified about the suspension
\nTo lift the suspension and earn rewards again ensure your node is up-to-date and click “Resume”.', + body: 'Validators will be marked for suspension if their node is inactive for a longer period of time. \nTo prevent suspension ensure your node is up-to-date and active. Once your node is active you will no longer be primed for suspension.\n\nOnce it has been inactive for a longer period of time the validation will be suspended. \n\n
  • Suspended validators don’t receive rewards
  • Your delegators will stop receiving rewards
  • Your delegators will be notified about the suspension
\nTo lift the suspension and receive rewards again ensure your node is up-to-date and click “Resume”.', }, }, register: { title: 'Register validator', - backTitle: 'Earning rewards', + backTitle: 'Staking', notice: 'This will lock your validation amount. Amount is released after {{cooldown}} days from the time you remove or decrease your validation stake.', }, update: { title: 'Update validation', - backTitle: 'Earning rewards', + backTitle: 'Staking', noChangesNotice: { title: 'No changes', description: 'The proposed transaction contains no changes compared to the current validation.', @@ -240,7 +247,7 @@ const t = { }, selfSuspend: { title: 'Important', - body: 'You are about to self-suspend your validation. Please be aware that:\n\n
  • Suspended nodes don’t earn rewards
  • Your delegators will stop earning rewards
  • Your delegators will be notified about the suspension
', + body: 'You are about to self-suspend your validation. Please be aware that:\n\n
  • Suspended nodes don’t receive rewards
  • Your delegators will stop receiving rewards
  • Your delegators will be notified about the suspension
', continue: 'Continue', back: 'Back', }, @@ -297,7 +304,7 @@ const t = { label: 'Open for delegation', }, description: - 'Opening a pool\nYou 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 produce 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.', + 'Opening a pool\nYou have the option when adding a validator to open a staking pool or not. A staking pool allows others who want to receive 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 produce 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.', buttonContinue: 'Continue', }, metadata: { @@ -315,7 +322,7 @@ const t = { commissions: { title: 'Commissions', desciption: - 'When you open your validator as a pool, you earn commissions of stake delegated to your pool from other accounts:', + 'When you open your validator as a pool, you receive commissions of stake delegated to your pool from other accounts:', fieldTransactionFee: { label: 'Transaction fee commission', }, diff --git a/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx b/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx index 1628b1c62..a009e0826 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx @@ -233,7 +233,7 @@ function MainPageConfirmedAccount({ credential }: MainPageConfirmedAccountProps) } label={t('send')} onClick={navToSend} className="send" /> } - label={t('earn')} + label={t('stake')} onClick={navToEarn} className={clsx({ suspend: isSuspended })} /> @@ -296,7 +296,7 @@ function MainPagePendingAccount() { } label={t('buy')} disabled className="buy" /> } label={t('receive')} disabled className="receive" /> } label={t('send')} disabled className="send" /> - } label={t('earn')} disabled /> + } label={t('stake')} disabled /> } label={t('activity')} disabled />
diff --git a/packages/browser-wallet/src/popup/popupX/pages/MainPage/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/MainPage/i18n/en.ts index dfaf0c43c..4d4379e68 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/MainPage/i18n/en.ts +++ b/packages/browser-wallet/src/popup/popupX/pages/MainPage/i18n/en.ts @@ -2,7 +2,7 @@ const t = { buy: 'Buy', receive: 'Receive', send: 'Send', - earn: 'Earn', + stake: 'Stake', activity: 'Activity', manageTokenList: 'Manage Tokens', pendingAccount: 'Creating account', diff --git a/packages/browser-wallet/src/popup/popupX/pages/Onboarding/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/Onboarding/i18n/en.ts index f83eaf0c8..ffde10b50 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/Onboarding/i18n/en.ts +++ b/packages/browser-wallet/src/popup/popupX/pages/Onboarding/i18n/en.ts @@ -6,7 +6,7 @@ const t = { easyManage: 'Easily manage digital assets', spendAssets: 'Store, spend and send digital assets like tokens, crypto, unique collectibles', unlimited: 'Unlimited possibilities', - transactionInvest: 'With CryptoX you can make transactions to invest, earn, sell, play games and more!', + transactionInvest: 'With CryptoX you can make transactions to invest, stake, sell, play games and more!', start: 'Get started', proceeding: 'By proceeding, you agree with ', termsAndConditions: 'Terms & Conditions', diff --git a/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.scss b/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.scss index 2afabcc59..fd6d571f5 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.scss +++ b/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.scss @@ -10,6 +10,10 @@ .text__description { text-align: center; + + &.underline { + text-decoration: underline; + } } .text__disclaimer { diff --git a/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.tsx b/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.tsx index 309bd617e..e6224a08b 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/Onramp/Onramp.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTranslation } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; import Page from '@popup/popupX/shared/Page'; import Text from '@popup/popupX/shared/Text'; import Card from '@popup/popupX/shared/Card'; @@ -12,6 +12,7 @@ import { networkConfigurationAtom } from '@popup/store/settings'; import { NetworkConfiguration } from '@shared/storage/types'; import { isMainnet } from '@shared/utils/network-helpers'; import urls from '@shared/constants/url'; +import ExternalLink from '@popup/popupX/shared/ExternalLink'; const BANXA_CONFIG = { title: 'Banxa', @@ -52,6 +53,7 @@ export default function Onramp() { {t('description')} + {t('readDisclaimer')}