add staking to hub (#811)

* chore: add wagmi configuration and providers for Status Hub

* feat: add new icons, promo modal for staking page, integrate connectkit to stake form

* feat: implement progress dialog and state management for vault operations

* chore: rename progress dialog to action status component and where it is used

* feat: integrate SIWE for wallet authentication and enhance vault state management

* feat: update vault management with new table and modal components, integrate react-query and react-table

* feat: integrate @tanstack/react-query for improved data fetching and state management in vault components

* feat: enhance vault management with new compound modal and lock configuration, update table actions for improved user experience

* refactor: introduce withdraw modal and enhance lock configuration modal for improved vault management

* feat: enhance vault management with new hooks for account vaults and faucet integration, update UI components for improved user experience

* feat: enhance vault management with new hooks for token approval, withdrawal, and staking; update UI components and integrate new icons for improved user experience

* feat: integrate emergency mode functionality and enhance slider configuration for vault lockup periods; update UI components for improved user experience

* feat: enhance vault selection UI with lock status indicators and improve table overflow handling for better user experience

* refactor: simplify vault table action handlers by removing unnecessary onClick logic for modal state management

* feat: enhance vault management by adding new hooks for staking, multiplier points, and vault locking; update UI components and improve state management for better user experience

* chore: add changeset

* chore: remove unused eslint-disable comments from vault-related components and update button variants for consistency

* feat: add staking constants and improve hooks for vault management;

* chore: update vault-related UI components for consistency and improve styling; update zod dependency version

* chore: add wagmi configuration and providers for Status Hub

* feat: add new icons, promo modal for staking page, integrate connectkit to stake form

* feat: implement progress dialog and state management for vault operations

* chore: rename progress dialog to action status component and where it is used

* feat: integrate SIWE for wallet authentication and enhance vault state management

* feat: update vault management with new table and modal components, integrate react-query and react-table

* feat: integrate @tanstack/react-query for improved data fetching and state management in vault components

* feat: enhance vault management with new compound modal and lock configuration, update table actions for improved user experience

* refactor: introduce withdraw modal and enhance lock configuration modal for improved vault management

* feat: enhance vault management with new hooks for account vaults and faucet integration, update UI components for improved user experience

* feat: enhance vault management with new hooks for token approval, withdrawal, and staking; update UI components and integrate new icons for improved user experience

* feat: integrate emergency mode functionality and enhance slider configuration for vault lockup periods; update UI components for improved user experience

* feat: enhance vault selection UI with lock status indicators and improve table overflow handling for better user experience

* refactor: simplify vault table action handlers by removing unnecessary onClick logic for modal state management

* feat: enhance vault management by adding new hooks for staking, multiplier points, and vault locking; update UI components and improve state management for better user experience

* chore: add changeset

* chore: remove unused eslint-disable comments from vault-related components and update button variants for consistency

* feat: add staking constants and improve hooks for vault management;

* chore: update vault-related UI components for consistency and improve styling; update zod dependency version

* chore: apply commit changes

* fix: remove chain id definition in hooks

* chore: add button size 24

* chore: fix box-border style

* remove border-box sizing

* chore: update images

* chore: update button to add danger variant

* chore: remove button classNames

* f

checkout from #821

---------

Co-authored-by: iamonuwa <[email protected]>
Co-authored-by: nonuwa-oss <[email protected]>
Co-authored-by: Felicio <[email protected]>

Author: 3 people

.changeset/pretty-wasps-build.md

@@ -0,0 +1,62 @@
+---
+'@status-im/components': patch
+'hub': major
+---
+
+### Staking & Vault Management System
+
+- **New Hooks:**
+
+  - Staking functionality with multiplier points tracking
+  - Vault locking mechanisms
+  - Token approval and withdrawal flows
+  - Account vaults management
+  - Faucet integration for testing
+  - Emergency mode functionality
+
+- **User Experience:**
+  - Lock status indicators in vault selection UI
+  - Improved table overflow handling
+  - Enhanced slider configuration for vault lockup periods
+
+### UI Components
+
+- **New Modals:**
+
+  - Withdraw modal for vault withdrawals
+  - Lock configuration modal for vault locking
+  - Compound modal for compounding rewards
+  - Promo modal for staking page
+  - Action status component (formerly progress dialog)
+
+- **UI Improvements:**
+  - New icons added
+  - Enhanced vault table components
+  - Better modal state management
+
+### Authentication & Web3 Integration
+
+- **SIWE Integration:**
+  - Sign-In With Ethereum (SIWE) for wallet authentication
+  - ConnectKit integration for wallet connection
+  - Wagmi configuration and providers setup
+
+### State Management & Data Fetching
+
+- **Dependencies Added:**
+  - `@tanstack/react-query` for server state management
+  - `react-table` for table data management
+  - Improved overall state management patterns
+
+### Emergency Features
+
+- Emergency mode functionality for vault operations
+- Enhanced safety controls for vault lockup periods
+
+## Refactoring & Maintenance
+
+### Code Quality Improvements
+
+- Simplified vault table action handlers
+- Removed unnecessary onClick logic for modal state management
+- Renamed progress dialog to action status component for clarity

.npmrc

@@ -17,4 +17,4 @@ engine-strict=true
 ignore-workspace-root-check=true
 ; https://pnpm.io/npmrc#node-options
 ; why: https://github.com/vercel/next.js/discussions/70423
-node-options=--network-family-autoselection-attempt-timeout=500
+; node-options=--network-family-autoselection-attempt-timeout=500

apps/hub/.npmrc

@@ -1,6 +1,6 @@
 ; https://pnpm.io/npmrc#node-options
 ; why: https://github.com/vercel/next.js/discussions/70423
-node-options=--network-family-autoselection-attempt-timeout=1000
+# node-options=--network-family-autoselection-attempt-timeout=1000
 ; https://pnpm.io/npmrc#node-version
 node-version=20.18.0
 ; https://pnpm.io/npmrc#engine-strict

apps/hub/package.json

@@ -14,12 +14,17 @@
     "clean": "rimraf .next .vercel/output node_modules"
   },
   "dependencies": {
+    "@hookform/devtools": "^4.3.1",
+    "@hookform/resolvers": "^3.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@scure/base": "^1.2.6",
     "@status-im/colors": "workspace:*",
     "@status-im/components": "workspace:*",
     "@status-im/icons": "workspace:*",
     "@status-im/status-network": "workspace:*",
     "@status-im/wallet": "workspace:*",
-    "@tanstack/react-query": "5.66.0",
+    "@tanstack/react-query": "^5.90.2",
+    "@tanstack/react-table": "^8.21.3",
     "@vercel/analytics": "^1.5.0",
     "connectkit": "^1.9.0",
     "cva": "1.0.0-beta.1",
@@ -29,9 +34,11 @@
     "pino-pretty": "^13.1.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hook-form": "^7.45.1",
     "rehype-slug": "^6.0.0",
+    "siwe": "^2.3.2",
     "ts-pattern": "^5.6.2",
-    "viem": "2.x",
+    "viem": "^2.21.1",
     "wagmi": "2.15.2",
     "zod": "^3.24.1"
   },

apps/hub/public/modal/bg-gradient.png

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react'
+
+const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={50}
+    height={50}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#E95460"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      d="m10.269 10.27 29.46 29.462M25 45.833c11.506 0 20.834-9.328 20.834-20.834S36.506 4.166 25 4.166 4.167 13.493 4.167 24.999c0 11.506 9.327 20.834 20.833 20.834Z"
+    />
+  </svg>
+)
+export default CloseIcon