Skip to content

[Feature] Create Staking migration widget (Fuse -> Celo savings) #40

@blueogin

Description

@blueogin

Short description of the new GoodWidget

Create a staking-migration-widget that helps users migrate their staked sG$ from Fuse staking to Celo savings.

The user action in the widget is approval only: user approves operator spend his erc20 sG$.
After approval, the widget sends the approval tx hash to the migration API, and the backend executes the migration.

Ship as @goodwidget/staking-migration-widget (React, React Native, Web Component), following @goodwidget/citizen-claim-widget.

Which repos and packages the AI should work with

Repo: GoodDollar/GoodWidget

  • packages/staking-migration-widget/ (new) — widget, adapter, embed
  • packages/core, packages/ui, packages/embed
  • examples/storybook/, tests/widgets/staking-migration-widget/
  • Pattern reference: packages/citizen-claim-widget/

External: GoodProtocol deployment.json (Fuse staking address);

Read first: AGENTS.md, ARCHITECTURE.md, docs/PACKAGING.md, docs/demo-environment.md, docs/architecture/theming-contract.md

UI implementation reference

Build a single card widget with clear migration progress.

During migrating, show these migration steps in the UI:

  1. unstake
  2. bridge sent
  3. bridge received
  4. stake

Each migration step must show status:

  • Spinner while that step is running
  • Done/check when completed
  • Error indicator if failed

Only one active spinner at a time. Completed steps stay marked as done.

User flows, states and behaviours

  1. Read user staked sG$ balance.
  2. If balance is zero, show empty state and disable migration action.
  3. User clicks approve/migrate.
  4. Wallet approval tx opens on Fuse and confirms.
  5. Widget calls migration API with approval tx hash.
  6. Widget shows migration steps live (unstakebridge sentbridge receivedstake).
  7. On success, show completion state and final confirmation.
  8. On failure, show which step failed and a clear message.

Required states:

  • summary
  • approval-pending
  • approval-failed
  • migrating
  • success
  • error
  • wrong-network
  • missing-config

User feedback requirements:

  • Always show current step and what is happening now
  • Keep completed steps visible for confidence
  • On error, show both the failed step and reason
  • Support retry from error state

Integration requirements:

  • Host provides migrationApiBaseUrl, migrationOperator, optional migrationApiToken
  • Keep provider-first architecture and existing package boundaries
  • No new public theme targets without approval

Create the plan (keep this section in the issue body)

Create the plan

Based on the above description create an execution plan in a new sub-issue and preserve the original issue content unchanged.
Do not execute the plan until given instructions to do so.

Sub-issue requirements:

  • Title format: [DRAFT][PLAN] <what issue is being planned>
  • Type: Task
  • Description must start with: <sub-issue title>
  • Link the sub-issue back to this parent issue.

Instructions when creating the plan:

  • Map relevant files that are too be used as reference from all repos mentioned
  • import existing @GoodDollar packages
  • Map new components that should be created. Assess when a new component should be created in the new savings widget package or made part of the reusable packages/ui

Plan specification required sections:

  • Required states, flows, and behaviors
  • Execution plan
  • acceptance criteria
  • human-reviewer checklist

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

Status
In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions