Components
Pre-built React components for common Tezos dApp functionality.
WalletConnection
Modern wallet connection component with automatic state restoration and multi-wallet support.
Wallet Connection
Features
- ✅ Automatic wallet detection and initialization
- ✅ Persistent connections across page refreshes
- ✅ Loading states and error handling
- ✅ Multi-wallet support (Beacon + Kukai)
- ✅ Responsive design with mobile support
Usage
import WalletConnection from "@/components/layout/connect/WalletConnection";
export function Header() {
return (
<header className="flex justify-between items-center p-4">
<h1>My Tezos DApp</h1>
<WalletConnection />
</header>
);
}WalletProvider
Root provider component that handles wallet initialization and state management for the entire app.
Setup in Layout
// app/layout.tsx
import { WalletProvider } from "@/components/providers/wallet-provider";
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>
<WalletProvider>
{children}
</WalletProvider>
</ThemeProvider>
</body>
</html>
);
}⚡ Auto-Initialization
The WalletProvider automatically checks for existing wallet connections on app startup and restores the user's wallet state without requiring re-connection.
TransactionForm
A form component for sending XTZ transactions with validation, gas estimation, and confirmation tracking.
Send XTZ
Props
| onSuccess | Function - Callback when transaction succeeds |
| onError | Function - Callback when transaction fails |
| defaultRecipient | string - Pre-fill recipient address |
| disabled | boolean - Disable the form |
Code Example
import { TransactionForm } from "@/components/transaction-form";
export function SendPage() {
const handleSuccess = (opHash: string) => {
console.log("Transaction successful:", opHash);
};
const handleError = (error: Error) => {
console.error("Transaction failed:", error);
};
return (
<div className="max-w-md mx-auto">
<TransactionForm
onSuccess={handleSuccess}
onError={handleError}
/>
</div>
);
}SmartContractInteraction
Component for interacting with SmartPy contracts - call methods, view storage, and handle parameters. Includes examples of classic SmartPy contracts.
Contract Interaction
Props
| contractAddress | string - Tezos contract address (KT1...) |
| onSuccess | Function - Callback when operation succeeds |
| onError | Function - Callback when operation fails |
| entryPoints | string[] - Available contract entry points |
NFTGallery
Display and manage FA2 tokens (NFTs) with metadata, images, and transfer functionality.
NFT Collection
Token #1
Demo Collection
Token #2
Demo Collection
Token #3
Demo Collection
Props
| walletAddress | string - Owner wallet address |
| contractAddresses | string[] - FA2 contract addresses to query |
| onTransfer | Function - Callback for NFT transfers |
| showTransferButton | boolean - Show transfer functionality |
useTezos Hook
The main hook for accessing Tezos functionality throughout your app.
Basic Usage
import { useTezos } from "@/lib/tezos/useTezos";
export function MyComponent() {
const {
Tezos,
address,
wallet,
isInitialized,
connectWallet,
disconnectWallet
} = useTezos();
if (!isInitialized) {
return <div>Initializing wallets...</div>;
}
return (
<div>
{address ? (
<div>Connected: {address}</div>
) : (
<button onClick={connectWallet}>
Connect Wallet
</button>
)}
</div>
);
}Returned Properties
| Tezos | TezosToolkit - Main Taquito instance |
| address | string | null - Connected wallet address |
| wallet | BeaconWallet | null - Beacon wallet instance |
| kukai | KukaiEmbed | null - Kukai wallet instance |
| isInitialized | boolean - Whether wallets are initialized |
| connectWallet | () => Promise<void> - Connect Beacon wallet |
| connectKukai | () => Promise<void> - Connect Kukai wallet |
| disconnectWallet | () => Promise<void> - Disconnect wallet |