Merge pull request #48 from codingknite/gbq-tx-tags

Gbq tx tags

Author: codingknite

lib/hooks/useTxTags.tsx

@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+
+interface TxTagsResponse {
+  success: boolean;
+  data: {
+    hash: string;
+    tags: string;
+    confirmed: string | null;
+    block_id: string | null;
+    created_at: string;
+  };
+}
+
+interface TxTagsProps {
+  txHash: string | undefined | null;
+}
+
+export function useTxTags({ txHash }: TxTagsProps) {
+  const { data, error, isLoading } = useQuery({
+    queryKey: [ 'get tx tags', txHash ],
+    queryFn: async() => {
+      const response = await fetch(
+        'https://arweaveid-api.vercel.app/api/tx-tags',
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            txHash,
+          }),
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+
+      const data = (await response.json()) as TxTagsResponse;
+
+      if (data.success) {
+        const tags = JSON.parse(data.data.tags) as Array<[string, string]>;
+        return tags;
+      }
+
+      return null;
+    },
+    enabled: Boolean(txHash),
+  });
+
+  return { data, error, isLoading };
+}

ui/shared/statusTag/WvmTxTag.tsx

@@ -0,0 +1,25 @@
+import { TagLabel, Tooltip } from '@chakra-ui/react';
+import React from 'react';
+
+import Tag from 'ui/shared/chakra/Tag';
+
+interface Props {
+  tag: string;
+}
+const WvmTxTag = ({ tag }: Props) => {
+
+  return (
+    <Tooltip>
+      <Tag
+        color="#fff"
+        backgroundColor="#232452"
+        display="flex"
+        padding="2px 5px"
+      >
+        <TagLabel display="block">{ tag }</TagLabel>
+      </Tag>
+    </Tooltip>
+  );
+};
+
+export default WvmTxTag;

ui/tx/details/TxInfo.tsx

@@ -28,6 +28,7 @@ import config from 'configs/app';
 import { WEI, WEI_IN_GWEI } from 'lib/consts';
 import { useArweaveId } from 'lib/hooks/useArweaveId';
 import { useBlobScan } from 'lib/hooks/useBlobScan';
+import { useTxTags } from 'lib/hooks/useTxTags';
 import { useWvmArchiver } from 'lib/hooks/useWvmArchiver';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
@@ -50,6 +51,7 @@ import RawInputData from 'ui/shared/RawInputData';
 import BlobScanTag from 'ui/shared/statusTag/BlobScanTag';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
 import WvmArchiverTag from 'ui/shared/statusTag/WvmArchiverTag';
+import WvmTxTag from 'ui/shared/statusTag/WvmTxTag';
 import TextSeparator from 'ui/shared/TextSeparator';
 import TxFeeStability from 'ui/shared/tx/TxFeeStability';
 import Utilization from 'ui/shared/Utilization/Utilization';
@@ -88,6 +90,13 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
     block: data?.block,
   });
 
+  const { data: txTags, isLoading: isTxTagsLoading } = useTxTags({
+    txHash: data?.hash,
+  });
+
+  // eslint-disable-next-line no-console
+  console.log('txTags', txTags);
+
   const truncateArweaveId = (address: string) => {
     const start = address.slice(0, 28);
     const end = address.slice(-4);
@@ -509,7 +518,28 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
         <Skeleton>loading...</Skeleton>
       ) }
 
-      <DetailsInfoItemDivider/>
+      { txTags ? (
+        <>
+          <DetailsInfoItemDivider/>
+          <DetailsInfoItem.Label
+            hint="The transaction tags associated with the transaction"
+            isLoading={ isTxTagsLoading }
+          >
+            Tags
+          </DetailsInfoItem.Label>
+          <Box display="flex" flexDir="column" gap={ 2 }>
+            { txTags.map((tag: [string, string]) => (
+              <Box key={ tag[0] } display="flex">
+                <Box minWidth="120px" flexShrink={ 0 }>
+                  <WvmTxTag tag={ tag[0] }/>
+                </Box>
+                <Text flexGrow={ 1 } wordBreak="break-word">{ tag[1] }</Text>
+              </Box>
+            )) }
+          </Box>
+          <DetailsInfoItemDivider/>
+        </>
+      ) : null }
 
       <TxDetailsActions
         hash={ data.hash }