Merge pull request #733 from xch-dev/shadcn-selector

cherry pick - rewrite asset selectors with shadcn Command component

Author: Rigidity

package.json

@@ -58,6 +58,7 @@
     "bs58": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "emoji-mart": "^5.6.0",
     "framer-motion": "^12.33.0",
     "lucide-react": "^0.445.0",

pnpm-lock.yaml

@@ -99,7 +99,6 @@ export function AssetSelector({
     checkAssetsInOffers();
   }, [offering, assets.nfts, assets.options]);
 
-  // Generate unique IDs for new items
   const generateId = useCallback(() => Date.now() + Math.random(), []);
 
   const addToken = () => {
@@ -260,7 +259,7 @@ export function AssetSelector({
               <div className='flex flex-grow-0'>
                 <TokenAmountInput
                   id={`${prefix}-cat-${i}-amount`}
-                  className='!border-l-0 z-10 !rounded-l-none !rounded-r-none w-[150px] h-12'
+                  className='!border-l-0 z-10 !rounded-l-none !rounded-r-none h-12'
                   placeholder={t`Amount`}
                   value={amount}
                   onValueChange={(values) =>
@@ -274,7 +273,7 @@ export function AssetSelector({
                       <TooltipTrigger asChild>
                         <Button
                           variant='outline'
-                          className='!border-l-0 !rounded-none h-12 px-2 text-xs'
+                          className='!border-l-0 !rounded-none h-12 pl-1.5 pr-1 text-xs'
                           onClick={() => setMaxTokenAmount(i, assetId)}
                         >
                           <ArrowUpToLine className='h-3 w-3 mr-1' />

src/components/selectors/AssetSelector.tsx

@@ -3,9 +3,8 @@ import { useErrors } from '@/hooks/useErrors';
 import { nftUri } from '@/lib/nftUri';
 import { isValidAddress } from '@/lib/utils';
 import { t } from '@lingui/core/macro';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Input } from '../ui/input';
-import { DropdownSelector } from './DropdownSelector';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { SearchableSelect } from './SearchableSelect';
 
 export interface NftSelectorProps {
   value: string | null;
@@ -29,17 +28,9 @@ export function NftSelector({
     {},
   );
   const [searchTerm, setSearchTerm] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
 
   const pageSize = 8;
 
-  // Restore focus after NFT list updates
-  useEffect(() => {
-    if (searchTerm && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [nfts, searchTerm]);
-
   const isValidNftId = useMemo(() => {
     return isValidAddress(searchTerm, 'nft');
   }, [searchTerm]);
@@ -129,58 +120,88 @@ export function NftSelector({
 
   const defaultNftImage = nftUri(null, null);
 
-  return (
-    <DropdownSelector
-      loadedItems={pageNftIds}
-      page={page}
-      setPage={setPage}
-      value={value || undefined}
-      setValue={(nftId) => {
+  const handleSelect = useCallback(
+    (nftId: string | null) => {
+      if (nftId) {
         onChange(nftId);
-        // Only clear search term if it's not a valid NFT ID (i.e., user clicked on an item from the list)
-        if (!isValidAddress(searchTerm, 'nft')) {
-          setSearchTerm('');
-        }
-      }}
-      isDisabled={(nft) => disabled.includes(nft)}
-      className={className}
-      manualInput={
-        <Input
-          ref={inputRef}
-          placeholder={t`Search by name or enter NFT ID`}
-          value={searchTerm}
-          onChange={(e) => {
-            const newValue = e.target.value;
-            setSearchTerm(newValue);
-
-            if (isValidAddress(newValue, 'nft')) {
-              onChange(newValue);
-            }
-          }}
-        />
       }
-      renderItem={(nftId) => (
-        <div className='flex items-center gap-2 w-full'>
-          <img
-            src={nftThumbnails[nftId] ?? defaultNftImage}
-            className='w-10 h-10 rounded object-cover'
-            alt=''
-            aria-hidden='true'
-            loading='lazy'
-          />
-          <div className='flex flex-col truncate'>
-            <span className='flex-grow truncate' role='text'>
-              {nfts[nftId]?.name ?? 'Unknown NFT'}
-            </span>
-            <span
-              className='text-xs text-muted-foreground truncate'
-              aria-label='NFT ID'
-            >
-              {nftId}
-            </span>
-          </div>
+    },
+    [onChange],
+  );
+
+  const handleManualInput = useCallback(
+    (nftId: string) => {
+      onChange(nftId);
+    },
+    [onChange],
+  );
+
+  const handleSearchChange = useCallback(
+    (search: string) => {
+      setSearchTerm(search);
+      // Reset to first page when search changes
+      if (page !== 0) {
+        setPage(0);
+      }
+    },
+    [page],
+  );
+
+  // Get the NFT records for the current page
+  const nftItems = useMemo(() => {
+    return pageNftIds.map((id) => nfts[id]).filter(Boolean) as NftRecord[];
+  }, [pageNftIds, nfts]);
+
+  const renderNft = useCallback(
+    (nft: NftRecord) => (
+      <div className='flex items-center gap-2 min-w-0'>
+        <img
+          src={nftThumbnails[nft.launcher_id] ?? defaultNftImage}
+          className='w-10 h-10 rounded object-cover flex-shrink-0'
+          alt=''
+          aria-hidden='true'
+          loading='lazy'
+        />
+        <div className='flex flex-col min-w-0'>
+          <span className='truncate' role='text'>
+            {nft.name ?? 'Unknown NFT'}
+          </span>
+          <span
+            className='text-xs text-muted-foreground truncate'
+            aria-label='NFT ID'
+          >
+            {nft.launcher_id}
+          </span>
         </div>
-      )}
+      </div>
+    ),
+    [nftThumbnails, defaultNftImage],
+  );
+
+  const validateNftId = useCallback((value: string) => {
+    return isValidAddress(value, 'nft');
+  }, []);
+
+  return (
+    <SearchableSelect
+      value={value || undefined}
+      onSelect={handleSelect}
+      items={nftItems}
+      getItemId={(nft) => nft.launcher_id}
+      renderItem={renderNft}
+      onSearchChange={handleSearchChange}
+      shouldFilter={false}
+      validateManualInput={validateNftId}
+      onManualInput={handleManualInput}
+      page={page}
+      onPageChange={setPage}
+      pageSize={pageSize}
+      hasMorePages={pageNftIds.length >= pageSize}
+      disabled={disabled}
+      className={className}
+      placeholder={t`Select NFT`}
+      searchPlaceholder={t`Search by name or enter NFT ID`}
+      emptyMessage={t`No NFTs found.`}
     />
   );
 }