@xion/builderkit

A collection of React components for building XION blockchain applications with ease. This library provides ready-to-use components for authentication, payments, NFT access control, and transaction handling.

Installation

npm install @xion/builderkit

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom @burnt-labs/abstraxion

Components

XionLogin

A complete authentication component for XION wallet connection.

import { XionLogin } from '@xion/builderkit';

function App() {
  return <XionLogin />;
}

MagicCheckout

A seamless payment component for processing transactions on XION.

import { MagicCheckout } from '@xion/builderkit';

function PaymentPage() {
  return (
    <MagicCheckout
      productId="product-123"
      amount="10.00"
      currency="usdc"
      onSuccess={(txHash) => console.log('Payment successful:', txHash)}
      onError={(error) => console.error('Payment failed:', error)}
    />
  );
}

NFTAccess

Gate content based on NFT ownership with customizable fallback components.

import { NFTAccess } from '@xion/builderkit';

function ExclusiveContent() {
  return (
    <NFTAccess
      nftContractAddress="xion1..."
      tokenId="123" // Optional: specific token ID
      fallbackComponent={<div>You need the special NFT to access this!</div>}
    >
      <div>🎉 Exclusive content for NFT holders!</div>
    </NFTAccess>
  );
}

TransactionToast

Wrap any transaction with automatic toast notifications.

import { TransactionToast } from '@xion/builderkit';

function MyComponent() {
  const executeTransaction = async () => {
    // Your transaction logic here
    return await someBlockchainTransaction();
  };

  return (
    <TransactionToast
      onTransaction={executeTransaction}
      pendingMessage="Processing transaction..."
      successMessage="Transaction completed!"
      errorMessage="Transaction failed:"
    >
      <button>Execute Transaction</button>
    </TransactionToast>
  );
}

Hooks

useNFTAccess

Check NFT ownership programmatically.

import { useNFTAccess } from '@xion/builderkit';

function MyComponent() {
  const { hasAccess, isLoading, error } = useNFTAccess(
    'xion1...', // contract address
    '123',      // token ID (optional)
    'xion1...'  // user address
  );

  if (isLoading) return <div>Checking NFT ownership...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return hasAccess ? <div>Access granted!</div> : <div>Access denied</div>;
}

Utilities

The library also exports various utility functions:

import {
  xionToBaseUnits,
  createTransferMessage,
  getTransactionExplorerLink,
  savePaymentSession,
  // ... and more
} from '@xion/builderkit';

Setup Requirements

1. Abstraxion Provider

Wrap your app with the Abstraxion provider:

import { AbstraxionProvider } from '@burnt-labs/abstraxion';

function App() {
  return (
    <AbstraxionProvider
      config={{
        // Your Abstraxion config
      }}
    >
      {/* Your app components */}
    </AbstraxionProvider>
  );
}

2. Toast Container

Add the toast container for transaction notifications:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div>
      {/* Your app */}
      <ToastContainer />
    </div>
  );
}

3. Styles

Import the required CSS files:

import '@burnt-labs/abstraxion/dist/index.css';
import '@burnt-labs/ui/dist/index.css';
import 'react-toastify/dist/ReactToastify.css';

TypeScript Support

This library is built with TypeScript and includes full type definitions. All components and hooks are fully typed for the best development experience.

Examples

Check out the examples directory for complete implementation examples.

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

License

MIT License - see LICENSE file for details.

Support

For support and questions, please open an issue on our GitHub repository.