tessl/npm-ant-design--web3

Efficient React components for building Web3 dApps with comprehensive wallet integration and blockchain UI components.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

NFT Components

Name: tessl/npm-ant-design--web3
Author: tessl

Components for displaying and interacting with NFTs including automatic metadata loading, image display, and complete card layouts with pricing and actions.

Capabilities

NFTCard

Complete NFT card component providing image display, metadata rendering, price information, and interactive actions with support for different display styles.

/**
 * Complete NFT card component with image, metadata, price, and actions
 * @param address - NFT contract address
 * @param tokenId - NFT token ID
 * @param type - Card display style: 'default' | 'pithy'
 * @param price - Price display configuration
 * @param like - Like functionality configuration
 * @param showAction - Whether to show action button
 * @param actionText - Custom action button text
 * @param onActionClick - Action button callback
 * @param errorRender - Custom error display function
 * @param getNFTMetadata - Custom metadata fetcher function
 */
const NFTCard: React.FC<NFTCardProps>;

interface NFTCardProps {
  address?: string;
  tokenId?: number | bigint;
  type?: 'default' | 'pithy';
  price?: CryptoPriceProps;
  like?: {
    liked?: boolean;
    likeCount?: number;
    onLike?: (liked: boolean) => void;
  };
  showAction?: boolean;
  actionText?: ReactNode;
  onActionClick?: () => void;
  errorRender?: (e: Error) => ReactNode;
  getNFTMetadata?: UniversalWeb3ProviderInterface['getNFTMetadata'];
}

interface CryptoPriceProps {
  value?: bigint;
  symbol?: string;
  decimals?: number;
  chain?: Chain;
  icon?: boolean | React.ReactNode;
  fixed?: number;
  format?: (value: bigint, decimals: number) => string;
}

Usage Examples:

import { NFTCard } from "@ant-design/web3";

// Basic NFT card
<NFTCard 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
/>

// NFT card with price and action
<NFTCard 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  type="default"
  price={{
    value: BigInt("1000000000000000000"), // 1 ETH in wei
    symbol: "ETH",
    decimals: 18,
    fixed: 3
  }}
  showAction
  actionText="Buy Now"
  onActionClick={() => {
    console.log('NFT purchase clicked');
  }}
/>

// Compact pithy style with like functionality
<NFTCard 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  type="pithy"
  like={{
    liked: true,
    likeCount: 42,
    onLike: (liked) => {
      console.log('NFT liked:', liked);
    }
  }}
/>

// Custom error handling
<NFTCard 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  errorRender={(error) => (
    <div style={{ padding: 20, color: 'red' }}>
      Failed to load NFT: {error.message}
    </div>
  )}
/>

// Custom metadata fetcher
<NFTCard 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  getNFTMetadata={async ({ address, tokenId }) => {
    const response = await fetch(`/api/nft/${address}/${tokenId}`);
    return response.json();
  }}
/>

NFTImage

Component for displaying NFT images with automatic metadata loading and fallback handling.

/**
 * Component for displaying NFT images with automatic metadata loading
 * @param address - NFT contract address
 * @param tokenId - NFT token ID
 * @param getNFTMetadata - Metadata fetcher function
 * Extends ImageProps from Ant Design for additional image properties
 */
const NFTImage: React.FC<NFTCardProps>;

interface NFTCardProps extends Omit<ImageProps, 'src'> {
  address?: string;
  tokenId?: bigint | number;
  getNFTMetadata?: UniversalWeb3ProviderInterface['getNFTMetadata'];
}

interface ImageProps {
  alt?: string;
  width?: string | number;
  height?: string | number;
  placeholder?: React.ReactNode;
  preview?: boolean | PreviewProps;
  fallback?: string;
  loading?: 'eager' | 'lazy';
  onError?: (event: Event) => void;
  onLoad?: (event: Event) => void;
}

Usage Examples:

import { NFTImage } from "@ant-design/web3";

// Basic NFT image
<NFTImage 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
/>

// NFT image with custom dimensions and preview
<NFTImage 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  width={300}
  height={300}
  preview={true}
  alt="Bored Ape #1234"
/>

// NFT image with fallback and loading states
<NFTImage 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  fallback="https://via.placeholder.com/300x300?text=NFT+Not+Found"
  placeholder={
    <div style={{ width: 300, height: 300, background: '#f0f0f0' }}>
      Loading NFT...
    </div>
  }
  onError={(e) => console.log('Image load error:', e)}
  onLoad={() => console.log('Image loaded successfully')}
/>

// Custom metadata fetcher
<NFTImage 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  getNFTMetadata={async ({ address, tokenId }) => {
    // Custom IPFS gateway or API endpoint
    const response = await fetch(
      `https://api.opensea.io/api/v1/asset/${address}/${tokenId}/`
    );
    const data = await response.json();
    return {
      name: data.name,
      description: data.description,
      image: data.image_url,
      attributes: data.traits
    };
  }}
/>

Types

NFTMetadata Interface

interface NFTMetadata {
  name?: string;
  description?: string;
  image?: string;
  dna?: string;
  edition?: string | number;
  date?: number;
  attributes?: Array<{
    trait_type?: string;
    value?: string;
  }>;
  compiler?: string;
}

UniversalWeb3ProviderInterface NFT Methods

interface UniversalWeb3ProviderInterface {
  getNFTMetadata?: (params: { 
    address: string; 
    tokenId?: bigint 
  }) => Promise<NFTMetadata>;
}

Utility Functions

Web3 Asset Loading

/**
 * Converts IPFS URLs to HTTP URLs for asset loading
 * @param url - IPFS or HTTP URL
 * @returns HTTP URL or undefined
 */
function getWeb3AssetUrl(url?: string): string | undefined;

/**
 * Fetches and parses JSON from Web3 asset URLs
 * @param url - Asset URL to fetch
 * @returns Parsed JSON data
 */
async function requestWeb3Asset<T = any>(url: string): Promise<T>;

Usage Examples:

import { getWeb3AssetUrl, requestWeb3Asset } from "@ant-design/web3";

// Convert IPFS URL to HTTP
const ipfsUrl = "ipfs://QmYjtig7VJQ6XsnUjqqJvj7QaMcCAwtrgNdahSiFofrE7o";
const httpUrl = getWeb3AssetUrl(ipfsUrl);
// Returns: "https://ipfs.io/ipfs/QmYjtig7VJQ6XsnUjqqJvj7QaMcCAwtrgNdahSiFofrE7o"

// Fetch NFT metadata
const metadata = await requestWeb3Asset<NFTMetadata>(
  "https://ipfs.io/ipfs/QmYjtig7VJQ6XsnUjqqJvj7QaMcCAwtrgNdahSiFofrE7o"
);
console.log('NFT Name:', metadata.name);
console.log('NFT Image:', metadata.image);

Error Handling

NFT components include comprehensive error handling:

Loading States: Components show loading indicators while fetching metadata
Error Boundaries: Graceful fallback rendering when metadata loading fails
Custom Error Rendering: errorRender prop allows custom error display
Fallback Images: Support for fallback images when NFT image fails to load
Network Resilience: Automatic retry logic for failed metadata requests

Example Error Handling:

import { NFTCard } from "@ant-design/web3";

<NFTCard 
  address="0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"
  tokenId={1234}
  errorRender={(error) => (
    <div className="nft-error">
      <h4>Unable to load NFT</h4>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>
        Try Again
      </button>
    </div>
  )}
/>