Project: Approver UX pattern implementation

[kyranjamie]

Approver UX

The Approver pattern is a reusable suite of components that guide a user through the process of approving an action

Figma link →

This issue is the home for engineering concerns relating to the Approval UX.

The approver pattern implementation is designed to be a generic flow that can be composed together to perform any approval action. It must not contain any logic specific to a single use-case. The visual designs do communicate this engineering decision.

Note

This project is for both Web and React Native. To work in parallel, we'll first make a start on the web implementation, until the project to house cross-platform components in the mono repo is complete.

Tasks

• Implement Approver feature for RN #4996
  • This should be a lightweight component used in many places.
• Build AccountInfoItem component #5008
• Build CodeViewer component #5009
• Build HorizontalRuleSeparator component #5010
• Build DescriptionList design system component #5108
• Build SigningAccountDetails feature #5107
• Refactor RPC Sign BIP-322 Message to use Approver #4997
• Refactor RPC Sign PSBT to use Approver #5000
  • Consider changes proposed in Prevent user accidentally paying too much in fee by showing a warning when triggering a PSBT #5346
• Refactor RPC Sign Stacks transaction to use Approver #4999
• Refactor RPC Send Bitcoin to use Approver #4998
• Refactor DLC flow to use Approver #5001
• Refactor RPC Get Addresses flow to use Approver #5002
• Refactor: Migrate Send inscription flow to use signPsbt #5336
• Refactor: Migrate Send bitcoin flow to use signPsbt #5337
• Refactor: Migrate Send BRC-20 flow to use signPsbt #5338
• Refactor: Migrate Send Stacks flow in extension to use signStacksTransaction method #5339

Components in Approver UX design

Interactive animated button

The latest designs have some cool interactivity states, where the button changes colour/shape during a pending flow.

Previously, these were normal buttons, so didn't need to be part of the approver UX. As they now consume approver ux state, the primary button might belong in the core component as Approver.Button.

This button wrapper could handle the animations, and read state from the context.

Outcomes

These don't need wrapping into separate components, as they're just data passed to Pressable. A wrapper would only drill props and add no further value.