perf(usability): change "ignore error" checkbox into "disallow errors…

…" toggle in settings

This change provides more consistency in the settings. An on/off toggle setting that is on by
default.

src/app/[lang]/components/NavBar/Settings/SettingsDialog.test.tsx

@@ -74,7 +74,7 @@ describe('Settings Dialog', () => {
     );
     // Change settings to non-default values
     await userEvent.click(screen.getByLabelText('settings.theme_switcher.light'));
-    await userEvent.click(screen.getByLabelText('settings.ignore_form_errors'));
+    await userEvent.click(screen.getByLabelText('settings.disallow_form_errors'));
     await userEvent.click(screen.getByLabelText('settings.default_use_sug_fee'));
     await userEvent.click(screen.getByLabelText('settings.default_use_sug_rounds'));
     await userEvent.click(screen.getByLabelText('settings.default_apar_m_use_snd'));
@@ -94,7 +94,7 @@ describe('Settings Dialog', () => {
 
     // Check settings
     expect(screen.getByLabelText('settings.theme_switcher.auto')).toBeChecked();
-    expect(screen.getByLabelText('settings.ignore_form_errors')).not.toBeChecked();
+    expect(screen.getByLabelText('settings.disallow_form_errors')).toBeChecked();
     expect(screen.getByLabelText('settings.default_use_sug_fee')).toBeChecked();
     expect(screen.getByLabelText('settings.default_use_sug_rounds')).toBeChecked();
     expect(screen.getByLabelText('settings.default_apar_m_use_snd')).toBeChecked();
@@ -120,15 +120,15 @@ describe('Settings Dialog', () => {
     expect(screen.getByText('settings.saved_message')).toBeInTheDocument();
   });
 
-  it('notifies when "ignore compose-form validation errors" setting is changed', async () => {
+  it('notifies when "Do not allow form errors" setting is changed', async () => {
     render(
       <ToastProvider>
         <SettingsDialog open={true} />
         <ToastViewport />
       </ToastProvider>
     );
-    // Change setting from unchecked (false) --> checked (true)
-    await userEvent.click(screen.getByLabelText('settings.ignore_form_errors'));
+    // Change setting from checked (true) --> unchecked (false)
+    await userEvent.click(screen.getByLabelText('settings.disallow_form_errors'));
     expect(screen.getByText('settings.saved_message')).toBeInTheDocument();
   });
 

src/app/[lang]/components/NavBar/Settings/SettingsForm.tsx

@@ -31,7 +31,7 @@ export default function SettingsForm(props: Props) {
 
   /* Settings Data */
   const [theme, setTheme] = useAtom(Settings.themeAtom);
-  const [ignoreFormErrors, setIgnoreFormErrors] = useAtom(Settings.ignoreFormErrorsAtom);
+  const [disallowFormErrors, setDisallowFormErrors] = useAtom(Settings.disallowFormErrorsAtom);
   const [defaultUseSugFee, setDefaultUseSugFee] = useAtom(Settings.defaultUseSugFee);
   const [assetInfoGet, setAssetInfoGet] = useAtom(Settings.assetInfoGet);
   const [defaultUseSugRounds, setDefaultUseSugRounds] = useAtom(Settings.defaultUseSugRounds);
@@ -83,7 +83,7 @@ export default function SettingsForm(props: Props) {
   const resetSettings = () => {
     // Set to defaults
     applyTheme(Settings.defaults.theme, false);
-    setIgnoreFormErrors(RESET);
+    setDisallowFormErrors(RESET);
     setDefaultUseSugFee(RESET);
     setDefaultUseSugRounds(RESET);
     setAssetInfoGet(RESET);
@@ -137,15 +137,15 @@ export default function SettingsForm(props: Props) {
 
       <h3>{t('settings.compose_txn_general_heading')}</h3>
 
-      {/* Setting: Ignore form validation errors setting */}
-      <CheckboxField
-        name='ignore_form_errors'
-        label={t('settings.ignore_form_errors')}
-        labelClass='justify-start cursor-pointer'
-        inputClass='checkbox-primary me-4'
-        containerClass='mt-4'
-        value={ignoreFormErrors}
-        onChange={(e) => {setIgnoreFormErrors(e.target.checked); notifySave();}}
+      {/* Setting: Do not allow form errors setting */}
+      <ToggleField
+        name='disallow_form_errors'
+        label={t('settings.disallow_form_errors')}
+        labelClass='gap-3'
+        inputClass='toggle-primary toggle-sm sm:toggle-md'
+        containerClass='mt-1'
+        value={disallowFormErrors}
+        onChange={(e) => {setDisallowFormErrors(e.target.checked); notifySave();}}
       />
 
       {/* Setting: Use suggested fee by default */}
@@ -285,7 +285,7 @@ export default function SettingsForm(props: Props) {
       />
 
       {/* Connect wallet */}
-      <div className='mt-11'>
+      <div className='mt-8'>
         <WalletProvider><ConnectWallet t={t} /></WalletProvider>
       </div>
 

src/app/[lang]/txn/compose/components/ComposeFormValidation.test.tsx

@@ -84,9 +84,9 @@ describe('Compose Form Component', () => {
   });
 
   // eslint-disable-next-line max-len
-  it('continues to sign-transaction page if invalid transaction data is submitted and the "ignore compose form validation errors" setting is on',
+  it('continues to sign-transaction page if invalid transaction data is submitted and the "do not allow form errors" setting is off',
   async () => {
-    localStorage.setItem('ignoreFormErrors', 'true');
+    localStorage.setItem('disallowFormErrors', 'false');
     render(
       // Wrap component in new Jotai provider to reset data stored in Jotai atoms
       <JotaiProvider><ComposeForm /></JotaiProvider>

src/app/[lang]/txn/compose/components/ComposeSubmitButton.tsx

@@ -25,7 +25,7 @@ export default function ComposeSubmitButton({ lng }: Props) {
   const [submittingForm, setSubmittingForm] = useState(false);
   const jotaiStore = useStore();
   const storedTxnData = useAtomValue(storedTxnDataAtom);
-  const ignoreFormErrors = useAtomValue(AppSettings.ignoreFormErrorsAtom);
+  const disallowFormErrors = useAtomValue(AppSettings.disallowFormErrorsAtom);
   const router = useRouter();
   const currentURLParams = useSearchParams();
   const preset = currentURLParams.get(Preset.ParamName);
@@ -42,8 +42,8 @@ export default function ComposeSubmitButton({ lng }: Props) {
   const submitData = async (e: React.MouseEvent) => {
     e.preventDefault();
 
-    // Check if the form is valid only if the "ignore form error" setting is off
-    if (!ignoreFormErrors && !isFormValid(preset, jotaiStore)) {
+    // Check if the form is valid only if the "do not allow form errors" setting is on
+    if (disallowFormErrors && !isFormValid(preset, jotaiStore)) {
       jotaiStore.set(showFormErrorsAtom, true);
       return;
     }

src/app/i18n/locales/en/app.yml

@@ -32,7 +32,7 @@ settings:
   sign_txn_heading: Sign Transaction
   send_txn_heading: Send Transaction
   clear_reset_heading: Clear & Reset
-  ignore_form_errors: Allow forms to be submitted with errors
+  disallow_form_errors: Do not allow forms to be submitted with errors
   default_use_sug_fee: Set fee automatically by default
   default_use_sug_rounds: Set valid rounds automatically by default
   get_asset_info: Retrieve asset information when asset ID is entered

src/app/i18n/locales/es/app.yml

@@ -32,7 +32,7 @@ settings:
   sign_txn_heading: Firmar transacción
   send_txn_heading: Enviar transacción
   clear_reset_heading: Borrar y restablecer
-  ignore_form_errors: Permitir que los formularios se envíen con errores
+  disallow_form_errors: No permita que se envíen formularios con errores
   default_use_sug_fee: Fijar la tarifa automáticamente por defecto
   default_use_sug_rounds: Establecer rondas válidas automáticamente por defecto
   get_asset_info: Obtener información sobre activos cuando se introduce la identificación del activo

src/app/lib/app-settings.ts

@@ -19,10 +19,10 @@ export enum Themes  {
 export const defaults = {
   /** Theme (default: `""` - automatic) */
   theme: Themes.auto,
-  /** Ignore form validation errors when submitting a form (like the "compose transaction" form)?
-   * (default: `false` - Do not ignore)
+  /** Do not allow a form (like the "compose transaction" form) to be submitted with errors?
+   * (default: `true` - Do not allow form to be submitted with errors)
    */
-  ignoreFormErrors: false,
+  disallowFormErrors: true,
   /** Use the suggested fee by default? */
   defaultUseSugFee: true,
   /** Use the suggested first & last valid round by default? */
@@ -49,9 +49,9 @@ export const defaults = {
 
 /** Theme mode */
 export const themeAtom = atomWithStorage<Themes>('theme', defaults.theme, storage);
-/** Ignore validation errors? */
-export const ignoreFormErrorsAtom =
-  atomWithStorage<boolean>('ignoreFormErrors', defaults.ignoreFormErrors, storage);
+/** Do not allow a form (like the "compose transaction" form) to be submitted with errors? */
+export const disallowFormErrorsAtom =
+  atomWithStorage<boolean>('disallowFormErrors', defaults.disallowFormErrors, storage);
 /** Use suggested fee by default? */
 export const defaultUseSugFee =
   atomWithStorage<boolean>('defaultUseSugFee', defaults.defaultUseSugFee, storage);