citycoins/ui

๐Ÿž[BUG] Standardize form responses

Closed this issue ยท 0 comments

Describe the bug

Right now there are a mix of approaches to handling form validation and messaging.

image

image

image

Expected behavior

Create a consistent experience for all forms, which will be applied to all future tools pages as well.

This could be done with a component that:

  • uses state that matches bootstrap text field values as string (error, success, info, etc)
  • uses a message (string) from the form
  • builds the message and state from the inputs

Design-wise it'd be:

  • laid out as text or a div with background
  • also could be paired with alerts
  • generally placed below forms (or form buttons if multiple)

Implementation-wise, it could be controlled by a state variable in the "action" functions:

const [formMsg, setFormMsg] = useState('');
const [formMsgState, setFormMsgState = useState('');

formMsg && <NewComponent state={formMsgState} value={formMsg} />

Open to ideas on this as well! Wondering if this new component could use a better txid / tx handling component if one is supplied on form success.