[wallet/symbol/mobile] feat: add AccountDetails, Send and Settings screens

[OlegMakarenko]

Problem

The app lacks AccountDetails, Send, and Settings screens.

Solution

MAIN CHANGES:

1. Added new screens:

1.1 AccountDetails - this screen displays account main information such as address, public key, chain & network and allows to reveal private key after entering passcode. It also has the block explorer link and for the testnet - the faucet link.

1.2 Send - this screen is responsible for sending transfer transactions. It has a form to input recipient address, select token, enter amount, message and select fees. Supports different chains and will be used by them later. The screen is using TransactionScreenTemplate component/template that handles all transaction-sending functionality. It uses wallet controller for signing and announcing transaction. Also it renders confirmation dialog before signing. It renders transaction status tracking dialog allowing users to see the current step of the transaction sending process - transaction creation, sign, announce and confirmation. If any error occurred - it shows its text next to errored step.

1.3 Settings - this screen displays a list of app settings. Some list items redirect to other screens for detailed configuration, and some execute actions directly on the screen such as - language selection, fiat currency selection and logout (removing all accounts from wallet controller and clearing cache (with confirmation dialog)).

1.4 SettingsAbout - this is a simple screen that displays app, symbol-sdk and react-native version from package.json and also display links to our github, twitter and discord (urls specified in the app config file).

1.5 SettingsNetwork - this screen allows to switch between mainnet and testnet and select the node - automatic selection or manually from the list (nodewatch). Below the selectors there are a table showing some basic network info - network identifier, connected node url, chain height, min. fee multiplier.

1.6 SettingsSecurity - this screen allows to enable or disable passcode confirmations and also has a component to reveal mnemonic seed phrase (after passcode confirmation if enabled).

Added account info to Home screen (AccountCardWidget).

SECONDARY CHANGES:

2. Improved project structure.
   Component groups organized by role:

• controls/ - Interactive UI controls (buttons, inputs, selectors)
• display/ - Display-only components, data type presentation
• features/ - Feature-specific complex components that use some logic
• feedback/ - User feedback components (modals, statuses, alerts)
• layout/ - Layout and container components. Elements positioning
• templates/ - Page templates, providing reusable functionality
• typography/ - Text components
• visual/ - Visual elements (icons, images)

3. Improved JS-Doc description for each component.

4. Added new components:

• Dropdown - A selection component that displays the current value and opens a modal interface for choosing from a list of options.
• FeeSelector - A component for selecting transaction fee levels among slow, medium, and fast options using a slider interface.
• InputAddress - An input field for entering addresses, with validation and an optional dropdown for selecting from saved contacts and wallet accounts.
• InputAmount - An input field for entering amounts, with validation, price conversion display, available balance information, and a max amount selection.
• SelectToken - A dropdown selector for choosing tokens from a provided list, displaying token names, tickers, and amounts.
• AccountAvatar - Displays an avatar for a given account address. If a custom imageId is provided, it uses that image. Otherwise, it generates a blockie image based on the address.
• AccountView - A display component showing an account's avatar alongside its name or address, with support for different sizes.
• CopyButtonContainer - A container component that displays content alongside a copy button for copying the associated value.
• EditButtonContainer - A container component that displays content alongside an edit button for triggering edit actions.
• TokenAvatar - Displays an avatar for a given token. If a known token image identifier is provided, it uses that image. Otherwise, it falls back to a default token image.
• ActivityLogView - A component for displaying a sequential list of activity items, each with an icon, title and progress status.
• Amount - A display component for showing numeric values with ticker symbols, supporting conditional coloring based on positive/negative values and multiple size variants.
• BooleanView - A display component that shows boolean values using checkmark or cross icons, with optional accompanying text.
• MessageView - A display component for transaction messages, showing appropriate icons for encrypted or raw message types and displaying human-readable text when available.
• TableView - A component for displaying structured data in a tabular format, supporting various row types such as accounts, tokens, messages, and booleans with appropriate visual representations.
• Alert - A component for displaying status messages with optional icons and titles, supporting various visual variants for different message types.
• StatusCard - A card component for displaying status information with an icon, supporting various visual variants and optional additional content.
• ActionRow - A layout component arranging child content and an optional button in a horizontal row, supporting stretching to fill available width.
• Card - A container component providing background color and rounded corners for grouping related content, supporting customizable border radius and color.
• Field - A layout component grouping a title label with associated content, supporting inverse color scheme for titles.
• TransactionScreenTemplate - A reusable screen template component that provides functionality for sending transactions. It has confirmation dialogs, status tracking, and multisig account warnings.

5. Added lib/blockie to generate account avatars based on the address. Lib is reused from Ethereum's Metamask. Refactor was done to make it more readable and converted to ES6 syntax to use in the wallet. Also added some configuration abilities via class constructor to setup color ranges to meet application color theme (hue, saturation and lightness).

6. Added test helpers, fixture builders, improved mocking functions.

7. Covered all new screens with tests. Added additional tests for components to reach the test coverage requirements.

8. Improved some existing screen tests - defined constants, etc to make it better readable and maintainable.

9. Refactor main root app component - App.js. Now it is located under src/app directory. Some logic is moved to internal hooks (src/app/hooks), RootLayout which defines app main layout is now in layout directory (src/app/layout). Improved component readability.

10. Setup account and token configs. Also defined their image resolutions. Now we can specify know accounts and tokens and resolve them by their address and token (mosaic) id into their name and image. Used in AccountView, AccountAvatar, TokenView and TokenAvatar components. To resolve this data need to first use resolution functions from utils/account and utils/token that return name and imageId if the entry is in the config.

11. Additional global hooks were added.

[codecov]

Codecov Report

❌ Patch coverage is 95.89770% with 239 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.54%. Comparing base (c187157) to head (43b484c).
⚠️ Report is 1 commits behind head on dev.

Files with missing lines	Patch %	Lines
wallet/symbol/mobile/src/screens/send/Send.jsx	89.21%	30 Missing and 3 partials ⚠️
...ymbol/mobile/src/components/features/TableView.jsx	86.66%	28 Missing ⚠️
...bol/mobile/src/components/controls/InputAmount.jsx	86.50%	16 Missing and 1 partial ⚠️
...symbol/mobile/src/components/controls/Dropdown.jsx	94.93%	11 Missing and 1 partial ⚠️
...eenTemplate/components/TransactionStatusDialog.jsx	93.68%	11 Missing and 1 partial ⚠️
.../mobile/src/components/display/ActivityLogView.jsx	93.25%	11 Missing ⚠️
...e/src/screens/settings/components/SettingsItem.jsx	83.58%	11 Missing ⚠️
...et/symbol/mobile/src/components/display/Amount.jsx	88.00%	9 Missing ⚠️
...actionScreenTemplate/TransactionScreenTemplate.jsx	95.36%	9 Missing ⚠️
...bol/mobile/src/components/controls/FeeSelector.jsx	96.01%	4 Missing and 4 partials ⚠️
... and 29 more

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #1897      +/-   ##
==========================================
- Coverage   96.14%   95.54%   -0.60%     
==========================================
  Files         343      146     -197     
  Lines       23803    10042   -13761     
  Branches      402      554     +152     
==========================================
- Hits        22885     9595   -13290     
+ Misses        905      422     -483     
- Partials       13       25      +12     

Flag	Coverage Δ
bridge	?
explorer-frontend	?
explorer-nodewatch	?
explorer-rest	?
faucet-authenticator	?
faucet-backend	?
faucet-frontend	?
lightapi-python	?
tools-shoestring	?
tools-vanity	?
wallet-common-core	?
wallet-common-ethereum	?
wallet-common-symbol	?
wallet-mobile-symbol	95.54% <95.89%> (+2.57%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
wallet/symbol/mobile/src/Router.js	97.52% <100.00%> (+23.95%)	⬆️
.../src/app/components/NetworkConnectionStatusBar.jsx	89.70% <ø> (ø)
.../symbol/mobile/src/app/components/PopupMessage.jsx	100.00% <100.00%> (ø)
...mbol/mobile/src/app/components/SystemStatusBar.jsx	100.00% <ø> (ø)
wallet/symbol/mobile/src/app/components/index.js	100.00% <100.00%> (ø)
wallet/symbol/mobile/src/app/hooks/index.js	100.00% <100.00%> (ø)
...bol/mobile/src/app/hooks/useTransactionListener.js	100.00% <100.00%> (ø)
...t/symbol/mobile/src/app/hooks/useWalletListener.js	100.00% <100.00%> (ø)
...t/symbol/mobile/src/app/hooks/useWalletWorkflow.js	100.00% <100.00%> (ø)
wallet/symbol/mobile/src/app/index.js	100.00% <100.00%> (ø)
... and 100 more

... and 266 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.