Skip to content

Commit

Permalink
improve UI with no wrapped tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@0age
0age committed Dec 10, 2024
1 parent b0218fa commit db75073
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 171 deletions.
336 changes: 170 additions & 166 deletions frontend/src/components/BalanceDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,22 +38,6 @@ export function BalanceDisplay({

if (!isConnected) return null;

if (isLoading || resourceLocksLoading) {
return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[#00ff00]"></div>
</div>
);
}

if (error) {
return (
<div className="text-red-500 p-4 rounded-lg border border-red-500">
Error: {error}
</div>
);
}

return (
<div className="space-y-4">
<div className="flex justify-between items-center">
Expand All @@ -66,185 +50,205 @@ export function BalanceDisplay({
</button>
</div>

<div className="space-y-4">
{formattedBalances.map((balance) => {
const resourceLock = resourceLocksData?.resourceLocks.items.find(
(item) =>
item.resourceLock.lockId === balance.lockId &&
item.chainId === balance.chainId
);
{isLoading || resourceLocksLoading ? (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[#00ff00]"></div>
</div>
) : error ? (
<div className="text-red-500 p-4 rounded-lg border border-red-500">
Error: {error}
</div>
) : !formattedBalances.length ? (
<div className="p-6 text-center bg-gray-800 rounded-lg">
<p className="text-gray-300">
Unable to locate any resource locks that use this allocator. Deposit
ETH or ERC20 tokens to get started.
</p>
</div>
) : (
<div className="space-y-4">
{formattedBalances.map((balance) => {
const resourceLock = resourceLocksData?.resourceLocks.items.find(
(item) =>
item.resourceLock.lockId === balance.lockId &&
item.chainId === balance.chainId
);

const withdrawableAt = parseInt(balance.withdrawableAt || '0');
const canExecuteWithdrawal =
parseInt(balance.withdrawalStatus.toString()) !== 0 &&
withdrawableAt <= currentTime;
const withdrawableAt = parseInt(balance.withdrawableAt || '0');
const canExecuteWithdrawal =
parseInt(balance.withdrawalStatus.toString()) !== 0 &&
withdrawableAt <= currentTime;

return (
<div
key={`${balance.chainId}-${balance.lockId}`}
className="p-4 bg-gray-800 rounded-lg"
>
{/* Header with Token Info and Chain Name */}
<div className="flex justify-between items-baseline mb-4">
<div className="text-base font-medium text-gray-300">
{balance.token?.name} ({balance.token?.symbol})
</div>
<div className="flex items-baseline gap-6 text-xs text-gray-400 ml-8">
<div>Chain: {getChainName(balance.chainId)}</div>
<div>
Lock ID:{' '}
<span className="font-mono">
{formatLockId(balance.lockId)}
</span>
return (
<div
key={`${balance.chainId}-${balance.lockId}`}
className="p-4 bg-gray-800 rounded-lg"
>
{/* Header with Token Info and Chain Name */}
<div className="flex justify-between items-baseline mb-4">
<div className="text-base font-medium text-gray-300">
{balance.token?.name} ({balance.token?.symbol})
</div>
<div className="flex items-baseline gap-6 text-xs text-gray-400 ml-8">
<div>Chain: {getChainName(balance.chainId)}</div>
<div>
Lock ID:{' '}
<span className="font-mono">
{formatLockId(balance.lockId)}
</span>
</div>
</div>
</div>
</div>

{/* Resource Lock Properties */}
<div className="flex gap-2 mb-4">
{balance.resourceLock?.resetPeriod &&
balance.resourceLock.resetPeriod > 0 && (
{/* Resource Lock Properties */}
<div className="flex gap-2 mb-4">
{balance.resourceLock?.resetPeriod &&
balance.resourceLock.resetPeriod > 0 && (
<span className="px-2 py-1 text-xs bg-[#00ff00]/10 text-[#00ff00] rounded">
Reset Period: {balance.resetPeriodFormatted}
</span>
)}
<FinalizationThreshold chainId={parseInt(balance.chainId)} />
{balance.resourceLock?.isMultichain && (
<span className="px-2 py-1 text-xs bg-[#00ff00]/10 text-[#00ff00] rounded">
Reset Period: {balance.resetPeriodFormatted}
Multichain
</span>
)}
<FinalizationThreshold chainId={parseInt(balance.chainId)} />
{balance.resourceLock?.isMultichain && (
<span className="px-2 py-1 text-xs bg-[#00ff00]/10 text-[#00ff00] rounded">
Multichain
</span>
)}
{balance.withdrawalStatus === 0 && (
<span className="px-2 py-1 text-xs rounded bg-[#00ff00]/10 text-[#00ff00]">
Active
</span>
)}
</div>
{balance.withdrawalStatus === 0 && (
<span className="px-2 py-1 text-xs rounded bg-[#00ff00]/10 text-[#00ff00]">
Active
</span>
)}
</div>

{/* Balances Grid */}
<div className="grid grid-cols-12 gap-4">
{/* Left side - Current, Allocatable, and Allocated */}
<div className="col-span-8 grid grid-cols-3 gap-4 pr-4 border-r border-gray-700">
<div>
<div className="text-xs text-gray-400">Current Balance</div>
<div className="mt-1 text-sm text-[#00ff00] font-mono">
{resourceLock &&
formatUnits(
BigInt(resourceLock.balance),
resourceLock.resourceLock.token.decimals
{/* Balances Grid */}
<div className="grid grid-cols-12 gap-4">
{/* Left side - Current, Allocatable, and Allocated */}
<div className="col-span-8 grid grid-cols-3 gap-4 pr-4 border-r border-gray-700">
<div>
<div className="text-xs text-gray-400">
Current Balance
</div>
<div className="mt-1 text-sm text-[#00ff00] font-mono">
{resourceLock &&
formatUnits(
BigInt(resourceLock.balance),
resourceLock.resourceLock.token.decimals
)}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400">
{balance.token.symbol}
</span>
)}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400">
{balance.token.symbol}
</span>
)}
</div>
</div>
</div>

<div>
<div className="text-xs text-gray-400">
Finalized Balance
<div>
<div className="text-xs text-gray-400">
Finalized Balance
</div>
<div className="mt-1 text-sm text-[#00ff00] font-mono">
{balance.formattedAllocatableBalance ||
balance.allocatableBalance}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400">
{balance.token.symbol}
</span>
)}
</div>
</div>
<div className="mt-1 text-sm text-[#00ff00] font-mono">
{balance.formattedAllocatableBalance ||
balance.allocatableBalance}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400">
{balance.token.symbol}
</span>
)}

<div>
<div className="text-xs text-gray-400">
Currently Allocated
</div>
<div className="mt-1 text-sm text-[#00ff00] font-mono">
{balance.formattedAllocatedBalance ||
balance.allocatedBalance}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400">
{balance.token.symbol}
</span>
)}
</div>
</div>
</div>

<div>
{/* Right side - Emphasized available to allocate */}
<div className="col-span-4 flex flex-col justify-center">
<div className="text-xs text-gray-400">
Currently Allocated
Available to Allocate
</div>
<div className="mt-1 text-sm text-[#00ff00] font-mono">
{balance.formattedAllocatedBalance ||
balance.allocatedBalance}
<div className="mt-1 text-lg font-bold text-[#00ff00] font-mono">
{balance.formattedAvailableBalance ||
balance.balanceAvailableToAllocate}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400">
<span className="ml-1 text-gray-400 text-sm">
{balance.token.symbol}
</span>
)}
</div>
</div>
</div>

{/* Right side - Emphasized available to allocate */}
<div className="col-span-4 flex flex-col justify-center">
<div className="text-xs text-gray-400">
Available to Allocate
</div>
<div className="mt-1 text-lg font-bold text-[#00ff00] font-mono">
{balance.formattedAvailableBalance ||
balance.balanceAvailableToAllocate}
{balance.token?.symbol && (
<span className="ml-1 text-gray-400 text-sm">
{balance.token.symbol}
</span>
)}
</div>
</div>
</div>

{/* Transfer and Withdrawal Actions */}
{resourceLock && (
<div className="mt-4 border-t border-gray-700 pt-4">
<div className="flex gap-2">
<Transfer
chainId={balance.chainId}
resourceLockBalance={resourceLock.balance}
lockId={BigInt(balance.lockId)}
decimals={resourceLock.resourceLock.token.decimals}
tokenName={{
resourceLockName: resourceLock.resourceLock.token.name,
resourceLockSymbol:
resourceLock.resourceLock.token.symbol,
tokenName: balance.token?.name || '',
}}
tokenSymbol={balance.token?.symbol || ''}
withdrawalStatus={balance.withdrawalStatus}
sessionToken={sessionToken}
resetPeriod={resourceLock.resourceLock.resetPeriod}
onForceWithdraw={() => {
handleInitiateWithdrawal(balance.lockId);
}}
onDisableForceWithdraw={() => {
handleDisableWithdrawal(
balance.chainId,
balance.lockId
);
}}
balanceAvailableToAllocate={
balance.balanceAvailableToAllocate
}
/>
{canExecuteWithdrawal && (
<button
onClick={() =>
handleExecuteWithdrawal(
{/* Transfer and Withdrawal Actions */}
{resourceLock && (
<div className="mt-4 border-t border-gray-700 pt-4">
<div className="flex gap-2">
<Transfer
chainId={balance.chainId}
resourceLockBalance={resourceLock.balance}
lockId={BigInt(balance.lockId)}
decimals={resourceLock.resourceLock.token.decimals}
tokenName={{
resourceLockName:
resourceLock.resourceLock.token.name,
resourceLockSymbol:
resourceLock.resourceLock.token.symbol,
tokenName: balance.token?.name || '',
}}
tokenSymbol={balance.token?.symbol || ''}
withdrawalStatus={balance.withdrawalStatus}
sessionToken={sessionToken}
resetPeriod={resourceLock.resourceLock.resetPeriod}
onForceWithdraw={() => {
handleInitiateWithdrawal(balance.lockId);
}}
onDisableForceWithdraw={() => {
handleDisableWithdrawal(
balance.chainId,
balance.lockId,
resourceLock?.balance || '0',
balance.token?.name || 'Token',
balance.token?.decimals || 18,
balance.token?.symbol || ''
)
balance.lockId
);
}}
balanceAvailableToAllocate={
balance.balanceAvailableToAllocate
}
className="mt-2 py-2 px-4 bg-[#F97316] text-white rounded-lg font-medium hover:opacity-90 transition-colors"
>
Execute Forced Withdrawal
</button>
)}
/>
{canExecuteWithdrawal && (
<button
onClick={() =>
handleExecuteWithdrawal(
balance.chainId,
balance.lockId,
resourceLock?.balance || '0',
balance.token?.name || 'Token',
balance.token?.decimals || 18,
balance.token?.symbol || ''
)
}
className="mt-2 py-2 px-4 bg-[#F97316] text-white rounded-lg font-medium hover:opacity-90 transition-colors"
>
Execute Forced Withdrawal
</button>
)}
</div>
</div>
</div>
)}
</div>
);
})}
</div>
)}
</div>
);
})}
</div>
)}

{/* Session ID Dialog */}
{isSessionIdDialogOpen && (
Expand Down
Loading

0 comments on commit db75073

Please sign in to comment.