Transfer NFTs

components/user/collected/UserPageCollected.tsx

@@ -26,8 +26,10 @@ import {
   convertAddressToLowerCase,
 } from "./filters/user-page-collected-filters.helpers";
 import UserPageCollectedFilters from "./filters/UserPageCollectedFilters";
+import TransferPanel from "./transfer/TransferPanel";
+import { TransferProvider } from "./transfer/TransferState";
+import TransferToggle from "./transfer/TransferToggle";
 import UserPageCollectedFirstLoading from "./UserPageCollectedFirstLoading";
-
 export interface ProfileCollectedFilters {
   readonly handleOrWallet: string;
   readonly accountForConsolidations: boolean;
@@ -450,7 +452,7 @@ export default function UserPageCollected({
       {isInitialLoading ? (
         <UserPageCollectedFirstLoading />
       ) : (
-        <>
+        <TransferProvider>
           <div
             className="tw-overflow-x-auto horizontal-menu-hide-scrollbar horizontal-menu-scrollable-x"
             ref={scrollContainer}>
@@ -465,17 +467,28 @@ export default function UserPageCollected({
               scrollHorizontally={scrollHorizontally}
             />
           </div>
-          <div className="tw-mt-6">
-            <UserPageCollectedCards
-              cards={data?.data ?? []}
-              totalPages={totalPages}
-              page={filters.page}
-              showDataRow={showDataRow}
-              filters={filters}
-              setPage={setPage}
-            />
+
+          {/* small control bar with Transfer toggle */}
+          <div className="tw-mt-3 tw-flex tw-justify-end">
+            <TransferToggle />
+          </div>
+
+          <div className="tw-mt-6 tw-flex tw-gap-6">
+            <div className="tw-flex-1">
+              <UserPageCollectedCards
+                cards={data?.data ?? []}
+                totalPages={totalPages}
+                page={filters.page}
+                showDataRow={showDataRow}
+                filters={filters}
+                setPage={setPage}
+              />
+            </div>
+
+            {/* appears only when transfer is enabled */}
+            <TransferPanel />
           </div>
-        </>
+        </TransferProvider>
       )}
     </div>
   );

components/user/collected/cards/UserPageCollectedCard.tsx

@@ -1,17 +1,25 @@
-import Link from "next/link";
-import {
-  CollectedCard,
-  CollectedCollectionType,
-} from "@/entities/IProfile";
+import { CollectedCard, CollectedCollectionType } from "@/entities/IProfile";
 import { formatNumberWithCommasOrDash } from "@/helpers/Helpers";
+import Link from "next/link";
 import { COLLECTED_COLLECTIONS_META } from "../filters/user-page-collected-filters.helpers";
 
 export default function UserPageCollectedCard({
   card,
   showDataRow,
+  interactiveMode = "link",
+  selected = false,
+  onToggle,
+  // NEW
+  copiesMax = 1,
+  qtySelected = 0,
 }: {
   readonly card: CollectedCard;
   readonly showDataRow: boolean;
+  readonly interactiveMode?: "link" | "select";
+  readonly selected?: boolean;
+  readonly onToggle?: () => void;
+  readonly copiesMax?: number;
+  readonly qtySelected?: number;
 }) {
   const collectionMeta = COLLECTED_COLLECTIONS_META[card.collection];
   const path = `${collectionMeta.cardPath}/${card.token_id}`;
@@ -36,59 +44,111 @@ export default function UserPageCollectedCard({
     }
   };
 
-  return (
-    <Link href={path} className="tw-no-underline">
-      <div className="tw-cursor-pointer tw-flex tw-flex-col tw-bg-gradient-to-br tw-from-iron-900 tw-to-white/5 tw-rounded-lg tw-overflow-hidden tw-ring-1 tw-px-0.5 tw-pt-0.5 tw-ring-inset tw-ring-iron-700 hover:tw-ring-iron-600/60 hover:tw-to-white/10 tw-transition-opacity tw-duration-500 tw-ease-out">
-        <div className="tw-flex tw-flex-wrap">
-          <div className="tw-w-full tw-max-w-full">
-            <div className="tw-h-[200px] min-[800px]:tw-h-[250px] min-[1200px]:tw-h-[18.75rem] tw-text-center tw-flex tw-items-center tw-justify-center">
-              <img
-                src={card.img}
-                alt={card.collection}
-                className="tw-bg-transparent tw-max-w-full tw-max-h-full tw-h-auto tw-w-auto tw-mx-auto tw-object-contain"
-              />
-            </div>
+  // shared card body
+  const CardBody = (
+    <div
+      className={[
+        "tw-cursor-pointer tw-flex tw-flex-col tw-bg-gradient-to-br tw-from-iron-900 tw-to-white/5 tw-rounded-lg tw-overflow-hidden tw-px-0.5 tw-pt-0.5 tw-transition tw-duration-300 tw-ease-out",
+        selected
+          ? "tw-ring-2 tw-ring-emerald-400/60 tw-ring-inset"
+          : "tw-ring-1 tw-ring-inset tw-ring-iron-700 hover:tw-ring-iron-600/60 hover:tw-to-white/10",
+      ].join(" ")}>
+      <div className="tw-flex tw-flex-wrap">
+        <div className="tw-w-full tw-max-w-full">
+          <div className="tw-h-[200px] min-[800px]:tw-h-[250px] min-[1200px]:tw-h-[18.75rem] tw-text-center tw-flex tw-items-center tw-justify-center">
+            <img
+              src={card.img}
+              alt={card.collection}
+              className="tw-bg-transparent tw-max-w-full tw-max-h-full tw-h-auto tw-w-auto tw-mx-auto tw-object-contain"
+            />
           </div>
-          <div className="tw-pt-3 tw-px-2 tw-flex tw-justify-between tw-items-center tw-w-full">
-            <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-400">
-              {collectionMeta.label}
-            </span>
-            <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-500">
-              #{card.token_id}
+        </div>
+        <div className="tw-pt-3 tw-px-2 tw-flex tw-justify-between tw-items-center tw-w-full">
+          <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-400">
+            {collectionMeta.label}
+          </span>
+          <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-500">
+            #{card.token_id}
+          </span>
+        </div>
+      </div>
+      <div className="tw-pt-2 tw-pb-4 tw-px-2 tw-self-end tw-w-full tw-h-full">
+        <div className="tw-flex tw-flex-col tw-h-full tw-justify-between tw-gap-y-2.5 tw-divide-y tw-divide-solid tw-divide-iron-700 tw-divide-x-0">
+          <div className="tw-flex tw-justify-between tw-gap-x-2">
+            <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-50">
+              {card.token_name}
             </span>
+            {showSeizedCount && (
+              <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-400">
+                {formatNumberWithCommasOrDash(card.seized_count)}x
+              </span>
+            )}
           </div>
-        </div>
-        <div className="tw-pt-2 tw-pb-4 tw-px-2 tw-self-end tw-w-full tw-h-full">
-          <div className="tw-flex tw-flex-col tw-h-full tw-justify-between tw-gap-y-2.5 tw-divide-y tw-divide-solid tw-divide-iron-700 tw-divide-x-0">
-            <div className="tw-flex tw-justify-between tw-gap-x-2">
-              <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-50">
-                {card.token_name}
+          {showDataRow && (
+            <div className="tw-pt-2 tw-flex tw-items-center tw-justify-between">
+              <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium">
+                <span className="tw-text-iron-400">TDH</span>
+                <span className="tw-ml-1 tw-text-iron-50">
+                  {getTdhDisplay()}
+                </span>
               </span>
-              {showSeizedCount && (
-                <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium tw-text-iron-400">
-                  {formatNumberWithCommasOrDash(card.seized_count)}x
+              <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium">
+                <span className="tw-text-iron-400">Rank</span>
+                <span className="tw-ml-1 tw-text-iron-50">
+                  {getRankDisplay()}
                 </span>
-              )}
+              </span>
             </div>
-            {showDataRow && (
-              <div className="tw-pt-2 tw-flex tw-items-center tw-justify-between">
-                <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium">
-                  <span className="tw-text-iron-400">TDH</span>
-                  <span className="tw-ml-1 tw-text-iron-50">
-                    {getTdhDisplay()}
-                  </span>
-                </span>
-                <span className="tw-text-sm min-[1200px]:tw-text-md tw-font-medium">
-                  <span className="tw-text-iron-400">Rank</span>
-                  <span className="tw-ml-1 tw-text-iron-50">
-                    {getRankDisplay()}
-                  </span>
-                </span>
-              </div>
-            )}
-          </div>
+          )}
+
+          {interactiveMode === "select" && (
+            <div className="tw-pt-2 tw-flex tw-items-center tw-justify-center tw-gap-x-2">
+              <input
+                checked={selected}
+                id={`${card.collection}-${card.token_id}`}
+                type="checkbox"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                onSelect={onToggle}
+                onChange={onToggle}
+              />
+              <span className="tw-text-sm tw-font-medium">
+                {selected
+                  ? `Selected ${qtySelected} / ${copiesMax}`
+                  : copiesMax > 1
+                  ? `Select (up to ${copiesMax})`
+                  : "Select"}
+              </span>
+            </div>
+          )}
         </div>
       </div>
+    </div>
+  );
+
+  // In transfer mode: disable Link, click anywhere toggles selection
+  if (interactiveMode === "select") {
+    return (
+      <div
+        className="tw-no-underline"
+        role="button"
+        tabIndex={0}
+        onClick={onToggle}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggle?.();
+          }
+        }}
+        aria-pressed={selected}>
+        {CardBody}
+      </div>
+    );
+  }
+
+  // Normal (navigable) card
+  return (
+    <Link href={path} className="tw-no-underline">
+      {CardBody}
     </Link>
   );
 }

components/user/collected/cards/UserPageCollectedCards.tsx

@@ -1,9 +1,11 @@
-import { CollectedCard } from "@/entities/IProfile";
 import CommonTablePagination from "@/components/utils/table/paginator/CommonTablePagination";
+import { CollectedCard } from "@/entities/IProfile";
 import { ProfileCollectedFilters } from "../UserPageCollected";
 import UserPageCollectedCard from "./UserPageCollectedCard";
 import UserPageCollectedCardsNoCards from "./UserPageCollectedCardsNoCards";
 
+import { buildTransferKey, useTransfer } from "../transfer/TransferState";
+
 export default function UserPageCollectedCards({
   cards,
   totalPages,
@@ -19,18 +21,48 @@ export default function UserPageCollectedCards({
   readonly filters: ProfileCollectedFilters;
   readonly setPage: (page: number) => void;
 }) {
+  const t = useTransfer();
+
+  const gridClasses = t.enabled
+    ? "tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-3 tw-gap-4 lg:tw-gap-6 tw-pb-2"
+    : "tw-grid tw-grid-cols-2 sm:tw-grid-cols-3 md:tw-grid-cols-4 tw-gap-4 lg:tw-gap-6 tw-pb-2";
+
   return (
     <div>
       {cards.length ? (
         <div className="tw-flow-root">
-          <div className="tw-grid tw-grid-cols-2 sm:tw-grid-cols-3 md:tw-grid-cols-4 tw-gap-4 lg:tw-gap-6 tw-pb-2">
-            {cards.map((card) => (
-              <UserPageCollectedCard
-                key={`${card.collection}-${card.token_id}`}
-                card={card}
-                showDataRow={showDataRow}
-              />
-            ))}
+          <div className={gridClasses}>
+            {cards.map((card) => {
+              const selKey = buildTransferKey({
+                collection: card.collection,
+                tokenId: card.token_id,
+                fallback: `${card.collection}-${card.token_id}`,
+              });
+              const selected = t.isSelected(selKey);
+              const selectedItem = t.selected.get(selKey);
+              const max = Math.max(1, Number(card.seized_count ?? 1));
+              const qty = selectedItem?.qty ?? 0;
+
+              return (
+                <UserPageCollectedCard
+                  key={`${card.collection}-${card.token_id}`}
+                  card={card}
+                  showDataRow={showDataRow}
+                  interactiveMode={t.enabled ? "select" : "link"}
+                  selected={selected}
+                  copiesMax={max}
+                  qtySelected={qty}
+                  onToggle={() =>
+                    t.toggleSelect({
+                      key: selKey,
+                      title: card.token_name,
+                      thumbUrl: card.img,
+                      max, // <- important
+                    })
+                  }
+                />
+              );
+            })}
           </div>
           {totalPages > 1 && (
             <CommonTablePagination