Create staking migration widget with Fuse approval flow, unified migration journey states, coverage, and demo app integration

examples/react-web/package.json

@@ -15,6 +15,7 @@
     "@goodwidget/ui": "workspace:*",
     "@goodwidget/embed": "workspace:*",
     "@goodwidget/claim-widget-theme-demo": "workspace:*",
+    "@goodwidget/staking-migration-widget": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-native-web": "^0.19.13"

examples/react-web/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { GoodWidgetProvider, useWallet, useHost } from '@goodwidget/core'
 import { ClaimWidget } from '@goodwidget/claim-widget-theme-demo'
+import { StakingMigrationWidget } from '@goodwidget/staking-migration-widget'
 import {
   getThemeManifest,
   MiniAppShell,
@@ -162,6 +163,13 @@ function OverrideShowcase() {
             <ClaimWidget />
           </YStack>
 
+          <YStack gap="$2">
+            <Text variant="label">StakingMigrationWidget:</Text>
+            <StakingMigrationWidget
+              migrationApiBaseUrl={import.meta.env.VITE_MIGRATION_API_BASE_URL}
+            />
+          </YStack>
+
           <Card>
             <Heading level={4}>Form Controls</Heading>
             <Input label="Name" placeholder="Enter your name..." />

examples/react-web/src/globals.d.ts

@@ -2,4 +2,12 @@ declare const process: {
   env: Record<string, string | undefined>
 }
 
+interface ImportMetaEnv {
+  readonly VITE_MIGRATION_API_BASE_URL?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
 declare function setImmediate(callback: (...args: unknown[]) => void, ...args: unknown[]): number

examples/storybook/package.json

@@ -13,6 +13,7 @@
     "@goodwidget/ui": "workspace:*",
     "@goodwidget/claim-widget-theme-demo": "workspace:*",
     "@goodwidget/citizen-claim-widget": "workspace:*",
+    "@goodwidget/staking-migration-widget": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-native-web": "^0.19.13",

examples/storybook/src/stories/design-system/Stepper.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Stepper, Text, YStack, type StepperStepItem } from '@goodwidget/ui'
+
+const meta: Meta<typeof Stepper> = {
+  title: 'Design System/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const STEPS: StepperStepItem[] = [
+  { id: 'connect', title: 'Connect wallet', status: 'completed' },
+  { id: 'approve', title: 'Approve transaction', status: 'completed' },
+  { id: 'submit', title: 'Submit migration', status: 'active', description: 'Waiting for wallet confirmation.' },
+  { id: 'bridge', title: 'Bridge to Celo', status: 'pending' },
+  { id: 'stake', title: 'Stake on Celo', status: 'pending' },
+  { id: 'confirm', title: 'Confirm receipt', status: 'pending' },
+]
+
+export const TransactionFlow: Story = {
+  render: () => (
+    <YStack width={420}>
+      <Stepper
+        steps={STEPS}
+        activeStepId="submit"
+        header={<Text fontWeight="700">Transaction steps</Text>}
+        maxHeight={280}
+      />
+    </YStack>
+  ),
+}

examples/storybook/src/stories/staking-migration-widget/StakingMigrationWidget.stories.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { YStack } from '@goodwidget/ui'
+import {
+  StakingMigrationWidget,
+  derivePrimaryAction,
+  derivePrimaryLabel,
+  type MigrationStep,
+  type StakingMigrationWidgetAdapterFactory,
+  type StakingMigrationWidgetState,
+  type StakingMigrationWidgetStatus,
+} from '@goodwidget/staking-migration-widget'
+import { createCustodialEip1193Provider } from '../../fixtures/custodialEip1193'
+
+function createMockState(
+  status: StakingMigrationWidgetStatus,
+  overrides: {
+    stakedAmount?: string
+    stakedAmountRaw?: bigint
+    completedSteps?: MigrationStep[]
+    activeStep?: MigrationStep | null
+    failedStep?: MigrationStep | null
+    error?: string | null
+    hasRequiredConfig?: boolean
+    isWrongNetwork?: boolean
+  } = {},
+): StakingMigrationWidgetState {
+  const stakedAmountRaw = overrides.stakedAmountRaw ?? 250000n
+  const state: StakingMigrationWidgetState = {
+    status,
+    address: '0x329377cbeeF39f01b0Ea04B80465c9eB47D3ED1',
+    chainId: 122,
+    stakedAmount: overrides.stakedAmount ?? '2500',
+    stakedAmountRaw,
+    stakedTokenSymbol: 'sG$',
+    hasRequiredConfig: overrides.hasRequiredConfig ?? true,
+    isWrongNetwork: overrides.isWrongNetwork ?? false,
+    isBalanceLoading: false,
+    completedSteps: overrides.completedSteps ?? [],
+    activeStep: overrides.activeStep ?? null,
+    failedStep: overrides.failedStep ?? null,
+    approvalTxHash: '0xapprovalhash',
+    migrationId: 'migration-1',
+    error: overrides.error ?? null,
+    primaryAction: 'none',
+    primaryLabel: '',
+  }
+  const primaryAction = derivePrimaryAction(state)
+  return {
+    ...state,
+    primaryAction,
+    primaryLabel: derivePrimaryLabel(state, primaryAction),
+  }
+}
+
+function createAdapterFactory(
+  status: StakingMigrationWidgetStatus,
+  overrides: Parameters<typeof createMockState>[1] = {},
+): StakingMigrationWidgetAdapterFactory {
+  return () => ({
+    state: createMockState(status, overrides),
+    actions: {
+      connect: async () => {},
+      switchToFuse: async () => {},
+      refresh: async () => {},
+      approveAndMigrate: async () => {},
+      retryMigration: async () => {},
+    },
+  })
+}
+
+function StoryShell({ adapterFactory }: { adapterFactory: StakingMigrationWidgetAdapterFactory }) {
+  try {
+    const provider = createCustodialEip1193Provider()
+    return (
+      <YStack style={{ width: 420 }}>
+        <StakingMigrationWidget provider={provider} adapterFactory={adapterFactory} />
+      </YStack>
+    )
+  } catch (error: unknown) {
+    return (
+      <YStack style={{ width: 420 }}>
+        {error instanceof Error ? error.message : 'Custodial fixture not configured'}
+      </YStack>
+    )
+  }
+}
+
+const meta: Meta<typeof StakingMigrationWidget> = {
+  title: 'Widgets/StakingMigrationWidget',
+  component: StakingMigrationWidget,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const EmptyBalance: Story = {
+  render: () => (
+    <StoryShell
+      adapterFactory={createAdapterFactory('summary', {
+        stakedAmount: '0',
+        stakedAmountRaw: 0n,
+      })}
+    />
+  ),
+}
+
+export const Ready: Story = {
+  render: () => <StoryShell adapterFactory={createAdapterFactory('summary')} />,
+}
+
+export const WrongNetwork: Story = {
+  render: () => (
+    <StoryShell
+      adapterFactory={createAdapterFactory('wrong-network', {
+        isWrongNetwork: true,
+      })}
+    />
+  ),
+}
+
+export const ApprovalPending: Story = {
+  render: () => <StoryShell adapterFactory={createAdapterFactory('approval-pending')} />,
+}
+
+export const Migrating: Story = {
+  render: () => (
+    <StoryShell
+      adapterFactory={createAdapterFactory('migrating', {
+        completedSteps: ['unstake', 'bridge sent'],
+        activeStep: 'bridge received',
+      })}
+    />
+  ),
+}
+
+export const Success: Story = {
+  render: () => (
+    <StoryShell
+      adapterFactory={createAdapterFactory('success', {
+        completedSteps: ['unstake', 'bridge sent', 'bridge received', 'stake'],
+      })}
+    />
+  ),
+}
+
+export const Error: Story = {
+  render: () => (
+    <StoryShell
+      adapterFactory={createAdapterFactory('error', {
+        completedSteps: ['unstake', 'bridge sent'],
+        activeStep: 'bridge received',
+        failedStep: 'bridge received',
+        error: 'Bridge finalization timeout',
+      })}
+    />
+  ),
+}

packages/staking-migration-widget/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@goodwidget/staking-migration-widget",
+  "version": "0.1.0",
+  "description": "Fuse staking migration widget for moving sG$ positions to Celo savings",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./element": {
+      "types": "./dist/element.d.ts",
+      "import": "./dist/element.js",
+      "require": "./dist/element.cjs"
+    },
+    "./register": {
+      "types": "./dist/register.d.ts",
+      "import": "./dist/register.js",
+      "require": "./dist/register.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist .turbo"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@goodwidget/core": "workspace:*",
+    "@goodwidget/embed": "workspace:*",
+    "@goodwidget/ui": "workspace:*",
+    "viem": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0"
+  }
+}