new design components

[jonybur]

babylonlabs-io/simple-staking#1190
babylonlabs-io/simple-staking#1191
babylonlabs-io/simple-staking#1192
babylonlabs-io/simple-staking#1204

[Copilot]

Pull Request Overview

This PR introduces a suite of new design components to support preview modals, fee breakdowns, and amount input subsections, along with a common SubSection wrapper and utility helpers.

• Added a responsive PreviewModal component and its Storybook stories.
• Introduced FeesSection with related subcomponents (FeeItem, BTCFeeRate, BTCFeeAmount, BBNFeeAmount, Total) and stories.
• Created AmountSubsection form input component, updated currency helpers, and exposed SubSection wrapper.

Reviewed Changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/widgets/new-design/PreviewModal/index.tsx	Added re-export for the PreviewModal entry point
src/widgets/new-design/PreviewModal/PreviewModal.tsx	Implemented the main PreviewModal component
src/widgets/new-design/PreviewModal/PreviewModal.stories.tsx	Storybook stories for PreviewModal
src/widgets/new-design/FeesSection/index.ts	Re-exports for FeesSection subcomponents
src/widgets/new-design/FeesSection/Total.tsx	Implemented Total fee component
src/widgets/new-design/FeesSection/FeesSection.tsx	FeesSection container and layout
src/widgets/new-design/FeesSection/FeesSection.stories.tsx	Storybook stories for FeesSection
src/widgets/new-design/FeesSection/FeeItem.tsx	FeeItem layout component
src/widgets/new-design/FeesSection/BTCFeeRate.tsx	BTC fee rate component with edit button
src/widgets/new-design/FeesSection/BTCFeeAmount.tsx	BTC fee amount formatting component
src/widgets/new-design/FeesSection/BBNFeeAmount.tsx	BBN fee amount formatting component
src/widgets/new-design/AmountSubsection/index.tsx	Re-export for AmountSubsection
src/widgets/new-design/AmountSubsection/AmountSubsection.tsx	AmountSubsection form input component
src/widgets/new-design/AmountSubsection/AmountSubsection.stories.tsx	Storybook stories for AmountSubsection
src/utils/helpers.ts	Added formatCurrency, calculateTokenValueInCurrency, and maxDecimals helpers
src/components/SubSection/*	Introduced SubSection wrapper, re-exports, and stories
src/index.tsx	Updated main exports to include new widgets and SubSection

Comments suppressed due to low confidence (4)

src/widgets/new-design/PreviewModal/PreviewModal.tsx:35

• [nitpick] The interface name Info is too generic; consider renaming it to something more descriptive like ProviderInfo or EntityInfo to clarify its purpose.

interface Info {

src/widgets/new-design/PreviewModal/PreviewModal.tsx:64

• The PreviewModal component is newly added without corresponding unit tests—consider adding tests for its rendering, responsiveness, and button interactions.

export const PreviewModal = ({

src/widgets/new-design/FeesSection/FeesSection.tsx:24

• There's no unit or integration test covering FeesSection; consider adding tests for its conditional rendering (e.g., when bbnFeeAmount is undefined).

export function FeesSection({

src/widgets/new-design/AmountSubsection/AmountSubsection.tsx:27

• AmountSubsection lacks tests for form integration and balance display; consider adding cases for displayBalance on/off and validation handling.

export const AmountSubsection = ({

[gbarkhatov]

Looks good, multiple minor UI suggestions

[jrwbabylonlab]

@jonybur could u check with mobile device for all components?

Will address on a separate PR