feat: settings screen fresh look

[sandipndev]

Settings Screen Revamp with better UI/UX

This PR uses the latest designs and design elements from our Figma Board and implements them in the settings screen. The scope of this PR is only UI updates and it doesn't touch logic anywhere unless it is needed.

Apart from functionality, some semantics of this PR:

• Settings into newer component wise layout
• Uses Skeleton when data inside the component loads
• Provides user feedback every time (Spinner or Alerts) so that the user never feels stuck

Screenshots: #2893 (comment)

If you like this PR, a +1 would be appreciated

[sandipndev]

Comments I received via Mattermost:

• Explore Wallet Settings: Have all the settings visible
• Red cross for Email and Phone (I'm using just basic primary color instead, looks better and not scary imo)
• Move default account and notifications to Preferences
• Transaction Limits straight in Settings
• 2FA/TOTP in Security

Things for another PR because it requires new screen additions:

• Developer Dashboard in advanced
• POS Information Screen

[sandipndev]

FYI this also would fail the end to end tests, but I will fix it in a different PR. Don't want to clutter the diff of this.

[nicolasburtey]

I made some comment looking over the code. have not checked the code yet. The restructuring of the screens with smaller component is great. I'd love to explore them with the storybook if that one worked :(

we have to be mindful of the refactoring and the effect to network queries and how the cache is been managed. this was curated before to be updated when necessary (fetchPolicy: cache-and-network) but it doesn't seem this PR is considering this cache behavior right now.

I think we should wait to merge the PR until the e2e tests also pass:

• there is no urgency to merge this PR
• I don't think there would be many merge conflict if we wait a little longer, no one is really going to do lot of work on those screens in the upcoming days

[sandipndev]

we have to be mindful of the refactoring and the effect to network queries and how the cache is been managed. this was curated before to be updated when necessary (fetchPolicy: cache-and-network) but it doesn't seem this PR is considering this cache behavior right now.

Wherever a fetchPolicy was being used, I have made sure the same is transferred to the split components in this PR as well. To my testing, there has been no side effects regarding this.

[sandipndev]

Storybook is now working: #2921
Once that gets merged I'll rebase and add the storybook components in this PR.

[nicolasburtey]

I'm planning to cleanup the translations file in a separate PR. would be best if there's a Python script to do this.

Why a python script? We don't use python in our stack

[sandipndev]

@nicolasburtey @UncleSamtoshi This PR is working on device correctly - although the E2E tests fail because of the flakiness, since it contains a lot of the "top3" stuff, it'd be good if you can review this PR. Let's accelerate this.

[nicolasburtey]

my first comments trying the PR locally

• first loading the settings is flacky. I don't think the loading template is defined correctly
• the username is not consistent. we have username in the Settings page, where we have @username in the Account page
• the fact we need to scroll in the Account page to see the main option is not too great. I'm not sure to know the goal of having this big logo here (as long as we don't have the ability to upload a picture, this is just taking the most important real estate space on this page). I'm also not sure why the username has to be back here.
• the point of sale button is not super obvious to me how it's designed. if you talk the copy icon then it copy it, but if you tap anywhere else it's opening a new tab. this is not what I would have expected given the opening a new tab is just an appendix to the text "Point of Sales" and smaller in size than the Copy --> my expectation would be that copy would be the default action. but maybe the default / action should indeed be the tab opening, but then it should be the bigger icon here.
• the fact that 2fa is a screen behind Security is akward in the flow, because all the other element in this Security screen do not open a new screen but are rather button that are present in app
• in the security screen, the hide balance button might not be visible if not scrolling down. the button should probably be appearing next to Hide Balance, not at the bottom of the text.

[sandipndev]

@nicolasburtey I have addressed all your comments and made the requested changes in this PR.

The Point of Sale is the only one which I am blank about and it needs further inputs from @designsats

the point of sale button is not super obvious to me how it's designed. if you talk the copy icon then it copy it, but if you tap anywhere else it's opening a new tab. this is not what I would have expected given the opening a new tab is just an appendix to the text "Point of Sales" and smaller in size than the Copy --> my expectation would be that copy would be the default action. but maybe the default / action should indeed be the tab opening, but then it should be the bigger icon here.

Here are the updated screenshots:

Explore Wallet Settings Page	Explore Wallet Account Page
Logged In User Settings Page	Logged In User Account Page
Logged In User Security Page

[nicolasburtey]

spellcheck is going nuts lol

[UncleSamtoshi]

PR looks good, and I really like the changes! It looks a lot prettier and feels more intuitive using the settings.

Two issues that i found that should be address, but could be done in a follow up PR:

• Deleting the account is slightly buggy and results in showing an alert for the session expiring. Likely the state is not being cleared correctly. This also might be something you didn't introduce.
• When the lightning address is longer, the copy icon in the POS settings row is shifted right.

[sandipndev]

Thank you @UncleSamtoshi for going through the PR thoroughly. I will address the two issues you flagged in a separate one now.