feat(staking): preview dialog for in-app staking + unstaking

[moo-onthelawn]

1. Implement preview confirmation dialog for staking and unstaking
2. Does some refactoring to reorg stake / unstake form files

Initially:

forms/
  StakeForm/
  UnstakeForm/

Now:

forms/
   StakingForms/
      shared/
        ValidatorName
        StakeRewardButtonAndReceipt
        StakePreviewContents
        StakeConfirmationButtonRow
      StakeForm/
        index
        StakeFormInputContents
        StakeFormPreviewContents
        ValidatorDropdown
      UnstakeForm/
        index
        UnstakeFormInputContents
        UnstakeFormPreviewContents

	Input	Preview
Stake
Unstake
Unstake multiple

---

Views

• New: views/forms/StakingForms/shared/StakePreviewContents

  • Used by StakeFormPreviewContents and UnstakeFormPreviewContents
  • Visual skeleton for the preview forms

• New: views/forms/StakingForms/shared/StakeConfirmationButtonRow

  • Used by StakePreviewContents

• Moved: views/StakeRewardButtonAndReceipt -> views/forms/StakingForms/shared/StakeRewardButtonAndReceipt

  • Used by StakePreviewContents

• Moved: components/ValidatorName -> views/forms/StakingForms/shared/ValidatorName

• StakeDialog

  • Updated to add steps to this dialog (editing inputs, and then previewing stake)
  • Also refactored a bit to take the logic out of StakeForm/index.ts - moved description into description prop of Dialog and LegalDisclaimer into footer prop

• StakeForm (moved from forms/StakeForm -> forms/StakingForms/StakeForm)

  • Added logic for different rendering based on step (preview vs input)
  • A lot of code shifted into StakeFormInputContents and StakeFormPreviewContents

• Deleted: StakeButtonAndReceipt, encapsulated into new: StakeFormInputContents

  • The existing stake form view

• New: StakeFormPreviewContents

  • The new stake form preview step

• UnstakeDialog

  • Updated to add steps to this dialog (editing inputs, and then previewing unstake)
  • Also refactored a bit to take the logic out of UnstakeForm/index.ts - moved description into description prop of Dialog

• UnstakeForm (moved from forms/UnstakeForm -> forms/StakingForms/UnstakeForm)

  • Github didn't seem to pick up that it moved

• Deleted: UnstakeButtonAndReceipt, encapsulated into new: UnstakeFormInputContents

  • The existing unstake form view

• New: UntakeFormPreviewContents

  • The new unstake form preview step

Components

• New: FastForwardIcon

• New: components/ValidatorIcons

  • Renders a group of ValidatorFaviconIcons slightly overlapping each other

• ValidatorFaviconIcon extracted into own component in components/ (from ValidatorName)

  • It's used without ValidatorName in several places

Styles/Mixins

• styles/formMixins
  • Added a stakingForm mixin for UnstakeForm and StakeForm
• styles/layoutMixins
  • Added textLineClamp which truncates text at 2 lines

Constants/Types

• constants/stakingForms.ts
  • Added enum for StakeFormSteps currently used by StakeDialog, will be used by UnstakeDialog

Packages

• package.json
  • bump localization

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
v4-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 9:46pm
v4-testnet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 9:46pm

[linear]

OTE-473 confirm state for stake/unstake

[rosepuppy]

Awesome job re-organizing! very cleanly done 🔥

[rosepuppy]

sweet!