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
2024-12-23 09:52:26 +01:00 · 2021-05-25 08:20:09 +08:00 · 2021-05-25 08:20:09 +08:00 · 4c341d83ab
commit 4c341d83ab
parent e1c8afc8c4
20 changed files with 964 additions and 220 deletions
--- a/.storybook/initial-states/approval-screens/token-approval.js
+++ b/.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"
+  }
+}
--- a/.storybook/metametrics.js
+++ b/.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
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -1,6 +1,6 @@
 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';
@ -8,7 +8,11 @@ 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>
  );
 };
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@ -1,217 +1,782 @@
 import { TRANSACTION_STATUSES } from '../shared/constants/transaction';

 const state = {
-  metamask: {
-    isInitialized: true,
-    isUnlocked: true,
-    featureFlags: { sendHexData: true },
-    identities: {
-      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
-        address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-        name: 'Send Account 1',
+  "invalidCustomNetwork": {
+    "state": "CLOSED",
+    "networkName": ""
+  },
+  "unconnectedAccount": {
+    "state": "CLOSED"
+  },
+  "activeTab": {},
+  "metamask": {
+    "isInitialized": true,
+    "isUnlocked": true,
+    "isAccountMenuOpen": false,
+    "rpcUrl": "https://rawtestrpc.metamask.io/",
+    "identities": {
+      "0x983211ce699ea5ab57cc528086154b6db1ad8e55": {
+        "name": "Account 1",
+        "address": "0x983211ce699ea5ab57cc528086154b6db1ad8e55"
      },
-      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
-        address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-        name: 'Send Account 2',
-      },
-      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
-        address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-        name: 'Send Account 3',
-      },
-      '0xd85a4b6a394794842887b8284293d69163007bbb': {
-        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        name: 'Send Account 4',
+      "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": {
+        "name": "Account 2",
+        "address": "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e"
      },
+      "0x9d0ba4ddac06032527b140912ec808ab9451b788": {
+        "name": "Account 3",
+        "address": "0x9d0ba4ddac06032527b140912ec808ab9451b788"
+      }
    },
-    cachedBalances: {},
-    currentBlockGasLimit: '0x4c1878',
-    currentCurrency: 'USD',
-    conversionRate: 1200.88200327,
-    conversionDate: 1489013762,
-    nativeCurrency: 'ETH',
-    frequentRpcList: [],
-    network: '3',
-    provider: {
-      type: 'ropsten',
-      chainId: '0x3',
-    },
-    accounts: {
-      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
-        code: '0x',
-        balance: '0x47c9d71831c76efe',
-        nonce: '0x1b',
-        address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-      },
-      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
-        code: '0x',
-        balance: '0x37452b1315889f80',
-        nonce: '0xa',
-        address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-      },
-      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
-        code: '0x',
-        balance: '0x30c9d71831c76efe',
-        nonce: '0x1c',
-        address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-      },
-      '0xd85a4b6a394794842887b8284293d69163007bbb': {
-        code: '0x',
-        balance: '0x0',
-        nonce: '0x0',
-        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-      },
-    },
-    addressBook: {
-      '0x3': {
-        '0x06195827297c7a80a443b6894d3bdb8824b43896': {
-          address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
-          name: 'Address Book Account 1',
-          chainId: '0x3',
+    "unapprovedTxs": {
+      "7786962153682822": {
+        "id": 7786962153682822,
+        "time": 1620710815484,
+        "status": "unapproved",
+        "metamaskNetworkId": "3",
+        "chainId": "0x3",
+        "loadingDefaults": false,
+        "txParams": {
+          "from": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+          "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+          "value": "0x0",
+          "data": "0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000",
+          "gas": "0xcb28",
+          "gasPrice": "0x77359400"
        },
-      },
+        "type": "standard",
+        "origin": "metamask",
+        "transactionCategory": "transfer",
+        "history": [
+          {
+            "id": 7786962153682822,
+            "time": 1620710815484,
+            "status": "unapproved",
+            "metamaskNetworkId": "3",
+            "chainId": "0x3",
+            "loadingDefaults": true,
+            "txParams": {
+              "from": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+              "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+              "value": "0x0",
+              "data": "0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000",
+              "gas": "0xcb28",
+              "gasPrice": "0x77359400"
+            },
+            "type": "standard",
+            "origin": "metamask",
+            "transactionCategory": "transfer"
+          },
+          [
+            {
+              "op": "replace",
+              "path": "/loadingDefaults",
+              "value": false,
+              "note": "Added new unapproved transaction.",
+              "timestamp": 1620710815497
+            }
+          ]
+        ]
+      }
    },
-    tokens: [
+    "frequentRpcList": [],
+    "addressBook": {
+      "undefined": {
+        "0": {
+          "address": "0x39a4e4Af7cCB654dB9500F258c64781c8FbD39F0",
+          "name": "",
+          "isEns": false
+        }
+      }
+    },
+    "contractExchangeRates": {
+      "0xad6d458402f60fd3bd25163575031acdce07538d": 0
+    },
+    "tokens": [
      {
-        address: '0x1a195821297c7a80a433b6894d3bdb8824b43896',
-        decimals: 18,
-        symbol: 'ABC',
-      },
-      {
-        address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-        decimals: 4,
-        symbol: 'DEF',
-      },
-      {
-        address: '0xa42084c8d1d9a2198631988579bb36b48433a72b',
-        decimals: 18,
-        symbol: 'GHI',
-      },
+        "address": "0xad6d458402f60fd3bd25163575031acdce07538d",
+        "symbol": "DAI",
+        "decimals": 18
+      }
    ],
-    transactions: {},
-    currentNetworkTxList: [
-      {
-        id: 'mockTokenTx1',
-        txParams: {
-          to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1700000000000,
-      },
-      {
-        id: 'mockTokenTx2',
-        txParams: {
-          to: '0xafaketokenaddress',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1600000000000,
-      },
-      {
-        id: 'mockTokenTx3',
-        txParams: {
-          to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1500000000000,
-      },
-      {
-        id: 'mockEthTx1',
-        txParams: {
-          to: '0xd85a4b6a394794842887b8284293d69163007bbb',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1400000000000,
-      },
-    ],
-    unapprovedMsgs: {
-      '0xabc': { id: 'unapprovedMessage1', time: 1650000000000 },
-      '0xdef': { id: 'unapprovedMessage2', time: 1550000000000 },
-      '0xghi': { id: 'unapprovedMessage3', time: 1450000000000 },
+    "pendingTokens": {},
+    "customNonceValue": "",
+    "send": {
+      "gasLimit": "0xcb28",
+      "gasPrice": null,
+      "gasTotal": null,
+      "tokenBalance": "8.7a73149c048545a3fe58",
+      "from": "",
+      "to": "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e",
+      "amount": "3782dace9d900000",
+      "memo": "",
+      "errors": {},
+      "maxModeOn": false,
+      "editingTransactionId": null,
+      "toNickname": "Account 2",
+      "ensResolution": null,
+      "ensResolutionError": "",
+      "token": {
+        "address": "0xad6d458402f60fd3bd25163575031acdce07538d",
+        "symbol": "DAI",
+        "decimals": 18
+      }
    },
-    unapprovedMsgCount: 0,
-    unapprovedPersonalMsgs: {},
-    unapprovedPersonalMsgCount: 0,
-    unapprovedDecryptMsgs: {},
-    unapprovedDecryptMsgCount: 0,
-    unapprovedEncryptionPublicKeyMsgs: {},
-    unapprovedEncryptionPublicKeyMsgCount: 0,
-    keyringTypes: ['Simple Key Pair', 'HD Key Tree'],
-    keyrings: [
+    "useBlockie": false,
+    "featureFlags": {},
+    "welcomeScreenSeen": false,
+    "currentLocale": "en",
+    "preferences": {
+      "useNativeCurrencyAsPrimaryCurrency": true
+    },
+    "firstTimeFlowType": "create",
+    "completedOnboarding": true,
+    "knownMethodData": {
+      "0x60806040": {
+        "name": "Approve Tokens"
+      },
+      "0x095ea7b3": {
+        "name": "Approve Tokens"
+      }
+    },
+    "participateInMetaMetrics": true,
+    "metaMetricsSendCount": 2,
+    "nextNonce": 71,
+    "connectedStatusPopoverHasBeenShown": true,
+    "swapsWelcomeMessageHasBeenShown": true,
+    "defaultHomeActiveTabName": "Assets",
+    "provider": {
+      "type": "ropsten",
+      "ticker": "ETH",
+      "nickname": "",
+      "rpcUrl": "",
+      "chainId": "0x3"
+    },
+    "previousProviderStore": {
+      "type": "ropsten",
+      "ticker": "ETH",
+      "nickname": "",
+      "rpcUrl": "",
+      "chainId": "0x3"
+    },
+    "network": "3",
+    "accounts": {
+      "0x983211ce699ea5ab57cc528086154b6db1ad8e55": {
+        "address": "0x983211ce699ea5ab57cc528086154b6db1ad8e55",
+        "balance": "0x176e5b6f173ebe66"
+      },
+      "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": {
+        "address": "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e",
+        "balance": "0x2d3142f5000"
+      },
+      "0x9d0ba4ddac06032527b140912ec808ab9451b788": {
+        "address": "0x9d0ba4ddac06032527b140912ec808ab9451b788",
+        "balance": "0x15f6f0b9d4f8d000"
+      }
+    },
+    "currentBlockGasLimit": "0x793af4",
+    "currentNetworkTxList": [
+      
+    ],
+    "cachedBalances": {
+      "1": {
+        "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": "0x0",
+        "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": "0xcaf5317161f400",
+        "0x9d0ba4ddac06032527b140912ec808ab9451b788": "0x0"
+      },
+      "3": {
+        "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": "0x18d289d450bace66",
+        "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": "0x2d3142f5000",
+        "0x9d0ba4ddac06032527b140912ec808ab9451b788": "0x15f6f0b9d4f8d000"
+      },
+      "0x3": {
+        "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": "0x176e5b6f173ebe66",
+        "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": "0x2d3142f5000",
+        "0x9d0ba4ddac06032527b140912ec808ab9451b788": "0x15f6f0b9d4f8d000"
+      }
+    },
+    "unapprovedMsgs": {},
+    "unapprovedMsgCount": 0,
+    "unapprovedPersonalMsgs": {},
+    "unapprovedPersonalMsgCount": 0,
+    "unapprovedDecryptMsgs": {},
+    "unapprovedDecryptMsgCount": 0,
+    "unapprovedEncryptionPublicKeyMsgs": {},
+    "unapprovedEncryptionPublicKeyMsgCount": 0,
+    "unapprovedTypedMessages": {},
+    "unapprovedTypedMessagesCount": 0,
+    "keyringTypes": [
+      "Simple Key Pair",
+      "HD Key Tree",
+      "Trezor Hardware",
+      "Ledger Hardware"
+    ],
+    "keyrings": [
      {
-        type: 'HD Key Tree',
-        accounts: [
-          'fdea65c8e26263f6d9a1b5de9555d2931a33b825',
-          'c5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          '2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        "type": "HD Key Tree",
+        "accounts": [
+          "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+          "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e",
+          "0x9d0ba4ddac06032527b140912ec808ab9451b788"
+        ]
+      }
+    ],
+    "frequentRpcListDetail": [
+      {
+        "rpcUrl": "http://localhost:8545",
+        "chainId": "0x539",
+        "ticker": "ETH",
+        "nickname": "Localhost 8545",
+        "rpcPrefs": {}
+      }
+    ],
+    "accountTokens": {
+      "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": {
+        "0x1": [
+          {
+            "address": "0x6b175474e89094c44da98b954eedeac495271d0f",
+            "symbol": "DAI",
+            "decimals": 18
+          },
+          {
+            "address": "0x0d8775f648430679a709e98d2b0cb6250d2887ef",
+            "symbol": "BAT",
+            "decimals": 18
+          }
        ],
+        "0x3": [
+          {
+            "address": "0xad6d458402f60fd3bd25163575031acdce07538d",
+            "symbol": "DAI",
+            "decimals": 18
+          }
+        ]
+      },
+      "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": {},
+      "0x9d0ba4ddac06032527b140912ec808ab9451b788": {}
+    },
+    "accountHiddenTokens": {
+      "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": {
+        "0x3": []
+      }
+    },
+    "assetImages": {
+      "0xad6d458402f60fd3bd25163575031acdce07538d": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xaD6D458402F60fD3Bd25163575031ACDce07538D/logo.png"
+    },
+    "hiddenTokens": [],
+    "suggestedTokens": {},
+    "useNonceField": false,
+    "usePhishDetect": true,
+    "lostIdentities": {},
+    "forgottenPassword": false,
+    "ipfsGateway": "dweb.link",
+    "infuraBlocked": false,
+    "migratedPrivacyMode": false,
+    "selectedAddress": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+    "metaMetricsId": "0xc2377d11fec1c3b7dd88c4854240ee5e3ed0d9f63b00456d98d80320337b827f",
+    "conversionDate": 1620710825.03,
+    "conversionRate": 3910.28,
+    "currentCurrency": "usd",
+    "nativeCurrency": "ETH",
+    "usdConversionRate": 3910.28,
+    "ticker": "ETH",
+    "alertEnabledness": {
+      "unconnectedAccount": true,
+      "web3ShimUsage": true
+    },
+    "unconnectedAccountAlertShownOrigins": {},
+    "web3ShimUsageOrigins": {},
+    "seedPhraseBackedUp": null,
+    "onboardingTabs": {},
+    "incomingTransactions": {
+      "0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa": {
+        "blockNumber": "8888976",
+        "id": 4678200543090532,
+        "metamaskNetworkId": "1",
+        "status": "confirmed",
+        "time": 1573114896000,
+        "txParams": {
+          "from": "0x3f1b52850109023775d238c7ed5d5e7161041fd1",
+          "gas": "0x5208",
+          "gasPrice": "0x124101100",
+          "nonce": "0x35",
+          "to": "0x045c619e4d29bba3b92769508831b681b83d6a96",
+          "value": "0xbca9bce4d98ca3"
+        },
+        "hash": "0x2de9256a7c604586f7ecfd87ae9509851e217f588f9f85feed793c54ed2ce0aa",
+        "transactionCategory": "incoming"
+      },
+      "0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd": {
+        "blockNumber": "9453174",
+        "id": 4678200543090535,
+        "metamaskNetworkId": "1",
+        "status": "confirmed",
+        "time": 1581312411000,
+        "txParams": {
+          "from": "0xa17bd07d6d38cb9e37b29f7659a4b1047701e969",
+          "gas": "0xc350",
+          "gasPrice": "0x1a13b8600",
+          "nonce": "0x0",
+          "to": "0x045c619e4d29bba3b92769508831b681b83d6a96",
+          "value": "0xcdb08ab4254000"
+        },
+        "hash": "0x320a1fd769373578f78570e5d8f56e89bc7bce9657bb5f4c12d8fe790d471bfd",
+        "transactionCategory": "incoming"
+      },
+      "0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239": {
+        "blockNumber": "10892417",
+        "id": 4678200543090542,
+        "metamaskNetworkId": "1",
+        "status": "confirmed",
+        "time": 1600515224000,
+        "txParams": {
+          "from": "0x0681d8db095565fe8a346fa0277bffde9c0edbbf",
+          "gas": "0x5208",
+          "gasPrice": "0x1d1a94a200",
+          "nonce": "0x2bb8a5",
+          "to": "0x045c619e4d29bba3b92769508831b681b83d6a96",
+          "value": "0xe6ed27d6668000"
+        },
+        "hash": "0x8add6c1ea089a8de9b15fa2056b1875360f17916755c88ace9e5092b7a4b1239",
+        "transactionCategory": "incoming"
+      },
+      "0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144": {
+        "blockNumber": "10902987",
+        "id": 4678200543090545,
+        "metamaskNetworkId": "1",
+        "status": "confirmed",
+        "time": 1600654021000,
+        "txParams": {
+          "from": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+          "gas": "0x5208",
+          "gasPrice": "0x147d357000",
+          "nonce": "0xf",
+          "to": "0x045c619e4d29bba3b92769508831b681b83d6a96",
+          "value": "0x63eb89da4ed00000"
+        },
+        "hash": "0x50be62ab1cabd03ff104c602c11fdef7a50f3d73c55006d5583ba97950ab1144",
+        "transactionCategory": "incoming"
+      }
+    },
+    "incomingTxLastFetchedBlocksByNetwork": {
+      "ropsten": 8872820,
+      "rinkeby": null,
+      "kovan": null,
+      "goerli": null,
+      "mainnet": 10902989
+    },
+    "permissionsRequests": [],
+    "permissionsDescriptions": {},
+    "domains": {
+      "https://app.uniswap.org": {
+        "permissions": [
+          {
+            "@context": [
+              "https://github.com/MetaMask/rpc-cap"
+            ],
+            "invoker": "https://app.uniswap.org",
+            "parentCapability": "eth_accounts",
+            "id": "a7342e4b-beae-4525-a36c-c0635fd03359",
+            "date": 1620710693178,
+            "caveats": [
+              {
+                "type": "limitResponseLength",
+                "value": 1,
+                "name": "primaryAccountOnly"
+              },
+              {
+                "type": "filterResponse",
+                "value": [
+                  "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4"
+                ],
+                "name": "exposedAccounts"
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "permissionsLog": [
+      {
+        "id": 522690215,
+        "method": "eth_accounts",
+        "methodType": "restricted",
+        "origin": "https://metamask.io",
+        "request": {
+          "method": "eth_accounts",
+          "params": [],
+          "jsonrpc": "2.0",
+          "id": 522690215,
+          "origin": "https://metamask.io",
+          "tabId": 5
+        },
+        "requestTime": 1602643170686,
+        "response": {
+          "id": 522690215,
+          "jsonrpc": "2.0",
+          "result": []
+        },
+        "responseTime": 1602643170688,
+        "success": true
      },
      {
-        type: 'Simple Key Pair',
-        accounts: ['0xd85a4b6a394794842887b8284293d69163007bbb'],
-      },
-    ],
-    selectedAddress: '0xd85a4b6a394794842887b8284293d69163007bbb',
-    send: {
-      gasLimit: '0xFFFF',
-      gasPrice: '0xaa',
-      gasTotal: '0xb451dc41b578',
-      tokenBalance: 3434,
-      from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-      to: '0x987fedabc',
-      amount: '0x080',
-      memo: '',
-      errors: {
-        someError: null,
-      },
-      maxModeOn: false,
-      editingTransactionId: 97531,
-    },
-    unapprovedTxs: {
-      4768706228115573: {
-        id: 4768706228115573,
-        time: 1487363153561,
-        status: TRANSACTION_STATUSES.UNAPPROVED,
-        gasMultiplier: 1,
-        metamaskNetworkId: '3',
-        txParams: {
-          from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          to: '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
-          value: '0xde0b6b3a7640000',
-          metamaskId: 4768706228115573,
-          metamaskNetworkId: '3',
-          gas: '0x5209',
+        "id": 1620464600,
+        "method": "eth_accounts",
+        "methodType": "restricted",
+        "origin": "https://widget.getacute.io",
+        "request": {
+          "method": "eth_accounts",
+          "params": [],
+          "jsonrpc": "2.0",
+          "id": 1620464600,
+          "origin": "https://widget.getacute.io",
+          "tabId": 5
        },
-        txFee: '17e0186e60800',
-        txValue: 'de0b6b3a7640000',
-        maxCost: 'de234b52e4a0800',
-        gasPrice: '4a817c800',
+        "requestTime": 1602643172935,
+        "response": {
+          "id": 1620464600,
+          "jsonrpc": "2.0",
+          "result": []
+        },
+        "responseTime": 1602643172935,
+        "success": true
      },
+      {
+        "id": 4279100021,
+        "method": "eth_accounts",
+        "methodType": "restricted",
+        "origin": "https://app.uniswap.org",
+        "request": {
+          "method": "eth_accounts",
+          "jsonrpc": "2.0",
+          "id": 4279100021,
+          "origin": "https://app.uniswap.org",
+          "tabId": 5
+        },
+        "requestTime": 1620710669962,
+        "response": {
+          "id": 4279100021,
+          "jsonrpc": "2.0",
+          "result": []
+        },
+        "responseTime": 1620710669963,
+        "success": true
+      },
+      {
+        "id": 4279100022,
+        "method": "eth_requestAccounts",
+        "methodType": "restricted",
+        "origin": "https://app.uniswap.org",
+        "request": {
+          "method": "eth_requestAccounts",
+          "jsonrpc": "2.0",
+          "id": 4279100022,
+          "origin": "https://app.uniswap.org",
+          "tabId": 5
+        },
+        "requestTime": 1620710686872,
+        "response": {
+          "id": 4279100022,
+          "jsonrpc": "2.0",
+          "result": [
+            "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4"
+          ]
+        },
+        "responseTime": 1620710693187,
+        "success": true
+      },
+      {
+        "id": 4279100023,
+        "method": "eth_requestAccounts",
+        "methodType": "restricted",
+        "origin": "https://app.uniswap.org",
+        "request": {
+          "method": "eth_requestAccounts",
+          "jsonrpc": "2.0",
+          "id": 4279100023,
+          "origin": "https://app.uniswap.org",
+          "tabId": 5
+        },
+        "requestTime": 1620710693204,
+        "response": {
+          "id": 4279100023,
+          "jsonrpc": "2.0",
+          "result": [
+            "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4"
+          ]
+        },
+        "responseTime": 1620710693213,
+        "success": true
+      },
+      {
+        "id": 4279100034,
+        "method": "eth_accounts",
+        "methodType": "restricted",
+        "origin": "https://app.uniswap.org",
+        "request": {
+          "method": "eth_accounts",
+          "params": [],
+          "jsonrpc": "2.0",
+          "id": 4279100034,
+          "origin": "https://app.uniswap.org",
+          "tabId": 5
+        },
+        "requestTime": 1620710712072,
+        "response": {
+          "id": 4279100034,
+          "jsonrpc": "2.0",
+          "result": [
+            "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4"
+          ]
+        },
+        "responseTime": 1620710712075,
+        "success": true
+      }
+    ],
+    "permissionsHistory": {
+      "https://app.uniswap.org": {
+        "eth_accounts": {
+          "lastApproved": 1620710693213,
+          "accounts": {
+            "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": 1620710693213
+          }
+        }
+      }
    },
-    currentLocale: 'en',
+    "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"
+      }
+    },
+    "threeBoxSyncingAllowed": false,
+    "showRestorePrompt": true,
+    "threeBoxLastUpdated": 0,
+    "threeBoxAddress": null,
+    "threeBoxSynced": false,
+    "threeBoxDisabled": false,
+    "swapsState": {
+      "quotes": {},
+      "fetchParams": null,
+      "tokens": null,
+      "tradeTxId": null,
+      "approveTxId": null,
+      "quotesLastFetched": null,
+      "customMaxGas": "",
+      "customGasPrice": null,
+      "selectedAggId": null,
+      "customApproveTxData": "",
+      "errorKey": "",
+      "topAggId": null,
+      "routeState": "",
+      "swapsFeatureIsLive": false,
+      "swapsQuoteRefreshTime": 60000
+    },
+    "ensResolutionsByAddress": {},
+    "pendingApprovals": {},
+    "pendingApprovalCount": 0
  },
-  appState: {
-    menuOpen: false,
-    currentView: {
-      name: 'accountDetail',
-      detailView: null,
-      context: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+  "appState": {
+    "shouldClose": false,
+    "menuOpen": false,
+    "modal": {
+      "open": false,
+      "modalState": {
+        "name": null,
+        "props": {}
+      },
+      "previousModalState": {
+        "name": null
+      }
    },
-    accountDetail: {
-      subview: 'transactions',
+    "sidebar": {
+      "isOpen": false,
+      "transitionName": "",
+      "type": "",
+      "props": {}
    },
-    modal: {
-      modalState: {},
-      previousModalState: {},
+    "alertOpen": false,
+    "alertMessage": null,
+    "qrCodeData": null,
+    "networkDropdownOpen": false,
+    "accountDetail": {
+      "subview": "transactions"
    },
-    isLoading: false,
-    warning: null,
-    scrollToBottom: false,
-    forgottenPassword: null,
+    "isLoading": false,
+    "warning": null,
+    "buyView": {},
+    "isMouseUser": true,
+    "gasIsLoading": false,
+    "defaultHdPaths": {
+      "trezor": "m/44'/60'/0'/0",
+      "ledger": "m/44'/60'/0'/0/0"
+    },
+    "networksTabSelectedRpcUrl": "",
+    "networksTabIsInAddMode": false,
+    "loadingMethodData": false,
+    "show3BoxModalAfterImport": false,
+    "threeBoxLastUpdated": null,
+    "requestAccountTabs": {},
+    "openMetaMaskTabs": {},
+    "currentWindowTab": {}
  },
-  send: {
-    fromDropdownOpen: false,
-    toDropdownOpen: false,
-    errors: { someError: null },
+  "history": {
+    "mostRecentOverviewPage": "/"
  },
-};
+  "send": {
+    "toDropdownOpen": false,
+    "gasButtonGroupShown": true,
+    "errors": {}
+  },
+  "confirmTransaction": {
+    "txData": {
+      "id": 3111025347726181,
+      "time": 1620723786838,
+      "status": "unapproved",
+      "metamaskNetworkId": "3",
+      "chainId": "0x3",
+      "loadingDefaults": false,
+      "txParams": {
+        "from": "0x983211ce699ea5ab57cc528086154b6db1ad8e55",
+        "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+        "value": "0x0",
+        "data": "0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170",
+        "gas": "0xea60",
+        "gasPrice": "0x4a817c800"
+      },
+      "type": "standard",
+      "origin": "https://metamask.github.io",
+      "transactionCategory": "approve",
+      "history": [
+        {
+          "id": 3111025347726181,
+          "time": 1620723786838,
+          "status": "unapproved",
+          "metamaskNetworkId": "3",
+          "chainId": "0x3",
+          "loadingDefaults": true,
+          "txParams": {
+            "from": "0x983211ce699ea5ab57cc528086154b6db1ad8e55",
+            "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+            "value": "0x0",
+            "data": "0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170",
+            "gas": "0xea60",
+            "gasPrice": "0x4a817c800"
+          },
+          "type": "standard",
+          "origin": "https://metamask.github.io",
+          "transactionCategory": "approve"
+        },
+        [
+          {
+            "op": "replace",
+            "path": "/loadingDefaults",
+            "value": false,
+            "note": "Added new unapproved transaction.",
+            "timestamp": 1620723786844
+          }
+        ]
+      ]
+    },
+    "tokenData": {
+      "args": [
+        "0x9bc5baF874d2DA8D216aE9f137804184EE5AfEF4",
+        {
+          "type": "BigNumber",
+          "hex": "0x011170"
+        }
+      ],
+      "functionFragment": {
+        "type": "function",
+        "name": "approve",
+        "constant": false,
+        "inputs": [
+          {
+            "name": "_spender",
+            "type": "address",
+            "indexed": null,
+            "components": null,
+            "arrayLength": null,
+            "arrayChildren": null,
+            "baseType": "address",
+            "_isParamType": true
+          },
+          {
+            "name": "_value",
+            "type": "uint256",
+            "indexed": null,
+            "components": null,
+            "arrayLength": null,
+            "arrayChildren": null,
+            "baseType": "uint256",
+            "_isParamType": true
+          }
+        ],
+        "outputs": [
+          {
+            "name": "success",
+            "type": "bool",
+            "indexed": null,
+            "components": null,
+            "arrayLength": null,
+            "arrayChildren": null,
+            "baseType": "bool",
+            "_isParamType": true
+          }
+        ],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "gas": null,
+        "_isFragment": true
+      },
+      "name": "approve",
+      "signature": "approve(address,uint256)",
+      "sighash": "0x095ea7b3",
+      "value": {
+        "type": "BigNumber",
+        "hex": "0x00"
+      }
+    },
+    "fiatTransactionAmount": "0",
+    "fiatTransactionFee": "4.72",
+    "fiatTransactionTotal": "4.72",
+    "ethTransactionAmount": "0",
+    "ethTransactionFee": "0.0012",
+    "ethTransactionTotal": "0.0012",
+    "hexTransactionAmount": "0x0",
+    "hexTransactionFee": "0x44364c5bb0000",
+    "hexTransactionTotal": "0x44364c5bb0000",
+    "nonce": ""
+  },
+  "swaps": {
+    "aggregatorMetadata": null,
+    "approveTxId": null,
+    "balanceError": false,
+    "fetchingQuotes": false,
+    "fromToken": null,
+    "quotesFetchStartTime": null,
+    "topAssets": {},
+    "toToken": null,
+    "customGas": {
+      "price": null,
+      "limit": null,
+      "loading": "INITIAL",
+      "priceEstimates": {},
+      "fallBackPrice": null
+    }
+  },
+  "gas": {
+    "customData": {
+      "price": null,
+      "limit": "0xcb28"
+    },
+    "basicEstimates": {
+      "average": 2
+    },
+    "basicEstimateIsLoading": false
+  }
+}

 export default state;
--- a/package.json
+++ b/package.json
@ -271,6 +271,7 @@
    "gulp-terser-js": "^5.2.2",
    "gulp-watch": "^5.0.1",
    "gulp-zip": "^4.0.0",
+    "history": "^5.0.0",
    "jest": "^26.6.3",
    "jsdom": "^11.2.0",
    "koa": "^2.7.0",
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
@ -6,7 +6,7 @@ const ConfirmPageContainerWarning = (props) => {
    <div className="confirm-page-container-warning">
      <img
        className="confirm-page-container-warning__icon"
-        src="/images/alert.svg"
+        src="./images/alert.svg"
        alt=""
      />
      <div className="confirm-page-container-warning__warning">
--- a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
@ -47,7 +47,7 @@ export default function ConfirmPageContainerHeader({
              visibility: showEdit ? 'initial' : 'hidden',
            }}
          >
-            <img src="/images/caret-left.svg" alt="" />
+            <img src="./images/caret-left.svg" alt="" />
            <span
              className="confirm-page-container-header__back-button"
              onClick={() => onEdit()}
--- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@ -33,14 +33,14 @@ const ConfirmPageContainerNavigation = (props) => {
          data-testid="first-page"
          onClick={() => onNextTx(firstTx)}
        >
-          <img src="/images/double-arrow.svg" alt="" />
+          <img src="./images/double-arrow.svg" alt="" />
        </div>
        <div
          className="confirm-page-container-navigation__arrow"
          data-testid="previous-page"
          onClick={() => onNextTx(prevTxId)}
        >
-          <img src="/images/single-arrow.svg" alt="" />
+          <img src="./images/single-arrow.svg" alt="" />
        </div>
      </div>
      <div className="confirm-page-container-navigation__textcontainer">
@ -64,7 +64,7 @@ const ConfirmPageContainerNavigation = (props) => {
        >
          <img
            className="confirm-page-container-navigation__imageflip"
-            src="/images/single-arrow.svg"
+            src="./images/single-arrow.svg"
            alt=""
          />
        </div>
@ -75,7 +75,7 @@ const ConfirmPageContainerNavigation = (props) => {
        >
          <img
            className="confirm-page-container-navigation__imageflip"
-            src="/images/double-arrow.svg"
+            src="./images/double-arrow.svg"
            alt=""
          />
        </div>
--- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@ -215,7 +215,7 @@ export default class TransactionListItemDetails extends PureComponent {
                  onClick={this.handleBlockExplorerClick}
                  disabled={!hash}
                >
-                  <img src="/images/arrow-popout.svg" alt="" />
+                  <img src="./images/arrow-popout.svg" alt="" />
                </Button>
              </Tooltip>
              {showRetry && (
--- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
+++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@ -22,7 +22,9 @@ export default function UserPreferencedCurrencyDisplay({
  const prefixComponent = useMemo(() => {
    return (
      currency === ETH &&
-      showEthLogo && <img src="/images/eth.svg" height={ethLogoHeight} alt="" />
+      showEthLogo && (
+        <img src="./images/eth.svg" height={ethLogoHeight} alt="" />
+      )
    );
  }, [currency, showEthLogo, ethLogoHeight]);

--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@ -7,7 +7,11 @@ const ErrorMessage = (props, context) => {

  return (
    <div className="error-message">
-      <img src="/images/alert-red.svg" alt="" className="error-message__icon" />
+      <img
+        src="./images/alert-red.svg"
+        alt=""
+        className="error-message__icon"
+      />
      <div className="error-message__text">{`ALERT: ${error}`}</div>
    </div>
  );
--- a/ui/components/ui/metafox-logo/metafox-logo.component.js
+++ b/ui/components/ui/metafox-logo/metafox-logo.component.js
@ -25,7 +25,7 @@ export default class MetaFoxLogo extends PureComponent {
      >
        <img
          height="30"
-          src="/images/logo/metamask-logo-horizontal.svg"
+          src="./images/logo/metamask-logo-horizontal.svg"
          className={classnames(
            'app-header__metafox-logo',
            'app-header__metafox-logo--horizontal',
@ -34,7 +34,7 @@ export default class MetaFoxLogo extends PureComponent {
        />
        <img
          {...iconProps}
-          src="/images/logo/metamask-fox.svg"
+          src="./images/logo/metamask-fox.svg"
          className={classnames(
            'app-header__metafox-logo',
            'app-header__metafox-logo--icon',
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@ -350,7 +350,7 @@ export default class ConfirmApproveContent extends Component {
          <div className="confirm-approve-content__full-tx-content">
            <div className="confirm-approve-content__permission">
              {this.renderApproveContentCard({
-                symbol: <img src="/images/user-check.svg" alt="" />,
+                symbol: <img src="./images/user-check.svg" alt="" />,
                title: 'Permission',
                content: this.renderPermissionContent(),
                showEdit: true,
--- a/ui/pages/confirm-approve/confirm-approve.stories.js
+++ b/ui/pages/confirm-approve/confirm-approve.stories.js
@ -0,0 +1,67 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+import { text } from '@storybook/addon-knobs';
+import { useParams } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { updateMetamaskState } from '../../store/actions';
+import { currentNetworkTxListSelector } from '../../selectors/transactions';
+import { store } from '../../../.storybook/preview';
+
+import {
+  currentNetworkTxListSample,
+  domainMetadata,
+} from '../../../.storybook/initial-states/approval-screens/token-approval';
+import ConfirmApprove from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+// transaction ID, maps to entry in state.metamask.currentNetworkTxList
+const txId = 7900715443136469;
+
+const PageSet = ({ children }) => {
+  const origin = text('Origin', 'https://metamask.github.io');
+  const domainIconUrl = text(
+    'Icon URL',
+    'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  );
+
+  const currentNetworkTxList = useSelector(currentNetworkTxListSelector);
+  const transaction = currentNetworkTxList.find(({ id }) => id === txId);
+
+  useEffect(() => {
+    transaction.origin = origin;
+    store.dispatch(
+      updateMetamaskState({ currentNetworkTxList: [transaction] }),
+    );
+  }, [origin]);
+
+  useEffect(() => {
+    store.dispatch(
+      updateMetamaskState({
+        domainMetadata: {
+          [origin]: {
+            icon: domainIconUrl,
+          },
+        },
+      }),
+    );
+  }, [domainIconUrl]);
+
+  const params = useParams();
+  params.id = txId;
+  return children;
+};
+
+export const ApproveTokens = () => {
+  store.dispatch(
+    updateMetamaskState({ currentNetworkTxList: [currentNetworkTxListSample] }),
+  );
+  store.dispatch(updateMetamaskState({ domainMetadata }));
+  return (
+    <PageSet>
+      <ConfirmApprove />
+    </PageSet>
+  );
+};
--- a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@ -86,7 +86,7 @@ export default function ConfirmTokenTransactionBase({
      primaryTotalTextOverride={
        <div>
          <span>{`${tokensText} + `}</span>
-          <img src="/images/eth.svg" height="18" alt="" />
+          <img src="./images/eth.svg" height="18" alt="" />
          <span>{ethTransactionTotal}</span>
        </div>
      }
--- a/ui/pages/first-time-flow/select-action/select-action.component.js
+++ b/ui/pages/first-time-flow/select-action/select-action.component.js
@ -50,7 +50,7 @@ export default class SelectAction extends PureComponent {
              <div className="select-action__select-button">
                <div className="select-action__button-content">
                  <div className="select-action__button-symbol">
-                    <img src="/images/download-alt.svg" alt="" />
+                    <img src="./images/download-alt.svg" alt="" />
                  </div>
                  <div className="select-action__button-text-big">
                    {t('noAlreadyHaveSeed')}
@ -70,7 +70,7 @@ export default class SelectAction extends PureComponent {
              <div className="select-action__select-button">
                <div className="select-action__button-content">
                  <div className="select-action__button-symbol">
-                    <img src="/images/thin-plus.svg" alt="" />
+                    <img src="./images/thin-plus.svg" alt="" />
                  </div>
                  <div className="select-action__button-text-big">
                    {t('letsGoSetUp')}
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
@ -49,7 +49,7 @@ export default class ContactListTab extends Component {
    return (
      <div className="address-book__container">
        <div>
-          <img src="/images/address-book.svg" alt="Address book icon" />
+          <img src="./images/address-book.svg" alt="Address book icon" />
          <h4 className="address-book__title">{t('builContactList')}</h4>
          <p className="address-book__sub-title">
            {t('addFriendsAndAddresses')}
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@ -404,7 +404,7 @@ export default function BuildQuote({
            }}
          >
            <img
-              src="/images/icons/swap2.svg"
+              src="./images/icons/swap2.svg"
              alt={t('swapSwapSwitch')}
              width="12"
              height="16"
--- a/ui/pages/swaps/select-quote-popover/quote-details/quote-details.js
+++ b/ui/pages/swaps/select-quote-popover/quote-details/quote-details.js
@ -80,7 +80,7 @@ const QuoteDetails = ({
      <div className="quote-details__row quote-details__row--high">
        <div className="quote-details__detail-header">
          <img
-            src="/images/logo/metamask-fox.svg"
+            src="./images/logo/metamask-fox.svg"
            className="quote-details__metafox-logo"
            alt=""
          />
--- a/yarn.lock
+++ b/yarn.lock
@ -13486,6 +13486,13 @@ history@^4.9.0:
    tiny-warning "^1.0.0"
    value-equal "^1.0.1"

+history@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
+  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"