frontend: improve bottom navigation for 'accounts'

1. directly go to that account when theres only 1 active account
2. change wording from 'accounts' to 'account'

Author: shonsirsha

frontends/web/src/app.tsx

@@ -210,7 +210,9 @@ export const App = () => {
             />
             <RouterWatcher />
           </div>
-          {showBottomNavigation && <BottomNavigation />}
+          {showBottomNavigation && (
+            <BottomNavigation activeAccounts={activeAccounts} />
+          )}
           <Alert />
           <Confirm />
         </div>

frontends/web/src/components/bottom-navigation/bottom-navigation.tsx

@@ -17,11 +17,18 @@
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import { AccountIconSVG, ExchangeIconSVG, MoreIconSVG, PortfolioIconSVG } from '@/components/bottom-navigation/menu-icons';
+import type { Account } from '@/api/aopp';
 import styles from './bottom-navigation.module.css';
 
-export const BottomNavigation = () => {
+type Props = {
+  activeAccounts: Account[];
+}
+
+export const BottomNavigation = ({ activeAccounts }: Props) => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
+  const onlyHasOneAccount = activeAccounts.length === 1;
+  const accountCode = activeAccounts[0]?.code || '';
 
   return (
     <div className={styles.container}>
@@ -34,10 +41,14 @@ export const BottomNavigation = () => {
       </Link>
       <Link
         className={`${styles.link} ${pathname.startsWith('/account/') || pathname.startsWith('/accounts/') ? styles.active : ''}`}
-        to="/accounts/all"
+        to={
+          onlyHasOneAccount && accountCode ?
+            `/account/${accountCode}` :
+            '/accounts/all'
+        }
       >
         <AccountIconSVG />
-        {t('settings.accounts')}
+        {onlyHasOneAccount ? t('account.account') : t('account.accounts')}
       </Link>
       <Link
         className={`${styles.link} ${pathname.startsWith('/exchange/') ? styles.active : ''}`}

frontends/web/src/components/wallet-connect/incoming-signing-request-dialog.tsx

@@ -89,7 +89,7 @@ export const WCIncomingSignRequestDialog = ({
             <>
               <ul className={styles.listContainer}>
                 <li className={styles.item}>
-                  <p className={styles.label}>{t('walletConnect.signingRequest.account')}</p>
+                  <p className={styles.label}>{t('account.account')}</p>
                   <span className={styles.accountNameAndAddress}>
                     <p className={styles.accountName}><b>{accountName}</b></p>
                     <p className={styles.address}>{truncateAddress(accountAddress)}</p>

frontends/web/src/locales/en/app.json

@@ -1,5 +1,7 @@
 {
   "account": {
+    "account": "Account",
+    "accounts": "Accounts",
     "disconnect": "Connection lost. Retrying…",
     "export": "Export",
     "exportTransactions": "Export transactions to downloads folder as CSV file",
@@ -1634,7 +1636,6 @@
   },
   "settings": {
     "about": "About",
-    "accounts": "Accounts",
     "advancedSettings": "Advanced settings",
     "appearance": "Appearance",
     "electrum": {
@@ -1869,7 +1870,6 @@
     },
     "pairingSuccess": "Dapp successfully connected. You can continue on the dapp website.",
     "signingRequest": {
-      "account": "Account",
       "chain": "Chain",
       "dapp": "Dapp",
       "data": "Data",

frontends/web/src/routes/accounts/all-accounts.tsx

@@ -97,7 +97,7 @@ export const AllAccounts = ({ accounts = [] }: AllAccountsProps) => {
   return (
 
     <Main>
-      <Header title={<h2>{t('settings.accounts')}</h2>}>
+      <Header title={<h2>{t('account.accounts')}</h2>}>
         <HideAmountsButton />
       </Header>
       <View width="700px" fullscreen={false}>