mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
4c341d83ab
* 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
84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { addDecorator, addParameters } from '@storybook/react';
|
|
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: {
|
|
default: 'light',
|
|
values: [
|
|
{ name: 'light', value: '#FFFFFF' },
|
|
{ name: 'dark', value: '#333333' },
|
|
],
|
|
},
|
|
});
|
|
|
|
export const globalTypes = {
|
|
locale: {
|
|
name: 'Locale',
|
|
description: 'internationalization locale',
|
|
defaultValue: 'en',
|
|
toolbar: {
|
|
icon: 'globe',
|
|
items: localeList.map(({ code, name }) => {
|
|
return { value: code, right: code, title: name };
|
|
}),
|
|
},
|
|
},
|
|
};
|
|
|
|
const styles = {
|
|
height: '100vh',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
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}>
|
|
<Router history={history}>
|
|
<MetaMetricsProviderStorybook>
|
|
<I18nProvider
|
|
currentLocale={currentLocale}
|
|
current={current}
|
|
en={allLocales.en}
|
|
>
|
|
<LegacyI18nProvider>
|
|
<div style={styles}>{story()}</div>
|
|
</LegacyI18nProvider>
|
|
</I18nProvider>
|
|
</MetaMetricsProviderStorybook>
|
|
</Router>
|
|
</Provider>
|
|
);
|
|
};
|
|
|
|
addDecorator(withKnobs);
|
|
addDecorator(metamaskDecorator);
|