function App() {
  return (
    <Web3Button
      contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
      action={(contract) => {
        contract.call("createAuction", [{ 
          "assetContract": "0x8Da37534C58D94E338D0b6D57afF34af6CDc2E32", 
          "tokenId": "0", 
          "quantity": "1", 
          "currency": "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", 
          "minimumBidAmount": "1", 
          "buyoutBidAmount": "10", 
          "timeBufferInSeconds": "100", 
          "bidBufferBps": "60", 
          "startTimestamp": "1654280400", 
          "endTimestamp": "1654366800" 
        }])
      }}
      onSuccess={(result) => alert("Yay! Your auction is live! 🥳")}
      onError={(error) => alert("Something went wrong!")}
    >
      Create Auction
    </Web3Button>
  )
}

function App() {
    return (
      <Web3Button
        contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
        action={(contract) => {
          contract.call("cancelAuction", [0])
        }}
        onSuccess={(result) => alert("You have successfully cancelled this auction.")}
        onError={(error) => alert("Something went wrong!")}
      >
        Cancel Auction
      </Web3Button>
    )
  }

function App() {
    return (
      <Web3Button
        contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
        action={(contract) => {
          contract.call("bidInAuction", [0, 1])
        }}
        onSuccess={(result) => alert("Bid submitted 🥳")}
        onError={(error) => alert("Something went wrong!")}
      >
        Place Bid
      </Web3Button>
    )
  }

function App() {
  return (
    <Web3Button
      contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
      action={(contract) => {
        contract.call("collectAuctionPayout", [0])
      }}
      onSuccess={(result) => alert("Payout Received! 💰💰")}
      onError={(error) => alert("Something went wrong!")}
    >
    Collect Payout
  </Web3Button>
  )
}

function App() {
  return (
    <Web3Button
      contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
      action={(contract) => {
        contract.call("collectAuctionTokens", [2])
      }}
      onSuccess={(result) => alert("Payout Received! 💰💰")}
      onError={(error) => alert("Something went wrong!")}
    >
    Collect Tokens
  </Web3Button>
  )
}

function App() {
  const { contract } = useContract("0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64", "marketplace-v3");
  const {
    mutateAsync: createDirectListing,
    isLoading,
    error,
  } = useCreateDirectListing(contract);

  return (
    <Web3Button
      contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
      action={() =>
        createDirectListing({
          assetContractAddress: "0x8Da37534C58D94E338D0b6D57afF34af6CDc2E32",
          tokenId: "2",
          pricePerToken: "5",
          currencyContractAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
          isReservedListing: false,
          quantity: "1",
          startTimestamp: new Date(),
          endTimestamp: new Date(
            new Date().getTime() + 7 * 24 * 60 * 60 * 1000,
          ),
        })
      }
      onSuccess={(result) => alert("Yay! You listed an NFT! 🥳")}
      onError={(error) => alert("Something went wrong!")}
    >
      Create Direct Listing
    </Web3Button>
  );
}

function App() {
    return (
      <Web3Button
        contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
        action={(contract) => {
          contract.call("updateListing", [
            0, 
            {
                assetContractAddress: "0x8Da37534C58D94E338D0b6D57afF34af6CDc2E32",
                tokenId: "2",
                pricePerToken: "5",
                currencyContractAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
                isReservedListing: false,
                quantity: "1",
                startTimestamp: new Date(),
                endTimestamp: new Date(
                  new Date().getTime() + 7 * 24 * 60 * 60 * 1000,
                ),
              }]
            )
        }}
        onSuccess={(result) => alert("Listing Updated! 🥳")}
        onError={(error) => alert("Something went wrong!")}
      >
        Update Listing
      </Web3Button>
    )
  }

function App() {
    return (
      <Web3Button
        contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
        action={(contract) => {
          contract.call("approveBuyerForListing", [
            1, 
            "0x00...000", 
            true //_toApprove true/false
        ])
        }}
      onSuccess={(result) => alert("Buyer Approved!")}
      onError={(error) => alert("Something went wrong!")}
    >
    Approve Buyer
  </Web3Button>
  )
}

function App() {
  return (
    <Web3Button
      contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
      action={(contract) => {
        contract.call("makeOffer", [ 
          { 
            "assetContract": "0x8Da37534C58D94E338D0b6D57afF34af6CDc2E32", 
            "tokenId": "3", 
            "quantity": "1", 
            "currency": "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", 
            "totalPrice": "2", 
            "expirationTimestamp": "0" 
          }
        ])
      }}
      onSuccess={(result) => alert("Offer Submitted 🚀")}
      onError={(error) => alert("Something went wrong!")}
    >
    Make Offer
  </Web3Button>
  )
}

function App() {
    return (
      <Web3Button
        contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
        action={(contract) => {
          contract.call("cancelOffer", [0])
        }}
      onSuccess={(result) => alert("Offer Cancelled 💰")}
      onError={(error) => alert("Something went wrong!")}
    >
    Cancel Offer
  </Web3Button>
  )
}

function App() {
    return (
      <Web3Button
        contractAddress="0x14AC4F2339BAB55F8b8Fc89f89055D720142BF64"
        action={(contract) => {
          contract.call("acceptOffer", [0])
        }}
      onSuccess={(result) => alert("Offer Accepted 💰")}
      onError={(error) => alert("Something went wrong!")}
    >
    Accept Offer
  </Web3Button>
  )
}

function App() {
  const { contract } = useContract("0x2fbD1675a61841c5EAaD0Dc8B9E14338c2cAD164", "marketplace-v3");
  const {
    data: directListings,
    isLoading,
    error,
  } = useValidDirectListings(contract);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div style={{ height: "800px", overflow: "auto" }}>
      {directListings.map((listing) => (
        <div key={listing.id}>
          <p>id: {listing.id}</p>
          <p>Creator: {listing.creatorAddress}</p>
          <p>Asset Contract: {listing.assetContractAddress}</p>
          <p>TokenId: {listing.tokenId}</p>
          <p>Amount: {listing.quantity}</p>
          <p>Currency: {listing.currencyContractAddress}</p>
          {listing.currencyValuePerToken && (
            <>
              <p>Price: {listing.currencyValuePerToken._hex}</p>
              {listing.currencyValuePerToken._isBigNumber && (
                <p>Price _isBigNumber: {listing.currencyValuePerToken._isBigNumber.toString()}</p>
              )}
            </>
          )}
          <p>Price: {listing.pricePerToken}</p>
          <p>Asset: {JSON.stringify(listing.asset)}</p>
          <p>Start: {listing.startTimeInSeconds}</p>
          <p>End: {listing.endTimeInSeconds}</p>
          <p>Reserved: {listing.isReservedListing}</p>
          <p>Status: {listing.status}</p>
        </div>
      ))}
    </div>
  );
}