"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);
// Base Account 지갑 찾기
const baseAccount = useMemo(() => {
return wallets.find((wallet) => wallet.walletClientType === 'base_account');
}, [wallets]);
const handleGetSubAccounts = async () => {
if (!baseAccount) return;
setIsLoading(true);
try {
// Base Sepolia로 전환 (또는 메인넷의 경우 8453 사용)
await baseAccount.switchChain(84532);
const provider = await baseAccount.getEthereumProvider();
// 기존 서브 어카운트 조회
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 {
// Base Sepolia로 전환 (또는 메인넷의 경우 8453 사용)
await baseAccount.switchChain(84532);
const provider = await baseAccount.getEthereumProvider();
// 새 서브 어카운트 생성
await provider.request({
method: 'wallet_addSubAccount',
params: [{
version: '1',
account: {
type: 'create',
keys: [{
type: 'address',
publicKey: baseAccount.address
}]
}
}]
});
// 서브 어카운트 목록 새로고침
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"
>
서브 어카운트 조회
</button>
<button
onClick={handleAddSubAccount}
disabled={!baseAccount || isLoading}
className="px-4 py-2 bg-green-600 text-white rounded disabled:opacity-50"
>
서브 어카운트 생성
</button>
</div>
{subAccounts.length > 0 && (
<div>
<h4 className="font-medium mb-2">기존 서브 어카운트:</h4>
<div className="space-y-2">
{subAccounts.map((subAccount, index) => (
<div key={index} className="p-3 border rounded-md">
<p><strong>주소:</strong> {subAccount.address}</p>
<p><strong>팩토리:</strong> {subAccount.factory}</p>
<p><strong>팩토리 데이터:</strong> {subAccount.factoryData}</p>
</div>
))}
</div>
</div>
)}
</div>
);
};
