Add truncate and highlighting functionality for wallets in trust side panel

src/pages/TrustRelationship/CustomTooltip.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Tooltip, Typography, Box } from '@mui/material';
+import { styled } from '@mui/system';
+
+const CustomTooltipBox = styled(Box)(({ theme }) => ({
+    color: '#fff',
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius,
+    fontSize: '0.9rem',
+    maxWidth: 300,
+}));
+
+const CustomTooltipTypography = styled(Typography)({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: '100%',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#e0e0e0',
+    },
+});
+
+function CustomTooltip({ content, maxChars = 10 }) {
+    const truncatedContent =
+        content.length > maxChars ? `${content.slice(0, maxChars)}...` : content;
+
+    return (
+        <Tooltip
+            title={
+                <CustomTooltipBox>
+                    {content}
+                </CustomTooltipBox>
+            }
+            arrow
+        >
+            <CustomTooltipTypography>{truncatedContent}</CustomTooltipTypography>
+        </Tooltip>
+    );
+}
+
+export default CustomTooltip;

src/pages/TrustRelationship/trustRelationshipSidePanel.js

@@ -16,6 +16,7 @@ import {
   AcceptButton,
   DeleteButton
 } from './TrustRelationshipSidePanel.styled.js';
+import CustomTooltip from './CustomTooltip.js';
 import AuthContext from '../../store/auth-context.js';
 import {
   acceptTrustRelationship,
@@ -83,7 +84,10 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
           <Grid item xs={6}>
             <TallTypography elevation={3}>
               <NormalTypography variant="p" align="flex-start">
-                {rowInfo.actor_wallet}
+                <CustomTooltip
+                content={rowInfo.actor_wallet}
+                maxChars={10}
+              />
               </NormalTypography>
             </TallTypography>
           </Grid>
@@ -97,7 +101,10 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
           <Grid item xs={6}>
             <TallTypography elevation={3}>
               <NormalTypography variant="p" align="flex-start">
-                {rowInfo.target_wallet}
+              <CustomTooltip
+                content={rowInfo.target_wallet}
+                maxChars={10}
+              />
               </NormalTypography>
             </TallTypography>
           </Grid>
@@ -111,7 +118,10 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
           <Grid item xs={6}>
             <TallTypography elevation={3}>
               <NormalTypography variant="p" align="flex-start">
-                {rowInfo.originating_wallet}
+                <CustomTooltip
+                content={rowInfo.originating_wallet}
+                maxChars={10}
+              />
               </NormalTypography>
             </TallTypography>
           </Grid>
@@ -125,7 +135,10 @@ function TrustRelationshipSidePanel({ open, onClose, rowInfo }) {
           <Grid item xs={6}>
             <TallTypography elevation={3}>
               <NormalTypography variant="p" align="flex-start">
-                {rowInfo.request_type}
+                <CustomTooltip
+                content={rowInfo.request_type}
+                maxChars={10}
+              />
               </NormalTypography>
             </TallTypography>
           </Grid>

src/pages/TrustRelationship/trustRelationshipSidePanel.test.js

@@ -65,16 +65,16 @@ describe('Trust Relationship Side Panel', () => {
       );
     });
 
-    // Ensure the component renders correctly
     expect(screen.getByText('Source Wallet:')).toBeInTheDocument();
     expect(screen.getByText('Target Wallet:')).toBeInTheDocument();
     expect(screen.getByText('Initiated By:')).toBeInTheDocument();
     expect(screen.getByText('Request Type:')).toBeInTheDocument();
 
-    // Wait for the context to be updated
     await waitFor(() => {
-      const context = screen.getByText('sam-testwallet1');
-      expect(context).toBeInTheDocument();
+      const matches = screen.getAllByText((content) =>
+        content.includes(mockRowInfo.originating_wallet.slice(0, 10))
+      );
+      expect(matches).toHaveLength(2); 
     });
   });
 });