import { FC , useContext } from "react" ; import { useTranslation } from "react-i18next" ; import { ReactComponent as ClipboardIcon } from "../../../../../assets/clipboard-copy.svg" ; import KeyValueDisplay from "../../../../../container/KeyValueDisplay/KeyValueDisplay" ; import useClipboard from "../../../../../hooks/use-clipboard" ; import { Transaction } from "../../../../../models/transaction.model" ; import { AppContext , Unit } from "../../../../../store/app-context" ; import { convertSatToBtc , convertToString } from "../../../../../util/format" ; export type Props = { details : Transaction ; } ; export const OnchainDetails = ( { details } ) => { const { unit } = useContext ( AppContext ) ; const { t } = useTranslation ( ) ; const [ copyId ] = useClipboard ( details . id ) ; const date = new Date ( details . time_stamp * 1000 ) . toLocaleString ( ) ; const amount = unit === Unit . BTC ? convertToString ( unit , convertSatToBtc ( details . amount ) ) : convertToString ( unit , details . amount ) ; const entries = [ { key : t ( "tx.confirmations" ) , value : `${ details . num_confs || "Unconfirmed" }` , } , { key : t ( "tx.included_block" ) , value : `${ details . block_height || "Unconfirmed" }` , } , { key : t ( "tx.date" ) , value : date } , { key : t ( "wallet.amount" ) , value : `${ amount } ${ unit }` } , { key : t ( "tx.fee" ) , value : `${ details . total_fees }` } , { key : t ( "tx.description" ) , value : details . comment } , ] ; return ( < > < a className = "text-blue-400 underline break-all py-2" target = "_blank" rel = "noreferrer" href = { `https://mempool.space/tx/${ details . id }` } > { t ( "tx.mempool" ) } < /a> < section className = "flex flex-col py-3 my-4" > < article className = "m-2 py-1 flex overflow-hidden border-gray-400 border-b-2 text-left" > < h6 className = "w-1/2 text-gray-500 dark:text-gray-200" > { t ( "tx.txid" ) } < /h6> < p className = "w-1/2 overflow-hidden overflow-x-auto mx-2" > { details . id } < /p> < div > < ClipboardIcon className = "h-5 w-5 hover:text-blue-500" onClick = { copyId } / > < /div> < /article> { entries . map ( ( entry ) => ( < KeyValueDisplay key = { entry . key } name = { entry . key } value = { entry . value } / > ) ) } < /section> < />); } ; export default OnchainDetails ;