Refactor oracle and vault workflow UI

.claude/settings.local.json

@@ -32,7 +32,11 @@
       "Bash(git:*)",
       "Bash(git -C /workspace/.t3/worktrees/zoltar/t3code-ad1f2154 show origin/main:ui/ts/components/SecurityPoolWorkflowSection.tsx)",
       "Read(//tmp/**)",
-      "Bash(echo \"exit: $?\")"
+      "Bash(echo \"exit: $?\")",
+      "Bash(python3:*)",
+      "Bash(echo \"EXIT: $?\")",
+      "Bash(echo \"BIOME_EXIT: $?\")",
+      "Bash(bun tsc:*)"
     ]
   }
 }

ui/ts/App.tsx

@@ -35,7 +35,7 @@ import { TransactionHashLink } from './components/TransactionHashLink.js'
 export function App() {
 	const transactionState = useSignal<TransactionState>(createInitialTransactionState())
 	const deployNextMissingPending = useSignal(false)
-	const { activeUniverseId, securityPoolAddress, setActiveUniverseId, setSecurityPoolAddress } = useUrlState()
+	const { activeUniverseId, openOracleReportId: urlOpenOracleReportId, securityPoolAddress, setActiveUniverseId, setOpenOracleReport, setSecurityPoolAddress } = useUrlState()
 	const onTransaction = (hash: Hash) => {
 		transactionState.value = {
 			...transactionState.value,
@@ -114,18 +114,18 @@ export function App() {
 	const {
 		approveToken1,
 		approveToken2,
+		createOpenOracleGame,
 		disputeReport,
-		loadOracleManager,
 		loadOracleReport,
-		loadingOracleManager,
+		loadingOpenOracleCreate,
 		loadingOracleReport,
-		onQueueOperation,
-		onRequestPrice,
 		openOracleError,
+		openOracleCreateForm,
 		openOracleForm,
+		openOracleInitialReportState,
 		openOracleReportDetails,
 		openOracleResult,
-		oracleManagerDetails,
+		setOpenOracleCreateForm,
 		setOpenOracleForm,
 		settleReport,
 		submitInitialReport,
@@ -186,6 +186,7 @@ export function App() {
 	const isRouteContentDisabled = transactionState.value.transactionInFlightCount > 0 || disableRouteContent
 	const universeLabel = formatUniverseCollectionLabel([activeUniverseId])
 	const universeErrorMessage = showZoltarUniverseWarning ? 'The universe does not exist.' : undefined
+	const selectedPool = securityPools.find(pool => pool.securityPoolAddress.toLowerCase() === securityPoolAddress.toLowerCase())
 	const renderRouteContent = () => {
 		if (wrongNetworkMessage !== undefined) {
 			return <MainnetGateSection message={wrongNetworkMessage} />
@@ -331,6 +332,11 @@ export function App() {
 							loadingPoolOracleManager,
 							onLoadPoolOracleManager: managerAddress => void loadPoolOracleManager(managerAddress),
 							onRequestPoolPrice: managerAddress => void requestPoolPrice(managerAddress),
+							onViewPendingReport: reportId => {
+								setOpenOracleForm(current => ({ ...current, reportId: reportId.toString() }))
+								navigate('open-oracle')
+								void loadOracleReport(reportId.toString())
+							},
 							poolOracleManagerDetails,
 							poolOracleManagerError,
 							poolPriceOracleResult,
@@ -356,7 +362,7 @@ export function App() {
 								loadingSecurityVault,
 								onApproveRep: amount => void approveRep(amount),
 								onDepositRep: () => void depositRep(),
-								onLoadSecurityVault: () => void loadSecurityVault(),
+								onLoadSecurityVault: vaultAddress => void loadSecurityVault(vaultAddress),
 								onRedeemFees: () => void redeemFees(),
 								onSetSecurityBondAllowance: () => void setSecurityBondAllowance(),
 								onSecurityVaultFormChange: update => setSecurityVaultForm(current => ({ ...current, ...update })),
@@ -367,6 +373,7 @@ export function App() {
 								securityVaultRepAllowance,
 								securityVaultRepBalance,
 								securityVaultResult,
+								securityPoolVaults: selectedPool?.vaults,
 							},
 							trading: {
 								accountState,
@@ -386,23 +393,24 @@ export function App() {
 				return (
 					<OpenOracleSection
 						accountState={accountState}
-						loadingOracleManager={loadingOracleManager}
+						initialView={urlOpenOracleReportId === '' && openOracleForm.reportId === '' ? 'browse' : 'selected-report'}
 						loadingOracleReport={loadingOracleReport}
 						onApproveToken1={() => void approveToken1()}
 						onApproveToken2={() => void approveToken2()}
+						onCreateOpenOracleGame={() => void createOpenOracleGame()}
 						onDisputeReport={() => void disputeReport()}
-						onLoadOracleManager={() => void loadOracleManager()}
-						onLoadOracleReport={() => void loadOracleReport()}
+						onLoadOracleReport={reportId => void loadOracleReport(reportId)}
+						onOpenOracleCreateFormChange={update => setOpenOracleCreateForm(current => ({ ...current, ...update }))}
 						onOpenOracleFormChange={update => setOpenOracleForm(current => ({ ...current, ...update }))}
-						onQueueOperation={() => void onQueueOperation()}
-						onRequestPrice={() => void onRequestPrice()}
 						onSettleReport={() => void settleReport()}
 						onSubmitInitialReport={() => void submitInitialReport()}
+						loadingOpenOracleCreate={loadingOpenOracleCreate}
 						openOracleError={openOracleError}
+						openOracleCreateForm={openOracleCreateForm}
 						openOracleForm={openOracleForm}
+						openOracleInitialReportState={openOracleInitialReportState}
 						openOracleReportDetails={openOracleReportDetails}
 						openOracleResult={openOracleResult}
-						oracleManagerDetails={oracleManagerDetails}
 					/>
 				)
 			case 'not-found':
@@ -412,6 +420,23 @@ export function App() {
 		}
 	}
 
+	useEffect(() => {
+		if (urlOpenOracleReportId === '') return
+		void loadOracleReport(urlOpenOracleReportId)
+	}, [urlOpenOracleReportId])
+
+	useEffect(() => {
+		if (openOracleReportDetails !== undefined) {
+			setOpenOracleReport(openOracleReportDetails.reportId.toString())
+			return
+		}
+		if (openOracleForm.reportId.trim() !== '') {
+			setOpenOracleReport(openOracleForm.reportId)
+			return
+		}
+		setOpenOracleReport(undefined)
+	}, [openOracleForm.reportId, openOracleReportDetails])
+
 	useEffect(() => {
 		setSecurityVaultForm(current => (current.securityPoolAddress === securityPoolAddress ? current : { ...current, securityPoolAddress }))
 		setTradingForm(current => (current.securityPoolAddress === securityPoolAddress ? current : { ...current, securityPoolAddress }))

ui/ts/components/AddressValue.tsx

@@ -1,5 +1,6 @@
-import { useSignal, useSignalEffect } from '@preact/signals'
-import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'
+import { useSignalEffect } from '@preact/signals'
+import { useLayoutEffect, useRef, useState } from 'preact/hooks'
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js'
 import { formatAddress } from '../lib/addresses.js'
 
 type AddressValueProps = {
@@ -8,10 +9,9 @@ type AddressValueProps = {
 }
 
 export function AddressValue({ address, className = '' }: AddressValueProps) {
-	const copied = useSignal(false)
+	const { copied, copyText } = useCopyToClipboard()
 	const buttonRef = useRef<HTMLButtonElement>(null)
 	const measureRef = useRef<HTMLSpanElement>(null)
-	const copyResetTimeout = useRef<number | undefined>(undefined)
 	const [shouldShorten, setShouldShorten] = useState(false)
 
 	useLayoutEffect(() => {
@@ -49,15 +49,6 @@ export function AddressValue({ address, className = '' }: AddressValueProps) {
 		setShouldShorten(measureElement.getBoundingClientRect().width > element.clientWidth + 1)
 	})
 
-	useEffect(() => {
-		return () => {
-			if (copyResetTimeout.current !== undefined) {
-				window.clearTimeout(copyResetTimeout.current)
-				copyResetTimeout.current = undefined
-			}
-		}
-	}, [])
-
 	if (address === undefined) {
 		return (
 			<span className={`address-value ${className}`} title='Unavailable'>
@@ -69,28 +60,7 @@ export function AddressValue({ address, className = '' }: AddressValueProps) {
 	const displayValue = shouldShorten ? formatAddress(address) : address
 
 	return (
-		<button
-			ref={buttonRef}
-			type='button'
-			className={`address-value copyable ${className}`}
-			title={address}
-			aria-label={`Copy address ${address}`}
-			onClick={async () => {
-				try {
-					if (copyResetTimeout.current !== undefined) {
-						window.clearTimeout(copyResetTimeout.current)
-					}
-					await navigator.clipboard.writeText(address)
-					copied.value = true
-					copyResetTimeout.current = window.setTimeout(() => {
-						copied.value = false
-						copyResetTimeout.current = undefined
-					}, 1200)
-				} catch {
-					return
-				}
-			}}
-		>
+		<button ref={buttonRef} type='button' className={`address-value copyable ${className}`} title={address} aria-label={`Copy address ${address}`} onClick={() => copyText(address)}>
 			{copied.value ? 'Copied' : displayValue}
 			<span ref={measureRef} aria-hidden='true' className='address-value-measure'>
 				{address}

ui/ts/components/CurrencyValue.tsx

@@ -1,6 +1,6 @@
-import { useSignal } from '@preact/signals'
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect } from 'preact/hooks'
 import { LoadingText } from './LoadingText.js'
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js'
 import { formatCurrencyBalance, formatRoundedCurrencyBalance } from '../lib/formatters.js'
 
 type CurrencyValueProps = {
@@ -14,28 +14,14 @@ type CurrencyValueProps = {
 }
 
 export function CurrencyValue({ className = '', copyable = true, decimals = 2, loading = false, suffix = '', units = 18, value }: CurrencyValueProps) {
-	const copied = useSignal(false)
-	const copyResetTimeout = useRef<number | undefined>(undefined)
+	const { copied, copyText } = useCopyToClipboard()
 	const exactValue = value === undefined ? undefined : formatCurrencyBalance(value, units)
 	const exactSuffix = suffix === '' ? '' : ` ${suffix}`
 
 	useEffect(() => {
 		copied.value = false
-		if (copyResetTimeout.current !== undefined) {
-			window.clearTimeout(copyResetTimeout.current)
-			copyResetTimeout.current = undefined
-		}
 	}, [exactValue])
 
-	useEffect(() => {
-		return () => {
-			if (copyResetTimeout.current !== undefined) {
-				window.clearTimeout(copyResetTimeout.current)
-				copyResetTimeout.current = undefined
-			}
-		}
-	}, [])
-
 	if (loading) {
 		return <LoadingText className={`currency-value loading ${className}`}>Loading...</LoadingText>
 	}
@@ -59,32 +45,7 @@ export function CurrencyValue({ className = '', copyable = true, decimals = 2, l
 	}
 
 	return (
-		<button
-			type='button'
-			className={valueClassName}
-			title={exactTitle}
-			aria-label={`Copy exact value ${resolvedExactValue}`}
-			onClick={async () => {
-				try {
-					if (copyResetTimeout.current !== undefined) {
-						window.clearTimeout(copyResetTimeout.current)
-					}
-					await navigator.clipboard.writeText(resolvedExactValue)
-					copied.value = true
-					copyResetTimeout.current = window.setTimeout(() => {
-						copied.value = false
-						copyResetTimeout.current = undefined
-					}, 1200)
-				} catch {
-					copied.value = false
-					if (copyResetTimeout.current !== undefined) {
-						window.clearTimeout(copyResetTimeout.current)
-						copyResetTimeout.current = undefined
-					}
-					return
-				}
-			}}
-		>
+		<button type='button' className={valueClassName} title={exactTitle} aria-label={`Copy exact value ${resolvedExactValue}`} onClick={() => copyText(resolvedExactValue)}>
 			{copied.value ? 'Copied' : displayValue}
 		</button>
 	)