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

Author: iamonuwa

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

@@ -15,12 +15,14 @@ interface TableColumnsProps {
   vaults: VaultWithAddress[] | undefined
   openModalVaultId: string | null
   setOpenModalVaultId: (vaultId: string | null) => void
+  emergencyModeEnabled: unknown
 }
 
 export const createVaultTableColumns = ({
   vaults = [],
   openModalVaultId,
   setOpenModalVaultId,
+  emergencyModeEnabled,
 }: TableColumnsProps) => {
   const totalStaked = vaults.reduce(
     (acc, vault) => acc + (vault.data?.stakedBalance || 0n),
@@ -219,36 +221,40 @@ export const createVaultTableColumns = ({
           <div className="flex items-center justify-end gap-2 lg:gap-4">
             {isLocked ? (
               <div className="flex items-center gap-2">
-                <VaultWithdrawModal
-                  open={isWithdrawModalOpen}
-                  onOpenChange={open =>
-                    setOpenModalVaultId(open ? withdrawModalId : null)
-                  }
-                  onClose={() => setOpenModalVaultId(null)}
-                  vaultAdress={row.original.address}
-                >
-                  {/* @ts-expect-error - Button component is not typed */}
-                  <Button
-                    variant="destructive"
-                    size="32"
-                    className="min-w-fit bg-danger-50 text-[13px] text-white-100 hover:bg-danger-60"
+                {Boolean(emergencyModeEnabled) && (
+                  <VaultWithdrawModal
+                    open={isWithdrawModalOpen}
+                    onOpenChange={open =>
+                      setOpenModalVaultId(open ? withdrawModalId : null)
+                    }
+                    onClose={() => setOpenModalVaultId(null)}
+                    vaultAdress={row.original.address}
                   >
-                    <AlertIcon className="shrink-0" />
-                    <span className="hidden whitespace-nowrap xl:inline">
-                      Withdraw funds
-                    </span>
-                    <span className="whitespace-nowrap xl:hidden">
-                      Withdraw
-                    </span>
-                  </Button>
-                </VaultWithdrawModal>
+                    {/* @ts-expect-error - Button component is not typed */}
+                    <Button
+                      variant="destructive"
+                      size="32"
+                      className="min-w-fit bg-danger-50 text-[13px] 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>
+                  </VaultWithdrawModal>
+                )}
                 <VaultLockConfigModal
                   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={[
                     {
@@ -290,13 +296,6 @@ export const createVaultTableColumns = ({
                 vaultAddress={row.original.address}
                 title="Do you want to lock the vault?"
                 description="Lock this vault to receive more Karma"
-                sliderConfig={{
-                  minLabel: '90 days',
-                  maxLabel: '4 years',
-                  minDays: 90,
-                  maxDays: 1460,
-                  initialPosition: 50,
-                }}
                 initialYears="2"
                 initialDays="732"
                 actions={[

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

@@ -10,10 +10,12 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { useAccount } from 'wagmi'
+import { useAccount, useReadContract } from 'wagmi'
 
+import { STAKING_MANAGER } from '../../../config'
 import { useAccountVaults } from '../../_hooks/useAccountVaults'
 import { useVaultMutation } from '../../_hooks/useVault'
+import { stakingManagerAbi } from '../../contracts'
 import { createVaultTableColumns } from './table-columns'
 
 import type { VaultWithAddress } from '../../_hooks/useAccountVaults'
@@ -129,14 +131,21 @@ export function VaultsTable() {
   const { isConnected } = useAccount()
   const { mutate: deployVault } = useVaultMutation()
 
+  const { data: emergencyModeEnabled } = useReadContract({
+    address: STAKING_MANAGER.address,
+    abi: stakingManagerAbi,
+    functionName: 'emergencyModeEnabled',
+  })
+
   const columns = useMemo(
     () =>
       createVaultTableColumns({
         vaults: vaultDataList,
         openModalVaultId,
         setOpenModalVaultId,
+        emergencyModeEnabled,
       }),
-    [openModalVaultId, vaultDataList]
+    [openModalVaultId, emergencyModeEnabled, vaultDataList]
   )
 
   const table = useReactTable({

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

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unresolved */
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as Dialog from '@radix-ui/react-dialog'
@@ -12,6 +12,7 @@ import { Button } from '@status-im/status-network/components'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 
+import { useSliderConfig } from '../../_hooks/useSliderConfig'
 import { useVaultLock } from '../../_hooks/useVaultLock'
 
 import type { HTMLAttributes } from 'react'
@@ -39,14 +40,6 @@ type Props = {
   title: string
   description: string
   children?: React.ReactNode
-  // Slider configuration
-  sliderConfig?: {
-    minLabel: string
-    maxLabel: string
-    minDays: number
-    maxDays: number
-    initialPosition?: number // 0-100 percentage
-  }
   // Initial values
   initialYears?: string
   initialDays?: string
@@ -70,13 +63,6 @@ const VaultLockConfigModal = (props: Props) => {
     title,
     vaultAddress,
     description,
-    sliderConfig = {
-      minLabel: '90 days',
-      maxLabel: '4 years',
-      minDays: 90,
-      maxDays: 1460,
-      initialPosition: 0,
-    },
     initialYears = '0',
     initialDays = '90',
     boost = 'x2.5',
@@ -86,6 +72,8 @@ const VaultLockConfigModal = (props: Props) => {
     actions,
   } = props
 
+  const [closeAction, submitAction] = actions
+
   const { mutate: lockVault } = useVaultLock()
   const { watch, setValue, handleSubmit } = useForm<FormValues>({
     resolver: zodResolver(createFormSchema()),
@@ -95,6 +83,37 @@ const VaultLockConfigModal = (props: Props) => {
     },
   })
 
+  const { data: sliderConfigQuery } = useSliderConfig()
+
+  const sliderConfig = useMemo(() => {
+    // Convert seconds to days
+    const SECONDS_PER_DAY = 24 * 60 * 60
+    const DAYS_PER_YEAR = 365
+
+    const minSeconds = sliderConfigQuery?.min || 7776000 // fallback: 90 days in seconds
+    const maxSeconds = sliderConfigQuery?.max || 126144000 // fallback: 4 years in seconds
+
+    const minDays = Math.round(minSeconds / SECONDS_PER_DAY)
+    const maxDays = Math.round(maxSeconds / SECONDS_PER_DAY)
+
+    // Format labels
+    const minYears = minDays / DAYS_PER_YEAR
+    const maxYears = maxDays / DAYS_PER_YEAR
+
+    const minLabel =
+      minYears < 1 ? `${minDays} days` : `${minYears.toFixed(1)} years`
+    const maxLabel =
+      maxYears < 1 ? `${maxDays} days` : `${Math.round(maxYears)} years`
+
+    return {
+      minLabel,
+      maxLabel,
+      minDays,
+      maxDays,
+      initialPosition: 50,
+    }
+  }, [sliderConfigQuery])
+
   const years = watch('years')
   const days = watch('days')
 
@@ -136,7 +155,7 @@ const VaultLockConfigModal = (props: Props) => {
     }
   }
 
-  const handleVaultLockAndExtend = async (data: FormValues) => {
+  const handleVaultLockOrExtend = async (data: FormValues) => {
     const totalDays = parseInt(data.days || '0')
     const lockPeriodInSeconds = BigInt(totalDays * 24 * 60 * 60)
 
@@ -236,7 +255,7 @@ const VaultLockConfigModal = (props: Props) => {
         <Dialog.Overlay className="fixed inset-0 z-40 bg-neutral-80/60 backdrop-blur-sm" />
         <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 px-4 focus:outline-none">
           <form
-            onSubmit={handleSubmit(handleVaultLockAndExtend)}
+            onSubmit={handleSubmit(handleVaultLockOrExtend)}
             className="relative mx-auto w-full max-w-[440px] overflow-hidden rounded-20 bg-white-100 shadow-3"
           >
             <Dialog.Close asChild>
@@ -305,21 +324,23 @@ const VaultLockConfigModal = (props: Props) => {
               </div>
             </div>
 
-            <div
-              className="box-border flex flex-col gap-2 px-8 py-0"
-              style={{ opacity: hasError ? 1 : 0 }}
-            >
-              <div className="flex items-center gap-1">
-                <div className="box-border flex items-center justify-center gap-[10px] self-stretch px-0 py-px">
-                  <div className="relative overflow-hidden">
-                    <IncorrectIcon />
+            {hasError && (
+              <div
+                className="box-border flex flex-col gap-2 px-8 py-0"
+                style={{ opacity: hasError ? 1 : 0 }}
+              >
+                <div className="flex items-center gap-1">
+                  <div className="box-border flex items-center justify-center gap-[10px] self-stretch px-0 py-px">
+                    <div className="relative overflow-hidden">
+                      <IncorrectIcon />
+                    </div>
+                  </div>
+                  <div className="flex min-h-px min-w-px shrink-0 grow basis-0 flex-col justify-center text-[13px] font-medium leading-[0] tracking-[-0.039px] text-[#e95460]">
+                    <span className="leading-[1.4]">{displayError}</span>
                   </div>
-                </div>
-                <div className="flex min-h-px min-w-px shrink-0 grow basis-0 flex-col justify-center text-[13px] font-medium leading-[0] tracking-[-0.039px] text-[#e95460]">
-                  <span className="leading-[1.4]">{displayError}</span>
                 </div>
               </div>
-            </div>
+            )}
 
             <div className="box-border flex items-center gap-6 px-8 py-4">
               <div className="flex items-center gap-2">
@@ -355,24 +376,27 @@ const VaultLockConfigModal = (props: Props) => {
 
             <div className="flex w-full flex-col items-start bg-[rgba(255,255,255,0.7)] backdrop-blur-[20px]">
               <div className="box-border flex w-full items-center justify-center gap-3 px-4 pb-4 pt-6">
-                {/* @ts-expect-error - Button component is not typed */}
-                <Button
-                  size="40"
-                  variant="outline"
-                  type="button"
-                  className="flex-1 justify-center"
-                >
-                  {actions[0].label}
-                </Button>
+                <Dialog.Close asChild>
+                  {/* @ts-expect-error - Button component is not typed */}
+                  <Button
+                    size="40"
+                    variant="outline"
+                    type="button"
+                    aria-label="Close"
+                    className="flex-1 justify-center"
+                  >
+                    {closeAction.label}
+                  </Button>
+                </Dialog.Close>
                 {/* @ts-expect-error - Button component is not typed */}
                 <Button
                   size="40"
                   variant="primary"
                   type="submit"
                   className="flex-1 justify-center"
-                  disabled={actions[1].disabled || hasError}
+                  disabled={submitAction.disabled || hasError}
                 >
-                  {actions[1].label}
+                  {submitAction.label}
                 </Button>
               </div>
             </div>