Enhance wallet profile image handling and improve image upload validation

QSchlegel · QSchlegel · commit c285539fd587 · 2025-12-19T13:19:52.000+01:00
- Added profileImageIpfsUrl field to the Wallet model in the Prisma schema for storing wallet profile images.
- Updated CardUI and related components to display wallet profile images, enhancing visual representation.
- Implemented initialUrl prop in ImgDragAndDrop component to support pre-filled image uploads.
- Added file size validation for image uploads, enforcing a 1MB limit to ensure optimal performance.
- Enhanced error handling for image uploads and fetch operations, providing clearer feedback to users.
diff --git a/prisma/migrations/20251219125932_add_profile_image_ipfs_url/migration.sql b/prisma/migrations/20251219125932_add_profile_image_ipfs_url/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Wallet" ADD COLUMN "profileImageIpfsUrl" TEXT;
+
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -41,6 +41,7 @@ model Wallet {
   clarityApiKey           String?
   rawImportBodies         Json?
   migrationTargetWalletId String?
+  profileImageIpfsUrl     String?
 }
 
 model Transaction {
diff --git a/src/components/common/ImgDragAndDrop.tsx b/src/components/common/ImgDragAndDrop.tsx
@@ -20,16 +20,25 @@ interface ErrorResponse {
 
 interface ImgDragAndDropProps {
   onImageUpload: (url: string, digest: string) => void;
+  initialUrl?: string | null;
 }
 
-export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
+export default function ImgDragAndDrop({ onImageUpload, initialUrl }: ImgDragAndDropProps) {
   const [uploading, setUploading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [filePath, setFilePath] = useState<string>("");
+  const [imageUrl, setImageUrl] = useState<string | null>(initialUrl ?? null);
+  const [filePath, setFilePath] = useState<string>(initialUrl ?? "");
   const [digest, setDigest] = useState<string>("");
   const lastComputedUrlRef = useRef<string>("");
 
+  // Update state when initialUrl changes
+  useEffect(() => {
+    if (initialUrl) {
+      setImageUrl(initialUrl);
+      setFilePath(initialUrl);
+    }
+  }, [initialUrl]);
+
   async function computeSha256(file: File): Promise<string> {
     const arrayBuffer = await file.arrayBuffer();
     const hashBuffer = await crypto.subtle.digest("SHA-256", arrayBuffer);
@@ -59,6 +68,14 @@ export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
     if (!acceptedFiles.length) return;
     const file = acceptedFiles[0];
     if (!file) return;
+    
+    // Check file size (1MB = 1,048,576 bytes)
+    const MAX_FILE_SIZE = 1048576;
+    if (file.size > MAX_FILE_SIZE) {
+      setError(`File size exceeds 1MB limit. File size: ${(file.size / 1024 / 1024).toFixed(2)}MB`);
+      return;
+    }
+    
     setUploading(true);
     setError(null);
 
@@ -112,6 +129,17 @@ export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
     onDrop,
     accept: { "image/*": [] },
     multiple: false,
+    maxSize: 1048576, // 1MB in bytes
+    onDropRejected: (fileRejections) => {
+      const rejection = fileRejections[0];
+      if (rejection?.errors?.[0]?.code === "file-too-large") {
+        setError("File size exceeds 1MB limit. Please choose a smaller image.");
+      } else if (rejection?.errors?.[0]?.code === "file-invalid-type") {
+        setError("Invalid file type. Please upload an image file.");
+      } else {
+        setError("File upload rejected. Please try again.");
+      }
+    },
   });
 
   // Compute image digest for manually entered URLs
@@ -121,15 +149,39 @@ export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
         try {
           const response = await fetch(filePath);
           if (!response.ok) throw new Error("Image fetch failed");
+          
+          // Check Content-Length header if available
+          const contentLength = response.headers.get("content-length");
+          const MAX_FILE_SIZE = 1048576; // 1MB
+          if (contentLength && parseInt(contentLength) > MAX_FILE_SIZE) {
+            setError(`Image size exceeds 1MB limit. Image size: ${(parseInt(contentLength) / 1024 / 1024).toFixed(2)}MB`);
+            setFilePath("");
+            setImageUrl(null);
+            return;
+          }
+          
           const arrayBuffer = await response.arrayBuffer();
+          
+          // Check actual file size
+          if (arrayBuffer.byteLength > MAX_FILE_SIZE) {
+            setError(`Image size exceeds 1MB limit. Image size: ${(arrayBuffer.byteLength / 1024 / 1024).toFixed(2)}MB`);
+            setFilePath("");
+            setImageUrl(null);
+            return;
+          }
+          
           const hashBuffer = await crypto.subtle.digest("SHA-256", arrayBuffer);
           const hashArray = Array.from(new Uint8Array(hashBuffer));
           const urlDigest = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
           setDigest(urlDigest);
+          setError(null);
           lastComputedUrlRef.current = filePath;
           onImageUpload(filePath, urlDigest);
         } catch (err) {
           console.error("Failed to generate digest from URL:", err);
+          setError("Failed to load image from URL. Please check the URL and try again.");
+          setFilePath("");
+          setImageUrl(null);
         }
       })();
     }
@@ -139,13 +191,12 @@ export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-4">
         {imageUrl && (
-          <div className="relative h-32 w-32">
+          <div className="relative aspect-square w-32">
             <Image
               src={imageUrl}
               alt="Uploaded Preview"
-              width={128}
-              height={128}
-              className="rounded-md object-cover"
+              fill
+              className="rounded-md object-cover object-center"
             />
             <button
               onClick={() => {
diff --git a/src/components/common/card-content.tsx b/src/components/common/card-content.tsx
@@ -8,21 +8,30 @@ export default function CardUI({
   icon,
   cardClassName,
   headerDom,
+  profileImage,
 }: {
   children: React.ReactNode;
   title: string;
   description?: ReactNode | string | null;
   icon?: any;
   cardClassName?: string;
   headerDom?: ReactNode;
+  profileImage?: ReactNode;
 }) {
   // Make title larger for wallet info card (col-span-2)
   const isLargeTitle = cardClassName?.includes('col-span-2');
   
   return (
     <Card className={`w-full max-w-4xl ${cardClassName}`}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className={isLargeTitle ? "text-2xl sm:text-3xl font-semibold" : "text-xl font-medium"}>{title}</CardTitle>
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {profileImage && (
+            <div className="flex-shrink-0">
+              {profileImage}
+            </div>
+          )}
+          <CardTitle className={isLargeTitle ? "text-2xl sm:text-3xl font-semibold" : "text-xl font-medium"}>{title}</CardTitle>
+        </div>
         {headerDom && headerDom}
         {icon && (
           <>
diff --git a/src/components/pages/homepage/wallets/index.tsx b/src/components/pages/homepage/wallets/index.tsx
@@ -24,6 +24,7 @@ import EmptyWalletsState from "./EmptyWalletsState";
 import SectionExplanation from "./SectionExplanation";
 import WalletCardSkeleton from "./WalletCardSkeleton";
 import WalletInviteCardSkeleton from "./WalletInviteCardSkeleton";
+import IPFSImage from "@/components/common/ipfs-image";
 
 
 export default function PageWallets() {
@@ -267,6 +268,18 @@ function CardWallet({
         title={`${wallet.name}${wallet.isArchived ? " (Archived)" : ""}`}
         description={wallet.description}
         cardClassName=""
+        profileImage={
+          wallet.profileImageIpfsUrl ? (
+            <div className="relative aspect-square w-10 sm:w-12 rounded-lg overflow-hidden border border-border/50 shadow-sm">
+              <IPFSImage
+                src={wallet.profileImageIpfsUrl}
+                alt="Wallet Profile"
+                fill
+                className="object-cover object-center"
+              />
+            </div>
+          ) : undefined
+        }
         headerDom={
           isSummonWallet ? (
             <Badge 
diff --git a/src/components/pages/wallet/info/archive-wallet.tsx b/src/components/pages/wallet/info/archive-wallet.tsx
@@ -36,6 +36,7 @@ export function ArchiveWallet({ appWallet }: { appWallet: Wallet }) {
       name: appWallet.name,
       description: appWallet.description ?? "",
       isArchived: isArchived,
+      profileImageIpfsUrl: appWallet.profileImageIpfsUrl ?? null,
     });
   }
 
diff --git a/src/components/pages/wallet/info/card-info.tsx b/src/components/pages/wallet/info/card-info.tsx
@@ -9,6 +9,9 @@ import useAppWallet from "@/hooks/useAppWallet";
 import { deserializeAddress } from "@meshsdk/core";
 import { getBalanceFromUtxos } from "@/utils/getBalance";
 import { useWalletsStore } from "@/lib/zustand/wallets";
+import ImgDragAndDrop from "@/components/common/ImgDragAndDrop";
+import IPFSImage from "@/components/common/ipfs-image";
+import Image from "next/image";
 
 import {
   DropdownMenu,
@@ -52,6 +55,18 @@ export default function CardInfo({ appWallet }: { appWallet: Wallet }) {
     <CardUI
       title={appWallet.name}
       description={appWallet.description}
+      profileImage={
+        appWallet.profileImageIpfsUrl ? (
+          <div className="relative aspect-square w-12 sm:w-14 rounded-lg overflow-hidden border border-border/50 shadow-sm">
+            <IPFSImage
+              src={appWallet.profileImageIpfsUrl}
+              alt="Wallet Profile"
+              fill
+              className="object-cover object-center"
+            />
+          </div>
+        ) : undefined
+      }
       headerDom={
         <div className="flex items-center gap-2">
           {isLegacyWallet && (
@@ -101,6 +116,9 @@ function EditInfo({
     appWallet.description ?? "",
   );
   const [isArchived, setIsArchived] = useState<boolean>(appWallet.isArchived);
+  const [profileImageIpfsUrl, setProfileImageIpfsUrl] = useState<string | null>(
+    appWallet.profileImageIpfsUrl ?? null,
+  );
   const [loading, setLoading] = useState<boolean>(false);
   const ctx = api.useUtils();
   const { toast } = useToast();
@@ -133,6 +151,7 @@ function EditInfo({
       name,
       description,
       isArchived,
+      profileImageIpfsUrl: profileImageIpfsUrl || null,
     });
   }
   return (
@@ -158,6 +177,17 @@ function EditInfo({
           onChange={(e) => setDescription(e.target.value)}
         />
       </div>
+      <div className="grid gap-2 sm:gap-3">
+        <Label htmlFor="profileImage">Profile Image</Label>
+        <ImgDragAndDrop
+          onImageUpload={(url) => setProfileImageIpfsUrl(url)}
+          initialUrl={profileImageIpfsUrl}
+        />
+        <p className="text-xs text-muted-foreground">
+          <strong>Note:</strong> Images will be stored on public IPFS (InterPlanetary File System). 
+          Once uploaded, the image will be publicly accessible and cannot be removed from IPFS.
+        </p>
+      </div>
       <div className="grid gap-2 sm:gap-3">
         <Label htmlFor="type" className="text-sm">
           Archive Status
@@ -190,7 +220,10 @@ function EditInfo({
           onClick={() => editWallet()}
           disabled={
             loading ||
-            (appWallet.name === name && appWallet.description === description && appWallet.isArchived === isArchived)
+            (appWallet.name === name && 
+             appWallet.description === description && 
+             appWallet.isArchived === isArchived &&
+             appWallet.profileImageIpfsUrl === profileImageIpfsUrl)
           }
           className="flex-1 sm:flex-initial"
         >
@@ -396,31 +429,40 @@ function ShowInfo({ appWallet }: { appWallet: Wallet }) {
   const requiredCount = getRequiredCount();
   
   return (
-    <div className="space-y-4">
-      {/* Desktop: Grid layout for addresses and balance */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {/* Left Column */}
-        <div className="space-y-4">
-          {/* Signing Threshold - Above Address */}
-          <div className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg border border-border/30">
-            <div className="flex-1 min-w-0">
-              <div className="text-xs font-medium text-muted-foreground mb-0.5">Signing Threshold</div>
-              <div className="text-sm font-medium">{getSignersText()}</div>
-            </div>
+    <div className="space-y-6">
+      {/* Top Section: Key Info */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
+          {/* Signing Threshold */}
+          <div className="flex items-center gap-3 p-4 bg-muted/40 rounded-lg border border-border/40">
             <div className="flex items-center gap-1.5 flex-shrink-0">
               {Array.from({ length: signersCount }).map((_, index) => (
                 <User
                   key={index}
-                  className={`h-5 w-5 sm:h-6 sm:w-6 ${
+                  className={`h-4 w-4 sm:h-5 sm:w-5 ${
                     index < requiredCount
                       ? "text-foreground opacity-100"
                       : "text-muted-foreground opacity-30"
                   }`}
                 />
               ))}
             </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-xs font-medium text-muted-foreground mb-0.5">Signing Threshold</div>
+              <div className="text-sm font-semibold">{getSignersText()}</div>
+            </div>
           </div>
           
+          {/* Balance */}
+          <div className="flex flex-col justify-center p-4 bg-muted/40 rounded-lg border border-border/40">
+            <div className="text-xs font-medium text-muted-foreground mb-1">Balance</div>
+            <div className="text-2xl sm:text-3xl font-bold">{balance} ₳</div>
+          </div>
+      </div>
+      
+      {/* Addresses Section */}
+      <div className="space-y-3 pt-2 border-t border-border/30">
+        <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">Wallet Details</div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           {/* Address */}
           <RowLabelInfo
             label="Address"
@@ -468,15 +510,6 @@ function ShowInfo({ appWallet }: { appWallet: Wallet }) {
             />
           ) : null}
         </div>
-        
-        {/* Right Column */}
-        <div className="space-y-4">
-          {/* Balance - Larger Display */}
-          <div className="flex flex-col gap-2">
-            <div className="text-sm font-medium text-muted-foreground">Balance</div>
-            <div className="text-2xl sm:text-3xl font-semibold">{balance} ₳</div>
-          </div>
-        </div>
       </div>
       
       {/* Native Script - Collapsible Pro Feature */}
diff --git a/src/components/ui/card-content.tsx b/src/components/ui/card-content.tsx
@@ -8,18 +8,27 @@ export default function CardUI({
   icon,
   cardClassName,
   headerDom,
+  profileImage,
 }: {
   children: React.ReactNode;
   title: string;
   description?: ReactNode | string | null;
   icon?: any;
   cardClassName?: string;
   headerDom?: ReactNode;
+  profileImage?: ReactNode;
 }) {
   return (
     <Card className={`w-full ${cardClassName || ""}`}>
       <CardHeader className="flex flex-row items-start sm:items-center justify-between space-y-0 pb-2 px-4 sm:px-6 pt-4 sm:pt-6 gap-2">
-        <CardTitle className="text-lg sm:text-xl font-medium pr-2 flex-1 min-w-0">{title}</CardTitle>
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {profileImage && (
+            <div className="flex-shrink-0">
+              {profileImage}
+            </div>
+          )}
+          <CardTitle className="text-lg sm:text-xl font-medium pr-2 flex-1 min-w-0">{title}</CardTitle>
+        </div>
         {headerDom && <div className="flex-shrink-0">{headerDom}</div>}
         {icon && (
           <>
diff --git a/src/pages/api/pinata-storage/image/put.ts b/src/pages/api/pinata-storage/image/put.ts
@@ -53,6 +53,15 @@ export default async function handler(
 
     const file: File = Array.isArray(files.file) ? files.file[0] : files.file;
     
+    // Validate file size (1MB = 1,048,576 bytes)
+    const MAX_FILE_SIZE = 1048576;
+    const fileSize = file.size;
+    if (fileSize > MAX_FILE_SIZE) {
+      return res.status(400).json({ 
+        error: `File size exceeds 1MB limit. File size: ${(fileSize / 1024 / 1024).toFixed(2)}MB` 
+      });
+    }
+    
     // Validate and retrieve form fields
     const rawShortHash = Array.isArray(fields.shortHash)
       ? fields.shortHash[0]
diff --git a/src/server/api/routers/wallets.ts b/src/server/api/routers/wallets.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+-- AlterTable`
	`2`	`+ALTER TABLE "Wallet" ADD COLUMN "profileImageIpfsUrl" TEXT;`
	`3`	`+`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ model Wallet {`
`41`	`41`	`clarityApiKey String?`
`42`	`42`	`rawImportBodies Json?`
`43`	`43`	`migrationTargetWalletId String?`
	`44`	`+ profileImageIpfsUrl String?`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`model Transaction {`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ export function ArchiveWallet({ appWallet }: { appWallet: Wallet }) {`
`36`	`36`	`name: appWallet.name,`
`37`	`37`	`description: appWallet.description ?? "",`
`38`	`38`	`isArchived: isArchived,`
	`39`	`+ profileImageIpfsUrl: appWallet.profileImageIpfsUrl ?? null,`
`39`	`40`	`});`
`40`	`41`	`}`
`41`	`42`