Token dropdown finish

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

Hide file tree

Showing 2 changed files with 59 additions and 67 deletions.
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 { nftUri } from '@/lib/nftUri';
 import { useWalletState } from '@/state';
 import { useEffect, useState } from 'react';
 import { DropdownSelector } from './DropdownSelector';
@@ -41,8 +40,6 @@ export function TokenSelector({
       .catch(addError);
   }, [addError, tokens.length, value, selectedToken]);
 
-  const defaultImage = nftUri(null, null);
-
   return (
     <DropdownSelector
       totalItems={walletState.nfts.visible_nfts}
@@ -56,11 +53,13 @@ export function TokenSelector({
       className={className}
       renderItem={(token) => (
         <div className='flex items-center gap-2 w-full'>
-          <img
-            src={token.icon_url ?? defaultImage}
-            className='w-10 h-10 rounded object-cover'
-            alt={token.name ?? 'Unknown'}
-          />
+          {token.icon_url && (
+            <img
+              src={token.icon_url}
+              className='w-10 h-10 rounded object-cover'
+              alt={token.name ?? 'Unknown'}
+            />
+          )}
           <div className='flex flex-col truncate'>
             <span className='flex-grow truncate'>{token.name}</span>
             <span className='text-xs text-muted-foreground truncate'>
@@ -71,14 +70,12 @@ export function TokenSelector({
       )}
     >
       <div className='flex items-center gap-2 min-w-0'>
-        <img
-          src={
-            selectedToken
-              ? (selectedToken.icon_url ?? defaultImage)
-              : defaultImage
-          }
-          className='w-8 h-8 rounded object-cover'
-        />
+        {selectedToken?.icon_url && (
+          <img
+            src={selectedToken.icon_url}
+            className='w-8 h-8 rounded object-cover'
+          />
+        )}
         <div className='flex flex-col truncate text-left'>
           <span className='truncate'>
             {selectedToken?.name ?? 'Select Token'}

diff --git a/src/pages/MakeOffer.tsx b/src/pages/MakeOffer.tsx
@@ -351,7 +351,7 @@ function AssetSelector({
           onClick={() => {
             setAssets({
               ...assets,
-              cats: [{ asset_id: '', amount: '' }, ...assets.cats],
+              cats: [...assets.cats, { asset_id: '', amount: '' }],
             });
           }}
         >
@@ -434,62 +434,57 @@ function AssetSelector({
       )}
 
       {assets.cats.length > 0 && (
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col mt-4'>
+          <Label className='flex items-center gap-1 mb-2'>
+            <HandCoins className='h-4 w-4' />
+            <span>Tokens</span>
+          </Label>
           {assets.cats.map((cat, i) => (
-            <div key={i} className='flex flex-col space-y-1.5'>
-              <Label
-                htmlFor={`${prefix}-cat-${i}`}
-                className='flex items-center gap-1'
-              >
-                <HandCoins className='h-4 w-4' />
-                <span>Token {i + 1}</span>
-              </Label>
-              <div className='flex'>
-                {offering === true ? (
-                  <TokenSelector
-                    value={cat.asset_id}
-                    onChange={(assetId) => {
-                      assets.cats[i].asset_id = assetId;
-                      setAssets({ ...assets });
-                    }}
-                    disabled={assets.cats
-                      .filter((_, idx) => idx !== i)
-                      .map((c) => c.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 });
-                    }}
-                  />
-                )}
-                <TokenAmountInput
-                  id={`${prefix}-cat-${i}-amount`}
-                  className='border-l-0 z-10 rounded-l-none rounded-r-none w-[100px] h-12'
-                  placeholder='Amount'
-                  value={cat.amount}
-                  onChange={(e) => {
-                    assets.cats[i].amount = e.target.value;
+            <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'
                 />
-                <Button
-                  variant='outline'
-                  className='border-l-0 rounded-l-none flex-shrink-0 flex-grow-0 h-12 px-3'
-                  onClick={() => {
-                    assets.cats.splice(i, 1);
+              ) : (
+                <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 });
                   }}
-                >
-                  <TrashIcon className='h-4 w-4' />
-                </Button>
-              </div>
+                />
+              )}
+              <TokenAmountInput
+                id={`${prefix}-cat-${i}-amount`}
+                className='border-l-0 z-10 rounded-l-none rounded-r-none w-[100px] h-12'
+                placeholder='Amount'
+                value={cat.amount}
+                onChange={(e) => {
+                  assets.cats[i].amount = e.target.value;
+                  setAssets({ ...assets });
+                }}
+              />
+              <Button
+                variant='outline'
+                className='border-l-0 rounded-l-none flex-shrink-0 flex-grow-0 h-12 px-3'
+                onClick={() => {
+                  assets.cats.splice(i, 1);
+                  setAssets({ ...assets });
+                }}
+              >
+                <TrashIcon className='h-4 w-4' />
+              </Button>
             </div>
           ))}
         </div>