feat: render error consistently

apps/trading/components/profile-dialog/profile-dialog.tsx

@@ -10,22 +10,14 @@ import { useProfileDialogStore } from '../../stores/profile-dialog-store';
 import { useForm } from 'react-hook-form';
 import { useT } from '../../lib/use-t';
 import { useRequired } from '@vegaprotocol/utils';
-import { useSimpleTransaction } from '@vegaprotocol/wallet';
+import { useSimpleTransaction, type Status } from '@vegaprotocol/wallet';
 
 export const ProfileDialog = () => {
   const t = useT();
   const open = useProfileDialogStore((store) => store.open);
   const setOpen = useProfileDialogStore((store) => store.setOpen);
 
-  return (
-    <Dialog open={open} onChange={setOpen} title={t('Set party alias')}>
-      <ProfileFormContainer />
-    </Dialog>
-  );
-};
-
-const ProfileFormContainer = () => {
-  const { send, status, error } = useSimpleTransaction();
+  const { send, status, error, reset } = useSimpleTransaction();
 
   const sendTx = (field: FormFields) => {
     send({
@@ -37,25 +29,18 @@ const ProfileFormContainer = () => {
     });
   };
 
-  if (error) {
-    return <p className="break-words">{error}</p>;
-  }
-
-  if (status === 'pending') {
-    return <p>Pending</p>;
-  }
-
-  if (status === 'requested') {
-    return <p>Confirm in wallet</p>;
-  }
-
-  if (status === 'confirmed') {
-    return <p>Transaction sent</p>;
-  }
-
-  if (status === 'idle') {
-    return <ProfileForm onSubmit={sendTx} />;
-  }
+  return (
+    <Dialog
+      open={open}
+      onChange={(o) => {
+        setOpen(o);
+        reset();
+      }}
+      title={t('Set party alias')}
+    >
+      <ProfileForm status={status} error={error} onSubmit={sendTx} />
+    </Dialog>
+  );
 };
 
 interface FormFields {
@@ -64,8 +49,12 @@ interface FormFields {
 
 const ProfileForm = ({
   onSubmit,
+  status,
+  error,
 }: {
   onSubmit: (fields: FormFields) => void;
+  status: Status;
+  error: string | undefined;
 }) => {
   const t = useT();
   const required = useRequired();
@@ -75,6 +64,20 @@ const ProfileForm = ({
     formState: { errors },
   } = useForm<FormFields>();
 
+  const renderButtonText = () => {
+    if (status === 'requested') {
+      return t('Confirm in wallet...');
+    }
+
+    if (status === 'pending') {
+      return t('Awaiting transaction...');
+    }
+
+    return t('Submit');
+  };
+
+  const errorMessage = errors.alias?.message || error;
+
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="mt-3">
       <FormGroup label="Alias" labelFor="alias">
@@ -85,12 +88,18 @@ const ProfileForm = ({
             },
           })}
         />
-        {errors.alias?.message && (
-          <InputError>{errors.alias.message}</InputError>
+        {errorMessage && (
+          <InputError>
+            <p className="break-words max-w-full">{errorMessage}</p>
+          </InputError>
         )}
       </FormGroup>
-      <TradingButton type="submit" intent={Intent.Info}>
-        {t('Submit')}
+      <TradingButton
+        type="submit"
+        intent={Intent.Info}
+        disabled={status === 'requested' || status === 'pending'}
+      >
+        {renderButtonText()}
       </TradingButton>
     </form>
   );

libs/wallet-react/src/hooks/use-simple-transaction.ts

@@ -33,6 +33,12 @@ export const useSimpleTransaction = (opts?: Options) => {
   const [result, setResult] = useState<Result>();
   const [error, setError] = useState<string>();
 
+  const reset = () => {
+    setStatus('idle');
+    setResult(undefined);
+    setError(undefined);
+  };
+
   const send = async (tx: Transaction) => {
     if (!pubKey) {
       throw new Error('no pubKey');
@@ -114,5 +120,6 @@ export const useSimpleTransaction = (opts?: Options) => {
     error,
     status,
     send,
+    reset,
   };
 };