Move routes to top level router spec

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

@@ -173,6 +173,9 @@ export const relativeRoutes = {
                 /** Configure new delegator */
                 register: {
                     path: 'register',
+                    configure: {
+                        path: 'configure',
+                    },
                 },
                 /** Configure existing delegator */
                 update: {

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

@@ -28,10 +28,10 @@ import {
     getDefaultExpiry,
     getTransactionAmount,
     sendTransaction,
+    useGetTransactionFee,
 } from '@popup/shared/utils/transaction-helpers';
 import { addPendingTransactionAtom } from '@popup/store/transactions';
 import { cpStakingCooldown } from '@shared/utils/chain-parameters-helpers';
-import { useGetTransactionFee } from '@popup/popupX/shared/utils/transaction-helpers';
 import { submittedTransactionRoute } from '@popup/popupX/constants/routes';
 import Text from '@popup/popupX/shared/Text';
 

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

@@ -15,8 +15,8 @@ import { displayNameAndSplitAddress, useSelectedCredential } from '@popup/shared
 import { formatTokenAmount } from '@popup/popupX/shared/utils/helpers';
 import { CCD_METADATA } from '@shared/constants/token-metadata';
 import { grpcClientAtom } from '@popup/store/settings';
-import { useGetTransactionFee } from '@popup/popupX/shared/utils/transaction-helpers';
 import Text from '@popup/popupX/shared/Text';
+import { useGetTransactionFee } from '@popup/shared/utils/transaction-helpers';
 
 import { DelegationTypeForm, DelegatorStakeForm, configureDelegatorPayloadFromForm } from '../util';
 
@@ -78,12 +78,11 @@ export default function DelegatorStake({ title, target, initialValues, onSubmit
     const submit = form.handleSubmit(onSubmit);
     const selectedCred = useSelectedCredential();
     const selectedAccountInfo = useAccountInfo(selectedCred);
-    const { amount, redelegate } = form.watch();
     const getCost = useGetTransactionFee(AccountTransactionType.ConfigureDelegation);
-    const fee = useMemo(() => {
-        const payload = configureDelegatorPayloadFromForm({ target, stake: { amount, redelegate } });
-        return getCost(payload);
-    }, [target, amount, redelegate, getCost]);
+    const fee = useMemo(
+        () => getCost(configureDelegatorPayloadFromForm({ target, stake: { amount: '0', redelegate: true } })), // Use dummy values, as it does not matter when calculating transaction cost
+        [target, getCost]
+    );
 
     if (selectedAccountInfo === undefined || selectedCred === undefined || fee === undefined) {
         return null;
@@ -92,9 +91,9 @@ export default function DelegatorStake({ title, target, initialValues, onSubmit
     return (
         <Page className="register-delegator-container">
             <Page.Top heading={title} />
-            <span className="capture__main_small m-l-5 m-t-neg-5">
+            <Text.Capture className="m-l-5 m-t-neg-5">
                 {t('selectedAccount', { account: displayNameAndSplitAddress(selectedCred) })}
-            </span>
+            </Text.Capture>
             <Form formMethods={form} onSubmit={onSubmit}>
                 {(f) => (
                     <>

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

@@ -9,7 +9,7 @@ import DelegatorType from '../Type';
 import { configureDelegatorPayloadFromForm, type DelegatorForm } from '../util';
 import { DelegationResultLocationState } from '../Result/DelegationResult';
 
-export default function TransactionFlow() {
+export default function DelegatorTransactionFlow() {
     const { state: initialValues, pathname } = useLocation() as Location & { state: DelegatorForm | undefined };
     const nav = useNavigate();
     const { t } = useTranslation('x', { keyPrefix: 'earn.delegator.register' });

packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx

@@ -165,11 +165,11 @@ function TokenPicker({
                 {canSelect && <SideArrow />}
             </label>
             {selectedTokenBalance !== undefined && (
-                <Text.CaptureAdditional>
+                <span className="text__additional_small">
                     {t('form.tokenAmount.token.available', {
                         balance: formatAmount(selectedTokenBalance),
                     })}
-                </Text.CaptureAdditional>
+                </span>
             )}
         </div>
     );

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

@@ -28,9 +28,10 @@ import { RestoreIntro, RestoreResult } from '@popup/popupX/pages/Restore';
 import { MessagePromptHandlersType } from '@popup/shared/utils/message-prompt-handlers';
 import ConnectionRequest from '@popup/popupX/pages/prompts/ConnectionRequest';
 import ExternalRequestLayout from '@popup/popupX/page-layouts/ExternalRequestLayout';
-import RegisterDelegator from '../pages/EarningRewards/Delegator/RegisterDelegator';
 import { DelegationResult } from '../pages/EarningRewards/Delegator/Result';
 import SubmittedTransaction from '../pages/SubmittedTransaction';
+import { DelegatorIntro } from '../pages/EarningRewards/Delegator/Intro';
+import DelegatorTransactionFlow from '../pages/EarningRewards/Delegator/TransactionFlow';
 
 export default function Routes({ messagePromptHandlers }: { messagePromptHandlers: MessagePromptHandlersType }) {
     const { handleConnectionResponse } = messagePromptHandlers;
@@ -104,12 +105,22 @@ export default function Routes({ messagePromptHandlers }: { messagePromptHandler
                             <Route element={<BakerKeys />} path={relativeRoutes.settings.earn.validator.keys.path} />
                         </Route>
                         <Route path={relativeRoutes.settings.earn.delegator.path}>
+                            <Route path={`${relativeRoutes.settings.earn.delegator.register.path}`}>
+                                <Route
+                                    index
+                                    element={
+                                        <DelegatorIntro
+                                            onDoneRoute={relativeRoutes.settings.earn.delegator.register.configure.path}
+                                        />
+                                    }
+                                />
+                                <Route
+                                    path={`${relativeRoutes.settings.earn.delegator.register.configure.path}/*`}
+                                    element={<DelegatorTransactionFlow />}
+                                />
+                            </Route>
                             <Route
-                                element={<RegisterDelegator />}
-                                path={`${relativeRoutes.settings.earn.delegator.register.path}/*`}
-                            />
-                            <Route
-                                element={<RegisterDelegator />} // FIXME: change to update flow
+                                element={<DelegatorTransactionFlow />}
                                 path={`${relativeRoutes.settings.earn.delegator.update.path}/*`}
                             />
                             <Route

packages/browser-wallet/src/popup/shared/MultiStepForm.tsx

@@ -92,6 +92,7 @@ export type MultiStepFormProps<F extends Record<string, unknown>> =
 
 /**
  * A component for spanning forms over multiple pages. This component doesn't render any UI, but merely handles collecting data from the different steps and routing between the steps.
+ * The component uses the application router to go through a number of pages. As such it needs to be used in combination with a catch-all route, as seen in the example.
  *
  * @template F Type of the form as a whole. Each step in the form flow should correspond to a member on the type.
  * @component
@@ -101,12 +102,16 @@ export type MultiStepFormProps<F extends Record<string, unknown>> =
  *   second: { c: boolean; };
  * };
  *
- * <MultiStepForm<Values>>
+ * const Flow = () => <MultiStepForm<Values>>
  *   {{
  *     first: { render: (initialValues, onNext) => <First initialValues={initialValues} onSubmit={onNext} /> },
  *     second: { render: (initialValues, onNext) => <Second initialValues={initialValues} onSubmit={onNext} /> },
  *   }}
  * </MultiStepForm>
+ *
+ * <Routes>
+ *   <Route path="path/to/flow/*" element={<Flow />} />
+ * </Routes>
  */
 export default function MultiStepForm<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/browser-wallet/src/popup/shared/utils/transaction-helpers.ts

@@ -18,6 +18,9 @@ import {
     UpdateContractPayload,
     SimpleTransferWithMemoPayload,
     AccountInfoType,
+    ConfigureDelegationPayload,
+    getEnergyCost,
+    convertEnergyToMicroCcd,
 } from '@concordium/web-sdk';
 import {
     isValidResolutionString,
@@ -33,6 +36,8 @@ import { useAtomValue } from 'jotai';
 import { selectedPendingTransactionsAtom } from '@popup/store/transactions';
 import { DEFAULT_TRANSACTION_EXPIRY } from '@shared/constants/time';
 import { BrowserWalletAccountTransaction, TransactionStatus } from './transaction-history-types';
+import { useBlockChainParameters } from '../BlockChainParametersProvider';
+import { useCallback } from 'react';
 
 export function buildSimpleTransferPayload(recipient: string, amount: bigint): SimpleTransferPayload {
     return {
@@ -247,3 +252,18 @@ export function getTransactionAmount(type: AccountTransactionType, payload: Acco
             return 0n;
     }
 }
+/** Hook which exposes a function for getting the transaction fee for a given transaction type */
+export function useGetTransactionFee(type: AccountTransactionType) {
+    const cp = useBlockChainParameters();
+
+    return useCallback(
+        (payload: ConfigureDelegationPayload) => {
+            if (cp === undefined) {
+                return undefined;
+            }
+            const energy = getEnergyCost(type, payload);
+            return convertEnergyToMicroCcd(energy, cp);
+        },
+        [cp, type]
+    );
+}