add staking to hub

.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/package.json

@@ -14,25 +14,31 @@
     "clean": "rimraf .next .vercel/output node_modules"
   },
   "dependencies": {
+    "@hookform/devtools": "^4.3.1",
+    "@hookform/resolvers": "^3.1.1",
     "@status-im/colors": "workspace:*",
-    "@status-im/icons": "workspace:*",
     "@status-im/components": "workspace:*",
+    "@status-im/icons": "workspace:*",
     "@status-im/status-network": "workspace:*",
+    "@tanstack/react-table": "^8.21.3",
     "@vercel/analytics": "^1.5.0",
     "cva": "1.0.0-beta.1",
     "framer-motion": "^12.0.6",
     "next": "15.1.6",
     "next-mdx-remote": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.45.1",
     "rehype-slug": "^6.0.0",
+    "siwe": "^2.3.2",
     "ts-pattern": "^5.6.2",
-    "zod": "^3.24.1"
+    "viem": "^2.21.1",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@next/eslint-plugin-next": "15.3.0",
     "@status-im/eslint-config": "workspace:*",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

apps/hub/src/app/_components/icons/close-icon.tsx

@@ -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

apps/hub/src/app/_components/icons/index.ts

@@ -1,5 +1,6 @@
 // Custom Figma icons exported directly from design
 export { default as BridgeIcon } from './bridge-icon'
+export { default as CloseIcon } from './close-icon'
 export { default as DepositIcon } from './deposit-icon'
 export { default as DiscoverIcon } from './discover-icon'
 export { default as DocsIcon } from './docs-icon'
@@ -12,8 +13,12 @@ export { default as LaunchIcon } from './launch-icon'
 export { default as MintIcon } from './mint-icon'
 export { default as PercentIcon } from './percent-icon'
 export { default as PlusIcon } from './plus-icon'
+export { default as ProcessingIcon } from './processing-icon'
+export { default as RejectIcon } from './reject-icon'
 export { default as SettingsIcon } from './settings-icon'
+export { default as SNTIcon } from './snt-icon'
 export { default as StakeIcon } from './stake-icon'
 export { default as SubmitAppIcon } from './submit-app-icon'
 export { default as SwapIcon } from './swap-icon'
 export { default as TwitterIcon } from './twitter-icon'
+export { default as VaultIcon } from './vault-icon'

apps/hub/src/app/_components/icons/launch-icon.tsx

@@ -1,52 +1,27 @@
-export default function LaunchIcon({
-  className = '',
-  ...props
-}: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      {...props}
-    >
-      <g clipPath="url(#clip0_2815_575)">
-        <path
-          d="M3.75004 13.7498C2.50004 14.7998 2.08337 17.9164 2.08337 17.9164C2.08337 17.9164 5.20004 17.4998 6.25004 16.2498C6.84171 15.5498 6.83337 14.4748 6.17504 13.8248C5.85113 13.5156 5.42445 13.337 4.9769 13.3231C4.52934 13.3093 4.09244 13.4612 3.75004 13.7498Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M10 12.4996L7.5 9.99956C7.94345 8.84908 8.50184 7.74627 9.16667 6.70789C10.1377 5.15538 11.4897 3.8771 13.0942 2.99463C14.6986 2.11217 16.5022 1.65486 18.3333 1.66622C18.3333 3.93289 17.6833 7.91622 13.3333 10.8329C12.2807 11.4985 11.164 12.0568 10 12.4996Z"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M7.50004 10.0009H3.33337C3.33337 10.0009 3.79171 7.47591 5.00004 6.66758C6.35004 5.76758 9.16671 6.66758 9.16671 6.66758"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M10 12.5007V16.6673C10 16.6673 12.525 16.209 13.3333 15.0007C14.2333 13.6507 13.3333 10.834 13.3333 10.834"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2815_575">
-          <rect width="20" height="20" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
+import type { SVGProps } from 'react'
+
+const LaunchIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={32}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#7140FD"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M6 22c-2 1.68-2.666 6.667-2.666 6.667S8.321 28 10.001 26c.946-1.12.933-2.84-.12-3.88A2.907 2.907 0 0 0 6 22ZM16 20.002l-4-4a29.328 29.328 0 0 1 2.667-5.267 17.172 17.172 0 0 1 14.666-8.067c0 3.627-1.04 10-8 14.667A29.798 29.798 0 0 1 16 20.002Z"
+    />
+    <path
+      stroke="#7140FD"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 16H5.335s.733-4.04 2.667-5.333c2.16-1.44 6.666 0 6.666 0M16 19.999v6.666s4.04-.733 5.333-2.666c1.44-2.16 0-6.667 0-6.667"
+    />
+  </svg>
+)
+export default LaunchIcon

apps/hub/src/app/_components/icons/processing-icon.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react'
+
+const ProcessingIcon = ({ ...props }: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={50}
+    height={50}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#7140FD"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      d="M43.75 25A18.75 18.75 0 0 0 25 6.25a20.313 20.313 0 0 0-14.042 5.708L6.25 16.667"
+    />
+    <path
+      stroke="#7140FD"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      d="M6.25 6.25v10.417h10.417M6.25 25A18.75 18.75 0 0 0 25 43.75a20.312 20.312 0 0 0 14.042-5.708l4.708-4.709"
+    />
+    <path
+      stroke="#7140FD"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      d="M33.334 33.336h10.417v10.417"
+    />
+  </svg>
+)
+export default ProcessingIcon

apps/hub/src/app/_components/icons/reject-icon.tsx

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+const RejectIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={50}
+    height={50}
+    fill="none"
+    {...props}
+  >
+    <g
+      stroke="#E95460"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={4}
+      clipPath="url(#a)"
+    >
+      <path 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" />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h50v50H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default RejectIcon

apps/hub/src/app/_components/icons/snt-icon.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image'
+
+export default function SNTIcon() {
+  return (
+    <div className="relative size-8">
+      <Image
+        src="/vaults/snt.png"
+        alt="SNT"
+        width="64"
+        height="64"
+        quality="100"
+      />
+      <Image
+        src="/tokens/karma.png"
+        width="24"
+        height="24"
+        alt="Karma"
+        className="absolute -bottom-0.5 -right-1 size-[14px] rounded-full border-2 border-white-100"
+      />
+    </div>
+  )
+}

apps/hub/src/app/_components/icons/vault-icon.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+export default function VaultIcon({
+  className,
+  ...props
+}: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={50}
+      height={50}
+      fill="none"
+      className={className}
+      {...props}
+    >
+      <path
+        stroke="#7140FD"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={4}
+        d="M39.583 6.25H10.417a4.167 4.167 0 0 0-4.167 4.167v29.166a4.167 4.167 0 0 0 4.167 4.167h29.166a4.167 4.167 0 0 0 4.167-4.167V10.417a4.167 4.167 0 0 0-4.167-4.167Z"
+      />
+      <path
+        stroke="#7140FD"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={4}
+        d="M15.732 16.826a1.042 1.042 0 1 0 0-2.084 1.042 1.042 0 0 0 0 2.084ZM16.458 16.459l5.543 5.553M34.27 16.826a1.042 1.042 0 1 0 0-2.084 1.042 1.042 0 0 0 0 2.084ZM28.018 22.012l5.523-5.553M15.744 35.277a1.042 1.042 0 1 0 0-2.084 1.042 1.042 0 0 0 0 2.084ZM16.459 33.542l5.494-5.554M34.21 35.349a1.042 1.042 0 1 0 0-2.083 1.042 1.042 0 0 0 0 2.083ZM28.008 28.047l5.533 5.495M25 29.167a4.167 4.167 0 1 0 0-8.333 4.167 4.167 0 0 0 0 8.333Z"
+      />
+    </svg>
+  )
+}