1- import React , { useState , useEffect } from 'react' ;
1+ import React from 'react' ;
22import { BlockHeader } from '../types/Message' ;
33
44interface BlockDetailsModalProps {
@@ -8,17 +8,6 @@ interface BlockDetailsModalProps {
88}
99
1010export const BlockDetailsModal : React . FC < BlockDetailsModalProps > = ( { blockHeader, isOpen, onClose } ) => {
11- const [ coinbaseData , setCoinbaseData ] = useState < any > ( null ) ;
12- const [ loading , setLoading ] = useState ( false ) ;
13-
14- useEffect ( ( ) => {
15- if ( blockHeader && isOpen ) {
16- // TODO: Fetch coinbase transaction data when API is available
17- // For now, we'll display the block header information
18- setCoinbaseData ( null ) ;
19- }
20- } , [ blockHeader , isOpen ] ) ;
21-
2211 if ( ! isOpen || ! blockHeader ) return null ;
2312
2413 const formatTimestamp = ( timestamp : number ) => {
@@ -182,24 +171,79 @@ export const BlockDetailsModal: React.FC<BlockDetailsModalProps> = ({ blockHeade
182171 Coinbase Transaction
183172 </ h4 >
184173
185- { loading ? (
186- < div className = "flex items-center justify-center py-8" >
187- < div className = "animate-spin rounded-full h-8 w-8 border-2 border-[#1B1EA9] border-t-transparent" > </ div >
188- </ div >
189- ) : coinbaseData ? (
190- < div className = "space-y-3" >
191- { /* Coinbase data will be displayed here when API is available */ }
192- < div className = "text-gray-600" > Coinbase transaction details will be available soon.</ div >
174+ { blockHeader . CoinbaseTxID ? (
175+ < div className = "space-y-4" >
176+ { /* Transaction ID */ }
177+ < div >
178+ < label className = "text-sm text-gray-500" > Transaction ID</ label >
179+ < div className = "flex items-center gap-2" >
180+ < p className = "font-mono text-sm text-gray-900 break-all" > { blockHeader . CoinbaseTxID } </ p >
181+ < button
182+ onClick = { ( ) => navigator . clipboard . writeText ( blockHeader . CoinbaseTxID || '' ) }
183+ className = "flex-shrink-0 text-gray-400 hover:text-gray-600"
184+ >
185+ < svg className = "w-4 h-4" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
186+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
187+ </ svg >
188+ </ button >
189+ </ div >
190+ </ div >
191+
192+ < div className = "grid grid-cols-1 md:grid-cols-2 gap-4" >
193+ { /* Block Reward */ }
194+ < div className = "bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4" >
195+ < label className = "text-sm text-green-700 font-medium" > Total Output Value</ label >
196+ < p className = "text-2xl font-bold text-green-900" >
197+ { blockHeader . CoinbaseValue ? ( blockHeader . CoinbaseValue / 100000000 ) . toFixed ( 8 ) : '0' } BSV
198+ </ p >
199+ < p className = "text-sm text-green-600 mt-1" >
200+ { blockHeader . CoinbaseValue ?. toLocaleString ( ) } satoshis
201+ </ p >
202+ </ div >
203+
204+ { /* Miner Info */ }
205+ < div className = "bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4" >
206+ < label className = "text-sm text-blue-700 font-medium" > Miner</ label >
207+ < p className = "text-lg font-semibold text-blue-900" >
208+ { blockHeader . MinerAddress || 'Unknown' }
209+ </ p >
210+ </ div >
211+ </ div >
212+
213+ { /* Coinbase Text */ }
214+ { blockHeader . CoinbaseText && (
215+ < div >
216+ < label className = "text-sm text-gray-500" > Coinbase Message</ label >
217+ < div className = "bg-gray-50 rounded-lg p-3 mt-1" >
218+ < p className = "text-sm text-gray-700 font-mono break-all" > { blockHeader . CoinbaseText } </ p >
219+ </ div >
220+ </ div >
221+ ) }
222+
223+ { /* Coinbase Script */ }
224+ { blockHeader . CoinbaseScript && (
225+ < details className = "group" >
226+ < summary className = "cursor-pointer text-sm text-gray-600 hover:text-gray-900 flex items-center gap-2" >
227+ < svg className = "w-4 h-4 transform group-open:rotate-90 transition-transform" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
228+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M9 5l7 7-7 7" />
229+ </ svg >
230+ View Raw Coinbase Script
231+ </ summary >
232+ < div className = "mt-2 bg-gray-100 rounded-lg p-3" >
233+ < p className = "text-xs font-mono text-gray-600 break-all" > { blockHeader . CoinbaseScript } </ p >
234+ </ div >
235+ </ details >
236+ ) }
193237 </ div >
194238 ) : (
195239 < div className = "text-center py-8" >
196240 < div className = "inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4" >
197241 < svg className = "w-8 h-8 text-gray-400" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
198- < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z " />
242+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z " />
199243 </ svg >
200244 </ div >
201- < p className = "text-gray-600" > Coinbase transaction data not yet available </ p >
202- < p className = "text-sm text-gray-500 mt-2" > This feature requires additional API endpoints </ p >
245+ < p className = "text-gray-600" > Coinbase data pending </ p >
246+ < p className = "text-sm text-gray-500 mt-2" > Check back in a few moments </ p >
203247 </ div >
204248 ) }
205249 </ div >
0 commit comments