handle privacy metrics analyze response

Jwyman328 · Dec 1, 2024 · 17c079f · 17c079f
1 parent 166089e
commit 17c079f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git 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<string[]>([]);
 
   const privacyMetrics = getPRivacyMetricsResponse?.data?.metrics || [];
@@ -33,13 +37,55 @@ 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 (
       <Accordion.Item key={privacyMetric.name} value={privacyMetric.name}>
         <div className="flex flex-row">
           <div className="flex justify-center items-center">
             <Checkbox
               disabled={analyzeTxPrivacyMutation.isLoading}
               checked={selectedMetrics.includes(privacyMetric.name)}
+              color={checkboxColor()}
+              icon={checkboxIcon()}
               onChange={(event) => {
                 const newMetrics = [...selectedMetrics];
 
@@ -98,6 +144,7 @@ export const TransactionPrivacyModal = ({
         <p>Transaction ID: {transactionDetails.txid}</p>
         <div className="flex my-4">
           <Checkbox
+            icon={IconLineDashed}
             checked={areAllSelected}
             onChange={() => {
               if (areAllSelected) {

diff --git 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,