Refactor components to functions

[arhtudormorar]

Feature

Migrate internal Stencil web components to plain functional components to reduce the dist/web-components bundle size.

Root cause

Every component decorated with @Component({ tag: 'mvx-...' }) gets registered as a custom element and included in the web components bundle, even when the component is only used internally. Internal components — those never consumed directly by mx-sdk-dapp, mx-wallet-dapp, or mx-template-dapp — don't need to be web components.

Fix

Converted 36 internal components from Stencil class components (@Component + @Prop + render()) to plain exported functions. Parents were updated to import and call these functions directly instead of using custom element tags.

Groups migrated:

• Icons (24): All SVG icon wrappers in src/assets/icons/ — arc-extension-provider-icon, arrow-right-icon, brave/edge/firefox/extension-provider-icon, circle-info-icon, default-transaction-icon-large/small, ledger-icon, ledger-provider-icon, magnifying-glass-icon, metamask-provider-icon, multiversx-logo/symbol-icon, passkey-provider-icon, shard-icon, spinner-icon, wallet-connect-app-gallery/store/google-play-icon, wallet-provider-icon, xportal-download-qr-icon, xportal-qr-code-preloader
• Toast sub-components (7): transaction-toast, transaction-toast-content, transaction-toast-details, transaction-toast-details-body, transaction-toast-progress kept as @Component (requires lifecycle hooks), simple-toast, generic-toast, custom-toast
• Wallet Connect sub-components (2): wallet-connect-download, wallet-connect-scan
• Ledger sub-components (2): ledger-confirm, ledger-intro
• Visual utilities (5): tooltip (wrapper), preloader, pagination, pagination-ellipsis, pagination-ellipsis-form

State management approach for migrated components with internal state:

Components that had @State() (e.g. transaction-toast-details expand/collapse, tooltips) were handled by:

• Passing isTooltipVisible + onVisibilityChange down from the nearest @State-capable ancestor (class components like address-table, data-with-explorer-link, transactions-table)
• Module-level Map keyed by toastId + onForceUpdate callback for toast-scoped state (transaction-toast-details, MvxTooltip in toast content)

mvx-transaction-toast-progress was intentionally left as a @Component class because it requires componentDidLoad, disconnectedCallback, and @Watch lifecycle hooks for its setInterval-based animation.

Additional changes

• All parent components updated: replaced <mvx-xxx /> JSX with direct function imports <XxxComponent />
• common/LedgerIntro/LedgerIntro.tsx updated to use LedgerIcon function directly
• Test files updated to reflect new rendered HTML (functional components render inline SVGs instead of custom element tags)
• explorer-link.spec.ts: removed unused ArrowRightIcon import

Contains breaking changes

[x] No

The exported web components API (mvx-* custom element tags consumed externally) is unchanged. Only internal composition changed.

Updated CHANGELOG

[] Yes

Testing

[x] User testing
[x] Unit tests

All 130 unit/e2e tests pass. Build produces clean output.

Bundle size: dist/web-components reduced from 2.1 MB → 1.1 MB (~48% reduction).

[gemini-code-assist]

Warning

Gemini is experiencing higher than usual traffic and was unable to create the summary. Please try again in a few hours by commenting /gemini summary.