Merge pull request #242 from xch-dev/add-to-offer

Add to offer for NFTs in both single and bulk
xch-dev · Jan 6, 2025 · 624b35b · 624b35b
2 parents 7c6b1ec + 926c965
commit 624b35b
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 138 deletions.
diff --git a/src/components/MultiSelectActions.tsx b/src/components/MultiSelectActions.tsx
@@ -1,10 +1,16 @@
 import { commands, TransactionResponse } from '@/bindings';
 import { useErrors } from '@/hooks/useErrors';
 import { toMojos } from '@/lib/utils';
-import { useWalletState } from '@/state';
+import { useOfferState, useWalletState } from '@/state';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
-import { ChevronDown, Flame, SendIcon, UserRoundPlus } from 'lucide-react';
+import {
+  ChevronDown,
+  Flame,
+  HandCoins,
+  SendIcon,
+  UserRoundPlus,
+} from 'lucide-react';
 import { useState } from 'react';
 import { AssignNftDialog } from './AssignNftDialog';
 import ConfirmationDialog from './ConfirmationDialog';
@@ -16,6 +22,7 @@ import {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
 
@@ -29,7 +36,10 @@ export function MultiSelectActions({
   onConfirm,
 }: MultiSelectActionsProps) {
   const walletState = useWalletState();
+  const offerState = useOfferState();
+
   const { addError } = useErrors();
+
   const selectedCount = selected.length;
 
   const [transferOpen, setTransferOpen] = useState(false);
@@ -126,6 +136,39 @@ export function MultiSelectActions({
                   <Trans>Burn</Trans>
                 </span>
               </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem
+                className='cursor-pointer'
+                onClick={(e) => {
+                  e.stopPropagation();
+
+                  const newNfts = [...offerState.offered.nfts];
+
+                  for (const item of selected) {
+                    if (newNfts.includes(item)) {
+                      continue;
+                    }
+
+                    newNfts.push(item);
+                  }
+
+                  useOfferState.setState({
+                    offered: {
+                      ...offerState.offered,
+                      nfts: newNfts,
+                    },
+                  });
+
+                  onConfirm();
+                }}
+              >
+                <HandCoins className='mr-2 h-4 w-4' />
+                <span>
+                  <Trans>Add to Offer</Trans>
+                </span>
+              </DropdownMenuItem>
             </DropdownMenuGroup>
           </DropdownMenuContent>
         </DropdownMenu>

diff --git a/src/components/NftCard.tsx b/src/components/NftCard.tsx
@@ -9,7 +9,7 @@ import { useErrors } from '@/hooks/useErrors';
 import { amount } from '@/lib/formTypes';
 import { nftUri } from '@/lib/nftUri';
 import { toMojos } from '@/lib/utils';
-import { useWalletState } from '@/state';
+import { useOfferState, useWalletState } from '@/state';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
@@ -20,6 +20,7 @@ import {
   EyeIcon,
   EyeOff,
   Flame,
+  HandCoins,
   LinkIcon,
   MoreVertical,
   SendIcon,
@@ -85,6 +86,7 @@ export function NftCardList({ children }: PropsWithChildren) {
 
 export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
   const walletState = useWalletState();
+  const offerState = useOfferState();
   const navigate = useNavigate();
 
   const { addError } = useErrors();
@@ -287,6 +289,35 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
 
                 <DropdownMenuSeparator />
 
+                <DropdownMenuItem
+                  className='cursor-pointer'
+                  onClick={(e) => {
+                    e.stopPropagation();
+
+                    const newNfts = [...offerState.offered.nfts];
+
+                    newNfts.push(nft.launcher_id);
+
+                    useOfferState.setState({
+                      offered: {
+                        ...offerState.offered,
+                        nfts: newNfts,
+                      },
+                    });
+                  }}
+                  disabled={
+                    !nft.created_height ||
+                    offerState.offered.nfts.findIndex(
+                      (nftId) => nftId === nft.launcher_id,
+                    ) !== -1
+                  }
+                >
+                  <HandCoins className='mr-2 h-4 w-4' />
+                  <span>
+                    <Trans>Add to Offer</Trans>
+                  </span>
+                </DropdownMenuItem>
+
                 <DropdownMenuItem
                   className='cursor-pointer'
                   onClick={(e) => {