Skip to content

Commit

Permalink
styling looking better!
Browse files Browse the repository at this point in the history
  • Loading branch information
@0age
0age committed Dec 9, 2024
1 parent 085eb69 commit b725877
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 92 deletions.
24 changes: 11 additions & 13 deletions frontend/src/components/BalanceDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ interface SelectedLockData {
}

// Helper function to format time remaining
function formatTimeRemaining(expiryTimestamp: number): string {
const now = Math.floor(Date.now() / 1000);
const diff = expiryTimestamp - now;
function formatTimeRemaining(expiryTimestamp: number, currentTime: number): string {
const diff = expiryTimestamp - currentTime;

if (diff <= 0) return 'Ready';

Expand Down Expand Up @@ -86,7 +85,7 @@ export function BalanceDisplay({
const [selectedLock, setSelectedLock] = useState<SelectedLockData | null>(
null
);
const [, setCurrentTime] = useState(() => Math.floor(Date.now() / 1000));
const [currentTime, setCurrentTime] = useState(() => Math.floor(Date.now() / 1000));
const [isSessionIdDialogOpen, setIsSessionIdDialogOpen] = useState(false);

const handleDisableWithdrawal = useCallback(
Expand All @@ -100,8 +99,8 @@ export function BalanceDisplay({

showNotification({
type: 'success',
title: 'Forced Withdrawal Disabled',
message: 'Your forced withdrawal has been disabled',
title: 'Resource Lock Reactivated',
message: 'Your resource lock has been reactivated',
});
} catch (error) {
console.error('Error disabling forced withdrawal:', error);
Expand Down Expand Up @@ -153,13 +152,13 @@ export function BalanceDisplay({
return balances.map((balance) => ({
...balance,
timeRemaining: balance.withdrawableAt
? formatTimeRemaining(parseInt(balance.withdrawableAt))
? formatTimeRemaining(parseInt(balance.withdrawableAt), currentTime)
: '',
resetPeriodFormatted: balance.resourceLock?.resetPeriod
? formatResetPeriod(balance.resourceLock.resetPeriod)
: '',
}));
}, [balances]);
}, [balances, currentTime]);

if (!isConnected) return null;

Expand Down Expand Up @@ -201,10 +200,9 @@ export function BalanceDisplay({
);

const withdrawableAt = parseInt(balance.withdrawableAt || '0');
const now = Math.floor(Date.now() / 1000);
const canExecuteWithdrawal =
parseInt(balance.withdrawalStatus.toString()) !== 0 &&
withdrawableAt <= now;
withdrawableAt <= currentTime;

return (
<div
Expand Down Expand Up @@ -249,9 +247,9 @@ export function BalanceDisplay({
>
{balance.withdrawalStatus === 0
? 'Active'
: withdrawableAt <= now
? 'Withdrawal Ready'
: `Withdrawal Pending (${balance.timeRemaining})`}
: withdrawableAt <= currentTime
? 'Forced Withdrawals Enabled'
: `Forced Withdrawals Enabled in ${formatTimeRemaining(withdrawableAt, currentTime)}`}
</span>
</div>

Expand Down
135 changes: 75 additions & 60 deletions frontend/src/components/DepositForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import { useState } from 'react';
import { useAccount, useBalance } from 'wagmi';
import { formatEther, parseEther, parseUnits } from 'viem';
import { useAccount, useBalance, useChainId } from 'wagmi';
import { formatEther, parseEther, parseUnits, isAddress } from 'viem';
import { useCompact } from '../hooks/useCompact';
import { useNotification } from '../hooks/useNotification';
import { useERC20 } from '../hooks/useERC20';
import { useAllocatorAPI } from '../hooks/useAllocatorAPI';

const chainNames = {
'1': 'Ethereum',
'10': 'Optimism',
'8453': 'Base',
};

type TokenType = 'native' | 'erc20';

export function DepositForm() {
const { address, isConnected } = useAccount();
const { data: ethBalance } = useBalance({ address });
const chainId = useChainId();
const [amount, setAmount] = useState('');
const [tokenType, setTokenType] = useState<TokenType>('native');
const [tokenAddress, setTokenAddress] = useState('');
Expand Down Expand Up @@ -72,7 +79,8 @@ export function DepositForm() {
: BigInt(0);

if (rawBalance && parsedAmount > balanceBigInt) {
return { type: 'error', message: 'Insufficient Balance' };
const chainName = chainNames[chainId.toString()] || `Chain ${chainId}`;
return { type: 'error', message: `Insufficient ${symbol || 'token'} balance on ${chainName}` };
}
if (parsedAmount > allowanceBigInt) {
return { type: 'warning', message: 'Insufficient Allowance' };
Expand All @@ -88,7 +96,8 @@ export function DepositForm() {
try {
const parsedAmount = parseEther(amount);
if (parsedAmount > ethBalance.value) {
return { type: 'error', message: 'Insufficient ETH Balance' };
const chainName = chainNames[chainId.toString()] || `Chain ${chainId}`;
return { type: 'error', message: `Insufficient native token balance on ${chainName}` };
}
return null;
} catch {
Expand Down Expand Up @@ -254,47 +263,6 @@ export function DepositForm() {
</button>
</div>

{/* Amount Input */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-300">
Amount {tokenType === 'native' ? 'ETH' : symbol || 'tokens'}
{tokenType === 'native' && ethBalance && (
<span className="float-right text-gray-400">
Balance: {formatEther(ethBalance.value)} ETH
</span>
)}
{tokenType === 'erc20' && balance && (
<span className="float-right text-gray-400">
Balance: {balance} {symbol}
</span>
)}
</label>
<input
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="0.0"
className={`w-full px-3 py-2 bg-gray-800 border rounded-lg text-gray-300 focus:outline-none transition-colors ${
amountValidation?.type === 'error'
? 'border-red-500 focus:border-red-500'
: amountValidation?.type === 'warning'
? 'border-yellow-500 focus:border-yellow-500'
: 'border-gray-700 focus:border-[#00ff00]'
}`}
/>
{amountValidation && (
<p
className={`mt-1 text-sm ${
amountValidation.type === 'error'
? 'text-red-500'
: 'text-yellow-500'
}`}
>
{amountValidation.message}
</p>
)}
</div>

{/* Token Address Input (for ERC20) */}
{tokenType === 'erc20' && (
<div>
Expand All @@ -306,30 +274,77 @@ export function DepositForm() {
value={tokenAddress}
onChange={(e) => setTokenAddress(e.target.value)}
placeholder="0x..."
className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 focus:outline-none focus:border-[#00ff00] transition-colors"
className={`w-full px-3 py-2 bg-gray-800 border rounded-lg text-gray-300 focus:outline-none transition-colors ${
!isValid && tokenAddress && !isLoadingToken
? 'border-red-500 focus:border-red-500'
: 'border-gray-700 focus:border-[#00ff00]'
}`}
/>
{tokenAddress && !isValid && !isLoadingToken && (
<p className="mt-1 text-sm text-red-500">
Invalid ERC20 token address
</p>
<p className="mt-1 text-sm text-red-500">Invalid token address</p>
)}
{tokenAddress && isLoadingToken && (
<p className="mt-1 text-sm text-yellow-500">
Retrieving token information...
</p>
{isLoadingToken && isAddress(tokenAddress) && (
<p className="mt-1 text-sm text-yellow-500">Loading token info...</p>
)}
{isValid && (
<div className="mt-2 text-sm text-gray-400">
<p className="font-medium text-gray-300">
{name} ({symbol})
</p>
<p>Balance: {balance || '0'}</p>
<p>Allowance: {allowance || '0'}</p>
{isValid && name && symbol && (
<div className="mt-1">
<div className="flex justify-between items-center text-sm text-gray-400">
<span>{name} ({symbol})</span>
<span>
Allowance on The Compact: {Number(allowance || '0').toLocaleString(undefined, {
maximumFractionDigits: 6,
minimumFractionDigits: 0
})} {symbol}
</span>
</div>
</div>
)}
</div>
)}

{/* Amount Input */}
{(tokenType === 'native' || (tokenType === 'erc20' && isValid)) && (
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-300">
Amount
{tokenType === 'native' && ethBalance && (
<span className="float-right text-gray-400">
Balance: {formatEther(ethBalance.value)} ETH
</span>
)}
{tokenType === 'erc20' && balance && (
<span className="float-right text-gray-400">
Balance: {balance} {symbol}
</span>
)}
</label>
<input
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="0.0"
className={`w-full px-3 py-2 bg-gray-800 border rounded-lg text-gray-300 focus:outline-none transition-colors ${
amountValidation?.type === 'error'
? 'border-red-500 focus:border-red-500'
: amountValidation?.type === 'warning'
? 'border-yellow-500 focus:border-yellow-500'
: 'border-gray-700 focus:border-[#00ff00]'
}`}
/>
{amountValidation && (
<p
className={`mt-1 text-sm ${
amountValidation.type === 'error'
? 'text-red-500'
: 'text-yellow-500'
}`}
>
{amountValidation.message}
</p>
)}
</div>
)}

{/* Submit Buttons */}
{amountValidation?.type === 'warning' && (
<button
Expand Down
18 changes: 14 additions & 4 deletions frontend/src/components/Transfer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,13 +495,23 @@ export function Transfer({
<div className="flex gap-2">
<button
onClick={() => handleAction('transfer')}
className="mt-2 py-2 px-4 bg-[#00ff00] text-gray-900 rounded-lg font-medium hover:bg-[#00dd00] transition-colors"
disabled={BigInt(balanceAvailableToAllocate || '0') === BigInt(0)}
className={`mt-2 py-2 px-4 rounded-lg font-medium transition-colors ${
BigInt(balanceAvailableToAllocate || '0') === BigInt(0)
? 'bg-gray-600 text-gray-400 cursor-not-allowed'
: 'bg-[#00ff00] text-gray-900 hover:bg-[#00dd00]'
}`}
>
Transfer
</button>
<button
onClick={() => handleAction('withdraw')}
className="mt-2 py-2 px-4 bg-[#00ff00] text-gray-900 rounded-lg font-medium hover:bg-[#00dd00] transition-colors"
disabled={BigInt(balanceAvailableToAllocate || '0') === BigInt(0)}
className={`mt-2 py-2 px-4 rounded-lg font-medium transition-colors ${
BigInt(balanceAvailableToAllocate || '0') === BigInt(0)
? 'bg-gray-600 text-gray-400 cursor-not-allowed'
: 'bg-[#00ff00] text-gray-900 hover:bg-[#00dd00]'
}`}
>
Withdraw
</button>
Expand All @@ -515,11 +525,11 @@ export function Transfer({
)}
{withdrawalStatus !== 0 && (
<button
className="mt-2 py-2 px-4 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors disabled:opacity-50"
onClick={() => handleAction('disable')}
disabled={isWithdrawalLoading}
className="mt-2 py-2 px-4 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors disabled:opacity-50"
>
{isWithdrawalLoading ? 'Disabling...' : 'Disable Forced Withdrawal'}
{isWithdrawalLoading ? 'Reactivating...' : 'Reactivate Resource Lock'}
</button>
)}
</div>
Expand Down
Loading

0 comments on commit b725877

Please sign in to comment.