Merge pull request #559 from Concordium/ui-update/remove-delegation

UI update/remove delegation

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

@@ -200,10 +200,6 @@ export const relativeRoutes = {
                 update: {
                     path: 'update',
                 },
-                /** Remove existing delegator */
-                stop: {
-                    path: 'stop',
-                },
                 /** Submit configure delegator transaction */
                 submit: {
                     path: 'submit',

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import {
     AccountAddress,
+    AccountInfoDelegator,
     AccountTransactionPayload,
     AccountTransactionType,
     CcdAmount,
@@ -34,6 +35,7 @@ import { addPendingTransactionAtom } from '@popup/store/transactions';
 import { cpStakingCooldown } from '@shared/utils/chain-parameters-helpers';
 import { submittedTransactionRoute } from '@popup/popupX/constants/routes';
 import Text from '@popup/popupX/shared/Text';
+import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
 
 enum TransactionSubmitErrorType {
     InsufficientFunds = 'InsufficientFunds',
@@ -96,11 +98,11 @@ export default function DelegationResult() {
     const nav = useNavigate();
     const { t } = useTranslation('x', { keyPrefix: 'earn.delegator' });
     const getCost = useGetTransactionFee(AccountTransactionType.ConfigureDelegation);
-    const account = ensureDefined(useAtomValue(selectedAccountAtom), 'No account selected');
+    const accountInfo = ensureDefined(useSelectedAccountInfo(), 'No account selected');
 
     const parametersV1 = useBlockChainParametersAboveV0();
     const submitTransaction = useTransactionSubmit(
-        AccountAddress.fromBase58(account),
+        accountInfo.accountAddress,
         AccountTransactionType.ConfigureDelegation
     );
 
@@ -112,19 +114,26 @@ export default function DelegationResult() {
         return secondsToDaysRoundedDown(cooldownParam);
     }, [parametersV1]);
 
-    const title = useMemo(() => {
+    const [title, notice] = useMemo(() => {
         switch (state?.type) {
             case 'register':
-                return t('register.title');
+                return [t('register.title'), t('register.notice', { cooldown })];
             case 'change':
-                return t('update.title');
-            // case 'remove':
-            //    return t('remove.title');
+                if (
+                    state.payload.stake === undefined ||
+                    state.payload.stake.microCcdAmount >=
+                        (accountInfo as AccountInfoDelegator).accountDelegation.stakedAmount.microCcdAmount
+                ) {
+                    // Staked amount is not lowered
+                    return [t('update.title')];
+                }
+                return [t('update.title'), t('update.lowerStakeNotice', { cooldown })];
+            case 'remove':
+                return [t('remove.title'), t('remove.notice', { cooldown })];
             default:
-                return undefined;
+                throw new Error("'type' must be defined on route state");
         }
-    }, [state, t]);
-    const notice = t('register.notice', { cooldown }); // TODO: add more cases when supporting change/remove
+    }, [state, t, cooldown]);
 
     if (state === undefined) {
         return <Navigate to=".." />;
@@ -142,10 +151,10 @@ export default function DelegationResult() {
     return (
         <Page className="delegation-result-container">
             <Page.Top heading={title} />
-            <Text.Capture>{notice}</Text.Capture>
+            {notice !== undefined && <Text.Capture>{notice}</Text.Capture>}
             <Card className="delegation-result__card">
                 <Card.Row>
-                    <Card.RowDetails title={t('submit.sender.label')} value={account} />
+                    <Card.RowDetails title={t('submit.sender.label')} value={accountInfo.accountAddress.address} />
                 </Card.Row>
                 {state.payload.delegationTarget !== undefined && (
                     <Card.Row>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AccountInfoType, DelegationTargetType } from '@concordium/web-sdk';
+import { AccountInfoType, CcdAmount, DelegationTargetType } 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';
@@ -9,6 +9,12 @@ import { formatCcdAmount } from '@popup/popupX/shared/utils/helpers';
 import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
 import { Navigate, useNavigate } from 'react-router-dom';
 import AccountCooldowns from '../AccountCooldowns';
+import { DelegationResultLocationState } from './Result/DelegationResult';
+
+const REMOVE_STATE: DelegationResultLocationState = {
+    type: 'remove',
+    payload: { stake: CcdAmount.zero() },
+};
 
 export default function DelegatorStatus() {
     const { t } = useTranslation('x', { keyPrefix: 'earn.delegator' });
@@ -63,7 +69,7 @@ export default function DelegatorStatus() {
                 />
                 <Button.Main
                     label={t('status.buttonStop')}
-                    onClick={() => nav(absoluteRoutes.settings.earn.delegator.stop.path)}
+                    onClick={() => nav(absoluteRoutes.settings.earn.delegator.submit.path, { state: REMOVE_STATE })}
                 />
             </Page.Footer>
         </Page>

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

@@ -76,6 +76,12 @@ const t = {
                 description: 'The proposed transaction contains no changes compared to the current delegation.',
                 buttonBack: 'Go back',
             },
+            lowerStakeNotice:
+                'Reducing your stake is subject to a cooldown period of {{cooldown}} days, in which the stake cannot be spent or transferred.',
+        },
+        remove: {
+            title: 'Remove delegation',
+            notice: 'The delegated stake is released after {{cooldown}} days',
         },
         target: {
             description: 'You can delegate to an open pool of your choice, or you can stake using passive delegation.',

packages/browser-wallet/src/popup/popupX/shell/Routes.tsx

@@ -133,7 +133,6 @@ export default function Routes({ messagePromptHandlers }: { messagePromptHandler
                                 element={<UpdateDelegatorTransactionFlow />}
                                 path={`${relativeRoutes.settings.earn.delegator.update.path}/*`}
                             />
-                            <Route element={<>TODO</>} path={`${relativeRoutes.settings.earn.delegator.stop.path}`} />
                             <Route
                                 element={<DelegationResult />}
                                 path={relativeRoutes.settings.earn.delegator.submit.path}

packages/browser-wallet/src/shared/utils/time-helpers.ts

@@ -1,7 +1,7 @@
 import { MILLISECONDS_PER_DAY, MILLISECONDS_PER_HOUR, MILLISECONDS_PER_MINUTE } from '@popup/constants/time';
 
 export function secondsToDaysRoundedDown(seconds: bigint | undefined): bigint {
-    return seconds ? seconds / (60n * 60n * 24n) : 0n;
+    return seconds !== undefined ? seconds / (60n * 60n * 24n) : 0n;
 }
 
 type TimeAndUnit = { time: bigint; unit: string };