Add send-header to Storybook (#12084)

.storybook/actions/sb-send-action.js

@@ -0,0 +1,9 @@
+export const updateSendAsset = (type) => ({
+  type: 'send/updateSendAsset',
+  payload: type,
+});
+
+export const updateSendStage = (stage) => ({
+  type: 'send/updateSendStage',
+  payload: stage,
+});

.storybook/reducers/sb-history-reducer.js

@@ -0,0 +1,9 @@
+import testData from '../test-data';
+
+const initialState = { ...testData.history };
+export default function historySBReducer(state = initialState, action) {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}

.storybook/reducers/sb-send-reducer.js

@@ -0,0 +1,19 @@
+import testData from '../test-data';
+
+const initialState = { ...testData.send };
+export default function sendSBReducer(state = initialState, action) {
+  switch (action.type) {
+    case 'send/updateSendStage':
+      return {
+        ...state,
+        stage: action.payload,
+      };
+    case 'send/updateSendAsset':
+      return {
+        ...state,
+        asset: { ...state.asset, type: action.payload },
+      };
+    default:
+      return state;
+  }
+}

.storybook/test-data.js

@@ -379,6 +379,15 @@ const state = {
               value: '0x9c2686',
             },
           ],
+          [
+            {
+              note: 'txStateManager: setting status to confirmed',
+              op: 'replace',
+              path: '/status',
+              timestamp: 1629582721178,
+              value: 'confirmed',
+            },
+          ],
           [
             {
               note: 'txStateManager: setting status to confirmed',
@@ -1178,6 +1187,7 @@ const state = {
       balance: '0x0',
       details: null,
     },
+    stage: 'ADD_RECIPIENT',
     amount: '3782dace9d900000',
     gas: {
       price: null,

ui/pages/send/send-header/send-header.stories.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { combineReducers, createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import { select } from '@storybook/addon-knobs';
+import {
+  updateSendStage,
+  updateSendAsset,
+} from '../../../../.storybook/actions/sb-send-action';
+
+import sendSBReducer from '../../../../.storybook/reducers/sb-send-reducer';
+import historySBReducer from '../../../../.storybook/reducers/sb-history-reducer';
+
+import { ASSET_TYPES, SEND_STAGES } from '../../../ducks/send';
+import SendHeader from './send-header.component';
+
+export default {
+  title: 'SendHeader',
+  id: __filename,
+};
+
+export const SendHeaderComponent = () => {
+  const store = createStore(
+    combineReducers({ send: sendSBReducer, history: historySBReducer }),
+  );
+  const state = store.getState();
+  const { send } = state;
+  const asset =
+    select('Asset', [ASSET_TYPES.NATIVE, ASSET_TYPES.TOKEN]) || send.asset;
+
+  const stage =
+    select('Stage', [
+      SEND_STAGES.ADD_RECIPIENT,
+      SEND_STAGES.DRAFT,
+      SEND_STAGES.EDIT,
+      SEND_STAGES.INACTIVE,
+    ]) || send.stage;
+
+  useEffect(() => {
+    store.dispatch(updateSendAsset(asset));
+  }, [store, asset]);
+
+  useEffect(() => {
+    store.dispatch(updateSendStage(stage));
+  }, [store, stage]);
+
+  return (
+    <Provider store={store}>
+      <div style={{ width: 600 }}>
+        <SendHeader />
+      </div>
+    </Provider>
+  );
+};