"use client";
import { useState, useMemo } from "react";
import { useWallets } from "@privy-io/react-auth";
const SubAccounts = () => {
const { wallets } = useWallets();
const [subAccounts, setSubAccounts] = useState<
{
address: string;
factory: string;
factoryData: string;
}[]
>([]);
const [isLoading, setIsLoading] = useState(false);
// Find the Base Account wallet
const baseAccount = useMemo(() => {
return wallets.find((wallet) => wallet.walletClientType === 'base_account');
}, [wallets]);
const handleGetSubAccounts = async () => {
if (!baseAccount) return;
setIsLoading(true);
try {
// Switch to Base Sepolia (or Base Mainnet - use 8453 for mainnet)
await baseAccount.switchChain(84532);
const provider = await baseAccount.getEthereumProvider();
// Get existing Sub Accounts
const response = await provider.request({
method: 'wallet_getSubAccounts',
params: [{
account: baseAccount.address,
domain: window.location.origin
}]
});
const { subAccounts: existingSubAccounts } = response;
setSubAccounts(existingSubAccounts || []);
} catch (error) {
console.error("Error getting Sub Accounts:", error);
} finally {
setIsLoading(false);
}
};
const handleAddSubAccount = async () => {
if (!baseAccount) return;
setIsLoading(true);
try {
// Switch to Base Sepolia (or Base Mainnet - use 8453 for mainnet)
await baseAccount.switchChain(84532);
const provider = await baseAccount.getEthereumProvider();
// Create new Sub Account
await provider.request({
method: 'wallet_addSubAccount',
params: [{
version: '1',
account: {
type: 'create',
keys: [{
type: 'address',
publicKey: baseAccount.address
}]
}
}]
});
// Refresh the Sub Accounts list
await handleGetSubAccounts();
} catch (error) {
console.error("Error creating Sub Account:", error);
} finally {
setIsLoading(false);
}
};
return (
<div className="space-y-4">
<div className="flex gap-4">
<button
onClick={handleGetSubAccounts}
disabled={!baseAccount || isLoading}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
>
Get Sub Accounts
</button>
<button
onClick={handleAddSubAccount}
disabled={!baseAccount || isLoading}
className="px-4 py-2 bg-green-600 text-white rounded disabled:opacity-50"
>
Create Sub Account
</button>
</div>
{subAccounts.length > 0 && (
<div>
<h4 className="font-medium mb-2">Existing Sub Accounts:</h4>
<div className="space-y-2">
{subAccounts.map((subAccount, index) => (
<div key={index} className="p-3 border rounded-md">
<p><strong>Address:</strong> {subAccount.address}</p>
<p><strong>Factory:</strong> {subAccount.factory}</p>
<p><strong>Factory Data:</strong> {subAccount.factoryData}</p>
</div>
))}
</div>
</div>
)}
</div>
);
};