feat: add account detail pages header

[lujakob]

Describe the changes you have made in this PR

Add header with account name to account detail pages.

Link this PR to an issue [optional]

Fixes #2521

Type of change

• feat: New feature (non-breaking change which adds functionality)

Screenshots of the changes [optional]

How has this been tested?

Manually

Checklist

• Self-review of changed code
• Manual testing
• Added automated tests where applicable
• Update Docs & Guides
• For UI-related changes
• Darkmode
• Responsive layout

[lujakob]

@reneaaron please have a look. Not sure if you addressed all desired pages.

• I created an AccountDetailHeader component
• I added a cancel button to the generate page, as the import page had one as well
• I changed the loading state for the backup page and added a backup.no_mnemonic_found, because when I visited this page via typing the url there was a continuous loading state, due to the mnemonic data being null.

[github-actions]

🚀 Thanks for the pull request!

Here are the current build files for testing:

• chrome.zip.zip
• firefox.xpi.zip
• opera.crx.zip

Download and unzip the file for your browser. Refer to the readme for detailed install instructions.

Don't forget: keep earning sats!

[reneaaron]

@lujakob Thanks for the PR, I refactored it to use subroutes / layouts instead of implementing the same things over and over on different pages.

I added a cancel button to the generate page, as the import page had one as well

Cool, thanks.

I changed the loading state for the backup page and added a backup.no_mnemonic_found, because when I visited this page via typing the url there was a continuous loading state, due to the mnemonic data being null.

I don't think we need to handle that and removed it.

Please have a look 😊

[lujakob]

@lujakob Thanks for the PR, I refactored it to use subroutes / layouts instead of implementing the same things over and over on different pages.

I added a cancel button to the generate page, as the import page had one as well

Cool, thanks.

I changed the loading state for the backup page and added a backup.no_mnemonic_found, because when I visited this page via typing the url there was a continuous loading state, due to the mnemonic data being null.

I don't think we need to handle that and removed it.

Please have a look 😊

Looks good, thanks for helping out.

[reneaaron]

Addressed review comments and improved "back" navigation.

[stackingsaunter]

I propose changes to the accounts header to make it smaller and take less space and move "export" ino settings as an item (now known as "Connect to mobile wallet"

Zeus links to: https://zeusln.app/
Blue Wallet links to: https://bluewallet.io/

Figma designs and handoff

This would require some copy changes:

• "Edit Account" header of the section to just "Account" (not ideal, maybe you have better propositions?)
• "Export Account" modal name to "Connect to mobile wallet"
• "Name" to "Display Name"

[rolznz]

@reneaaron why did this get marked as a draft? is it still planned to be worked on?

[reneaaron]

@rolznz I noticed some problems during the final tests:

When you change your account name it's not updated in the account header (but it is updated in the account dropdown). Let me know if you have any ideas how to fix that. Need to take another look at that...

[lujakob]

@rolznz I noticed some problems during the final tests:

When you change your account name it's not updated in the account header (but it is updated in the account dropdown). Let me know if you have any ideas how to fix that. Need to take another look at that...

I see the name displayed in the AccountLayoutPage is fetched on component mount via the parameter id.

https://github.com/lujakob/lightning-browser-extension/blob/ad5ef0d234c7e00f82a301c29d43769a90812362/src/app/components/AccountDetailLayout/index.tsx#L22C1-L23

It is updated in the account header only when the account name being changed is the currently selected account. Which makes sense.

The parent AccountLayoutPage component where the name is displayed has no way of knowing when the child AccountDetail updates the name. So the only way I can think of right now is, reloading the page after updating the name, which is kinda dirty :(

[lujakob]

@rolznz I noticed some problems during the final tests:
When you change your account name it's not updated in the account header (but it is updated in the account dropdown). Let me know if you have any ideas how to fix that. Need to take another look at that...

I see the name displayed in the AccountLayoutPage is fetched on component mount via the parameter id.

https://github.com/lujakob/lightning-browser-extension/blob/ad5ef0d234c7e00f82a301c29d43769a90812362/src/app/components/AccountDetailLayout/index.tsx#L22C1-L23

It is updated in the account header only when the account name being changed is the currently selected account. Which makes sense.

The parent AccountLayoutPage component where the name is displayed has no way of knowing when the child AccountDetail updates the name. So the only way I can think of right now is, reloading the page after updating the name, which is kinda dirty :(

I saw you found a good solution, Rene, perfect.