Add support for tuple types in ABI event and function signatures (#7415)

# [Dashboard] Fix: Improve ABI type handling for tuple types in webhook signatures

## Notes for the reviewer
This PR adds support for properly handling tuple types in ABI event and function signatures. Previously, we were only extracting the basic type string, which doesn't correctly represent tuple structures. Now we recursively build the canonical type representation for tuples, including nested tuples and array dimensions.

## How to test
The changes can be tested by creating webhooks with contracts that use tuple types in their events or functions. The signature extraction should now correctly represent the canonical format for these complex types.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Bug Fixes**
  - Improved handling of tuple types in ABI inputs to ensure accurate event and function signature generation, especially for nested tuple structures.
- **New Features**
  - Function signature labels in transaction filters are now truncated for better readability without affecting underlying data.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily enhances the handling of function signatures in the `FilterDetailsStep.tsx` component and improves the extraction of ABI input types in `abiUtils.ts`. It introduces a helper function to manage tuple types and modifies how function signatures are displayed.

### Detailed summary
- In `FilterDetailsStep.tsx`, updated the label for function signatures to use `truncateMiddle(sig.name, 30, 15)` for better readability.
- Added a new helper function `getCanonicalType` in `abiUtils.ts` to recursively handle tuple types in ABI inputs.
- Modified the extraction of canonical input types in both `extractEventSignatures` and `extractFunctionSignatures` to use `getCanonicalType` instead of directly mapping the type.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: AmineAfia

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx

@@ -344,7 +344,7 @@ export function FilterDetailsStep({
                     }}
                     options={functionSignatures.map((sig) => ({
                       abi: sig.abi,
-                      label: sig.name,
+                      label: truncateMiddle(sig.name, 30, 15),
                       value: sig.signature,
                     }))}
                     placeholder="Select or enter a function signature"

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/utils/abiUtils.ts

@@ -28,6 +28,19 @@ function isAbiInput(
   );
 }
 
+// Helper to recursively get canonical type for ABI input (handles tuples)
+function getCanonicalType(input: any): string {
+  if (input.type.startsWith("tuple")) {
+    // Recursively build tuple type string
+    const components = input.components || [];
+    const tupleType = `(${components.map(getCanonicalType).join(",")})`;
+    // Handle tuple arrays (tuple[], tuple[2], etc)
+    const arraySuffix = input.type.slice("tuple".length);
+    return tupleType + arraySuffix;
+  }
+  return input.type;
+}
+
 /**
  * Extracts event signatures from ABI data
  * @param abiData Array of ABI data objects
@@ -80,7 +93,7 @@ export const extractEventSignatures = (
               const canonicalInputs = Array.isArray(event.inputs)
                 ? event.inputs
                     .filter((input: unknown) => isAbiInput(input))
-                    .map((input: { type: string }) => input.type)
+                    .map((input: any) => getCanonicalType(input))
                     .join(",")
                 : "";
 
@@ -162,7 +175,7 @@ export const extractFunctionSignatures = (
               const canonicalInputs = Array.isArray(func.inputs)
                 ? func.inputs
                     .filter((input: unknown) => isAbiInput(input))
-                    .map((input: { type: string }) => input.type)
+                    .map((input: any) => getCanonicalType(input))
                     .join(",")
                 : "";