setTheme(theme)}
27 | />
28 | ))}
29 | {languagesList.map(lang => (
30 |
setLocalization(lang)}
39 | />
40 | ))}
41 |
42 | );
43 | }
44 |
45 | export const TogglersConnected = observer(Togglers);
46 |
--------------------------------------------------------------------------------
/src/pages/MarketDetailed/OrderBook/OffersTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cn from 'classnames';
3 |
4 | import { precise } from 'utils';
5 |
6 | import styles from './OrderBook.scss';
7 |
8 | export function OffersTable({
9 | dataArray,
10 | dataTotal,
11 | rowClassName,
12 | reverseTotal,
13 | maxTotal,
14 | tradedCurrency,
15 | }) {
16 | let currentTotal = reverseTotal ? dataTotal : 0;
17 |
18 | return (
19 |
20 | {dataArray.map(({ price, amount, total }, index) => {
21 | if (reverseTotal) {
22 | if (index > 0) {
23 | currentTotal -= total;
24 | }
25 | } else {
26 | currentTotal += total;
27 | }
28 |
29 | const barStyle = {
30 | width: `${(currentTotal / maxTotal) * 60}%`,
31 | };
32 |
33 | return (
34 |
35 |
{precise(price, tradedCurrency)}
36 |
{precise(amount, tradedCurrency)}
37 |
{currentTotal.toFixed(4)}
38 |
39 |
40 | );
41 | })}
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/eslint-custom/eslint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: 'babel-eslint',
3 | env: {
4 | browser: true,
5 | node: true,
6 | es6: true,
7 | 'cypress/globals': true,
8 | },
9 | settings: {
10 | react: {
11 | version: 'detect',
12 | },
13 | },
14 | extends: [
15 | './rules/best-practices.yaml',
16 | './rules/ecmascript-6.yaml',
17 | './rules/node-js-and-common-js.yaml',
18 | './rules/possible-errors.yaml',
19 | './rules/strict-mode.yaml',
20 | './rules/stylistic-issues.yaml',
21 | './rules/variables.yaml',
22 | './rules/react.yaml',
23 | 'prettier',
24 | 'prettier/babel',
25 | 'prettier/react',
26 | ],
27 | plugins: ['react', 'prettier', 'import', 'react-hooks', 'cypress'],
28 | rules: {
29 | 'prettier/prettier': [
30 | 'warn',
31 | {
32 | printWidth: 80,
33 | tabWidth: 2,
34 | singleQuote: true,
35 | semi: true,
36 | trailingComma: 'es5',
37 | bracketSpacing: true,
38 | jsxBracketSameLine: false,
39 | arrowParens: 'avoid',
40 | proseWrap: 'never',
41 | },
42 | ],
43 | },
44 | parserOptions: {
45 | ecmaFeatures: {
46 | legacyDecorators: true,
47 | },
48 | },
49 | globals: {
50 | SENTRY_URL: true,
51 | HOT_RELOAD: true,
52 | PUBLIC_URL: true,
53 | },
54 | };
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "exchange_habr",
3 | "homepage": "https://dkazakov8.github.io/exchange_habr/dist",
4 | "version": "1.0.0",
5 | "description": "An example of building Frontend for Exchange platform",
6 | "author": "Dmitry Kazakov",
7 | "license": "MIT",
8 | "scripts": {
9 | "upd": "yarn install --no-lockfile",
10 | "dev": "webpack-dev-server --config webpack-custom/webpack.config.js",
11 | "build": "webpack --config webpack-custom/webpack.config.js",
12 | "format:js": "eslint --ignore-path .formatignore --ext .js -c ./eslint-custom/eslint.config.js --fix",
13 | "format:style": "stylelint --ignore-path .formatignore --config ./eslint-custom/stylelint.config.js --fix"
14 | },
15 | "browserslist": [
16 | "last 2 versions",
17 | "not dead"
18 | ],
19 | "husky": {
20 | "hooks": {
21 | "pre-commit": "npm run format:js -- --max-warnings=0 ./ && npm run format:style ./**/*.scss"
22 | }
23 | },
24 | "dependencies": {
25 | "@hot-loader/react-dom": "16.8.6",
26 | "@sentry/browser": "5.1.1",
27 | "classnames": "2.2.6",
28 | "eslint-custom": "file:./eslint-custom",
29 | "highcharts": "7.1.1",
30 | "husky": "2.1.0",
31 | "lodash": "4.17.11",
32 | "mobx": "5.9.4",
33 | "mobx-react-lite": "1.3.0",
34 | "react": "16.8.6",
35 | "webpack-custom": "file:./webpack-custom"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/webpack-custom/config/configOptimization.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @docs: https://webpack.js.org/configuration/optimization
3 | *
4 | */
5 |
6 | const TerserPlugin = require('terser-webpack-plugin');
7 |
8 | module.exports = {
9 | runtimeChunk: {
10 | name: 'runtime',
11 | },
12 | chunkIds: 'named',
13 | moduleIds: 'hashed',
14 | mergeDuplicateChunks: true,
15 | splitChunks: {
16 | cacheGroups: {
17 | lodash: {
18 | test: module => module.context.indexOf('node_modules\\lodash') !== -1,
19 | name: 'lodash',
20 | chunks: 'all',
21 | enforce: true,
22 | },
23 | sentry: {
24 | test: module => module.context.indexOf('node_modules\\@sentry') !== -1,
25 | name: 'sentry',
26 | chunks: 'all',
27 | enforce: true,
28 | },
29 | highcharts: {
30 | test: module =>
31 | module.context.indexOf('node_modules\\highcharts') !== -1,
32 | name: 'highcharts',
33 | chunks: 'all',
34 | enforce: true,
35 | },
36 | vendor: {
37 | test: module => module.context.indexOf('node_modules') !== -1,
38 | priority: -1,
39 | name: 'vendor',
40 | chunks: 'all',
41 | enforce: true,
42 | },
43 | },
44 | },
45 | minimizer: [
46 | new TerserPlugin({
47 | terserOptions: {
48 | keep_fnames: true,
49 | },
50 | }),
51 | ],
52 | };
53 |
--------------------------------------------------------------------------------
/src/pages/MarketDetailed/MarketList/MarketList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cn from 'classnames';
3 |
4 | import { observer } from 'utils';
5 | import { useLocalization } from 'hooks';
6 |
7 | import { TogglersConnected } from './Togglers';
8 | import { PairsListConnected } from './PairsList';
9 | import { MarketTabsConnected } from './MarketTabs';
10 |
11 | import styles from './MarketList.scss';
12 | import { messages } from './messages';
13 |
14 | function MarketsList() {
15 | const getLn = useLocalization(__filename, messages);
16 |
17 | const numericCellClassName = cn(styles.cell, styles.alignRight);
18 |
19 | return (
20 |
21 |
22 |
23 | {getLn(messages.marketsList)}
24 |
25 |
26 |
27 |
28 |
29 |
{getLn(messages.pair)}
30 |
{getLn(messages.price)}
31 |
{getLn(messages.change)}
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 |
40 | export const MarketsListConnected = observer(MarketsList);
41 |
--------------------------------------------------------------------------------
/src/utils/observer.js:
--------------------------------------------------------------------------------
1 | import { useObserver } from 'mobx-react-lite';
2 | import React from 'react';
3 | import _ from 'lodash';
4 |
5 | function copyStaticProperties(base, target) {
6 | const hoistBlackList = {
7 | $$typeof: true,
8 | render: true,
9 | compare: true,
10 | type: true,
11 | };
12 |
13 | Object.keys(base).forEach(key => {
14 | if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
15 | Object.defineProperty(
16 | target,
17 | key,
18 | Object.getOwnPropertyDescriptor(base, key)
19 | );
20 | }
21 | });
22 | }
23 |
24 | export function observer(baseComponent, options) {
25 | const baseComponentName = baseComponent.displayName || baseComponent.name;
26 |
27 | function wrappedComponent(props, ref) {
28 | return useObserver(function applyObserver() {
29 | return baseComponent(props, ref);
30 | }, baseComponentName);
31 | }
32 | wrappedComponent.displayName = baseComponentName;
33 |
34 | let memoComponent = null;
35 | if (HOT_RELOAD === 'true') {
36 | memoComponent = wrappedComponent;
37 | } else if (_.get(options, 'forwardRef')) {
38 | memoComponent = React.memo(React.forwardRef(wrappedComponent));
39 | } else {
40 | memoComponent = React.memo(wrappedComponent);
41 | }
42 |
43 | copyStaticProperties(baseComponent, memoComponent);
44 | memoComponent.displayName = baseComponentName;
45 |
46 | return memoComponent;
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/Link/Link.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import _ from 'lodash';
3 |
4 | import { useStore } from 'hooks';
5 | import { observer } from 'utils';
6 |
7 | function checkRouteParamsWithMasks(route, params) {
8 | if (route.masks) {
9 | Object.entries(route.masks).forEach(([paramName, paramMask]) => {
10 | const value = _.get(params, paramName);
11 |
12 | if (paramMask && !paramMask.test(value)) {
13 | console.error(
14 | `checkRouteParamsWithMasks: wrong param for ${paramName} in Link to ${
15 | route.name
16 | }: ${value}`
17 | );
18 | }
19 | });
20 | }
21 | }
22 |
23 | function Link(props) {
24 | const store = useStore();
25 | const { currentRoute } = store.router;
26 | const { route, params, children, onClick, ...otherProps } = props;
27 |
28 | checkRouteParamsWithMasks(route, params);
29 |
30 | const filledPath = store.router.replaceDynamicParams(route, params);
31 |
32 | return (
33 |
{
36 | e.preventDefault();
37 |
38 | if (currentRoute.isLoading) {
39 | return false;
40 | }
41 |
42 | store.router.goTo(route, params);
43 |
44 | if (onClick) {
45 | onClick();
46 | }
47 | }}
48 | {...otherProps}
49 | >
50 | {children}
51 |
52 | );
53 | }
54 |
55 | export const LinkConnected = observer(Link);
56 |
--------------------------------------------------------------------------------
/webpack-custom/utils/sassVariablesLoader.js:
--------------------------------------------------------------------------------
1 | function convertSourceToJsObject(source) {
2 | const themesObject = {};
3 | const fullThemesArray = source.match(/\.([^}]|\s)*}/g) || [];
4 |
5 | fullThemesArray.forEach(fullThemeStr => {
6 | const theme = fullThemeStr.match(/\.\w+\s{/g)[0].replace(/\W/g, '');
7 | themesObject[theme] = {};
8 |
9 | const variablesMatches = fullThemeStr.match(/--(.*:[^;]*)/g) || [];
10 |
11 | variablesMatches.forEach(varMatch => {
12 | const [key, value] = varMatch.split(': ');
13 | themesObject[theme][key] = value;
14 | });
15 | });
16 |
17 | return themesObject;
18 | }
19 |
20 | function checkThemesEquality(themes) {
21 | const themesArray = Object.keys(themes);
22 |
23 | themesArray.forEach(themeStr => {
24 | const themeObject = themes[themeStr];
25 | const otherThemesArray = themesArray.filter(t => t !== themeStr);
26 |
27 | Object.keys(themeObject).forEach(variableName => {
28 | otherThemesArray.forEach(otherThemeStr => {
29 | const otherThemeObject = themes[otherThemeStr];
30 |
31 | if (!otherThemeObject[variableName]) {
32 | throw new Error(
33 | `checkThemesEquality: theme ${otherThemeStr} has no variable ${variableName}`
34 | );
35 | }
36 | });
37 | });
38 | });
39 | }
40 |
41 | module.exports = function sassVariablesLoader(source) {
42 | const themes = convertSourceToJsObject(source);
43 |
44 | checkThemesEquality(themes);
45 |
46 | return `module.exports = ${JSON.stringify(themes)}`;
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/Router/Router.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import _ from 'lodash';
3 |
4 | import { useStore } from 'hooks';
5 | import { observer } from 'utils';
6 | import { routeComponents } from 'routeComponents';
7 |
8 | function getRouteComponent(route, isLoading) {
9 | const Component = routeComponents[route.name];
10 |
11 | if (!Component) {
12 | console.error(
13 | `getRouteComponent: component for ${
14 | route.name
15 | } is not defined in routeComponents`
16 | );
17 |
18 | return null;
19 | }
20 |
21 | return
;
22 | }
23 |
24 | function useBeforeEnter() {
25 | const store = useStore();
26 | const { currentRoute } = store.router;
27 |
28 | React.useEffect(() => {
29 | if (currentRoute.isLoading) {
30 | const beforeEnter = _.get(currentRoute, 'beforeEnter');
31 |
32 | if (_.isFunction(beforeEnter)) {
33 | Promise.resolve()
34 | .then(() => beforeEnter(currentRoute, store))
35 | .then(() => {
36 | currentRoute.isLoading = false;
37 | })
38 | .catch(error => console.error(error));
39 | } else {
40 | currentRoute.isLoading = false;
41 | }
42 | }
43 | });
44 |
45 | return currentRoute.isLoading;
46 | }
47 |
48 | function Router() {
49 | const {
50 | router: { currentRoute },
51 | } = useStore();
52 | const isLoading = useBeforeEnter();
53 |
54 | return getRouteComponent(currentRoute, isLoading);
55 | }
56 |
57 | export const RouterConnected = observer(Router);
58 |
--------------------------------------------------------------------------------
/src/utils/makeObservable.js:
--------------------------------------------------------------------------------
1 | import { action, computed, decorate, observable } from 'mobx';
2 |
3 | export function makeObservable(target) {
4 | /**
5 | * Для методов - биндим контекст this + все изменения сторов
6 | * выполняем в одной транзакции
7 | *
8 | * Для геттеров - оборачиваем в computed
9 | *
10 | */
11 |
12 | const classPrototype = target.prototype;
13 | const methodsAndGetters = Object.getOwnPropertyNames(classPrototype).filter(
14 | methodName => methodName !== 'constructor'
15 | );
16 |
17 | for (const methodName of methodsAndGetters) {
18 | const descriptor = Object.getOwnPropertyDescriptor(
19 | classPrototype,
20 | methodName
21 | );
22 |
23 | descriptor.value = decorate(classPrototype, {
24 | [methodName]:
25 | typeof descriptor.value === 'function' ? action.bound : computed,
26 | });
27 | }
28 |
29 | return (...constructorArguments) => {
30 | /**
31 | * Параметры, за исключением rootStore, трансформируем в
32 | * observable
33 | *
34 | */
35 |
36 | const store = new target(...constructorArguments);
37 | const staticProperties = Object.keys(store);
38 |
39 | staticProperties.forEach(propName => {
40 | if (propName === 'rootStore') {
41 | return false;
42 | }
43 |
44 | const descriptor = Object.getOwnPropertyDescriptor(store, propName);
45 |
46 | Object.defineProperty(
47 | store,
48 | propName,
49 | observable(store, propName, descriptor)
50 | );
51 | });
52 |
53 | return store;
54 | };
55 | }
56 |
--------------------------------------------------------------------------------
/webpack-custom/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-custom",
3 | "version": "1.0.0",
4 | "description": "Custom webpack rules for this project",
5 | "author": "Dmitry Kazakov",
6 | "license": "MIT",
7 | "dependencies": {
8 | "@babel/core": "7.4.4",
9 | "@babel/plugin-proposal-class-properties": "7.4.4",
10 | "@babel/plugin-proposal-decorators": "7.4.4",
11 | "@babel/preset-env": "7.4.4",
12 | "@babel/preset-react": "7.0.0",
13 | "@cypress/webpack-preprocessor": "4.0.3",
14 | "autoprefixer": "9.5.1",
15 | "babel-loader": "8.0.5",
16 | "babel-plugin-lodash": "3.3.4",
17 | "circular-dependency-plugin": "5.0.2",
18 | "clean-webpack-plugin": "2.0.1",
19 | "css-loader": "2.1.1",
20 | "dotenv-webpack": "1.7.0",
21 | "html-webpack-plugin": "3.2.0",
22 | "mini-css-extract-plugin": "0.6.0",
23 | "postcss-advanced-variables": "3.0.0",
24 | "postcss-automath": "1.0.1",
25 | "postcss-custom-properties": "8.0.10",
26 | "postcss-import": "12.0.1",
27 | "postcss-loader": "3.0.0",
28 | "postcss-nested": "4.1.2",
29 | "postcss-scss": "2.0.0",
30 | "postcss-strip-inline-comments": "0.1.5",
31 | "react-hot-loader": "4.8.4",
32 | "speed-measure-webpack-plugin": "1.3.1",
33 | "style-loader": "0.23.1",
34 | "svg-inline-loader": "0.8.0",
35 | "terser-webpack-plugin": "1.2.3",
36 | "thread-loader": "2.1.2",
37 | "url-loader": "1.1.2",
38 | "webpack": "4.30.0",
39 | "webpack-bundle-analyzer": "3.3.2",
40 | "webpack-cli": "3.3.1",
41 | "webpack-dev-server": "3.3.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/styles/themes.scss:
--------------------------------------------------------------------------------
1 | .light {
2 | --n0: rgb(255, 255, 255);
3 | --n100: rgb(186, 186, 186);
4 | --n10: rgb(249, 249, 249);
5 | --n10a3: rgba(249, 249, 249, 0.3);
6 | --n20: rgb(245, 245, 245);
7 | --n30: rgb(221, 221, 221);
8 | --n500: rgb(136, 136, 136);
9 | --n600: rgb(102, 102, 102);
10 | --n900: rgb(0, 0, 0);
11 |
12 | --b100: rgb(219, 237, 251);
13 | --b300: rgb(179, 214, 252);
14 | --b500: rgb(14, 123, 249);
15 | --b500a3: rgba(14, 123, 249, 0.3);
16 | --b900: rgb(32, 39, 57);
17 |
18 | --g400: rgb(71, 215, 141);
19 | --g500: rgb(61, 189, 125);
20 | --g500a1: rgba(61, 189, 125, 0.1);
21 | --g500a2: rgba(61, 189, 125, 0.2);
22 |
23 | --r400: rgb(255, 100, 100);
24 | --r500: rgb(255, 0, 0);
25 | --r500a1: rgba(255, 0, 0, 0.1);
26 | --r500a2: rgba(255, 0, 0, 0.2);
27 | }
28 |
29 | .dark {
30 | --n0: rgb(25, 32, 48);
31 | --n100: rgb(114, 126, 151);
32 | --n10: rgb(39, 46, 62);
33 | --n10a3: rgba(39, 46, 62, 0.3);
34 | --n20: rgb(25, 44, 74);
35 | --n30: rgb(67, 75, 111);
36 | --n500: rgb(117, 128, 154);
37 | --n600: rgb(255, 255, 255);
38 | --n900: rgb(255, 255, 255);
39 |
40 | --b100: rgb(219, 237, 251);
41 | --b300: rgb(39, 46, 62);
42 | --b500: rgb(14, 123, 249);
43 | --b500a3: rgba(14, 123, 249, 0.3);
44 | --b900: rgb(32, 39, 57);
45 |
46 | --g400: rgb(0, 220, 103);
47 | --g500: rgb(0, 197, 96);
48 | --g500a1: rgba(0, 197, 96, 0.1);
49 | --g500a2: rgba(0, 197, 96, 0.2);
50 |
51 | --r400: rgb(248, 23, 1);
52 | --r500: rgb(221, 23, 1);
53 | --r500a1: rgba(221, 23, 1, 0.1);
54 | --r500a2: rgba(221, 23, 1, 0.2);
55 | }
56 |
--------------------------------------------------------------------------------
/webpack-custom/webpack.config.js:
--------------------------------------------------------------------------------
1 | const pluginHot = require('./plugins/pluginHot');
2 | const pluginHtml = require('./plugins/pluginHtml');
3 | const pluginClean = require('./plugins/pluginClean');
4 | const pluginDefine = require('./plugins/pluginDefine');
5 | const pluginExtract = require('./plugins/pluginExtract');
6 | const pluginAnalyzer = require('./plugins/pluginAnalyzer');
7 | const pluginSpeedMeasure = require('./plugins/pluginSpeedMeasure');
8 | const pluginCircularDependency = require('./plugins/pluginCircularDependency');
9 |
10 | const {
11 | getParamAsBoolean,
12 | getParam,
13 | isProduction,
14 | } = require('./utils/envParams');
15 |
16 | module.exports = pluginSpeedMeasure.wrap({
17 | mode: getParam('NODE_ENV'),
18 | node: require('./config/configNode'),
19 | stats: require('./config/configStats'),
20 | entry: require('./config/configEntry'),
21 | output: require('./config/configOutput'),
22 | module: require('./config/configModule'),
23 | resolve: require('./config/configResolve'),
24 | devtool: require('./config/configDevTool'),
25 | devServer: require('./config/configDevServer'),
26 | performance: require('./config/configPerformance'),
27 | optimization: require('./config/configOptimization'),
28 | plugins: [
29 | isProduction && pluginClean,
30 | pluginHtml,
31 | pluginDefine,
32 | getParamAsBoolean('HOT_RELOAD') && pluginHot,
33 | getParamAsBoolean('CSS_EXTRACT') && pluginExtract,
34 | getParamAsBoolean('BUNDLE_ANALYZER') && pluginAnalyzer,
35 | getParamAsBoolean('CIRCULAR_CHECK') && pluginCircularDependency,
36 | ].filter(Boolean),
37 | });
38 |
--------------------------------------------------------------------------------
/src/api/utils/validateResponse.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | import { validateObjects } from 'utils';
4 |
5 | export function validateResponse(route, requestParams) {
6 | return function promiseCallback(responseData) {
7 | // валидация ответов в виде массива
8 | if (_.isPlainObject(route.responseArray)) {
9 | if (!_.isArray(responseData)) {
10 | throw new Error('request: response expected to be an array');
11 | }
12 |
13 | responseData.forEach((responseItem, index) => {
14 | try {
15 | validateObjects(
16 | {
17 | validatorsObject: route.responseArray,
18 | targetObject: responseItem,
19 | },
20 | requestParams
21 | );
22 | } catch (error) {
23 | throw new Error(
24 | `request: responseItem[${index}] param ${
25 | error.message
26 | } has wrong value. Requested url: ${route.url}`
27 | );
28 | }
29 | });
30 | }
31 |
32 | // валидация ответов в виде объекта
33 | else if (_.isPlainObject(route.responseObject)) {
34 | try {
35 | validateObjects(
36 | {
37 | validatorsObject: route.responseObject,
38 | targetObject: responseData,
39 | },
40 | requestParams
41 | );
42 | } catch (error) {
43 | throw new Error(
44 | `request: response param ${
45 | error.message
46 | } has wrong value. Requested url: ${route.url}`
47 | );
48 | }
49 | }
50 |
51 | return responseData;
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/src/pages/MarketDetailed/MarketList/MarketList.scss:
--------------------------------------------------------------------------------
1 | @import "mixins.scss";
2 |
3 | .block {
4 | @include block($col_width * 2);
5 | @include table;
6 |
7 | float: left;
8 | padding: $col_spacing;
9 |
10 | .row {
11 | user-select: none;
12 |
13 | &:hover {
14 | background: $N20;
15 | }
16 |
17 | &.active {
18 | background: $N20 !important;
19 | cursor: default;
20 | font-weight: bold;
21 | }
22 |
23 | .cell:first-child {
24 | text-transform: uppercase;
25 | }
26 | }
27 |
28 | .themeBlock {
29 | float: right;
30 |
31 | .themeToggler {
32 | @include inline-top;
33 |
34 | width: 16px;
35 | height: 16px;
36 | border: 1px solid #000;
37 | cursor: pointer;
38 | margin-right: 10px;
39 | margin-top: 2px;
40 | transition: border-color $trans;
41 |
42 | &.light {
43 | background: #fff;
44 | }
45 |
46 | &.dark {
47 | background: #000;
48 | margin-right: 20px;
49 | }
50 |
51 | &:hover,
52 | &.active {
53 | border-color: $B500;
54 | }
55 | }
56 |
57 | .lnToggler {
58 | @include inline-top;
59 |
60 | width: 32px;
61 | height: 16px;
62 | cursor: pointer;
63 | margin-right: 10px;
64 | margin-top: 2px;
65 | opacity: 0.5;
66 | transition: opacity $trans;
67 | border: 1px solid #000;
68 | background-size: 100% 100%;
69 |
70 | &.ru {
71 | background-image: url("assets/russia-flag-icon-32.png");
72 | }
73 |
74 | &.en {
75 | background-image: url("assets/united-kingdom-flag-icon-32.png");
76 | margin-right: 0;
77 | }
78 |
79 | &:hover,
80 | &.active {
81 | opacity: 1;
82 | }
83 | }
84 | }
85 | }
86 |
87 | .alignRight {
88 | text-align: right;
89 | }
90 |
--------------------------------------------------------------------------------
/dist/runtime.d370529eaf8353423ae4.js:
--------------------------------------------------------------------------------
1 | !function(e){function webpackJsonpCallback(r){for(var n,u,o=r[0],c=r[1],p=r[2],i=0,l=[];i
{
17 | messageWithValues = formattedMessage.replace(`{${paramName}}`, value);
18 | });
19 |
20 | return messageWithValues;
21 | }
22 |
23 | function replacePlurals(values, formattedMessage) {
24 | if (!_.isPlainObject(values)) {
25 | return formattedMessage;
26 | }
27 |
28 | let messageWithPlurals = formattedMessage;
29 |
30 | Object.entries(values).forEach(([paramName, value]) => {
31 | const pluralPattern = new RegExp(`{${paramName}:\\s([^}]*)}`);
32 | const pluralMatch = formattedMessage.match(pluralPattern);
33 |
34 | if (pluralMatch && pluralMatch[1]) {
35 | messageWithPlurals = formattedMessage.replace(
36 | pluralPattern,
37 | declOfNum(value, pluralMatch[1].split(','))
38 | );
39 | }
40 | });
41 |
42 | return messageWithPlurals;
43 | }
44 |
45 | export function useLocalization(filename, messages) {
46 | const {
47 | i18n: { i18n, currentLanguage },
48 | } = useStore();
49 |
50 | return function getLn(text, values) {
51 | const key = _.findKey(messages, message => message === text);
52 | const localizedText = _.get(i18n, [filename, key]);
53 |
54 | if (!localizedText && showNoTextMessage) {
55 | console.error(
56 | `useLocalization: no localization for lang '${currentLanguage}' in ${filename} ${key}`
57 | );
58 | }
59 |
60 | let formattedMessage = localizedText || text;
61 | formattedMessage = replaceDynamicParams(values, formattedMessage);
62 | formattedMessage = replacePlurals(values, formattedMessage);
63 |
64 | return formattedMessage;
65 | };
66 | }
67 |
--------------------------------------------------------------------------------
/src/pages/MarketDetailed/MarketList/PairsList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import cn from 'classnames';
3 |
4 | import { useStore } from 'hooks';
5 | import { detectNilEquality, formatPercentage, precise, observer } from 'utils';
6 | import { LinkConnected } from 'components/Link';
7 |
8 | import styles from './MarketList.scss';
9 | import { routes } from 'routes';
10 |
11 | function PairsList() {
12 | const {
13 | marketsList: { list },
14 | currentTP,
15 | } = useStore();
16 | const numericCellClassName = cn(styles.cell, styles.alignRight);
17 |
18 | return (
19 |
20 | {list.map((TPInfo, index) => {
21 | const {
22 | currency,
23 | tradedCurrency,
24 | lastPrice,
25 | change24hPercentage,
26 | } = TPInfo;
27 | const highlightedCellClassName = detectNilEquality({
28 | num: change24hPercentage,
29 | onMore: styles.up,
30 | onLess: styles.down,
31 | });
32 |
33 | const isActive =
34 | currency === currentTP.currency &&
35 | tradedCurrency === currentTP.tradedCurrency;
36 |
37 | return (
38 |
47 |
48 | {currency} / {tradedCurrency}
49 |
50 |
51 | {precise(lastPrice, tradedCurrency)}
52 |
53 |
54 | {formatPercentage(change24hPercentage)}
55 |
56 |
57 | );
58 | })}
59 |
35 |
36 |
{getLn(messages.orderBook)}
37 |
38 |
39 |
40 | {getLn(messages.price)} ({tradedCurrency})
41 |
42 |
43 | {getLn(messages.amount)} ({currency})
44 |
45 |
46 | {getLn(messages.total)} ({tradedCurrency})
47 |
48 |
49 |
57 |
58 | {precise(lastPrice, tradedCurrency)}
59 |
60 |
67 |
68 |
69 |
{usdValue}
32 | ),
33 | },
34 | {
35 | label: getLn(messages.change24h),
36 | data: precise(change24h, tradedCurrency),
37 | classname: detectNilEquality({
38 | num: change24hPercentage,
39 | onMore: styles.up,
40 | onLess: styles.down,
41 | }),
42 | appendElement: (
43 |
44 | {formatPercentage(change24hPercentage)}
45 |
46 | ),
47 | },
48 | {
49 | label: getLn(messages.high24h),
50 | data: precise(high24h, tradedCurrency),
51 | },
52 | {
53 | label: getLn(messages.low24h),
54 | data: precise(low24h, tradedCurrency),
55 | },
56 | ];
57 |
58 | return (
59 |
60 |
61 |
{name}
62 |
63 | {columnsArray.map(({ label, data, classname, appendElement }, i) => (
64 |
65 |
{label}
66 |
67 | {data}
68 | {appendElement}
69 |
70 |
71 | ))}
72 |
73 |
74 |
75 |