withdraw

.changeset/famous-deers-sell.md

@@ -0,0 +1,6 @@
+---
+'@status-im/status-network': patch
+'hub': patch
+---
+
+add wallet connect

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

@@ -17,22 +17,23 @@
   "dependencies": {
     "@status-im/wallet": "workspace:*",
     "@trpc/client": "10.45.2",
-    "@trpc/server": "10.45.2",
     "@trpc/next": "10.45.2",
+    "@trpc/server": "10.45.2",
+    "next": "15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3.1.0",
+    "@next/eslint-plugin-next": "15.3.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.3.0",
-    "@eslint/eslintrc": "^3",
-    "globals": "^15.12.0"
+    "globals": "^15.12.0",
+    "typescript": "^5.6.2"
   },
   "engines": {
     "node": "20.x"

apps/hub/package.json

@@ -14,28 +14,43 @@
     "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",
     "@status-im/colors": "workspace:*",
-    "@status-im/icons": "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-table": "^8.21.3",
     "@vercel/analytics": "^1.5.0",
+    "connectkit": "^1.9.0",
+    "connectkit-next-siwe": "^0.3.0",
+    "cookie": "^1.0.2",
     "cva": "1.0.0-beta.1",
     "framer-motion": "^12.0.6",
-    "next": "15.1.6",
+    "iron-session": "^8.0.4",
+    "next": "15.3.0",
     "next-mdx-remote": "^5.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "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",
-    "zod": "^3.24.1"
+    "viem": "^2.21.1",
+    "wagmi": "2.15.2",
+    "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",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
     "eslint-config-next": "15.1.6",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "lint-staged": "^15.4.3",

apps/hub/postcss.config.mjs

@@ -3,6 +3,6 @@ const config = {
   plugins: {
     tailwindcss: {},
   },
-};
+}
 
-export default config;
+export default config

apps/hub/src/app/_components/connect-button.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Button, ShortenAddress } from '@status-im/status-network/components'
+import { ConnectKitButton } from 'connectkit'
+
+import type { ComponentProps } from 'react'
+
+type Props = {
+  size?: ComponentProps<typeof Button>['size']
+  label?: string
+  className?: string
+  /** If true, shows the label instead of the shortened address when connected */
+  alwaysShowLabel?: boolean
+}
+
+const ConnectButton = (props: Props) => {
+  const {
+    size = '32',
+    label = 'Connect wallet',
+    className,
+    alwaysShowLabel = false,
+  } = props
+
+  return (
+    <ConnectKitButton.Custom>
+      {({ show, isConnected, address }) => {
+        return (
+          <Button
+            onClick={show}
+            variant={isConnected ? 'secondary' : 'primary'}
+            size={size}
+            className={className}
+          >
+            {address && isConnected && !alwaysShowLabel ? (
+              <ShortenAddress address={address} />
+            ) : (
+              label
+            )}
+          </Button>
+        )
+      }}
+    </ConnectKitButton.Custom>
+  )
+}
+
+export { ConnectButton }
+export type { Props as ConnectButtonProps }

apps/hub/src/app/_components/emergency-bar.tsx

@@ -0,0 +1,32 @@
+import { AlertIcon } from '@status-im/icons/20'
+import { ButtonLink } from '@status-im/status-network/components'
+
+const EmergencyBar = () => {
+  return (
+    <div className="h-10 bg-danger-50 p-2" data-theme="dark">
+      <div className="flex items-center justify-center gap-2">
+        <p className="text-15 font-semibold text-white-100">
+          Contracts have been compromised.
+        </p>
+        <ButtonLink
+          variant="secondary"
+          size="24"
+          iconBefore={<AlertIcon />}
+          href="/stake"
+        >
+          Withdraw funds
+        </ButtonLink>
+        {/* <ButtonLink
+          variant="secondary"
+          size="24"
+          icon={<ExternalIcon />}
+          href="https://status.im/blog/contracts-compromised"
+        >
+          Learn More
+        </ButtonLink> */}
+      </div>
+    </div>
+  )
+}
+
+export { EmergencyBar }

apps/hub/src/app/_components/hub-layout.tsx

@@ -2,7 +2,10 @@
 import { useState } from 'react'
 
 import { Divider, Footer } from '@status-im/status-network/components'
+import { useReadContract } from 'wagmi'
 
+import { STAKING_MANAGER } from '../_constants/address'
+import { EmergencyBar } from './emergency-bar'
 import { Sidebar } from './sidebar'
 import { TopBar } from './top-bar'
 
@@ -12,6 +15,14 @@ interface HubLayoutProps {
 
 export function HubLayout({ children }: HubLayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const { data: emergencyModeEnabled } = useReadContract({
+    address: STAKING_MANAGER.address,
+    abi: STAKING_MANAGER.abi,
+    functionName: 'emergencyModeEnabled',
+    query: {
+      refetchInterval: 30000,
+    },
+  })
 
   return (
     <div className="relative isolate z-10 min-h-screen w-full bg-neutral-100 px-1 pb-1">
@@ -20,6 +31,7 @@ export function HubLayout({ children }: HubLayoutProps) {
 
       {/* Main Content Area */}
       <div className="relative w-full overflow-hidden rounded-20 bg-white-100">
+        {Boolean(emergencyModeEnabled) && <EmergencyBar />}
         <div className="flex h-[calc(100vh-64px-123px)] w-full flex-row overflow-hidden lg:h-[calc(100vh-64px-50px)]">
           {/* Sidebar */}
           <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

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'