filter vaults in staking frontend

Signed-off-by: Dominic Wörner <dom.woe@gmail.com>

Author: domwoe

examples/apps/staking/frontend/src/hooks/useStaking.ts

@@ -5,6 +5,7 @@ import { stakingTokenConfig } from '../contracts/stakingToken';
 import { stakingService } from '../services/stakingService';
 import { VaultService } from '../services/vaultService';
 import { useEthereumDerivedIdentity } from './useEthereumDerivedIdentity';
+import { filterUserStakingVaults } from '../utils/vaultFiltering';
 import type { StakingStats, Stake } from '../types/staking';
 import type { Vault } from '../declarations/btc_vault_backend';
 import { ETHEREUM_CHAIN_ID } from '../lib/env';
@@ -59,14 +60,17 @@ export function useStakingData(address?: `0x${string}`) {
           .filter((result): result is PromiseFulfilledResult<Vault> => result.status === 'fulfilled')
           .map(result => result.value);
 
+        // 🔑 NEW: Filter to only include staking vaults (authorized by staking contract)
+        const stakingVaults = filterUserStakingVaults(successfulVaults);
+
         // Calculate actual statistics
         let totalStaked = 0n; // Sum of all active vault balances (funded vaults)
         let totalRewards = 0n; // Sum of all pending rewards from stakes
         let activeStakes = 0;
 
-        // Check vault registration status for all vaults in batch
+        // Check vault registration status for staking vaults only
         const registrationChecks = await Promise.allSettled(
-          successfulVaults.map(async (vault) => {
+          stakingVaults.map(async (vault) => {
             try {
               // Use wagmi's readContract functionality via stakingService
               const isRegistered = await stakingService.checkVaultRegistration(BigInt(vault.id));
@@ -85,8 +89,8 @@ export function useStakingData(address?: `0x${string}`) {
           }
         });
 
-        // Sum actual vault balances for total staked (only active vaults: funded, not withdrawn, and registered)
-        for (const vault of successfulVaults) {
+        // Sum actual vault balances for total staked (only active staking vaults: funded, not withdrawn, and registered)
+        for (const vault of stakingVaults) {
           const isFunded = hasVaultState(vault, 'Funded');
           const isWithdrawn = hasVaultState(vault, 'Withdrawn');
           const isRegistered = registrationResults.get(vault.id) ?? false;
@@ -101,8 +105,8 @@ export function useStakingData(address?: `0x${string}`) {
           }
         }
 
-        // Calculate rewards for each active vault using thin layer approach
-        for (const vault of successfulVaults) {
+        // Calculate rewards for each active staking vault using thin layer approach
+        for (const vault of stakingVaults) {
           const isFunded = hasVaultState(vault, 'Funded');
           const isWithdrawn = hasVaultState(vault, 'Withdrawn');
           const isRegistered = registrationResults.get(vault.id) ?? false;
@@ -192,14 +196,15 @@ export function useTokenBalance(address?: `0x${string}`) {
 }
 
 /**
- * Hook to fetch user's created vaults from the IC backend
+ * Hook to fetch user's staking vaults from the IC backend
+ * Only returns vaults that are authorized by the staking contract
  */
 export function useUserVaults() {
   const { createIdentity, createAgent } = useEthereumDerivedIdentity  ();
   const { address: userAddress } = useAccount();
 
   return useQuery<Vault[]>({
-    queryKey: ['user-vaults', userAddress],
+    queryKey: ['user-staking-vaults', userAddress], // Updated key to reflect filtering
     queryFn: async (): Promise<Vault[]> => {
       if (!userAddress) return [];
 
@@ -220,12 +225,15 @@ export function useUserVaults() {
           vaultIds.map((vaultId) => vaultService.getVaultInfoPublic(vaultId))
         );
 
-        return vaultDetails
+        const successfulVaults = vaultDetails
           .filter((result): result is PromiseFulfilledResult<Vault> => result.status === 'fulfilled')
           .map(result => result.value);
 
+        // 🔑 NEW: Filter to only return staking vaults
+        return filterUserStakingVaults(successfulVaults);
+
       } catch (error) {
-        console.error('Error fetching user vaults:', error);
+        console.error('Error fetching user staking vaults:', error);
         return [];
       }
     },

examples/apps/staking/frontend/src/lib/wagmi.ts

@@ -50,11 +50,10 @@ const stakingChain = defineChain({
 });
 
 export const config = createConfig({
-  autoConnect: false,
   chains: [stakingChain, mainnet],
   connectors: [
-    injected({ shimDisconnect: true }),
-    metaMask({ shimDisconnect: true }),
+    injected(),
+    metaMask(),
   ],
   storage: inMemoryStorage,
   transports: {

examples/apps/staking/frontend/src/services/vaultService.ts

@@ -103,7 +103,7 @@ export function createEthereumStakingUnlockCondition(
  * Create vault args for staking application
  */
 export function createStakingVaultArgs(
-  ownerPubkey: number[],
+  _ownerPubkey: number[], // Not used for perpetual vaults
   stakingContractAddress: string | null | undefined,
   userAddress: string,
   withdrawalAddress?: string

examples/apps/staking/frontend/src/utils/vaultFiltering.test.ts

@@ -0,0 +1,55 @@
+// Simple test file to verify vault filtering logic
+import { extractAuthorizedAddress, isStakingVault, filterUserStakingVaults } from './vaultFiltering';
+import type { Vault } from '../declarations/btc_vault_backend';
+
+// Mock vault data for testing
+const mockStakingVault: Partial<Vault> = {
+  id: 1n,
+  unlock_condition: {
+    ModularUnlock: {
+      module_id: 'ethereum_vault_unlock',
+      parameters_json: '{"authorized_address":"0x742d35Cc6648C3532e2f9Dd3C26E7ED3e9f4C5e0","owner_address":"0x1234567890abcdef1234567890abcdef12345678"}',
+      metadata: ['Ethereum staking vault']
+    }
+  }
+} as Vault;
+
+const mockNonStakingVault: Partial<Vault> = {
+  id: 2n,
+  unlock_condition: {
+    ModularUnlock: {
+      module_id: 'ethereum_vault_unlock',
+      parameters_json: '{"authorized_address":"0x9999999999999999999999999999999999999999","owner_address":"0x1234567890abcdef1234567890abcdef12345678"}',
+      metadata: ['Non-staking vault']
+    }
+  }
+} as Vault;
+
+// Test the filtering functions
+console.log('=== Vault Filtering Tests ===');
+
+console.log('\n1. Extract authorized address from staking vault:');
+const stakingAddress = extractAuthorizedAddress(mockStakingVault as Vault);
+console.log('Extracted address:', stakingAddress);
+
+console.log('\n2. Extract authorized address from non-staking vault:');
+const nonStakingAddress = extractAuthorizedAddress(mockNonStakingVault as Vault);
+console.log('Extracted address:', nonStakingAddress);
+
+console.log('\n3. Check if vault is staking vault:');
+const isStaking = isStakingVault(mockStakingVault as Vault, '0x742d35Cc6648C3532e2f9Dd3C26E7ED3e9f4C5e0');
+console.log('Is staking vault:', isStaking);
+
+console.log('\n4. Check if non-staking vault is staking vault:');
+const isNotStaking = isStakingVault(mockNonStakingVault as Vault, '0x742d35Cc6648C3532e2f9Dd3C26E7ED3e9f4C5e0');
+console.log('Is staking vault:', isNotStaking);
+
+console.log('\n5. Filter vaults:');
+const vaults = [mockStakingVault, mockNonStakingVault] as Vault[];
+const filtered = filterUserStakingVaults(vaults, '0x742d35Cc6648C3532e2f9Dd3C26E7ED3e9f4C5e0');
+console.log('Filtered vaults count:', filtered.length);
+console.log('Filtered vault IDs:', filtered.map(v => v.id));
+
+console.log('\n=== Tests Complete ===');
+
+export {}; // Make this a module

examples/apps/staking/frontend/src/utils/vaultFiltering.ts

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import type { Vault } from '../declarations/btc_vault_backend';
+import { STAKING_VAULT_ADDRESS } from '../contracts/stakingVault';
+
+/**
+ * Extract authorized_address from vault's unlock condition parameters
+ */
+export function extractAuthorizedAddress(vault: Vault): string | null {
+  try {
+    const unlockCondition = vault.unlock_condition;
+
+    if ('ModularUnlock' in unlockCondition) {
+      const parametersJson = unlockCondition.ModularUnlock.parameters_json;
+      const parameters = JSON.parse(parametersJson);
+      return parameters.authorized_address || null;
+    }
+
+    return null;
+  } catch (error) {
+    console.warn(`Failed to extract authorized_address from vault ${vault.id}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Check if vault is authorized by the staking contract
+ */
+export function isStakingVault(vault: Vault, stakingContractAddress: string = STAKING_VAULT_ADDRESS): boolean {
+  const authorizedAddress = extractAuthorizedAddress(vault);
+
+  if (!authorizedAddress || !stakingContractAddress) return false;
+
+  // Case-insensitive comparison for Ethereum addresses
+  return authorizedAddress.toLowerCase() === stakingContractAddress.toLowerCase();
+}
+
+/**
+ * Filter user's vaults to only include those authorized by staking contract
+ */
+export function filterUserStakingVaults(
+  vaults: Vault[],
+  stakingContractAddress: string = STAKING_VAULT_ADDRESS
+): Vault[] {
+  return vaults.filter(vault => isStakingVault(vault, stakingContractAddress));
+}
+
+/**
+ * Cache for authorized addresses to avoid repeated JSON parsing
+ */
+const authorizedAddressCache = new Map<string, string | null>();
+
+/**
+ * Cached version of extractAuthorizedAddress for performance
+ */
+export function extractAuthorizedAddressCached(vault: Vault): string | null {
+  const cacheKey = `${vault.id}-${JSON.stringify(vault.unlock_condition)}`;
+
+  if (authorizedAddressCache.has(cacheKey)) {
+    return authorizedAddressCache.get(cacheKey)!;
+  }
+
+  const result = extractAuthorizedAddress(vault);
+  authorizedAddressCache.set(cacheKey, result);
+
+  // Clean cache if it gets too large
+  if (authorizedAddressCache.size > 1000) {
+    const entries = Array.from(authorizedAddressCache.entries());
+    authorizedAddressCache.clear();
+    // Keep the most recent 500 entries
+    entries.slice(-500).forEach(([key, value]) => {
+      authorizedAddressCache.set(key, value);
+    });
+  }
+
+  return result;
+}
+
+/**
+ * Memoized vault filtering hook for performance
+ */
+export function useFilteredStakingVaults(vaults: Vault[], stakingContractAddress: string = STAKING_VAULT_ADDRESS) {
+  return useMemo(() => {
+    return filterUserStakingVaults(vaults, stakingContractAddress);
+  }, [vaults, stakingContractAddress]);
+}
+
+/**
+ * Get statistics for staking vaults
+ */
+export function getStakingVaultStats(vaults: Vault[]) {
+  const stakingVaults = filterUserStakingVaults(vaults);
+
+  return {
+    totalStakingVaults: stakingVaults.length,
+    fundedStakingVaults: stakingVaults.filter(v => 'Funded' in v.state).length,
+    withdrawnStakingVaults: stakingVaults.filter(v => 'Withdrawn' in v.state).length,
+    createdStakingVaults: stakingVaults.filter(v => 'Created' in v.state).length,
+    totalStakedSats: stakingVaults
+      .filter(v => 'Funded' in v.state && !('Withdrawn' in v.state))
+      .reduce((sum, vault) => {
+        const amount = vault.funding_amount[0];
+        return sum + (typeof amount === 'bigint' ? amount : 0n);
+      }, 0n)
+  };
+}

examples/apps/staking/frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/env.d.ts","./src/main.tsx","./src/components/debugenvvars.tsx","./src/components/developeroverlay.tsx","./src/components/staking/claimtokensmodal.tsx","./src/components/staking/earningsdisplay.tsx","./src/components/staking/fundingmodal.tsx","./src/components/staking/liveearnings.tsx","./src/components/staking/stakemodal.tsx","./src/components/staking/stakestable.tsx","./src/components/staking/stakingdashboard.tsx","./src/components/staking/unstakemodal.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/dialog.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/contracts/stakingtoken.ts","./src/contracts/stakingvault.ts","./src/contracts/vaultregistry.ts","./src/declarations/btc_vault_backend/btc_vault_backend.did.d.ts","./src/declarations/btc_vault_backend/index.d.ts","./src/hooks/useEthereumDerivedIdentity.ts","./src/hooks/useautochainswitch.ts","./src/hooks/usestaking.ts","./src/lib/env.ts","./src/lib/utils.ts","./src/lib/wagmi.ts","./src/services/stakingservice.ts","./src/services/vaultservice.ts","./src/types/staking.ts","./src/utils/qrcode.ts"],"version":"5.9.2"}
+{"root":["./src/app.tsx","./src/env.d.ts","./src/main.tsx","./src/components/developeroverlay.tsx","./src/components/themeswitcher.tsx","./src/components/staking/claimtokensmodal.tsx","./src/components/staking/earningsdisplay.tsx","./src/components/staking/fundingmodal.tsx","./src/components/staking/liveearnings.tsx","./src/components/staking/stakemodal.tsx","./src/components/staking/stakestable.tsx","./src/components/staking/stakingdashboard.tsx","./src/components/staking/unstakemodal.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/dialog.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/contexts/themecontext.tsx","./src/contracts/stakingtoken.ts","./src/contracts/stakingvault.ts","./src/contracts/vaultregistry.ts","./src/declarations/btc_vault_backend/btc_vault_backend.did.d.ts","./src/declarations/btc_vault_backend/index.ts","./src/hooks/useautochainswitch.ts","./src/hooks/useethereumderivedidentity.ts","./src/hooks/usestaking.ts","./src/lib/env.ts","./src/lib/utils.ts","./src/lib/wagmi.ts","./src/services/stakingservice.ts","./src/services/vaultservice.ts","./src/types/staking.ts","./src/utils/qrcode.ts","./src/utils/vaultfiltering.ts"],"version":"5.9.2"}

monitoring/prometheus/prometheus.yml

@@ -38,7 +38,7 @@ scrape_configs:
     metrics_path: /c/ulvla-h7777-77774-qaacq-cai/metrics
     scheme: http
     static_configs:
-      - targets: ['ic-raw-proxy:80']
+      - targets: ['ic-raw-proxy.btc_vault']
     honor_labels: true
     scrape_interval: 30s
     scrape_timeout: 10s

monitoring/prometheus/prometheus.yml.template

@@ -34,7 +34,7 @@ scrape_configs:
     metrics_path: /c/${BTC_VAULT_BACKEND_CANISTER_ID}/metrics
     scheme: http
     static_configs:
-      - targets: ['ic-raw-proxy:80']
+      - targets: ['ic-raw-proxy.btc_vault']
     honor_labels: true
     scrape_interval: 30s
     scrape_timeout: 10s