@barrytra Nice!

Works exactly as expected. Great work! 🚀

• UI might need small adaptions to have the header consistent with other modals (renew bond, fee settings, seed modal, etc.):

📸

i.e. by using:

<rb.Modal show={isExpanded} animation={true} backdrop="static" centered={true} onHide={() => setIsExpanded(false)}>
<rb.Modal.Header closeButton>
  <rb.Modal.Title>{t('earn.fidelity_bond.create_fidelity_bond.title')}</rb.Modal.Title>
</rb.Modal.Header>
<rb.Modal.Body>
[...]
</rb.Modal.Body>
</rb.Modal>

See file SpendFidelityBondModal.tsx for examples! 🙏

• I think the custom CSS styles are also not needed! 💪

• Can we find a better name for variable isExpanded? e.g. showCreateFidelityBondModal

• The sprite does not need to change from "plus" to "caret-up" anymore, when isExpanded is true

What do you think?

Yes.. i agree to suggestions and they have been implemented.
My only concern to use customised CSS was because even in light mode the header appears to be dark.

But its okay if other modals have the same flow.
please have a check

Yes.. i agree to suggestions and they have been implemented. My only concern to use customised CSS was because even in light mode the header appears to be dark. But its okay if other modals have the same flow. please have a check

Good thinking! Imho, it is okay and better to stay consistent. Header color in light mode can be changed in a different PR, if needed!

tACK. Thanks @barrytra 💪

It seems, with this change, the alert is displayed outside of the modal in case something is wrong.

Would you be able to take another look @barrytra ?

Ahh!! I get it. It was actually placed initially according to dropdown. This should be fixed.
What do you think shall it be shown inside the modal itself?

Also can you suggest a way to produce this error??

Ahh!! I get it. It was actually placed initially according to dropdown. This should be fixed. What do you think shall it be shown inside the modal itself?

That would probably be best, yes. Otherwise it might not be visible to the user.

Also can you suggest a way to produce this error??

You can temporarily adapt the request code and throw an error here.