diff --git a/__tests__/AGENTS.md b/__tests__/AGENTS.md
index 448c2e134b..70db432c6d 100644
--- a/__tests__/AGENTS.md
+++ b/__tests__/AGENTS.md
@@ -1,66 +1,134 @@
-# Test Guidelines for Codex
+# Codex Testing Guidelines
 
-## Purpose and Structure
+## Purpose & Structure
 
-The `__tests__` directory contains Jest test suites for this Next.js project. Tests mirror the source folders such as `components`, `contexts`, `hooks` and `utils` to keep structure familiar. Integration tests for API routes live under `app/api`. Fixtures and helpers used across tests reside in their respective subfolders.
+* All tests live in `__tests__`, mirroring source folders (`components`, `contexts`, `hooks`, `utils`).
+* API integration tests: `app/api`.
+* Shared fixtures & helpers: relevant subfolders.
+* Jest automatically picks up mocks from `__mocks__`.
 
-## Testing Frameworks and Tools
+## Tools
 
-- **Jest** with the `ts-jest` preset for TypeScript support.
-- **@testing-library/react** and **@testing-library/user-event** for React component tests.
-- Additional mocks live in `__mocks__` and are automatically picked up by Jest.
+* **Jest** + `ts-jest` (TypeScript).
+* **@testing-library/react** + **user-event** (React tests).
+* Coverage reports in `coverage/`.
 
-## Test Writing Guidelines
+## Writing Tests
 
-- Prioritise meaningful coverage that validates business requirements over achieving raw coverage numbers.
-- Use the **Arrange – Act – Assert** pattern and keep assertions focused on behaviour, not implementation details.
-- Give each test a clear, descriptive name that conveys the scenario and expected outcome.
-- Tests should remain independent, deterministic and fast.
+* Focus on business value, not raw coverage.
+* Follow **Arrange – Act – Assert**.
+* One behaviour per test; clear, descriptive names.
+* Keep tests independent, deterministic, and fast.
+* Use realistic data.
 
-## Test Categorisation and Prioritisation
+### Test Types
 
-Consider the following categories when writing tests:
+* **Happy Path** – expected workflows.
+* **Errors** – invalid input, unexpected scenarios.
+* **Edge Cases** – boundaries, rare conditions.
+* **Integration** – components & API interactions.
+* **Performance/Security** – when relevant.
 
-- **Happy Path Tests** – standard workflows with valid inputs.
-- **Error Handling Tests** – behaviour with invalid inputs or unexpected scenarios.
-- **Edge Case Tests** – boundary conditions and uncommon situations.
-- **Integration Tests** – interactions between components or with API routes.
-- **Performance & Security Tests** – only when relevant.
+Prioritise high-risk areas first when time-boxed.
 
-When time‑boxed, focus on high‑risk areas first, then fill coverage gaps and polish.
+## Time-Boxed Cycle (20 min)
 
-## Time‑Boxed Testing Approach
+1. **5–7 min**: core flows.
+2. **5–7 min**: edge cases & branches.
+3. **5–6 min**: clean up & refine.
 
-A suggested 20‑minute cycle:
+## Quality Checklist
 
-1. **Initial Phase (5‑7 min)** – target high‑impact paths and core functionality.
-2. **Middle Phase (5‑7 min)** – add tests for edge cases or missing branches.
-3. **Final Phase (5‑6 min)** – clean up, improve readability and verify results.
+* [ ] Clear, descriptive names
+* [ ] Arrange – Act – Assert used
+* [ ] Independent & fast
+* [ ] One behaviour per test
+* [ ] Production-like data
 
-## Test Quality Checklist
+## Running Tests
 
-- [ ] Clear, descriptive test names
-- [ ] Proper Arrange – Act – Assert structure
-- [ ] Independent and deterministic
-- [ ] Execute quickly and focus on one behaviour
-- [ ] Use realistic, production‑like data
+```bash
+npm run test:cov:changed   # changed files only
+npm run test               # full suite
+npm run lint
+npm run type-check
+```
 
-## Execution Instructions
+---
 
-Run tests with:
+# Coding Standards
 
-```bash
-npm run test:cov:changed
+### Complexity
+
+* Functions ≤ 15 cognitive complexity.
+* Extract deep ternaries (>3 levels).
+* Break down complex logic.
+
+### Modern Patterns
+
+**Iteration**
+
+```ts
+// ❌ Avoid
+items.forEach(item => processItem(item));
+
+// ✅ Prefer
+for (const item of items) {
+  processItem(item);
+}
 ```
 
-This command runs Jest only on files changed since `main`. Use `npm run test` if
-you need to execute the entire suite.
+* Allows `break/continue`.
+* Works with async/await.
 
-This command also checks coverage for modified files. Linting and type‑checking should pass as well:
+**Array Access**
 
-```bash
-npm run lint
-npm run type-check
+```ts
+// ✅ Prefer
+const last = array.at(-1);
+const secondLast = array.at(-2);
 ```
 
-Coverage reports are generated in the `coverage` directory. A summary is printed in the terminal after tests complete.
+**Strings**
+
+```ts
+// ✅ Prefer
+str.replaceAll('old', 'new');
+```
+
+**Globals**
+
+```ts
+// ✅ Prefer
+globalThis.fetch(url);
+```
+
+**Imports**
+
+* One import per module.
+* Order: external → internal → types.
+* No duplicates.
+
+**Accessibility**
+
+* Use semantic HTML (`<label>`, `<output>`) over ARIA when possible.
+* Every form control must have a label.
+* Test with keyboard + screen reader.
+
+**Modern DOM**
+
+```ts
+element.remove(); // instead of parent.removeChild(element)
+```
+
+**Error Handling**
+
+* Catch only when meaningful.
+* No empty `catch`.
+* Log with context.
+
+**Clarity**
+
+* Avoid double negatives.
+* Prefer explicit, remove redundant annotations.
+* Use optional chaining (`?.`).
diff --git a/__tests__/components/nft-picker/NftPicker.utils.test.ts b/__tests__/components/nft-picker/NftPicker.utils.test.ts
new file mode 100644
index 0000000000..e416caca43
--- /dev/null
+++ b/__tests__/components/nft-picker/NftPicker.utils.test.ts
@@ -0,0 +1,163 @@
+import {
+  MAX_ENUMERATION,
+  MAX_SAFE,
+  bigintCompare,
+  expandRangesWindow,
+  formatCanonical,
+  fromCanonicalRanges,
+  isRangeTooLargeError,
+  parseTokenExpressionToBigints,
+  parseTokenExpressionToRanges,
+  sortAndDedupIds,
+  toCanonicalRanges,
+  tryToNumberArray,
+} from "@/components/nft-picker/NftPicker.utils";
+
+import type { TokenRange } from "@/components/nft-picker/NftPicker.types";
+
+describe("NftPicker.utils", () => {
+  describe("parseTokenExpressionToBigints", () => {
+    it("parses decimal and range inputs", () => {
+      const result = parseTokenExpressionToBigints("1,2,5-7");
+      expect(result.map((value) => value.toString())).toEqual([
+        "1",
+        "2",
+        "5",
+        "6",
+        "7",
+      ]);
+    });
+
+    it("parses hexadecimal values", () => {
+      const result = parseTokenExpressionToBigints("0x1A,0x1B-0x1D");
+      expect(result.map((value) => value.toString(16))).toEqual([
+        "1a",
+        "1b",
+        "1c",
+        "1d",
+      ]);
+    });
+
+    it("trims whitespace and normalises ranges", () => {
+      const result = parseTokenExpressionToBigints("  1 - 3 , 5 \n");
+      expect(result.map((value) => value.toString())).toEqual([
+        "1",
+        "2",
+        "3",
+        "5",
+      ]);
+    });
+
+    it("swaps reversed ranges", () => {
+      const result = parseTokenExpressionToBigints("5-2");
+      expect(result.map((value) => value.toString())).toEqual([
+        "2",
+        "3",
+        "4",
+        "5",
+      ]);
+    });
+
+    it("throws parse errors for invalid segments", () => {
+      expect(() => parseTokenExpressionToBigints("1,foo"))
+        .toThrow();
+      try {
+        parseTokenExpressionToBigints("1,foo");
+      } catch (error) {
+        expect(Array.isArray(error)).toBe(true);
+        const errors = error as { message: string }[];
+        expect(errors[0].message).toBe("Invalid token format");
+      }
+    });
+
+    it("throws a parse error when a single range exceeds the enumeration ceiling", () => {
+      expect(() => parseTokenExpressionToRanges("0-10000"))
+        .toThrow();
+      try {
+        parseTokenExpressionToRanges("0-10000");
+      } catch (error) {
+        expect(Array.isArray(error)).toBe(true);
+        const errors = error as { code?: string; message: string }[];
+        expect(errors[0]?.code).toBe("range-too-large");
+        expect(errors[0]?.message).toContain("exceeding the limit");
+      }
+    });
+
+    it("throws a parse error when combined ranges exceed the enumeration ceiling", () => {
+      const input = "0-5000,6000-11000";
+      expect(() => parseTokenExpressionToBigints(input)).toThrow();
+      try {
+        parseTokenExpressionToBigints(input);
+      } catch (error) {
+        expect(Array.isArray(error)).toBe(true);
+        const errors = error as { code?: string; message: string }[];
+        expect(errors[0]?.code).toBe("range-too-large");
+        expect(errors[0]?.message).toContain(MAX_ENUMERATION.toString());
+      }
+    });
+  });
+
+  it("sorts and deduplicates token ids", () => {
+    const result = sortAndDedupIds([
+      5n,
+      3n,
+      3n,
+      4n,
+      1n,
+    ]);
+    expect(result).toEqual([1n, 3n, 4n, 5n]);
+  });
+
+  it("converts to and from canonical ranges", () => {
+    const ranges = toCanonicalRanges([1n, 2n, 3n, 5n, 6n]);
+    expect(ranges).toEqual([
+      { start: 1n, end: 3n },
+      { start: 5n, end: 6n },
+    ]);
+    const expanded = fromCanonicalRanges(ranges);
+    expect(expanded).toEqual([1n, 2n, 3n, 5n, 6n]);
+  });
+
+  it("throws a structured error when expanding canonical ranges beyond the ceiling", () => {
+    const oversized = [{ start: 0n, end: 10_000n }];
+    expect(() => fromCanonicalRanges(oversized)).toThrow();
+    try {
+      fromCanonicalRanges(oversized);
+    } catch (error) {
+      expect(isRangeTooLargeError(error)).toBe(true);
+      if (isRangeTooLargeError(error)) {
+        expect(error.limit).toBe(MAX_ENUMERATION);
+        expect(error.size).toBe(10_001n);
+      }
+    }
+  });
+
+  it("formats canonical ranges", () => {
+    const formatted = formatCanonical([
+      { start: 1n, end: 3n },
+      { start: 5n, end: 5n },
+    ]);
+    expect(formatted).toBe("1-3,5");
+  });
+
+  it("converts to numbers and counts unsafe values", () => {
+    const { numbers, unsafeCount } = tryToNumberArray([1n, MAX_SAFE + 1n]);
+    expect(numbers).toEqual([1]);
+    expect(unsafeCount).toBe(1);
+  });
+
+  it("compares bigints", () => {
+    expect(bigintCompare(1n, 2n)).toBe(-1);
+    expect(bigintCompare(2n, 1n)).toBe(1);
+    expect(bigintCompare(3n, 3n)).toBe(0);
+  });
+
+  it("expands ranges within a window", () => {
+    const ranges: TokenRange[] = [
+      { start: 1n, end: 3n },
+      { start: 10n, end: 12n },
+    ];
+    const window = expandRangesWindow(ranges, 2, 4);
+    expect(window).toEqual([3n, 10n, 11n, 12n]);
+  });
+});
diff --git a/__tests__/services/alchemy-api.test.ts b/__tests__/services/alchemy-api.test.ts
index 99152f2c61..c8bec31328 100644
--- a/__tests__/services/alchemy-api.test.ts
+++ b/__tests__/services/alchemy-api.test.ts
@@ -1,38 +1,110 @@
-import { getNftsForContractAndOwner } from "@/services/alchemy-api";
-import { sepolia } from "wagmi/chains";
-
-it("fetches all pages and maps nfts", async () => {
-  const responses = [
-    {
-      ownedNfts: [
-        {
-          tokenId: "1",
-          tokenType: "ERC721",
-          name: "a",
-          tokenUri: "u1",
-          image: "i1",
+jest.mock("@/config/env", () => ({
+  publicEnv: { ALCHEMY_API_KEY: "test" },
+}));
+
+jest.mock("@/services/6529api", () => ({
+  fetchUrl: jest.fn(),
+  postData: jest.fn(),
+}));
+
+import {
+  getContractOverview,
+  getTokensMetadata,
+  searchNftCollections,
+} from "@/services/alchemy-api";
+import { fetchUrl, postData } from "@/services/6529api";
+
+const mockedFetchUrl = fetchUrl as jest.MockedFunction<typeof fetchUrl>;
+const mockedPostData = postData as jest.MockedFunction<typeof postData>;
+
+describe("services/alchemy-api", () => {
+  beforeEach(() => {
+    mockedFetchUrl.mockReset();
+    mockedPostData.mockReset();
+  });
+
+  describe("searchNftCollections", () => {
+    it("returns suggestions and filters spam", async () => {
+      mockedFetchUrl.mockResolvedValue({
+        contracts: [
+          {
+            address: "0x1234567890abcdef1234567890abcdef12345678",
+            name: "Example",
+            tokenType: "ERC721",
+            totalSupply: "1000",
+            openSeaMetadata: { floorPrice: 1.2, safelistRequestStatus: "verified" },
+            isSpam: false,
+          },
+          {
+            address: "0xabcdefabcdefabcdefabcdefabcdefabcdefabcd",
+            name: "Spam",
+            isSpam: true,
+          },
+        ],
+      });
+
+      const result = await searchNftCollections({ query: "exa" });
+
+      expect(mockedFetchUrl).toHaveBeenCalledTimes(1);
+      expect(result.items).toHaveLength(1);
+      expect(result.hiddenCount).toBe(1);
+    });
+  });
+
+  describe("getContractOverview", () => {
+    it("throws on invalid address", async () => {
+      await expect(
+        getContractOverview({ address: "invalid" as `0x${string}` })
+      ).rejects.toThrow("Invalid contract address");
+    });
+
+    it("normalises contract metadata", async () => {
+      mockedFetchUrl.mockResolvedValue({
+        contractMetadata: {
+          name: "Example",
+          tokenType: "ERC1155",
+          totalSupply: "5000",
         },
-      ],
-      pageKey: "next",
-    },
-    {
-      ownedNfts: [
-        {
-          tokenId: "2",
-          tokenType: "ERC721",
-          name: "b",
-          tokenUri: "u2",
-          image: "i2",
+        openSeaMetadata: {
+          floorPrice: 0.5,
+          safelistRequestStatus: "verified",
         },
-      ],
-    },
-  ];
-  let call = 0;
-  globalThis.fetch = jest.fn(() =>
-    Promise.resolve({ json: () => Promise.resolve(responses[call++]) })
-  ) as any;
-  const result = await getNftsForContractAndOwner(sepolia.id, "0xc", "0xowner");
-  expect(result).toHaveLength(2);
-  expect(fetch).toHaveBeenCalledTimes(2);
-  expect((fetch as any).mock.calls[0][0]).toContain("eth-sepolia");
+        address: "0x1234567890abcdef1234567890abcdef12345678",
+      });
+
+      const result = await getContractOverview({
+        address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
+      });
+
+      expect(result?.name).toBe("Example");
+      expect(result?.floorPriceEth).toBe(0.5);
+    });
+  });
+
+  describe("getTokensMetadata", () => {
+    it("fetches batched token metadata", async () => {
+      mockedPostData.mockResolvedValue({
+        status: 200,
+        response: {
+          tokens: [
+            {
+              tokenId: "1",
+              title: "Token 1",
+              image: { cachedUrl: "https://example.com/1.png" },
+            },
+          ],
+        },
+      });
+
+      const result = await getTokensMetadata({
+        address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
+        tokenIds: ["1"],
+      });
+
+      expect(mockedPostData).toHaveBeenCalledTimes(1);
+      expect(result).toHaveLength(1);
+      expect(result[0].tokenId.toString()).toBe("1");
+      expect(result[0].imageUrl).toBe("https://example.com/1.png");
+    });
+  });
 });
diff --git a/app/demo/nft-picker/page.tsx b/app/demo/nft-picker/page.tsx
new file mode 100644
index 0000000000..120c01753b
--- /dev/null
+++ b/app/demo/nft-picker/page.tsx
@@ -0,0 +1,12 @@
+import { getAppMetadata } from "@/components/providers/metadata";
+import type { Metadata } from "next";
+
+import DemoNftPicker from "./picker-client";
+
+export const metadata: Metadata = getAppMetadata({
+  title: "NFT Picker Demo",
+});
+
+export default function NftPickerDemoPage() {
+  return <DemoNftPicker />;
+}
diff --git a/app/demo/nft-picker/picker-client.tsx b/app/demo/nft-picker/picker-client.tsx
new file mode 100644
index 0000000000..d3a4e10eef
--- /dev/null
+++ b/app/demo/nft-picker/picker-client.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+
+import { NftPicker } from "@/components/nft-picker/NftPicker";
+import type { NftPickerSelection } from "@/components/nft-picker/NftPicker.types";
+
+const stringifySelection = (value: unknown) =>
+  JSON.stringify(
+    value,
+    (_, nestedValue) => (typeof nestedValue === "bigint" ? nestedValue.toString() : nestedValue),
+    2,
+  );
+
+export default function DemoNftPicker() {
+  const [selection, setSelection] = useState<NftPickerSelection | null>(null);
+
+  return (
+    <div className="tw-@container tw-mx-auto tw-flex tw-max-w-3xl tw-flex-col tw-gap-4 tw-p-6">
+
+      <NftPicker onChange={setSelection} allowAll allowRanges hideSpam className="tw-shadow-lg" />
+      <section className="tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-900 tw-p-3">
+        <h2 className="tw-mb-2 tw-text-sm tw-font-semibold tw-text-white">Selection (for testing purposes)</h2>
+        <pre className="tw-max-h-80 tw-overflow-auto tw-text-xs tw-text-iron-200">
+          {stringifySelection(selection)}
+        </pre>
+      </section>
+    </div>
+  );
+}
diff --git a/components/gas-royalties/Gas.tsx b/components/gas-royalties/Gas.tsx
index c5efdc2f2f..12deb4c98d 100644
--- a/components/gas-royalties/Gas.tsx
+++ b/components/gas-royalties/Gas.tsx
@@ -66,7 +66,7 @@ export default function GasComponent() {
 
   function fetchGas() {
     setFetching(true);
-    fetchUrl(getUrlWithParams()).then((res: Gas[]) => {
+    fetchUrl<Gas[]>(getUrlWithParams()).then((res: Gas[]) => {
       res.forEach((r) => {
         r.gas = Math.round(r.gas * 100000) / 100000;
       });
diff --git a/components/gas-royalties/GasRoyalties.tsx b/components/gas-royalties/GasRoyalties.tsx
index 2b8f2e80a4..3b3af68970 100644
--- a/components/gas-royalties/GasRoyalties.tsx
+++ b/components/gas-royalties/GasRoyalties.tsx
@@ -87,7 +87,7 @@ export function GasRoyaltiesHeader(props: Readonly<HeaderProps>) {
   useEffect(() => {
     const path =
       props.focus === GasRoyaltiesCollectionFocus.MEMES ? "memes" : "memelab";
-    fetchUrl(`${publicEnv.API_ENDPOINT}/api/${path}/artists_names`).then(
+    fetchUrl<ApiArtistNameItem[]>(`${publicEnv.API_ENDPOINT}/api/${path}/artists_names`).then(
       (res: ApiArtistNameItem[]) => {
         setArtists(res);
       }
diff --git a/components/gas-royalties/Royalties.tsx b/components/gas-royalties/Royalties.tsx
index a243dd091f..d37b0a4992 100644
--- a/components/gas-royalties/Royalties.tsx
+++ b/components/gas-royalties/Royalties.tsx
@@ -73,7 +73,7 @@ export default function RoyaltiesComponent() {
 
   function fetchRoyalties() {
     setFetching(true);
-    fetchUrl(getUrlWithParams()).then((res: Royalty[]) => {
+    fetchUrl<Royalty[]>(getUrlWithParams()).then((res: Royalty[]) => {
       res.forEach((r) => {
         r.volume = Math.round(r.volume * 100000) / 100000;
         r.proceeds = Math.round(r.proceeds * 100000) / 100000;
diff --git a/components/nextGen/collections/collectionParts/NextGenCollectionHeader.tsx b/components/nextGen/collections/collectionParts/NextGenCollectionHeader.tsx
index 12b1036cbf..96dc2f6e06 100644
--- a/components/nextGen/collections/collectionParts/NextGenCollectionHeader.tsx
+++ b/components/nextGen/collections/collectionParts/NextGenCollectionHeader.tsx
@@ -91,7 +91,7 @@ export function NextGenCountdown(props: Readonly<CountdownProps>) {
 
   useEffect(() => {
     const url = `${publicEnv.API_ENDPOINT}/api/nextgen/merkle_roots/${props.collection.merkle_root}`;
-    fetchUrl(url).then((response: CollectionWithMerkle) => {
+    fetchUrl<CollectionWithMerkle>(url).then((response: CollectionWithMerkle) => {
       if (response) {
         setCollection(response);
       }
diff --git a/components/nextGen/collections/collectionParts/mint/NextGenMint.tsx b/components/nextGen/collections/collectionParts/mint/NextGenMint.tsx
index 1fc40b86c7..9ca509b736 100644
--- a/components/nextGen/collections/collectionParts/mint/NextGenMint.tsx
+++ b/components/nextGen/collections/collectionParts/mint/NextGenMint.tsx
@@ -227,7 +227,7 @@ export default function NextGenMint(props: Readonly<Props>) {
     if (props.collection.merkle_root) {
       const merkleRoot = props.collection.merkle_root;
       const url = `${publicEnv.API_ENDPOINT}/api/nextgen/merkle_roots/${merkleRoot}`;
-      fetchUrl(url).then((response: CollectionWithMerkle) => {
+      fetchUrl<CollectionWithMerkle>(url).then((response: CollectionWithMerkle) => {
         if (response) {
           setCollection(response);
         }
diff --git a/components/nextGen/collections/collectionParts/mint/NextGenMintBurnWidget.tsx b/components/nextGen/collections/collectionParts/mint/NextGenMintBurnWidget.tsx
index 7db3fd43db..025eb2c623 100644
--- a/components/nextGen/collections/collectionParts/mint/NextGenMintBurnWidget.tsx
+++ b/components/nextGen/collections/collectionParts/mint/NextGenMintBurnWidget.tsx
@@ -138,7 +138,7 @@ export default function NextGenMintBurnWidget(props: Readonly<Props>) {
     if (tokenId) {
       setFetchingProofs(true);
       const url = `${publicEnv.API_ENDPOINT}/api/nextgen/burn_proofs/${props.collection_merkle.merkle_root}/${tokenId}`;
-      fetchUrl(url).then((response: ProofResponse) => {
+      fetchUrl<ProofResponse>(url).then((response: ProofResponse) => {
         setBurnProofResponse(response);
         setFetchingProofs(false);
       });
diff --git a/components/nextGen/collections/collectionParts/mint/NextGenMintWidget.tsx b/components/nextGen/collections/collectionParts/mint/NextGenMintWidget.tsx
index 8eae44837d..20668103e5 100644
--- a/components/nextGen/collections/collectionParts/mint/NextGenMintWidget.tsx
+++ b/components/nextGen/collections/collectionParts/mint/NextGenMintWidget.tsx
@@ -147,7 +147,7 @@ export default function NextGenMintWidget(props: Readonly<Props>) {
         setFetchingProofs(true);
         const merkleRoot = props.collection.merkle_root;
         const url = `${publicEnv.API_ENDPOINT}/api/nextgen/proofs/${merkleRoot}/${mintForAddress}`;
-        fetchUrl(url).then((response: ProofResponse[]) => {
+        fetchUrl<ProofResponse[]>(url).then((response: ProofResponse[]) => {
           const proofResponses: ProofResponse[] = [];
           if (response.length > 0) {
             proofResponses.push({
diff --git a/components/nft-picker/AllTokensSelectedCard.tsx b/components/nft-picker/AllTokensSelectedCard.tsx
new file mode 100644
index 0000000000..6ea40df67f
--- /dev/null
+++ b/components/nft-picker/AllTokensSelectedCard.tsx
@@ -0,0 +1,44 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import type { MutableRefObject, RefObject } from "react";
+
+type ButtonRef = RefObject<HTMLButtonElement | null> | MutableRefObject<HTMLButtonElement | null>;
+
+interface AllTokensSelectedCardProps {
+  readonly onDeselect: () => void;
+  readonly buttonRef?: ButtonRef;
+}
+
+export function AllTokensSelectedCard({
+  onDeselect,
+  buttonRef,
+}: AllTokensSelectedCardProps) {
+  return (
+    <output
+      aria-label="All tokens selected status"
+      className="tw-flex tw-w-full tw-flex-col tw-gap-3 tw-rounded-lg tw-border-2 tw-border-green-500/60 tw-bg-green-950/30 tw-p-4 tw-transition-all tw-duration-200 tw-ease-in-out @md:tw-flex-row @md:tw-items-center"
+    >
+      <span className="tw-flex tw-h-10 tw-w-10 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-green-600">
+        <FontAwesomeIcon icon={faCheckCircle} className="tw-h-6 tw-w-6 tw-text-white" aria-hidden="true" />
+      </span>
+
+      <span className="tw-flex-1 tw-min-w-0">
+        <span className="tw-block tw-text-base tw-font-semibold tw-text-green-400">All tokens selected</span>
+        <span className="tw-block tw-text-sm tw-text-iron-400">
+          Click "Deselect All" to add specific tokens
+        </span>
+      </span>
+
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={onDeselect}
+        aria-label="Deselect all tokens and return to manual selection"
+        className="tw-flex tw-w-full tw-items-center tw-justify-center tw-gap-2 tw-rounded-md tw-bg-green-600 tw-px-4 tw-py-2.5 tw-font-medium tw-text-white tw-transition-all hover:tw-bg-green-700 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-green-500 focus:tw-ring-offset-2 focus:tw-ring-offset-iron-900 active:tw-scale-95 @md:tw-w-auto @md:tw-shrink-0"
+      >
+        <FontAwesomeIcon icon={faCheckCircle} className="tw-h-5 tw-w-5 tw-text-white" aria-hidden="true" />
+        Deselect All
+      </button>
+    </output>
+  );
+}
diff --git a/components/nft-picker/NftContractHeader.tsx b/components/nft-picker/NftContractHeader.tsx
new file mode 100644
index 0000000000..4432dd1e41
--- /dev/null
+++ b/components/nft-picker/NftContractHeader.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import Image from "next/image";
+import { useCallback } from "react";
+
+import type { ContractOverview } from "./NftPicker.types";
+
+interface NftContractHeaderProps {
+  readonly contract: ContractOverview | null;
+  readonly onChange: () => void;
+  readonly onClear: () => void;
+}
+
+function shortenAddress(address: `0x${string}`): string {
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+
+export function NftContractHeader({
+  contract,
+  onChange,
+  onClear,
+}: NftContractHeaderProps) {
+  const handleChangeClick = useCallback(() => {
+    onChange();
+  }, [onChange]);
+
+  const handleClearClick = useCallback(() => {
+    onClear();
+  }, [onClear]);
+
+  if (!contract) {
+    return null;
+  }
+
+  return (
+    <section
+      className="tw-@container tw-flex tw-flex-col tw-gap-3 tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-900 tw-p-3 @md:tw-flex-row @md:tw-items-center @md:tw-justify-between"
+      aria-label="Selected NFT contract"
+    >
+      <div className="tw-flex tw-items-start tw-gap-3 @md:tw-items-center">
+        <div className="tw-relative tw-h-12 tw-w-12 tw-overflow-hidden tw-rounded-md tw-bg-iron-800">
+          {contract.imageUrl ? (
+            <Image
+              src={contract.imageUrl}
+              alt={contract.name ?? contract.address}
+              fill
+              sizes="48px"
+              className="tw-h-full tw-w-full tw-object-cover"
+            />
+          ) : (
+            <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-text-sm tw-font-semibold tw-text-iron-300">
+              NFT
+            </div>
+          )}
+        </div>
+        <div className="tw-flex tw-flex-col tw-gap-1">
+          <div className="tw-flex tw-flex-col">
+            <span className="tw-text-sm tw-font-semibold tw-text-white">
+              {contract.name ?? shortenAddress(contract.address)}
+            </span>
+            <span className="tw-text-xs tw-text-iron-400">
+              {shortenAddress(contract.address)}
+            </span>
+          </div>
+          <div className="tw-flex tw-flex-wrap tw-gap-2 tw-text-xs tw-text-iron-300">
+            {contract.tokenType && (
+              <span className="tw-rounded tw-bg-iron-800 tw-px-2 tw-py-0.5">
+                {contract.tokenType}
+              </span>
+            )}
+            {contract.totalSupply && (
+              <span className="tw-rounded tw-bg-iron-800 tw-px-2 tw-py-0.5">
+                Supply {contract.totalSupply}
+              </span>
+            )}
+            {typeof contract.floorPriceEth === "number" && (
+              <span className="tw-rounded tw-bg-iron-800 tw-px-2 tw-py-0.5">
+                Floor Ξ{contract.floorPriceEth.toFixed(3)}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-gap-2">
+        <button
+          type="button"
+          className="tw-rounded tw-border tw-border-iron-700 tw-bg-transparent tw-px-3 tw-py-1 tw-text-sm tw-text-iron-200 hover:tw-border-primary-500 hover:tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+          onClick={handleChangeClick}
+        >
+          Change
+        </button>
+        <button
+          type="button"
+          className="tw-rounded tw-bg-primary-500 tw-px-3 tw-py-1 tw-text-sm tw-font-semibold tw-text-black hover:tw-bg-primary-400 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+          onClick={handleClearClick}
+        >
+          Clear
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/components/nft-picker/NftEditRanges.tsx b/components/nft-picker/NftEditRanges.tsx
new file mode 100644
index 0000000000..fda1ff4cf7
--- /dev/null
+++ b/components/nft-picker/NftEditRanges.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { KeyboardEvent } from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import type { ParseError, TokenRange } from "./NftPicker.types";
+import { formatCanonical, formatBigIntWithSeparators } from "./NftPicker.utils";
+
+const BIGINT_ZERO = BigInt(0);
+const BIGINT_ONE = BigInt(1);
+
+type CopyStatus = "idle" | "copied" | "error";
+
+const COPY_FEEDBACK: Record<CopyStatus, { message: string; className: string }> = {
+  idle: {
+    message: "Copy feedback",
+    className: "tw-text-transparent",
+  },
+  copied: {
+    message: "Copied selection to clipboard.",
+    className: "tw-text-emerald-300",
+  },
+  error: {
+    message: "Unable to copy selection.",
+    className: "tw-text-red-300",
+  },
+};
+
+interface NftEditRangesProps {
+  readonly ranges: TokenRange[];
+  readonly isEditing: boolean;
+  readonly textValue: string;
+  readonly parseErrors: ParseError[];
+  readonly onToggle: () => void;
+  readonly onTextChange: (value: string) => void;
+  readonly onApply: () => void;
+  readonly onCancel: () => void;
+  readonly onClear: () => void;
+}
+
+export function NftEditRanges({
+  ranges,
+  isEditing,
+  textValue,
+  parseErrors,
+  onToggle,
+  onTextChange,
+  onApply,
+  onCancel,
+  onClear,
+}: NftEditRangesProps) {
+  const canonical = useMemo(() => formatCanonical(ranges), [ranges]);
+  const total = useMemo(
+    () =>
+      ranges.reduce(
+        (acc, range) => acc + (range.end - range.start + BIGINT_ONE),
+        BIGINT_ZERO
+      ),
+    [ranges]
+  );
+  const hasTokens = total > BIGINT_ZERO;
+  const countLabel = formatBigIntWithSeparators(total);
+  const tokenLabel = total === BIGINT_ONE ? "token" : "tokens";
+  const selectionLabel = hasTokens
+    ? `${countLabel} ${tokenLabel} selected`
+    : "No tokens selected";
+  const summaryText = hasTokens
+    ? canonical
+    : "Add tokens using the input above or choose Select All to include every token.";
+  const [copyStatus, setCopyStatus] = useState<CopyStatus>("idle");
+
+  useEffect(() => {
+    if (copyStatus === "idle") {
+      return undefined;
+    }
+    const timeout = globalThis.setTimeout(() => {
+      setCopyStatus("idle");
+    }, 2000);
+    return () => globalThis.clearTimeout(timeout);
+  }, [copyStatus]);
+
+  useEffect(() => {
+    setCopyStatus("idle");
+  }, [canonical]);
+
+  const handleCopy = async () => {
+    if (!canonical) {
+      return;
+    }
+
+    try {
+      if (!navigator?.clipboard?.writeText) {
+        throw new Error("Clipboard API unavailable");
+      }
+
+      await navigator.clipboard.writeText(canonical);
+      setCopyStatus("copied");
+    } catch (error) {
+      console.warn("NftEditRanges: clipboard copy failed", error);
+      setCopyStatus("error");
+    }
+  };
+
+  const handleTextareaKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      onApply();
+    }
+  };
+
+  const { message: copyMessage, className: copyClassName } = COPY_FEEDBACK[copyStatus];
+
+  const showCopyButton = hasTokens && Boolean(canonical);
+  const showToggleButton = hasTokens || isEditing;
+  const showClearButton = hasTokens;
+  const showActionButtons = showToggleButton || showClearButton;
+
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-4 tw-rounded-lg tw-border tw-border-primary-500/30 tw-bg-primary-500/5 tw-p-4">
+      <div className="tw-flex tw-flex-col tw-gap-3 sm:tw-flex-row sm:tw-flex-wrap sm:tw-items-start sm:tw-justify-between">
+        <div className="tw-flex tw-w-full tw-flex-col tw-gap-2">
+          <span className="tw-text-base tw-font-semibold tw-text-white">{selectionLabel}</span>
+          <div className="tw-flex tw-flex-col tw-gap-2 lg:tw-flex-row lg:tw-items-center">
+            <span className="tw-flex-1 tw-break-words tw-font-mono tw-text-xs tw-text-iron-200">
+              {summaryText}
+            </span>
+            {showCopyButton && (
+              <div className="tw-flex tw-flex-shrink-0 tw-items-center tw-gap-2">
+                <button
+                  type="button"
+                  className="tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded tw-border tw-border-primary-500/50 tw-bg-transparent tw-px-3 tw-py-2 tw-text-xs tw-font-semibold tw-text-primary-200 hover:tw-border-primary-500 hover:tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+                  onClick={handleCopy}
+                  aria-label="Copy token selection"
+                >
+                  {copyStatus === "copied" ? (
+                    <span className="tw-inline-flex tw-items-center tw-gap-2 tw-font-semibold tw-text-emerald-300">
+                      <FontAwesomeIcon icon={faCheck} />
+                      <span>Copied!</span>
+                    </span>
+                  ) : (
+                    <>
+                      <FontAwesomeIcon icon={faCopy} />
+                      <span>Copy</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
+          {copyStatus !== "idle" && (
+            <output
+              aria-live="polite"
+              className={`tw-min-h-[1.25rem] tw-text-xs tw-font-medium ${copyClassName}`}
+            >
+              {copyMessage}
+            </output>
+          )}
+        </div>
+        {showActionButtons && (
+          <div className="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row">
+            {showToggleButton && (
+              <button
+                type="button"
+                className="tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded tw-border tw-border-iron-700 tw-bg-transparent tw-px-3 tw-py-2 tw-text-xs tw-font-semibold tw-text-iron-200 hover:tw-border-primary-500 hover:tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+                onClick={onToggle}
+              >
+                {isEditing ? "Hide text editor" : "Edit as text"}
+              </button>
+            )}
+            {showClearButton && (
+              <button
+                type="button"
+                className="tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded tw-border tw-border-iron-700 tw-bg-transparent tw-px-3 tw-py-2 tw-text-xs tw-font-semibold tw-text-iron-200 hover:tw-border-primary-500 hover:tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+                onClick={onClear}
+              >
+                Clear All
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+      {isEditing && (
+        <div className="tw-flex tw-flex-col tw-gap-2">
+          <textarea
+            value={textValue}
+            onChange={(event) => onTextChange(event.target.value)}
+            onKeyDown={handleTextareaKeyDown}
+            className="tw-h-32 tw-w-full tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-950 tw-p-2 tw-text-sm tw-text-iron-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+            aria-label="Edit token ranges"
+          />
+          {parseErrors.length > 0 && (
+            <ul className="tw-list-disc tw-pl-5 tw-text-xs tw-text-red-300">
+              {parseErrors.map((error, index) => (
+                <li key={`${error.input}-${error.index}-${index}`}>
+                  {error.message} ({error.input})
+                </li>
+              ))}
+            </ul>
+          )}
+          <div className="tw-flex tw-justify-end tw-gap-2">
+            <button
+              type="button"
+              className="tw-rounded tw-border tw-border-iron-700 tw-bg-transparent tw-px-3 tw-py-1 tw-text-xs tw-text-iron-200 hover:tw-border-primary-500 hover:tw-text-white"
+              onClick={onCancel}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="tw-rounded tw-bg-primary-500 tw-px-3 tw-py-1 tw-text-xs tw-font-semibold tw-text-black hover:tw-bg-primary-400"
+              onClick={onApply}
+            >
+              Apply
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/nft-picker/NftPicker.tsx b/components/nft-picker/NftPicker.tsx
new file mode 100644
index 0000000000..60753b51ab
--- /dev/null
+++ b/components/nft-picker/NftPicker.tsx
@@ -0,0 +1,836 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState, useId } from "react";
+import type { ChangeEvent, FormEvent, KeyboardEvent } from "react";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+
+import { isValidEthAddress } from "@/helpers/Helpers";
+import type {
+  ContractOverview,
+  NftPickerProps,
+  NftPickerSelection,
+  ParseError,
+  Suggestion,
+  TokenRange,
+  TokenSelection,
+  SupportedChain,
+} from "./NftPicker.types";
+import {
+  MAX_SAFE,
+  isRangeTooLargeError,
+  fromCanonicalRanges,
+  toCanonicalRanges,
+  tryToNumberArray,
+  formatCanonical,
+  formatBigIntWithSeparators,
+  parseTokenExpressionToRanges,
+  mergeCanonicalRanges,
+  removeTokenFromRanges,
+} from "./NftPicker.utils";
+import { NftContractHeader } from "./NftContractHeader";
+import { NftSuggestList } from "./NftSuggestList";
+import { NftTokenList } from "./NftTokenList";
+import { NftEditRanges } from "./NftEditRanges";
+import {
+  useCollectionSearch,
+  useContractOverviewQuery,
+  primeContractCache,
+} from "./useAlchemyClient";
+import { AllTokensSelectedCard } from "./AllTokensSelectedCard";
+
+const DEFAULT_CHAIN: SupportedChain = "ethereum";
+const DEFAULT_DEBOUNCE = 250;
+const DEFAULT_OVERSCAN = 8;
+const BIGINT_ZERO = BigInt(0);
+const BIGINT_ONE = BigInt(1);
+
+const EMPTY_SELECTION: TokenSelection = [];
+
+function toRangesFromSelection(selection: Readonly<TokenSelection>): TokenRange[] {
+  if (!selection.length) {
+    return [];
+  }
+  return toCanonicalRanges(selection);
+}
+
+function ensureChain(value?: SupportedChain): SupportedChain {
+  return value ?? DEFAULT_CHAIN;
+}
+
+function mapSuggestionToOverview(suggestion: Suggestion): ContractOverview {
+  return {
+    ...suggestion,
+    description: null,
+    bannerImageUrl: null,
+  };
+}
+
+export function NftPicker(props: Readonly<NftPickerProps>) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    onContractChange,
+    chain: chainProp,
+    outputMode = "number",
+    hideSpam: hideSpamProp = true,
+    allowAll = true,
+    allowRanges = true,
+    debounceMs = DEFAULT_DEBOUNCE,
+    overscan = DEFAULT_OVERSCAN,
+    placeholder = "Search by collection name or paste contract address…",
+    className,
+    renderTokenExtra,
+  } = props;
+  const valueChain = value?.chain;
+  const defaultChain = defaultValue?.chain;
+  const chain = useMemo(
+    () => ensureChain(valueChain ?? defaultChain ?? chainProp),
+    [valueChain, defaultChain, chainProp]
+  );
+  const [query, setQuery] = useState<string>("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [hideSpam, setHideSpam] = useState(hideSpamProp);
+  const [ranges, setRanges] = useState<TokenRange[]>([]);
+  const [textValue, setTextValue] = useState<string>("");
+  const [parseErrors, setParseErrors] = useState<ParseError[]>([]);
+  const [unsafeCount, setUnsafeCount] = useState<number>(0);
+  const [selectedContract, setSelectedContract] = useState<ContractOverview | null>(null);
+  const [allSelected, setAllSelected] = useState<boolean>(false);
+  const [tokenInput, setTokenInput] = useState<string>("");
+  const [isEditingText, setIsEditingText] = useState(false);
+  const previousRangesRef = useRef<TokenRange[] | null>(null);
+  const hasHydratedInitialValueRef = useRef(false);
+  const pendingPropEmitRef = useRef<string | null>(null);
+  const isControlled = value !== undefined;
+
+  useEffect(() => {
+    setHideSpam(hideSpamProp);
+  }, [hideSpamProp]);
+
+  const presetContractAddress = value?.contractAddress ?? defaultValue?.contractAddress;
+  const presetContractQuery = useContractOverviewQuery({
+    address: presetContractAddress,
+    chain,
+    enabled: Boolean(presetContractAddress),
+  });
+
+  useEffect(() => {
+    if (!presetContractAddress || !presetContractQuery.data) {
+      return;
+    }
+    setSelectedContract((prev) => {
+      if (prev && prev.address === presetContractQuery.data!.address) {
+        return prev;
+      }
+      return presetContractQuery.data ?? null;
+    });
+    onContractChange?.(presetContractQuery.data ?? null);
+  }, [presetContractAddress, presetContractQuery.data, onContractChange]);
+
+  const isAddressQuery = useMemo(() => isValidEthAddress(query.trim()), [query]);
+  const contractQueryAddress = useMemo(() => {
+    if (!isAddressQuery) {
+      return undefined;
+    }
+    return query.trim() as `0x${string}`;
+  }, [isAddressQuery, query]);
+
+  const { data: searchResult } = useCollectionSearch({
+    query,
+    chain,
+    hideSpam,
+    debounceMs,
+    enabled: !isAddressQuery && query.length > 1,
+  });
+
+  const addressOverviewQuery = useContractOverviewQuery({
+    address: contractQueryAddress,
+    chain,
+    enabled: Boolean(contractQueryAddress),
+  });
+
+  const suggestionList: Suggestion[] = useMemo(() => {
+    if (contractQueryAddress && addressOverviewQuery.data) {
+      return [addressOverviewQuery.data];
+    }
+    return searchResult?.items ?? [];
+  }, [contractQueryAddress, addressOverviewQuery.data, searchResult?.items]);
+
+  const hiddenCount = useMemo(() => {
+    if (contractQueryAddress) {
+      return 0;
+    }
+    return searchResult?.hiddenCount ?? 0;
+  }, [contractQueryAddress, searchResult?.hiddenCount]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const deselectButtonRef = useRef<HTMLButtonElement>(null);
+  const collectionInputId = useId();
+  const helperMessageId = useId();
+
+  useEffect(() => {
+    pendingPropEmitRef.current = null;
+    if (!value) {
+      return;
+    }
+    hasHydratedInitialValueRef.current = true;
+    if (value.contractAddress) {
+      if (!selectedContract || selectedContract.address !== value.contractAddress) {
+        setSelectedContract((prev) =>
+          prev && prev.address === value.contractAddress ? prev : null
+        );
+      }
+    } else {
+      setSelectedContract(null);
+    }
+    const canonical = toRangesFromSelection(value.selectedIds ?? EMPTY_SELECTION);
+    setRanges(canonical);
+    if (value.allSelected) {
+      setAllSelected(true);
+      previousRangesRef.current = canonical;
+    } else {
+      setAllSelected(false);
+      previousRangesRef.current = null;
+    }
+  }, [value, selectedContract]);
+
+  useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    if (hasHydratedInitialValueRef.current) {
+      return;
+    }
+    if (!defaultValue) {
+      return;
+    }
+    const defaultSelection = defaultValue.selectedIds
+      ? (Array.from(defaultValue.selectedIds) as TokenSelection)
+      : EMPTY_SELECTION;
+    const canonical = toRangesFromSelection(defaultSelection);
+    setRanges(canonical);
+    if (defaultValue.allSelected) {
+      setAllSelected(true);
+      previousRangesRef.current = canonical;
+    } else {
+      setAllSelected(false);
+      previousRangesRef.current = null;
+    }
+    pendingPropEmitRef.current = defaultValue.contractAddress ?? null;
+    hasHydratedInitialValueRef.current = true;
+  }, [isControlled, defaultValue]);
+
+  useEffect(() => {
+    const formatted = formatCanonical(ranges);
+    setTextValue(formatted);
+  }, [ranges]);
+
+  const handleSelectSuggestion = (suggestion: Suggestion) => {
+    primeContractCache(suggestion, chain);
+    const overview = mapSuggestionToOverview(suggestion);
+    setSelectedContract(overview);
+    onContractChange?.(overview);
+    setIsOpen(false);
+    setQuery("");
+    setActiveIndex(0);
+    setRanges([]);
+    setAllSelected(false);
+    previousRangesRef.current = null;
+    setUnsafeCount(0);
+    setTokenInput("");
+    setIsEditingText(false);
+    emitChange(overview, [], false);
+  };
+
+  const handleToggleSpam = () => {
+    setHideSpam((prev) => !prev);
+  };
+
+  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setIsOpen(true);
+      setActiveIndex((prev) => Math.min(prev + 1, suggestionList.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((prev) => Math.max(prev - 1, 0));
+    } else if (event.key === "Enter") {
+      if (isOpen && suggestionList[activeIndex]) {
+        event.preventDefault();
+        handleSelectSuggestion(suggestionList[activeIndex]);
+      }
+    } else if (event.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  const handleInputFocus = () => {
+    setIsOpen(true);
+  };
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+    setIsOpen(true);
+    setActiveIndex(0);
+  };
+
+  const trimmedTokenInput = tokenInput.trim();
+
+  const tokenPreview = useMemo(
+    () => {
+      if (!trimmedTokenInput) {
+        return {
+          ranges: [] as TokenRange[],
+          canonical: "",
+          count: BIGINT_ZERO,
+          errors: null as ParseError[] | null,
+        };
+      }
+
+      if (!allowRanges && trimmedTokenInput.includes("-")) {
+        return {
+          ranges: [] as TokenRange[],
+          canonical: "",
+          count: BIGINT_ZERO,
+          errors: [
+            {
+              input: trimmedTokenInput,
+              index: 0,
+              length: Math.max(trimmedTokenInput.length, 1),
+              message: "Ranges are disabled for this picker",
+            },
+          ],
+        };
+      }
+
+      try {
+        const canonicalRanges = parseTokenExpressionToRanges(trimmedTokenInput);
+        const count = canonicalRanges.reduce(
+          (total, range) => total + (range.end - range.start + BIGINT_ONE),
+          BIGINT_ZERO
+        );
+        return {
+          ranges: canonicalRanges,
+          canonical: formatCanonical(canonicalRanges),
+          count,
+          errors: null as ParseError[] | null,
+        };
+      } catch (error) {
+        if (Array.isArray(error)) {
+          return {
+            ranges: [] as TokenRange[],
+            canonical: "",
+            count: BIGINT_ZERO,
+            errors: error as ParseError[],
+          };
+        }
+        return {
+          ranges: [] as TokenRange[],
+          canonical: "",
+          count: BIGINT_ZERO,
+          errors: [
+            {
+              input: trimmedTokenInput,
+              index: 0,
+              length: Math.max(trimmedTokenInput.length, 1),
+              message: "Unable to parse token input",
+            },
+          ],
+        };
+      }
+    },
+    [allowRanges, trimmedTokenInput]
+  );
+
+  const canAddTokens =
+    !allSelected &&
+    Boolean(trimmedTokenInput) &&
+    !tokenPreview.errors &&
+    tokenPreview.count > BIGINT_ZERO;
+
+  const numberFormatter = useMemo(() => new Intl.NumberFormat("en-US"), []);
+
+  const formatCount = useCallback(
+    (value: bigint | number): string =>
+      typeof value === "number"
+        ? numberFormatter.format(value)
+        : formatBigIntWithSeparators(value),
+    [numberFormatter]
+  );
+
+  const contractTotalSupply = useMemo(() => {
+    if (!selectedContract?.totalSupply) {
+      return null;
+    }
+    try {
+      return BigInt(selectedContract.totalSupply);
+    } catch (error) {
+      console.warn("NftPicker: unable to parse totalSupply", error);
+      return null;
+    }
+  }, [selectedContract?.totalSupply]);
+
+  const selectedTokenCount = useMemo(() => {
+    return ranges.reduce(
+      (total, range) => total + (range.end - range.start + BIGINT_ONE),
+      BIGINT_ZERO
+    );
+  }, [ranges]);
+
+  const hasSelectedTokens = selectedTokenCount > BIGINT_ZERO;
+
+  const helperState = useMemo(() => {
+    if (allSelected) {
+      if (contractTotalSupply) {
+        return {
+          tone: "success" as const,
+          text: `All ${formatCount(contractTotalSupply)} tokens selected. Deselect to add specific tokens.`,
+        };
+      }
+      return {
+        tone: "success" as const,
+        text: "All tokens selected. Deselect to add specific tokens.",
+      };
+    }
+    if (!trimmedTokenInput) {
+      return {
+        tone: "muted" as const,
+        text: "Tip: Enter single tokens or ranges separated by commas.",
+      };
+    }
+    if (tokenPreview.errors) {
+      const [firstError] = tokenPreview.errors;
+      const detail = firstError?.input ? ` (${firstError.input})` : "";
+      return {
+        tone: "error" as const,
+        text: `${firstError?.message ?? "Invalid token input"}${detail}`,
+      };
+    }
+    const countLabel = formatCount(tokenPreview.count);
+    const canonical = tokenPreview.canonical || trimmedTokenInput;
+    const plural = tokenPreview.count === BIGINT_ONE ? "token" : "tokens";
+    return {
+      tone: "success" as const,
+      text: `Looks good: ${canonical} • Will add ${countLabel} ${plural}.`,
+    };
+  }, [allSelected, contractTotalSupply, formatCount, tokenPreview, trimmedTokenInput]);
+
+  const helperClassName = clsx("tw-min-h-[1.25rem] tw-text-xs tw-font-medium", {
+    "tw-text-emerald-300": helperState.tone === "success",
+    "tw-text-red-300": helperState.tone === "error",
+    "tw-text-iron-300": helperState.tone === "muted",
+  });
+
+  const tokenInputPlaceholder = hasSelectedTokens
+    ? "Add more tokens or ranges..."
+    : "e.g., 1, 5, 30-55, 89, 98-100";
+
+  const tokenInputDisabled = allSelected || !selectedContract;
+
+  const selectAllLabel = contractTotalSupply
+    ? `Select All (${formatCount(contractTotalSupply)})`
+    : "Select All";
+
+  const selectAllButtonClassName =
+    "tw-flex tw-w-full tw-shrink-0 tw-items-center tw-justify-center tw-gap-2 tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-800 tw-px-4 tw-py-2.5 tw-font-medium tw-text-iron-300 tw-transition-colors hover:tw-bg-iron-700 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500 focus:tw-ring-offset-2 focus:tw-ring-offset-iron-900 disabled:tw-cursor-not-allowed disabled:tw-bg-iron-800 disabled:tw-text-iron-500 sm:tw-w-auto";
+
+  const handleTokenInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTokenInput(event.target.value);
+  };
+
+  const addTokenRanges = (newRanges: TokenRange[]) => {
+    if (!newRanges.length) {
+      return;
+    }
+    const canonical = mergeCanonicalRanges(ranges, newRanges);
+    setRanges(canonical);
+    setAllSelected(false);
+    setParseErrors([]);
+    setUnsafeCount(0);
+    previousRangesRef.current = null;
+    if (selectedContract) {
+      emitChange(selectedContract, canonical, false);
+    }
+  };
+
+  const handleAddRanges = (newRanges: TokenRange[]) => {
+    if (!newRanges.length) {
+      return;
+    }
+    addTokenRanges(newRanges);
+    setTokenInput("");
+    setParseErrors([]);
+  };
+
+  const handleSubmitTokens = () => {
+    if (!canAddTokens) {
+      return;
+    }
+    handleAddRanges(tokenPreview.ranges);
+  };
+
+  const handleTokenInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSubmitTokens();
+    }
+  };
+
+  const handleTokenFormSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    handleSubmitTokens();
+  };
+
+  const handleEditTextChange = (value: string) => {
+    if (parseErrors.length) {
+      setParseErrors([]);
+    }
+    setTextValue(value);
+  };
+
+  const handleClearContract = () => {
+    setSelectedContract(null);
+    setRanges([]);
+    setAllSelected(false);
+    onContractChange?.(null);
+    onChange(null);
+    setQuery("");
+    setUnsafeCount(0);
+    setTokenInput("");
+    setParseErrors([]);
+    previousRangesRef.current = null;
+    setIsEditingText(false);
+    inputRef.current?.focus();
+  };
+
+  const handleSelectAll = () => {
+    if (!selectedContract || allSelected) {
+      return;
+    }
+    previousRangesRef.current = ranges;
+    setAllSelected(true);
+    setIsEditingText(false);
+    setTokenInput("");
+    emitChange(selectedContract, ranges, true);
+    setTimeout(() => {
+      deselectButtonRef.current?.focus();
+    }, 0);
+  };
+
+  const handleDeselectAll = () => {
+    if (!selectedContract) {
+      return;
+    }
+    const previous = previousRangesRef.current;
+    setAllSelected(false);
+    setIsEditingText(false);
+    setTokenInput("");
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+    if (previous?.length) {
+      setRanges(previous);
+      previousRangesRef.current = null;
+      emitChange(selectedContract, previous, false);
+      return;
+    }
+    emitChange(selectedContract, ranges, false);
+  };
+
+  const handleClearTokens = () => {
+    if (!selectedContract) {
+      return;
+    }
+    setRanges([]);
+    setAllSelected(false);
+    setTokenInput("");
+    setParseErrors([]);
+    setUnsafeCount(0);
+    setIsEditingText(false);
+    previousRangesRef.current = null;
+    emitChange(selectedContract, [], false);
+  };
+
+  const handleRemoveToken = (tokenId: bigint) => {
+    const canonical = removeTokenFromRanges(ranges, tokenId);
+    setRanges(canonical);
+    setAllSelected(false);
+    previousRangesRef.current = null;
+    if (selectedContract) {
+      emitChange(selectedContract, canonical, false);
+    }
+  };
+
+  const handleApplyText = () => {
+    try {
+      const canonical = parseTokenExpressionToRanges(textValue);
+      setRanges(canonical);
+      setParseErrors([]);
+      setAllSelected(false);
+      previousRangesRef.current = null;
+      if (selectedContract) {
+        emitChange(selectedContract, canonical, false);
+      }
+    } catch (error) {
+      if (Array.isArray(error)) {
+        setParseErrors(error);
+      }
+    }
+  };
+
+  const getSelectionFromRanges = (
+    canonicalRanges: TokenRange[],
+    isAll: boolean
+  ): TokenSelection | null => {
+    if (isAll) {
+      return [];
+    }
+    try {
+      return fromCanonicalRanges(canonicalRanges);
+    } catch (error) {
+      if (!isRangeTooLargeError(error)) {
+        throw error;
+      }
+      const canonical = formatCanonical(canonicalRanges);
+      const displayValue = canonical || "selection";
+      setParseErrors([
+        {
+          code: error.code,
+          input: displayValue,
+          index: 0,
+          length: Math.max(displayValue.length, 1),
+          message: error.message,
+        },
+      ]);
+      console.warn(
+        "NftPicker: selection exceeds enumeration limit; change event skipped",
+        error
+      );
+      return null;
+    }
+  };
+
+  const emitChange = (
+    contract: ContractOverview,
+    canonicalRanges: TokenRange[],
+    isAll: boolean
+  ) => {
+    pendingPropEmitRef.current = null;
+    if (!contract) {
+      return;
+    }
+    const selectionIds = getSelectionFromRanges(canonicalRanges, isAll);
+    if (selectionIds === null) {
+      return;
+    }
+    if (!selectionIds.length && !isAll) {
+      const payload: NftPickerSelection = {
+        contractAddress: contract.address,
+        allSelected: isAll,
+        outputMode,
+        tokenIds: [],
+        tokenIdsRaw: [],
+      } as NftPickerSelection;
+      onChange(payload);
+      return;
+    }
+    if (outputMode === "number") {
+      const { numbers, unsafeCount: unsafe } = tryToNumberArray(selectionIds);
+      setUnsafeCount(unsafe);
+      if (unsafe > 0) {
+        return;
+      }
+      const payload: NftPickerSelection = {
+        contractAddress: contract.address,
+        allSelected: isAll,
+        outputMode: "number",
+        tokenIds: numbers,
+        tokenIdsRaw: selectionIds,
+      };
+      onChange(payload);
+    } else {
+      const decimalIds = selectionIds.map((id) => id.toString(10));
+      const payload: NftPickerSelection = {
+        contractAddress: contract.address,
+        allSelected: isAll,
+        outputMode: "bigint",
+        tokenIds: decimalIds,
+        tokenIdsRaw: selectionIds,
+      };
+      if (selectionIds.some((id) => id > MAX_SAFE)) {
+        console.warn(
+          "NftPicker: emitting bigint payload because some token IDs exceed MAX_SAFE_INTEGER"
+        );
+      }
+      onChange(payload);
+    }
+  };
+
+  useEffect(() => {
+    const pendingContractAddress = pendingPropEmitRef.current;
+    if (!pendingContractAddress) {
+      return;
+    }
+    if (!selectedContract || selectedContract.address !== pendingContractAddress) {
+      return;
+    }
+    pendingPropEmitRef.current = null;
+    emitChange(selectedContract, ranges, allSelected);
+  }, [selectedContract, ranges, allSelected]);
+  const activeSuggestionId = isOpen && suggestionList[activeIndex]
+    ? `nft-suggestion-${activeIndex}`
+    : undefined;
+
+  return (
+    <div className={clsx("tw-@container tw-flex tw-flex-col tw-gap-4 tw-rounded-xl tw-border tw-border-iron-800 tw-bg-iron-900 tw-p-4", className)}>
+      <div className="tw-flex tw-flex-col tw-gap-2">
+        <label htmlFor={collectionInputId} className="tw-text-sm tw-font-semibold tw-text-iron-200">
+          Select collection
+        </label>
+        <div className="tw-relative">
+          <input
+            id={collectionInputId}
+            ref={inputRef}
+            value={query}
+            onChange={handleInputChange}
+            onKeyDown={handleInputKeyDown}
+            onFocus={handleInputFocus}
+            placeholder={placeholder}
+            role="combobox"
+            aria-expanded={isOpen}
+            aria-controls="nft-picker-suggest-list"
+            aria-activedescendant={activeSuggestionId}
+            className="tw-w-full tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-950 tw-px-3 tw-py-[0.625rem] tw-text-sm tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary-500"
+          />
+          {suggestionList.length > 0 && (
+            <NftSuggestList
+              items={suggestionList}
+              activeIndex={activeIndex}
+              isOpen={isOpen}
+              hiddenCount={hiddenCount}
+              hideSpam={hideSpam}
+              onToggleSpam={handleToggleSpam}
+              onHover={setActiveIndex}
+              onSelect={handleSelectSuggestion}
+            />
+          )}
+        </div>
+      </div>
+
+      {selectedContract && (
+        <NftContractHeader
+          contract={selectedContract}
+          onChange={() => inputRef.current?.focus()}
+          onClear={handleClearContract}
+        />
+      )}
+
+      {selectedContract && (
+        <div className="tw-flex tw-flex-col tw-gap-3">
+          <form className="tw-flex tw-flex-col tw-gap-3" onSubmit={handleTokenFormSubmit}>
+            {allSelected ? (
+              <AllTokensSelectedCard
+                onDeselect={handleDeselectAll}
+                buttonRef={deselectButtonRef}
+              />
+            ) : (
+              <div className="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-start">
+                <input
+                  value={tokenInput}
+                  onChange={handleTokenInputChange}
+                  onKeyDown={handleTokenInputKeyDown}
+                  placeholder={tokenInputPlaceholder}
+                  disabled={tokenInputDisabled}
+                  className="tw-flex-1 tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-950 tw-px-3 tw-py-2.5 tw-text-sm tw-text-iron-100 tw-transition disabled:tw-cursor-not-allowed disabled:tw-bg-iron-900 disabled:tw-text-iron-600 focus:tw-border-primary-500 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-primary-500"
+                  aria-label="Add token IDs or ranges"
+                  aria-describedby={helperMessageId}
+                />
+
+                <div className="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-center">
+                  <button
+                    type="submit"
+                    className="tw-inline-flex tw-w-full tw-shrink-0 tw-items-center tw-justify-center tw-gap-2 tw-rounded-md tw-bg-primary-600 tw-px-4 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-white tw-transition-colors hover:tw-bg-primary-700 disabled:tw-cursor-not-allowed disabled:tw-bg-iron-800 disabled:tw-text-iron-500 sm:tw-w-auto"
+                    disabled={!canAddTokens}
+                  >
+                    Add
+                  </button>
+                  {allowAll && (
+                    <button
+                      type="button"
+                      className={selectAllButtonClassName}
+                      onClick={handleSelectAll}
+                      disabled={!selectedContract}
+                      title={selectAllLabel}
+                    >
+                      <FontAwesomeIcon
+                        className="tw-h-5 tw-w-5"
+                        icon={faCircle}
+                        aria-hidden="true"
+                      />
+                      <span>{selectAllLabel}</span>
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </form>
+
+          {allSelected ? null : (
+            <>
+              <output id={helperMessageId} className={helperClassName} aria-live="polite">
+                {helperState.text}
+              </output>
+
+              <NftEditRanges
+                ranges={ranges}
+                isEditing={isEditingText}
+                textValue={textValue}
+                parseErrors={parseErrors}
+                onToggle={() => setIsEditingText((prev) => !prev)}
+                onTextChange={handleEditTextChange}
+                onApply={() => {
+                  handleApplyText();
+                  setIsEditingText(false);
+                }}
+                onCancel={() => {
+                  setTextValue(formatCanonical(ranges));
+                  setParseErrors([]);
+                  setIsEditingText(false);
+                }}
+                onClear={handleClearTokens}
+              />
+
+              {hasSelectedTokens ? (
+                <NftTokenList
+                  contractAddress={selectedContract.address}
+                  chain={chain}
+                  ranges={ranges}
+                  overscan={overscan}
+                  renderTokenExtra={renderTokenExtra}
+                  onRemove={handleRemoveToken}
+                />
+              ) : (
+                <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-3 tw-rounded-lg tw-border tw-border-dashed tw-border-iron-700 tw-bg-iron-950 tw-p-6 tw-text-center">
+                  <span className="tw-text-sm tw-font-semibold tw-text-iron-100">No tokens selected</span>
+                  <span className="tw-max-w-xs tw-text-xs tw-text-iron-300">
+                    Add tokens using the input above or choose Select All to include the entire collection.
+                  </span>
+                </div>
+              )}
+            </>
+          )}
+
+          {unsafeCount > 0 && outputMode === "number" && (
+            <div className="tw-text-xs tw-text-amber-300">
+              Some token IDs exceed Number.MAX_SAFE_INTEGER. Switch to bigint output or remove those IDs.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/nft-picker/NftPicker.types.ts b/components/nft-picker/NftPicker.types.ts
new file mode 100644
index 0000000000..fce5f24f41
--- /dev/null
+++ b/components/nft-picker/NftPicker.types.ts
@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+
+export type SupportedChain = "ethereum";
+
+export type OutputMode = "number" | "bigint";
+
+export type TokenRange = { start: bigint; end: bigint };
+
+export type TokenSelection = bigint[];
+
+export type Suggestion = {
+  address: `0x${string}`;
+  name?: string;
+  symbol?: string;
+  tokenType?: "ERC721" | "ERC1155";
+  totalSupply?: string;
+  floorPriceEth?: number | null;
+  imageUrl?: string | null;
+  isSpam?: boolean;
+  safelist?: "verified" | "approved" | "requested" | "not_requested";
+  deployer?: `0x${string}` | null;
+};
+
+export type ContractOverview = Suggestion & {
+  description?: string | null;
+  bannerImageUrl?: string | null;
+};
+
+export type TokenMetadata = {
+  tokenId: bigint;
+  tokenIdRaw: string;
+  name?: string | null;
+  imageUrl?: string | null;
+  isSpam?: boolean;
+};
+
+type BaseSelection = {
+  contractAddress: `0x${string}`;
+  allSelected: boolean;
+  tokenIdsRaw: readonly bigint[];
+};
+
+export type NftPickerSelection =
+  | (BaseSelection & {
+      outputMode: "number";
+      tokenIds: readonly number[];
+    })
+  | (BaseSelection & {
+      outputMode: "bigint";
+      tokenIds: readonly string[];
+    });
+
+export type NftPickerValue = {
+  chain: SupportedChain;
+  contractAddress?: `0x${string}`;
+  selectedIds: Readonly<TokenSelection>;
+  allSelected: boolean;
+};
+
+export type NftPickerProps = {
+  readonly value?: NftPickerValue;
+  readonly defaultValue?: Partial<NftPickerValue>;
+  readonly onChange: (output: NftPickerSelection | null) => void;
+  readonly onContractChange?: (meta: ContractOverview | null) => void;
+  readonly chain?: SupportedChain;
+  readonly outputMode?: OutputMode;
+  readonly hideSpam?: boolean;
+  readonly allowAll?: boolean;
+  readonly allowRanges?: boolean;
+  readonly debounceMs?: number;
+  readonly overscan?: number;
+  readonly placeholder?: string;
+  readonly className?: string;
+  readonly renderTokenExtra?: (tokenId: bigint, metadata?: TokenMetadata) => ReactNode;
+};
+
+export type ParseError = {
+  code?: string;
+  input: string;
+  index: number;
+  length: number;
+  message: string;
+};
+
+export type CanonicalTokenState = {
+  ids: TokenSelection;
+  ranges: TokenRange[];
+};
+
+export type TokenListRow = {
+  tokenId: bigint;
+  range?: TokenRange;
+};
+
+export type SearchQueryParams = {
+  query: string;
+  chain?: SupportedChain;
+  hideSpam?: boolean;
+};
+
+export type TokenMetadataRequest = {
+  address: `0x${string}`;
+  tokenIds: readonly string[];
+  chain?: SupportedChain;
+};
diff --git a/components/nft-picker/NftPicker.utils.ts b/components/nft-picker/NftPicker.utils.ts
new file mode 100644
index 0000000000..cef2d719e8
--- /dev/null
+++ b/components/nft-picker/NftPicker.utils.ts
@@ -0,0 +1,494 @@
+import type {
+  ParseError,
+  TokenRange,
+  TokenSelection,
+} from "./NftPicker.types";
+
+export const MAX_SAFE = BigInt(Number.MAX_SAFE_INTEGER);
+export const MAX_ENUMERATION = BigInt(10_000);
+const BIGINT_ZERO = BigInt(0);
+const BIGINT_ONE = BigInt(1);
+
+export type RangeTooLargeError = Error & {
+  code: "range-too-large";
+  limit: bigint;
+  size: bigint;
+};
+
+type ParseErrorArray = ParseError[] & Error;
+
+function createParseErrorArray(errors: ParseError[], message?: string): ParseErrorArray {
+  const issues = [...errors];
+  const primaryMessage = message ?? issues[0]?.message ?? "Invalid token expression";
+  const errorArray = Object.assign(issues, new Error(primaryMessage)) as ParseErrorArray;
+  errorArray.name = "ParseErrorArray";
+  return errorArray;
+}
+
+function throwParseErrors(errors: ParseError[], message?: string): never {
+  throw createParseErrorArray(errors, message);
+}
+
+function createRangeTooLargeError(size: bigint): RangeTooLargeError {
+  const error = new Error(
+    `Range expands to ${size.toString()} tokens, exceeding the limit of ${MAX_ENUMERATION.toString()}.`
+  ) as RangeTooLargeError;
+  error.name = "RangeTooLargeError";
+  error.code = "range-too-large";
+  error.limit = MAX_ENUMERATION;
+  error.size = size;
+  return error;
+}
+
+export function isRangeTooLargeError(value: unknown): value is RangeTooLargeError {
+  if (!(value instanceof Error)) {
+    return false;
+  }
+  const candidate = value as Partial<RangeTooLargeError>;
+  return candidate.code === "range-too-large" && typeof candidate.size === "bigint";
+}
+
+interface Segment {
+  value: string;
+  start: number;
+  end: number;
+}
+
+function isDelimiter(char: string): boolean {
+  return char === "," || /\s/.test(char);
+}
+
+function tokenize(input: string): Segment[] {
+  const parts: Segment[] = [];
+  let i = 0;
+  while (i < input.length) {
+    const char = input[i];
+    if (isDelimiter(char)) {
+      i += 1;
+      continue;
+    }
+    const start = i;
+    let value = "";
+    while (i < input.length && !isDelimiter(input[i])) {
+      value += input[i];
+      i += 1;
+    }
+    parts.push({ value, start, end: i });
+  }
+  if (!parts.length) {
+    return [];
+  }
+  const segments: Segment[] = [];
+  let skipNext = false;
+  for (let index = 0; index < parts.length; index += 1) {
+    if (skipNext) {
+      skipNext = false;
+      continue;
+    }
+    const part = parts[index];
+    if (
+      part.value === "-" &&
+      segments.length > 0 &&
+      index + 1 < parts.length &&
+      parts[index + 1].value !== "-"
+    ) {
+      const previous = segments.pop()!;
+      const next = parts[index + 1];
+      segments.push({
+        value: `${previous.value}-${next.value}`,
+        start: previous.start,
+        end: next.end,
+      });
+      skipNext = true;
+      continue;
+    }
+    segments.push(part);
+  }
+  return segments;
+}
+
+function makeError(segment: Segment, message: string, code?: string): ParseError {
+  return {
+    code,
+    input: segment.value,
+    index: segment.start,
+    length: Math.max(segment.end - segment.start, segment.value.length || 1),
+    message,
+  };
+}
+
+function parseTokenValue(
+  value: string,
+  segment: Segment,
+  errors: ParseError[],
+  overrideStart?: number
+): bigint | null {
+  if (!value) {
+    errors.push(makeError(segment, "Token is empty"));
+    return null;
+  }
+  if (/^[+-]/.test(value)) {
+    errors.push(makeError(segment, "Negative and signed values are not allowed"));
+    return null;
+  }
+  const isHex = /^0[xX][0-9a-fA-F]+$/.test(value);
+  const isDecimal = /^\d+$/.test(value);
+  if (!isHex && !isDecimal) {
+    const start = overrideStart ?? segment.start;
+    errors.push({
+      input: value,
+      index: start,
+      length: value.length,
+      message: "Invalid token format",
+    });
+    return null;
+  }
+  return BigInt(value);
+}
+
+function parseSingleTokenSegment(
+  value: string,
+  segment: Segment,
+  errors: ParseError[]
+): TokenRange[] {
+  const parsedValue = parseTokenValue(value, segment, errors);
+  return parsedValue === null ? [] : [{ start: parsedValue, end: parsedValue }];
+}
+
+function parseRangeSegment(
+  startValueRaw: string,
+  endValueRaw: string,
+  segment: Segment,
+  errors: ParseError[]
+): TokenRange | null {
+  const startValue = parseTokenValue(startValueRaw, segment, errors);
+  const endStartIndex = segment.end - endValueRaw.length;
+  const endSegment: Segment = {
+    value: endValueRaw,
+    start: endStartIndex,
+    end: segment.end,
+  };
+  const endValue = parseTokenValue(endValueRaw, endSegment, errors, endStartIndex);
+  if (startValue === null || endValue === null) {
+    return null;
+  }
+  const [rangeStart, rangeEnd] =
+    startValue <= endValue ? [startValue, endValue] : [endValue, startValue];
+  const rangeSize = rangeEnd - rangeStart + BIGINT_ONE;
+  if (rangeSize > MAX_ENUMERATION) {
+    const limit = MAX_ENUMERATION.toString();
+    const size = rangeSize.toString();
+    errors.push(
+      makeError(
+        segment,
+        `Range expands to ${size} tokens, exceeding the limit of ${limit}.`,
+        "range-too-large"
+      )
+    );
+    return null;
+  }
+  return { start: rangeStart, end: rangeEnd };
+}
+
+function parseSegmentToRanges(segment: Segment, errors: ParseError[]): TokenRange[] {
+  if (!segment.value) {
+    return [];
+  }
+  const parts = segment.value.split("-");
+  if (parts.length === 1) {
+    return parseSingleTokenSegment(parts[0], segment, errors);
+  }
+  if (parts.length === 2) {
+    const range = parseRangeSegment(parts[0], parts[1], segment, errors);
+    return range ? [range] : [];
+  }
+  errors.push(makeError(segment, "Invalid range expression"));
+  return [];
+}
+
+function canonicalizeRanges(ranges: TokenRange[]): TokenRange[] {
+  if (!ranges.length) {
+    return [];
+  }
+  const sorted = [...ranges].sort((a, b) => {
+    if (a.start === b.start) {
+      if (a.end === b.end) {
+        return 0;
+      }
+      return a.end < b.end ? -1 : 1;
+    }
+    return a.start < b.start ? -1 : 1;
+  });
+  const canonical: TokenRange[] = [];
+  for (const range of sorted) {
+    if (!canonical.length) {
+      canonical.push({ start: range.start, end: range.end });
+      continue;
+    }
+    const lastIndex = canonical.length - 1;
+    const last = canonical.at(-1);
+    if (!last) {
+      canonical.push({ start: range.start, end: range.end });
+      continue;
+    }
+    if (range.start <= last.end + BIGINT_ONE) {
+      let mergedEnd = last.end;
+      if (range.end > last.end) {
+        mergedEnd = range.end;
+      }
+      canonical[lastIndex] = { start: last.start, end: mergedEnd };
+      continue;
+    }
+    canonical.push({ start: range.start, end: range.end });
+  }
+  return canonical;
+}
+
+export function parseTokenExpressionToRanges(input: string): TokenRange[] {
+  if (!input.trim()) {
+    return [];
+  }
+  const segments = tokenize(input);
+  const errors: ParseError[] = [];
+  const ranges: TokenRange[] = [];
+  for (const segment of segments) {
+    ranges.push(...parseSegmentToRanges(segment, errors));
+  }
+  if (errors.length) {
+    throwParseErrors(errors);
+  }
+  const canonical = canonicalizeRanges(ranges);
+  const total = canonical.reduce(
+    (sum, range) => sum + (range.end - range.start + BIGINT_ONE),
+    BIGINT_ZERO
+  );
+  if (total > MAX_ENUMERATION) {
+    const trimmed = input.trim();
+    const displayValue = trimmed.length ? trimmed : input;
+    const parseError: ParseError = {
+      code: "range-too-large",
+      input: displayValue,
+      index: 0,
+      length: Math.max(displayValue.length, 1),
+      message: `Selection expands to ${total.toString()} tokens, exceeding the limit of ${MAX_ENUMERATION.toString()}.`,
+    };
+    throwParseErrors([parseError], parseError.message);
+  }
+  return canonical;
+}
+
+export function parseTokenExpressionToBigints(input: string): TokenSelection {
+  const ranges = parseTokenExpressionToRanges(input);
+  try {
+    return fromCanonicalRanges(ranges);
+  } catch (error) {
+    if (isRangeTooLargeError(error)) {
+      const trimmed = input.trim();
+      const displayValue = trimmed.length ? trimmed : input;
+      const parseError: ParseError = {
+        code: error.code,
+        input: displayValue,
+        index: 0,
+        length: Math.max(displayValue.length, 1),
+        message: error.message,
+      };
+      throwParseErrors([parseError], error.message);
+    }
+    throw error;
+  }
+}
+
+export function mergeCanonicalRanges(
+  current: TokenRange[],
+  additions: TokenRange[]
+): TokenRange[] {
+  if (!additions.length) {
+    return current;
+  }
+  if (!current.length) {
+    return canonicalizeRanges(additions);
+  }
+  return canonicalizeRanges([...current, ...additions]);
+}
+
+export function removeTokenFromRanges(
+  ranges: TokenRange[],
+  tokenId: bigint
+): TokenRange[] {
+  if (!ranges.length) {
+    return ranges;
+  }
+  const result: TokenRange[] = [];
+  for (const range of ranges) {
+    if (tokenId < range.start || tokenId > range.end) {
+      result.push(range);
+      continue;
+    }
+    if (range.start === range.end && range.start === tokenId) {
+      continue;
+    }
+    if (tokenId === range.start) {
+      result.push({ start: range.start + BIGINT_ONE, end: range.end });
+      continue;
+    }
+    if (tokenId === range.end) {
+      result.push({ start: range.start, end: range.end - BIGINT_ONE });
+      continue;
+    }
+    result.push(
+      { start: range.start, end: tokenId - BIGINT_ONE },
+      { start: tokenId + BIGINT_ONE, end: range.end }
+    );
+  }
+  return canonicalizeRanges(result);
+}
+
+export function bigintCompare(a: bigint, b: bigint): number {
+  if (a === b) {
+    return 0;
+  }
+  return a < b ? -1 : 1;
+}
+
+export function sortAndDedupIds(ids: readonly bigint[]): TokenSelection {
+  const sorted = [...ids].sort(bigintCompare);
+  const result: TokenSelection = [];
+  for (const id of sorted) {
+    const last = result.at(-1);
+    if (last === undefined || last !== id) {
+      result.push(id);
+    }
+  }
+  return result;
+}
+
+
+export function toCanonicalRanges(ids: readonly bigint[]): TokenRange[] {
+  const sorted = sortAndDedupIds(ids);
+  if (sorted.length === 0) {
+    return [];
+  }
+  const ranges: TokenRange[] = [];
+  let current: TokenRange = { start: sorted[0], end: sorted[0] };
+  for (let index = 1; index < sorted.length; index += 1) {
+    const value = sorted[index];
+    if (value === current.end + BIGINT_ONE) {
+      current = { start: current.start, end: value };
+    } else {
+      ranges.push(current);
+      current = { start: value, end: value };
+    }
+  }
+  ranges.push(current);
+  return ranges;
+}
+
+export function fromCanonicalRanges(ranges: TokenRange[]): TokenSelection {
+  const values: TokenSelection = [];
+  let total = BIGINT_ZERO;
+  for (const range of ranges) {
+    let cursor = range.start;
+    const rangeSize = range.end - range.start + BIGINT_ONE;
+    if (rangeSize > MAX_ENUMERATION) {
+      throw createRangeTooLargeError(rangeSize);
+    }
+    total += rangeSize;
+    if (total > MAX_ENUMERATION) {
+      throw createRangeTooLargeError(total);
+    }
+    while (cursor <= range.end) {
+      values.push(cursor);
+      cursor += BIGINT_ONE;
+    }
+  }
+  return values;
+}
+
+export function formatCanonical(ranges: TokenRange[]): string {
+  return ranges
+    .map((range) =>
+      range.start === range.end
+        ? range.start.toString()
+        : `${range.start.toString()}-${range.end.toString()}`
+    )
+    .join(",");
+}
+
+export function formatBigIntWithSeparators(value: bigint): string {
+  const raw = value.toString();
+  const isNegative = raw.startsWith("-");
+  const digits = isNegative ? raw.slice(1) : raw;
+
+  if (digits.length <= 3) {
+    return isNegative ? `-${digits}` : digits;
+  }
+
+  let formatted = "";
+  for (let index = 0; index < digits.length; index += 1) {
+    const char = digits[digits.length - 1 - index];
+    if (index > 0 && index % 3 === 0) {
+      formatted = `,${formatted}`;
+    }
+    formatted = `${char}${formatted}`;
+  }
+
+  return isNegative ? `-${formatted}` : formatted;
+}
+
+export function tryToNumberArray(ids: TokenSelection): {
+  numbers: number[];
+  unsafeCount: number;
+} {
+  const numbers: number[] = [];
+  let unsafeCount = 0;
+  for (const id of ids) {
+    if (id > MAX_SAFE) {
+      unsafeCount += 1;
+    } else {
+      numbers.push(Number(id));
+    }
+  }
+  return { numbers, unsafeCount };
+}
+
+export function expandRangesWindow(
+  ranges: TokenRange[],
+  startIndex: number,
+  count: number
+): TokenSelection {
+  if (count <= 0 || startIndex < 0 || !ranges.length) {
+    return [];
+  }
+  const start = BigInt(startIndex);
+  const limit = BigInt(count);
+  const result: TokenSelection = [];
+  let consumed = BIGINT_ZERO;
+  for (const range of ranges) {
+    const rangeLength = range.end - range.start + BIGINT_ONE;
+    const rangeStartIndex = consumed;
+    const rangeEndIndex = consumed + rangeLength;
+    if (rangeEndIndex <= start) {
+      consumed = rangeEndIndex;
+      continue;
+    }
+    let localStart = range.start;
+    if (start > rangeStartIndex) {
+      const offset = start - rangeStartIndex;
+      localStart = range.start + offset;
+    }
+    const remaining = limit - BigInt(result.length);
+    const available = range.end - localStart + BIGINT_ONE;
+    let take = available;
+    if (remaining < available) {
+      take = remaining;
+    }
+    for (let step = BIGINT_ZERO; step < take; step += BIGINT_ONE) {
+      result.push(localStart + step);
+    }
+    if (BigInt(result.length) >= limit) {
+      break;
+    }
+    consumed = rangeEndIndex;
+  }
+  return result;
+}
diff --git a/components/nft-picker/NftSuggestList.tsx b/components/nft-picker/NftSuggestList.tsx
new file mode 100644
index 0000000000..9a529968a0
--- /dev/null
+++ b/components/nft-picker/NftSuggestList.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import clsx from "clsx";
+import Image from "next/image";
+import { useRef } from "react";
+
+import DistributionPlanVerifiedIcon from "../distribution-plan-tool/common/DistributionPlanVerifiedIcon";
+import type { Suggestion } from "./NftPicker.types";
+import { useVirtualizedWaves } from "@/hooks/useVirtualizedWaves";
+
+interface NftSuggestListProps {
+  readonly items: Suggestion[];
+  readonly activeIndex: number;
+  readonly isOpen: boolean;
+  readonly hiddenCount: number;
+  readonly hideSpam: boolean;
+  readonly onToggleSpam: () => void;
+  readonly onHover: (index: number) => void;
+  readonly onSelect: (item: Suggestion) => void;
+}
+
+const ROW_HEIGHT = 64;
+const OVERSCAN = 6;
+
+function shortenAddress(address: `0x${string}`): string {
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+
+function formatFloor(value: number | null | undefined): string {
+  if (typeof value !== "number" || Number.isNaN(value)) {
+    return "—";
+  }
+  if (value >= 1) {
+    return value.toFixed(2);
+  }
+  return value.toFixed(3);
+}
+
+export function NftSuggestList({
+  items,
+  activeIndex,
+  isOpen,
+  hiddenCount,
+  hideSpam,
+  onToggleSpam,
+  onHover,
+  onSelect,
+}: NftSuggestListProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const listContainerRef = useRef<HTMLDivElement>(null);
+
+  const virtualization = useVirtualizedWaves<Suggestion>(
+    items,
+    "nft-picker-suggestions",
+    scrollContainerRef,
+    listContainerRef,
+    ROW_HEIGHT,
+    OVERSCAN
+  );
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      className="tw-absolute tw-left-0 tw-right-0 tw-top-full tw-z-20 tw-mt-2 tw-max-h-80 tw-overflow-y-auto tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-900"
+    >
+      <div
+        ref={listContainerRef}
+        style={{ height: virtualization.totalHeight, position: "relative" }}
+      >
+        <ul
+          id="nft-picker-suggest-list"
+          role="listbox"
+          aria-label="NFT collections suggestions"
+          className="tw-relative tw-m-0 tw-list-none tw-p-0"
+          style={{ height: "100%" }}
+          tabIndex={-1}
+        >
+          {virtualization.virtualItems.map((virtual) => {
+            if (virtual.index >= items.length) {
+              return (
+                <li
+                  key="suggestions-sentinel"
+                  className="tw-absolute tw-w-full"
+                  style={{ top: virtual.start, height: virtual.size }}
+                  aria-hidden="true"
+                  role="presentation"
+                >
+                  <div
+                    ref={virtualization.sentinelRef}
+                    style={{ height: "100%", width: "100%" }}
+                  />
+                </li>
+              );
+            }
+            const suggestion = items[virtual.index];
+            const isActive = virtual.index === activeIndex;
+            return (
+              <li
+                key={suggestion.address}
+                role="option"
+                aria-selected={isActive}
+                id={`nft-suggestion-${virtual.index}`}
+                tabIndex={isActive ? 0 : -1}
+                onMouseEnter={() => onHover(virtual.index)}
+                onClick={() => onSelect(suggestion)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+                    event.preventDefault();
+                    onSelect(suggestion);
+                  }
+                }}
+                className={clsx(
+                  "tw-absolute tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-gap-3 tw-px-3 tw-py-2",
+                  isActive
+                    ? "tw-bg-primary-500/20 tw-text-white"
+                    : "tw-text-iron-200 hover:tw-bg-iron-800"
+                )}
+                style={{ top: virtual.start, height: virtual.size }}
+                onFocus={() => onHover(virtual.index)}
+              >
+                <div className="tw-relative tw-h-10 tw-w-10">
+                  <div className="tw-h-full tw-w-full tw-overflow-hidden tw-rounded-md tw-bg-iron-800">
+                    {suggestion.imageUrl ? (
+                      <Image
+                        src={suggestion.imageUrl}
+                        alt={suggestion.name ?? suggestion.address}
+                        fill
+                        sizes="40px"
+                        className="tw-h-full tw-w-full tw-object-cover"
+                      />
+                    ) : (
+                      <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-text-xs tw-text-iron-400">
+                        NFT
+                      </div>
+                    )}
+                  </div>
+                  {suggestion.safelist === "verified" && (
+                    <div className="tw-absolute tw-right-[-6px] tw-top-[-6px]">
+                      <DistributionPlanVerifiedIcon />
+                    </div>
+                  )}
+                </div>
+                <div className="tw-flex tw-flex-1 tw-flex-col tw-gap-1">
+                  <span className="tw-text-sm tw-font-medium tw-text-white">
+                    {suggestion.name ?? shortenAddress(suggestion.address)}
+                  </span>
+                  <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-2 tw-text-xs tw-text-iron-400">
+                    <span>{shortenAddress(suggestion.address)}</span>
+                    {suggestion.tokenType && (
+                      <span className="tw-rounded tw-bg-iron-800 tw-px-2 tw-py-0.5">
+                        {suggestion.tokenType}
+                      </span>
+                    )}
+                    <span>Ξ{formatFloor(suggestion.floorPriceEth)}</span>
+                    {suggestion.totalSupply && <span>Supply {suggestion.totalSupply}</span>}
+                    {suggestion.safelist === "verified" && (
+                      <span className="tw-rounded tw-bg-green-500/20 tw-px-2 tw-py-0.5 tw-text-green-300">
+                        Verified
+                      </span>
+                    )}
+                    {suggestion.isSpam && (
+                      <span className="tw-rounded tw-bg-amber-500/20 tw-px-2 tw-py-0.5 tw-text-amber-300">
+                        Suspected spam
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      {hideSpam && hiddenCount > 0 && (
+        <div className="tw-border-t tw-border-iron-700 tw-px-3 tw-py-2 tw-text-xs tw-text-amber-300">
+          Filtered suspected spam collections ({hiddenCount}).
+          <button
+            type="button"
+            className="tw-ml-2 tw-text-primary-400 hover:tw-underline"
+            onClick={onToggleSpam}
+          >
+            Show anyway
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/nft-picker/NftTokenList.tsx b/components/nft-picker/NftTokenList.tsx
new file mode 100644
index 0000000000..eb52f849fb
--- /dev/null
+++ b/components/nft-picker/NftTokenList.tsx
@@ -0,0 +1,216 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useMemo, useRef } from "react";
+import type { ReactNode } from "react";
+
+import type {
+  SupportedChain,
+  TokenMetadata,
+  TokenRange,
+} from "./NftPicker.types";
+import {
+  expandRangesWindow,
+  formatCanonical,
+} from "./NftPicker.utils";
+import { useTokenMetadataQuery } from "./useAlchemyClient";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useScrollPositionContext } from "@/contexts/ScrollPositionContext";
+import Spinner from "@/components/utils/Spinner";
+
+interface NftTokenListProps {
+  readonly contractAddress?: `0x${string}`;
+  readonly chain: SupportedChain;
+  readonly ranges: TokenRange[];
+  readonly overscan?: number;
+  readonly renderTokenExtra?: (tokenId: bigint, metadata?: TokenMetadata) => ReactNode;
+  readonly onRemove: (tokenId: bigint) => void;
+}
+
+const ROW_HEIGHT = 72;
+const DEFAULT_OVERSCAN = 8;
+const BIGINT_ZERO = BigInt(0);
+const BIGINT_ONE = BigInt(1);
+const MAX_VIRTUAL_ITEM_COUNT = 100_000;
+// Cap prevents virtualization container heights from becoming extreme.
+const MAX_VIRTUAL_ITEM_COUNT_BIGINT = BigInt(MAX_VIRTUAL_ITEM_COUNT);
+const VIRTUAL_SCROLL_KEY = "nft-picker-token-list";
+
+function getTotalCount(ranges: TokenRange[]): number {
+  let total = BIGINT_ZERO;
+  for (const range of ranges) {
+    const size = range.end - range.start + BIGINT_ONE;
+    total += size;
+    if (total >= MAX_VIRTUAL_ITEM_COUNT_BIGINT) {
+      return MAX_VIRTUAL_ITEM_COUNT;
+    }
+  }
+  return Number(total);
+}
+
+function toDecimalString(value: bigint): string {
+  return value.toString(10);
+}
+
+export function NftTokenList({
+  contractAddress,
+  chain,
+  ranges,
+  overscan = DEFAULT_OVERSCAN,
+  renderTokenExtra,
+  onRemove,
+}: NftTokenListProps) {
+  const totalCount = getTotalCount(ranges);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const { getPosition, setPosition } = useScrollPositionContext();
+  const initialOffsetRef = useRef<number | null>(null);
+  if (initialOffsetRef.current === null) {
+    initialOffsetRef.current = getPosition(VIRTUAL_SCROLL_KEY);
+  }
+
+  const virtualizer = useVirtualizer({
+    count: totalCount,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan,
+    initialOffset: initialOffsetRef.current ?? 0,
+  });
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleScroll = () => {
+      setPosition(VIRTUAL_SCROLL_KEY, container.scrollTop);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      setPosition(VIRTUAL_SCROLL_KEY, container.scrollTop);
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, [setPosition]);
+
+  const virtualItems = virtualizer.getVirtualItems();
+  const firstVisibleIndex = virtualItems.length > 0 ? virtualItems[0].index : 0;
+  const lastVisibleIndex = virtualItems.at(-1)?.index ?? -1;
+
+  const windowTokenIds = useMemo(() => {
+    if (lastVisibleIndex < firstVisibleIndex) {
+      return [] as bigint[];
+    }
+    return expandRangesWindow(
+      ranges,
+      firstVisibleIndex,
+      lastVisibleIndex - firstVisibleIndex + 1
+    );
+  }, [ranges, firstVisibleIndex, lastVisibleIndex]);
+
+  const metadataQuery = useTokenMetadataQuery({
+    address: contractAddress,
+    chain,
+    tokenIds: windowTokenIds.map(toDecimalString),
+    enabled: Boolean(contractAddress) && windowTokenIds.length > 0,
+  });
+
+  const metadataMap = useMemo(() => {
+    const map = new Map<string, TokenMetadata>();
+    for (const entry of metadataQuery.data ?? []) {
+      map.set(entry.tokenIdRaw, entry);
+      map.set(entry.tokenId.toString(10), entry);
+    }
+    return map;
+  }, [metadataQuery.data]);
+
+  if (ranges.length === 0) {
+    return (
+      <div className="tw-text-sm tw-text-iron-300">No tokens selected.</div>
+    );
+  }
+
+  return (
+    <div className="tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-900">
+      <div ref={scrollContainerRef} className="tw-max-h-80 tw-overflow-y-auto">
+        <ul
+          aria-label="Selected tokens"
+          className="tw-relative tw-m-0 tw-list-none tw-p-0"
+          style={{ height: virtualizer.getTotalSize(), position: "relative" }}
+        >
+          {virtualItems.map((virtualItem) => {
+            const windowIndex = virtualItem.index - firstVisibleIndex;
+            const tokenId = windowTokenIds[windowIndex] ?? null;
+            if (tokenId === null) {
+              return null;
+            }
+            const decimalId = toDecimalString(tokenId);
+            const metadata = metadataMap.get(decimalId);
+            const isLoadingMetadata = metadataQuery.isFetching && !metadata;
+            let thumbnailContent: ReactNode;
+            if (metadata?.imageUrl) {
+              thumbnailContent = (
+                <Image
+                  src={metadata.imageUrl}
+                  alt={metadata.name ?? decimalId}
+                  fill
+                  sizes="40px"
+                  className="tw-h-full tw-w-full tw-object-cover"
+                />
+              );
+            } else if (isLoadingMetadata) {
+              thumbnailContent = (
+                <div
+                  aria-label="Loading thumbnail"
+                  aria-live="polite"
+                  className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center"
+                >
+                  <Spinner />
+                </div>
+              );
+            } else {
+              thumbnailContent = (
+                <div className="tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-text-xs tw-text-iron-400">
+                  #{decimalId}
+                </div>
+              );
+            }
+            return (
+              <li
+                key={decimalId}
+                className="tw-absolute tw-flex tw-w-full tw-items-center tw-gap-3 tw-px-3 tw-py-2"
+                style={{
+                  transform: `translateY(${virtualItem.start}px)`,
+                  height: virtualItem.size,
+                  width: "100%",
+                }}
+              >
+                <div className="tw-relative tw-h-10 tw-w-10 tw-overflow-hidden tw-rounded-md tw-bg-iron-800" aria-hidden="true">
+                  {thumbnailContent}
+                </div>
+                <div className="tw-flex tw-flex-1 tw-items-center tw-justify-between tw-gap-4">
+                  <div className="tw-flex tw-flex-col tw-gap-0.5">
+                    <span className="tw-text-sm tw-font-medium tw-text-white">#{decimalId}</span>
+                    {metadata?.name && (
+                      <span className="tw-text-xs tw-text-iron-400">{metadata.name}</span>
+                    )}
+                  </div>
+                  {renderTokenExtra?.(tokenId, metadata)}
+                  <button
+                    type="button"
+                    className="tw-rounded tw-border tw-border-iron-700 tw-bg-transparent tw-px-2 tw-py-1 tw-text-xs tw-text-iron-200 hover:tw-border-primary-500 hover:tw-text-white"
+                    onClick={() => onRemove(tokenId)}
+                    aria-label={`Remove token ${decimalId}`}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      <div className="tw-border-t tw-border-iron-700 tw-px-3 tw-py-2 tw-text-xs tw-text-iron-400">
+        {formatCanonical(ranges)}
+      </div>
+    </div>
+  );
+}
diff --git a/components/nft-picker/useAlchemyClient.ts b/components/nft-picker/useAlchemyClient.ts
new file mode 100644
index 0000000000..dfe4efbea1
--- /dev/null
+++ b/components/nft-picker/useAlchemyClient.ts
@@ -0,0 +1,277 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+
+import type {
+  ContractOverview,
+  Suggestion,
+  SupportedChain,
+  TokenMetadata,
+} from "./NftPicker.types";
+import {
+  getContractOverview,
+  getTokensMetadata,
+  searchNftCollections,
+} from "@/services/alchemy-api";
+import { QueryKey } from "@/components/react-query-wrapper/ReactQueryWrapper";
+
+import type {
+  SearchContractsResult,
+  TokenMetadataParams,
+} from "@/services/alchemy-api";
+
+const SUGGESTION_TTL = 60_000;
+const CONTRACT_TTL = 5 * 60_000;
+const TOKEN_TTL = 60_000;
+
+type CacheEntry<T> = {
+  data: T;
+  expires: number;
+};
+
+const suggestionCache = new Map<string, CacheEntry<SearchContractsResult>>();
+const contractCache = new Map<string, CacheEntry<ContractOverview | null>>();
+const tokenCache = new Map<string, CacheEntry<TokenMetadata[]>>();
+
+function gcExpired<T>(map: Map<string, CacheEntry<T>>, now = Date.now()): void {
+  for (const [key, entry] of map.entries()) {
+    if (entry.expires <= now) {
+      map.delete(key);
+    }
+  }
+}
+
+function getSuggestionCacheKey(
+  query: string,
+  chain: SupportedChain,
+  hideSpam: boolean
+): string {
+  return `${chain}:${hideSpam ? "1" : "0"}:${query.toLowerCase()}`;
+}
+
+function getContractCacheKey(
+  address: `0x${string}`,
+  chain: SupportedChain
+): string {
+  return `${chain}:${address.toLowerCase()}`;
+}
+
+function getTokenCacheKey(params: TokenMetadataParams): string {
+  const ids = [...params.tokenIds].sort((a, b) => {
+    if (a < b) {
+      return -1;
+    }
+    if (a > b) {
+      return 1;
+    }
+    return 0;
+  });
+  return `${params.chain ?? "ethereum"}:${params.address.toLowerCase()}:${ids.join("|")}`;
+}
+
+function useDebouncedValue<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const handle = globalThis.setTimeout(() => setDebounced(value), delay);
+    return () => globalThis.clearTimeout(handle);
+  }, [value, delay]);
+  return debounced;
+}
+
+type UseCollectionSearchParams = {
+  readonly query: string;
+  readonly chain?: SupportedChain;
+  readonly hideSpam?: boolean;
+  readonly debounceMs?: number;
+  readonly enabled?: boolean;
+};
+
+type UseContractOverviewParams = {
+  readonly address?: `0x${string}`;
+  readonly chain?: SupportedChain;
+  readonly enabled?: boolean;
+};
+
+type UseTokenMetadataParams = {
+  readonly address?: `0x${string}`;
+  readonly tokenIds: readonly string[];
+  readonly chain?: SupportedChain;
+  readonly enabled?: boolean;
+};
+
+export function useCollectionSearch({
+  query,
+  chain = "ethereum",
+  hideSpam = true,
+  debounceMs = 250,
+  enabled = true,
+}: UseCollectionSearchParams) {
+  const debouncedQuery = useDebouncedValue(query, debounceMs);
+  const queryClient = useQueryClient();
+  const result = useQuery({
+    queryKey: [QueryKey.NFT_PICKER_SEARCH, chain, debouncedQuery, hideSpam],
+    enabled: enabled && Boolean(debouncedQuery),
+    staleTime: SUGGESTION_TTL,
+    gcTime: SUGGESTION_TTL,
+    queryFn: async ({ signal }) => {
+      const cacheKey = getSuggestionCacheKey(
+        debouncedQuery,
+        chain,
+        hideSpam
+      );
+      const now = Date.now();
+      gcExpired(suggestionCache, now);
+      const cached = suggestionCache.get(cacheKey);
+      if (cached && cached.expires > now) {
+        return cached.data;
+      }
+      const data = await searchNftCollections({
+        query: debouncedQuery,
+        chain,
+        hideSpam,
+        signal,
+      });
+      suggestionCache.set(cacheKey, { data, expires: now + SUGGESTION_TTL });
+      return data;
+    },
+  });
+
+  useEffect(() => {
+    if (!debouncedQuery) {
+      return;
+    }
+    const cacheKey = getSuggestionCacheKey(debouncedQuery, chain, hideSpam);
+    const cached = suggestionCache.get(cacheKey);
+    if (cached) {
+      queryClient.setQueryData(
+        [QueryKey.NFT_PICKER_SEARCH, chain, debouncedQuery, hideSpam],
+        cached.data
+      );
+    }
+  }, [chain, debouncedQuery, hideSpam, queryClient]);
+
+  return {
+    ...result,
+    debouncedQuery,
+  };
+}
+
+export function useContractOverviewQuery({
+  address,
+  chain = "ethereum",
+  enabled = true,
+}: UseContractOverviewParams) {
+  const normalizedAddress = useMemo(() => {
+    if (!address) {
+      return undefined;
+    }
+    return address.toLowerCase() as `0x${string}`;
+  }, [address]);
+
+  return useQuery({
+    queryKey: [QueryKey.NFT_PICKER_CONTRACT, chain, normalizedAddress],
+    enabled: enabled && Boolean(normalizedAddress),
+    staleTime: CONTRACT_TTL,
+    gcTime: CONTRACT_TTL,
+    queryFn: async ({ signal }) => {
+      if (!normalizedAddress) {
+        return null;
+      }
+      const cacheKey = getContractCacheKey(normalizedAddress, chain);
+      const now = Date.now();
+      gcExpired(contractCache, now);
+      const cached = contractCache.get(cacheKey);
+      if (cached && cached.expires > now) {
+        return cached.data;
+      }
+      const data = await getContractOverview({
+        address: normalizedAddress,
+        chain,
+        signal,
+      });
+      contractCache.set(cacheKey, { data, expires: now + CONTRACT_TTL });
+      return data;
+    },
+  });
+}
+
+export function useTokenMetadataQuery({
+  address,
+  tokenIds,
+  chain = "ethereum",
+  enabled = true,
+}: UseTokenMetadataParams) {
+  const uniqueIds = useMemo(() => {
+    const seen = new Set<string>();
+    const deduped: string[] = [];
+    for (const id of tokenIds) {
+      if (!seen.has(id)) {
+        seen.add(id);
+        deduped.push(id);
+      }
+    }
+    return deduped;
+  }, [tokenIds]);
+
+  const params = useMemo(() => {
+    if (!address || uniqueIds.length === 0) {
+      return undefined;
+    }
+    return {
+      address,
+      tokenIds: uniqueIds,
+      chain,
+    } satisfies TokenMetadataParams;
+  }, [address, uniqueIds, chain]);
+
+  return useQuery({
+    queryKey: [
+      QueryKey.NFT_PICKER_TOKENS,
+      chain,
+      address?.toLowerCase(),
+      uniqueIds,
+    ],
+    enabled: enabled && Boolean(params),
+    placeholderData: keepPreviousData,
+    staleTime: TOKEN_TTL,
+    gcTime: TOKEN_TTL,
+    queryFn: async ({ signal }) => {
+      if (!params) {
+        return [] as TokenMetadata[];
+      }
+      const cacheKey = getTokenCacheKey(params);
+      const now = Date.now();
+      gcExpired(tokenCache, now);
+      const cached = tokenCache.get(cacheKey);
+      if (cached && cached.expires > now) {
+        return cached.data;
+      }
+      const data = await getTokensMetadata({
+        ...params,
+        signal,
+      });
+      tokenCache.set(cacheKey, { data, expires: now + TOKEN_TTL });
+      return data;
+    },
+  });
+}
+
+export function primeContractCache(
+  suggestion: Suggestion,
+  chain: SupportedChain = "ethereum"
+) {
+  const cacheKey = getContractCacheKey(suggestion.address, chain);
+  contractCache.set(cacheKey, {
+    data: {
+      ...suggestion,
+      description: null,
+      bannerImageUrl: null,
+    },
+    expires: Date.now() + CONTRACT_TTL,
+  });
+}
diff --git a/components/react-query-wrapper/ReactQueryWrapper.tsx b/components/react-query-wrapper/ReactQueryWrapper.tsx
index b9485ea863..fbbcb47629 100644
--- a/components/react-query-wrapper/ReactQueryWrapper.tsx
+++ b/components/react-query-wrapper/ReactQueryWrapper.tsx
@@ -72,6 +72,9 @@ export enum QueryKey {
   GROUP_WALLET_GROUP_WALLETS = "GROUP_WALLET_GROUP_WALLETS",
   NFTS_SEARCH = "NFTS_SEARCH",
   NFTS = "NFTS",
+  NFT_PICKER_SEARCH = "NFT_PICKER_SEARCH",
+  NFT_PICKER_CONTRACT = "NFT_PICKER_CONTRACT",
+  NFT_PICKER_TOKENS = "NFT_PICKER_TOKENS",
   PROFILE_PROXY = "PROFILE_PROXY",
   PROFILE_PROFILE_PROXIES = "PROFILE_PROFILE_PROXIES",
   EMMA_IDENTITY_ALLOWLISTS = "EMMA_IDENTITY_ALLOWLISTS",
diff --git a/contexts/SeizeSettingsContext.tsx b/contexts/SeizeSettingsContext.tsx
index 6d41a5a715..77991640f3 100644
--- a/contexts/SeizeSettingsContext.tsx
+++ b/contexts/SeizeSettingsContext.tsx
@@ -33,7 +33,7 @@ export const SeizeSettingsProvider = ({
   });
 
   useEffect(() => {
-    fetchUrl(`${publicEnv.API_ENDPOINT}/api/settings`).then(
+    fetchUrl<ApiSeizeSettings>(`${publicEnv.API_ENDPOINT}/api/settings`).then(
       (settings: ApiSeizeSettings) => {
         setSeizeSettings({
           ...settings,
diff --git a/docs/nft-picker-quick-checklist.md b/docs/nft-picker-quick-checklist.md
new file mode 100644
index 0000000000..3436a99ecb
--- /dev/null
+++ b/docs/nft-picker-quick-checklist.md
@@ -0,0 +1,67 @@
+# NFT Picker Quick Checklist
+
+- Contract-scoped outputs with `tokenIdsRaw` mirrored for parity.
+- Internal selection uses `bigint`; output mode controls `number[]` vs `string[]`.
+- `tokenIdsRaw` parity: number mode emits `number[]`, bigint mode emits `string[]` plus `bigint[]` mirror.
+- All Alchemy traffic remains server-side via `services/alchemy-api.ts` helpers; no client API key exposure.
+- Spam collections hidden by default with optional reveal toggle.
+- Component uses Tailwind container queries for responsive layout.
+- Keyboard and accessibility support for combobox, lists, and controls.
+- Virtualized suggestion and token lists with windowed range expansion.
+- “Edit as text” canonical ranges stay synced with chips and parsing logic.
+- No submit button; always emit changes through `onChange`.
+- Mobile/Capacitor touch targets meet minimum sizing.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `NftPickerValue` | – | Controlled value (contract, selected IDs, all flag). |
+| `defaultValue` | `Partial<NftPickerValue>` | – | Initial value for uncontrolled usage. |
+| `onChange` | `(selection: NftPickerSelection \| null) => void` | required | Fired on contract or selection updates. Emits `null` when the contract is cleared. |
+| `onContractChange` | `(meta: ContractOverview \| null) => void` | – | Invoked when the active contract metadata changes. |
+| `chain` | `'ethereum'` | `'ethereum'` | Chain identifier passed to the Alchemy client. |
+| `outputMode` | `'number' \| 'bigint'` | `'number'` | Determines emitted `tokenIds` representation. |
+| `hideSpam` | `boolean` | `true` | Whether to hide spam suggestions by default. |
+| `allowAll` | `boolean` | `true` | Enables the “All tokens” mode. |
+| `allowRanges` | `boolean` | `true` | Enables bucket mode with range parsing. |
+| `debounceMs` | `number` | `250` | Debounce duration for search queries. |
+| `overscan` | `number` | `8` | Overscan applied to virtualized lists. |
+| `placeholder` | `string` | – | Search placeholder text. |
+| `className` | `string` | – | Optional root className. |
+| `renderTokenExtra` | `(tokenId: bigint, metadata?: TokenMetadata) => ReactNode` | – | Custom renderer appended to each token row. |
+
+## Events
+
+- `onChange(selection)` — triggered whenever the contract selection or token list changes. Emits empty arrays when mode is `all`.
+- `onContractChange(meta)` — exposes the resolved contract metadata or `null` when cleared.
+
+## Example Usage
+
+```tsx
+"use client";
+import { useState } from "react";
+import { NftPicker } from "@/components/nft-picker/NftPicker";
+import type { NftPickerSelection } from "@/components/nft-picker/NftPicker.types";
+
+export default function Demo() {
+  const [selection, setSelection] = useState<NftPickerSelection | null>(null);
+
+  return (
+    <div className="tw-@container tw-max-w-3xl tw-space-y-4">
+      <NftPicker onChange={setSelection} allowAll allowRanges />
+      <pre className="tw-rounded tw-bg-iron-900 tw-p-3 tw-text-xs tw-text-iron-200">
+        {JSON.stringify(selection, null, 2)}
+      </pre>
+    </div>
+  );
+}
+```
+
+## Edge Cases & Limitations
+
+- `outputMode="number"` suppresses `onChange` when unsafe token IDs are present; surface guidance to switch to bigint mode.
+- `parseTokenExpressionToBigints` throws an array of `ParseError` objects describing invalid segments. Bucket mode shows these messages beneath the textarea.
+- Very large ranges rely on windowed expansion; virtualization assumes totals fit within JavaScript `number` limits.
+- Contract metadata is fetched lazily; suggestions hydrate cache entries but floor price may be missing when marketplaces do not expose it.
+- Spam toggle only affects the current query session; subsequent searches revert to the configured default.
diff --git a/next.config.mjs b/next.config.mjs
index 09562c772d..4c0495db0b 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -120,6 +120,9 @@ function sharedConfig(publicEnv, assetPrefix) {
         "localhost",
         "media.generator.seize.io",
         "d3lqz0a4bldqgf.cloudfront.net",
+        "i.seadn.io",
+        "i2.seadn.io",
+        "res.cloudinary.com"
       ],
       minimumCacheTTL: 86400,
     },
diff --git a/package-lock.json b/package-lock.json
index 89d82830d5..1265d6d79c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@tailwindcss/forms": "^0.5.7",
         "@tanstack/query-core": "^5.45.0",
         "@tanstack/react-query": "^5.45.1",
+        "@tanstack/react-virtual": "^3.10.7",
         "@types/lodash": "^4.17.10",
         "@uiw/react-md-editor": "^4.0.8",
         "aws-rum-web": "^1.25.0",
@@ -299,7 +300,6 @@
       "version": "7.28.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -933,7 +933,6 @@
     "node_modules/@capacitor/core": {
       "version": "7.4.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -1648,7 +1647,6 @@
     "node_modules/@fortawesome/fontawesome-svg-core": {
       "version": "6.7.2",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.7.2"
       },
@@ -2937,7 +2935,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-11.1.6.tgz",
       "integrity": "sha512-krKwLLcFmeuKDqngG2N/RuZHCs2ycsKcxWIDgcm7i1lf3sQ0iG03ci+DsP/r3FcT/eJDFsIHnKtNta2LIi7PzQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "file-type": "21.0.0",
         "iterare": "1.2.1",
@@ -3158,7 +3155,6 @@
     "node_modules/@noble/ciphers": {
       "version": "1.2.1",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -3403,7 +3399,6 @@
       "version": "1.53.2",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "playwright": "1.53.2"
       },
@@ -3422,7 +3417,6 @@
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -4716,6 +4710,7 @@
       "version": "2.1.1",
       "license": "BSD-3-Clause",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.4.0"
       }
@@ -4980,10 +4975,24 @@
         "benchmarks"
       ]
     },
+    "node_modules/@reown/appkit/node_modules/lit": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.0.tgz",
+      "integrity": "sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@lit/reactive-element": "^2.1.0",
+        "lit-element": "^4.2.0",
+        "lit-html": "^3.3.0"
+      }
+    },
     "node_modules/@reown/appkit/node_modules/lit-element": {
       "version": "4.2.1",
       "license": "BSD-3-Clause",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.4.0",
         "@lit/reactive-element": "^2.1.0",
@@ -4994,6 +5003,7 @@
       "version": "3.3.1",
       "license": "BSD-3-Clause",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -5491,7 +5501,6 @@
     "node_modules/@tanstack/query-core": {
       "version": "5.82.0",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -5500,7 +5509,6 @@
     "node_modules/@tanstack/react-query": {
       "version": "5.82.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.82.0"
       },
@@ -5691,7 +5699,8 @@
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -5876,7 +5885,6 @@
       "version": "20.19.6",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -5902,7 +5910,6 @@
     "node_modules/@types/react": {
       "version": "19.1.4",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -5910,7 +5917,6 @@
     "node_modules/@types/react-dom": {
       "version": "19.1.5",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -6032,7 +6038,6 @@
       "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.45.0",
         "@typescript-eslint/types": "8.45.0",
@@ -7277,7 +7282,6 @@
     "node_modules/@walletconnect/ethereum-provider/node_modules/ws": {
       "version": "8.18.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -7697,7 +7701,6 @@
     "node_modules/@walletconnect/utils/node_modules/ws": {
       "version": "8.18.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -7771,7 +7774,6 @@
       "version": "8.15.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -8195,7 +8197,6 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
       "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -8649,7 +8650,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -8755,7 +8755,6 @@
       "version": "4.0.9",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -8945,7 +8944,6 @@
     "node_modules/chart.js": {
       "version": "4.5.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -9376,7 +9374,6 @@
     "node_modules/cross-fetch": {
       "version": "4.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "node-fetch": "^2.7.0"
       }
@@ -9850,7 +9847,8 @@
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
@@ -10003,7 +10001,6 @@
     "node_modules/eciesjs": {
       "version": "0.4.15",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ecies/ciphers": "^0.2.3",
         "@noble/ciphers": "^1.3.0",
@@ -10103,8 +10100,7 @@
     },
     "node_modules/emoji-mart": {
       "version": "5.6.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -10471,7 +10467,6 @@
       "version": "8.57.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -10627,7 +10622,6 @@
       "version": "2.32.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -11086,8 +11080,7 @@
     },
     "node_modules/eventemitter2": {
       "version": "6.4.9",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/eventemitter3": {
       "version": "5.0.1",
@@ -12399,8 +12392,7 @@
     },
     "node_modules/idb-keyval": {
       "version": "6.2.2",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
@@ -13129,6 +13121,7 @@
     "node_modules/isomorphic.js": {
       "version": "0.2.5",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "GitHub Sponsors ❤",
         "url": "https://github.com/sponsors/dmonad"
@@ -13265,7 +13258,6 @@
       "version": "29.7.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -14495,6 +14487,7 @@
     "node_modules/lib0": {
       "version": "0.2.109",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "isomorphic.js": "^0.2.4"
       },
@@ -14659,6 +14652,7 @@
       "version": "1.5.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -15709,7 +15703,6 @@
       "resolved": "https://registry.npmjs.org/next/-/next-15.5.2.tgz",
       "integrity": "sha512-H8Otr7abj1glFhbGnvUt3gz++0AF1+QoCXEBmd/6aKbfdFwrn0LpA836Ed5+00va/7HQSDD+mOoVhn3tNy3e/Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "15.5.2",
         "@swc/helpers": "0.5.15",
@@ -16847,7 +16840,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -16980,6 +16972,7 @@
       "version": "27.5.1",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -16993,6 +16986,7 @@
       "version": "5.2.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -17046,7 +17040,6 @@
     "node_modules/prop-types": {
       "version": "15.8.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -17361,7 +17354,6 @@
     "node_modules/react": {
       "version": "19.1.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17406,7 +17398,6 @@
     "node_modules/react-dom": {
       "version": "19.1.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -17427,7 +17418,8 @@
     "node_modules/react-is": {
       "version": "17.0.2",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
@@ -17461,7 +17453,6 @@
     "node_modules/react-redux": {
       "version": "9.2.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -17633,7 +17624,6 @@
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -17674,8 +17664,7 @@
     },
     "node_modules/redux": {
       "version": "5.0.1",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -17686,8 +17675,7 @@
     },
     "node_modules/reflect-metadata": {
       "version": "0.2.2",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -18223,7 +18211,6 @@
     "node_modules/rxjs": {
       "version": "7.8.2",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -18308,7 +18295,6 @@
     "node_modules/sass": {
       "version": "1.89.2",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -18706,7 +18692,6 @@
     "node_modules/socket.io-client": {
       "version": "4.8.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.2",
@@ -19378,7 +19363,6 @@
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -19505,8 +19489,7 @@
     },
     "node_modules/three": {
       "version": "0.163.0",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/throttle-debounce": {
       "version": "3.0.1",
@@ -19553,7 +19536,6 @@
       "version": "4.0.2",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -19805,8 +19787,7 @@
     },
     "node_modules/tslib": {
       "version": "2.8.1",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
     },
     "node_modules/tsx": {
       "version": "4.20.6",
@@ -19943,7 +19924,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -20381,7 +20361,6 @@
       "version": "5.0.10",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -20431,7 +20410,6 @@
     "node_modules/valtio": {
       "version": "2.1.5",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "proxy-compare": "^3.0.1"
       },
@@ -20506,7 +20484,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@noble/curves": "1.9.2",
         "@noble/hashes": "1.8.0",
@@ -20616,7 +20593,6 @@
     "node_modules/wagmi": {
       "version": "2.16.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@wagmi/connectors": "5.9.0",
         "@wagmi/core": "2.18.0",
@@ -20783,7 +20759,6 @@
     "node_modules/wagmi/node_modules/@wagmi/core": {
       "version": "2.18.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "eventemitter3": "5.0.1",
         "mipd": "0.0.7",
@@ -20865,7 +20840,6 @@
     "node_modules/wagmi/node_modules/use-sync-external-store": {
       "version": "1.4.0",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -21182,7 +21156,6 @@
     "node_modules/ws": {
       "version": "7.5.10",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8.3.0"
       },
@@ -21303,7 +21276,6 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 9692270db9..892c64facd 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/query-core": "^5.45.0",
     "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-virtual": "^3.10.7",
     "@types/lodash": "^4.17.10",
     "@uiw/react-md-editor": "^4.0.8",
     "aws-rum-web": "^1.25.0",
diff --git a/services/6529api.ts b/services/6529api.ts
index c608e92e60..e7eff7d0d8 100644
--- a/services/6529api.ts
+++ b/services/6529api.ts
@@ -3,19 +3,27 @@ import Cookies from "js-cookie";
 import { API_AUTH_COOKIE } from "@/constants";
 import { getStagingAuth } from "./auth/auth.utils";
 
-export async function fetchUrl(url: string): Promise<DBResponse | any> {
-  let headers = {};
-  const apiAuth = getStagingAuth();
+const isRelativeUrl = (value: string): boolean =>
+  !/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value) && !value.startsWith("//");
+
+export async function fetchUrl<T = DBResponse>(
+  url: string,
+  init?: RequestInit
+): Promise<T> {
+  const baseHeaders = new Headers(init?.headers);
+  const apiAuth = isRelativeUrl(url) ? getStagingAuth() : null;
   if (apiAuth) {
-    headers = { "x-6529-auth": apiAuth };
+    baseHeaders.set("x-6529-auth", apiAuth);
   }
+  const headers = Object.fromEntries(baseHeaders.entries());
   const res = await fetch(url, {
-    headers: headers,
+    ...init,
+    headers,
   });
   if (res.status === 401) {
     Cookies.remove(API_AUTH_COOKIE);
   }
-  return await res.json();
+  return (await res.json()) as T;
 }
 
 export async function fetchAllPages(url: string, data?: any[]): Promise<any[]> {
@@ -23,7 +31,7 @@ export async function fetchAllPages(url: string, data?: any[]): Promise<any[]> {
   if (data) {
     allData = data;
   }
-  const response = await fetchUrl(url);
+  const response = await fetchUrl<DBResponse>(url);
   allData = [...allData].concat(response.data);
   if (response.next) {
     return fetchAllPages(response.next, allData);
@@ -31,19 +39,25 @@ export async function fetchAllPages(url: string, data?: any[]): Promise<any[]> {
   return allData;
 }
 
-export async function postData(url: string, body: any) {
-  let headers: any = {
-    "Content-Type": "application/json",
-  };
-  const apiAuth = getStagingAuth();
+export async function postData(url: string, body: any, init?: RequestInit) {
+  const baseHeaders = new Headers(init?.headers);
+  if (!baseHeaders.has("Content-Type")) {
+    baseHeaders.set("Content-Type", "application/json");
+  }
+  const apiAuth = isRelativeUrl(url) ? getStagingAuth() : null;
   if (apiAuth) {
-    headers = { "x-6529-auth": apiAuth, "Content-Type": "application/json" };
+    baseHeaders.set("x-6529-auth", apiAuth);
   }
+  const headers = Object.fromEntries(baseHeaders.entries());
   const res = await fetch(url, {
+    ...init,
     method: "POST",
     body: JSON.stringify(body),
-    headers: headers,
+    headers,
   });
+  if (res.status === 401) {
+    Cookies.remove(API_AUTH_COOKIE);
+  }
   const json = await res.json();
   return {
     status: res.status,
@@ -53,7 +67,7 @@ export async function postData(url: string, body: any) {
 
 export async function postFormData(url: string, formData: FormData) {
   let headers: any = {};
-  const apiAuth = getStagingAuth();
+  const apiAuth = isRelativeUrl(url) ? getStagingAuth() : null;
   if (apiAuth) {
     headers = { "x-6529-auth": apiAuth };
   }
@@ -62,6 +76,9 @@ export async function postFormData(url: string, formData: FormData) {
     body: formData,
     headers: headers,
   });
+  if (res.status === 401) {
+    Cookies.remove(API_AUTH_COOKIE);
+  }
   const json = await res.json();
   return {
     status: res.status,
diff --git a/services/alchemy-api.ts b/services/alchemy-api.ts
index bbcdaaa8f6..24bf6a6eb0 100644
--- a/services/alchemy-api.ts
+++ b/services/alchemy-api.ts
@@ -1,11 +1,506 @@
 import { publicEnv } from "@/config/env";
+import { isValidEthAddress } from "@/helpers/Helpers";
+import type {
+  ContractOverview,
+  Suggestion,
+  SupportedChain,
+  TokenMetadata,
+} from "@/components/nft-picker/NftPicker.types";
+import { getAddress } from "viem";
 import { goerli, sepolia } from "wagmi/chains";
-import { NEXTGEN_CHAIN_ID } from "@/components/nextGen/nextgen_contracts";
 
-const options = { method: "GET", headers: { accept: "application/json" } };
+import { fetchUrl, postData } from "./6529api";
 
-async function fetchUrl(url: string) {
-  const response = await fetch(url, options);
+type SearchContractsParams = {
+  query: string;
+  chain?: SupportedChain;
+  pageKey?: string;
+  hideSpam?: boolean;
+  signal?: AbortSignal;
+};
+
+type SearchContractsResult = {
+  items: Suggestion[];
+  hiddenCount: number;
+  nextPageKey?: string;
+};
+
+type ContractOverviewParams = {
+  address: `0x${string}`;
+  chain?: SupportedChain;
+  signal?: AbortSignal;
+};
+
+type TokenMetadataParams = {
+  address: `0x${string}`;
+  tokenIds: readonly string[];
+  chain?: SupportedChain;
+  signal?: AbortSignal;
+};
+
+type AlchemyContractResult = {
+  address?: string;
+  contractAddress?: string;
+  contractDeployer?: string | null;
+  isSpam?: boolean;
+  spamInfo?: { isSpam?: boolean };
+  spamClassifications?: string[] | null;
+  contractMetadata?: AlchemyContractMetadata;
+  openSeaMetadata?: AlchemyOpenSeaMetadata;
+  openseaMetadata?: AlchemyOpenSeaMetadata;
+} & AlchemyContractMetadata;
+
+type AlchemyContractMetadata = {
+  address?: string | null;
+  name?: string | null;
+  symbol?: string | null;
+  tokenType?: string | null;
+  totalSupply?: string | null;
+  image?: { cachedUrl?: string | null; thumbnailUrl?: string | null } | null;
+  bannerImageUrl?: string | null;
+  description?: string | null;
+  contractDeployer?: string | null;
+  openSeaMetadata?: AlchemyOpenSeaMetadata;
+  openseaMetadata?: AlchemyOpenSeaMetadata;
+  openSea?: AlchemyOpenSeaMetadata;
+  opensea?: AlchemyOpenSeaMetadata;
+  isSpam?: boolean;
+  spamInfo?: { isSpam?: boolean };
+};
+
+type AlchemyOpenSeaMetadata = {
+  imageUrl?: string | null;
+  bannerImageUrl?: string | null;
+  collectionName?: string | null;
+  safelistRequestStatus?: string | null;
+  floorPrice?: number | { eth?: number | string | null } | null;
+  description?: string | null;
+};
+
+type AlchemySearchResponse = {
+  contracts?: AlchemyContractResult[];
+  pageKey?: string;
+};
+
+type AlchemyContractMetadataResponse = {
+  contractMetadata?: AlchemyContractMetadata;
+  openSeaMetadata?: AlchemyOpenSeaMetadata;
+  openseaMetadata?: AlchemyOpenSeaMetadata;
+  address?: string;
+  contractAddress?: string;
+  isSpam?: boolean;
+};
+
+type AlchemyTokenMetadataEntry = {
+  tokenId?: string;
+  tokenType?: string | null;
+  title?: string | null;
+  name?: string | null;
+  description?: string | null;
+  image?: {
+    cachedUrl?: string | null;
+    thumbnailUrl?: string | null;
+    originalUrl?: string | null;
+  } | null;
+  media?: {
+    gateway?: string | null;
+    thumbnailUrl?: string | null;
+    raw?: string | null;
+  }[] | null;
+  metadata?: { image?: string | null; name?: string | null } | null;
+  raw?: { metadata?: { image?: string | null; name?: string | null } } | null;
+  isSpam?: boolean;
+  spamInfo?: { isSpam?: boolean } | null;
+};
+
+type AlchemyTokenMetadataResponse = {
+  tokens?: AlchemyTokenMetadataEntry[];
+  nfts?: AlchemyTokenMetadataEntry[];
+};
+
+const NETWORK_MAP: Record<SupportedChain, string> = {
+  ethereum: "eth-mainnet",
+};
+
+const MAX_BATCH_SIZE = 100;
+const MAX_GET_NFTS_RETRIES = 3;
+
+function resolveNetwork(chain: SupportedChain = "ethereum"): string {
+  return NETWORK_MAP[chain] ?? NETWORK_MAP.ethereum;
+}
+
+function ensureQuery(query: string): string {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    throw new Error("Query must not be empty");
+  }
+  return trimmed;
+}
+
+function toSafelist(
+  status: string | null | undefined
+): Suggestion["safelist"] {
+  if (!status) {
+    return undefined;
+  }
+  if (
+    status === "verified" ||
+    status === "approved" ||
+    status === "requested" ||
+    status === "not_requested"
+  ) {
+    return status;
+  }
+  return undefined;
+}
+
+function parseFloorPrice(meta: AlchemyOpenSeaMetadata | undefined): number | null {
+  if (!meta) {
+    return null;
+  }
+  const { floorPrice } = meta;
+  if (typeof floorPrice === "number") {
+    return floorPrice;
+  }
+  if (floorPrice && typeof floorPrice === "object") {
+    const candidate = floorPrice.eth;
+    if (typeof candidate === "number") {
+      return candidate;
+    }
+    if (typeof candidate === "string") {
+      const parsed = Number(candidate);
+      return Number.isFinite(parsed) ? parsed : null;
+    }
+  }
+  return null;
+}
+
+function pickImage(source?: {
+  image?: { cachedUrl?: string | null; thumbnailUrl?: string | null } | null;
+  imageUrl?: string | null;
+  media?: { thumbnailUrl?: string | null; gateway?: string | null }[] | null;
+}): string | null {
+  if (!source) {
+    return null;
+  }
+  if (source.imageUrl) {
+    return source.imageUrl;
+  }
+  if (source.image?.cachedUrl) {
+    return source.image.cachedUrl;
+  }
+  if (source.image?.thumbnailUrl) {
+    return source.image.thumbnailUrl;
+  }
+  if (source.media && source.media.length > 0) {
+    const mediaItem = source.media.find((item) => item?.thumbnailUrl) ??
+      source.media[0];
+    if (mediaItem?.thumbnailUrl) {
+      return mediaItem.thumbnailUrl;
+    }
+    if (mediaItem?.gateway) {
+      return mediaItem.gateway;
+    }
+  }
+  return null;
+}
+
+function pickThumbnail(source?: {
+  image?: { thumbnailUrl?: string | null } | null;
+  media?: { thumbnailUrl?: string | null }[] | null;
+}): string | null {
+  if (!source) {
+    return null;
+  }
+  if (source.image?.thumbnailUrl) {
+    return source.image.thumbnailUrl;
+  }
+  if (source.media && source.media.length > 0) {
+    const mediaItem = source.media.find((item) => item?.thumbnailUrl) ??
+      source.media[0];
+    if (mediaItem?.thumbnailUrl) {
+      return mediaItem.thumbnailUrl;
+    }
+  }
+  return null;
+}
+
+function normaliseAddress(address?: string | null): `0x${string}` | null {
+  if (!address) {
+    return null;
+  }
+  if (!isValidEthAddress(address)) {
+    return null;
+  }
+  try {
+    return getAddress(address);
+  } catch (error) {
+    console.warn("Failed to checksum address", address, error);
+    return address as `0x${string}`;
+  }
+}
+
+function extractContract(contract: AlchemyContractResult): Suggestion | null {
+  const baseMeta = contract.contractMetadata ?? contract;
+  const openSea =
+    contract.openSeaMetadata ??
+    contract.openseaMetadata ??
+    baseMeta.openSeaMetadata ??
+    baseMeta.openseaMetadata ??
+    baseMeta.openSea ??
+    baseMeta.opensea;
+  const address =
+    normaliseAddress(contract.address ?? contract.contractAddress) ??
+    normaliseAddress(baseMeta.address);
+  if (!address) {
+    return null;
+  }
+  const name = baseMeta.name ?? openSea?.collectionName ?? undefined;
+  const totalSupply = baseMeta.totalSupply ?? undefined;
+  const tokenType = baseMeta.tokenType?.toUpperCase() as
+    | "ERC721"
+    | "ERC1155"
+    | undefined;
+  const imageUrl = pickImage({
+    imageUrl: openSea?.imageUrl ?? undefined,
+    image: baseMeta.image,
+  });
+  const isSpam =
+    contract.isSpam ??
+    contract.spamInfo?.isSpam ??
+    baseMeta.isSpam ??
+    baseMeta.spamInfo?.isSpam ??
+    false;
+  const safelist = toSafelist(openSea?.safelistRequestStatus ?? null);
+  const floorPriceEth = parseFloorPrice(openSea ?? undefined);
+  const deployer = normaliseAddress(
+    contract.contractDeployer ?? baseMeta.contractDeployer ?? null
+  );
+
+  return {
+    address,
+    name: name ?? undefined,
+    symbol: baseMeta.symbol ?? undefined,
+    tokenType,
+    totalSupply: totalSupply ?? undefined,
+    floorPriceEth,
+    imageUrl: imageUrl ?? null,
+    isSpam: isSpam ?? false,
+    safelist,
+    deployer: deployer ?? null,
+  };
+}
+
+export async function searchNftCollections(
+  params: SearchContractsParams
+): Promise<SearchContractsResult> {
+  const { query, chain = "ethereum", pageKey, hideSpam = true, signal } = params;
+  const trimmed = ensureQuery(query);
+  const network = resolveNetwork(chain);
+  const url = new URL(
+    `https://${network}.g.alchemy.com/nft/v3/${publicEnv.ALCHEMY_API_KEY}/searchContractMetadata`
+  );
+  url.searchParams.set("query", trimmed);
+  if (pageKey) {
+    url.searchParams.set("pageKey", pageKey);
+  }
+  const response = await fetchUrl<AlchemySearchResponse | undefined>(
+    url.toString(),
+    { signal }
+  );
+  const contracts = response?.contracts ?? [];
+  const suggestions = contracts
+    .map((contract) => extractContract(contract))
+    .filter((suggestion): suggestion is Suggestion => suggestion !== null);
+  const hiddenCount = hideSpam
+    ? suggestions.filter((suggestion) => suggestion.isSpam).length
+    : 0;
+  const visibleItems = hideSpam
+    ? suggestions.filter((suggestion) => !suggestion.isSpam)
+    : suggestions;
+  return {
+    items: visibleItems,
+    hiddenCount,
+    nextPageKey: response?.pageKey,
+  };
+}
+
+export async function getContractOverview(
+  params: ContractOverviewParams
+): Promise<ContractOverview | null> {
+  const { address, chain = "ethereum", signal } = params;
+  if (!isValidEthAddress(address)) {
+    throw new Error("Invalid contract address");
+  }
+  const checksum = normaliseAddress(address);
+  if (!checksum) {
+    return null;
+  }
+  const network = resolveNetwork(chain);
+  const url = `https://${network}.g.alchemy.com/nft/v3/${publicEnv.ALCHEMY_API_KEY}/getContractMetadata?contractAddress=${checksum}`;
+  const response = await fetchUrl<AlchemyContractMetadataResponse | undefined>(
+    url,
+    { signal }
+  );
+  if (!response) {
+    return null;
+  }
+  const contract: AlchemyContractResult = {
+    ...response.contractMetadata,
+    contractMetadata: response.contractMetadata,
+    address: checksum,
+    contractAddress: checksum,
+    openSeaMetadata: response.openSeaMetadata ?? response.openseaMetadata,
+    openseaMetadata: response.openseaMetadata ?? response.openSeaMetadata,
+    isSpam:
+      response.isSpam ??
+      response.contractMetadata?.isSpam ??
+      response.contractMetadata?.spamInfo?.isSpam,
+  };
+  const suggestion = extractContract(contract);
+  if (!suggestion) {
+    return null;
+  }
+  const openSea =
+    response.openSeaMetadata ??
+    response.openseaMetadata ??
+    response.contractMetadata?.openSeaMetadata ??
+    response.contractMetadata?.openseaMetadata ??
+    response.contractMetadata?.openSea ??
+    response.contractMetadata?.opensea;
+  return {
+    ...suggestion,
+    description: openSea?.description ?? null,
+    bannerImageUrl: openSea?.bannerImageUrl ?? null,
+  };
+}
+
+function parseTokenIdToBigint(tokenId: string): bigint {
+  if (!tokenId) {
+    throw new Error("Token ID missing");
+  }
+  const trimmed = tokenId.trim();
+  if (trimmed.startsWith("0x") || trimmed.startsWith("0X")) {
+    return BigInt(trimmed);
+  }
+  return BigInt(trimmed);
+}
+
+function normaliseTokenMetadata(
+  token: AlchemyTokenMetadataEntry
+): TokenMetadata | null {
+  const tokenIdRaw = token.tokenId ?? "";
+  try {
+    const tokenId = parseTokenIdToBigint(tokenIdRaw);
+    const imageUrl = pickThumbnail({
+      image: token.image ?? undefined,
+      media: token.media ?? undefined,
+    });
+    return {
+      tokenId,
+      tokenIdRaw,
+      name:
+        token.title ??
+        token.name ??
+        token.metadata?.name ??
+        token.raw?.metadata?.name ??
+        null,
+      imageUrl,
+      isSpam: token.isSpam ?? token.spamInfo?.isSpam ?? false,
+    };
+  } catch (error) {
+    console.warn("Failed to parse token metadata", tokenIdRaw, error);
+    return null;
+  }
+}
+
+export async function getTokensMetadata(
+  params: TokenMetadataParams
+): Promise<TokenMetadata[]> {
+  const { address, tokenIds, chain = "ethereum", signal } = params;
+  if (!tokenIds.length) {
+    return [];
+  }
+  if (!isValidEthAddress(address)) {
+    throw new Error("Invalid contract address");
+  }
+  const checksum = normaliseAddress(address);
+  if (!checksum) {
+    return [];
+  }
+  const network = resolveNetwork(chain);
+  const url = `https://${network}.g.alchemy.com/nft/v3/${publicEnv.ALCHEMY_API_KEY}/getNFTMetadataBatch`;
+  const results: TokenMetadata[] = [];
+  for (let i = 0; i < tokenIds.length; i += MAX_BATCH_SIZE) {
+    const slice = tokenIds.slice(i, i + MAX_BATCH_SIZE);
+    const body = {
+      tokens: slice.map((tokenId) => ({
+        contractAddress: checksum,
+        tokenId,
+      })),
+    };
+    const { status, response } = await postData(url, body, { signal });
+    if (status >= 400) {
+      throw new Error("Failed to fetch token metadata");
+    }
+    const payload = response as AlchemyTokenMetadataResponse;
+    const tokens = payload.tokens ?? payload.nfts ?? [];
+    for (const token of tokens) {
+      const normalised = normaliseTokenMetadata(token);
+      if (normalised) {
+        results.push(normalised);
+      }
+    }
+  }
+  return results;
+}
+
+const legacyOptions = { method: "GET", headers: { accept: "application/json" } };
+
+function createAbortError(signal: AbortSignal): Error {
+  if (signal.reason instanceof Error) {
+    return signal.reason;
+  }
+  if (typeof DOMException === "function") {
+    return new DOMException("The operation was aborted.", "AbortError");
+  }
+  const error = new Error("The operation was aborted.");
+  (error as Error & { name: string }).name = "AbortError";
+  return error;
+}
+
+function delayWithAbort(ms: number, signal?: AbortSignal): Promise<void> {
+  if (ms <= 0) {
+    return Promise.resolve();
+  }
+  if (!signal) {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  }
+  if (signal.aborted) {
+    return Promise.reject(createAbortError(signal));
+  }
+
+  return new Promise((resolve, reject) => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    const onAbort = () => {
+      clearTimeout(timeoutId);
+      signal.removeEventListener("abort", onAbort);
+      reject(createAbortError(signal));
+    };
+
+    timeoutId = setTimeout(() => {
+      signal.removeEventListener("abort", onAbort);
+      resolve();
+    }, ms);
+
+    signal.addEventListener("abort", onAbort, { once: true });
+  });
+}
+
+async function fetchLegacyUrl(url: string, signal?: AbortSignal) {
+  const response = await fetch(url, { ...legacyOptions, signal });
   return await response.json();
 }
 
@@ -14,7 +509,9 @@ export async function getNftsForContractAndOwner(
   contract: string,
   owner: string,
   nfts?: any[],
-  pageKey?: string
+  pageKey?: string,
+  retries = 0,
+  signal?: AbortSignal
 ) {
   if (!nfts) {
     nfts = [];
@@ -30,18 +527,32 @@ export async function getNftsForContractAndOwner(
   if (pageKey) {
     url += `&pageKey=${pageKey}`;
   }
-  const response = await fetchUrl(url);
+  const response = await fetchLegacyUrl(url, signal);
   if (response.error) {
-    return getNftsForContractAndOwner(chainId, contract, owner, nfts, pageKey);
+    if (retries >= MAX_GET_NFTS_RETRIES) {
+      throw new Error("Failed to fetch NFTs for owner after retries");
+    }
+    await delayWithAbort(250 * (retries + 1), signal);
+    return getNftsForContractAndOwner(
+      chainId,
+      contract,
+      owner,
+      nfts,
+      pageKey,
+      retries + 1,
+      signal
+    );
   }
   nfts = [...nfts].concat(response.ownedNfts);
   if (response.pageKey) {
     return getNftsForContractAndOwner(
-      NEXTGEN_CHAIN_ID,
+      chainId,
       contract,
       owner,
       nfts,
-      response.pageKey
+      response.pageKey,
+      retries,
+      signal
     );
   }
 
@@ -56,3 +567,5 @@ export async function getNftsForContractAndOwner(
   });
   return allNfts;
 }
+
+export type { SearchContractsParams, SearchContractsResult, TokenMetadataParams };
diff --git a/spec.md b/spec.md
new file mode 100644
index 0000000000..1d4f51ae49
--- /dev/null
+++ b/spec.md
@@ -0,0 +1,589 @@
+
+# NFT Picker — Full Implementation Spec
+
+**Goal**
+Reusable, accessible component to select either:
+
+* **a single NFT**, or
+* **a bucket** of NFTs by manually entered token IDs and/or ranges, or
+* **“All”** tokens for a contract (represented by an empty list of IDs).
+
+**Output (contract-scoped):**
+
+```ts
+export type NftPickerSelection =
+  | {
+      contractAddress: `0x${string}`;
+      outputMode: 'number';
+      tokenIds: number[]; // empty = all
+      tokenIdsRaw: bigint[]; // mirrors tokenIds as bigint for consistency
+    }
+  | {
+      contractAddress: `0x${string}`;
+      outputMode: 'bigint';
+      tokenIds: string[]; // decimal strings, empty = all (JSON/logger friendly)
+      tokenIdsRaw: bigint[]; // exact values, preserves >MAX_SAFE_INTEGER IDs
+    };
+```
+
+> Internally we use `bigint` for token IDs (IDs can exceed JS safe integers). See **Output modes & bigint**.
+
+**Tech**: Next.js 15 (App Router), TypeScript, Tailwind CSS 3.4 with `tw-` prefix, existing Alchemy REST wrapper in `services/alchemy-api.ts` (uses `config/env.schema.ts:28` `ALCHEMY_API_KEY`), virtualization built with `@tanstack/react-virtual` for token rows (legacy `hooks/useVirtualizedWaves.ts` still power suggestion lists elsewhere), responsive via **container queries** (Tailwind plugin). Multi‑chain design, but **initial chain = Ethereum**.
+
+---
+
+## 0) Key UX/Behavior
+
+1. A **single input (combobox)** where the user types **collection name or contract address**.
+
+   * Autocomplete suggestions show **thumbnail**, **name**, **short address**, **token type (ERC‑721/1155)** pills, **supply**, and **floor** (compact).
+   * Scam-prevention signals (flagged/spam, OpenSea safelist status) are surfaced to help users avoid scams (see **Scam prevention**).
+   * Keyboard (↑/↓/Enter/Esc) and mouse support.
+
+2. After a contract is selected, the header shows **selected collection** (avatar + name + address + standard + supply + floor). Clear/change contract via a button.
+
+3. Picker **mode**:
+
+   * **Single**: enter a specific token ID; add to list.
+   * **Bucket**: enter **IDs and ranges** (e.g., `1,2,4-6,8,0x1A-0x1F`), add/merge; list is virtualized with thumbnails fetched on demand.
+   * **All**: choose “All tokens in this contract” → `tokenIds=[]`.
+
+4. The **selected tokens** area:
+
+   * Always shows a **canonical, compact representation** like `1,2,4-6,8-14,51,89-398`.
+   * Users can **toggle “Edit as text”** to edit the canonical string directly. Editing **either** the chips/list **or** the canonical text **keeps them in sync**.
+   * Each chip/list row has a remove button; ranges can be edited as ranges (not just by removing items one-by-one).
+   * Virtual scrolling for long lists; **lazy-load** NFT thumbnails/metadata only for visible rows.
+
+5. **No submit button**. Every change emits `onChange(...)` to the parent (contract selection or token list changes).
+
+6. **Responsive everywhere** using **container queries** so the component can drop into narrow sidebars or full-width modals. Works in Capacitor (mobile).
+
+---
+
+## 1) External APIs & Docs (authoritative)
+
+* **Search collections by name / contract keywords**: `searchContractMetadata` (v3) returns `address`, `name`, `tokenType`, `totalSupply`, and `openseaMetadata` (incl. `floorPrice`) — supports ETH, Polygon, Arbitrum, Optimism, Base. Wrap via helpers in `services/alchemy-api.ts`. ([Alchemy][1])
+* **Contract NFTs listing** (for preview / on-demand metadata): `getNFTsForContract` with pagination and optional metadata (also returns spam flags on the `contract`). Extend `services/alchemy-api.ts` to expose paginated helpers. ([Alchemy][2])
+* **Single token metadata**: `getNFTMetadata` (v3). Use for precise token rows on demand; add REST calls under `services/alchemy-api.ts`. ([Alchemy][3])
+* **Batch token metadata**: `getNFTMetadataBatch` (v3) for viewport prefetch, keeping fetch logic in `services/alchemy-api.ts`. ([Alchemy][4])
+* **Floor price** by marketplace: `getFloorPrice` (REST) is optional; fall back to `openseaMetadata.floorPrice`. No SDK import. ([Alchemy][5])
+* **Spam detection** (hide spam by default): Alchemy exposes spam detection (`isSpam`/`spamClassifications`). Surface results already returned from REST calls. ([Alchemy][2])
+* **Tailwind container queries** (v3 requires plugin; use `tw-@container` & `@md:` variants with prefix). ([GitHub][7])
+
+---
+
+## 2) Project Structure (suggested)
+
+```text
+/components/nft-picker/
+  NftPicker.tsx                // client component (combobox + modes + selected list)
+  NftPicker.types.ts           // exported types
+  NftPicker.utils.ts           // parsing, formatting, ranges, bigint-safe helpers
+  NftContractHeader.tsx        // shows selected contract summary
+  NftSuggestList.tsx           // virtualized suggestion list
+  NftTokenList.tsx             // virtualized selected tokens list
+  NftEditRanges.tsx            // "Edit as text" + parser/formatter
+  useAlchemyClient.ts          // hook wrapping helpers in `services/alchemy-api.ts`
+/services/alchemy-api.ts       // extend with search/metadata helpers
+/services/6529api.ts           // reuse existing fetch helpers
+```
+
+> **Security**: keep Alchemy requests centralized in `services/alchemy-api.ts` so the API key stays in one place (no new Next.js API routes required).
+
+---
+
+## 3) Tailwind & Responsiveness
+
+* Tailwind 3.4 with prefix `tw-` in `tailwind.config.js`:
+
+  ```js
+  module.exports = {
+    prefix: 'tw-',
+    plugins: [require('@tailwindcss/container-queries')],
+  }
+  ```
+* Mark containers with `tw-@container`. With prefixing, **you must prefix the container class and any utilities** inside container queries:
+
+  ```jsx
+  <div className="tw-@container tw-w-full tw-rounded-lg tw-border tw-border-iron-800 tw-bg-iron-900">
+    <div className="tw-flex tw-flex-col @md:tw-flex-row">
+      ...
+    </div>
+  </div>
+  ```
+
+  (Tailwind’s plugin docs explicitly note prefixing both `@container` and container‑query variants.) ([GitHub][7])
+
+---
+
+## 4) Types
+
+```ts
+// NftPicker.types.ts
+import type { ReactNode } from 'react';
+
+export type SupportedChain =
+  | 'ethereum'; // extend later: 'polygon' | 'arbitrum' | 'optimism' | 'base'
+
+export type OutputMode = 'number' | 'bigint'; // default 'number' to match your output contract
+
+export type TokenRange = { start: bigint; end: bigint }; // inclusive
+export type TokenSelection = bigint[]; // deduped
+
+export type NftPickerSelection =
+  | {
+      contractAddress: `0x${string}`;
+      outputMode: 'number';
+      tokenIds: number[]; // empty = all
+      tokenIdsRaw: bigint[]; // bigint mirror for parity/testing
+    }
+  | {
+      contractAddress: `0x${string}`;
+      outputMode: 'bigint';
+      tokenIds: string[]; // decimal strings, empty = all
+      tokenIdsRaw: bigint[]; // exact bigints preserve unsafe IDs
+    };
+
+export type NftPickerValue = {
+  chain: SupportedChain;
+  contractAddress?: `0x${string}`;
+  // if 'all' => selectedIds can be empty and allSelected=true
+  selectedIds: TokenSelection; // internal as bigint[]
+  allSelected: boolean;
+};
+
+export type Suggestion = {
+  address: `0x${string}`;
+  name?: string;
+  symbol?: string;
+  tokenType?: 'ERC721' | 'ERC1155';
+  totalSupply?: string; // from API
+  floorPriceEth?: number | null;
+  imageUrl?: string | null;
+  isSpam?: boolean;
+  safelist?: 'verified' | 'approved' | 'requested' | 'not_requested' | undefined;
+  deployer?: `0x${string}` | null;
+};
+
+export type ContractOverview = Suggestion & {
+  description?: string | null;
+  bannerImageUrl?: string | null;
+};
+
+export type TokenMetadata = {
+  tokenId: bigint;
+  tokenIdRaw: string;
+  name?: string | null;
+  imageUrl?: string | null;
+  isSpam?: boolean;
+};
+
+export type NftPickerProps = {
+  value?: NftPickerValue; // controlled
+  defaultValue?: Partial<NftPickerValue>;
+  onChange: (output: NftPickerSelection | null) => void;
+  onContractChange?: (meta: ContractOverview | null) => void;
+
+  // data / behavior
+  chain?: SupportedChain;                // default 'ethereum'
+  outputMode?: OutputMode;               // default 'number' — see bigint notes
+  hideSpam?: boolean;                    // default true
+  allowAll?: boolean;                    // default true
+  allowRanges?: boolean;                 // default true
+  debounceMs?: number;                   // default 250
+  overscan?: number;                     // default 8
+
+  // customization
+  placeholder?: string;
+  className?: string;
+  renderTokenExtra?: (tokenId: bigint, metadata?: TokenMetadata) => ReactNode; // optional trailing info per row
+};
+```
+
+---
+
+## 5) Parsing & Canonicalization (IDs & Ranges)
+
+### Accepted input
+
+* Comma/space separated tokens and ranges:
+  `1, 2, 5-12, 18, 0x1A-0x1F`
+* Decimal or Hex (`0x…`) per endpoint behavior.
+* No quantities for ERC‑1155 (each tokenId is unique ID, not amount).
+
+### Rules
+
+* **Convert to `bigint`** internally.
+* Validate **non-negative**; forbid leading `+`/`-`.
+* Ranges are **inclusive**; if `start > end` → swap and warn in UI.
+* Deduplicate and **merge contiguous** ranges (1,2,3 → 1‑3).
+* A canonical string is generated from merged ranges, **sorted asc**:
+
+  * singletons as `X`, ranges as `A-B`, joined by commas.
+
+### Helpers (implement in `NftPicker.utils.ts`)
+
+```ts
+export function parseTokenExpressionToBigints(input: string): bigint[]; // throws ParseError[]
+export function sortAndDedupIds(ids: bigint[]): bigint[]; // returns sorted unique ids
+export function toCanonicalRanges(ids: bigint[]): TokenRange[]; // merged range model
+export function fromCanonicalRanges(ranges: TokenRange[]): bigint[]; // expand
+export function formatCanonical(ranges: TokenRange[]): string; // e.g., "1,2,4-6,8-14"
+export function tryToNumberArray(ids: bigint[]): { numbers: number[]; unsafeCount: number };
+export function bigintCompare(a: bigint, b: bigint): number;
+export const MAX_SAFE = BigInt(Number.MAX_SAFE_INTEGER);
+```
+
+> **Performance**: For very large ranges (e.g., `0-100_000`), **do not expand** for rendering. Keep both forms:
+>
+> * `ranges: TokenRange[]` (sources of truth for editing as ranges/text)
+> * `ids: bigint[]` only if you actually need enumeration (e.g., to preview visible rows). Use a **windowed expansion** function for virtual rows to avoid allocating huge arrays.
+
+---
+
+## 6) Component Anatomy
+
+### 6.1 Combobox (Search)
+
+* **Input** with `role="combobox"` + `aria-controls`, `aria-expanded`, `aria-activedescendant`.
+* Debounced query (default 250ms) → call `searchContractMetadata` helper exposed from `services/alchemy-api.ts` via `useAlchemyClient` (wrap in `@tanstack/react-query`).
+* If input matches **valid address**, bypass search and fetch contract metadata with an address helper (re-use `isValidEthAddress` from `helpers/Helpers.ts:218`).
+* **Suggestion rows** (virtualized when > ~12 results) show:
+
+  * 32px image (from `openseaMetadata.imageUrl` or fallback), name, short address, `ERC721`/`ERC1155` pill, supply, floor (Ξ) small; optional verified check; spam warning.
+* **Keyboard**: ↑/↓ to move, Enter to select, Esc to close, Tab moves focus.
+* **Mouse**: hover highlights, click selects.
+
+#### API specifics
+
+* Search uses **`searchContractMetadata`** (v3). Pull: `address`, `name`, `tokenType`, `totalSupply`, `openseaMetadata.floorPrice`, `openseaMetadata.safelistRequestStatus`, `openseaMetadata.imageUrl`. ([Alchemy][1])
+* For **floor**, optionally call `getFloorPrice` (SDK) for more marketplaces and fallback to OpenSea’s value. Cache per address (stale 5 min). ([Alchemy][5])
+* **Spam**: If `contract.isSpam` or spam classifications present, mark as “⚠️ Suspected spam” and **hide** by default (`hideSpam=true`). Allow “Show anyway” affordance. (Spam fields appear in contract metadata responses; Alchemy also documents spam detection and filtering.) ([Alchemy][2]) Keep the data path confined to `services/alchemy-api.ts`.
+
+### 6.2 Selected Contract Header
+
+* Displays thumbnail, name, checksummed address, standard, supply and floor.
+* Actions: **Change** (re-opens combobox), **Clear** (resets component state).
+* Layout: row on wide containers, column on narrow (container queries).
+
+### 6.3 Mode Switch
+
+Tabs or segmented control:
+
+* **Single** | **Bucket** | **All** (if `allowAll`)
+* `tw-@container` responsive layout to keep compact on narrow parents.
+
+### 6.4 Single Mode
+
+* Small input for **one token ID** + **Add** button.
+* Validation inline. On add → appears in selected list (deduped).
+
+### 6.5 Bucket Mode
+
+* “Add tokens or ranges” input + **Add**.
+* Below input:
+
+  * **Canonical summary** (always visible): `tokens: 1,2,4-6,...` (truncate with horizontal scroll if needed).
+  * **“Edit as text”** toggle → textarea with canonical string. When confirmed, reparses and diffs set.
+* **Selected tokens list** (virtualized):
+
+  * Each row shows: **thumbnail**, **#tokenId**, optional token name, and a **Remove** button.
+  * Clicking a **range badge** opens an **inline editor** (start/end inputs). Save merges/dedupes.
+* **Data fetch**: **lazy** token metadata per visible window using `getNFTMetadataBatch` on demand; image uses `image.thumbnailUrl/cachedUrl`. ([Alchemy][4])
+
+### 6.6 All Mode
+
+* Shows clear “All tokens in this contract are selected.”
+* Emit empty arrays for both `tokenIds` and `tokenIdsRaw` (numbers in `'number'` mode, decimal strings in `'bigint'`).
+
+---
+
+## 7) Output modes & bigint
+
+* **Internal**: `bigint` for IDs.
+* **Prop** `outputMode?: 'number' | 'bigint'` (default `'number'` to match downstream contracts).
+
+  * If `'number'`: We **only emit safe integers** (`<= Number.MAX_SAFE_INTEGER`). If an unsafe ID is present, display an inline error **and do not emit changes** until resolved; suggest switching to `'bigint'`. `tokenIdsRaw` still mirrors the selection as `bigint[]` for parity/testing.
+  * If `'bigint'`: We emit `{ contractAddress, outputMode: 'bigint', tokenIds: string[], tokenIdsRaw: bigint[] }`. `tokenIds` contains decimal strings (stable for JSON/logging). `tokenIdsRaw` carries the exact `bigint[]` so **no IDs are dropped**—unsafe integers stay intact. When any ID exceeds `Number.MAX_SAFE_INTEGER`, also fire a `console.warn` explaining that the decimal strings are advisory and consumers should rely on `tokenIdsRaw` for precision.
+
+* **“All”** always emits an empty array for both `tokenIds` and `tokenIdsRaw`.
+
+---
+
+## 8) Accessibility
+
+* Combobox follows WAI‑ARIA pattern: `role="combobox"` + `role="listbox"`/`role="option"`, `aria-selected`, `aria-activedescendant`.
+* Roving tabindex in token list; **Remove** buttons are accessible (aria‑label includes the tokenId).
+* Live regions (`aria-live="polite"`) for validation and async feedback (“Fetching contract…”, “No results”, “Spam filtered: N hidden”).
+* Hit target ≥ 44px on touch (Capacitor).
+* Color contrast ≥ 4.5:1 for text, ≥ 3:1 for UI.
+
+---
+
+## 9) Keyboard interactions
+
+* Input: ↑/↓ open & move; Enter select; Esc clear/close suggestions.
+* Token list: ↑/↓ moves focus between rows; Delete removes focused token; Enter opens range editor for range items.
+* “Edit as text” textarea: Ctrl+Enter (or Cmd+Enter) to apply.
+
+---
+
+## 10) Virtualization
+
+* Selected-token rows are virtualized with `useVirtualizer` from `@tanstack/react-virtual`; set `count`, `estimateSize: () => 72`, and wire `getScrollElement` to the scroll container ref.
+* Default overscan remains `8` (configurable via prop) so behaviour matches the rest of the app.
+* Persist scroll restoration through `ScrollPositionContext` by supplying `initialOffset` on `useVirtualizer` and updating the context on scroll events.
+* Use the virtual window to decide when to request metadata and cancel outstanding work when items leave the window (the same abort-handling patterns still apply).
+
+---
+
+## 11) Data fetching & services
+
+> Keep network access inside the existing REST helpers so credentials and retry logic stay centralized.
+
+* Extend `services/alchemy-api.ts` with typed helpers for collection search, contract metadata, and batched token metadata. Follow the patterns already used in `getNftsForContractAndOwner` (respecting pagination via `pageKey`).
+* Normalise responses with types from `components/rememes/alchemy-sdk-types.ts`; expose only the fields the picker needs (address, token type, supply, safelist, spam flags, thumbnails, etc.).
+* Reuse fetch utilities in `services/6529api.ts` / `commonApiFetchWithRetry` for consistent headers (staging auth, wallet auth) and error handling.
+* `useAlchemyClient.ts` should map these helpers into `@tanstack/react-query` hooks (standardised cache keys, retries, cancellation via AbortController).
+* Continue reading the `ALCHEMY_API_KEY` from `publicEnv` (`config/env.schema.ts:28`)—no new server routes required, but avoid exposing raw responses beyond what the UI consumes.
+
+---
+
+## 12) Client Implementation Details
+
+### 12.1 NftPicker.tsx (client)
+
+* `use client`
+* Local state:
+
+  * `query`, `isOpen`, `activeIndex` for combobox.
+  * `selectedContract` (Suggestion | null).
+  * `mode`: `'single' | 'bucket' | 'all'`.
+  * `ranges: TokenRange[]`, `idsVisibleWindow: bigint[]` (optional if using windowed expansion).
+* Effects:
+
+  * Debounced search → issue `useQuery` calls backed by `services/alchemy-api.ts` helpers (wrap with `react-use`'s `useDebounce`).
+  * On `selectedContract` change: reset selection; fire `onContractChange`.
+  * On any selection change: **emit to parent** using `emitSelection()` (see Output modes).
+* Accessibility attributes update as ARIA spec.
+
+### 12.2 Suggestions (NftSuggestList.tsx)
+
+* Receives `items: Suggestion[]`, `activeIndex`, `onHover`, `onClick`.
+* Reuse virtualization helpers from `hooks/useVirtualizedWaves.ts` (or extract shared util) if `items.length > 12`. Row content shows compact pills:
+
+  * `ERC721`/`ERC1155`.
+  * Floor: `Ξ1.23` or `—`.
+  * Supply: short format (e.g., `10k`).
+  * Safelist: green check (verified/approved).
+  * Spam: yellow shield (hidden if `hideSpam` true; toggle).
+
+### 12.3 Selected list (NftTokenList.tsx)
+
+* Input area for Single/Bucket + canonical summary + “Edit as text” toggle.
+* Virtualized rows come from `useVirtualizer` (`@tanstack/react-virtual`). Render `virtualizer.getVirtualItems()` inside a container sized via `virtualizer.getTotalSize()` and position rows with `transform: translateY(virtualItem.start)`.
+
+  * 40px image (lazy), tokenId badge, optional name (ellipsize), remove button.
+* Use `expandRangesWindow` to convert the visible indices into token IDs and feed that window into the batched metadata query (cached via `@tanstack/react-query`).
+
+---
+
+## 13) Styling (Tailwind w/ `tw-` prefix)
+
+* Root: `tw-@container tw-w-full tw-rounded-lg tw-border tw-border-iron-800 tw-bg-iron-900 tw-p-3 tw-shadow-sm`
+* Input: `tw-w-full tw-rounded-md tw-border tw-border-iron-700 tw-bg-iron-950 tw-px-3 tw-py-[.625rem] focus:tw-ring-2 focus:tw-ring-primary-500`
+* Suggest row: `tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2 hover:tw-bg-iron-800 @md:tw-gap-4`
+* Pills: `tw-text-[11px] tw-rounded tw-bg-iron-800 tw-px-1.5 tw-py-0.5`
+* Container queries:
+
+  * `@md:` for switching list item layout from stacked → inline.
+  * Example: thumbnails hidden below `@sm`, shown `@sm` and above: `tw-hidden @sm:tw-block`
+
+---
+
+## 14) Scam Prevention (built-in)
+
+* Mark and **hide spam** by default; surface a toggle “Show suspected spam results” when present.
+  Rationale & guidance per Alchemy spam docs; `isSpam` and classifications are available in contract/nft responses. ([Alchemy][2])
+* Show **OpenSea safelist** status badge (verified/approved). (From `openseaMetadata.safelistRequestStatus`.) ([Alchemy][1])
+* Show **deployer address** (if provided by API) in suggestion details (hover tooltip).
+* Never auto‑execute actions; no external links automatically followed.
+
+---
+
+## 15) Performance
+
+* All network calls funnel through `services/alchemy-api.ts`; let `@tanstack/react-query` manage caching (`staleTime` ≈ 60s for search, 5 min for contract details).
+* Client keeps a local Map keyed by `query+chain` to avoid duplicate network requests within a session (mirror caching used elsewhere in the app).
+* Virtual lists overscan = 8; only load token metadata for visible/overscanned rows (via the batched helper backed by `getNFTMetadataBatch`).
+* Avoid expanding massive ranges fully; use **windowed expansion** (only expand tokenIds for rows to be shown).
+
+---
+
+## 16) Capacitor & Mobile
+
+* Detect via `isCapacitor()`; prefer native scrolling; increase hit areas; avoid position:fixed tooltips that conflict with iOS viewport quirks.
+* Touch gestures: long‑press on row opens range editor or context menu.
+
+---
+
+## 17) Errors & Empty States
+
+* Search: “Type to search collections or paste a contract address.”
+* No matches: “No collections found.” Offer “Paste address” suggestion.
+* Spam hidden: “Filtered suspected spam collections (N). Show.”
+* Invalid token expression: inline red helper under the input and mark offending segment(s).
+* When outputMode is `'number'` and unsafe IDs present: “ID exceeds safe integer range; switch to bigint output or remove those IDs.”
+
+---
+
+## 18) Testing Plan
+
+* **Unit**: parsing (`parseTokenExpressionToBigints`, merge/sort, canonical formatting), number safety conversion.
+* **Service**: helpers in `services/alchemy-api.ts` (mock `fetchUrl` / `postData`) covering spam flags, pagination, floor-price fallback.
+* **Component**: render picker pieces with `renderWithProviders` from `__tests__/utils/testContexts.tsx` (focus management, chip editing, virtualization hand-off).
+* **E2E (Playwright)**: keyboard interactions (combobox), long lists virtualization, mobile viewport, Capacitor UA.
+* **Accessibility**: `jest-axe` basic checks; manual VoiceOver/NVDA pass.
+
+---
+
+## 19) Example Usage (Parent)
+
+```tsx
+// app/demo/page.tsx
+'use client';
+import { useState } from 'react';
+import { NftPicker } from '@/components/nft-picker/NftPicker';
+import type { NftPickerSelection } from '@/components/nft-picker/NftPicker.types';
+
+export default function Demo() {
+  const [selection, setSelection] = useState<NftPickerSelection | null>(null);
+
+  return (
+    <div className="tw-@container tw-max-w-3xl tw-mx-auto tw-p-4">
+      <NftPicker
+        chain="ethereum"
+        outputMode="number" // switch to 'bigint' if needed
+        onChange={setSelection}
+        hideSpam
+        allowAll
+        allowRanges
+        placeholder="Search by collection name or paste contract address…"
+      />
+      <pre className="tw-mt-4 tw-text-xs tw-bg-iron-900 tw-border tw-border-iron-800 tw-p-3 tw-rounded">
+        {JSON.stringify(
+          selection,
+          (_, value) => (typeof value === "bigint" ? value.toString() : value),
+          2
+        )}
+      </pre>
+    </div>
+  );
+}
+```
+
+---
+
+## 20) Service helper sketches
+
+> **Note**: Keep these within `services/alchemy-api.ts`; the snippets highlight patterns to follow, not exact code.
+
+### `searchNftCollections`
+
+```ts
+export async function searchNftCollections(query: string, chain: SupportedChain = 'ethereum') {
+  if (!query.trim()) return [];
+  const encoded = encodeURIComponent(query.trim());
+  const url = `https://${resolveNetwork(chain)}.g.alchemy.com/nft/v3/${publicEnv.ALCHEMY_API_KEY}/searchContractMetadata?query=${encoded}`;
+  const response = await fetchUrl(url); // reuse existing helper that injects auth headers
+  return response.contracts?.map(toSuggestion) ?? [];
+}
+```
+
+* `resolveNetwork` mirrors `getNftsForContractAndOwner`’s path mapping (`eth-mainnet`, `eth-sepolia`, etc.).
+* `toSuggestion` should map to `Suggestion` from `NftPicker.types.ts`, filling spam/safelist fields from OpenSea metadata when available.
+
+### `getContractOverview`
+
+```ts
+export async function getContractOverview(address: `0x${string}`, chain: SupportedChain = 'ethereum') {
+  const url = `https://${resolveNetwork(chain)}.g.alchemy.com/nft/v3/${publicEnv.ALCHEMY_API_KEY}/getContractMetadata?contractAddress=${address}`;
+  const meta = await fetchUrl(url);
+  return normaliseContract(meta);
+}
+```
+
+* Wrap checksum/validation with `helpers/Helpers.ts:isValidEthAddress` & `viem`’s `getAddress` if needed.
+* Optionally call the REST `getFloorPrice` endpoint and merge values before returning.
+
+### `getTokensMetadata`
+
+```ts
+export async function getTokensMetadata(params: { address: `0x${string}`; tokenIds: readonly string[]; chain?: SupportedChain }) {
+  if (!params.tokenIds.length) return [];
+  const batchUrl = `https://${resolveNetwork(params.chain ?? 'ethereum')}.g.alchemy.com/nft/v3/${publicEnv.ALCHEMY_API_KEY}/getNFTMetadataBatch`;
+  const body = {
+    tokens: params.tokenIds.slice(0, 100).map((tokenId) => ({ contractAddress: params.address, tokenId })),
+  };
+  const response = await postData(batchUrl, body); // reuse 6529 API helper so staging auth headers apply
+  return response.tokens?.map(toTokenSummary) ?? [];
+}
+```
+
+* Support pagination windows by accepting an optional `pageKey` argument; mirror that behaviour in `useAlchemyClient` so virtualization can request further pages.
+* `toTokenSummary` should return `{ tokenId, name, imageUrl, isSpam, ... }` for the picker.
+
+These helpers keep HTTP logic in one place, can be unit tested, and plug directly into `@tanstack/react-query` hooks.
+
+---
+
+## 21) Security Notes
+
+* Use `publicEnv.ALCHEMY_API_KEY` via `services/alchemy-api.ts` only—never log or expose it directly in the DOM.
+* Validate user inputs (addresses, query length, token IDs) with helpers like `isValidEthAddress`.
+* Sanitize any text coming from APIs before display (no `dangerouslySetInnerHTML`).
+* Apply `AbortController` + retry backoff in service helpers to protect against runaway requests.
+* Handle timeouts gracefully (show non-blocking toasts; don’t crash combobox).
+
+---
+
+## 22) Edge Cases & Decisions
+
+* **“All” + additional IDs**: if user adds IDs after choosing All, **switch out of All** and use explicit IDs/ranges. “All” strictly means **empty list**.
+* **ERC‑1155**: treat IDs just like 721; **no quantity** UI. We only return token IDs.
+* **Unknown image/metadata**: show deterministic placeholder; continue to fetch lazily.
+* **Huge ranges**: avoid enumerating; rely on range model + windowed expansion for previews.
+
+---
+
+## 23) Acceptance Criteria
+
+* Keyboard/mouse navigable combobox with suggestions, including spam/verified signals and compact metrics.
+* Can select contract by name **or** by pasting 0x address.
+* Can switch between **Single**, **Bucket**, **All** modes.
+* Bucket supports manual IDs **and** ranges; canonical string is editable and stays in sync with list.
+* Virtualized selected list; thumbnails load on demand.
+* Every change fires `onChange({ contractAddress, tokenIds })` **without a submit button**.
+* **Responsive** via container queries, usable in **mobile/Capacitor**.
+* Spam hidden by default but can be revealed.
+* API key usage stays confined to `services/alchemy-api.ts` helpers with caching via `@tanstack/react-query`.
+
+---
+
+### Quick rationale links
+
+* Search by collection name/keywords & OpenSea metadata → `searchContractMetadata` (v3). ([Alchemy][1])
+* Browse or preview full collection & contract spam flags → `getNFTsForContract`. ([Alchemy][2])
+* Fetch specific token(s) lazily in viewport → `getNFTMetadata` & `getNFTMetadataBatch`. ([Alchemy][3])
+* Surface floor price → `getFloorPrice` or OpenSea metadata fallback. ([Alchemy][5])
+* Hide scams by default; expose toggle → Alchemy spam guidance and flags. ([Alchemy][8])
+* Tailwind container queries with `tw-` prefix → plugin guidance. ([GitHub][7])
+
+[1]: https://www.alchemy.com/docs/reference/nft-api-endpoints/nft-api-endpoints/nft-metadata-endpoints/search-contract-metadata-v-3 "Search Contract Metadata | Alchemy Docs"
+[2]: https://www.alchemy.com/docs/reference/nft-api-endpoints/nft-api-endpoints/nft-metadata-endpoints/get-nf-ts-for-contract-v-3 "NFTs By Contract | Alchemy Docs"
+[3]: https://www.alchemy.com/docs/reference/nft-api-endpoints/nft-api-endpoints/nft-metadata-endpoints/get-nft-metadata-v-3?utm_source=chatgpt.com "NFT Metadata By Token ID"
+[4]: https://alchemy.com/docs/data/nft-api/api-reference/nft-metadata-endpoints/get-nft-metadata-batch-v-3?utm_source=chatgpt.com "NFT Metadata By Token ID [Batch]"
+[5]: https://www.alchemy.com/docs/reference/getfloorprice-sdk-v3?utm_source=chatgpt.com "getFloorPrice - SDK | Alchemy Docs"
+[7]: https://github.com/tailwindlabs/tailwindcss-container-queries?utm_source=chatgpt.com "tailwindlabs/tailwindcss-container-queries: A plugin for ..."
+[8]: https://www.alchemy.com/overviews/spam-nfts?utm_source=chatgpt.com "Spam NFTs and How to Fix Them"