Merge pull request #562 from Concordium/ui-update/validation-status

UI update/validation status

packages/browser-wallet/src/popup/popupX/constants/routes.ts

@@ -160,14 +160,26 @@ export const relativeRoutes = {
         /** Routes related to staking for the currently selected account */
         earn: {
             path: 'earn',
-            /** Validation related routes */
+            /** Validation section */
             validator: {
                 path: 'baker',
-                intro: {
-                    path: 'intro',
-                },
+                /** Configure new validator */
                 register: {
                     path: 'register',
+                    config: {
+                        backTitle: i18n.t('x:earn.validator.register.backTitle'),
+                    },
+                    /** Flow for constructing the transaction */
+                    configure: {
+                        config: {
+                            backTitle: i18n.t('x:earn.validator.register.backTitle'),
+                        },
+                        path: 'configure',
+                    },
+                },
+                /** Configure existing delegator */
+                update: {
+                    path: 'update',
                 },
                 openPool: {
                     path: 'openPool',

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

@@ -4,15 +4,16 @@ import { useNavigate } from 'react-router-dom';
 import Page from '@popup/popupX/shared/Page';
 import { Trans, useTranslation } from 'react-i18next';
 import ExternalLink from '@popup/popupX/shared/ExternalLink';
+import { absoluteRoutes } from '@popup/popupX/constants/routes';
 
-type Props = { onDoneRoute: string };
-
-export default function DelegatorIntro({ onDoneRoute }: Props) {
+export default function DelegatorIntro() {
     const nav = useNavigate();
     const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.intro' });
     return (
         <Page className="delegator-intro-container">
-            <Carousel onDone={() => nav(onDoneRoute, { replace: true })}>
+            <Carousel
+                onDone={() => nav(absoluteRoutes.settings.earn.delegator.register.configure.path, { replace: true })}
+            >
                 <span className="capture__main_small">
                     <Page.Top heading={t('1.title')} />
                     <Trans

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

@@ -34,7 +34,7 @@ export default function DelegatorStatus() {
                 <Card.Row>
                     <Card.RowDetails
                         title={t('values.amount.label')}
-                        value={`${formatCcdAmount(accountDelegation.stakedAmount)}`}
+                        value={`${formatCcdAmount(accountDelegation.stakedAmount)} CCD`}
                     />
                 </Card.Row>
                 <Card.Row>

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

@@ -41,7 +41,7 @@ export default function EarningRewards() {
                     <Text.Capture>
                         {t('validatorDescription', { amount: displayAsCcd(bakingThreshold, false) })}
                     </Text.Capture>
-                    <Link to={absoluteRoutes.settings.earn.validator.intro.path}>
+                    <Link to={absoluteRoutes.settings.earn.validator.register.path}>
                         <div className="earn__card_continue">
                             <Text.LabelRegular>{t('validatorAction')}</Text.LabelRegular>
                             <ArrowRight />

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/Intro/BakerIntro.scss → packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Intro/ValidatorIntro.scss

@@ -1,4 +1,4 @@
-.baker-intro-container {
+.validator-intro-container {
     display: flex;
     flex-direction: column;
     height: 100%;

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

@@ -6,12 +6,14 @@ import Page from '@popup/popupX/shared/Page';
 import Text from '@popup/popupX/shared/Text';
 import { Trans, useTranslation } from 'react-i18next';
 
-export default function BakerIntro() {
+export default function ValidatorIntro() {
     const nav = useNavigate();
     const { t } = useTranslation('x', { keyPrefix: 'earn.validator.intro' });
     return (
-        <Page className="baker-intro-container">
-            <Carousel onDone={() => nav(absoluteRoutes.settings.earn.validator.register.path, { replace: true })}>
+        <Page className="validator-intro-container">
+            <Carousel
+                onDone={() => nav(absoluteRoutes.settings.earn.validator.register.configure.path, { replace: true })}
+            >
                 <Text.Capture>
                     <Page.Top heading={t('1.title')} />
                     <Trans t={t} i18nKey="1.body" />

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Intro/index.ts

@@ -0,0 +1 @@
+export { default } from './ValidatorIntro';

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/BakerKeys/BakerKeys.scss → packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Keys/ValidatorKeys.scss

@@ -1,10 +1,10 @@
-.baker-keys-container {
+.validator-keys-container {
     .capture__main_small {
         color: $color-white;
         word-wrap: break-word;
     }
 
-    .baker-keys {
+    .validator-keys {
         &__title {
             display: flex;
             justify-content: space-between;

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/BakerKeys/BakerKeys.tsx → packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Keys/ValidatorKeys.tsx

@@ -1,41 +1,41 @@
 import React from 'react';
 import ExportIcon from '@assets/svgX/sign-out.svg';
 
-export default function BakerKeys() {
+export default function ValidatorKeys() {
     return (
-        <div className="baker-keys-container">
-            <div className="baker-keys__title">
-                <span className="heading_medium">Baker keys</span>
+        <div className="validator-keys-container">
+            <div className="validator-keys__title">
+                <span className="heading_medium">Validator keys</span>
                 <span className="capture__main_small">on Accout 1 / 6gk...k7o</span>
             </div>
             <span className="capture__main_small">
-                Your new baker keys have been generated. Before you can continue, you must export and save them. The
-                keys will have to be added to the baker node. Besides exporting the keys, you will have to finish and
-                submit the transaction afterwards for the baker to be registered.
+                Your new validator keys have been generated. Before you can continue, you must export and save them. The
+                keys will have to be added to the validator node. Besides exporting the keys, you will have to finish
+                and submit the transaction afterwards for the validator to be registered.
             </span>
-            <div className="baker-keys__card">
-                <div className="baker-keys__card_row">
+            <div className="validator-keys__card">
+                <div className="validator-keys__card_row">
                     <span className="capture__main_small">Election verify key</span>
                     <span className="capture__main_small">
                         474564hhfjdjde5f8f9g7fnsnsjs9e7g8f7fs64d3s3f6vb90f9d8d8dd66d
                     </span>
                 </div>
-                <div className="baker-keys__card_row">
+                <div className="validator-keys__card_row">
                     <span className="capture__main_small">Signature verify key</span>
                     <span className="capture__main_small">
                         9f6g5e6g8gh9g9r7d4fghgfdx76gv5b4hg4fd5sxs9cvbn9m9nhgf77dfgh
                     </span>
                 </div>
-                <div className="baker-keys__card_row">
+                <div className="validator-keys__card_row">
                     <span className="capture__main_small">Aggregation verify key</span>
                     <span className="capture__main_small">
                         4f84fg3gb6d9s9s3s1d46gg9grf7jmf9xc5c7s5x3vn80b8c6x5x4f84fg3gb6d9s9s3s1d46gg9grf7jmf9xc5c7s5x3vn80b8c6x5x4f84fg3gb6d9s9s3s1d46gg9grf7jmf9xc5c7s5x3vn80b8c6x5x4f84fg3gb6d9s9s3s1d46gg9grf7jmf9xc5c7s5x3vn80b8c6x5xdjd9f7g66673
                     </span>
                 </div>
             </div>
-            <div className="baker-keys__export">
+            <div className="validator-keys__export">
                 <ExportIcon />
-                <span className="label__main">Export baker keys</span>
+                <span className="label__main">Export validator keys</span>
             </div>
         </div>
     );

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Keys/index.ts

@@ -0,0 +1 @@
+export { default } from './ValidatorKeys';

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/OpenPool/OpenPool.tsx → packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/OpenPool/OpenPool.tsx

@@ -15,7 +15,7 @@ export default function OpenPool() {
                     <ToggleCheckbox />
                 </div>
                 <span className="capture__main_small">
-                    You have the option to open your baker as a pool for others to delegate their CCD to.
+                    You have the option to open your validator as a pool for others to delegate their CCD to.
                 </span>
                 <span className="capture__main_small">
                     If you choose to open your pool, other people will be able to delegate CCDs to your baking pool.

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/OpenPool/index.ts

@@ -0,0 +1 @@
+export { default } from './OpenPool';

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/Register/RegisterBaker.scss → packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Register/RegisterValidator.scss

@@ -1,10 +1,10 @@
-.register-baker-container {
+.register-validator-container {
     display: flex;
     flex-direction: column;
     height: 100%;
     padding-bottom: rem(32px);
 
-    .register-baker {
+    .register-validator {
         &__title {
             display: flex;
             align-items: baseline;

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Baker/Register/RegisterBaker.tsx → packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Register/RegisterValidator.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import Button from '@popup/popupX/shared/Button';
 import { ToggleCheckbox } from '@popup/popupX/shared/Form/ToggleCheckbox';
 
-export default function RegisterBaker() {
+export default function RegisterValidator() {
     return (
-        <div className="register-baker-container">
-            <div className="register-baker__title">
-                <span className="heading_medium">Register Baker</span>
+        <div className="register-validator-container">
+            <div className="register-validator__title">
+                <span className="heading_medium">Register validator</span>
                 <span className="capture__main_small">on Accout 1 / 6gk...k7o</span>
             </div>
-            <div className="register-baker__token-card">
+            <div className="register-validator__token-card">
                 <div className="token">
                     <span className="text__main_regular">Token</span>
                     <div className="token-available">
@@ -29,14 +29,14 @@ export default function RegisterBaker() {
                     <span className="capture__main_small"> 12.200,29 CCD – 18.500,04 CCD</span>
                 </div>
             </div>
-            <div className="register-baker__reward">
-                <div className="register-baker__reward_auto-add">
+            <div className="register-validator__reward">
+                <div className="register-validator__reward_auto-add">
                     <span className="text__main">Auto add rewards</span>
                     <ToggleCheckbox />
                 </div>
                 <span className="capture__main_small">
-                    Set to automatically add baking rewards to baker stake. amounts will be at disposal on your account
-                    balance at each pay day.
+                    Set to automatically add baking rewards to validator stake. amounts will be at disposal on your
+                    account balance at each pay day.
                 </span>
             </div>
             <Button.Main label="Continue" />

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/Register/index.ts

@@ -0,0 +1 @@
+export { default } from './RegisterValidator';

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { AccountInfoType } from '@concordium/web-sdk';
+import { absoluteRoutes } from '@popup/popupX/constants/routes';
+import Button from '@popup/popupX/shared/Button';
+import Card from '@popup/popupX/shared/Card';
+import Page from '@popup/popupX/shared/Page';
+import { useTranslation } from 'react-i18next';
+import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
+import { Navigate, useNavigate } from 'react-router-dom';
+import AccountCooldowns from '../AccountCooldowns';
+import { showRestake, showValidatorAmount, showValidatorOpenStatus } from './util';
+
+export default function ValidatorStatus() {
+    const { t } = useTranslation('x', { keyPrefix: 'earn.validator' });
+    const accountInfo = useSelectedAccountInfo();
+    const nav = useNavigate();
+
+    if (accountInfo?.type !== AccountInfoType.Baker) {
+        return <Navigate to=".." />;
+    }
+
+    const { accountBaker, accountCooldowns } = accountInfo;
+
+    if (accountBaker.version === 0) {
+        return null;
+    }
+
+    return (
+        <Page>
+            <Page.Top heading={t('status.title')} />
+            <Card>
+                <Card.Row>
+                    <Card.RowDetails
+                        title={t('values.amount.label')}
+                        value={showValidatorAmount(accountBaker.stakedAmount)}
+                    />
+                </Card.Row>
+                <Card.Row>
+                    <Card.RowDetails title={t('values.id.label')} value={accountBaker.bakerId.toString()} />
+                </Card.Row>
+                <Card.Row>
+                    <Card.RowDetails
+                        title={t('values.restake.label')}
+                        value={showRestake(accountBaker.restakeEarnings)}
+                    />
+                </Card.Row>
+                <Card.Row>
+                    <Card.RowDetails
+                        title={t('values.openStatus.label')}
+                        value={showValidatorOpenStatus(accountBaker.bakerPoolInfo.openStatus)}
+                    />
+                </Card.Row>
+                <Card.Row>
+                    <Card.RowDetails
+                        title={t('values.metadataUrl.label')}
+                        value={accountBaker.bakerPoolInfo.metadataUrl}
+                    />
+                </Card.Row>
+            </Card>
+            <AccountCooldowns cooldowns={accountCooldowns} />
+            <Page.Footer>
+                <Button.Main
+                    className="m-t-10"
+                    label={t('status.buttonUpdate')}
+                    onClick={() => nav(absoluteRoutes.settings.earn.delegator.update.path)}
+                />
+                <Button.Main
+                    label={t('status.buttonStop')}
+                    // onClick={() => nav(absoluteRoutes.settings.earn.delegator.stop.path)}
+                />
+            </Page.Footer>
+        </Page>
+    );
+}

packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Validator/util.ts

@@ -0,0 +1,26 @@
+import { CcdAmount, OpenStatusText } from '@concordium/web-sdk';
+import { formatCcdAmount } from '@popup/popupX/shared/utils/helpers';
+import i18n from '@popup/shell/i18n';
+
+export function showValidatorAmount(amount: CcdAmount.Type): string {
+    return `${formatCcdAmount(amount)} CCD`;
+}
+
+export function showValidatorOpenStatus(status: OpenStatusText): string {
+    switch (status) {
+        case OpenStatusText.OpenForAll:
+            return i18n.t('x:earn.validator.values.openStatus.open');
+        case OpenStatusText.ClosedForAll:
+            return i18n.t('x:earn.validator.values.openStatus.closed');
+        case OpenStatusText.ClosedForNew:
+            return i18n.t('x:earn.validator.values.openStatus.closedNew');
+        default:
+            throw new Error('Unsupported status');
+    }
+}
+
+export function showRestake(value: boolean): string {
+    return value
+        ? i18n.t('x:earn.validator.values.restake.validation')
+        : i18n.t('x:earn.validator.values.restake.public');
+}