Fix Engine Page contract subscriptions crash + some form validation (#4585)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance contract address validation and error handling in the contract subscription feature.

### Detailed summary
- Added `isAddress` function for contract address validation
- Improved error handling for invalid contract addresses and URLs

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

<!-- end pr-codex -->

apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx

@@ -32,11 +32,12 @@ import { useV5DashboardChain } from "lib/v5-adapter";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import { AiOutlinePlusCircle } from "react-icons/ai";
-import { getContract } from "thirdweb";
+import { getContract, isAddress } from "thirdweb";
 import {
   Button,
   Card,
   Checkbox,
+  FormErrorMessage,
   FormHelperText,
   FormLabel,
   Text,
@@ -107,6 +108,7 @@ const AddModal = ({
       processTransactionReceipts: false,
       filterFunctions: [],
     },
+    mode: "onChange",
   });
 
   const onSubmit = (data: AddContractSubscriptionForm) => {
@@ -194,26 +196,59 @@ const ModalBodyInputContract = ({
             />
           </FormControl>
 
-          <FormControl isRequired>
+          <FormControl
+            isRequired
+            isInvalid={
+              !!form.getFieldState("contractAddress", form.formState).error
+            }
+          >
             <FormLabel>Contract Address</FormLabel>
             <Input
               type="text"
               placeholder="0x..."
-              {...form.register("contractAddress", { required: true })}
+              {...form.register("contractAddress", {
+                required: true,
+                validate: (v) => {
+                  const isValid = isAddress(v);
+                  return !isValid ? "Invalid address" : true;
+                },
+              })}
             />
+            <FormErrorMessage>
+              {
+                form.getFieldState("contractAddress", form.formState).error
+                  ?.message
+              }
+            </FormErrorMessage>
           </FormControl>
 
-          <FormControl isRequired>
+          <FormControl
+            isRequired
+            isInvalid={!!form.getFieldState("webhookUrl", form.formState).error}
+          >
             <FormLabel>Webhook URL</FormLabel>
             <Input
               type="url"
               placeholder="https://"
-              {...form.register("webhookUrl", { required: true })}
+              {...form.register("webhookUrl", {
+                required: true,
+                validate: (v) => {
+                  try {
+                    new URL(v);
+                    return true;
+                  } catch {
+                    return "Invalid URL";
+                  }
+                },
+              })}
             />
             <FormHelperText>
               Engine sends an HTTP request to your backend when new onchain data
               for this contract is detected.
             </FormHelperText>
+            <FormErrorMessage>
+              {form.getFieldState("webhookUrl", form.formState).error?.message}
+            </FormErrorMessage>
           </FormControl>
         </Stack>
       </ModalBody>

apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx

@@ -31,10 +31,22 @@ import { useV5DashboardChain } from "lib/v5-adapter";
 import { useState } from "react";
 import { FiInfo, FiTrash } from "react-icons/fi";
 import { eth_getBlockByNumber, getRpcClient } from "thirdweb";
-import { shortenAddress } from "thirdweb/utils";
+import { shortenAddress as shortenAddresThrows } from "thirdweb/utils";
 import { Button, Card, FormLabel, LinkButton, Text } from "tw-components";
 import { AddressCopyButton } from "../../../tw-components/AddressCopyButton";
 
+function shortenAddress(address: string) {
+  if (!address) {
+    return "";
+  }
+
+  try {
+    return shortenAddresThrows(address);
+  } catch {
+    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+  }
+}
+
 interface ContractSubscriptionTableProps {
   instanceUrl: string;
   contractSubscriptions: EngineContractSubscription[];