refactor(account-settings): simplify UI layout, rename backup buttons, remove u/ prefix

src/components/settings-modal/account-settings/__tests__/account-settings.test.tsx

@@ -18,7 +18,6 @@ vi.mock('react-i18next', () => ({
 vi.mock('@plebbit/plebbit-react-hooks', () => ({
   useAccount: () => ({ id: 'test-id', name: 'Account 1', author: { address: '0x123', shortAddress: '0x1...3' } }),
   useAccounts: () => ({ accounts: [{ id: 'test-id', name: 'Account 1', author: { shortAddress: '0x1...3' } }] }),
-  createAccount: vi.fn(),
   deleteAccount: vi.fn(),
   exportAccount: vi.fn(),
   importAccount: vi.fn(),
@@ -70,13 +69,13 @@ describe('AccountSettings', () => {
     expect(buttons.some((b) => (b.textContent ?? '').includes('edit'))).toBe(true);
   });
 
-  it('renders create, import, export buttons', () => {
+  it('renders download_backup and import_account_backup buttons', () => {
     render(createElement(AccountSettings));
     const buttons = Array.from(container.querySelectorAll('button'));
     const texts = buttons.map((b) => b.textContent ?? '');
-    expect(texts.some((t) => t.includes('create'))).toBe(true);
-    expect(texts.some((t) => t.includes('import'))).toBe(true);
-    expect(texts.some((t) => t.includes('export'))).toBe(true);
+    expect(texts.some((t) => t.includes('download_backup'))).toBe(true);
+    expect(texts.some((t) => t.includes('import_account_backup'))).toBe(true);
+    expect(texts.some((t) => t.includes('create'))).toBe(false);
   });
 
   it('renders delete_account button', () => {

src/components/settings-modal/account-settings/account-settings.module.css

@@ -17,11 +17,7 @@
   color: red;
 }
 
-.setting .createAccount {
-  margin-left: 5px;
-}
-
-.warning {
+.info {
   font-size: 0.8em;
   padding: 5px 0;
 }

src/components/settings-modal/account-settings/account-settings.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { createAccount, deleteAccount, exportAccount, importAccount, setActiveAccount, useAccount, useAccounts } from '@plebbit/plebbit-react-hooks';
+import { deleteAccount, exportAccount, importAccount, setActiveAccount, useAccount, useAccounts } from '@plebbit/plebbit-react-hooks';
 import styles from './account-settings.module.css';
 import { Capacitor } from '@capacitor/core';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -33,35 +32,8 @@ const AccountSettingsEditor = ({
   const { t } = useTranslation();
   const location = useLocation();
   const { accounts } = useAccounts();
-  const switchToNewAccountRef = useRef(false);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (switchToNewAccountRef.current && accounts.length > 0) {
-      const lastAccount = accounts[accounts.length - 1];
-      setActiveAccount(lastAccount.name);
-      switchToNewAccountRef.current = false;
-    }
-  }, [accounts]);
-
-  const handleCreateAccount = async () => {
-    const result = await withErrorHandling(
-      async () => {
-        switchToNewAccountRef.current = true;
-        await createAccount();
-      },
-      (error) => {
-        if (error instanceof Error) {
-          alert(error.message);
-          console.log(error);
-        } else {
-          console.error('An unknown error occurred:', error);
-        }
-      },
-    );
-    void result;
-  };
-
   const _deleteAccount = (accountName: string) => {
     if (!accountName) {
       return;
@@ -184,29 +156,26 @@ const AccountSettingsEditor = ({
 
   const accountsOptions = accounts.map((account) => (
     <option key={account?.id} value={account?.name}>
-      u/{account?.author?.shortAddress}
+      {account?.author?.shortAddress}
     </option>
   ));
 
+  const host = window.electronApi?.isElectron ? 'this desktop app' : isAndroid ? 'this mobile app' : window.location.hostname;
+
   return (
     <div className={styles.setting}>
       <div>
         <select value={account?.name} onChange={(e) => setActiveAccount(e.target.value)}>
           {accountsOptions}
-        </select>
-        <button className={styles.createAccount} onClick={handleCreateAccount}>
-          {t('create')}
-        </button>{' '}
-        <button onClick={handleImportAccount}>{t('import')}</button> <button onClick={handleExportAccount}>{t('export')}</button>
-        <div className={styles.warning}>
-          {t('stored_locally', {
-            location: window.electronApi?.isElectron ? 'this desktop app' : isAndroid ? 'this mobile app' : window.location.hostname,
-            interpolation: { escapeValue: false },
-          })}
+        </select>{' '}
+        <button onClick={() => navigate('/settings/account-data', { state: { returnTo: location.pathname + location.hash } })}>{t('edit')}</button>{' '}
+        <button onClick={handleExportAccount}>{t('download_backup')}</button>
+        <div className={styles.info}>
+          {t('account_auto_generated')} {t('stored_locally', { location: host, interpolation: { escapeValue: false } })}
         </div>
       </div>
       <div>
-        <button onClick={() => navigate('/settings/account-data', { state: { returnTo: location.pathname + location.hash } })}>{t('edit')}</button>
+        <button onClick={handleImportAccount}>{t('import_account_backup')}</button>
         <button className={styles.deleteAccount} onClick={() => _deleteAccount(account?.name ?? '')}>
           {t('delete_account')}
         </button>