feat(vara-eth-idea): improve program init and balance top up UX

[nikitayutanov]

No description provided.

[Copilot]

Pull request overview

This pull request improves the user experience for program initialization and balance top-up operations by adding visual loading states and implementing state change watchers. The changes introduce a new component for handling balance top-ups and refactor the program page to provide better feedback during asynchronous operations.

Changes:

• Added a new TopUpExecBalance component that handles the approval and top-up flow with improved loading states
• Implemented useWatchProgramStateChange hook to watch for program state changes after initialization and balance top-ups
• Enhanced the Button component to support flexible loading spinner positioning (start, center, end)
• Added loading spinners to both the program initialization status badge and executable balance display

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
idea/vara-eth/frontend/src/pages/program/program.tsx	Updated to use new watch hooks and TopUpExecBalance component, added loading states for init and balance operations
idea/vara-eth/frontend/src/pages/program/program.module.scss	Added spinner animations and styling for status and balance loading indicators
idea/vara-eth/frontend/src/features/sails/lib.ts	Added optional isEnabled field to SailsAction type
idea/vara-eth/frontend/src/features/sails/components/sails-program-actions/sails-program-actions.tsx	Refactored to accept init configuration object with callbacks and enabled state
idea/vara-eth/frontend/src/features/sails/components/sails-action/sails-action.tsx	Added support for disabling actions via isEnabled prop
idea/vara-eth/frontend/src/features/programs/ui/top-up-exec-balance/top-up-exec-balance.tsx	New component that encapsulates the approve and top-up flow with proper loading states
idea/vara-eth/frontend/src/features/programs/lib/hooks/use-watch-program-state-change.ts	New hook that watches for program state changes with configurable conditions and timeout
idea/vara-eth/frontend/src/features/programs/lib/hooks/use-executable-balance-top-up.ts	Removed (replaced by TopUpExecBalance component)
idea/vara-eth/frontend/src/app/api/use-approve-wrapped-vara.ts	Removed (logic moved into TopUpExecBalance component)
idea/vara-eth/frontend/src/components/ui/button/button.tsx	Enhanced to support loading spinner positioning
idea/vara-eth/frontend/src/components/ui/button/button.module.scss	Added CSS for loading position variants and removed unused classes
idea/vara-eth/frontend/src/components/wallet/wallet-button.module.scss	Added gap override to maintain existing wallet button layout with new button defaults
idea/vara-eth/frontend/src/assets/abi.ts	Removed (appears to be unused)
Various index.ts files	Updated exports to reflect new and removed modules

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.