Add connected-accounts component to Storybook (#11637)

* name change

* add actions

* lintfix

.storybook/test-data.js

@@ -8,7 +8,13 @@ const state = {
   "unconnectedAccount": {
     "state": "CLOSED"
   },
-  "activeTab": {},
+  "activeTab": {
+    "id": 113,
+    "title": "E2E Test Dapp",
+    "origin": "https://metamask.github.io",
+    "protocol": "https:",
+    "url": "https://metamask.github.io/test-dapp/"
+  },
   "metamask": {
     "networkDetails": {
       "EIPS": {
@@ -547,7 +553,7 @@ const state = {
       }
     ],
     "permissionsHistory": {
-      "https://app.uniswap.org": {
+      "https://metamask.github.io": {
         "eth_accounts": {
           "lastApproved": 1620710693213,
           "accounts": {

ui/pages/connected-accounts/connected-accounts.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import ConnectedAccounts from './connected-accounts.component';
+
+export default {
+  title: 'Connected Accounts',
+};
+
+const account = [
+  {
+    name: 'Account 1',
+    address: '0x983211ce699ea5ab57cc528086154b6db1ad8e55',
+  },
+];
+const identities = {
+  name: 'Account 1',
+  address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+};
+export const ConnectedAccountComponent = () => {
+  return (
+    <ConnectedAccounts
+      connectedAccounts={account}
+      activeTabOrigin="https://metamask.github.io"
+      accountToConnect={identities}
+      connectAccount={action('Account Connected')}
+      removePermittedAccount={action('Account Removed')}
+      setSelectedAddress={action('Selected Address Changed')}
+    />
+  );
+};