add withdraw (#813)

* add withdraw

* Add changeset for patch updates

* address feedback

* address feedback

* change contracts address back to production

* add use client to emergencyMode hook

* test fix build

* test fix build

Author: jkbktl

.changeset/hungry-bananas-join.md

@@ -0,0 +1,6 @@
+---
+"@status-im/status-network": patch
+"hub": patch
+---
+
+withdraw

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

@@ -0,0 +1,24 @@
+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>
+      </div>
+    </div>
+  )
+}
+
+export { EmergencyBar }

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

@@ -2,7 +2,12 @@
 import { useState } from 'react'
 
 import { Divider, Footer } from '@status-im/status-network/components'
+import { useReadContract } from 'wagmi'
 
+import { STAKING_MANAGER } from '~constants/index'
+import { CACHE_CONFIG } from '~constants/staking'
+
+import { EmergencyBar } from './emergency-bar'
 import { Sidebar } from './sidebar'
 import { TopBar } from './top-bar'
 
@@ -12,6 +17,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: CACHE_CONFIG.EMERGENCY_MODE_REFETCH_INTERVAL,
+    },
+  })
 
   return (
     <div className="relative isolate z-10 min-h-screen w-full bg-neutral-100 px-1 pb-1">
@@ -20,6 +33,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="mx-auto flex h-[calc(100vh-64px-123px)] w-full max-w-[1504px] flex-row overflow-hidden lg:h-[calc(100vh-64px-50px)]">
           {/* Sidebar */}
           <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

apps/hub/src/app/_components/vaults/modals/withdraw-vault-modal.tsx

@@ -7,7 +7,7 @@ import { InfoIcon } from '@status-im/icons/12'
 import { Button } from '@status-im/status-network/components'
 import { useAccount } from 'wagmi'
 
-import { useVaultWithdraw } from '~hooks/useVaultWithdraw'
+import { useVaultEmergencyExit } from '~hooks/useVaultEmergencyExit'
 
 import { BaseVaultModal } from './base-vault-modal'
 
@@ -16,6 +16,7 @@ import type { Address } from 'viem'
 interface WithdrawVaultModalProps {
   onClose: () => void
   vaultAddress: Address
+  amountWei: bigint
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children?: React.ReactNode
@@ -25,31 +26,30 @@ interface WithdrawVaultModalProps {
  * Modal for emergency withdrawal from vault
  */
 export function WithdrawVaultModal(props: WithdrawVaultModalProps) {
-  const { onClose, vaultAddress, open, onOpenChange, children } = props
+  const { onClose, vaultAddress, amountWei, open, onOpenChange, children } =
+    props
 
   const { address } = useAccount()
-  const { mutate: withdraw } = useVaultWithdraw()
+  const { mutate: emergencyExit } = useVaultEmergencyExit()
 
   const handleVaultWithdrawal = useCallback(() => {
-    const amountWei = 1000000000000000000n
-
     if (!address) {
       console.error('No address found - wallet not connected')
       return
     }
 
     try {
-      withdraw({
+      emergencyExit({
         amountWei,
         vaultAddress,
         onSigned: () => {
           onClose()
         },
       })
     } catch (error) {
-      console.error('Error calling withdraw:', error)
+      console.error('Error calling emergencyExit:', error)
     }
-  }, [address, onClose, vaultAddress, withdraw])
+  }, [address, amountWei, onClose, vaultAddress, emergencyExit])
 
   return (
     <BaseVaultModal

apps/hub/src/app/_components/vaults/table-columns.tsx

@@ -5,7 +5,7 @@ import { Button } from '@status-im/status-network/components'
 import { createColumnHelper } from '@tanstack/react-table'
 import { formatUnits } from 'viem'
 
-import { SNT_TOKEN } from '~constants/index'
+import { EXTEND_LOCK_PERIOD, SNT_TOKEN } from '~constants/index'
 import { type StakingVault } from '~hooks/useStakingVaults'
 import { shortenAddress } from '~utils/address'
 import { formatSNT } from '~utils/currency'
@@ -29,9 +29,16 @@ interface TableColumnsProps {
 }
 
 // Calculate total staked across all vaults
-const calculateTotalStaked = (vaults: StakingVault[]): bigint => {
+const calculateTotalStaked = (
+  vaults: StakingVault[],
+  emergencyMode: boolean
+): bigint => {
   return vaults.reduce(
-    (acc, vault) => acc + (vault.data?.stakedBalance || 0n),
+    (acc, vault) =>
+      acc +
+      (emergencyMode
+        ? vault.data?.depositedBalance || 0n
+        : vault.data?.stakedBalance || 0n),
     BigInt(0)
   )
 }
@@ -90,7 +97,10 @@ export const createVaultTableColumns = ({
   chainId,
 }: TableColumnsProps) => {
   // Calculate totals and current time once per column creation
-  const totalStaked = calculateTotalStaked(vaults)
+  const totalStaked = calculateTotalStaked(
+    vaults,
+    Boolean(emergencyModeEnabled)
+  )
   const totalKarma = calculateTotalKarma(vaults)
   const currentTimestamp = getCurrentTimestamp()
   const columnHelper = createColumnHelper<StakingVault>()
@@ -131,12 +141,15 @@ export const createVaultTableColumns = ({
       },
     }),
     columnHelper.accessor('data.stakedBalance', {
-      header: 'Staked',
+      header: emergencyModeEnabled ? 'Vault balance' : 'Staked',
       cell: ({ row }) => {
+        const balance = emergencyModeEnabled
+          ? row.original.data?.depositedBalance
+          : row.original.data?.stakedBalance
         return (
           <div className="flex items-center gap-1">
             <span className="text-13 font-medium text-neutral-100">
-              {formatSNT(row.original.data?.stakedBalance || 0n)}
+              {formatSNT(balance || 0n)}
               <span className="ml-0.5 text-neutral-50">SNT</span>
             </span>
           </div>
@@ -290,86 +303,83 @@ export const createVaultTableColumns = ({
           : false
 
         return (
-          <div className="flex items-end justify-end gap-2">
-            {isLocked ? (
-              <div className="flex items-center gap-2">
-                {!emergencyModeEnabled && (
-                  <WithdrawVaultModal
-                    open={isWithdrawModalOpen}
-                    onOpenChange={open =>
-                      setOpenModalVaultId(open ? withdrawModalId : null)
-                    }
-                    onClose={() => setOpenModalVaultId(null)}
-                    vaultAddress={row.original.address}
-                  >
-                    <Button
-                      variant="danger"
-                      size="32"
-                      disabled={!isConnected}
-                      className="min-w-fit bg-danger-50 text-13 text-white-100 hover:bg-danger-60"
-                    >
-                      <AlertIcon className="shrink-0" />
-                      <span className="hidden whitespace-nowrap xl:inline">
-                        Withdraw funds
-                      </span>
-                      <span className="whitespace-nowrap xl:hidden">
-                        Withdraw
-                      </span>
-                    </Button>
-                  </WithdrawVaultModal>
-                )}
-                <LockVaultModal
-                  open={isLockModalOpen}
-                  onOpenChange={open =>
-                    setOpenModalVaultId(open ? lockModalId : null)
-                  }
-                  vaultAddress={row.original.address}
-                  title="Extend lock time"
-                  initialYears="2"
-                  initialDays="732"
-                  description="Extending lock time increasing Karma boost"
-                  actions={[...EXTEND_LOCK_ACTIONS]}
-                  onClose={() => setOpenModalVaultId(null)}
-                  infoMessage={LOCK_INFO_MESSAGE}
-                >
-                  <Button
-                    variant="primary"
-                    size="32"
-                    disabled={!isConnected}
-                    className="min-w-fit text-13"
-                  >
-                    <TimeIcon className="shrink-0" />
-                    <span className="hidden whitespace-nowrap xl:inline">
-                      Extend lock time
-                    </span>
-                    <span className="whitespace-nowrap xl:hidden">Extend</span>
-                  </Button>
-                </LockVaultModal>
-              </div>
-            ) : (
-              <LockVaultModal
-                open={isLockModalOpen}
+          <div className="flex items-end justify-end gap-2 lg:gap-4">
+            {emergencyModeEnabled ? (
+              <WithdrawVaultModal
+                open={isWithdrawModalOpen}
                 onOpenChange={open =>
-                  setOpenModalVaultId(open ? lockModalId : null)
+                  setOpenModalVaultId(open ? withdrawModalId : null)
                 }
-                vaultAddress={row.original.address}
-                title="Do you want to lock the vault?"
-                description="Lock this vault to receive more Karma"
-                actions={[...LOCK_VAULT_ACTIONS]}
                 onClose={() => setOpenModalVaultId(null)}
-                infoMessage={LOCK_INFO_MESSAGE}
-                onValidate={validateLockTime}
+                vaultAddress={row.original.address}
+                amountWei={row.original.data?.depositedBalance || 0n}
               >
                 <Button
-                  variant="primary"
-                  size="32"
-                  disabled={!isConnected}
-                  className="min-w-fit text-13"
+                  variant="danger"
+                  size="24"
+                  iconBefore={<AlertIcon />}
+                  disabled={
+                    !row.original.data?.depositedBalance ||
+                    row.original.data.depositedBalance === 0n
+                  }
                 >
-                  <LockedIcon fill="white" className="shrink-0" />
-                  <span className="whitespace-nowrap">Lock</span>
+                  Withdraw funds
                 </Button>
-              </LockVaultModal>
+              </WithdrawVaultModal>
+            ) : (
+              <>
+                {isLocked ? (
+                  <div className="flex items-center gap-2">
+                    <LockVaultModal
+                      open={isLockModalOpen}
+                      onOpenChange={open =>
+                        setOpenModalVaultId(open ? lockModalId : null)
+                      }
+                      vaultAddress={row.original.address}
+                      title="Extend lock time"
+                      initialYears={EXTEND_LOCK_PERIOD.INITIAL_YEARS}
+                      initialDays={EXTEND_LOCK_PERIOD.INITIAL_DAYS}
+                      description="Extending lock time increasing Karma boost"
+                      actions={[...EXTEND_LOCK_ACTIONS]}
+                      onClose={() => setOpenModalVaultId(null)}
+                      infoMessage={LOCK_INFO_MESSAGE}
+                    >
+                      <Button
+                        variant="primary"
+                        size="24"
+                        disabled={!isConnected}
+                      >
+                        <TimeIcon className="shrink-0" />
+                        <span className="hidden whitespace-nowrap xl:inline">
+                          Extend lock time
+                        </span>
+                        <span className="whitespace-nowrap xl:hidden">
+                          Extend
+                        </span>
+                      </Button>
+                    </LockVaultModal>
+                  </div>
+                ) : (
+                  <LockVaultModal
+                    open={isLockModalOpen}
+                    onOpenChange={open =>
+                      setOpenModalVaultId(open ? lockModalId : null)
+                    }
+                    vaultAddress={row.original.address}
+                    title="Do you want to lock the vault?"
+                    description="Lock this vault to receive more Karma"
+                    actions={[...LOCK_VAULT_ACTIONS]}
+                    onClose={() => setOpenModalVaultId(null)}
+                    infoMessage={LOCK_INFO_MESSAGE}
+                    onValidate={validateLockTime}
+                  >
+                    <Button variant="primary" size="24" disabled={!isConnected}>
+                      <LockedIcon fill="white" className="shrink-0" />
+                      <span className="whitespace-nowrap">Lock</span>
+                    </Button>
+                  </LockVaultModal>
+                )}
+              </>
             )}
             <DropdownMenu.Root
               onOpenChange={open => setOpenDropdownId(open ? dropdownId : null)}

apps/hub/src/app/_components/vaults/vaults-table.tsx

@@ -9,10 +9,10 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { useAccount, useChainId, useReadContract } from 'wagmi'
+import { useAccount, useChainId } from 'wagmi'
 
-import { STAKING_MANAGER } from '~constants/index'
 import { useCreateVault } from '~hooks/useCreateVault'
+import { useEmergencyModeEnabled } from '~hooks/useEmergencyModeEnabled'
 import { type StakingVault, useStakingVaults } from '~hooks/useStakingVaults'
 
 import { createVaultTableColumns } from './table-columns'
@@ -127,15 +127,7 @@ export function VaultsTable() {
   const { isConnected } = useAccount()
   const chainId = useChainId()
   const { mutate: createVault } = useCreateVault()
-
-  const { data: emergencyModeEnabled } = useReadContract({
-    address: STAKING_MANAGER.address,
-    abi: STAKING_MANAGER.abi,
-    functionName: 'emergencyModeEnabled',
-    query: {
-      staleTime: 60_000, // Consider data fresh for 1 minute
-    },
-  })
+  const { data: emergencyModeEnabled } = useEmergencyModeEnabled()
 
   // Stable callback reference prevents column recreation on every render
   const handleSetOpenModalVaultId = useCallback(
@@ -186,6 +178,7 @@ export function VaultsTable() {
             size="32"
             onClick={() => createVault()}
             className="w-full sm:w-auto"
+            disabled={Boolean(emergencyModeEnabled)}
           >
             <AddCircleIcon />
             <span className="whitespace-nowrap">Add vault</span>