Add Approval Confirmation Screen component to Storybook (#10998)

* add metametrics wrapper

* add history dep

* provide test data and mock react router

* add first confirmaion screen

* figure out a way to mock match.params

* render token approval with data

* fix lockfile

* fix lint

* remove use effect

* lintfix

* add . for src paths

* litfix

* Add knobs to change redux store for confirm-approve component (Storybook) (#11135)

* add knob for domain

* knobify

* remove logs

* remove comment

* lintfix

* fix comments

* add background calls + metriccs event to storybook acctions

* lintfixxxx

.storybook/initial-states/approval-screens/token-approval.js

@@ -0,0 +1,56 @@
+export const currentNetworkTxListSample = {
+  "id": 7900715443136469,
+  "time": 1621395091737,
+  "status": "unapproved",
+  "metamaskNetworkId": "1337",
+  "chainId": "0x539",
+  "loadingDefaults": false,
+  "txParams": {
+    "from": "0x90f79bf6eb2c4f870365e785982e1f101e93b906",
+    "to": "0x057ef64e23666f000b34ae31332854acbd1c8544",
+    "value": "0x0",
+    "data": "0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170",
+    "gas": "0xea60",
+    "gasPrice": "0x4a817c800"
+  },
+  "origin": "https://metamask.github.io",
+  "type": "approve",
+  "history": [
+    {
+      "id": 7900715443136469,
+      "time": 1621395091737,
+      "status": "unapproved",
+      "metamaskNetworkId": "1337",
+      "chainId": "0x539",
+      "loadingDefaults": true,
+      "txParams": {
+        "from": "0x90f79bf6eb2c4f870365e785982e1f101e93b906",
+        "to": "0x057ef64e23666f000b34ae31332854acbd1c8544",
+        "value": "0x0",
+        "data": "0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170",
+        "gas": "0xea60",
+        "gasPrice": "0x4a817c800"
+      },
+      "origin": "https://metamask.github.io",
+      "type": "approve"
+    },
+    [
+      {
+        "op": "replace",
+        "path": "/loadingDefaults",
+        "value": false,
+        "note": "Added new unapproved transaction.",
+        "timestamp": 1621395091742
+      }
+    ]
+  ]
+}
+
+export const domainMetadata = {
+  "https://metamask.github.io": {
+    "name": "E2E Test Dapp",
+    "icon": "https://metamask.github.io/test-dapp/metamask-fox.svg",
+    "lastUpdated": 1620723443380,
+    "host": "metamask.github.io"
+  }
+}

.storybook/metametrics.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  MetaMetricsProvider,
+  LegacyMetaMetricsProvider,
+} from '../ui/contexts/metametrics';
+import {
+  MetaMetricsProvider as NewMetaMetricsProvider,
+  LegacyMetaMetricsProvider as NewLegacyMetaMetricsProvider,
+} from '../ui/contexts/metametrics.new';
+
+const MetaMetricsProviderStorybook = (props) => 
+    (
+    <MetaMetricsProvider>
+      <LegacyMetaMetricsProvider>
+        <NewMetaMetricsProvider>
+          <NewLegacyMetaMetricsProvider>
+            {props.children}
+          </NewLegacyMetaMetricsProvider>
+        </NewMetaMetricsProvider>
+      </LegacyMetaMetricsProvider>
+    </MetaMetricsProvider>
+  );
+
+export default MetaMetricsProviderStorybook

.storybook/preview.js

@@ -1,14 +1,18 @@
 import React, { useEffect } from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
-import { useGlobals } from '@storybook/api';
+import { action } from '@storybook/addon-actions';
 import { withKnobs } from '@storybook/addon-knobs';
 import { Provider } from 'react-redux';
 import configureStore from '../ui/store/store';
 import '../ui/css/index.scss';
 import localeList from '../app/_locales/index.json';
 import * as allLocales from './locales';
 import { I18nProvider, LegacyI18nProvider } from './i18n';
+import MetaMetricsProviderStorybook from './metametrics'
 import testData from './test-data.js';
+import { Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
+import { _setBackgroundConnection } from '../ui/store/actions'
 
 addParameters({
   backgrounds: {
@@ -41,22 +45,36 @@ const styles = {
   alignItems: 'center',
 };
 
-const store = configureStore(testData);
+export const store = configureStore(testData);
+const history = createBrowserHistory();
+const proxiedBackground = new Proxy({}, {
+    get(_, method) {
+      return function() {
+        action(`Background call: ${method}`)()
+        return new Promise(() => {})
+      }
+    }
+  })
+_setBackgroundConnection(proxiedBackground)
 
 const metamaskDecorator = (story, context) => {
   const currentLocale = context.globals.locale;
   const current = allLocales[currentLocale];
   return (
     <Provider store={store}>
-      <I18nProvider
-        currentLocale={currentLocale}
-        current={current}
-        en={allLocales.en}
-      >
-        <LegacyI18nProvider>
-          <div style={styles}>{story()}</div>
-        </LegacyI18nProvider>
-      </I18nProvider>
+      <Router history={history}>
+        <MetaMetricsProviderStorybook>
+          <I18nProvider
+            currentLocale={currentLocale}
+            current={current}
+            en={allLocales.en}
+          >
+            <LegacyI18nProvider>
+              <div style={styles}>{story()}</div>
+            </LegacyI18nProvider>
+          </I18nProvider>
+        </MetaMetricsProviderStorybook>
+      </Router>
     </Provider>
   );
 };