From 6f327767ec9768a19b42668e3247e49005494dd7 Mon Sep 17 00:00:00 2001 From: HexStar Date: Sun, 26 Jul 2026 16:02:31 +0000 Subject: [PATCH 1/5] feat(#382): add size variant prop to ProgressBar component - Add 'sm' | 'default' | 'lg' size variants mapping to h-1, h-2, h-3 - Default to 'default' (h-2) for backward compatibility - Allows customization of progress bar height while maintaining current behavior --- components/ui/progress-bar.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/ui/progress-bar.tsx b/components/ui/progress-bar.tsx index 357d876..ea75ded 100644 --- a/components/ui/progress-bar.tsx +++ b/components/ui/progress-bar.tsx @@ -7,6 +7,8 @@ interface ProgressBarProps { /** Optional secondary marker (0–1), e.g. withdrawn portion. */ marker?: number indeterminateShimmer?: boolean + /** Height variant. @default 'default' */ + size?: 'sm' | 'default' | 'lg' } /** Shows the % of a stream that has unlocked, with an optional withdrawn marker. */ @@ -15,7 +17,13 @@ export function ProgressBar({ className, marker, indeterminateShimmer, + size = 'default', }: ProgressBarProps) { + const sizeClasses = { + sm: 'h-1', + default: 'h-2', + lg: 'h-3', + } const pct = Math.min(Math.max(value, 0), 1) * 100 const markerPct = marker != null ? Math.min(Math.max(marker, 0), 1) * 100 : null @@ -27,7 +35,8 @@ export function ProgressBar({ aria-valuemin={0} aria-valuemax={100} className={cn( - 'relative h-2 w-full overflow-hidden rounded-full bg-secondary', + 'relative w-full overflow-hidden rounded-full bg-secondary', + sizeClasses[size], className, )} > From a4c86ec4a55faf8994c10e90a7c70a780ad85aeb Mon Sep 17 00:00:00 2001 From: HexStar Date: Sun, 26 Jul 2026 16:02:47 +0000 Subject: [PATCH 2/5] feat(#383): add compact prop to TokenAmount component - Add optional 'compact' boolean prop to format large numbers in compact notation (e.g., '1.2K') - Uses existing formatCompactAmount utility when enabled - Default to false for backward compatibility with existing implementations --- components/ui/token-amount.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/components/ui/token-amount.tsx b/components/ui/token-amount.tsx index bd8118b..ae14a2c 100644 --- a/components/ui/token-amount.tsx +++ b/components/ui/token-amount.tsx @@ -1,5 +1,5 @@ import { cn } from '@/lib/utils' -import { formatTokenAmount } from '@/lib/stream-utils' +import { formatTokenAmount, formatCompactAmount } from '@/lib/stream-utils' import type { TokenInfo } from '@/types/stream' interface TokenAmountProps { @@ -9,6 +9,8 @@ interface TokenAmountProps { symbolClassName?: string maxFractionDigits?: number showSymbol?: boolean + /** Display amount in compact notation (e.g., "1.2K"). @default false */ + compact?: boolean } /** Formats a raw bigint token amount with correct decimals + symbol. */ @@ -19,10 +21,15 @@ export function TokenAmount({ symbolClassName, maxFractionDigits = 4, showSymbol = true, + compact = false, }: TokenAmountProps) { + const formattedAmount = compact + ? formatCompactAmount(amount, token.decimals) + : formatTokenAmount(amount, token.decimals, maxFractionDigits) + return ( - {formatTokenAmount(amount, token.decimals, maxFractionDigits)} + {formattedAmount} {showSymbol && ( {token.symbol} From e6ed0041cd1fec6bbfc5c7d2980a48cb1349d270 Mon Sep 17 00:00:00 2001 From: HexStar Date: Sun, 26 Jul 2026 16:03:12 +0000 Subject: [PATCH 3/5] feat(#384): add onStateChange callback to CountdownTimer - Add 'onStateChange' callback prop matching AccessibleCountdownTimer pattern - Callback fires with 'expired' or 'active' state when timer state changes - Enables consistent API across both countdown timer variants --- components/ui/countdown-timer.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/components/ui/countdown-timer.tsx b/components/ui/countdown-timer.tsx index 7a2dee5..89314cf 100644 --- a/components/ui/countdown-timer.tsx +++ b/components/ui/countdown-timer.tsx @@ -1,5 +1,6 @@ 'use client' +import { useEffect, useState } from 'react' import { cn } from '@/lib/utils' import { useNow } from '@/hooks/use-now' import { formatTimeRemaining } from '@/lib/stream-utils' @@ -9,6 +10,8 @@ interface CountdownTimerProps { target: bigint className?: string endedLabel?: string + /** Callback when a significant state change occurs (e.g., timer expires). */ + onStateChange?: (state: 'expired' | 'active') => void } /** Live "2d 4h 13m" countdown to a target timestamp. */ @@ -16,10 +19,21 @@ export function CountdownTimer({ target, className, endedLabel = 'Ended', + onStateChange, }: CountdownTimerProps) { const now = useNow(1000) const ended = Number(target) <= now + const [lastState, setLastState] = useState<'expired' | 'active'>(ended ? 'expired' : 'active') + + useEffect(() => { + const newState = ended ? 'expired' : 'active' + if (newState !== lastState) { + setLastState(newState) + onStateChange?.(newState) + } + }, [ended, lastState, onStateChange]) + return ( {ended ? endedLabel : formatTimeRemaining(target, now)} From e5164c8a4304f8385ca3848bb18ad1926bbf390d Mon Sep 17 00:00:00 2001 From: HexStar Date: Sun, 26 Jul 2026 16:03:24 +0000 Subject: [PATCH 4/5] docs(#385): replace stale GitHub issue references with descriptive comments - Replace 'Issue #29: balance state' with 'Tracks the connected wallet's token balance for validation' - Replace 'Issue #103: recipient account validation' with 'Validates recipient account existence, funding status, and transaction history' - No logic changes, only documentation improvement --- app/app/create/create-form.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/app/create/create-form.tsx b/app/app/create/create-form.tsx index 716e765..4e34619 100644 --- a/app/app/create/create-form.tsx +++ b/app/app/create/create-form.tsx @@ -155,11 +155,11 @@ export function CreateForm() { const [recurrenceCadence, setRecurrenceCadence] = useState("none"); - // Issue #29: balance state + // Tracks the connected wallet's token balance for validation const [tokenBalance, setTokenBalance] = useState(null); const [balanceLoading, setBalanceLoading] = useState(false); - // Issue #103: recipient account validation + // Validates recipient account existence, funding status, and transaction history const [recipientAccountInfo, setRecipientAccountInfo] = useState<{ exists: boolean; funded: boolean; From d1e41d0dd36fba84360d6cca86bf3109f3cfeead Mon Sep 17 00:00:00 2001 From: HexStar Date: Sun, 26 Jul 2026 16:06:34 +0000 Subject: [PATCH 5/5] fix: remove duplicate react imports in use-batch-create hook - Consolidate duplicate imports into single import statement - Fixes TypeScript compilation error --- hooks/use-batch-create.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/hooks/use-batch-create.ts b/hooks/use-batch-create.ts index 43d8c01..731b905 100644 --- a/hooks/use-batch-create.ts +++ b/hooks/use-batch-create.ts @@ -1,8 +1,7 @@ 'use client' -import { useState, useCallback, useRef } from 'react' -import { createStreamsBatch as createStreamsBatchCall } from '@/lib/contract' import { useState, useCallback, useRef, useEffect } from 'react' +import { createStreamsBatch as createStreamsBatchCall } from '@/lib/contract' import { createStream as createStreamCall } from '@/lib/contract' import { invalidateStreams } from '@/hooks/use-streams' import { useWallet } from '@/hooks/use-wallet'