hooks#useNft TypeScript Examples

The following examples show how to use hooks#useNft. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: Card.tsx From gear-js with GNU General Public License v3.0

6 votes

function Card({ id, price, isAuction, isVisible }: Props) {
  const nft = useNft(id);

  const className = clsx(styles.card, !isVisible && styles.hidden);
  const buttonText = isAuction ? 'Make bid' : 'Buy now';
  const priceText = isAuction ? 'Top bid' : 'Price';
  const to = `/listing/${id}`;
  const text = `#${id}`;

  return nft ? (
    <Link to={to} className={className}>
      <img src={`${IPFS_GATEWAY_ADDRESS}/${nft.media}`} alt={nft.name} className={styles.image} />
      <div>
        <div className={styles.body}>
          <div>
            <h3 className={styles.heading}>{nft.name}</h3>
            <p className={styles.text}>{text}</p>
          </div>
          <div className={styles.value}>
            <h3 className={styles.heading}>{priceText}</h3>
            <p className={styles.text}>{price || 'None'}</p>
          </div>
        </div>
      </div>
      {price && <Button text={buttonText} block />}
    </Link>
  ) : null;
}

Example #2

Source File: Listing.tsx From gear-js with GNU General Public License v3.0

5 votes

function Listing() {
  const { id } = useParams() as Params;
  const { account } = useAccount();
  const nft = useNft(id);

  const [details, setDetails] = useState<NFTDetails>();
  const { royalty, rarity, attributes } = details || {};

  const marketNft = useMarketNft(id);
  const { price, auction, offers } = marketNft || {};
  const { startedAt, endedAt, currentPrice, bids } = auction || {};

  const isSale = !!price;
  const isAuction = !!auction;
  const isOwner = account?.decodedAddress === nft?.ownerId;

  useEffect(() => {
    const { reference } = nft || {};

    if (reference) {
      const path = `${IPFS_GATEWAY_ADDRESS}/${reference}`;

      fetch(path)
        .then((response) => response.json())
        .then(setDetails);
    }
  }, [nft]);

  // eslint-disable-next-line no-nested-ternary
  return nft ? (
    // eslint-disable-next-line no-nested-ternary
    isSale ? (
      <SaleListing
        id={id}
        isOwner={isOwner}
        heading={`${nft.name} #${id}`}
        description={nft.description}
        image={nft.media}
        owner={nft.ownerId}
        price={price}
        offers={offers || []}
        rarity={rarity}
        royalty={royalty}
        attrs={attributes}
      />
    ) : isAuction ? (
      <AuctionListing
        id={id}
        isOwner={isOwner}
        heading={`${nft.name} #${id}`}
        description={nft.description}
        image={nft.media}
        owner={nft.ownerId}
        price={currentPrice}
        offers={bids || []}
        rarity={rarity}
        royalty={royalty}
        attrs={attributes}
        startedAt={startedAt || ''}
        endedAt={endedAt || ''}
      />
    ) : (
      <OwnerListing
        id={id}
        isOwner={isOwner}
        heading={`${nft.name} #${id}`}
        description={nft.description}
        image={nft.media}
        owner={nft.ownerId}
        offers={offers || []}
        rarity={rarity}
        royalty={royalty}
        attrs={attributes}
      />
    )
  ) : null;
}

Example #3

Source File: hooks.ts From gear-js with GNU General Public License v3.0

5 votes

function useListing() {
  const { id } = useParams() as Params;
  const { account } = useAccount();

  const nft = useNft(id);
  const { name, description, ownerId, media, reference } = nft || {};

  const [details, setDetails] = useState<NFTDetails>();
  const { royalty, rarity, attributes } = details || {};

  const marketNft = useMarketNft(id);
  const { price, auction, offers } = marketNft || {};
  const { currentPrice, bids } = auction || {};

  const isSale = !!price;
  const isAuction = !!auction;
  const isListed = isSale || isAuction;
  const isOwner = account ? GearKeyring.decodeAddress(account.address) === ownerId : false;

  useEffect(() => {
    if (reference) {
      fetch(reference)
        .then((response) => response.json())
        .then(setDetails);
    }
  }, [reference]);

  const heading = `${name} #${id}`;

  return {
    heading,
    description,
    ownerId,
    media,
    reference,
    royalty,
    rarity,
    attributes,
    price,
    offers,
    currentPrice,
    bids,
    isSale,
    isAuction,
    isListed,
    isOwner,
  };
}