diff --git a/src/app/components/TransactionPrivacyModal.tsx b/src/app/components/TransactionPrivacyModal.tsx index 4d902ba1..31c16cd6 100644 --- a/src/app/components/TransactionPrivacyModal.tsx +++ b/src/app/components/TransactionPrivacyModal.tsx @@ -6,6 +6,8 @@ import { useAnalyzeTxPrivacy, useGetPrivacyMetrics, } from '../hooks/privacyMetrics'; + +import { IconX, IconLineDashed } from '@tabler/icons-react'; type TransactionDetailsModalProps = { opened: boolean; onClose: () => void; @@ -18,7 +20,9 @@ export const TransactionPrivacyModal = ({ transactionDetails, btcMetric, }: TransactionDetailsModalProps) => { - const getPRivacyMetricsResponse = useGetPrivacyMetrics(); + const getPRivacyMetricsResponse = useGetPrivacyMetrics( + transactionDetails.txid, + ); const [selectedMetrics, setSelectedMetrics] = useState([]); const privacyMetrics = getPRivacyMetricsResponse?.data?.metrics || []; @@ -33,6 +37,46 @@ export const TransactionPrivacyModal = ({ }: { privacyMetric: PrivacyMetric; }) => { + const isMetricPassed = () => { + if ( + analyzeTxPrivacyMutation.isSuccess && + analyzeTxPrivacyMutation.data?.results + ) { + const isMetricIncluded = + analyzeTxPrivacyMutation.data?.results[privacyMetric.name]; + return isMetricIncluded; + } else { + return undefined; + } + }; + const checkboxColor = () => { + if (!analyzeTxPrivacyMutation.isSuccess) { + return undefined; + } else { + const isPassed = isMetricPassed(); + if (isPassed === undefined) { + return undefined; + } else if (isPassed) { + return 'green'; + } else { + return 'red'; + } + } + }; + const checkboxIcon = () => { + if (!analyzeTxPrivacyMutation.isSuccess) { + return IconLineDashed; + } else { + const isPassed = isMetricPassed(); + if (isPassed === undefined) { + return IconLineDashed; + } else if (isPassed) { + return undefined; // Check mark by default + } else { + return IconX; + } + } + }; return (
@@ -40,6 +84,8 @@ export const TransactionPrivacyModal = ({ { const newMetrics = [...selectedMetrics]; @@ -98,6 +144,7 @@ export const TransactionPrivacyModal = ({

Transaction ID: {transactionDetails.txid}

{ if (areAllSelected) { diff --git a/src/app/hooks/privacyMetrics.ts b/src/app/hooks/privacyMetrics.ts index 65c960dc..0994a18c 100644 --- a/src/app/hooks/privacyMetrics.ts +++ b/src/app/hooks/privacyMetrics.ts @@ -3,12 +3,12 @@ import { useMutation, useQuery } from 'react-query'; import { AnalyzeTxPrivacyRequestBody } from '../api/types'; export const uxtoQueryKeys = { - getPrivacyMetrics: ['getPrivacyMetrics'], + getPrivacyMetrics: (txid: string) => ['getPrivacyMetrics', txid], }; -export function useGetPrivacyMetrics() { +export function useGetPrivacyMetrics(txid: string) { return useQuery( - uxtoQueryKeys.getPrivacyMetrics, + uxtoQueryKeys.getPrivacyMetrics(txid), () => ApiClient.getAllPrivacyMetrics(), { refetchOnWindowFocus: true,