feat: add justification field to gator permission details

Author: mj-kiwi

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.test.tsx

@@ -162,6 +162,15 @@ describe('Permission List Item', () => {
         // Verify network name is rendered
         const networkName = getByTestId('review-gator-permission-network-name');
         expect(networkName).toHaveTextContent(mockNetworkName);
+
+        // Verify justification is rendered
+        const justification = getByTestId(
+          'review-gator-permission-justification',
+        );
+        expect(justification).toBeInTheDocument();
+        expect(justification).toHaveTextContent(
+          'This is a very important request for streaming allowance for some very important thing',
+        );
       });
 
       it('renders native token periodic permission correctly', () => {
@@ -209,6 +218,15 @@ describe('Permission List Item', () => {
         // Verify network name is rendered
         const networkName = getByTestId('review-gator-permission-network-name');
         expect(networkName).toHaveTextContent(mockNetworkName);
+
+        // Verify justification is rendered
+        const justification = getByTestId(
+          'review-gator-permission-justification',
+        );
+        expect(justification).toBeInTheDocument();
+        expect(justification).toHaveTextContent(
+          'This is a very important request for periodic allowance',
+        );
       });
     });
 

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.tsx

@@ -109,6 +109,9 @@ export const ReviewGatorPermissionItem = ({
   const permissionType = permissionResponse.permission.type;
   const permissionContext = permissionResponse.context;
   const permissionAccount = permissionResponse.address || '0x';
+  const justification = permissionResponse.permission.data.justification as
+    | string
+    | undefined;
   const tokenAddress = permissionResponse.permission.data.tokenAddress as
     | Hex
     | undefined;
@@ -519,6 +522,40 @@ export const ReviewGatorPermissionItem = ({
 
         {isExpanded && (
           <>
+            {/* Justification row */}
+            {justification && (
+              <Box
+                flexDirection={BoxFlexDirection.Row}
+                justifyContent={BoxJustifyContent.Between}
+                style={{ flex: '1', alignSelf: 'center' }}
+                gap={4}
+                marginTop={2}
+              >
+                <Text
+                  textAlign={TextAlign.Left}
+                  color={TextColor.TextAlternative}
+                  variant={TextVariant.BodyMd}
+                >
+                  Justification
+                </Text>
+                <Box
+                  flexDirection={BoxFlexDirection.Row}
+                  justifyContent={BoxJustifyContent.End}
+                  style={{ flex: '1', alignSelf: 'center' }}
+                  gap={2}
+                >
+                  <Text
+                    variant={TextVariant.BodyMd}
+                    color={TextColor.TextAlternative}
+                    textAlign={TextAlign.Right}
+                    data-testid="review-gator-permission-justification"
+                  >
+                    {justification}
+                  </Text>
+                </Box>
+              </Box>
+            )}
+
             {/* Network name row */}
             <Box
               flexDirection={BoxFlexDirection.Row}