@ledgerhq/live-common
Version:
Common ground for the Ledger Live apps
34 lines • 1.45 kB
JavaScript
import { useEffect, useRef, useState } from "react";
/**
* Shared balance-display logic consumed by both desktop and mobile during sync.
*
* - **Sticky balanceAvailable**: stays `false` while syncing so the skeleton
* covers the entire cycle (Skeleton → Animate balance, no shimmer gap).
* - **Frozen balance**: holds the pre-sync value so `AmountDisplay` can
* animate the delta once the sync settles.
* - **isLoading**: true while `syncPhase` is `"syncing"`.
*/
export function useBalanceSyncState({ rawBalanceAvailable, syncPhase, latestBalance, shouldFreezeOnSync, }) {
const [balanceUnavailable, setBalanceUnavailable] = useState(!rawBalanceAvailable);
useEffect(() => {
if (!rawBalanceAvailable) {
setBalanceUnavailable(true);
}
else if (syncPhase !== "syncing") {
setBalanceUnavailable(false);
}
}, [rawBalanceAvailable, syncPhase]);
const frozenBalanceRef = useRef(latestBalance);
useEffect(() => {
if (syncPhase !== "syncing") {
frozenBalanceRef.current = latestBalance;
}
}, [syncPhase, latestBalance]);
const shouldFreeze = shouldFreezeOnSync && syncPhase === "syncing";
return {
balanceAvailable: !balanceUnavailable,
displayedBalance: shouldFreeze ? frozenBalanceRef.current : latestBalance,
isLoading: syncPhase === "syncing",
};
}
//# sourceMappingURL=useBalanceSyncState.js.map