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 = () => {
- {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
+ )}