#Wallet Integration Example
Complete example of integrating wallets with Walbucket SDK.
#React App with @mysten/dapp-kit
import { useCurrentWallet, ConnectButton } from '@mysten/dapp-kit';
import { Walbucket } from '@walbucket/sdk';
import { useState, useEffect } from 'react';
function UploadComponent() {
const { currentWallet, isConnected } = useCurrentWallet();
const [walbucket, setWalbucket] = useState<Walbucket | null>(null);
useEffect(() => {
if (isConnected && currentWallet?.account) {
// Create SDK instance when wallet is connected
const sdk = new Walbucket({
apiKey: 'your-api-key',
network: 'testnet',
gasStrategy: 'user-pays',
userSigner: currentWallet.account, // Signer from connected wallet
});
setWalbucket(sdk);
}
}, [isConnected, currentWallet]);
const handleUpload = async (file: File) => {
if (!walbucket) {
alert('Please connect your wallet first');
return;
}
// Wallet popup will appear for user to sign transaction
try {
const result = await walbucket.upload(file, {
name: file.name,
});
console.log('Uploaded!', result.url);
} catch (error) {
if (error.message.includes('User rejected') || error.message.includes('rejected')) {
console.log('User cancelled transaction');
}
}
};
return (
<div>
<ConnectButton />
{!isConnected && <p>Connect your wallet to upload files</p>}
{walbucket && (
<input
type="file"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) handleUpload(file);
}}
/>
)}
</div>
);
}typescript
#Vanilla JavaScript/TypeScript
import { getWallets } from '@mysten/wallet-standard';
import { Walbucket } from '@walbucket/sdk';
async function setupWallet() {
// Get available wallets
const wallets = getWallets();
const wallet = wallets.find(w => w.name === 'Sui Wallet');
if (!wallet) {
throw new Error('Sui Wallet not found. Please install Sui Wallet extension.');
}
// Connect wallet (shows popup to user)
await wallet.features['standard:connect'].connect();
// Get user's account/signer from wallet
const accounts = await wallet.features['standard:connect'].getAccounts();
const signer = accounts[0];
// Create SDK with user signer
const walbucket = new Walbucket({
apiKey: 'your-api-key',
network: 'testnet',
gasStrategy: 'user-pays',
userSigner: signer, // User will sign transactions via wallet popup
});
return walbucket;
}
// Usage
const walbucket = await setupWallet();
// When uploading, wallet popup appears automatically for user to sign
const result = await walbucket.upload(file);
console.log('Uploaded!', result.url);typescript
#How It Works
- User connects wallet → Wallet extension provides a
Signerinterface - Developer passes signer to SDK → SDK stores it for transaction signing
- SDK calls transaction methods → Wallet popup appears automatically
- User approves in wallet → Transaction is signed and executed
#Related
- Wallet Integration Guide - Complete setup guide
- Gas Strategies - Learn about gas payment options