Merge remote-tracking branch 'remotes/nonuwa-oss/chore/update-wallet-connect-impl' into feat/withdraw

# Conflicts:
#	apps/hub/src/app/_components/vaults/vaults-table.tsx

Author: jkbktl

.changeset/famous-deers-sell.md

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

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

@@ -16,32 +16,41 @@
   "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:*",
+    "@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",
     "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:*",
     "@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/top-bar.tsx

@@ -2,12 +2,11 @@
 
 import { Button, IconButton, Tag } from '@status-im/components'
 import { SettingsIcon } from '@status-im/icons/20'
-import {
-  Button as ButtonPrimary,
-  Link,
-} from '@status-im/status-network/components'
+import { Link } from '@status-im/status-network/components'
 import Image from 'next/image'
 
+import { ConnectButton } from './connect-button'
+
 interface TopBarProps {
   onMenuToggle: () => void
 }
@@ -64,7 +63,7 @@ export function TopBar({ onMenuToggle }: TopBarProps) {
           </div>
 
           {/* Connect Wallet Button */}
-          <ButtonPrimary size="32">Connect Wallet</ButtonPrimary>
+          <ConnectButton />
 
           {/* Settings Button */}
           <IconButton variant="ghost" icon={<SettingsIcon />} />

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 (
@@ -255,16 +296,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" size="24" iconBefore={<TimeIcon />}>
                     Extend lock time
@@ -280,23 +314,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"