use tx status

ui/tx/TxDetails.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import { tx } from 'data/tx';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import type { Props as TxStatusProps } from 'ui/tx/TxStatus';
+import TxStatus from 'ui/tx/TxStatus';
 
 const TxDetails = () => {
   return (
@@ -19,7 +21,7 @@ const TxDetails = () => {
         title="Status"
         hint="Current transaction state: Success, Failed (Error), or Pending (In Process)"
       >
-        { tx.status }
+        <TxStatus status={ tx.status as TxStatusProps['status'] }/>
       </DetailsInfoItem>
     </Grid>
   );