Add @goodwidget/savings-widget with SDK-backed deposit/withdraw flows and Storybook coverage

examples/storybook/package.json

@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@goodwidget/core": "workspace:*",
+    "@goodwidget/savings-widget": "workspace:*",
     "@goodwidget/ui": "workspace:*",
     "@goodwidget/claim-widget-theme-demo": "workspace:*",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "react-native-web": "^0.19.13"
+    "react-native-web": "^0.19.13",
+    "viem": "^2.31.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.6.17",

examples/storybook/src/stories/ClaimWidget.stories.tsx

@@ -10,12 +10,12 @@
  */
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import { ClaimWidget } from '@goodwidget/claim-widget'
+import { ClaimWidget } from '@goodwidget/claim-widget-theme-demo'
 import { YStack } from '@goodwidget/ui'
-import { createMockEip1193Provider } from '../fixtures/mockEip1193'
+import { createCustodialEip1193Provider } from '../fixtures/custodialEip1193'
 
 // Stable mock provider — created once at module level to prevent re-render churn.
-const mockProvider = createMockEip1193Provider()
+const mockProvider = createCustodialEip1193Provider()
 
 /** Cobalt brand overrides (matches the "Host / Cobalt" tab in ThemePlayground). */
 const cobaltOverrides = {

examples/storybook/src/stories/SavingsWidget.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SavingsWidget } from '@goodwidget/savings-widget'
+import { YStack } from '@goodwidget/ui'
+import { createCustodialEip1193Provider } from '../fixtures/custodialEip1193'
+
+const mockProvider = createCustodialEip1193Provider()
+
+const meta: Meta<typeof SavingsWidget> = {
+  title: 'Widgets/SavingsWidget',
+  component: SavingsWidget,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+
+export default meta
+
+type Story = StoryObj<typeof SavingsWidget>
+
+export const Default: Story = {
+  render: () => (
+    <YStack style={{ width: 420 }}>
+      <SavingsWidget provider={mockProvider} />
+    </YStack>
+  ),
+}
+
+export const Disconnected: Story = {
+  render: () => (
+    <YStack style={{ width: 420 }}>
+      <SavingsWidget connectWallet={() => undefined} />
+    </YStack>
+  ),
+}

examples/storybook/src/stories/ThemePlayground.stories.tsx

@@ -13,11 +13,11 @@
  */
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import { ClaimWidget } from '@goodwidget/claim-widget'
+import { ClaimWidget } from '@goodwidget/claim-widget-theme-demo'
 import { Card, Heading, Text, Alert, YStack } from '@goodwidget/ui'
-import { createMockEip1193Provider } from '../fixtures/mockEip1193'
+import { createCustodialEip1193Provider } from '../fixtures/custodialEip1193'
 
-const mockProvider = createMockEip1193Provider()
+const mockProvider = createCustodialEip1193Provider()
 
 const meta: Meta = {
   title: 'Theme/ThemePlayground',

packages/savings-widget/README.md

@@ -0,0 +1,21 @@
+# @goodwidget/savings-widget
+
+A GoodDollar savings widget built for GoodWidget that uses `@goodsdks/savings-sdk` for deposit, withdraw, and reward-claim flows.
+
+## Usage
+
+```tsx
+import { SavingsWidget } from '@goodwidget/savings-widget'
+
+export function App({ provider }) {
+  return <SavingsWidget provider={provider} />
+}
+```
+
+## Wallet onboarding
+
+If wallet connection is handled outside the widget, pass `connectWallet`:
+
+```tsx
+<SavingsWidget provider={provider} connectWallet={() => appKit.open()} />
+```

packages/savings-widget/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@goodwidget/savings-widget",
+  "version": "0.1.0",
+  "description": "GoodDollar savings widget powered by @goodsdks/savings-sdk",
+  "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"
+    }
+  },
+  "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": {
+    "@goodsdks/savings-sdk": "^1.0.0",
+    "@goodwidget/core": "workspace:*",
+    "@goodwidget/ui": "workspace:*",
+    "viem": "^2.31.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"
+  }
+}