This commit is contained in:
wayanrivan
2025-05-19 15:12:25 +07:00
parent cc506ae949
commit 26acc0ab54

View File

@ -155,35 +155,6 @@ const DetailTransaction = () => {
}); });
} }
const [formattedJson, setFormattedJson] = useState('');
const [highlightedJson, setHighlightedJson] = useState('');
useEffect(() => {
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };
const str = JSON.stringify(obj, undefined, 4);
setFormattedJson(str);
setHighlightedJson(syntaxHighlight(str));
}, []);
function syntaxHighlight(json: any) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) {
let cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span className="' + cls + '">' + match + '</span>';
});
}
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
@ -555,47 +526,37 @@ const DetailTransaction = () => {
<p className="text-sm text-gray-500">Status</p> <p className="text-sm text-gray-500">Status</p>
<p className="font-medium"> <p className="font-medium">
{(() => { {(() => {
let status; let status = 'UNKNOWN';
let badgeClass; let badgeClass = 'bg-gray-100 text-gray-800';
let badgeClass; switch (transactionDetails?.status) {
case 'C':
if (transactionDetails?.status === 'C') {
status = 'COMPLETE'; status = 'COMPLETE';
badgeClass = 'bg-green-100 text-green-800'; badgeClass = 'bg-green-100 text-green-800';
badgeClass = 'bg-green-100 text-green-800'; break;
} else if (transactionDetails?.status === 'F') { case 'F':
status = 'FAILED'; status = 'FAILED';
badgeClass = 'bg-red-100 text-red-800'; badgeClass = 'bg-red-100 text-red-800';
badgeClass = 'bg-red-100 text-red-800'; break;
} else if (transactionDetails?.status === 'O') { case 'O':
status = 'ON PROCESS'; status = 'ON PROCESS';
badgeClass = 'bg-blue-100 text-blue-800'; badgeClass = 'bg-blue-100 text-blue-800';
} else if (transactionDetails?.status === 'P') { break;
badgeClass = 'bg-blue-100 text-blue-800'; case 'P':
} else if (transactionDetails?.status === 'P') {
status = 'PENDING'; status = 'PENDING';
badgeClass = 'bg-gray-100 text-gray-800'; badgeClass = 'bg-gray-100 text-gray-800';
} else if (transactionDetails?.status === 'R') { break;
case 'R':
status = 'ROLLBACK'; status = 'ROLLBACK';
badgeClass = 'bg-yellow-100 text-yellow-800'; badgeClass = 'bg-yellow-100 text-yellow-800';
} else if (transactionDetails?.status === 'S') { break;
status = 'REVERSAL'; case 'S':
badgeClass = 'bg-purple-100 text-purple-800';
}
return (
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badgeClass}`}>
{status}
</span>
);
badgeClass = 'bg-gray-100 text-gray-800';
} else if (transactionDetails?.status === 'R') {
status = 'ROLLBACK';
badgeClass = 'bg-yellow-100 text-yellow-800';
} else if (transactionDetails?.status === 'S') {
status = 'REVERSAL'; status = 'REVERSAL';
badgeClass = 'bg-purple-100 text-purple-800'; badgeClass = 'bg-purple-100 text-purple-800';
break;
default:
// optional: keep 'UNKNOWN' or set to null
break;
} }
return ( return (
@ -604,6 +565,7 @@ const DetailTransaction = () => {
</span> </span>
); );
})()} })()}
</p> </p>
</div> </div>
<div> <div>
@ -751,7 +713,6 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
{activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && ( {activeTab === 'destinationwallet' && transactionDetails?.kind?.trim()?.toUpperCase() !== 'P' && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Destination Wallet</h3> <h3 className="font-semibold">Destination Wallet</h3>
@ -798,6 +759,7 @@ const DetailTransaction = () => {
)} )}
</div> </div>
)} )}
@ -882,7 +844,6 @@ const DetailTransaction = () => {
</div> </div>
)} )}
{activeTab === 'approve' && transactionDetails?.kind == "P" && (
{activeTab === 'approve' && transactionDetails?.kind == "P" && ( {activeTab === 'approve' && transactionDetails?.kind == "P" && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Approval Logs</h3> <h3 className="font-semibold">Approval Logs</h3>