diff --git a/ui/components/app/signature-request/signature-request-data/signature-request-data.stories.js b/ui/components/app/signature-request/signature-request-data/signature-request-data.stories.js
new file mode 100644
index 000000000..31300c3e6
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-data/signature-request-data.stories.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import SignatureRequestData from './signature-request-data';
+
+export default {
+  title: 'Components/App/SignatureRequest/SignatureRequestData',
+  id: __filename,
+  component: SignatureRequestData,
+  argTypes: {
+    data: { control: 'object' },
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <SignatureRequestData {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  data: JSON.parse(
+    JSON.stringify({
+      domain: {
+        name: 'happydapp.website',
+      },
+      message: {
+        string: 'haay wuurl',
+        number: 42,
+      },
+      primaryType: 'Mail',
+      types: {
+        EIP712Domain: [
+          { name: 'name', type: 'string' },
+          { name: 'version', type: 'string' },
+          { name: 'chainId', type: 'uint256' },
+          { name: 'verifyingContract', type: 'address' },
+        ],
+        Group: [
+          { name: 'name', type: 'string' },
+          { name: 'members', type: 'Person[]' },
+        ],
+        Mail: [
+          { name: 'from', type: 'Person' },
+          { name: 'to', type: 'Person[]' },
+          { name: 'contents', type: 'string' },
+        ],
+        Person: [
+          { name: 'name', type: 'string' },
+          { name: 'wallets', type: 'address[]' },
+        ],
+      },
+    }),
+  ),
+};
diff --git a/ui/components/app/signature-request/signature-request-data/signature-request-data.test.js b/ui/components/app/signature-request/signature-request-data/signature-request-data.test.js
new file mode 100644
index 000000000..7a2f4a186
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-data/signature-request-data.test.js
@@ -0,0 +1,472 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import Identicon from '../../../ui/identicon';
+import SignatureRequestData from './signature-request-data';
+
+describe('Signature Request Data', () => {
+  describe('render', () => {
+    const mockStore = {
+      metamask: {
+        tokenList: {
+          '0x514910771af9ca656af840dff83e8264ecf986ca': {
+            address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+            symbol: 'LINK',
+            decimals: 18,
+            name: 'ChainLink Token',
+            iconUrl:
+              'https://crypto.com/price/coin-data/icon/LINK/color_icon.png',
+            aggregators: [
+              'Aave',
+              'Bancor',
+              'CMC',
+              'Crypto.com',
+              'CoinGecko',
+              '1inch',
+              'Paraswap',
+              'PMM',
+              'Zapper',
+              'Zerion',
+              '0x',
+            ],
+            occurrences: 12,
+            unlisted: false,
+          },
+        },
+        provider: {
+          type: 'test',
+          chainId: '0x5',
+        },
+        identities: {
+          '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826': {
+            name: 'Account 1',
+            address: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+          },
+          '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF': {
+            name: 'Account 2',
+            address: '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF',
+          },
+        },
+        addressBook: {
+          '0x5': {
+            '0x06195827297c7A80a443b6894d3BDB8824b43896': {
+              address: '0x06195827297c7A80a443b6894d3BDB8824b43896',
+              name: 'Address Book Account 1',
+              chainId: '0x5',
+            },
+          },
+        },
+      },
+    };
+
+    let messageData;
+    const store = configureMockStore()(mockStore);
+
+    beforeEach(() => {
+      messageData = {
+        domain: {
+          chainId: 97,
+          name: 'Ether Mail',
+          verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
+          version: '1',
+        },
+        message: {
+          contents: 'Hello, Bob!',
+          from: {
+            name: 'Cow',
+            wallets: [
+              '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+              '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF',
+              '0x06195827297c7A80a443b6894d3BDB8824b43896',
+            ],
+          },
+          to: [
+            {
+              name: 'Bob',
+              wallets: [
+                '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+                '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57',
+                '0xB0B0b0b0b0b0B000000000000000000000000000',
+              ],
+            },
+          ],
+        },
+        primaryType: 'Mail',
+        types: {
+          EIP712Domain: [
+            { name: 'name', type: 'string' },
+            { name: 'version', type: 'string' },
+            { name: 'chainId', type: 'uint256' },
+            { name: 'verifyingContract', type: 'address' },
+          ],
+          Mail: [
+            { name: 'from', type: 'Person' },
+            { name: 'to', type: 'Person[]' },
+            { name: 'contents', type: 'string' },
+          ],
+          Person: [
+            { name: 'name', type: 'string' },
+            { name: 'wallets', type: 'address[]' },
+          ],
+        },
+      };
+    });
+
+    it('should render domain chainId', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('97')).toBeInTheDocument();
+    });
+
+    it('should render domain name', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Ether Mail')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for domain verifying contract', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.domain.verifyingContract}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render domain verifying contract shorten address', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('0xCcC...cccC')).toBeInTheDocument();
+    });
+
+    it('should render contents title', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Contents:')).toBeInTheDocument();
+    });
+
+    it('should render contants text', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Hello, Bob!')).toBeInTheDocument();
+    });
+
+    it('should render from title', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('From:')).toBeInTheDocument();
+    });
+
+    it('should render name title in "from" object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams.data.message.from} />,
+        store,
+      );
+
+      expect(getByText('Name:')).toBeInTheDocument();
+    });
+
+    it('should render name text in "from" object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('should render wallets title in "from" object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams.data.message.from} />,
+        store,
+      );
+
+      expect(getByText('Wallets:')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for first wallet in "from" object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.message.from.wallets[0]}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render first account name from wallets array if address exists in identities object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Account 1')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for second wallet in "from" object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.message.from.wallets[1]}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render second account name from wallets array if address exists in identities object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Account 2')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for third wallet in "from" object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.message.from.wallets[2]}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render third account name from wallets array if address exists in address book object', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('Address Book Account 1')).toBeInTheDocument();
+    });
+
+    it('should render name title in "to" array of objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams.data.message.to[0]} />,
+        store,
+      );
+
+      expect(getByText('Name:')).toBeInTheDocument();
+    });
+
+    it('should render name text in "to" array of objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams.data.message.to[0]} />,
+        store,
+      );
+
+      expect(getByText('Bob')).toBeInTheDocument();
+    });
+
+    it('should render wallets title in "to" array of objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams.data.message.to[0]} />,
+        store,
+      );
+
+      expect(getByText('Wallets:')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for first wallet in "to" array of objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.message.to[0].wallets[0]}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render first shorten address from wallets array if address does not exists in identities and address book objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('0xbBb...BBbB')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for second wallet in "to" array of objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.message.to[0].wallets[1]}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render second shorten address from wallets array if address does not exists in identities and address book objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('0xB0B...Ea57')).toBeInTheDocument();
+    });
+
+    it('should render Identicon for third wallet in "to" array of objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const iconImage = (
+        <Identicon
+          diameter={32}
+          address={msgParams.data.message.to[0].wallets[2]}
+        />
+      );
+      expect(iconImage).toBeDefined();
+    });
+
+    it('should render third shorten address from wallets array if address does not exists in identities and address book objects', () => {
+      const msgParams = {
+        data: JSON.parse(JSON.stringify(messageData)),
+        version: 'V4',
+        origin: 'test',
+      };
+      const { getByText } = renderWithProvider(
+        <SignatureRequestData data={msgParams} />,
+        store,
+      );
+
+      expect(getByText('0xB0B...0000')).toBeInTheDocument();
+    });
+  });
+});