Updated support for transferring an NFT. Working now with NFT0. (Chia…

…-Network#727)
AmineKhaldi · May 10, 2022 · df86eca · df86eca
1 parent 7c33032
commit df86eca
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 104 deletions.
diff --git a/packages/api-react/src/services/wallet.ts b/packages/api-react/src/services/wallet.ts
@@ -1833,22 +1833,14 @@ export const walletApi = apiWithTag.injectEndpoints({
       any,
       {
         walletId: number;
-        nftCoinInfo: any;
-        newDid: string;
-        newDidInnerHash: string;
-        tradePrice: number;
+        nftCoinId: string;
+        targetAddress: string;
       }
     >({
-      query: ({
-        walletId,
-        nftCoinInfo,
-        newDid,
-        newDidInnerHash,
-        tradePrice,
-      }) => ({
+      query: ({ walletId, nftCoinId, targetAddress }) => ({
         command: 'transferNft',
         service: NFT,
-        args: [walletId, nftCoinInfo, newDid, newDidInnerHash, tradePrice],
+        args: [walletId, nftCoinId, targetAddress],
       }),
       invalidatesTags: (result, _error, { walletId }) =>
         result ? [{ type: 'NFTInfo', id: walletId }] : [],

diff --git a/packages/api/src/wallets/NFT.ts b/packages/api/src/wallets/NFT.ts
@@ -9,17 +9,13 @@ export default class NFTWallet extends Wallet {
 
   async transferNft(
     walletId: number,
-    nftCoinInfo: any,
-    newDid: string,
-    newDidInnerHash: string,
-    tradePrice: number
+    nftCoinId: string,
+    targetAddress: string
   ) {
     return this.command('nft_transfer_nft', {
       walletId,
-      nftCoinInfo,
-      newDid,
-      newDidInnerHash,
-      tradePrice,
+      nftCoinId,
+      targetAddress,
     });
   }
 

diff --git a/packages/gui/src/components/nfts/NFTContextualActions.tsx b/packages/gui/src/components/nfts/NFTContextualActions.tsx
@@ -1,24 +1,13 @@
 import React, { useMemo } from 'react';
 import { Trans } from '@lingui/macro';
 import type { NFTInfo } from '@chia/api';
-import {
-  DropdownActions,
-  type DropdownActionsChildProps,
-  Flex,
-  useOpenDialog,
-} from '@chia/core';
+import { AlertDialog, DropdownActions, useOpenDialog } from '@chia/core';
+import type { DropdownActionsChildProps } from '@chia/core';
 import { Offers as OffersIcon } from '@chia/icons';
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  ListItemIcon,
-  MenuItem,
-  Typography,
-} from '@mui/material';
+import { ListItemIcon, MenuItem, Typography } from '@mui/material';
 import { ArrowForward as TransferIcon } from '@mui/icons-material';
 import NFTCreateOfferDemoDialog from './NFTCreateOfferDemo';
-import NFTTransferDemo from './NFTTransferDemo';
+import { NFTTransferDialog, NFTTransferResult } from './NFTTransferAction';
 import NFTSelection from '../../types/NFTSelection';
 
 /* ========================================================================== */
@@ -92,28 +81,31 @@ function NFTTransferContextualAction(props: NFTTransferContextualActionProps) {
   const selectedNft: NFTInfo | undefined = selection?.items[0];
   const disabled = (selection?.items.length ?? 0) !== 1;
 
-  function handleTransferNFT() {
-    const open = true;
+  function handleComplete(result?: NFTTransferResult) {
+    if (result) {
+      if (result.success) {
+        openDialog(
+          <AlertDialog title={<Trans>NFT Transfer Complete</Trans>}>
+            <Trans>
+              The NFT transfer transaction has been successfully submitted to
+              the blockchain.
+            </Trans>
+          </AlertDialog>,
+        );
+      } else {
+        const error = result.error || 'Unknown error';
+        openDialog(
+          <AlertDialog title={<Trans>NFT Transfer Failed</Trans>}>
+            <Trans>The NFT transfer failed: {error}</Trans>
+          </AlertDialog>,
+        );
+      }
+    }
+  }
 
+  function handleTransferNFT() {
     openDialog(
-      <Dialog
-        open={open}
-        aria-labelledby="nft-transfer-dialog-title"
-        aria-describedby="nft-transfer-dialog-description"
-        maxWidth="sm"
-        fullWidth
-      >
-        <DialogTitle id="nft-transfer-dialog-title">
-          <Typography variant="h6">
-            <Trans>NFT Transfer Demo</Trans>
-          </Typography>
-        </DialogTitle>
-        <DialogContent>
-          <Flex justifyContent="center">
-            <NFTTransferDemo nft={selectedNft} />
-          </Flex>
-        </DialogContent>
-      </Dialog>,
+      <NFTTransferDialog nft={selectedNft} onComplete={handleComplete} />,
     );
   }
 

diff --git a/packages/gui/src/components/nfts/NFTTransferAction.tsx b/packages/gui/src/components/nfts/NFTTransferAction.tsx
@@ -50,7 +50,7 @@ export type NFTTransferResult = {
   success: boolean;
   transferInfo?: {
     nftAssetId: string;
-    destinationDID: string;
+    destination: string;
     fee: string;
   };
   error?: string;
@@ -67,7 +67,7 @@ type NFTTransferConfirmationDialogProps = NFTTransferFormData & {
 function NFTTransferConfirmationDialog(
   props: NFTTransferConfirmationDialogProps,
 ) {
-  const { destinationDID, fee, ...rest } = props;
+  const { destination, fee, ...rest } = props;
   const feeInMojos = chiaToMojo(fee || 0);
   const currencyCode = useCurrencyCode();
 
@@ -101,21 +101,21 @@ function NFTTransferConfirmationDialog(
               sx={{ overflow: 'hidden' }}
             >
               <Typography noWrap variant="body1">
-                {destinationDID}
+                {destination}
               </Typography>
               <TooltipIcon interactive>
                 <Flex flexDirection="column" gap={1}>
                   <StyledTitle>
                     <Trans>Destination</Trans>
                   </StyledTitle>
                   <StyledValue>
-                    <Typography variant="caption">{destinationDID}</Typography>
+                    <Typography variant="caption">{destination}</Typography>
                   </StyledValue>
                 </Flex>
               </TooltipIcon>
             </Flex>
           </Flex>
-          <Flex flexDirection="row" gap={1}>
+          {/* <Flex flexDirection="row" gap={1}>
             <Typography variant="body1">Fee:</Typography>
             <Typography variant="body1">
               {fee || '0'} {currencyCode}
@@ -134,7 +134,7 @@ function NFTTransferConfirmationDialog(
                 )
               </>
             )}
-          </Flex>
+          </Flex> */}
         </Flex>
       </Flex>
     </ConfirmDialog>
@@ -150,25 +150,25 @@ NFTTransferConfirmationDialog.defaultProps = {
 /* ========================================================================== */
 
 type NFTTransferFormData = {
-  destinationDID: string;
+  destination: string;
   fee: string;
 };
 
 type NFTTransferActionProps = {
   nft: NFTInfo;
-  destinationDID?: string;
+  destination?: string;
   onComplete?: (result?: NFTTransferResult) => void;
 };
 
 export default function NFTTransferAction(props: NFTTransferActionProps) {
-  const { nft, destinationDID, onComplete } = props;
+  const { nft, destination, onComplete } = props;
   const [isLoading, setIsLoading] = useState(false);
   const [transferNFT] = useTransferNFTMutation();
   const openDialog = useOpenDialog();
   const methods = useForm<NFTTransferFormData>({
     shouldUnregister: false,
     defaultValues: {
-      destinationDID: destinationDID || '',
+      destination: destination || '',
       fee: '',
     },
   });
@@ -180,16 +180,13 @@ export default function NFTTransferAction(props: NFTTransferActionProps) {
   }
 
   async function handleSubmit(formData: NFTTransferFormData) {
-    const { destinationDID, fee } = formData;
+    const { destination, fee } = formData;
     let isValid = true;
     let confirmation = false;
 
     if (isValid) {
       confirmation = await openDialog(
-        <NFTTransferConfirmationDialog
-          destinationDID={destinationDID}
-          fee={fee}
-        />,
+        <NFTTransferConfirmationDialog destination={destination} fee={fee} />,
       );
     }
 
@@ -198,10 +195,8 @@ export default function NFTTransferAction(props: NFTTransferActionProps) {
 
       const { error, data: response } = await transferNFT({
         walletId: nft.walletId,
-        nftCoinInfo: nft.nftCoinid,
-        newDid: destinationDID,
-        newDidInnerHash: '',
-        tradePrice: 0,
+        nftCoinId: nft.nftCoinId,
+        targetAddress: destination,
       });
       const success = response?.success ?? false;
       const errorMessage = error ?? undefined;
@@ -212,8 +207,8 @@ export default function NFTTransferAction(props: NFTTransferActionProps) {
         onComplete({
           success,
           transferInfo: {
-            nftAssetId: nft.launcherId,
-            destinationDID,
+            nftAssetId: nft.nftCoinId,
+            destination,
             fee,
           },
           error: errorMessage,
@@ -266,38 +261,54 @@ export default function NFTTransferAction(props: NFTTransferActionProps) {
               sx={{ overflow: 'hidden' }}
             >
               <Typography noWrap variant="body1">
-                {nft.launcherId}
+                {nft.id}
               </Typography>
               <TooltipIcon interactive>
-                <Flex flexDirection="column" gap={1}>
-                  <StyledTitle>
-                    <Trans>NFT Asset ID</Trans>
-                  </StyledTitle>
-                  <StyledValue>
-                    <Typography variant="caption">{nft.launcherId}</Typography>
-                  </StyledValue>
+                <Flex flexDirection="column" gap={2}>
+                  <Flex flexDirection="column" gap={1}>
+                    <StyledTitle>
+                      <Trans>NFT ID</Trans>
+                    </StyledTitle>
+                    <StyledValue>
+                      <Typography variant="caption">{nft.id}</Typography>
+                    </StyledValue>
+                    <StyledTitle>
+                      <Trans>Launcher ID</Trans>
+                    </StyledTitle>
+                    <StyledValue>
+                      <Typography variant="caption">
+                        {nft.launcherId}
+                      </Typography>
+                    </StyledValue>
+                    <StyledTitle>
+                      <Trans>Coin ID</Trans>
+                    </StyledTitle>
+                    <StyledValue>
+                      <Typography variant="caption">{nft.nftCoinId}</Typography>
+                    </StyledValue>
+                  </Flex>
                 </Flex>
               </TooltipIcon>
             </Flex>
           </Flex>
         </Flex>
         <TextField
-          name="destinationDID"
+          name="destination"
           variant="filled"
           color="secondary"
           fullWidth
           label={<Trans>Send to Address</Trans>}
           disabled={isLoading}
           required
         />
-        <Fee
+        {/* <Fee
           id="filled-secondary"
           variant="filled"
           name="fee"
           color="secondary"
           label={<Trans>Fee</Trans>}
           disabled={isLoading}
-        />
+        /> */}
         <DialogActions>
           <Flex flexDirection="row" gap={3}>
             <Button
@@ -333,11 +344,11 @@ type NFTTransferDialogProps = {
   onClose: (value: any) => void;
   onComplete?: (result?: NFTTransferResult) => void;
   nft: NFTInfo;
-  destinationDID?: string;
+  destination?: string;
 };
 
 export function NFTTransferDialog(props: NFTTransferDialogProps) {
-  const { open, onClose, onComplete, nft, destinationDID, ...rest } = props;
+  const { open, onClose, onComplete, nft, destination, ...rest } = props;
 
   function handleClose() {
     onClose(false);
@@ -370,15 +381,18 @@ export function NFTTransferDialog(props: NFTTransferDialogProps) {
       <DialogContent>
         <Flex flexDirection="column" gap={3}>
           <DialogContentText id="nft-transfer-dialog-description">
-            <Trans>
+            {/* <Trans>
               Would you like to transfer the specified NFT to a new owner? It is
               recommended that you include a fee to ensure that the transaction
               is completed in a timely manner.
+            </Trans> */}
+            <Trans>
+              Would you like to transfer the specified NFT to a new owner?
             </Trans>
           </DialogContentText>
           <NFTTransferAction
             nft={nft}
-            destinationDID={destinationDID}
+            destination={destination}
             onComplete={handleCompletion}
           />
         </Flex>