134 lines
4.7 KiB
TypeScript
134 lines
4.7 KiB
TypeScript
/**
|
|
* MultiChainAdmin Component - Multi-chain admin management
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
import { useChainId, useSwitchChain } from 'wagmi'
|
|
import { CONTRACT_ADDRESSES } from '../../config/contracts'
|
|
import toast from 'react-hot-toast'
|
|
import { chain138 } from '../../config/networks'
|
|
|
|
interface ChainConfig {
|
|
chainId: number
|
|
name: string
|
|
contractAddresses: {
|
|
mainnetTether?: string
|
|
transactionMirror?: string
|
|
}
|
|
}
|
|
|
|
const CHAIN_CONFIGS: ChainConfig[] = [
|
|
{
|
|
chainId: 1,
|
|
name: 'Ethereum Mainnet',
|
|
contractAddresses: {
|
|
mainnetTether: CONTRACT_ADDRESSES.mainnet.MAINNET_TETHER,
|
|
transactionMirror: CONTRACT_ADDRESSES.mainnet.TRANSACTION_MIRROR,
|
|
},
|
|
},
|
|
{
|
|
chainId: chain138.id,
|
|
name: chain138.name,
|
|
contractAddresses: {},
|
|
},
|
|
]
|
|
|
|
export default function MultiChainAdmin() {
|
|
const chainId = useChainId()
|
|
const { switchChain } = useSwitchChain()
|
|
const [selectedChain, setSelectedChain] = useState(chainId)
|
|
|
|
// Note: address removed from here but may be used in future for permission checks
|
|
|
|
const currentChain = CHAIN_CONFIGS.find((c) => c.chainId === chainId)
|
|
const targetChain = CHAIN_CONFIGS.find((c) => c.chainId === selectedChain)
|
|
|
|
const handleSwitchChain = () => {
|
|
if (selectedChain !== chainId) {
|
|
switchChain({ chainId: selectedChain })
|
|
toast(`Switching to ${targetChain?.name}...`, { icon: '🔄' })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-black/20 rounded-xl p-6 border border-white/10">
|
|
<h2 className="text-xl font-bold text-white mb-4">Multi-Chain Admin</h2>
|
|
<p className="text-white/70 text-sm mb-4">
|
|
Manage admin contracts across multiple chains.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-white/70 text-sm mb-2">Current Chain</label>
|
|
<div className="bg-blue-500/20 border border-blue-500/50 rounded-lg p-4">
|
|
<p className="text-blue-200 font-semibold">{currentChain?.name || 'Unknown'}</p>
|
|
<p className="text-blue-200/70 text-xs">Chain ID: {chainId}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-white/70 text-sm mb-2">Switch to Chain</label>
|
|
<select
|
|
value={selectedChain}
|
|
onChange={(e) => setSelectedChain(parseInt(e.target.value))}
|
|
className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
|
>
|
|
{CHAIN_CONFIGS.map((chain) => (
|
|
<option key={chain.chainId} value={chain.chainId}>
|
|
{chain.name} (Chain ID: {chain.chainId})
|
|
</option>
|
|
))}
|
|
</select>
|
|
{selectedChain !== chainId && (
|
|
<button
|
|
onClick={handleSwitchChain}
|
|
className="w-full mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
|
|
>
|
|
Switch Chain
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-black/20 rounded-xl p-6 border border-white/10">
|
|
<h3 className="text-lg font-bold text-white mb-4">Chain Configurations</h3>
|
|
<div className="space-y-3">
|
|
{CHAIN_CONFIGS.map((chain) => (
|
|
<div key={chain.chainId} className="bg-white/5 rounded-lg p-4">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div>
|
|
<p className="text-white font-semibold">{chain.name}</p>
|
|
<p className="text-white/60 text-xs">Chain ID: {chain.chainId}</p>
|
|
</div>
|
|
{chain.chainId === chainId && (
|
|
<span className="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs">
|
|
Active
|
|
</span>
|
|
)}
|
|
</div>
|
|
{chain.contractAddresses.mainnetTether && (
|
|
<div className="mt-2">
|
|
<p className="text-white/70 text-xs mb-1">MainnetTether:</p>
|
|
<p className="text-white/60 text-xs font-mono">
|
|
{chain.contractAddresses.mainnetTether}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{chain.contractAddresses.transactionMirror && (
|
|
<div className="mt-2">
|
|
<p className="text-white/70 text-xs mb-1">TransactionMirror:</p>
|
|
<p className="text-white/60 text-xs font-mono">
|
|
{chain.contractAddresses.transactionMirror}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|