chore: update dependencies and refactor wallet connection logic; remove unused components and improve session management for SIWE authentication

Author: iamonuwa

apps/hub/package.json

@@ -16,29 +16,33 @@
   "dependencies": {
     "@hookform/devtools": "^4.3.1",
     "@hookform/resolvers": "^3.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@status-im/colors": "workspace:*",
     "@status-im/components": "workspace:*",
     "@status-im/icons": "workspace:*",
     "@status-im/status-network": "workspace:*",
-    "@tanstack/react-table": "^8.21.3",
     "@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",
+    "iron-session": "^8.0.4",
     "next": "15.3.0",
     "next-mdx-remote": "^5.0.0",
-    "react-hook-form": "^7.45.1",
     "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.21.1",
-    "zod": "^3.21.4",
-    "wagmi": "2.15.2"
+    "wagmi": "2.15.2",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",

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

@@ -2,30 +2,36 @@
 
 import { Button, ShortenAddress } from '@status-im/status-network/components'
 import { ConnectKitButton } from 'connectkit'
-import { useAccount } from 'wagmi'
 
 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' } = props
-
-  const { address, isConnected } = useAccount()
+  const {
+    size = '32',
+    label = 'Connect wallet',
+    className,
+    alwaysShowLabel = false,
+  } = props
 
   return (
     <ConnectKitButton.Custom>
-      {({ show }) => {
+      {({ show, isConnected, address }) => {
         return (
           <Button
             onClick={show}
             variant={isConnected ? 'secondary' : 'primary'}
             size={size}
+            className={className}
           >
-            {address && isConnected ? (
+            {address && isConnected && !alwaysShowLabel ? (
               <ShortenAddress address={address} />
             ) : (
               label

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

@@ -8,11 +8,7 @@ import { SNT_TOKEN } from '~constants/index'
 import { type StakingVault } from '~hooks/useStakingVaults'
 import { shortenAddress } from '~utils/address'
 import { formatSNT } from '~utils/currency'
-import {
-  calculateDaysUntilUnlock,
-  calculateVaultBoost,
-  isVaultLocked,
-} from '~utils/vault'
+import { calculateDaysUntilUnlock, isVaultLocked } from '~utils/vault'
 
 import { LockVaultModal } from './modals/lock-vault-modal'
 import { WithdrawVaultModal } from './modals/withdraw-vault-modal'
@@ -25,21 +21,56 @@ interface TableColumnsProps {
   isConnected: boolean
 }
 
+// Calculate total staked across all vaults
+const calculateTotalStaked = (vaults: StakingVault[]): bigint => {
+  return vaults.reduce(
+    (acc, vault) => acc + (vault.data?.stakedBalance || 0n),
+    BigInt(0)
+  )
+}
+
+// Calculate total karma across all vaults
+const calculateTotalKarma = (vaults: StakingVault[]): bigint => {
+  return vaults.reduce(
+    (acc, vault) => acc + (vault.data?.rewardsAccrued || 0n),
+    BigInt(0)
+  )
+}
+
+// Cache current time to avoid calling Date.now() on every cell render
+const getCurrentTimestamp = (): bigint => {
+  return BigInt(Math.floor(Date.now() / 1000))
+}
+
+// Validation function for lock time - extracted to avoid recreating on every render
+const validateLockTime = (_: string, days: string): string | null => {
+  const totalDays = parseInt(days || '0')
+  // TODO: read this from the contract
+  return totalDays > 1460 ? 'Maximum lock time is 4 years' : null
+}
+
+// Modal action configurations - static, never change
+const EXTEND_LOCK_ACTIONS = [
+  { label: 'Cancel' },
+  { label: 'Extend lock' },
+] as const
+
+const LOCK_VAULT_ACTIONS = [{ label: "Don't lock" }, { label: 'Lock' }] as const
+
+const LOCK_INFO_MESSAGE =
+  'Boost the rate at which you receive Karma. The longer you lock your vault, the higher your boost, and the faster you accumulate Karma. You can add more SNT at any time, but withdrawing your SNT is only possible once the vault unlocks.' as const
+
 export const createVaultTableColumns = ({
   vaults = [],
   openModalVaultId,
   setOpenModalVaultId,
   emergencyModeEnabled,
   isConnected,
 }: TableColumnsProps) => {
-  const totalStaked = vaults.reduce(
-    (acc, vault) => acc + (vault.data?.stakedBalance || 0n),
-    BigInt(0)
-  )
-  const totalKarma = vaults.reduce(
-    (acc, vault) => acc + (vault.data?.rewardsAccrued || 0n),
-    BigInt(0)
-  )
+  // Calculate totals and current time once per column creation
+  const totalStaked = calculateTotalStaked(vaults)
+  const totalKarma = calculateTotalKarma(vaults)
+  const currentTimestamp = getCurrentTimestamp()
   const columnHelper = createColumnHelper<StakingVault>()
 
   return [
@@ -140,10 +171,19 @@ export const createVaultTableColumns = ({
             ? (maxMP - mpAccrued) / stakedBalance
             : undefined
 
+        // Calculate boost directly instead of recalculating for all vaults
+        // Boost = (mpAccrued / stakedBalance) + 1 (base multiplier)
+        const currentBoost =
+          stakedBalance > 0n
+            ? Number(formatUnits(mpAccrued, SNT_TOKEN.decimals)) /
+                Number(formatUnits(stakedBalance, SNT_TOKEN.decimals)) +
+              1
+            : 1
+
         return (
           <div className="flex items-center gap-3">
             <span className="text-[13px] font-medium leading-[1.4] tracking-[-0.039px] text-neutral-100">
-              x{calculateVaultBoost(vaults, row.original.address)}
+              x{currentBoost.toFixed(2)}
             </span>
             {potentialBoost && (
               <span className="text-[13px] font-medium leading-[1.4] tracking-[-0.039px] text-[#7140fd]">
@@ -218,8 +258,9 @@ export const createVaultTableColumns = ({
         const isWithdrawModalOpen = openModalVaultId === withdrawModalId
         const isLockModalOpen = openModalVaultId === lockModalId
 
+        // Use cached timestamp instead of calling Date.now() on every render
         const isLocked = row.original?.data?.lockUntil
-          ? row.original.data.lockUntil > BigInt(Math.floor(Date.now() / 1000))
+          ? row.original.data.lockUntil > currentTimestamp
           : false
 
         return (
@@ -261,16 +302,9 @@ export const createVaultTableColumns = ({
                   initialYears="2"
                   initialDays="732"
                   description="Extending lock time increasing Karma boost"
-                  actions={[
-                    {
-                      label: 'Cancel',
-                    },
-                    {
-                      label: 'Extend lock',
-                    },
-                  ]}
+                  actions={EXTEND_LOCK_ACTIONS}
                   onClose={() => setOpenModalVaultId(null)}
-                  infoMessage="Boost the rate at which you receive Karma. The longer you lock your vault, the higher your boost, and the faster you accumulate Karma. You can add more SNT at any time, but withdrawing your SNT is only possible once the vault unlocks."
+                  infoMessage={LOCK_INFO_MESSAGE}
                 >
                   <Button
                     variant="primary"
@@ -295,23 +329,10 @@ export const createVaultTableColumns = ({
                 vaultAddress={row.original.address}
                 title="Do you want to lock the vault?"
                 description="Lock this vault to receive more Karma"
-                actions={[
-                  {
-                    label: "Don't lock",
-                  },
-                  {
-                    label: 'Lock',
-                  },
-                ]}
+                actions={LOCK_VAULT_ACTIONS}
                 onClose={() => setOpenModalVaultId(null)}
-                infoMessage="Boost the rate at which you receive Karma. The longer you lock your vault, the higher your boost, and the faster you accumulate Karma. You can add more SNT at any time, but withdrawing your SNT is only possible once the vault unlocks."
-                onValidate={(_, days) => {
-                  const totalDays = parseInt(days || '0')
-                  // TODO: read this from the contract
-                  return totalDays > 1460
-                    ? 'Maximum lock time is 4 years'
-                    : null
-                }}
+                infoMessage={LOCK_INFO_MESSAGE}
+                onValidate={validateLockTime}
               >
                 <Button
                   variant="primary"

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 import { AddCircleIcon } from '@status-im/icons/12'
 import { Button } from '@status-im/status-network/components'
@@ -48,6 +48,7 @@ interface TableProps {
   table: ReturnType<typeof useReactTable<StakingVault>>
 }
 
+// Simple table components - TanStack Table handles optimization via getCoreRowModel
 function TableHeader({ table }: TableProps) {
   return (
     <thead className="h-[40px] border-b border-solid border-neutral-10 bg-neutral-5">
@@ -129,20 +130,37 @@ export function VaultsTable() {
     address: STAKING_MANAGER.address,
     abi: STAKING_MANAGER.abi,
     functionName: 'emergencyModeEnabled',
+    query: {
+      staleTime: 60_000, // Consider data fresh for 1 minute
+    },
   })
 
+  // Stable callback reference prevents column recreation on every render
+  const handleSetOpenModalVaultId = useCallback(
+    (vaultId: string | null) => setOpenModalVaultId(vaultId),
+    []
+  )
+
+  // Memoize columns to prevent recreation unless dependencies change
   const columns = useMemo(
     () =>
       createVaultTableColumns({
         vaults: vaultDataList,
         openModalVaultId,
-        setOpenModalVaultId,
+        setOpenModalVaultId: handleSetOpenModalVaultId,
         emergencyModeEnabled,
         isConnected,
       }),
-    [vaultDataList, openModalVaultId, emergencyModeEnabled, isConnected]
+    [
+      vaultDataList,
+      openModalVaultId,
+      handleSetOpenModalVaultId,
+      emergencyModeEnabled,
+      isConnected,
+    ]
   )
 
+  // Initialize TanStack Table
   const table = useReactTable({
     data: vaultDataList ?? [],
     columns,
@@ -169,15 +187,34 @@ export function VaultsTable() {
       </div>
 
       <div className="relative w-full overflow-hidden rounded-16 border border-solid border-neutral-10 bg-white-100">
-        <div className="max-h-[600px] overflow-auto">
-          <div className="min-w-[800px]">
-            <table className="w-full border-collapse">
-              <TableHeader table={table} />
-              <TableBody table={table} />
-              <TableFooter table={table} />
-            </table>
+        {!isConnected ? (
+          <div className="flex items-center justify-center p-12 text-center">
+            <div>
+              <p className="text-neutral-50">
+                Connect your wallet to view your vaults
+              </p>
+            </div>
+          </div>
+        ) : vaultDataList && vaultDataList.length === 0 ? (
+          <div className="flex items-center justify-center p-12 text-center">
+            <div>
+              <p className="text-neutral-50">No vaults found</p>
+              <p className="mt-2 text-[13px] text-neutral-40">
+                Click "Add vault" to create your first vault
+              </p>
+            </div>
           </div>
-        </div>
+        ) : (
+          <div className="max-h-[600px] overflow-auto">
+            <div className="min-w-[800px]">
+              <table className="w-full border-collapse">
+                <TableHeader table={table} />
+                <TableBody table={table} />
+                <TableFooter table={table} />
+              </table>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )

apps/hub/src/app/_constants/chain.ts

@@ -1,3 +1,6 @@
+import { getDefaultConfig } from 'connectkit'
+import { createConfig, http } from 'wagmi'
+
 import type { Chain } from 'wagmi/chains'
 
 export const statusNetworkTestnet: Chain = {
@@ -23,3 +26,21 @@ export const statusNetworkTestnet: Chain = {
     },
   },
 }
+
+export const getDefaultWagmiConfig = () => {
+  return getDefaultConfig({
+    chains: [statusNetworkTestnet],
+    transports: {
+      [statusNetworkTestnet.id]: http(),
+    },
+    enableFamily: false,
+    // TODO: move to env
+    walletConnectProjectId: '7ab664eee6a734b14327cdf4678a3431',
+    appName: 'Status Hub',
+    appDescription: 'Status Network DeFi Dashboard',
+    appUrl: 'https://status.app',
+    appIcon: 'https://status.app/icon.png',
+  })
+}
+
+export const wagmiConfig = createConfig(getDefaultWagmiConfig())

apps/hub/src/app/_constants/session.ts

@@ -0,0 +1,24 @@
+type SessionConfig = {
+  cookieName: string
+  cookieOptions: {
+    httpOnly: boolean
+    secure: boolean
+    sameSite: 'lax' | 'strict' | 'none'
+    maxAge: number
+    path: string
+  }
+  password: string
+}
+
+export const sessionConfig: SessionConfig = {
+  cookieName: 'status-hub-siwe',
+  cookieOptions: {
+    httpOnly: true,
+    secure: false,
+    sameSite: 'lax',
+    maxAge: 60 * 60,
+    path: '/',
+  },
+  password:
+    'complex_password_at_least_32_characters_long_replace_in_production_env',
+}