feat: simple key-> value component for text value type (#11497)

## **Description**

Adding simple key-> value component for text value type

## **Related issues**

Fixes: #11428

## **Manual testing steps**

1. Start storybook locally
2. Check InfoRow component

## **Screenshots/Recordings**
<img width="414" alt="Screenshot 2024-09-30 at 9 00 55 PM"
src="https://github.com/user-attachments/assets/2e74b828-cd6e-47fb-94d7-9a8a72389d9f">

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

.storybook/storybook.requires.js

@@ -123,6 +123,7 @@ const getStories = () => {
     "./app/component-library/base-components/TagBase/TagBase.stories.tsx": require("../app/component-library/base-components/TagBase/TagBase.stories.tsx"),
     "./app/component-library/components-temp/TagColored/TagColored.stories.tsx": require("../app/component-library/components-temp/TagColored/TagColored.stories.tsx"),
     "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"),
+    "./app/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/UI/InfoRow/InfoRow.stories.tsx"),
   };
 };
 

app/components/UI/InfoRow/InfoRow.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { StyleProp, Text, TextStyle, View } from 'react-native';
+
+import InfoRow from './InfoRow';
+import InfoSection from './InfoSection';
+
+const style = {
+  container: { padding: 8 },
+  title: { marginTop: 20, fontSize: 20, fontWeight: '700' },
+};
+
+storiesOf('App Components / InfoRow', module)
+  .addDecorator((getStory) => getStory())
+  .add('Default', () => (
+    <View style={style.container}>
+      <Text style={style.title as StyleProp<TextStyle>}>Simple Info Row</Text>
+      <InfoSection>
+        <InfoRow label="label-Key">Value-Text</InfoRow>
+      </InfoSection>
+      <Text style={style.title as StyleProp<TextStyle>}>Value wrapped</Text>
+      <InfoSection>
+        <InfoRow label="label-Key">
+          Value-Text Value-Text Value-Text Value-Text Value-Text Value-Text
+          Value-Text Value-Text Value-Text Value-Text Value-Text Value-Text
+          Value-Text Value-Text Value-Text Value-Text
+        </InfoRow>
+      </InfoSection>
+    </View>
+  ));

app/components/UI/InfoRow/InfoRow.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import InfoRow from './index';
+
+describe('InfoRow', () => {
+  it('should match snapshot for simple text value', async () => {
+    const container = render(<InfoRow label="label-Key">Value-Text</InfoRow>);
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/UI/InfoRow/InfoRow.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { useTheme } from '../../../util/theme';
+import createStyles from './style';
+
+interface InfoRowProps {
+  label: string;
+  children: React.ReactNode | string;
+  tooltip?: string;
+}
+
+const InfoRow = ({ label, children }: InfoRowProps) => {
+  const { colors } = useTheme();
+
+  const styles = createStyles(colors);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      {typeof children === 'string' ? (
+        <Text style={styles.value}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};
+
+export default InfoRow;

app/components/UI/InfoRow/InfoSection/InfoSection.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import InfoSection from './index';
+
+describe('InfoSection', () => {
+  it('should match snapshot for simple text value', async () => {
+    const container = render(
+      <InfoSection>
+        <View>
+          <Text>Test</Text>
+        </View>
+      </InfoSection>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

app/components/UI/InfoRow/InfoSection/InfoSection.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../../../util/theme';
+import createStyles from './style';
+
+interface InfoSectionProps {
+  children: React.ReactNode | string;
+}
+
+const InfoSection = ({ children }: InfoSectionProps) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  return <View style={styles.container}>{children}</View>;
+};
+
+export default InfoSection;

app/components/UI/InfoRow/InfoSection/__snapshots__/InfoSection.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoSection should match snapshot for simple text value 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#ffffff",
+      "borderColor": "#bbc0c566",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "padding": 8,
+    }
+  }
+>
+  <View>
+    <Text>
+      Test
+    </Text>
+  </View>
+</View>
+`;

app/components/UI/InfoRow/InfoSection/index.ts

@@ -0,0 +1 @@
+export { default } from './InfoSection';

app/components/UI/InfoRow/InfoSection/style.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../../util/theme/models';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: colors.background.default,
+      borderColor: colors.border.muted,
+      borderRadius: 8,
+      borderWidth: 1,
+      padding: 8,
+    },
+  });
+
+export default createStyles;

app/components/UI/InfoRow/__snapshots__/InfoRow.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoRow should match snapshot for simple text value 1`] = `
+<View
+  style={
+    {
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "justifyContent": "space-between",
+      "paddingBottom": 8,
+      "paddingHorizontal": 8,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Bold",
+        "fontSize": 14,
+        "fontWeight": "500",
+        "marginTop": 8,
+      }
+    }
+  >
+    label-Key
+  </Text>
+  <Text
+    style={
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "marginTop": 8,
+      }
+    }
+  >
+    Value-Text
+  </Text>
+</View>
+`;

app/components/UI/InfoRow/index.ts

@@ -0,0 +1 @@
+export { default } from './InfoRow';

app/components/UI/InfoRow/style.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../util/theme/models';
+import { fontStyles } from '../../../styles/common';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+      paddingBottom: 8,
+      paddingHorizontal: 8,
+    },
+    label: {
+      color: colors.text.default,
+      ...fontStyles.bold,
+      fontSize: 14,
+      fontWeight: '500',
+      marginTop: 8,
+    },
+    value: {
+      color: colors.text.default,
+      ...fontStyles.normal,
+      fontSize: 14,
+      marginTop: 8,
+    }
+  });
+
+export default createStyles;

app/components/Views/confirmations/components/Confirm/Title/Title.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Text, View } from 'react-native';
 import { TransactionType } from '@metamask/transaction-controller';
 
@@ -20,11 +20,8 @@ const Title = () => {
   const { approvalRequest } = useApprovalRequest();
   const { colors } = useTheme();
 
+  const title = getTitle(approvalRequest?.type);
   const styles = createStyles(colors);
-  const title = useMemo(
-    () => getTitle(approvalRequest?.type),
-    [approvalRequest?.type],
-  );
 
   return (
     <View style={styles.titleContainer}>