UI update/delegation transaction

packages/browser-wallet/package.json

@@ -10,6 +10,7 @@
         "build:dev": "cross-env NODE_ENV=development yarn build-base",
         "build:prod": "cross-env NODE_ENV=production yarn build-base",
         "build": "yarn build:prod",
+        "check": "tsc --noEmit",
         "test": "jest",
         "watch": "cross-env WATCH=1 yarn build:dev",
         "storybook": "storybook dev -p 6006",

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

@@ -1,3 +1,6 @@
+import { AccountAddress, TransactionHash } from '@concordium/web-sdk';
+import { generatePath } from 'react-router-dom';
+
 export type RouteConfig = {
     hideBackArrow?: boolean;
     backTitle?: string;
@@ -69,12 +72,6 @@ export const relativeRoutes = {
                 config: {
                     backTitle: 'to Send Funds form',
                 },
-                confirmed: {
-                    path: 'confirmed',
-                    config: {
-                        hideBackArrow: true,
-                    },
-                },
             },
         },
         receive: {
@@ -92,6 +89,12 @@ export const relativeRoutes = {
         token: {
             path: 'token',
         },
+        submittedTransaction: {
+            path: 'submitted/:transactionHash',
+            config: {
+                hideBackArrow: true,
+            },
+        },
     },
     settings: {
         path: 'settings',
@@ -146,9 +149,11 @@ export const relativeRoutes = {
                 },
             },
         },
+        /** Routes related to staking for the currently selected account */
         earn: {
             path: 'earn',
-            baker: {
+            /** Validation related routes */
+            validator: {
                 path: 'baker',
                 intro: {
                     path: 'intro',
@@ -159,23 +164,27 @@ export const relativeRoutes = {
                 openPool: {
                     path: 'openPool',
                 },
-                bakerKeys: {
-                    path: 'bakerKeys',
+                keys: {
+                    path: 'keys',
                 },
             },
+            /** Delegation related routes */
             delegator: {
                 path: 'delegator',
-                intro: {
-                    path: 'intro',
-                },
-                type: {
-                    path: 'type',
-                },
+                /** Configure new delegator */
                 register: {
                     path: 'register',
+                    configure: {
+                        path: 'configure',
+                    },
                 },
-                result: {
-                    path: 'result',
+                /** Configure existing delegator */
+                update: {
+                    path: 'update',
+                },
+                /** Submit configure delegator transaction */
+                submit: {
+                    path: 'submit',
                 },
             },
         },
@@ -219,6 +228,15 @@ const buildAbsoluteRoutes = <R extends RouteNode | RoutePath | RouteChildren>(
 
 export const absoluteRoutes = buildAbsoluteRoutes(relativeRoutes);
 
+export const transactionDetailsRoute = (account: AccountAddress.Type, tx: TransactionHash.Type) =>
+    generatePath(absoluteRoutes.home.transactionLog.details.path, {
+        account: account.address,
+        transactionHash: TransactionHash.toHexString(tx),
+    });
+
+export const submittedTransactionRoute = (tx: TransactionHash.Type) =>
+    generatePath(absoluteRoutes.home.submittedTransaction.path, { transactionHash: TransactionHash.toHexString(tx) });
+
 /**
  * Given two absolute routes, returns the relative route between them.
  * Note: fromPath should be a prefix of toPath.

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

@@ -3,26 +3,27 @@ import Carousel from '@popup/popupX/shared/Carousel';
 import { absoluteRoutes } from '@popup/popupX/constants/routes';
 import { useNavigate } from 'react-router-dom';
 import Page from '@popup/popupX/shared/Page';
+import Text from '@popup/popupX/shared/Text';
 import { Trans, useTranslation } from 'react-i18next';
 
 export default function BakerIntro() {
     const nav = useNavigate();
     const { t } = useTranslation('x', { keyPrefix: 'earn.validator.intro' });
     return (
         <Page className="baker-intro-container">
-            <Carousel onDone={() => nav(absoluteRoutes.settings.earn.baker.register.path)}>
-                <span className="capture__main_small">
+            <Carousel onDone={() => nav(absoluteRoutes.settings.earn.validator.register.path)}>
+                <Text.Capture>
                     <Page.Top heading={t('1.title')} />
                     <Trans t={t} i18nKey="1.body" />
-                </span>
-                <span className="capture__main_small">
+                </Text.Capture>
+                <Text.Capture>
                     <Page.Top heading={t('2.title')} />
                     <Trans t={t} i18nKey="2.body" />
-                </span>
-                <span className="capture__main_small">
+                </Text.Capture>
+                <Text.Capture>
                     <Page.Top heading={t('3.title')} />
                     <Trans t={t} i18nKey="3.body" />
-                </span>
+                </Text.Capture>
             </Carousel>
         </Page>
     );

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

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

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

@@ -1,56 +1,11 @@
 .delegation-result-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-bottom: rem(32px);
-
     .capture__main_small {
         color: $color-white;
         word-wrap: break-word;
     }
 
     .delegation-result {
-        &__title {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            margin-bottom: rem(12px);
-
-            .capture__main_small {
-                color: $color-mineral-2;
-                padding-left: rem(6px);
-            }
-        }
-
         &__card {
-            display: flex;
-            flex-direction: column;
-            border-radius: rem(12px);
-            padding: rem(16px);
-            margin-top: rem(16px);
-            background-color: rgba($color-grey-3, 0.3);
-
-            &_row:not(:last-child) {
-                padding-bottom: rem(8px);
-                margin-bottom: rem(8px);
-                border-bottom: 1px solid $color-grey-3;
-            }
-
-            &_row {
-                display: flex;
-                flex-direction: column;
-
-                .capture__main_small:first-child {
-                    color: rgba($color-mineral-3, 0.5);
-                    margin-bottom: rem(6px);
-                }
-            }
-        }
-
-        &__export {
-            display: flex;
-            align-items: center;
-            gap: rem(8px);
             margin-top: rem(16px);
         }
     }