Skip to content

Commit

Permalink
Merge branch 'notAccepted' of https://github.com/x100111010/kaspa-exp…
Browse files Browse the repository at this point in the history 
…lorer into dev
  • Loading branch information
lAmeR1 committed Jan 15, 2025
2 parents 77b0f30 + 9ba56f3 commit cecc6e1
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 20 deletions.
11 changes: 9 additions & 2 deletions src/components/AddressInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -447,8 +448,14 @@ const AddressInfo = () => {
<div className="utxo-header">Details</div>
<div className="utxo-value mt-2 d-flex flex-row flex-wrap"
style={{marginBottom: "-1rem", textDecoration: "none"}}>
{x.is_accepted ? <div className="accepted-true me-3 mb-3">accepted</div> :
<span className="accepted-false">not accepted</span>}
{x.is_accepted ? (
<div className="accepted-true me-3 mb-3">accepted</div>
) : (
<>
<span className="accepted-false">not accepted</span>
<NotAcceptedTooltip />
</>
)}
{x.is_accepted && blueScore !== 0 && (blueScore - x.accepting_block_blue_score) < 86400 &&
<div
className="confirmations mb-3">{blueScore - x.accepting_block_blue_score}&nbsp;confirmations</div>}
Expand Down
31 changes: 22 additions & 9 deletions src/components/BlockInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -343,15 +344,27 @@ const BlockInfo = () => {
<Col sm={4} md={6}>
<div className="utxo-header mt-3">details</div>
<div
className="utxo-value d-flex flex-row flex-wrap">{!!txInfo && txInfo[tx.verboseData.transactionId] ?
txInfo[tx.verboseData.transactionId]?.is_accepted ?
<div className="accepted-true mb-3 me-3">accepted</div> :
<span className="accepted-false">not accepted</span> : <>-</>}
{!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 && (blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score < 86400) &&
<div
className="confirmations mb-3">{blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score}&nbsp;confirmations</div>}
{!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 && (blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score >= 86400) &&
<div className="confirmations mb-3">finalized</div>}
className="utxo-value d-flex flex-row flex-wrap">
{!!txInfo && txInfo[tx.verboseData.transactionId] ?
txInfo[tx.verboseData.transactionId]?.is_accepted ? (
<div className="accepted-true mb-3 me-3">accepted</div>
) : (
<>
<span className="accepted-false">not accepted</span>
<NotAcceptedTooltip />
</>
)
: <>-</>}
{!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 &&
(blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score < 86400) && (
<div className="confirmations mb-3">
{blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score}&nbsp;confirmations
</div>
)}
{!!txInfo && !!txInfo[tx.verboseData.transactionId]?.is_accepted && blueScore !== 0 &&
(blueScore - txInfo[tx.verboseData.transactionId].accepting_block_blue_score >= 86400) && (
<div className="confirmations mb-3">finalized</div>
)}


</div>
Expand Down
34 changes: 34 additions & 0 deletions src/components/NotAccepted.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<OverlayTrigger
show={visible}
placement="top"
overlay={
<Tooltip id="not-accepted-tooltip">{tooltipText.trim()}</Tooltip>
}
>
<span
onClick={toggleVisibility}
style={{ cursor: "pointer", marginLeft: "0.5rem" }}
>
<FaQuestionCircle />
</span>
</OverlayTrigger>
);
};

export default NotAcceptedTooltip;
32 changes: 23 additions & 9 deletions src/components/TransactionInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -160,15 +161,28 @@ const TransactionInfo = () => {
</Row>}
<Row className="blockinfo-row border-bottom-0">
<Col className="blockinfo-key" md={2}>Details</Col>
<Col className="blockinfo-value mt-2 d-flex flex-row flex-wrap" md={10} lg={10}
style={{marginBottom: "-1rem"}}>
{txInfo.is_accepted ? <div className="accepted-true me-3 mb-3">accepted</div> :
<span className="accepted-false mb-2 me-">not accepted</span>}
{txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) < 86400 &&
<div
className="confirmations mb-3">{Math.max(blueScore - txInfo.accepting_block_blue_score, 0)}&nbsp;confirmations</div>}
{txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) >= 86400 &&
<div className="confirmations mb-3">confirmed</div>}
<Col
className="blockinfo-value mt-2 d-flex flex-row flex-wrap"
md={10}
lg={10}
style={{ marginBottom: "-1rem" }}
>
{txInfo.is_accepted ? (
<div className="accepted-true me-3 mb-3">accepted</div>
) : (
<>
<span className="accepted-false mb-2 me-">not accepted</span>
<NotAcceptedTooltip />
</>
)}
{txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) < 86400 && (
<div className="confirmations mb-3">
{Math.max(blueScore - txInfo.accepting_block_blue_score, 0)}&nbsp;confirmations
</div>
)}
{txInfo.is_accepted && blueScore !== 0 && (blueScore - txInfo.accepting_block_blue_score) >= 86400 && (
<div className="confirmations mb-3">confirmed</div>
)}
</Col>
</Row>
</Container>
Expand Down

0 comments on commit cecc6e1

Please sign in to comment.