From 85cf35b2d1522e08994174a00dc8158b2baf1cf1 Mon Sep 17 00:00:00 2001
From: kumavis <kumavis@users.noreply.github.com>
Date: Tue, 9 Feb 2021 00:49:49 +0800
Subject: [PATCH] Storybook: Signature Request (#10400)

* storybook - add signature request storybook entry

* storybook + improve test data + lint

* styles - apply flex and align center to --network
---
 .storybook/preview.js                         |   5 +-
 .storybook/test-data.js                       | 218 ++++++++++++++++++
 .../signature-request-header/index.scss       |   5 +-
 .../signature-request.stories.js              |  37 +++
 4 files changed, 259 insertions(+), 6 deletions(-)
 create mode 100644 .storybook/test-data.js
 create mode 100644 ui/app/components/app/signature-request/signature-request.stories.js

diff --git a/.storybook/preview.js b/.storybook/preview.js
index e8c6a3b1b..112c8f16e 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -8,6 +8,7 @@ import '../ui/app/css/index.scss';
 import localeList from '../app/_locales/index.json';
 import * as allLocales from './locales';
 import { I18nProvider, LegacyI18nProvider } from './i18n';
+import testData from './test-data.js'
 
 addParameters({
   backgrounds: {
@@ -40,9 +41,7 @@ const styles = {
   alignItems: 'center',
 };
 
-const store = configureStore({
-  metamask: { metamask: {} },
-});
+const store = configureStore(testData)
 
 const metamaskDecorator = (story, context) => {
   const currentLocale = context.globals.locale;
diff --git a/.storybook/test-data.js b/.storybook/test-data.js
new file mode 100644
index 000000000..99295cab0
--- /dev/null
+++ b/.storybook/test-data.js
@@ -0,0 +1,218 @@
+import { TRANSACTION_STATUSES } from '../shared/constants/transaction';
+
+const state = {
+  metamask: {
+    isInitialized: true,
+    isUnlocked: true,
+    featureFlags: { sendHexData: true },
+    rpcUrl: 'https://rawtestrpc.metamask.io/',
+    identities: {
+      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
+        address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+        name: 'Send Account 1',
+      },
+      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
+        address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+        name: 'Send Account 2',
+      },
+      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
+        address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        name: 'Send Account 3',
+      },
+      '0xd85a4b6a394794842887b8284293d69163007bbb': {
+        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
+        name: 'Send Account 4',
+      },
+    },
+    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',
+        },
+      },
+    },
+    tokens: [
+      {
+        address: '0x1a195821297c7a80a433b6894d3bdb8824b43896',
+        decimals: 18,
+        symbol: 'ABC',
+      },
+      {
+        address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        decimals: 4,
+        symbol: 'DEF',
+      },
+      {
+        address: '0xa42084c8d1d9a2198631988579bb36b48433a72b',
+        decimals: 18,
+        symbol: 'GHI',
+      },
+    ],
+    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 },
+    },
+    unapprovedMsgCount: 0,
+    unapprovedPersonalMsgs: {},
+    unapprovedPersonalMsgCount: 0,
+    unapprovedDecryptMsgs: {},
+    unapprovedDecryptMsgCount: 0,
+    unapprovedEncryptionPublicKeyMsgs: {},
+    unapprovedEncryptionPublicKeyMsgCount: 0,
+    keyringTypes: ['Simple Key Pair', 'HD Key Tree'],
+    keyrings: [
+      {
+        type: 'HD Key Tree',
+        accounts: [
+          'fdea65c8e26263f6d9a1b5de9555d2931a33b825',
+          'c5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+          '2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        ],
+      },
+      {
+        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',
+        },
+        txFee: '17e0186e60800',
+        txValue: 'de0b6b3a7640000',
+        maxCost: 'de234b52e4a0800',
+        gasPrice: '4a817c800',
+      },
+    },
+    currentLocale: 'en',
+  },
+  appState: {
+    menuOpen: false,
+    currentView: {
+      name: 'accountDetail',
+      detailView: null,
+      context: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+    },
+    accountDetail: {
+      subview: 'transactions',
+    },
+    modal: {
+      modalState: {},
+      previousModalState: {},
+    },
+    isLoading: false,
+    warning: null,
+    scrollToBottom: false,
+    forgottenPassword: null,
+  },
+  send: {
+    fromDropdownOpen: false,
+    toDropdownOpen: false,
+    errors: { someError: null },
+  },
+};
+
+export default state;
diff --git a/ui/app/components/app/signature-request/signature-request-header/index.scss b/ui/app/components/app/signature-request/signature-request-header/index.scss
index b4f3b5479..beaa5a92c 100644
--- a/ui/app/components/app/signature-request/signature-request-header/index.scss
+++ b/ui/app/components/app/signature-request/signature-request-header/index.scss
@@ -9,12 +9,11 @@
   &--account,
   &--network {
     flex: 1;
+    display: flex;
+    align-items: center;
   }
 
   &--account {
-    display: flex;
-    align-items: center;
-
     .account-list-item {
       &__top-row {
         display: flex;
diff --git a/ui/app/components/app/signature-request/signature-request.stories.js b/ui/app/components/app/signature-request/signature-request.stories.js
new file mode 100644
index 000000000..fd121cc86
--- /dev/null
+++ b/ui/app/components/app/signature-request/signature-request.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import testData from '../../../../../.storybook/test-data';
+import SignatureRequest from './signature-request.component';
+
+const primaryIdentity = Object.values(testData.metamask.identities)[0];
+
+const containerStyle = {
+  width: '357px',
+};
+
+export default {
+  title: 'Signature Request',
+};
+
+export const FirstLook = () => {
+  return (
+    <div style={containerStyle}>
+      <SignatureRequest
+        txData={{
+          msgParams: {
+            data: JSON.stringify({
+              domain: {
+                name: 'happydapp.website',
+              },
+              message: {
+                string: 'haay wuurl',
+                number: 42,
+              },
+            }),
+            origin: 'https://happydapp.website/governance?futarchy=true',
+          },
+        }}
+        fromAccount={primaryIdentity}
+      />
+    </div>
+  );
+};