useERC721Approve

Hook for granting approval to NiftyApes to be able to access your NFT. This hook automatically checks if permission has been granted already.

TypeScript

import { Address, useERC721Approve } from '@niftyapes/sdk'

Usage

TypeScript

import React from "react";
import { useERC721Approve } from "@niftyapes/sdk";
import { useWaitForTransaction } from "wagmi";

const UseERC721Approve: React.FC = () => {
  const nftId = "8";
  const nftContractAddress = "0xa608475ec077e10d71db7476745d85f9e860e540";

  const { hasCheckedApproval, hasApproval, write, data } = useERC721Approve({
    nftId,
    nftContractAddress,
  });
  const approvalRequired = hasCheckedApproval && !hasApproval;

  const {
    isLoading: isApproving,
    isSuccess: isApproved,
    isError,
  } = useWaitForTransaction({ hash: data?.hash });

  return (
    <div>
      <div>
        {approvalRequired && (
          <button onClick={() => write?.()}>Approve Transfer</button>
        )}
      </div>
      <div>{isApproving && "Approving"}</div>
      <div>{isApproved && "Transfer Approved"}</div>
      <div>{isError && "Usable to approve transfer at this time"}</div>
    </div>
  );
};

export default UseERC721Approve;

Configuration

Requires a valid collection address and a token id

TypeScript

{
  nftContractAddress: Address;
  nftId: string;
}

Return Value

TypeScript

{
  approvalCheckErr: boolean,
  hasCheckedApproval: boolean,
  hasApproval: boolean,
  data?: TransactionResponse,
  error?: Error,
  isError: boolean,
  isIdle: boolean,
  isLoading: boolean,
  isSuccess: boolean,
  status: 'idle' | 'error' | 'loading' | 'success',
  write?: () => void,
}