CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration.mddocs/

Configuration and Theming

Web3ConfigProvider for application-wide configuration and Ant Design theme integration with Web3-specific extensions.

Capabilities

Web3ConfigProvider

Enhanced Web3 configuration provider with Ant Design theme integration, providing Web3 state management and configuration to all child components.

/**
 * Enhanced Web3 config provider with Ant Design theme integration
 * @param theme - Extended theme configuration with web3Components
 * @param children - Child components that will receive Web3 context
 * @param account - Current connected account information
 * @param chain - Current blockchain network
 * @param balance - Account balance information
 * @param availableWallets - List of available wallets for connection
 * @param availableChains - List of supported blockchain networks
 * @param extendsContextFromParent - Whether to extend context from parent provider
 * @param addressPrefix - Address prefix for display (e.g., '0x')
 * @param connect - Function to connect to a wallet
 * @param disconnect - Function to disconnect from wallet
 * @param switchChain - Function to switch blockchain networks
 * @param getNFTMetadata - Function to fetch NFT metadata
 * @param sign - Signing configuration for wallet authentication
 * @param locale - Localization overrides for components
 */
const Web3ConfigProvider: React.FC<{ theme?: Web3ThemeConfig } & Web3ConfigProviderProps>;

interface Web3ConfigProviderProps extends UniversalWeb3ProviderInterface {
  children?: React.ReactNode;
  locale?: Locale;
}

interface Web3ThemeConfig extends ThemeConfig {
  web3Components?: {
    ConnectModal?: Partial<ConnectModalComponentToken>;
  };
}

interface UniversalWeb3ProviderInterface {
  account?: Account;
  chain?: Chain;
  balance?: Balance;
  availableWallets?: Wallet[];
  availableChains?: Chain[];
  extendsContextFromParent?: boolean;
  addressPrefix?: string | false;
  connect?: (wallet?: Wallet, options?: ConnectOptions) => Promise<void | Account>;
  disconnect?: () => Promise<void>;
  switchChain?: (chain: Chain) => Promise<void>;
  getNFTMetadata?: (params: { address: string; tokenId?: bigint }) => Promise<NFTMetadata>;
  sign?: SignConfig;
}

Usage Examples:

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

// Basic configuration
function App() {
  return (
    <Web3ConfigProvider>
      <MyDApp />
    </Web3ConfigProvider>
  );
}

// With wallet and chain configuration
function AppWithWallets() {
  const availableWallets = [
    {
      name: "MetaMask",
      remark: "Connect using MetaMask wallet",
      icon: <MetaMaskIcon />,
      extensions: [{
        key: 'Chrome',
        browserIcon: 'chrome',
        browserName: 'Chrome',
        link: 'https://metamask.io',
        description: 'MetaMask browser extension'
      }]
    },
    {
      name: "WalletConnect",
      remark: "Scan QR code with your mobile wallet",
      icon: <WalletConnectIcon />,
      universalProtocol: { link: "wc:" }
    }
  ];
  
  const availableChains = [
    {
      id: 1,
      name: "Ethereum",
      type: ChainType.EVM,
      icon: <EthereumIcon />,
      nativeCurrency: {
        name: "Ether",
        symbol: "ETH",
        decimal: 18
      }
    },
    {
      id: 137,
      name: "Polygon",
      type: ChainType.EVM,
      icon: <PolygonIcon />,
      nativeCurrency: {
        name: "MATIC",
        symbol: "MATIC",
        decimal: 18
      }
    }
  ];
  
  return (
    <Web3ConfigProvider
      availableWallets={availableWallets}
      availableChains={availableChains}
      addressPrefix="0x"
    >
      <MyDApp />
    </Web3ConfigProvider>
  );
}

// With custom theme
function ThemedApp() {
  const web3Theme = {
    token: {
      colorPrimary: '#1890ff',
    },
    web3Components: {
      ConnectModal: {
        borderRadius: 12,
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
        padding: 24
      }
    }
  };
  
  return (
    <Web3ConfigProvider theme={web3Theme}>
      <MyDApp />
    </Web3ConfigProvider>
  );
}

// With connection handlers
function AppWithHandlers() {
  const handleConnect = async (wallet, options) => {
    console.log('Connecting to:', wallet?.name);
    // Custom connection logic
    try {
      const account = await connectWallet(wallet, options);
      return account;
    } catch (error) {
      console.error('Connection failed:', error);
      throw error;
    }
  };
  
  const handleDisconnect = async () => {
    console.log('Disconnecting wallet');
    // Custom disconnection logic
    await disconnectWallet();
  };
  
  const handleChainSwitch = async (chain) => {
    console.log('Switching to chain:', chain.name);
    // Custom chain switching logic
    await switchToChain(chain.id);
  };
  
  return (
    <Web3ConfigProvider
      connect={handleConnect}
      disconnect={handleDisconnect}
      switchChain={handleChainSwitch}
    >
      <MyDApp />
    </Web3ConfigProvider>
  );
}

// With NFT metadata fetching
function AppWithNFTs() {
  const fetchNFTMetadata = async ({ address, tokenId }) => {
    const response = await fetch(`/api/nft/${address}/${tokenId}`);
    if (!response.ok) throw new Error('Failed to fetch NFT metadata');
    return response.json();
  };
  
  return (
    <Web3ConfigProvider getNFTMetadata={fetchNFTMetadata}>
      <MyDApp />
    </Web3ConfigProvider>
  );
}

// With signing configuration
function AppWithSigning() {
  const signConfig = {
    signIn: async (address) => {
      const message = `Sign in with wallet ${address}`;
      const signature = await signMessage(message);
      await authenticateUser(address, signature);
    },
    signOut: async () => {
      await logoutUser();
    }
  };
  
  return (
    <Web3ConfigProvider sign={signConfig}>
      <MyDApp />
    </Web3ConfigProvider>
  );
}

Theme Configuration

Web3-specific theme extensions for customizing component appearance and behavior.

/**
 * Extended theme configuration interface for Web3 components
 */
interface Web3ThemeConfig extends ThemeConfig {
  web3Components?: {
    ConnectModal?: Partial<ConnectModalComponentToken>;
  };
}

interface ConnectModalComponentToken {
  borderRadius?: number;
  boxShadow?: string;
  padding?: number;
  headerHeight?: number;
  footerHeight?: number;
  walletItemPadding?: number;
  walletItemBorderRadius?: number;
  qrCodeSize?: number;
}

interface ThemeConfig {
  token?: {
    colorPrimary?: string;
    colorSuccess?: string;
    colorWarning?: string;
    colorError?: string;
    colorInfo?: string;
    colorBgBase?: string;
    colorTextBase?: string;
    fontFamily?: string;
    fontSize?: number;
    borderRadius?: number;
  };
  components?: {
    Button?: ComponentToken;
    Modal?: ComponentToken;
    Select?: ComponentToken;
    Input?: ComponentToken;
  };
}

Usage Examples:

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

// Custom Web3 theme
const customWeb3Theme = {
  token: {
    colorPrimary: '#722ed1', // Purple primary color
    colorBgBase: '#f5f5f5',
    borderRadius: 8,
  },
  web3Components: {
    ConnectModal: {
      borderRadius: 16,
      boxShadow: '0 8px 32px rgba(0, 0, 0, 0.12)',
      padding: 32,
      headerHeight: 64,
      walletItemPadding: 16,
      walletItemBorderRadius: 12,
      qrCodeSize: 200
    }
  },
  components: {
    Button: {
      borderRadius: 8,
      fontSize: 16
    },
    Modal: {
      borderRadius: 12
    }
  }
};

function CustomThemedApp() {
  return (
    <Web3ConfigProvider theme={customWeb3Theme}>
      <ConnectButton />
      <ConnectModal />
    </Web3ConfigProvider>
  );
}

// Dark theme configuration
const darkWeb3Theme = {
  token: {
    colorBgBase: '#141414',
    colorTextBase: '#ffffff',
    colorPrimary: '#1890ff',
  },
  web3Components: {
    ConnectModal: {
      borderRadius: 8,
      boxShadow: '0 4px 16px rgba(255, 255, 255, 0.1)',
      padding: 24
    }
  }
};

// Dynamic theme switching
function DynamicThemedApp() {
  const [isDark, setIsDark] = useState(false);
  
  const theme = isDark ? darkWeb3Theme : customWeb3Theme;
  
  return (
    <Web3ConfigProvider theme={theme}>
      <button onClick={() => setIsDark(!isDark)}>
        Switch to {isDark ? 'Light' : 'Dark'} Theme
      </button>
      <MyDApp />
    </Web3ConfigProvider>
  );
}

Localization Configuration

Comprehensive localization support for all Web3 components with built-in English and Chinese locales.

/**
 * Locale configuration for Web3 components
 */
interface Locale {
  ConnectButton?: Partial<RequiredLocale['ConnectButton']>;
  ConnectModal?: Partial<RequiredLocale['ConnectModal']>;
  NFTCard?: Partial<RequiredLocale['NFTCard']>;
  Address?: Partial<RequiredLocale['Address']>;
  TokenSelect?: Partial<RequiredLocale['TokenSelect']>;
  CryptoInput?: Partial<RequiredLocale['CryptoInput']>;
  PayPanel?: Partial<RequiredLocale['PayPanel']>;
}

interface RequiredLocale {
  ConnectButton: {
    connect: string;
    disconnect: string;
    copyAddress: string;
    copied: string;
    disconnected: string;
    walletAddress: string;
  };
  ConnectModal: {
    title: string;
    walletGuideTitle: string;
    walletGuideInfos: Array<{
      title: string;
      description: string;
    }>;
    qrCodePanelTitle: string;
    qrCodePanelTip: string;
    qrCodePanelConnecting: string;
    qrCodePanelConnectingTip: string;
  };
  Address: {
    copied: string;
    copy: string;
  };
  NFTCard: {
    actionText: string;
  };
  TokenSelect: {
    placeholder: string;
  };
  CryptoInput: {
    placeholder: string;
    max: string;
  };
  PayPanel: {
    generalTips: string;
  };
}

Usage Examples:

import { Web3ConfigProvider, en_US, zh_CN } from "@ant-design/web3";

// English locale (default)
<Web3ConfigProvider locale={en_US}>
  <MyDApp />
</Web3ConfigProvider>

// Chinese locale
<Web3ConfigProvider locale={zh_CN}>
  <MyDApp />
</Web3ConfigProvider>

// Custom locale overrides
const customLocale = {
  ConnectButton: {
    connect: "Connect Your Wallet",
    disconnect: "Disconnect Wallet",
    copied: "Address Copied!",
    copyAddress: "Copy Wallet Address"
  },
  ConnectModal: {
    title: "Choose Your Wallet",
    qrCodePanelTitle: "Scan QR Code",
    qrCodePanelTip: "Use your mobile wallet to scan this QR code"
  },
  Address: {
    copy: "Click to copy",
    copied: "Successfully copied!"
  }
};

<Web3ConfigProvider locale={customLocale}>
  <MyDApp />
</Web3ConfigProvider>

// Dynamic locale switching
function MultiLanguageApp() {
  const [locale, setLocale] = useState(en_US);
  
  return (
    <Web3ConfigProvider locale={locale}>
      <select 
        value={locale === en_US ? 'en' : 'zh'}
        onChange={(e) => setLocale(e.target.value === 'en' ? en_US : zh_CN)}
      >
        <option value="en">English</option>
        <option value="zh">中文</option>
      </select>
      <MyDApp />
    </Web3ConfigProvider>
  );
}

// Partial locale override
const partialLocale = {
  ConnectButton: {
    connect: "Link Wallet", // Custom text
    disconnect: "Unlink Wallet" // Custom text
    // Other values inherited from default locale
  }
};

Configuration Context

ConfigContext

React context providing Web3 configuration to child components.

/**
 * React context for Web3 configuration
 */
const ConfigContext: React.Context<ConfigConsumerProps>;

interface ConfigConsumerProps extends UniversalWeb3ProviderInterface {
  locale?: Locale;
}

Usage Example:

import { useContext } from 'react';
import { ConfigContext } from "@ant-design/web3";

function MyComponent() {
  const config = useContext(ConfigContext);
  
  return (
    <div>
      <p>Current account: {config.account?.address}</p>
      <p>Current chain: {config.chain?.name}</p>
      <button onClick={() => config.connect?.()}>
        {config.locale?.ConnectButton?.connect || 'Connect'}
      </button>
    </div>
  );
}

Advanced Configuration Patterns

Nested Providers

// Parent provider with base configuration
<Web3ConfigProvider
  availableWallets={baseWallets}
  availableChains={baseChains}
>
  {/* Child provider extending parent context */}
  <Web3ConfigProvider
    extendsContextFromParent={true}
    addressPrefix="custom:"
    locale={customLocale}
  >
    <MySpecialComponent />
  </Web3ConfigProvider>
</Web3ConfigProvider>

Environment-Based Configuration

const getWeb3Config = () => {
  if (process.env.NODE_ENV === 'development') {
    return {
      availableChains: [...mainnetChains, ...testnetChains],
      addressPrefix: 'dev:',
      theme: developmentTheme
    };
  }
  
  return {
    availableChains: mainnetChains,
    addressPrefix: '0x',
    theme: productionTheme
  };
};

<Web3ConfigProvider {...getWeb3Config()}>
  <MyDApp />
</Web3ConfigProvider>

Testing Configuration

// Test configuration with mock providers
const testConfig = {
  account: { 
    address: "0x1234567890abcdef1234567890abcdef12345678",
    status: "connected" 
  },
  chain: { id: 1337, name: "Test Network" },
  connect: jest.fn().mockResolvedValue(mockAccount),
  disconnect: jest.fn().mockResolvedValue(undefined),
  switchChain: jest.fn().mockResolvedValue(undefined)
};

<Web3ConfigProvider {...testConfig}>
  <ComponentUnderTest />
</Web3ConfigProvider>

docs

address-display.md

common-types.md

configuration.md

crypto-components.md

hooks.md

index.md

nft-components.md

payment.md

wallet-connection.md

tile.json