diff --git a/src/components/AddressInfo.js b/src/components/AddressInfo.js index 9b4c865..62ea5a1 100644 --- a/src/components/AddressInfo.js +++ b/src/components/AddressInfo.js @@ -18,6 +18,7 @@ import { } from '../kaspa-api-client.js'; import BlueScoreContext from "./BlueScoreContext"; import CopyButton from "./CopyButton.js"; +import NotAcceptedTooltip from "./NotAccepted.js"; import PriceContext from "./PriceContext.js"; import UtxoPagination from "./UtxoPagination.js"; @@ -447,8 +448,14 @@ const AddressInfo = () => {
Details
- {x.is_accepted ?
accepted
: - not accepted} + {x.is_accepted ? ( +
accepted
+ ) : ( + <> + not accepted + + + )} {x.is_accepted && blueScore !== 0 && (blueScore - x.accepting_block_blue_score) < 86400 &&
{blueScore - x.accepting_block_blue_score} confirmations
} diff --git a/src/components/BlockInfo.js b/src/components/BlockInfo.js index 9840cef..6b514be 100644 --- a/src/components/BlockInfo.js +++ b/src/components/BlockInfo.js @@ -12,6 +12,7 @@ import {numberWithCommas} from "../helper.js"; import {getBlock, getTransactions} from '../kaspa-api-client.js'; import BlueScoreContext from "./BlueScoreContext.js"; import CopyButton from "./CopyButton.js"; +import NotAcceptedTooltip from "./NotAccepted.js"; import PriceContext from "./PriceContext.js"; const BlockLamp = (props) => { @@ -343,15 +344,27 @@ const BlockInfo = () => {
details
{!!txInfo && txInfo[tx.verboseData.transactionId] ? - txInfo[tx.verboseData.transactionId]?.is_accepted ? -
accepted
: - not accepted : <>-} - {!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 && (blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score < 86400) && -
{blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score} confirmations
} - {!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 && (blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score >= 86400) && -
finalized
} + className="utxo-value d-flex flex-row flex-wrap"> + {!!txInfo && txInfo[tx.verboseData.transactionId] ? + txInfo[tx.verboseData.transactionId]?.is_accepted ? ( +
accepted
+ ) : ( + <> + not accepted + + + ) + : <>-} + {!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 && + (blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score < 86400) && ( +
+ {blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score} confirmations +
+ )} + {!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 && + (blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score >= 86400) && ( +
finalized
+ )}
diff --git a/src/components/NotAccepted.js b/src/components/NotAccepted.js new file mode 100644 index 0000000..e444026 --- /dev/null +++ b/src/components/NotAccepted.js @@ -0,0 +1,34 @@ +import { useState } from "react"; +import { OverlayTrigger, Tooltip } from "react-bootstrap"; +import { FaQuestionCircle } from "react-icons/fa"; + +const NotAcceptedTooltip = () => { + const [visible, setVisible] = useState(false); + + const toggleVisibility = () => setVisible(!visible); + + const tooltipText = ` + GHOSTDAG allows multiple blocks to coexist, so the + same transaction can appear in several blocks. + The consensus accepts one and rejects the others. + `; + + return ( + {tooltipText.trim()} + } + > + + + + + ); +}; + +export default NotAcceptedTooltip; diff --git a/src/components/TransactionInfo.js b/src/components/TransactionInfo.js index f696e3c..f57dae3 100644 --- a/src/components/TransactionInfo.js +++ b/src/components/TransactionInfo.js @@ -10,6 +10,7 @@ import {numberWithCommas} from "../helper.js"; import {getTransaction, getTransactions} from '../kaspa-api-client.js'; import BlueScoreContext from "./BlueScoreContext.js"; import CopyButton from "./CopyButton.js"; +import NotAcceptedTooltip from "./NotAccepted.js"; import PriceContext from "./PriceContext.js"; import {parseSignatureScript} from "../inscriptions"; import {useLocation} from "react-router"; @@ -160,15 +161,28 @@ const TransactionInfo = () => { } Details - - {txInfo.is_accepted ?
accepted
: - not accepted} - {txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) < 86400 && -
{Math.max(blueScore - txInfo.accepting_block_blue_score, 0)} confirmations
} - {txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) >= 86400 && -
confirmed
} + + {txInfo.is_accepted ? ( +
accepted
+ ) : ( + <> + not accepted + + + )} + {txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) < 86400 && ( +
+ {Math.max(blueScore - txInfo.accepting_block_blue_score, 0)} confirmations +
+ )} + {txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) >= 86400 && ( +
confirmed
+ )}