Show notice when no changes are found

Concordium · Oct 29, 2024 · 54a882a · 54a882a
1 parent 40048e8
commit 54a882a
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 39 deletions.
diff --git a/...s/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Stake/DelegatorStake.tsx b/...s/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/Stake/DelegatorStake.tsx
@@ -26,7 +26,7 @@ import { useGetTransactionFee } from '@popup/shared/utils/transaction-helpers';
 import FullscreenNotice, { FullscreenNoticeProps } from '@popup/popupX/shared/FullscreenNotice';
 
 import { DelegationTypeForm, DelegatorForm, DelegatorStakeForm, configureDelegatorPayloadFromForm } from '../util';
-import {isAboveStakeWarningThreshold} from '../../util';
+import { STAKE_WARNING_THRESHOLD, isAboveStakeWarningThreshold } from '../../util';
 
 type PoolInfoProps = {
     /** The validator pool ID to show information for */
@@ -72,15 +72,16 @@ type HighStakeNoticeProps = FullscreenNoticeProps & {
     onContinue(): void;
 };
 
-function HighStakeNotice({ onContinue, ...props }: HighStakeNoticeProps) {
+function HighStakeWarning({ onContinue, ...props }: HighStakeNoticeProps) {
+    const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.stake.overStakeThresholdWarning' });
     return (
         <FullscreenNotice {...props}>
             <Page>
-                <Page.Top heading="Title" />
-                Notice text...
+                <Page.Top heading={t('title')} />
+                {t('description', { threshold: STAKE_WARNING_THRESHOLD.toString() })}
                 <Page.Footer>
-                    <Button.Main label="Continue" onClick={onContinue} />
-                    <Button.Main label="Enter new stake" onClick={props.onClose} />
+                    <Button.Main label={t('buttonContinue')} onClick={onContinue} />
+                    <Button.Main label={t('buttonBack')} onClick={props.onClose} />
                 </Page.Footer>
             </Page>
         </FullscreenNotice>
@@ -171,7 +172,7 @@ export default function DelegatorStake({ title, target, initialValues, existingV
 
     return (
         <>
-            <HighStakeNotice open={highStakeWarning} onClose={() => setHighStakeWarning(false)} onContinue={submit} />
+            <HighStakeWarning open={highStakeWarning} onClose={() => setHighStakeWarning(false)} onContinue={submit} />
             <Page className="register-delegator-container">
                 <Page.Top heading={title} />
                 <Text.Capture className="m-l-5 m-t-neg-5">

diff --git a/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/TransactionFlow.tsx b/packages/browser-wallet/src/popup/popupX/pages/EarningRewards/Delegator/TransactionFlow.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { useCallback, useState } from 'react';
 import { Location, Navigate, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -7,19 +8,38 @@ import { absoluteRoutes } from '@popup/popupX/constants/routes';
 import MultiStepForm from '@popup/shared/MultiStepForm';
 import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
 import { formatCcdAmount } from '@popup/popupX/shared/utils/helpers';
+import FullscreenNotice, { FullscreenNoticeProps } from '@popup/popupX/shared/FullscreenNotice';
+import Page from '@popup/popupX/shared/Page';
+import Button from '@popup/popupX/shared/Button';
 import DelegatorStake from './Stake';
 import DelegatorType from './Type';
 import { configureDelegatorPayloadFromForm, type DelegatorForm } from './util';
 import { DelegationResultLocationState } from './Result/DelegationResult';
 
+function NoChangesNotice(props: FullscreenNoticeProps) {
+    const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.update.noChangesNotice' });
+    return (
+        <FullscreenNotice {...props}>
+            <Page>
+                <Page.Top heading={t('title')} />
+                {t('description')}
+                <Page.Footer>
+                    <Button.Main label={t('buttonBack')} onClick={props.onClose} />
+                </Page.Footer>
+            </Page>
+        </FullscreenNotice>
+    );
+}
+
 type Props = {
+    title: string;
     existingValues?: DelegatorForm | undefined;
 };
 
-export default function DelegatorTransactionFlow({ existingValues }: Props) {
+function DelegatorTransactionFlow({ existingValues, title }: Props) {
     const { state, pathname } = useLocation() as Location & { state: DelegatorForm | undefined };
-    const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.register' });
     const nav = useNavigate();
+    const [noChangesNotice, setNoChangesNotice] = useState(false);
 
     const initialValues = state ?? existingValues;
     const store = useState<Partial<DelegatorForm>>(initialValues ?? {});
@@ -28,45 +48,59 @@ export default function DelegatorTransactionFlow({ existingValues }: Props) {
         (form: DelegatorForm) => {
             const payload = configureDelegatorPayloadFromForm(form, existingValues);
 
+            if (Object.values(payload).every((v) => v === undefined)) {
+                setNoChangesNotice(true);
+                return;
+            }
+
             nav(pathname, { replace: true, state: form }); // Override current router entry with stateful version
 
             const submitDelegatorState: DelegationResultLocationState = { payload, type: 'register' };
             nav(absoluteRoutes.settings.earn.delegator.submit.path, { state: submitDelegatorState });
         },
-        [pathname, existingValues]
+        [pathname, existingValues, setNoChangesNotice]
     );
 
     return (
-        <MultiStepForm<DelegatorForm> onDone={handleDone} valueStore={store}>
-            {{
-                target: {
-                    render: (initial, onNext) => (
-                        <DelegatorType initialValues={initial} onSubmit={onNext} title={t('title')} />
-                    ),
-                },
-                stake: {
-                    render: (initial, onNext, form) => {
-                        if (form.target === undefined) {
-                            return <Navigate to=".." />;
-                        }
-
-                        return (
-                            <DelegatorStake
-                                title={t('title')}
-                                target={form.target}
-                                onSubmit={onNext}
-                                initialValues={initial}
-                                existingValues={existingValues}
-                            />
-                        );
+        <>
+            <NoChangesNotice open={noChangesNotice} onClose={() => setNoChangesNotice(false)} />
+            <MultiStepForm<DelegatorForm> onDone={handleDone} valueStore={store}>
+                {{
+                    target: {
+                        render: (initial, onNext) => (
+                            <DelegatorType initialValues={initial} onSubmit={onNext} title={title} />
+                        ),
                     },
-                },
-            }}
-        </MultiStepForm>
+                    stake: {
+                        render: (initial, onNext, form) => {
+                            if (form.target === undefined) {
+                                return <Navigate to=".." />;
+                            }
+
+                            return (
+                                <DelegatorStake
+                                    title={title}
+                                    target={form.target}
+                                    onSubmit={onNext}
+                                    initialValues={initial}
+                                    existingValues={existingValues}
+                                />
+                            );
+                        },
+                    },
+                }}
+            </MultiStepForm>
+        </>
     );
 }
 
+export function RegisterDelegatorTransactionFlow() {
+    const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.register' });
+    return <DelegatorTransactionFlow title={t('title')} />;
+}
+
 export function UpdateDelegatorTransactionFlow() {
+    const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.update' });
     const accountInfo = useSelectedAccountInfo();
 
     if (accountInfo === undefined || accountInfo.type !== AccountInfoType.Delegator) {
@@ -87,5 +121,5 @@ export function UpdateDelegatorTransactionFlow() {
                 : { type: DelegationTargetType.Baker, bakerId: delegationTarget.bakerId.toString() },
     };
 
-    return <DelegatorTransactionFlow existingValues={values} />;
+    return <DelegatorTransactionFlow existingValues={values} title={t('title')} />;
 }
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
@@ -69,7 +69,14 @@ const t = {
             backTitle: 'Earning rewards',
             notice: 'This will lock your delegation amount. Amount is released after {{cooldown}} days from the time you remove or decrease your delegation.',
         },
-        update: { title: 'Update delegation' },
+        update: {
+            title: 'Update delegation',
+            noChangesNotice: {
+                title: 'No changes',
+                description: 'The proposed transaction contains no changes compared to the current delegation.',
+                buttonBack: 'Go back',
+            },
+        },
         target: {
             description: 'You can delegate to an open pool of your choice, or you can stake using passive delegation.',
             radioValidatorLabel: 'Validator',
@@ -115,6 +122,13 @@ const t = {
                 description: 'I want to automatically add my delegation rewards to my delegation amount.',
             },
             buttonContinue: 'Continue',
+            overStakeThresholdWarning: {
+                title: 'Important',
+                description:
+                    'You are about to lock more than {{ threshold }}% of your total balance in a delegation stake.\n\nIf you don’t have enough unlocked CCD at your disposal, you might not be able to pay future transaction fees.',
+                buttonContinue: 'Continue',
+                buttonBack: 'Enter new stake',
+            },
         },
         submit: {
             backTitle: 'Delegation settings',

diff --git a/packages/browser-wallet/src/popup/popupX/shell/Routes.tsx b/packages/browser-wallet/src/popup/popupX/shell/Routes.tsx
@@ -32,7 +32,10 @@ import { ManageTokenList, AddToken } from '@popup/popupX/pages/ManageTokens';
 import { DelegationResult } from '../pages/EarningRewards/Delegator/Result';
 import SubmittedTransaction from '../pages/SubmittedTransaction';
 import { DelegatorIntro } from '../pages/EarningRewards/Delegator/Intro';
-import DelegatorTransactionFlow, { UpdateDelegatorTransactionFlow } from '../pages/EarningRewards/Delegator/TransactionFlow';
+import {
+    RegisterDelegatorTransactionFlow,
+    UpdateDelegatorTransactionFlow,
+} from '../pages/EarningRewards/Delegator/TransactionFlow';
 import DelegatorStatus from '../pages/EarningRewards/Delegator/Status';
 
 export default function Routes({ messagePromptHandlers }: { messagePromptHandlers: MessagePromptHandlersType }) {
@@ -123,7 +126,7 @@ export default function Routes({ messagePromptHandlers }: { messagePromptHandler
                                 />
                                 <Route
                                     path={`${relativeRoutes.settings.earn.delegator.register.configure.path}/*`}
-                                    element={<DelegatorTransactionFlow />}
+                                    element={<RegisterDelegatorTransactionFlow />}
                                 />
                             </Route>
                             <Route

diff --git a/packages/browser-wallet/src/popup/styles/elements/_base.scss b/packages/browser-wallet/src/popup/styles/elements/_base.scss
@@ -89,6 +89,9 @@ body {
 
 #root {
     height: 100%;
+}
+
+:is(:not(.popup-x)) #root {
     @include transition(filter);
 
     .modal-open & {