Allow manual entry

xch-dev · Dec 20, 2024 · a1be3ae · a1be3ae
1 parent 80a98a6
commit a1be3ae
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/src/components/selectors/DropdownSelector.tsx b/src/components/selectors/DropdownSelector.tsx
@@ -21,6 +21,7 @@ export interface DropdownSelectorProps<T> extends PropsWithChildren {
   pageSize?: number;
   width?: string;
   className?: string;
+  manualInput?: React.ReactNode;
 }
 
 export function DropdownSelector<T>({
@@ -35,6 +36,7 @@ export function DropdownSelector<T>({
   width = 'w-[300px]',
   className,
   children,
+  manualInput,
 }: DropdownSelectorProps<T>) {
   const pages = Math.max(1, Math.ceil(totalItems / pageSize));
 
@@ -53,6 +55,12 @@ export function DropdownSelector<T>({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start' className={width}>
+          {manualInput && (
+            <>
+              <div className='p-2'>{manualInput}</div>
+              <DropdownMenuSeparator />
+            </>
+          )}
           {setPage && (
             <>
               <DropdownMenuLabel>

diff --git a/src/components/selectors/TokenSelector.tsx b/src/components/selectors/TokenSelector.tsx
@@ -2,20 +2,23 @@ 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';
 
 export interface TokenSelectorProps {
   value: string | null;
   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();
@@ -42,7 +45,7 @@ export function TokenSelector({
 
   return (
     <DropdownSelector
-      totalItems={walletState.nfts.visible_nfts}
+      totalItems={tokens.length}
       loadedItems={tokens}
       page={0}
       isDisabled={(token) => disabled.includes(token.asset_id)}
@@ -51,6 +54,28 @@ export function TokenSelector({
         setSelectedToken(token);
       }}
       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,
+                },
+              );
+            }}
+          />
+        )
+      }
       renderItem={(token) => (
         <div className='flex items-center gap-2 w-full'>
           {token.icon_url && (

diff --git a/src/pages/MakeOffer.tsx b/src/pages/MakeOffer.tsx
@@ -441,30 +441,18 @@ function AssetSelector({
           </Label>
           {assets.cats.map((cat, i) => (
             <div key={i} className='flex h-14'>
-              {offering === true ? (
-                <TokenSelector
-                  value={cat.asset_id}
-                  onChange={(assetId) => {
-                    assets.cats[i].asset_id = assetId;
-                    setAssets({ ...assets });
-                  }}
-                  disabled={assets.cats
-                    .filter((amount) => amount.asset_id !== cat.asset_id)
-                    .map((amount) => amount.asset_id)}
-                  className='rounded-r-none'
-                />
-              ) : (
-                <Input
-                  id={`${prefix}-cat-${i}`}
-                  className='rounded-r-none z-10 h-12'
-                  placeholder='Enter asset id'
-                  value={cat.asset_id}
-                  onChange={(e) => {
-                    assets.cats[i].asset_id = e.target.value;
-                    setAssets({ ...assets });
-                  }}
-                />
-              )}
+              <TokenSelector
+                value={cat.asset_id}
+                onChange={(assetId) => {
+                  assets.cats[i].asset_id = assetId;
+                  setAssets({ ...assets });
+                }}
+                disabled={assets.cats
+                  .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`}
                 className='border-l-0 z-10 rounded-l-none rounded-r-none w-[100px] h-12'