Feat/canon guard actions

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "canon-vault-ui",
+  "name": "canon-guard-ui",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "license": "MIT",
   "author": "Wonderland",
   "engines": {
-    "node": ">=18.17.0"
+    "node": "22.x"
   },
   "scripts": {
     "dev": "vite --port 3000",
@@ -40,7 +40,11 @@
     "@mui/material": "6.1.3",
     "@rainbow-me/rainbowkit": "2.2.5",
     "@tanstack/react-query": "5.80.3",
+    "@walletconnect/sign-client": "^2.23.1",
+    "@walletconnect/types": "^2.23.1",
+    "@walletconnect/utils": "^2.23.1",
     "lodash.merge": "4.6.2",
+    "lucide-react": "^0.562.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-router-dom": "7.6.2",

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - "@safe-global/safe-smart-account"
+

src/__tests__/canonGuardService.integration.test.ts

@@ -0,0 +1,46 @@
+import { Address } from "viem";
+import { optimism } from "viem/chains";
+import { describe, it, expect, beforeAll } from "vitest";
+import { OPTIMISM_MAINNET_RPC } from "~/constants/addresses";
+import { CanonGuardService } from "~/services/canonGuardService";
+import { ClientService } from "~/services/clientService";
+
+const NEW_GUARD_ADDRESS: Address = "0xe53d45e11897B1FB5aC94f675589072E838CFd1d";
+
+const EXPECTED_QUEUED_TRANSACTIONS = [
+  "0x00cE00912a2dEbE04E2dB6C713b846dE3ba44d68",
+  "0xf64343c0d8c90BF10117285661D74FcB0f46C27d",
+  "0xaEf36aE38FE2969B95aBB4432e879BA3255f1aFE",
+  "0x1BaBb4e2136bF396a5335C333B25496211a75267",
+] as const;
+
+const EXPECTED_PRE_APPROVED_ITEMS = [
+  "0xaEf36aE38FE2969B95aBB4432e879BA3255f1aFE",
+  "0x1BaBb4e2136bF396a5335C333B25496211a75267",
+] as const;
+
+describe("CanonGuardService Integration", () => {
+  let service: CanonGuardService;
+
+  beforeAll(() => {
+    const client = new ClientService(OPTIMISM_MAINNET_RPC, optimism);
+    service = new CanonGuardService(client);
+  });
+
+  it("fetches real Canon Guard vault data", async () => {
+    const data = await service.getCanonGuardData(NEW_GUARD_ADDRESS, 3);
+
+    expect(data.queuedTransactions).toHaveLength(EXPECTED_QUEUED_TRANSACTIONS.length);
+    expect(data.preApprovedItems).toHaveLength(EXPECTED_PRE_APPROVED_ITEMS.length);
+    expect(data.executionHistory).toHaveLength(0);
+
+    expect(data.queuedTransactions[0].actionBuilder.address).toBe(EXPECTED_QUEUED_TRANSACTIONS[0]);
+    expect(data.queuedTransactions[0].state).toBe("executable");
+    expect(data.queuedTransactions[0].actionBuilder.factoryType).toBe("simple_transfers");
+    expect(data.queuedTransactions[0].actionBuilder.factoryLabel).toBe("Simple Transfers Factory");
+
+    expect(data.preApprovedItems[0].address).toBe(EXPECTED_PRE_APPROVED_ITEMS[0]);
+    expect(data.preApprovedItems[0].type).toBe("builder");
+    expect(data.preApprovedItems[0].factoryType).toBe("simple_transfers");
+  });
+});

src/__tests__/canonGuardService.test.ts

@@ -0,0 +1,61 @@
+import { Address } from "viem";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { CanonGuardService } from "~/services/canonGuardService";
+import { ClientService } from "~/services/clientService";
+
+describe("CanonGuardService", () => {
+  let service: CanonGuardService;
+  let mockMulticall: ReturnType<typeof vi.fn>;
+  let mockReadContract: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    mockMulticall = vi.fn();
+    mockReadContract = vi.fn();
+
+    const mockClient = { multicall: mockMulticall, readContract: mockReadContract };
+    const mockClientService = { getClient: () => mockClient };
+
+    service = new CanonGuardService(mockClientService as unknown as ClientService);
+  });
+
+  it("returns empty data when no actions exist", async () => {
+    mockReadContract.mockResolvedValue([]);
+
+    const result = await service.getCanonGuardData("0x123" as Address, 1);
+
+    expect(result.queuedTransactions).toEqual([]);
+    expect(result.preApprovedItems).toEqual([]);
+    expect(result.executionHistory).toEqual([]);
+  });
+
+  it("processes queued transactions", async () => {
+    const now = Math.floor(Date.now() / 1000);
+
+    mockReadContract.mockResolvedValueOnce(["0xaction1"]);
+
+    mockReadContract.mockResolvedValueOnce(BigInt(1));
+
+    mockMulticall.mockResolvedValueOnce([
+      { status: "success", result: ["0x1234", BigInt(now + 100), BigInt(now + 1000)] },
+      { status: "success", result: "0xhash" },
+      { status: "success", result: BigInt(now + 500) },
+      { status: "success", result: [] },
+    ]);
+
+    mockReadContract.mockResolvedValueOnce([{ target: "0xtoken", data: "0xa9059cbb", value: 0n }]);
+
+    const result = await service.getCanonGuardData("0x123" as Address, 1);
+
+    expect(result.queuedTransactions).toHaveLength(1);
+  });
+
+  it("handles errors gracefully", async () => {
+    mockReadContract.mockRejectedValue(new Error("Network error"));
+
+    const result = await service.getCanonGuardData("0x123" as Address, 1);
+
+    expect(result.queuedTransactions).toEqual([]);
+    expect(result.preApprovedItems).toEqual([]);
+    expect(result.executionHistory).toEqual([]);
+  });
+});

src/__tests__/safeService.integration.test.ts

@@ -24,8 +24,8 @@ describe("SafeService Integration Tests", () => {
     const guardAddress = await safeService.getGuardAddress(DEMO_SAFE_WITH_GUARD);
 
     expect(vaultInfo.hasCanonGuard).toBe(true);
-    expect(vaultInfo.guardAddress).toBe(DEMO_GUARD_ADDRESS);
-    expect(guardAddress).toBe(DEMO_GUARD_ADDRESS);
+    expect(vaultInfo.guardAddress?.toLowerCase()).toBe(DEMO_GUARD_ADDRESS.toLowerCase());
+    expect(guardAddress?.toLowerCase()).toBe(DEMO_GUARD_ADDRESS.toLowerCase());
     expect(vaultInfo.owners).toContain(DEMO_SAFE_OWNER);
   });