From db75073420678eef4d7aa44d972e0ef2418272de Mon Sep 17 00:00:00 2001 From: 0age <37939117+0age@users.noreply.github.com> Date: Tue, 10 Dec 2024 15:37:21 -0800 Subject: [PATCH] improve UI with no wrapped tokens --- frontend/src/components/BalanceDisplay.tsx | 336 +++++++++++---------- frontend/src/hooks/useBalances.ts | 11 +- frontend/src/hooks/useResourceLocks.ts | 4 +- 3 files changed, 180 insertions(+), 171 deletions(-) diff --git a/frontend/src/components/BalanceDisplay.tsx b/frontend/src/components/BalanceDisplay.tsx index b1dd817..3897b62 100644 --- a/frontend/src/components/BalanceDisplay.tsx +++ b/frontend/src/components/BalanceDisplay.tsx @@ -38,22 +38,6 @@ export function BalanceDisplay({ if (!isConnected) return null; - if (isLoading || resourceLocksLoading) { - return ( -
-
-
- ); - } - - if (error) { - return ( -
- Error: {error} -
- ); - } - return (
@@ -66,105 +50,140 @@ export function BalanceDisplay({
-
- {formattedBalances.map((balance) => { - const resourceLock = resourceLocksData?.resourceLocks.items.find( - (item) => - item.resourceLock.lockId === balance.lockId && - item.chainId === balance.chainId - ); + {isLoading || resourceLocksLoading ? ( +
+
+
+ ) : error ? ( +
+ Error: {error} +
+ ) : !formattedBalances.length ? ( +
+

+ Unable to locate any resource locks that use this allocator. Deposit + ETH or ERC20 tokens to get started. +

+
+ ) : ( +
+ {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 ( -
- {/* Header with Token Info and Chain Name */} -
-
- {balance.token?.name} ({balance.token?.symbol}) -
-
-
Chain: {getChainName(balance.chainId)}
-
- Lock ID:{' '} - - {formatLockId(balance.lockId)} - + return ( +
+ {/* Header with Token Info and Chain Name */} +
+
+ {balance.token?.name} ({balance.token?.symbol}) +
+
+
Chain: {getChainName(balance.chainId)}
+
+ Lock ID:{' '} + + {formatLockId(balance.lockId)} + +
-
- {/* Resource Lock Properties */} -
- {balance.resourceLock?.resetPeriod && - balance.resourceLock.resetPeriod > 0 && ( + {/* Resource Lock Properties */} +
+ {balance.resourceLock?.resetPeriod && + balance.resourceLock.resetPeriod > 0 && ( + + Reset Period: {balance.resetPeriodFormatted} + + )} + + {balance.resourceLock?.isMultichain && ( - Reset Period: {balance.resetPeriodFormatted} + Multichain )} - - {balance.resourceLock?.isMultichain && ( - - Multichain - - )} - {balance.withdrawalStatus === 0 && ( - - Active - - )} -
+ {balance.withdrawalStatus === 0 && ( + + Active + + )} +
- {/* Balances Grid */} -
- {/* Left side - Current, Allocatable, and Allocated */} -
-
-
Current Balance
-
- {resourceLock && - formatUnits( - BigInt(resourceLock.balance), - resourceLock.resourceLock.token.decimals + {/* Balances Grid */} +
+ {/* Left side - Current, Allocatable, and Allocated */} +
+
+
+ Current Balance +
+
+ {resourceLock && + formatUnits( + BigInt(resourceLock.balance), + resourceLock.resourceLock.token.decimals + )} + {balance.token?.symbol && ( + + {balance.token.symbol} + )} - {balance.token?.symbol && ( - - {balance.token.symbol} - - )} +
-
-
-
- Finalized Balance +
+
+ Finalized Balance +
+
+ {balance.formattedAllocatableBalance || + balance.allocatableBalance} + {balance.token?.symbol && ( + + {balance.token.symbol} + + )} +
-
- {balance.formattedAllocatableBalance || - balance.allocatableBalance} - {balance.token?.symbol && ( - - {balance.token.symbol} - - )} + +
+
+ Currently Allocated +
+
+ {balance.formattedAllocatedBalance || + balance.allocatedBalance} + {balance.token?.symbol && ( + + {balance.token.symbol} + + )} +
-
+ {/* Right side - Emphasized available to allocate */} +
- Currently Allocated + Available to Allocate
-
- {balance.formattedAllocatedBalance || - balance.allocatedBalance} +
+ {balance.formattedAvailableBalance || + balance.balanceAvailableToAllocate} {balance.token?.symbol && ( - + {balance.token.symbol} )} @@ -172,79 +191,64 @@ export function BalanceDisplay({
- {/* Right side - Emphasized available to allocate */} -
-
- Available to Allocate -
-
- {balance.formattedAvailableBalance || - balance.balanceAvailableToAllocate} - {balance.token?.symbol && ( - - {balance.token.symbol} - - )} -
-
-
- - {/* Transfer and Withdrawal Actions */} - {resourceLock && ( -
-
- { - handleInitiateWithdrawal(balance.lockId); - }} - onDisableForceWithdraw={() => { - handleDisableWithdrawal( - balance.chainId, - balance.lockId - ); - }} - balanceAvailableToAllocate={ - balance.balanceAvailableToAllocate - } - /> - {canExecuteWithdrawal && ( - - )} + /> + {canExecuteWithdrawal && ( + + )} +
-
- )} -
- ); - })} -
+ )} +
+ ); + })} +
+ )} {/* Session ID Dialog */} {isSessionIdDialogOpen && ( diff --git a/frontend/src/hooks/useBalances.ts b/frontend/src/hooks/useBalances.ts index 2906463..2262339 100644 --- a/frontend/src/hooks/useBalances.ts +++ b/frontend/src/hooks/useBalances.ts @@ -42,6 +42,7 @@ export function useBalances(): UseBalancesResult { const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); const isFetchingRef = useRef(false); + const hasInitialFetchRef = useRef(false); // Get resource lock details from indexer const { @@ -54,7 +55,7 @@ export function useBalances(): UseBalancesResult { if (!isConnected || !address || isFetchingRef.current) return; isFetchingRef.current = true; - const shouldSetLoading = !balances.length; // Only show loading on initial fetch + const shouldSetLoading = !hasInitialFetchRef.current; // Only show loading on first fetch ever try { if (shouldSetLoading) setIsLoading(true); @@ -73,12 +74,13 @@ export function useBalances(): UseBalancesResult { if (!response.ok) throw new Error('Failed to fetch balances.'); const data = await response.json(); + hasInitialFetchRef.current = true; // Only update state if data has actually changed setBalances((prevBalances) => { const newBalances = data.balances.map((balance: Balance) => { // Find matching resource lock from indexer data - const resourceLock = resourceLocksData?.resourceLocks.items.find( + const resourceLock = resourceLocksData?.resourceLocks?.items.find( (item) => item.resourceLock.lockId === balance.lockId && item.chainId === balance.chainId @@ -157,9 +159,12 @@ export function useBalances(): UseBalancesResult { if (shouldSetLoading) setIsLoading(false); isFetchingRef.current = false; } - }, [isConnected, address, resourceLocksData, balances.length]); + }, [isConnected, address, resourceLocksData]); useEffect(() => { + // Reset hasInitialFetch when address changes + hasInitialFetchRef.current = false; + // Initial fetch if (isConnected && address) { void fetchBalances(); diff --git a/frontend/src/hooks/useResourceLocks.ts b/frontend/src/hooks/useResourceLocks.ts index 2097aa1..007dfc6 100644 --- a/frontend/src/hooks/useResourceLocks.ts +++ b/frontend/src/hooks/useResourceLocks.ts @@ -75,7 +75,7 @@ interface ResourceLocksResponse { } interface UseResourceLocksResult { - data: Account; + data: Account | null; isLoading: boolean; error: Error | null; } @@ -96,7 +96,7 @@ export function useResourceLocks(): UseResourceLocksResult { ); return { - data: data?.account ?? { resourceLocks: { items: [] } }, + data: data?.account ?? null, isLoading, error, };