Merge branch 'refs/heads/browser-ui-update' into feature/ui-update-va…

…lidation-delegation

# Conflicts:
#	packages/browser-wallet/src/popup/shell/i18n/locales/en.ts

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

@@ -90,6 +90,9 @@ export const relativeRoutes = {
         idCards: {
             path: 'idCards',
         },
+        about: {
+            path: 'about',
+        },
         accounts: {
             path: 'accounts',
             connectedSites: {
@@ -113,6 +116,9 @@ export const relativeRoutes = {
         },
         web3Id: {
             path: 'web3Id',
+            import: {
+                path: 'import',
+            },
         },
         network: {
             path: 'network',

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

@@ -12,64 +12,67 @@ import IconButton from '@popup/shared/IconButton';
 import Text from '@popup/popupX/shared/Text';
 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' });
+
     if (!menuOpen) return null;
     return (
         <div className="main-header__menu-tiles fade-menu-bg">
             <div className="main-header__menu-tiles_container" onClick={() => setMenuOpen(false)}>
                 <Link to={relativeRoutes.settings.idCards.path}>
                     <IconButton className="main-header__menu-tiles_tile wide">
                         <Identification />
-                        <Text.Capture>Identities</Text.Capture>
+                        <Text.Capture>{t('identities')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to={relativeRoutes.settings.accounts.path}>
                     <IconButton className="main-header__menu-tiles_tile wide">
                         <Browsers />
-                        <Text.Capture>Accounts</Text.Capture>
+                        <Text.Capture>{t('accounts')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to={relativeRoutes.settings.seedPhrase.path}>
                     <IconButton className="main-header__menu-tiles_tile">
                         <TextColumns />
-                        <Text.Capture>Seed phrase</Text.Capture>
+                        <Text.Capture>{t('seedPhrase')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to="/">
                     <IconButton className="main-header__menu-tiles_tile">
                         <Password />
-                        <Text.Capture>Passcode</Text.Capture>
+                        <Text.Capture>{t('passcode')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to={relativeRoutes.settings.web3Id.path}>
                     <IconButton className="main-header__menu-tiles_tile">
                         <WebId />
-                        <Text.Capture>Web3 ID</Text.Capture>
+                        <Text.Capture>{t('web3Id')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to="/">
                     <IconButton className="main-header__menu-tiles_tile">
                         <Plant />
-                        <Text.Capture>Earn</Text.Capture>
+                        <Text.Capture>{t('earn')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to={relativeRoutes.settings.network.path}>
                     <IconButton className="main-header__menu-tiles_tile">
                         <LinkSimple />
-                        <Text.Capture>Network</Text.Capture>
+                        <Text.Capture>{t('network')}</Text.Capture>
                     </IconButton>
                 </Link>
-                <Link to="/">
+                <Link to={relativeRoutes.settings.about.path}>
                     <IconButton className="main-header__menu-tiles_tile">
                         <Info />
-                        <Text.Capture>About</Text.Capture>
+                        <Text.Capture>{t('about')}</Text.Capture>
                     </IconButton>
                 </Link>
                 <Link to="/">
                     <IconButton className="main-header__menu-tiles_tile">
                         <Restore />
-                        <Text.Capture>Restore</Text.Capture>
+                        <Text.Capture>{t('restore')}</Text.Capture>
                     </IconButton>
                 </Link>
             </div>

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/da.ts

@@ -0,0 +1,5 @@
+import type en from './en';
+
+const t: typeof en = {};
+
+export default t;

packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/i18n/en.ts

@@ -0,0 +1,15 @@
+const t = {
+    menu: {
+        identities: 'Identities',
+        accounts: 'Accounts',
+        seedPhrase: 'Seed phrase',
+        passcode: 'Passcode',
+        web3Id: 'Web3 ID',
+        earn: 'Earn',
+        network: 'Network',
+        about: 'About',
+        restore: 'Restore',
+    },
+};
+
+export default t;

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

@@ -0,0 +1,22 @@
+.about-x {
+    .page__main {
+        .card-x .row {
+            justify-content: space-between;
+        }
+
+        .text__main_medium {
+            color: $color-white;
+        }
+
+        .heading_medium {
+            margin-top: rem(24px);
+            margin-bottom: rem(8px);
+        }
+    }
+
+    .page__footer {
+        .capture__main_small {
+            text-align: center;
+        }
+    }
+}

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

@@ -0,0 +1,78 @@
+import { useTranslation } from 'react-i18next';
+import Page from '@popup/popupX/shared/Page';
+import Button from '@popup/popupX/shared/Button';
+import ArrowSquare from '@assets/svgX/arrow-square-out.svg';
+import React from 'react';
+import Card from '@popup/popupX/shared/Card';
+import Text from '@popup/popupX/shared/Text';
+import { getVersionName } from '@shared/utils/environment-helpers';
+import { useAtomValue } from 'jotai';
+import { acceptedTermsAtom } from '@popup/store/settings';
+import urls from '@shared/constants/url';
+
+// Start saving the URL for the T&C we get from the wallet proxy,
+// and use that in the About page link.
+function useGetTermsUrl() {
+    const { loading: loadingAcceptedTerms, value: acceptedTerms } = useAtomValue(acceptedTermsAtom);
+
+    if (loadingAcceptedTerms) {
+        return '';
+    }
+
+    return acceptedTerms?.url || urls.termsAndConditions;
+}
+
+export default function About() {
+    const { t } = useTranslation('x', { keyPrefix: 'aboutPage' });
+    const termsUrl = useGetTermsUrl();
+
+    return (
+        <Page className="about-x">
+            <Page.Top heading={t('about')} />
+            <Page.Main>
+                <Card>
+                    <Card.Row>
+                        <Text.MainMedium>{t('documentation')}</Text.MainMedium>
+                        <Text.ExternalLink path={urls.documentationWebsite}>
+                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                        </Text.ExternalLink>
+                    </Card.Row>
+                    <Card.Row>
+                        <Text.MainMedium>{t('forum')}</Text.MainMedium>
+                        <Text.ExternalLink path={urls.supportWebsite}>
+                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                        </Text.ExternalLink>
+                    </Card.Row>
+                    <Card.Row>
+                        <Text.MainMedium>{t('website')}</Text.MainMedium>
+                        <Text.ExternalLink path={urls.website}>
+                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                        </Text.ExternalLink>
+                    </Card.Row>
+                    <Card.Row>
+                        <Text.MainMedium>{t('termsAndConditions')}</Text.MainMedium>
+                        <Text.ExternalLink path={termsUrl}>
+                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                        </Text.ExternalLink>
+                    </Card.Row>
+                    <Card.Row>
+                        <Text.MainMedium>{t('licence')}</Text.MainMedium>
+                        <Text.ExternalLink path={urls.licenseAttributions}>
+                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                        </Text.ExternalLink>
+                    </Card.Row>
+                </Card>
+                <Text.Heading>{t('support')}</Text.Heading>
+                <Text.Capture>
+                    {t('supportDescription')}
+                    <Text.ExternalLink path="mailto:[email protected]">
+                        [email protected]
+                    </Text.ExternalLink>
+                </Text.Capture>
+            </Page.Main>
+            <Page.Footer>
+                <Text.Capture>{t('version', { version: getVersionName() })}</Text.Capture>
+            </Page.Footer>
+        </Page>
+    );
+}

packages/browser-wallet/src/popup/popupX/pages/About/i18n/da.ts

@@ -0,0 +1,5 @@
+import type en from './en';
+
+const t: typeof en = {};
+
+export default t;

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

@@ -0,0 +1,13 @@
+const t = {
+    about: 'About',
+    documentation: 'Concordium documentation',
+    forum: 'Concordium support forum',
+    website: 'Visit the Concordium website',
+    termsAndConditions: 'Terms and conditions',
+    licence: 'Licence notices',
+    support: 'Support',
+    supportDescription: 'If you encountered a problem, or need help with something, you can reach out us via ',
+    version: 'Version {{ version }}',
+};
+
+export default t;

packages/browser-wallet/src/popup/popupX/pages/About/index.ts

@@ -0,0 +1 @@
+export { default } from './About';

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

@@ -7,24 +7,57 @@ import { useTranslation } from 'react-i18next';
 import Card from '@popup/popupX/shared/Card';
 import Text from '@popup/popupX/shared/Text';
 import Button from '@popup/popupX/shared/Button';
+import { mainnet, stagenet, testnet } from '@shared/constants/networkConfiguration';
+import { isDevelopmentBuild } from '@shared/utils/environment-helpers';
+import { useAtom } from 'jotai';
+import { networkConfigurationAtom } from '@popup/store/settings';
+
+function useNetworks() {
+    const { t } = useTranslation('x', { keyPrefix: 'network' });
+    const [currentNetworkConfiguration, setCurrentNetworkConfiguration] = useAtom(networkConfigurationAtom);
+
+    const networks = [mainnet, testnet];
+    if (isDevelopmentBuild()) {
+        networks.push(stagenet);
+    }
+
+    const updatedNetworks = networks.map((network) => {
+        const isConnected = network.genesisHash === currentNetworkConfiguration.genesisHash;
+        const connectLabel = isConnected ? t('connected') : t('connect');
+
+        return {
+            ...network,
+            isConnected,
+            connectLabel,
+        };
+    });
+
+    return updatedNetworks;
+}
 
 export default function NetworkSettings() {
     const { t } = useTranslation('x', { keyPrefix: 'network' });
+    const networks = useNetworks();
+
     const nav = useNavigate();
     const navToConnect = () => nav(relativeRoutes.settings.network.connect.path);
+
     return (
         <Page className="network-settings-x">
             <Page.Top heading={t('networkSettings')} />
             <Page.Main>
                 <Card>
-                    <Card.Row>
-                        <Text.MainRegular>Concordium Mainnet</Text.MainRegular>
-                        <Button.Secondary className="dark" label="Connected" icon={<Dot />} />
-                    </Card.Row>
-                    <Card.Row>
-                        <Text.MainRegular>Concordium Testnet</Text.MainRegular>
-                        <Button.Secondary className="dark" label="Connect" onClick={() => navToConnect()} />
-                    </Card.Row>
+                    {networks.map((network) => (
+                        <Card.Row>
+                            <Text.MainRegular>{network.name}</Text.MainRegular>
+                            <Button.Secondary
+                                className="dark"
+                                label={network.connectLabel}
+                                icon={network.isConnected ? <Dot /> : null}
+                                onClick={() => navToConnect()}
+                            />
+                        </Card.Row>
+                    ))}
                 </Card>
             </Page.Main>
         </Page>

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

@@ -1,5 +1,7 @@
 const t = {
     networkSettings: 'Network settings',
+    connected: 'Connected',
+    connect: 'Connect',
 };
 
 export default t;