Always allow manual entry of NFTs and tokens

xch-dev · Dec 24, 2024 · ab83c4a · ab83c4a
1 parent 01399a9
commit ab83c4a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 38 deletions.
diff --git a/src/components/selectors/DropdownSelector.tsx b/src/components/selectors/DropdownSelector.tsx
@@ -55,14 +55,8 @@ export function DropdownSelector<T>({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start' className={width}>
-          {manualInput && (
-            <>
-              <div className='p-2'>{manualInput}</div>
-              <DropdownMenuSeparator />
-            </>
-          )}
-          {setPage && (
-            <>
+          <>
+            {!!setPage && (
               <DropdownMenuLabel>
                 <div className='flex items-center justify-between'>
                   <span>
@@ -94,10 +88,11 @@ export function DropdownSelector<T>({
                   </div>
                 </div>
               </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-            </>
-          )}
-          <div className='max-h-[300px] overflow-y-auto'>
+            )}
+            {manualInput && <div className='p-2'>{manualInput}</div>}
+            {!!setPage || (manualInput && <DropdownMenuSeparator />)}
+          </>
+          <div className='max-h-[260px] overflow-y-auto'>
             {loadedItems.length === 0 ? (
               <div className='p-4 text-center text-sm text-muted-foreground'>
                 No items available

diff --git a/src/components/selectors/NftSelector.tsx b/src/components/selectors/NftSelector.tsx
@@ -1,8 +1,10 @@
 import { commands, NftRecord } from '@/bindings';
 import { useErrors } from '@/hooks/useErrors';
 import { nftUri } from '@/lib/nftUri';
+import { addressInfo } from '@/lib/utils';
 import { useWalletState } from '@/state';
 import { useEffect, useState } from 'react';
+import { Input } from '../ui/input';
 import { DropdownSelector } from './DropdownSelector';
 
 export interface NftSelectorProps {
@@ -45,6 +47,14 @@ export function NftSelector({
 
   useEffect(() => {
     if (value && selectedNft?.launcher_id !== value) {
+      try {
+        if (addressInfo(value).puzzleHash.length !== 64) {
+          return setSelectedNft(null);
+        }
+      } catch {
+        return setSelectedNft(null);
+      }
+
       commands
         .getNft({ nft_id: value })
         .then((data) => setSelectedNft(data.nft))
@@ -57,7 +67,13 @@ export function NftSelector({
   useEffect(() => {
     const nftsToFetch = [...nfts.map((nft) => nft.launcher_id)];
     if (value && !nfts.find((nft) => nft.launcher_id === value)) {
-      nftsToFetch.push(value);
+      try {
+        if (addressInfo(value).puzzleHash.length === 64) {
+          nftsToFetch.push(value);
+        }
+      } catch {
+        // The checksum failed
+      }
     }
 
     Promise.all(
@@ -90,6 +106,18 @@ export function NftSelector({
         setSelectedNft(nft);
       }}
       className={className}
+      manualInput={
+        <Input
+          placeholder='Enter NFT id'
+          value={value || ''}
+          onChange={(e) => {
+            onChange(e.target.value);
+            setSelectedNft(
+              nfts.find((nft) => nft.launcher_id === e.target.value) ?? null,
+            );
+          }}
+        />
+      }
       renderItem={(nft) => (
         <div className='flex items-center gap-2 w-full'>
           <img

diff --git a/src/components/selectors/TokenSelector.tsx b/src/components/selectors/TokenSelector.tsx
@@ -1,6 +1,5 @@
 import { CatRecord, commands } from '@/bindings';
 import { useErrors } from '@/hooks/useErrors';
-import { useWalletState } from '@/state';
 import { useEffect, useState } from 'react';
 import { Input } from '../ui/input';
 import { DropdownSelector } from './DropdownSelector';
@@ -10,17 +9,14 @@ export interface TokenSelectorProps {
   onChange: (value: string) => void;
   disabled?: string[];
   className?: string;
-  allowManualInput?: boolean;
 }
 
 export function TokenSelector({
   value,
   onChange,
   disabled = [],
   className,
-  allowManualInput = false,
 }: TokenSelectorProps) {
-  const walletState = useWalletState();
   const { addError } = useErrors();
 
   const [tokens, setTokens] = useState<CatRecord[]>([]);
@@ -55,26 +51,24 @@ export function TokenSelector({
       }}
       className={className}
       manualInput={
-        allowManualInput && (
-          <Input
-            placeholder='Enter asset id'
-            value={value || ''}
-            onChange={(e) => {
-              onChange(e.target.value);
-              setSelectedToken(
-                tokens.find((token) => token.asset_id === e.target.value) ?? {
-                  name: 'Unknown',
-                  asset_id: e.target.value,
-                  icon_url: null,
-                  balance: 0,
-                  ticker: null,
-                  description: null,
-                  visible: true,
-                },
-              );
-            }}
-          />
-        )
+        <Input
+          placeholder='Enter asset id'
+          value={value || ''}
+          onChange={(e) => {
+            onChange(e.target.value);
+            setSelectedToken(
+              tokens.find((token) => token.asset_id === e.target.value) ?? {
+                name: 'Unknown',
+                asset_id: e.target.value,
+                icon_url: null,
+                balance: 0,
+                ticker: null,
+                description: null,
+                visible: true,
+              },
+            );
+          }}
+        />
       }
       renderItem={(token) => (
         <div className='flex items-center gap-2 w-full'>

diff --git a/src/pages/MakeOffer.tsx b/src/pages/MakeOffer.tsx
@@ -540,7 +540,6 @@ function AssetSelector({
                   .filter((amount) => amount.asset_id !== cat.asset_id)
                   .map((amount) => amount.asset_id)}
                 className='rounded-r-none'
-                allowManualInput={!offering}
               />
               <TokenAmountInput
                 id={`${prefix}-cat-${i}-amount`}