[Update] Add address validation in WalletAddress and AddAdminButton components (#4575)

Author: jnsdls

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/hover-card";
 import { Check, Copy, ExternalLinkIcon } from "lucide-react";
 import { useMemo, useState } from "react";
+import { isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
 import {
   Blobbie,
@@ -28,6 +29,7 @@ export function WalletAddress(props: {
 }) {
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
+
   const [shortenedAddress, lessShortenedAddress] = useMemo(() => {
     return [
       props.shortenAddress !== false
@@ -44,6 +46,10 @@ export function WalletAddress(props: {
 
   const [isCopied, setIsCopied] = useState(false);
 
+  if (!isAddress(address)) {
+    return <span>Invalid Address ({address})</span>;
+  }
+
   const copyToClipboard = async () => {
     try {
       await navigator.clipboard.writeText(address);

apps/dashboard/src/components/engine/permissions/add-admin-button.tsx

@@ -21,6 +21,7 @@ import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useForm } from "react-hook-form";
 import { AiOutlinePlusCircle } from "react-icons/ai";
+import { isAddress } from "thirdweb";
 import { Button, FormLabel } from "tw-components";
 
 interface AddAdminButtonProps {
@@ -62,6 +63,9 @@ export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
           className="!bg-background border border-border rounded-lg"
           as="form"
           onSubmit={form.handleSubmit((data) => {
+            if (!isAddress(data.walletAddress)) {
+              onError(new Error("Invalid wallet address"));
+            }
             grantPermissions(data, {
               onSuccess: () => {
                 onSuccess();