Merge pull request #538 from Concordium/ui-update/fix-compilation-errors

UI update/fix compilation errors

.github/workflows/build-lint-test.yml

@@ -3,9 +3,9 @@ name: Build, lint and test
 on:
     # Triggers the workflow on push or pull request events but only for the main branch and release branches
     push:
-        branches: [main, release**, feature/**]
+        branches: [main, release**, feature/**, browser-ui-update]
     pull_request:
-        branches: [main, release**, feature/**]
+        branches: [main, release**, feature/**, browser-ui-update]
 
     # Allows us to run the workflow manually from the Actions tab
     workflow_dispatch:

packages/browser-wallet/src/popup/pages/Account/TransactionLog/TransactionList.tsx

@@ -239,7 +239,7 @@ export default function TransactionList({ onTransactionClick }: TransactionListP
 
     async function loadTransactionsDescending(address: string, appendTransactions: boolean, fromId?: number) {
         setIsNextPageLoading(true);
-        return getTransactions(address, transactionResultLimit, 'descending', fromId)
+        return getTransactions(address, transactionResultLimit, 'descending', { from: fromId })
             .then((transactionResult) => {
                 setHasNextPage(transactionResult.full);
 

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

@@ -1,8 +1,16 @@
-type RoutePath = {
+export type RouteConfig = {
+    hideBackArrow?: boolean;
+    backTitle?: string;
+    hideMenu?: boolean;
+    hideConnection?: boolean;
+    showAccountSelector?: boolean;
+};
+export type RoutePath = {
     path: string;
+    config?: RouteConfig;
 };
-type RouteNode = RouteChildren & RoutePath;
-type RouteChildren = {
+export type RouteNode = RoutePath & RouteChildren;
+export type RouteChildren = {
     [key: string]: RouteNode | RoutePath;
 };
 

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.tsx

@@ -1,23 +1,18 @@
-import React, { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import React from 'react';
 
 import { Connection, Fullscreen, MenuButton, MenuTiles } from '@popup/popupX/page-layouts/MainLayout/Header/components';
 import clsx from 'clsx';
 import AccountSelector from './components/AccountSelector';
 
-export default function Header({
-    isScrolling,
-    hideMenu,
-    hideConnection,
-    menuOpen,
-    setMenuOpen,
-}: {
+type HeaderProps = {
     isScrolling: boolean;
     hideMenu: boolean;
     menuOpen: boolean;
     hideConnection: boolean;
     setMenuOpen: (open: boolean) => void;
-}) {
+};
+
+export default function Header({ isScrolling, hideMenu, hideConnection, menuOpen, setMenuOpen }: HeaderProps) {
     return (
         <div className={clsx('main-header', isScrolling && 'scroll-border')}>
             <div className="main-header__top">

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/AccountButton.tsx

@@ -5,6 +5,7 @@ import UpDown from '@assets/svgX/caret-up-down.svg';
 export default function AccountButton() {
     const [account, setAccount] = React.useState<boolean>(false);
     return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div className={clsx('header__account', account && 'active')} onClick={() => setAccount(!account)}>
             <span className="text__main_medium">Accout 1 / 6gk...k7o</span>
             <UpDown />

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/AccountSelector.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import FormInput from '@popup/popupX/shared/Form/Input';
 import CarretRight from '@assets/svgX/caret-right.svg';
-import Submit from '@popup/popupX/shared/Form/Submit';
 import Form from '@popup/popupX/shared/Form/Form';
 import EthLogo from '@assets/svgX/eth-logo.svg';
 import DnwLogo from '@assets/svgX/dnw-logo.svg';
@@ -11,7 +9,9 @@ import IconButton from '@popup/popupX/shared/IconButton';
 import ArrowsUpDown from '@assets/svgX/arrows-down-up.svg';
 import FormSearch from '@popup/popupX/shared/Form/Search';
 
-export default function AccountSelector({ showAccountSelector }) {
+type Props = { showAccountSelector: boolean };
+
+export default function AccountSelector({ showAccountSelector }: Props) {
     if (!showAccountSelector) return null;
     return (
         <div className="main-header__account-selector fade-menu-bg">
@@ -25,10 +25,10 @@ export default function AccountSelector({ showAccountSelector }) {
                         {(f) => {
                             return (
                                 <FormSearch
-                                    register={f.register}
+                                    control={f.control}
                                     name="network"
                                     autoFocus
-                                    value="https://whatevertheaddressIs.com"
+                                    defaultValue="https://whatevertheaddressIs.com"
                                 />
                             );
                         }}

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/Connection.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import Info from '@assets/svgX/info.svg';
 import Dot from '@assets/svgX/dot.svg';
 
-export default function Connection({ hideConnection }) {
+type Props = {
+    hideConnection: boolean;
+};
+
+export default function Connection({ hideConnection }: Props) {
     if (hideConnection) return null;
     return (
         <div className="main-header__connection">

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuButton.tsx

@@ -3,9 +3,15 @@ import DotsNine from '@assets/svgX/dots-nine.svg';
 import Close from '@assets/svgX/close.svg';
 import clsx from 'clsx';
 
+type Props = {
+    setMenuOpen: (open: boolean) => void;
+    menuOpen: boolean;
+    hideMenu: boolean;
+};
+
 const background = document.getElementsByClassName('bg').item(0);
 
-export default function MenuButton({ setMenuOpen, menuOpen, hideMenu }) {
+export default function MenuButton({ setMenuOpen, menuOpen, hideMenu }: Props) {
     useEffect(() => {
         if (menuOpen) {
             background?.classList.add('fade-bg');

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx

@@ -14,13 +14,23 @@ import { Link } from 'react-router-dom';
 import { relativeRoutes } from '@popup/popupX/constants/routes';
 import { useTranslation } from 'react-i18next';
 
-export default function MenuTiles({ menuOpen, setMenuOpen }) {
-    const { t } = useTranslation('x', { keyPrefix: 'header.menu' });
+type MenuTilesProps = {
+    menuOpen: boolean;
+    setMenuOpen: (open: boolean) => void;
+};
 
+export default function MenuTiles({ menuOpen, setMenuOpen }: MenuTilesProps) {
+    const { t } = useTranslation('x', { keyPrefix: 'header.menu' });
     if (!menuOpen) return null;
     return (
         <div className="main-header__menu-tiles fade-menu-bg">
-            <div className="main-header__menu-tiles_container" onClick={() => setMenuOpen(false)}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+            <div
+                role="button"
+                tabIndex={0}
+                className="main-header__menu-tiles_container"
+                onClick={() => setMenuOpen(false)}
+            >
                 <Link to={relativeRoutes.settings.idCards.path}>
                     <IconButton className="main-header__menu-tiles_tile wide">
                         <Identification />

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx

@@ -3,7 +3,12 @@ import { useNavigate } from 'react-router-dom';
 import ArrowsLeft from '@assets/svgX/arrow-left.svg';
 import clsx from 'clsx';
 
-export default function NavButton({ hideBackArrow, backTitle = 'to Main page' }) {
+type NavButtonProps = {
+    hideBackArrow: boolean;
+    backTitle?: string;
+};
+
+export default function NavButton({ hideBackArrow, backTitle = 'to Main page' }: NavButtonProps) {
     const nav = useNavigate();
     if (hideBackArrow) return null;
     return (

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/MainLayout.tsx

@@ -3,10 +3,15 @@ import { Outlet, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 import Header from '@popup/popupX/page-layouts/MainLayout/Header';
 import { AccountButton, NavButton } from '@popup/popupX/page-layouts/MainLayout/Header/components';
-import { relativeRoutes } from '@popup/popupX/constants/routes';
+import { relativeRoutes, RoutePath } from '@popup/popupX/constants/routes';
 
-function exctractByProps(obj, props) {
-    return props.reduce((acc, prop) => (typeof acc === 'object' && prop in acc ? acc[prop] : undefined), obj);
+function exctractByProps(obj: typeof relativeRoutes, props: string[]): RoutePath | undefined {
+    return props.reduce(
+        // FIXME: see if we can get rid of any here...
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (acc: any, prop) => (typeof acc === 'object' && prop in acc ? (acc[prop] as any) : undefined),
+        obj
+    );
 }
 
 const getPageConfig = () => {
@@ -20,14 +25,20 @@ export default function MainLayout() {
     const [scroll, setScroll] = React.useState(0);
     const isScrolling = useMemo(() => scroll > 0, [!!scroll]);
     const [menuOpen, setMenuOpen] = React.useState(false);
-    const { hideBackArrow, backTitle, hideMenu, hideConnection, showAccountSelector } = getPageConfig();
+    const {
+        hideBackArrow = false,
+        backTitle = '',
+        hideMenu = false,
+        hideConnection = false,
+        showAccountSelector,
+    } = getPageConfig();
     return (
         <div className="main-layout-x">
             <Header {...{ isScrolling, hideMenu, hideConnection, menuOpen, setMenuOpen }} />
             <main
                 className={clsx('main-layout-x__main')}
                 onScroll={(e) => {
-                    setScroll(e.target.scrollTop);
+                    setScroll(e.currentTarget.scrollTop);
                 }}
             >
                 <div className="float-section">

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import Plus from '@assets/svgX/plus.svg';
 import Arrows from '@assets/svgX/arrows-down-up.svg';
 import MagnifyingGlass from '@assets/svgX/magnifying-glass.svg';
 import Pencil from '@assets/svgX/pencil-simple.svg';
 import Copy from '@assets/svgX/copy.svg';
 import ArrowRight from '@assets/svgX/arrow-right.svg';
-import { relativeRoutes } from '@popup/popupX/constants/routes';
 import Page from '@popup/popupX/shared/Page';
 import Button from '@popup/popupX/shared/Button';
 import { useTranslation } from 'react-i18next';
@@ -36,8 +34,6 @@ const ACCOUNT_LIST = [
 
 export default function Accounts() {
     const { t } = useTranslation('x', { keyPrefix: 'accounts' });
-    const nav = useNavigate();
-    const navToConnect = () => nav(relativeRoutes.settings.accounts.connectedSites.path);
     return (
         <Page className="accounts-x">
             <Page.Top heading={t('accounts')}>

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

@@ -24,7 +24,7 @@ export default function OpenPool() {
                     You can also keep the pool closed, if you want only your own CCDs to be stalked.
                 </span>
             </div>
-            <Button className="button-main">Continue</Button>
+            <Button.Main label="Continue" />
         </div>
     );
 }

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

@@ -39,7 +39,7 @@ export default function RegisterBaker() {
                     balance at each pay day.
                 </span>
             </div>
-            <Button className="button-main">Continue</Button>
+            <Button.Main label="Continue" />
         </div>
     );
 }

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

@@ -48,7 +48,7 @@ export default function RegisterDelegator() {
                     I want to automatically add my baking rewards to my baker stake
                 </span>
             </div>
-            <Button className="button-main">Continue</Button>
+            <Button.Main label="Continue" />
         </div>
     );
 }

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import ExportIcon from '@assets/svgX/sign-out.svg';
 import Button from '@popup/popupX/shared/Button';
 
 export default function DelegationResult() {
@@ -29,7 +28,7 @@ export default function DelegationResult() {
                     </span>
                 </div>
             </div>
-            <Button className="button-main">Continue</Button>
+            <Button.Main label="Continue" />
         </div>
     );
 }

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

@@ -20,7 +20,7 @@ export default function DelegationType() {
                 passive delegation you do not have to worry about the uptime or quality of a baker node.
             </span>
             <span className="capture__main_small">For more info you can visit developer.concordium.software</span>
-            <Button className="button-main">Continue</Button>
+            <Button.Main label="Continue" />
         </div>
     );
 }

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

@@ -5,7 +5,7 @@ import Page from '@popup/popupX/shared/Page';
 import { useTranslation } from 'react-i18next';
 import IdCard from '@popup/popupX/shared/IdCard';
 
-const rowsIdInfo = [
+const rowsIdInfo: [string, string][] = [
     ['Identity document type', 'Drivers licence'],
     ['Identity document number', 'BXM680515'],
     ['First name', 'Lewis'],
@@ -15,7 +15,7 @@ const rowsIdInfo = [
     ['ID valid until', '30 October 2051'],
 ];
 
-const rowsConnectedAccounts = [
+const rowsConnectedAccounts: [string, string][] = [
     ['Accout 1 / 6gk...Fk7o', '4,227.38 USD'],
     ['Accout 2 / tt2...50eo', '1,195.41 USD'],
     ['Accout 3 / bnh...JJ76', '123.38 USD'],

packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.scss

@@ -74,7 +74,8 @@
                         border-radius: rem(8px);
                         background: $color-main-bg;
 
-                        svg, img {
+                        svg,
+                        img {
                             width: rem(20px);
                             height: rem(20px);
                         }

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

@@ -37,6 +37,7 @@ function formatBalance(balance: bigint, decimals: number = 0) {
     const integer = padded.slice(0, -decimals);
     const fraction = padded.slice(-decimals);
     const balanceFormatter = new Intl.NumberFormat(undefined, { minimumFractionDigits: decimals });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore format below supports strings, TypeScript is just not aware.
     return balanceFormatter.format(`${integer}.${fraction}`);
 }
@@ -46,7 +47,7 @@ type TokenBalanceProps = { decimals?: number; tokenId: string; contractAddress:
 function AccountTokenBalance({ decimals, tokenId, contractAddress, accountAddress }: TokenBalanceProps) {
     const balanceRaw = useAccountTokenBalance(accountAddress, contractAddress, tokenId) ?? 0n;
     const balance = useMemo(() => formatBalance(balanceRaw, decimals), [balanceRaw]);
-    return balance;
+    return <span>{balance}</span>;
 }
 
 /** Convert and display an amount of CCD to EUR using an exchange rate. */
@@ -109,7 +110,13 @@ function MainPage({ credential }: MainPageProps) {
             </div>
             <div className="main-page__tokens">
                 <div className="main-page__tokens-list">
-                    <div className="main-page__tokens-list_item" onClick={() => navToTokenDetails()}>
+                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+                    <div
+                        role="button"
+                        tabIndex={0}
+                        className="main-page__tokens-list_item"
+                        onClick={() => navToTokenDetails()}
+                    >
                         <div className="token-icon">
                             <ConcordiumLogo />
                         </div>
@@ -134,6 +141,7 @@ function MainPage({ credential }: MainPageProps) {
                         </div>
                     </div>
                     {tokens.map((token) => (
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
                         <div
                             className="main-page__tokens-list_item"
                             onClick={() => navToTokenDetails()}