Add account-list component to Storybook (#12228)

.storybook/test-data.js

@@ -37,6 +37,21 @@ const state = {
       swapsFeatureIsLive: false,
       swapsQuoteRefreshTime: 60000,
     },
+    accountArray: [
+      {
+        name: 'This is a Really Long Account Name',
+        address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+        index: 0,
+        balance: '0x176e5b6f173ebe66',
+      },
+      {
+        name: 'Account 2',
+        address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
+        index: 1,
+        balance: '0x2d3142f5000',
+      },
+    ],
+    connectedAccounts: ['0x64a845a5b02460acf8a3d84503b0d68d028b4bb4'],
     isInitialized: true,
     isUnlocked: true,
     isAccountMenuOpen: false,

ui/pages/create-account/connect-hardware/account-list.stories.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Provider } from 'react-redux';
+import { action } from '@storybook/addon-actions';
+import configureStore from '../../../store/store';
+import testData from '../../../../.storybook/test-data';
+
+import AccountList from './account-list';
+
+const store = configureStore(testData);
+
+export default {
+  title: 'Account List',
+  id: __filename,
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+};
+global.platform = {
+  openTab: () => action('Open Tab')(),
+};
+
+export const AccountListComponent = () => {
+  const [selectedAccounts, setSelectedAccounts] = useState([
+    {
+      name: 'This is a Really Long Account Name',
+      address: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
+      index: 0,
+      balance: '0x176e5b6f173ebe66',
+    },
+  ]);
+  const { metamask } = store.getState();
+  const { accountArray, connectedAccounts } = metamask;
+  const LEDGER_LIVE_PATH = `m/44'/60'/0'/0/0`;
+  const MEW_PATH = `m/44'/60'/0'`;
+  const BIP44_PATH = `m/44'/60'/0'/0`;
+
+  const HD_PATHS = [
+    { name: 'Ledger Live', value: LEDGER_LIVE_PATH },
+    { name: 'Legacy (MEW / MyCrypto)', value: MEW_PATH },
+    { name: `BIP44 Standard (e.g. MetaMask, Trezor)`, value: BIP44_PATH },
+  ];
+
+  const onAccountChange = (account) => {
+    let accounts = [];
+    if (selectedAccounts.includes(account)) {
+      accounts = selectedAccounts.filter((acc) => account !== acc);
+    } else {
+      accounts.push(account);
+    }
+    setSelectedAccounts(accounts);
+  };
+
+  return (
+    <AccountList
+      onPathChange={() => undefined}
+      selectedPath="/"
+      device="null"
+      accounts={accountArray}
+      connectedAccounts={connectedAccounts}
+      onAccountChange={onAccountChange}
+      onForgetDevice={() => action('On Forget Device')()}
+      getPage={() => action('Get Page')()}
+      selectedAccounts={selectedAccounts}
+      hdPaths={HD_PATHS}
+      onCancel={() => action('On Cancel')()}
+      onUnlockAccounts={() => action('On Unlock Accounts')()}
+      onAccountRestriction={() => action('On Account Restriction')()}
+    />
+  );
+};