feat(settings): add setting for hiding "More information" panel on se…

…nd-txn page details by default Closes #135
No-Cash-7970 · Jan 7, 2024 · abc5416 · abc5416
1 parent 5fac2a3
commit abc5416
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 25 deletions.
diff --git a/src/app/[lang]/components/NavBar/Settings/SettingsDialog.test.tsx b/src/app/[lang]/components/NavBar/Settings/SettingsDialog.test.tsx
@@ -80,6 +80,7 @@ describe('Settings Dialog', () => {
     await userEvent.click(screen.getByLabelText('settings.default_apar_r_use_snd'));
     await userEvent.click(screen.getByLabelText('settings.default_auto_send'));
     await userEvent.click(screen.getByLabelText('settings.always_clear_after_send'));
+    await userEvent.click(screen.getByLabelText('settings.default_hide_send_info'));
     // XXX: Add more settings here
 
     // Click reset button
@@ -98,6 +99,7 @@ describe('Settings Dialog', () => {
     expect(screen.getByLabelText('settings.default_apar_r_use_snd')).toBeChecked();
     expect(screen.getByLabelText('settings.default_auto_send')).toBeChecked();
     expect(screen.getByLabelText('settings.always_clear_after_send')).toBeChecked();
+    expect(screen.getByLabelText('settings.default_hide_send_info')).toBeChecked();
     // XXX: Add more settings here
   });
 
@@ -317,8 +319,7 @@ describe('Settings Dialog', () => {
     expect(screen.getByText('settings.saved_message')).toBeInTheDocument();
   });
 
-  it('notifies when "automatically send after signing by default" setting is changed',
-  async () => {
+  it('notifies when "automatically send after signing by default" setting is changed', async () => {
     render(
       <ToastProvider>
         <SettingsDialog open={true} />
@@ -330,19 +331,30 @@ describe('Settings Dialog', () => {
     expect(screen.getByText('settings.saved_message')).toBeInTheDocument();
   });
 
-  it('notifies when "always clear after sending transaction" setting is changed',
-  async () => {
+  it('notifies when "always clear after sending transaction" setting is changed', async () => {
     render(
       <ToastProvider>
         <SettingsDialog open={true} />
         <ToastViewport />
       </ToastProvider>
     );
-    // Change setting from checked (true) -->  unchecked (false)
+    // Change setting from checked (true) --> unchecked (false)
     await userEvent.click(screen.getByLabelText('settings.always_clear_after_send'));
     expect(screen.getByText('settings.saved_message')).toBeInTheDocument();
   });
 
+  it('notifies when "hide send information details by default" setting is changed', async () => {
+    render(
+      <ToastProvider>
+        <SettingsDialog open={true} />
+        <ToastViewport />
+      </ToastProvider>
+    );
+    // Change setting from checked (true) --> unchecked (false)
+    await userEvent.click(screen.getByLabelText('settings.default_hide_send_info'));
+    expect(screen.getByText('settings.saved_message')).toBeInTheDocument();
+  });
+
   it('has "clear transaction data" button', () => {
     render(
       <ToastProvider>

diff --git a/src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx b/src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx
@@ -34,6 +34,7 @@ export default function SettingsForm(props: Props) {
   const [defaultApar_rUseSnd, setDefaultApar_rUseSnd] = useAtom(Settings.defaultApar_rUseSnd);
   const [defaultAutoSend, setDefaultAutoSend] = useAtom(Settings.defaultAutoSend);
   const [alwaysClearAfterSend, setAlwaysClearAfterSend] = useAtom(Settings.alwaysClearAfterSend);
+  const [defaultHideSendInfo, setDefaultHideSendInfo] = useAtom(Settings.defaultHideSendInfo);
   const setStoredTxnData = useSetAtom(storedTxnDataAtom);
   const setSignedTxn = useSetAtom(storedSignedTxnAtom);
   // XXX: Add more settings here
@@ -84,6 +85,7 @@ export default function SettingsForm(props: Props) {
     setDefaultApar_rUseSnd(Settings.defaults.defaultApar_rUseSnd);
     setDefaultAutoSend(Settings.defaults.defaultAutoSend);
     setAlwaysClearAfterSend(Settings.defaults.alwaysClearAfterSend);
+    setDefaultHideSendInfo(Settings.defaults.defaultHideSendInfo);
     // XXX: Add more settings here
 
     // Notify user of reset
@@ -164,6 +166,8 @@ export default function SettingsForm(props: Props) {
         onChange={(e) => {setDefaultAutoSend(e.target.checked); notifySave();}}
       />
 
+      <h3>{t('settings.send_txn_heading')}</h3>
+
       {/* Setting: Always clear transaction data after sending */}
       <ToggleField
         name='always_clear_after_send'
@@ -174,6 +178,16 @@ export default function SettingsForm(props: Props) {
         onChange={(e) => {setAlwaysClearAfterSend(e.target.checked); notifySave();}}
       />
 
+      {/* Setting: Hide send information details by default */}
+      <ToggleField
+        name='default_hide_send_info'
+        label={t('settings.default_hide_send_info')}
+        inputClass='toggle-primary'
+        containerClass='mt-4'
+        value={defaultHideSendInfo}
+        onChange={(e) => {setDefaultHideSendInfo(e.target.checked); notifySave();}}
+      />
+
       <h3>{t('settings.asset_create_title')}</h3>
 
       {/* Setting: Set manager address to the sender address by default */}

diff --git a/src/app/[lang]/txn/send/components/SendTxn.tsx b/src/app/[lang]/txn/send/components/SendTxn.tsx
@@ -14,7 +14,10 @@ import { useDebouncedCallback } from 'use-debounce';
 import { dataUrlToBytes } from '@/app/lib/utils';
 import { storedSignedTxnAtom, storedTxnDataAtom } from '@/app/lib/txn-data';
 import { nodeConfigAtom } from '@/app/lib/node-config';
-import { alwaysClearAfterSend as alwaysClearAfterSendAtom } from '@/app/lib/app-settings';
+import {
+  alwaysClearAfterSend as alwaysClearAfterSendAtom,
+  defaultHideSendInfo as defaultHideSendInfoAtom
+} from '@/app/lib/app-settings';
 
 type Props = {
   /** Language */
@@ -49,6 +52,7 @@ export default function SendTxn({ lng }: Props) {
   const { t } = useTranslation(lng || '', ['send_txn']);
   const currentURLParams = useSearchParams();
   const alwaysClearAfterSend = useAtomValue(alwaysClearAfterSendAtom);
+  const defaultHideSendInfo = useAtomValue(defaultHideSendInfoAtom);
 
   const [waiting, setWaiting] = useState(false);
   const [pendingTxId, setPendingTxId] = useState('');
@@ -172,15 +176,15 @@ export default function SendTxn({ lng }: Props) {
 
   return (
     <div className='mt-12'>
-      { // Waiting...
+      {// Waiting...
       waiting &&
         <div className='not-prose pt-8'>
           <p className='text-2xl text-center mb-4'>{t('txn_confirm_wait')}</p>
           <progress className='progress progress-accent p-2'></progress>
         </div>
       }
 
-      { // Transaction succeeded
+      {// Transaction succeeded
       (!waiting && successMsg) && <>
         <div className='alert alert-success'>
           <Icons.IconMoodHappyFilled stroke={1.5} aria-hidden className='h-14 w-14' />
@@ -194,20 +198,17 @@ export default function SendTxn({ lng }: Props) {
             <p className='break-all text-start mr-1'>
               <Trans t={t} i18nKey='success.msg' values={{ txn_id: successMsg.txId }} />
             </p>
-            <p className='text-start'>
-              <Trans
-                t={t}
-                i18nKey='click_for_details'
+            {defaultHideSendInfo && <p className='text-start'>
+              <Trans t={t} i18nKey='click_for_details'
                 values={{details_title: t('success.details')}}
               />
-            </p>
+            </p>}
           </div>
         </div>
-        <details className='collapse-plus collapse border mt-6'>
+        <details className='collapse-plus collapse border mt-6' open={!defaultHideSendInfo}>
           <summary className='collapse-title text-lg w-full'>{t('success.details')}</summary>
-          <div className='collapse-content'>
-            <code className={
-              'card font-mono bg-neutral text-neutral-content'
+          <div className='collapse-content not-prose'>
+            <code className={'card font-mono bg-neutral text-neutral-content'
               +' whitespace-pre overflow-x-scroll'
               +' mt-1 p-4'
             }>
@@ -227,7 +228,7 @@ export default function SendTxn({ lng }: Props) {
         </div>
       </>}
 
-      { // Transaction failed with an error
+      {// Transaction failed with an error
       (!waiting && failMsg?.type === 'error') && <>
         <div className='alert alert-error'>
           <Icons.IconMoodWrrr stroke={1.5} aria-hidden className='h-14 w-14' />
@@ -241,16 +242,14 @@ export default function SendTxn({ lng }: Props) {
             <p className='text-start'>
               <Trans t={t} i18nKey={failMsg?.i18nKey} values={failMsg?.i18nValues} />
             </p>
-            <p className='text-start'>
-              <Trans
-                t={t}
-                i18nKey='click_for_details'
+            {defaultHideSendInfo && <p className='text-start'>
+              <Trans t={t} i18nKey='click_for_details'
                 values={{details_title: t('fail.details')}}
               />
-            </p>
+            </p>}
           </div>
         </div>
-        <details className='collapse-plus collapse border mt-6'>
+        <details className='collapse-plus collapse border mt-6' open={!defaultHideSendInfo}>
           <summary className='collapse-title text-lg w-full'>{t('fail.details')}</summary>
           <div className='collapse-content'>
             <div className='card font-mono bg-neutral text-neutral-content mt-1 p-4'>
@@ -286,7 +285,7 @@ export default function SendTxn({ lng }: Props) {
         </div>
       </>}
 
-      { // Warning: Transaction *may* have failed
+      {// Warning: Transaction *may* have failed
       (!waiting && failMsg?.type === 'warn' ) && <>
         <div className='alert alert-warning'>
           <Icons.IconMoodConfuzed stroke={1.5} aria-hidden className='h-14 w-14' />

diff --git a/src/app/i18n/locales/en/app.yml b/src/app/i18n/locales/en/app.yml
@@ -37,7 +37,9 @@ settings:
   default_apar_c_use_snd: Set the clawback address to the sender address by default
   default_apar_r_use_snd: Set the reserve address to the sender address by default
   default_auto_send: Automatically send transaction after signing by default
+  send_txn_heading: Send Transaction
   always_clear_after_send: Always clear saved transaction data after sending
+  default_hide_send_info: Hide details within the “More Information” section by default
   clear_data_title: Clear Stored Data
   clear_txn_data_btn: Clear saved transaction data
   clear_all_data_btn: Clear ALL data

diff --git a/src/app/i18n/locales/es/app.yml b/src/app/i18n/locales/es/app.yml
@@ -41,7 +41,9 @@ settings:
   default_apar_r_use_snd: >
     Establecer la dirección de reserva en la dirección del remitente por defecto
   default_auto_send: Enviar automáticamente la transacción después de firmar por defecto
+  send_txn_heading: Enviar transacción
   always_clear_after_send: Borrar siempre los datos de transacción guardados tras el envío
+  default_hide_send_info: Ocultar los detalles de la sección «Más información» por defecto
   clear_data_title: Borrar datos almacenados
   clear_txn_data_btn: Borrar datos de transacciones guardados
   clear_all_data_btn: Borrar TODOS los datos

diff --git a/src/app/lib/app-settings.ts b/src/app/lib/app-settings.ts
@@ -41,6 +41,8 @@ export const defaults = {
   defaultAutoSend: true,
   /** Always clear transaction data after sending? */
   alwaysClearAfterSend: true,
+  /** Hide send information details by default? */
+  defaultHideSendInfo: true,
 } as const;
 
 /** Theme mode */
@@ -75,3 +77,6 @@ export const defaultAutoSend =
 /** Always clear transaction data after sending? */
 export const alwaysClearAfterSend =
   atomWithStorage<boolean>('alwaysClearAfterSend', defaults.alwaysClearAfterSend, storage);
+/** Always clear transaction data after sending? */
+export const defaultHideSendInfo =
+  atomWithStorage<boolean>('defaultHideSendInfo', defaults.defaultHideSendInfo, storage);