fix: improve UX feedback, memoization consistency, and docs accuracy

README.md

@@ -23,7 +23,7 @@ Learn more at [shelby.xyz](https://shelby.xyz)
 
 ### Prerequisites
 
-- Node.js 18+
+- Node.js 22+
 - pnpm, npm, or yarn
 - A Solana wallet browser extension (Solflare, Phantom, etc.)
 

src/components/BlobUploader.tsx

@@ -49,19 +49,24 @@ export const BlobUploader = memo(function BlobUploader({
     }
   }, [fundedStorageAddress]);
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const isDuplicate = uploadedBlobs.some((blob) => blob.name === file.name);
-      if (isDuplicate) {
-        setStatusMessage(`A blob named "${file.name}" already exists.`);
-        event.target.value = "";
-        return;
+  const handleFileChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        const isDuplicate = uploadedBlobs.some(
+          (blob) => blob.name === file.name,
+        );
+        if (isDuplicate) {
+          setStatusMessage(`A blob named "${file.name}" already exists.`);
+          event.target.value = "";
+          return;
+        }
+        setSelectedFile(file);
+        setStatusMessage(null);
       }
-      setSelectedFile(file);
-      setStatusMessage(null);
-    }
-  };
+    },
+    [uploadedBlobs],
+  );
 
   const handleUpload = useCallback(async () => {
     if (!selectedFile || !storageAccountAddress || !signAndSubmitTransaction)
@@ -237,9 +242,9 @@ export const BlobUploader = memo(function BlobUploader({
             Uploaded Blobs
           </h3>
           <div className="space-y-2">
-            {uploadedBlobs.map((blob, index) => (
+            {uploadedBlobs.map((blob) => (
               <div
-                key={`${blob.name}-${index}`}
+                key={blob.name}
                 className="p-3 bg-white/5 rounded-lg border border-white/10"
               >
                 <div className="flex items-center justify-between">

src/components/Header.tsx

@@ -5,6 +5,7 @@ import { useStorageAccount } from "@shelby-protocol/solana-kit/react";
 import { useWalletConnection } from "@solana/react-hooks";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { toast } from "sonner";
 
 function formatAddress(address?: string) {
   if (!address) return "Not connected";
@@ -117,9 +118,10 @@ export const Header = memo(function Header({ currentStep }: HeaderProps) {
                 </span>
                 <button
                   type="button"
-                  onClick={() => {
+                  onClick={async () => {
                     if (walletAddress) {
-                      navigator.clipboard.writeText(walletAddress);
+                      await navigator.clipboard.writeText(walletAddress);
+                      toast.success("Wallet address copied");
                     }
                   }}
                   className="p-1.5 rounded hover:bg-white/10 transition text-white/60 hover:text-white"
@@ -156,11 +158,12 @@ export const Header = memo(function Header({ currentStep }: HeaderProps) {
                 </span>
                 <button
                   type="button"
-                  onClick={() => {
+                  onClick={async () => {
                     if (storageAccountAddress) {
-                      navigator.clipboard.writeText(
+                      await navigator.clipboard.writeText(
                         storageAccountAddress.toString(),
                       );
+                      toast.success("Storage address copied");
                     }
                   }}
                   className="p-1.5 rounded hover:bg-white/10 transition text-white/60 hover:text-white"