import React, { useEffect, useState } from 'react';
import axios from 'axios';
const ETHERSCAN_APIS = {
ethereum: {
baseURL: 'https://api.etherscan.io/api',
apiKey: 'YOUR_ETHERSCAN_API_KEY', // 여기에 자신의 API Key를 입력해야 합니다.
},
arbitrum: {
baseURL: 'https://api.arbiscan.io/api',
apiKey: 'YOUR_ARBISCAN_API_KEY', // 여기에 자신의 API Key를 입력해야 합니다.
},
optimism: {
baseURL: 'https://api-optimistic.etherscan.io/api',
apiKey: 'YOUR_OPTIMISM_API_KEY', // 여기에 자신의 API Key를 입력해야 합니다.
},
};
interface BalanceResult {
chain: string;
ether: string;
}
const WalletBalances: React.FC<{ address: string }> = ({ address }) => {
const [balances, setBalances] = useState<BalanceResult[]>([]);
useEffect(() => {
const fetchBalances = async () => {
const results: BalanceResult[] = [];
for (const [chain, config] of Object.entries(ETHERSCAN_APIS)) {
try {
const res = await axios.get(config.baseURL, {
params: {
module: 'account',
action: 'balance',
address,
apikey: config.apiKey,
},
});
const wei = res.data.result;
const ether = (Number(wei) / 1e18).toFixed(4);
results.push({ chain, ether });
} catch (error) {
console.error(`${chain} 오류 발생`, error);
}
}
setBalances(results);
};
if (address) {
fetchBalances();
}
}, [address]);
return (
<div className="p-4">
<h2 className="text-xl font-bold mb-2">지갑 잔액 정보</h2>
<ul>
{balances.map(({ chain, ether }) => (
<li key={chain} className="mb-1">
*{chain}*: {ether} ETH
</li>
))}
</ul>
</div>
);
};
export default WalletBalances;