diff --git a/services/app/apps/codebattle/.eslintrc.yml b/services/app/apps/codebattle/.eslintrc.yml
index 8b30adc47..e682d1d09 100644
--- a/services/app/apps/codebattle/.eslintrc.yml
+++ b/services/app/apps/codebattle/.eslintrc.yml
@@ -6,6 +6,7 @@ plugins:
   - jsx-a11y
   - jest
   - react-hooks
+  - sort-destructure-keys
 env:
   node: true
   browser: true
@@ -15,6 +16,7 @@ parser: "@babel/eslint-parser"
 extends:
   - "airbnb"
   - "plugin:jest/recommended"
+  - "plugin:prettier/recommended"
 
 rules:
   no-console: 0
@@ -43,13 +45,30 @@ rules:
         group: internal
     pathGroupsExcludedImportTypes:
       - internal
+  import/extensions:
+    - error
+    - js: never
+      jsx: never
   no-param-reassign: 0
   arrow-parens:
     - 2
-    - "as-needed"
+    - "always"
   react/jsx-props-no-spreading: 0
   react/static-property-placement: 0
   react/state-in-constructor: 0
+  react/function-component-definition: "off"
+  react/jsx-sort-props:
+    - 1
+    - callbacksLast: true
+      shorthandFirst: true
+      shorthandLast: false
+      ignoreCase: false
+      noSortAlphabetically: false
+      reservedFirst: true
+  react/no-unstable-nested-components:
+    - warn
+    - allowAsProps: true
+  class-methods-use-this: "off"
   jest/no-disabled-tests: "warn"
   jest/no-focused-tests: "error"
   jest/no-identical-title: "error"
@@ -60,3 +79,6 @@ rules:
   template-curly-spacing: "off"
   indent: "off"
   max-len: ["error", 140, 2]
+  sort-destructure-keys/sort-destructure-keys:
+    - 1
+    - caseSensitive: false
diff --git a/services/app/apps/codebattle/.prettierrc.json b/services/app/apps/codebattle/.prettierrc.json
new file mode 100644
index 000000000..768f983d7
--- /dev/null
+++ b/services/app/apps/codebattle/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}
diff --git a/services/app/apps/codebattle/assets/js/__mocks__/react-select.jsx b/services/app/apps/codebattle/assets/js/__mocks__/react-select.jsx
index 906f67f6c..b50939797 100644
--- a/services/app/apps/codebattle/assets/js/__mocks__/react-select.jsx
+++ b/services/app/apps/codebattle/assets/js/__mocks__/react-select.jsx
@@ -1,32 +1,26 @@
 import React, { useState } from 'react';
 
-const Select = ({ options, onChange, filterOption }) => {
+function Select({ filterOption, onChange, options }) {
   const [selectInput, setSelectInput] = useState('task');
 
   return (
     <div>
       {options
-        .filter(option => (
-          filterOption({ value: { name: option.value.name } }, selectInput)
-        ))
-        .map(option => (
+        .filter((option) => filterOption({ value: { name: option.value.name } }, selectInput))
+        .map((option) => (
           <button
+            key={option.value.name}
             type="button"
             onClick={() => onChange({ value: option.value })}
-            key={option.value.name}
           >
             {option.value.name}
           </button>
-      ))}
-      <button
-        type="button"
-        onClick={() => setSelectInput('nAme')}
-        key="filterOption"
-      >
+        ))}
+      <button key="filterOption" type="button" onClick={() => setSelectInput('nAme')}>
         filter tasks by name
       </button>
     </div>
   );
-};
+}
 
 export default Select;
diff --git a/services/app/apps/codebattle/assets/js/__mocks__/react-select/async.jsx b/services/app/apps/codebattle/assets/js/__mocks__/react-select/async.jsx
index 1b22dd3a2..905ea69b6 100644
--- a/services/app/apps/codebattle/assets/js/__mocks__/react-select/async.jsx
+++ b/services/app/apps/codebattle/assets/js/__mocks__/react-select/async.jsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 
-const AsyncSelect = ({ loadOptions, onChange }) => {
+function AsyncSelect({ loadOptions, onChange }) {
   const [entities, setEntities] = useState([]);
 
   useEffect(() => {
-    const callback = options => {
-      setEntities(options.map(option => option.value));
+    const callback = (options) => {
+      setEntities(options.map((option) => option.value));
     };
 
     loadOptions('test', callback);
@@ -14,17 +14,13 @@ const AsyncSelect = ({ loadOptions, onChange }) => {
 
   return (
     <div>
-      {entities.map(entity => (
-        <button
-          type="button"
-          onClick={() => onChange({ value: entity })}
-          key={entity.name}
-        >
+      {entities.map((entity) => (
+        <button key={entity.name} type="button" onClick={() => onChange({ value: entity })}>
           {entity.name}
         </button>
       ))}
     </div>
   );
-};
+}
 
 export default AsyncSelect;
diff --git a/services/app/apps/codebattle/assets/js/__tests__/ContributorsList.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/ContributorsList.test.jsx
index 2fbc2bfa6..ea76646e8 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/ContributorsList.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/ContributorsList.test.jsx
@@ -9,16 +9,20 @@ import { Provider } from 'react-redux';
 import ContributorsList from '../widgets/pages/game/ContributorsList';
 import reducers from '../widgets/slices';
 
-jest.mock('gon', () => {
-  const gonParams = { local: 'en' };
-  return { getAsset: type => gonParams[type] };
-}, { virtual: true });
+jest.mock(
+  'gon',
+  () => {
+    const gonParams = { local: 'en' };
+    return { getAsset: (type) => gonParams[type] };
+  },
+  { virtual: true },
+);
 
 jest.mock('axios');
 const users = [];
 axios.get.mockResolvedValue({ data: users });
 
-test('test rendering ContributorsList', async () => {
+test('rendering of ContributorsList', async () => {
   const reducer = combineReducers(reducers);
 
   const preloadedState = {
@@ -28,6 +32,10 @@ test('test rendering ContributorsList', async () => {
     reducer,
     preloadedState,
   });
-  const { findByText } = render(<Provider store={store}><ContributorsList /></Provider>);
-    expect(await findByText(/This users have contributed to this task:/)).toBeInTheDocument();
+  const { findByText } = render(
+    <Provider store={store}>
+      <ContributorsList />
+    </Provider>,
+  );
+  expect(await findByText(/This users have contributed to this task:/)).toBeInTheDocument();
 });
diff --git a/services/app/apps/codebattle/assets/js/__tests__/LobbyWidget.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/LobbyWidget.test.jsx
index c138cb447..eb0a91090 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/LobbyWidget.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/LobbyWidget.test.jsx
@@ -22,7 +22,8 @@ Object.defineProperty(window, 'scrollTo', {
 
 jest.mock(
   '../widgets/components/UserInfo',
-  () => function UserInfo() {
+  () =>
+    function UserInfo() {
       return (
         <div>
           <ul className="list-inline">
@@ -44,11 +45,9 @@ jest.mock(
     },
 );
 
-jest.mock(
-  '../widgets/utils/useStayScrolled',
-  () => () => ({ stayScrolled: jest.fn() }),
-  { virtual: true },
-);
+jest.mock('../widgets/utils/useStayScrolled', () => () => ({ stayScrolled: jest.fn() }), {
+  virtual: true,
+});
 
 jest.mock(
   'gon',
@@ -58,7 +57,7 @@ jest.mock(
       current_user: { id: 1, sound_settings: {} },
       task_tags: ['math', 'string', 'asd', 'rest'],
     };
-    return { getAsset: type => gonParams[type] };
+    return { getAsset: (type) => gonParams[type] };
   },
   { virtual: true },
 );
@@ -66,28 +65,31 @@ jest.mock(
 jest.mock('axios');
 
 const {
-  elementaryTasksFromBackend,
+  allGames,
   easyTasksFromBackend,
-  tasksMatchingRestTags,
-  tasksUnsuitableForRestTags,
-  tasksMatchingMathTag,
-  tasksUnsuitableForMathTag,
-  tasksMatchingMathAndStringTags,
-  tasksUnsuitableForMathAndStringTags,
-  tasksFilteredByName,
-  tasksEliminatedByName,
-  tasksFilteredByNameAndTag,
-  tasksEliminatedByNameAndTag,
+  elementaryTasksFromBackend,
+  gameRepeatedOnPages,
   gamesPage1,
-  pageInfo1,
   gamesPage2,
+  pageInfo1,
   pageInfo2,
-  gameRepeatedOnPages,
+  tasksEliminatedByName,
+  tasksEliminatedByNameAndTag,
+  tasksFilteredByName,
+  tasksFilteredByNameAndTag,
+  tasksMatchingMathAndStringTags,
+  tasksMatchingMathTag,
+  tasksMatchingRestTags,
+  tasksUnsuitableForMathAndStringTags,
+  tasksUnsuitableForMathTag,
+  tasksUnsuitableForRestTags,
   uniqueGamesOnPage2,
-  allGames,
 } = getTestData('testData.json');
 
-const users = [{ name: 'user1', id: -4 }, { name: 'user2', id: -2 }];
+const users = [
+  { name: 'user1', id: -4 },
+  { name: 'user2', id: -2 },
+];
 
 axios.get.mockResolvedValue({
   data: {
@@ -107,65 +109,53 @@ jest.mock('react-select/async');
   Button "filter tasks by name" simulates a user to type 'name' into the Select
 */
 
-jest.mock(
-  '../widgets/middlewares/Lobby',
-  () => {
-    const originalModule = jest.requireActual('../widgets/middlewares/Lobby');
+jest.mock('../widgets/middlewares/Lobby', () => {
+  const originalModule = jest.requireActual('../widgets/middlewares/Lobby');
 
-    return {
-      __esModule: true,
-      ...originalModule,
-      createGame: jest.fn(),
-    };
-  },
-);
+  return {
+    __esModule: true,
+    ...originalModule,
+    createGame: jest.fn(),
+  };
+});
 
-jest.mock(
-  '../widgets/middlewares/Invite',
-  () => {
-    const originalModule = jest.requireActual('../widgets/middlewares/Invite');
+jest.mock('../widgets/middlewares/Invite', () => {
+  const originalModule = jest.requireActual('../widgets/middlewares/Invite');
 
-    return {
-      __esModule: true,
-      ...originalModule,
-      createInvite: jest.fn(() => ({ type: '', payload: {} })),
-    };
-  },
-);
+  return {
+    __esModule: true,
+    ...originalModule,
+    createInvite: jest.fn(() => ({ type: '', payload: {} })),
+  };
+});
 
-jest.mock(
-  'phoenix',
-  () => {
-    const originalModule = jest.requireActual('phoenix');
-
-    return {
-      __esModule: true,
-      ...originalModule,
-      Socket: jest.fn().mockImplementation(() => ({
-        channel: jest.fn(() => {
-          const channel = {
-            join: jest.fn(() => channel),
-            receive: jest.fn(),
-            on: jest.fn(),
-            off: jest.fn(),
-            push: jest.fn(),
-            onError: jest.fn(),
-          };
-
-          return channel;
-        }),
-        connect: jest.fn(() => {}),
-      })),
-    };
-  },
-);
+jest.mock('phoenix', () => {
+  const originalModule = jest.requireActual('phoenix');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    Socket: jest.fn().mockImplementation(() => ({
+      channel: jest.fn(() => {
+        const channel = {
+          join: jest.fn(() => channel),
+          receive: jest.fn(),
+          on: jest.fn(),
+          off: jest.fn(),
+          push: jest.fn(),
+          onError: jest.fn(),
+        };
+
+        return channel;
+      }),
+      connect: jest.fn(() => {}),
+    })),
+  };
+});
 
 const reducer = combineReducers(reducers);
 
-const players = [
-  { user: { id: -4, name: 'Bot_1' } },
-  { user: { id: -2, name: 'Bot_2' } },
-];
+const players = [{ user: { id: -4, name: 'Bot_1' } }, { user: { id: -2, name: 'Bot_2' } }];
 
 const preloadedState = {
   lobby: {
@@ -219,11 +209,8 @@ beforeEach(() => {
   });
 });
 
-test('test rendering GameList', async () => {
-  const {
-    getByText,
-    findAllByText,
-  } = render(
+test('rendering of GameList', async () => {
+  const { findAllByText, getByText } = render(
     <Provider store={store}>
       <LobbyWidget />
     </Provider>,
@@ -248,13 +235,7 @@ describe('test task choice', () => {
 
   test('choose a task', async () => {
     const user = userEvent.setup();
-    const {
-      getByText,
-      getByRole,
-      findByRole,
-      findAllByText,
-      getByTitle,
-    } = render(
+    const { findAllByText, findByRole, getByRole, getByText, getByTitle } = render(
       <Provider store={store}>
         <LobbyWidget />
       </Provider>,
@@ -349,12 +330,7 @@ describe('test task choice', () => {
 
   test('filter tasks by level', async () => {
     const user = userEvent.setup();
-    const {
-      findByRole,
-      getByTitle,
-      queryByRole,
-      findAllByText,
-    } = render(
+    const { findAllByText, findByRole, getByTitle, queryByRole } = render(
       <Provider store={store}>
         <LobbyWidget />
       </Provider>,
@@ -371,24 +347,23 @@ describe('test task choice', () => {
     for (let i = 0; i < elementaryTasksFromBackend.length; i += 1) {
       expect(await findByRole('button', { name: elementaryTasksFromBackend[i].name })).toBeInTheDocument(); // eslint-disable-line
     }
-    easyTasksFromBackend.forEach(task => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
+    easyTasksFromBackend.forEach((task) =>
+      expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+    );
 
     await user.click(getByTitle('easy'));
 
     for (let i = 0; i < easyTasksFromBackend.length; i += 1) {
       expect(await findByRole('button', { name: easyTasksFromBackend[i].name })).toBeInTheDocument(); // eslint-disable-line
     }
-    elementaryTasksFromBackend.forEach(task => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
+    elementaryTasksFromBackend.forEach((task) =>
+      expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+    );
   }, 12000);
 
   test('filter tasks by tags', async () => {
     const user = userEvent.setup();
-    const {
-      getByRole,
-      findByRole,
-      findAllByText,
-      queryByRole,
-    } = render(
+    const { findAllByText, findByRole, getByRole, queryByRole } = render(
       <Provider store={store}>
         <LobbyWidget />
       </Provider>,
@@ -410,11 +385,13 @@ describe('test task choice', () => {
       expect(stringTag).toBeDisabled();
       expect(asdTag).toBeDisabled();
 
-      tasksMatchingRestTags.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+      tasksMatchingRestTags.forEach((task) =>
+        expect(getByRole('button', { name: task.name })).toBeInTheDocument(),
+      );
 
-      tasksUnsuitableForRestTags.forEach(task => (
-        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
-      ));
+      tasksUnsuitableForRestTags.forEach((task) =>
+        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+      );
     });
 
     await user.click(restTag);
@@ -424,7 +401,9 @@ describe('test task choice', () => {
       expect(stringTag).toBeEnabled();
       expect(asdTag).toBeEnabled();
 
-      elementaryTasksFromBackend.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+      elementaryTasksFromBackend.forEach((task) =>
+        expect(getByRole('button', { name: task.name })).toBeInTheDocument(),
+      );
     });
 
     await user.click(mathTag);
@@ -433,10 +412,12 @@ describe('test task choice', () => {
       expect(stringTag).toBeEnabled();
       expect(asdTag).toBeDisabled();
       expect(restTag).toBeEnabled();
-      tasksMatchingMathTag.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
-      tasksUnsuitableForMathTag.forEach(task => (
-        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
-      ));
+      tasksMatchingMathTag.forEach((task) =>
+        expect(getByRole('button', { name: task.name })).toBeInTheDocument(),
+      );
+      tasksUnsuitableForMathTag.forEach((task) =>
+        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+      );
     });
 
     await user.click(stringTag);
@@ -444,10 +425,12 @@ describe('test task choice', () => {
     await waitFor(() => {
       expect(restTag).toBeDisabled();
       expect(asdTag).toBeDisabled();
-      tasksMatchingMathAndStringTags.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
-      tasksUnsuitableForMathAndStringTags.forEach(task => (
-        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
-      ));
+      tasksMatchingMathAndStringTags.forEach((task) =>
+        expect(getByRole('button', { name: task.name })).toBeInTheDocument(),
+      );
+      tasksUnsuitableForMathAndStringTags.forEach((task) =>
+        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+      );
     });
 
     await user.click(mathTag);
@@ -456,18 +439,15 @@ describe('test task choice', () => {
     await waitFor(() => {
       expect(asdTag).toBeEnabled();
       expect(restTag).toBeEnabled();
-      elementaryTasksFromBackend.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
+      elementaryTasksFromBackend.forEach((task) =>
+        expect(getByRole('button', { name: task.name })).toBeInTheDocument(),
+      );
     });
   }, 12000);
 
   test('filter tasks by name', async () => {
     const user = userEvent.setup();
-    const {
-      getByRole,
-      findByRole,
-      findAllByText,
-      queryByRole,
-    } = render(
+    const { findAllByText, findByRole, getByRole, queryByRole } = render(
       <Provider store={store}>
         <LobbyWidget />
       </Provider>,
@@ -480,19 +460,18 @@ describe('test task choice', () => {
     await user.click(await findByRole('button', { name: 'filter tasks by name' }));
 
     await waitFor(() => {
-      tasksFilteredByName.forEach(task => expect(getByRole('button', { name: task.name })).toBeInTheDocument());
-      tasksEliminatedByName.forEach(task => expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument());
+      tasksFilteredByName.forEach((task) =>
+        expect(getByRole('button', { name: task.name })).toBeInTheDocument(),
+      );
+      tasksEliminatedByName.forEach((task) =>
+        expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+      );
     });
   });
 
   test('filter tasks by name and tags', async () => {
     const user = userEvent.setup();
-    const {
-      getByRole,
-      findByRole,
-      findAllByText,
-      queryByRole,
-    } = render(
+    const { findAllByText, findByRole, getByRole, queryByRole } = render(
       <Provider store={store}>
         <LobbyWidget />
       </Provider>,
@@ -504,23 +483,18 @@ describe('test task choice', () => {
     await user.click(await findByRole('button', { name: 'filter tasks by name' }));
     await user.click(getByRole('button', { name: 'math' }));
 
-    tasksFilteredByNameAndTag.forEach(task => expect(queryByRole('button', { name: task.name })).toBeInTheDocument());
-    tasksEliminatedByNameAndTag.forEach(task => (
-      expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument()
-    ));
+    tasksFilteredByNameAndTag.forEach((task) =>
+      expect(queryByRole('button', { name: task.name })).toBeInTheDocument(),
+    );
+    tasksEliminatedByNameAndTag.forEach((task) =>
+      expect(queryByRole('button', { name: task.name })).not.toBeInTheDocument(),
+    );
   });
 });
 
-test('test lobby completed games infinite scroll', async () => {
+test('lobby completed games infinite scroll', async () => {
   const user = userEvent.setup();
-  const {
-    findByText,
-    findByRole,
-    queryByText,
-    findByTestId,
-    findAllByText,
-    getByText,
-  } = render(
+  const { findAllByText, findByRole, findByTestId, findByText, getByText, queryByText } = render(
     <Provider store={store}>
       <LobbyWidget />
     </Provider>,
@@ -532,10 +506,10 @@ test('test lobby completed games infinite scroll', async () => {
 
   expect(await findByText(`Total games: ${pageInfo1.totalEntries}`)).toBeInTheDocument();
   expect(axiosSpy).toHaveBeenCalledWith('/api/v1/games/completed?page_size=20');
-  gamesPage1.forEach(game => expect(getByText(toLocalTime(game.finishesAt))).toBeInTheDocument());
-  uniqueGamesOnPage2.forEach(game => (
-    expect(queryByText(toLocalTime(game.finishesAt))).not.toBeInTheDocument()
-  ));
+  gamesPage1.forEach((game) => expect(getByText(toLocalTime(game.finishesAt))).toBeInTheDocument());
+  uniqueGamesOnPage2.forEach((game) =>
+    expect(queryByText(toLocalTime(game.finishesAt))).not.toBeInTheDocument(),
+  );
 
   axiosSpy.mockResolvedValueOnce({
     data: {
diff --git a/services/app/apps/codebattle/assets/js/__tests__/RatingList.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/RatingList.test.jsx
index 1cdfad3af..fe975f4f0 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/RatingList.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/RatingList.test.jsx
@@ -13,10 +13,14 @@ jest.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: 'img',
 }));
 
-jest.mock('gon', () => {
-  const gonParams = { local: 'en', current_user: { sound_settings: {} } };
-  return { getAsset: type => gonParams[type] };
-}, { virtual: true });
+jest.mock(
+  'gon',
+  () => {
+    const gonParams = { local: 'en', current_user: { sound_settings: {} } };
+    return { getAsset: (type) => gonParams[type] };
+  },
+  { virtual: true },
+);
 
 jest.mock('axios');
 axios.get.mockResolvedValue({
@@ -28,14 +32,18 @@ axios.get.mockResolvedValue({
   },
 });
 
-test('test rendering RatingList', async () => {
+test('rendering RatingList', async () => {
   const reducer = combineReducers(reducers);
   const store = configureStore({
     reducer,
     preloadedState: {},
   });
 
-  const { getByText } = render(<Provider store={store}><RatingList /></Provider>);
+  const { getByText } = render(
+    <Provider store={store}>
+      <RatingList />
+    </Provider>,
+  );
 
   expect(getByText(/Users rating/)).toBeInTheDocument();
   expect(getByText(/Total entries: 0/)).toBeInTheDocument();
diff --git a/services/app/apps/codebattle/assets/js/__tests__/Registration.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/Registration.test.jsx
index 125b63a2c..bd9da0e99 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/Registration.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/Registration.test.jsx
@@ -12,7 +12,7 @@ import { getTestData } from './helpers';
 jest.mock('axios');
 
 const { invalidData, validData } = getTestData('signUpData.json');
-const { data, route, headers } = validData;
+const { data, headers, route } = validData;
 
 describe('sign up', () => {
   function setup(jsx) {
@@ -39,7 +39,7 @@ describe('sign up', () => {
   });
 
   test.each(invalidData)('%s', async (testName, value, validationMessage, inputName) => {
-    const { getByLabelText, findByText, user } = setup(<Registration />);
+    const { findByText, getByLabelText, user } = setup(<Registration />);
 
     const nameInput = getByLabelText(inputName);
     if (value) {
diff --git a/services/app/apps/codebattle/assets/js/__tests__/RootContainer.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/RootContainer.test.jsx
index 6aa818d52..09f180f20 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/RootContainer.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/RootContainer.test.jsx
@@ -17,7 +17,7 @@ import task from '../widgets/machines/task';
 import RootContainer from '../widgets/pages/GameRoomWidget';
 import reducers from '../widgets/slices';
 
-const createPlayer = params => ({
+const createPlayer = (params) => ({
   is_admin: false,
   id: 0,
   name: '',
@@ -35,13 +35,10 @@ jest.mock(
       local: 'en',
       current_user: { id: 1, sound_settings: {} },
       game_id: 10,
-      players: [
-        createPlayer({ name: 'Tim Urban' }),
-        createPlayer({ name: 'John Kramer' }),
-      ],
+      players: [createPlayer({ name: 'Tim Urban' }), createPlayer({ name: 'John Kramer' })],
     };
 
-    return { getAsset: type => gonParams[type] };
+    return { getAsset: (type) => gonParams[type] };
   },
   { virtual: true },
 );
@@ -49,24 +46,21 @@ jest.mock(
 jest.mock('axios');
 jest.mock(
   '../widgets/pages/game/EditorContainer',
-  () => function EditorContainer() {
-    return <></>;
-  },
+  () =>
+    function EditorContainer() {
+      return null;
+    },
 );
 
-jest.mock(
-  '../widgets/utils/useStayScrolled',
-  () => () => ({ stayScrolled: () => {} }),
-  { virtual: true },
-);
+jest.mock('../widgets/utils/useStayScrolled', () => () => ({ stayScrolled: () => {} }), {
+  virtual: true,
+});
 
 axios.get.mockResolvedValue({ data: {} });
 
-jest.mock('react-select', () => ({ options, value, onChange }) => {
+jest.mock('react-select', () => ({ onChange, options, value }) => {
   function handleChange(event) {
-    const option = options.find(
-      opt => opt.value === event.currentTarget.value,
-    );
+    const option = options.find((opt) => opt.value === event.currentTarget.value);
     onChange(option);
   }
   return (
@@ -80,32 +74,29 @@ jest.mock('react-select', () => ({ options, value, onChange }) => {
   );
 });
 
-jest.mock(
-  'phoenix',
-  () => {
-    const originalModule = jest.requireActual('phoenix');
-
-    return {
-      __esModule: true,
-      ...originalModule,
-      Socket: jest.fn().mockImplementation(() => ({
-        channel: jest.fn(() => {
-          const channel = {
-            join: jest.fn(() => channel),
-            receive: jest.fn(() => channel),
-            on: jest.fn(),
-            off: jest.fn(),
-            push: jest.fn(),
-            onError: jest.fn(),
-          };
-
-          return channel;
-        }),
-        connect: jest.fn(() => {}),
-      })),
-    };
-  },
-);
+jest.mock('phoenix', () => {
+  const originalModule = jest.requireActual('phoenix');
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    Socket: jest.fn().mockImplementation(() => ({
+      channel: jest.fn(() => {
+        const channel = {
+          join: jest.fn(() => channel),
+          receive: jest.fn(() => channel),
+          on: jest.fn(),
+          off: jest.fn(),
+          push: jest.fn(),
+          onError: jest.fn(),
+        };
+
+        return channel;
+      }),
+      connect: jest.fn(() => {}),
+    })),
+  };
+});
 
 const reducer = combineReducers(reducers);
 
@@ -152,8 +143,8 @@ const preloadedState = {
     },
   },
   usersInfo: {
-    1: { },
-    2: { },
+    1: {},
+    2: {},
   },
   chat: {
     users: Object.values(players),
@@ -179,7 +170,7 @@ const preloadedState = {
 game.states.room.initial = 'active';
 editor.initial = 'idle';
 
-test('test rendering preview game component', () => {
+test('rendering preview game component', () => {
   const store = configureStore({
     reducer,
     preloadedState,
@@ -188,10 +179,10 @@ test('test rendering preview game component', () => {
   render(
     <Provider store={store}>
       <RootContainer
-        pageName="game"
+        editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
         mainMachine={createMachine({ predictableActionArguments: true, ...game })}
+        pageName="game"
         taskMachine={createMachine({ predictableActionArguments: true, ...task })}
-        editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
       />
     </Provider>,
   );
@@ -199,7 +190,7 @@ test('test rendering preview game component', () => {
   expect(screen.getByText(/Examples:/)).toBeInTheDocument();
 });
 
-test('test game guide', async () => {
+test('game guide', async () => {
   const user = userEvent.setup();
   const store = configureStore({
     reducer,
@@ -209,10 +200,10 @@ test('test game guide', async () => {
   const { getByRole } = render(
     <Provider store={store}>
       <RootContainer
-        pageName="game"
+        editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
         mainMachine={createMachine({ predictableActionArguments: true, ...game })}
+        pageName="game"
         taskMachine={createMachine({ predictableActionArguments: true, ...task })}
-        editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
       />
     </Provider>,
   );
@@ -229,7 +220,7 @@ test('test game guide', async () => {
   expect(closeGuideButton).not.toBeInTheDocument();
 });
 
-test('test a bot invite button', async () => {
+test('a bot invite button', async () => {
   const user = userEvent.setup();
   const store = configureStore({
     reducer,
@@ -239,10 +230,10 @@ test('test a bot invite button', async () => {
   const { getByLabelText, getByTitle } = render(
     <Provider store={store}>
       <RootContainer
-        pageName="game"
+        editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
         mainMachine={createMachine({ predictableActionArguments: true, ...game })}
+        pageName="game"
         taskMachine={createMachine({ predictableActionArguments: true, ...task })}
-        editorMachine={createMachine({ predictableActionArguments: true, ...editor })}
       />
     </Provider>,
   );
diff --git a/services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx
index 12aadb2dd..8bfa51313 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/UserSettings.test.jsx
@@ -49,7 +49,7 @@ jest.mock(
       current_user: { sound_settings: {} },
       game_id: 10,
     };
-    return { getAsset: type => gonParams[type] };
+    return { getAsset: (type) => gonParams[type] };
   },
   { virtual: true },
 );
@@ -76,12 +76,7 @@ describe('UserSettings test cases', () => {
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('show success notification', async () => {
     const settingUpdaterSpy = jest.spyOn(axios, 'patch').mockResolvedValueOnce({ data: {} });
-    const {
-      getByRole,
-      getByLabelText,
-      getByTestId,
-      user,
-    } = setup(
+    const { getByLabelText, getByRole, getByTestId, user } = setup(
       <Provider store={store}>
         <UserSettings />
       </Provider>,
@@ -98,17 +93,11 @@ describe('UserSettings test cases', () => {
     });
   });
 
-  test.skip.each(settings)('editing profile test with lang %s', async lang => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip.each(settings)('editing profile test with lang %s', async (lang) => {
     const handleSubmit = jest.fn();
-    const {
-      user,
-      getByTestId,
-      getByLabelText,
-    } = setup(
-      <UserSettingsForm
-        onSubmit={handleSubmit}
-        settings={preloadedState.userSettings}
-      />,
+    const { getByLabelText, getByTestId, user } = setup(
+      <UserSettingsForm settings={preloadedState.userSettings} onSubmit={handleSubmit} />,
     );
 
     await userEvent.type(getByTestId('nameInput'), 'Dmitry');
@@ -119,21 +108,22 @@ describe('UserSettings test cases', () => {
 
     await waitFor(() => {
       expect(handleSubmit).toHaveBeenCalled();
-      expect(handleSubmit).toHaveBeenCalledWith({
-        name: 'Dmitry',
-        lang,
-        sound_settings: {
-          level: 6,
-          type: 'standart',
+      expect(handleSubmit).toHaveBeenCalledWith(
+        {
+          name: 'Dmitry',
+          lang,
+          sound_settings: {
+            level: 6,
+            type: 'standart',
+          },
         },
-      }, expect.anything());
+        expect.anything(),
+      );
     });
   });
 
   test('show error when username is not trimmed string or it is empty', async () => {
-    const {
-      getByText, getByTestId, getByLabelText,
-    } = setup(
+    const { getByLabelText, getByTestId, getByText } = setup(
       <Provider store={store}>
         <UserSettings />
       </Provider>,
diff --git a/services/app/apps/codebattle/assets/js/__tests__/WaitingOpponentInfo.test.jsx b/services/app/apps/codebattle/assets/js/__tests__/WaitingOpponentInfo.test.jsx
index 726051497..3eb96af0b 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/WaitingOpponentInfo.test.jsx
+++ b/services/app/apps/codebattle/assets/js/__tests__/WaitingOpponentInfo.test.jsx
@@ -9,14 +9,14 @@ import WaitingOpponentInfo from '../widgets/pages/game/WaitingOpponentInfo';
 
 jest.mock('copy-to-clipboard', () => jest.fn());
 
-test('test WaitingOpponentInfo url', async () => {
+test('WaitingOpponentInfo url', async () => {
   const url = 'some-url-for.test';
   render(<WaitingOpponentInfo gameUrl={url} />);
 
   expect(screen.getByText(url)).toBeInTheDocument();
 });
 
-test('test WaitingOpponentInfo copy button', async () => {
+test('WaitingOpponentInfo copy button', async () => {
   const url = 'some-url-for.test';
   const user = userEvent.setup();
   render(<WaitingOpponentInfo gameUrl={url} />);
@@ -27,5 +27,5 @@ test('test WaitingOpponentInfo copy button', async () => {
 
   await user.click(copyButton);
 
-  expect(copy).toBeCalledWith(url);
+  expect(copy).toHaveBeenCalledWith(url);
 });
diff --git a/services/app/apps/codebattle/assets/js/__tests__/helpers/index.js b/services/app/apps/codebattle/assets/js/__tests__/helpers/index.js
index ad664503b..d3a660cbe 100644
--- a/services/app/apps/codebattle/assets/js/__tests__/helpers/index.js
+++ b/services/app/apps/codebattle/assets/js/__tests__/helpers/index.js
@@ -4,10 +4,11 @@ import { URL } from 'url';
 
 import moment from 'moment';
 
-const getFixturePath = filename => path.join('..', '..', '__fixtures__', filename);
-const readFixture = filename => fs.readFileSync(new URL(getFixturePath(filename), import.meta.url), 'utf-8').trim();
-const getFixtureData = filename => JSON.parse(readFixture(filename));
+const getFixturePath = (filename) => path.join('..', '..', '__fixtures__', filename);
+const readFixture = (filename) =>
+  fs.readFileSync(new URL(getFixturePath(filename), import.meta.url), 'utf-8').trim();
+const getFixtureData = (filename) => JSON.parse(readFixture(filename));
 
 export const getTestData = filename => getFixtureData(filename); // eslint-disable-line
 
-export const toLocalTime = time => moment.utc(time).local().format('MM.DD HH:mm');
+export const toLocalTime = (time) => moment.utc(time).local().format('MM.DD HH:mm');
diff --git a/services/app/apps/codebattle/assets/js/app.js b/services/app/apps/codebattle/assets/js/app.js
index 8ade88366..706ca8d28 100644
--- a/services/app/apps/codebattle/assets/js/app.js
+++ b/services/app/apps/codebattle/assets/js/app.js
@@ -68,9 +68,7 @@ const Hooks = {
     },
   },
 };
-const csrfToken = document
-  .querySelector("meta[name='csrf-token']")
-  .getAttribute('content');
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content');
 const liveSocket = new LiveSocket('/live', Socket, {
   hooks: Hooks,
   params: {
@@ -80,8 +78,8 @@ const liveSocket = new LiveSocket('/live', Socket, {
   },
 });
 
-window.addEventListener('phx:page-loading-start', _info => NProgress.start());
-window.addEventListener('phx:page-loading-stop', _info => NProgress.done());
+window.addEventListener('phx:page-loading-start', (_info) => NProgress.start());
+window.addEventListener('phx:page-loading-stop', (_info) => NProgress.done());
 
 liveSocket.connect();
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/App.jsx b/services/app/apps/codebattle/assets/js/widgets/App.jsx
index d02826d40..5f53ebb44 100755
--- a/services/app/apps/codebattle/assets/js/widgets/App.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/App.jsx
@@ -1,9 +1,6 @@
 import React, { Suspense } from 'react';
 
-import {
-  configureStore,
-  combineReducers,
-} from '@reduxjs/toolkit';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import { persistStore, persistReducer, PERSIST } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -14,14 +11,10 @@ import rollbar from '@/lib/rollbar';
 import machines from '@/machines';
 import reducers from '@/slices';
 
-const { game: mainMachine, editor: editorMachine, task: taskMachine } = machines;
+const { editor: editorMachine, game: mainMachine, task: taskMachine } = machines;
 const { gameUI: gameUIReducer, ...otherReducers } = reducers;
 
-const gameUIPersistWhitelist = [
-  'editorMode',
-  'editorTheme',
-  'taskDescriptionLanguage',
-];
+const gameUIPersistWhitelist = ['editorMode', 'editorTheme', 'taskDescriptionLanguage'];
 
 const gameUIPersistConfig = {
   key: 'gameUI',
@@ -38,9 +31,10 @@ const rollbarRedux = rollbarMiddleware(rollbar);
 // TODO: put initial state from gon
 const store = configureStore({
   reducer: rootReducer,
-  middleware: getDefaultMiddleware => getDefaultMiddleware({
-    serializableCheck: { ignoredActions: ['ERROR', PERSIST] },
-  }).concat(rollbarRedux),
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: { ignoredActions: ['ERROR', PERSIST] },
+    }).concat(rollbarRedux),
 });
 
 const persistor = persistStore(store);
@@ -54,108 +48,126 @@ const UserProfile = React.lazy(() => import('./pages/profile'));
 const Registration = React.lazy(() => import('./pages/registration'));
 const Tournament = React.lazy(() => import('./pages/tournament'));
 
-export const Invites = () => (
-  <Provider store={store}>
-    <InvitesContainer />
-  </Provider>
-);
-
-export const Game = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <GameRoomWidget
-          pageName="game"
-          mainMachine={mainMachine}
-          taskMachine={taskMachine}
-          editorMachine={editorMachine}
-        />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const Builder = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <GameRoomWidget
-          pageName="builder"
-          mainMachine={mainMachine}
-          taskMachine={taskMachine}
-          editorMachine={editorMachine}
-        />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const Lobby = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <LobbyWidget />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const UsersRating = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <RatingList />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const UserPage = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <UserProfile />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const SettingsPage = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <UserSettings />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const RegistrationPage = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <Registration />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const StairwayGamePage = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        {/* <Stairway /> */}
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
-
-export const TournamentPage = () => (
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <Suspense>
-        <Tournament />
-      </Suspense>
-    </PersistGate>
-  </Provider>
-);
+export function Invites() {
+  return (
+    <Provider store={store}>
+      <InvitesContainer />
+    </Provider>
+  );
+}
+
+export function Game() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <GameRoomWidget
+            editorMachine={editorMachine}
+            mainMachine={mainMachine}
+            pageName="game"
+            taskMachine={taskMachine}
+          />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function Builder() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <GameRoomWidget
+            editorMachine={editorMachine}
+            mainMachine={mainMachine}
+            pageName="builder"
+            taskMachine={taskMachine}
+          />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function Lobby() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <LobbyWidget />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function UsersRating() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <RatingList />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function UserPage() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <UserProfile />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function SettingsPage() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <UserSettings />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function RegistrationPage() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <Registration />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function StairwayGamePage() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>{/* <Stairway /> */}</Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
+
+export function TournamentPage() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <Suspense>
+          <Tournament />
+        </Suspense>
+      </PersistGate>
+    </Provider>
+  );
+}
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/AccordeonBox.jsx b/services/app/apps/codebattle/assets/js/widgets/components/AccordeonBox.jsx
index 3b614fcee..3cb5971b9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/AccordeonBox.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/AccordeonBox.jsx
@@ -9,7 +9,7 @@ import Tooltip from 'react-bootstrap/Tooltip';
 import i18n from '../../i18n';
 import color from '../config/statusColor';
 
-const getMessage = status => {
+const getMessage = (status) => {
   switch (status) {
     case 'error':
       return i18n.t('solution cannot be executed');
@@ -22,21 +22,25 @@ const getMessage = status => {
   }
 };
 
-const AccordeonBox = ({ children }) => (
-  <div className="accordion border-top" id="accordionExample">
-    {children}
-  </div>
-);
+function AccordeonBox({ children }) {
+  return (
+    <div className="accordion border-top" id="accordionExample">
+      {children}
+    </div>
+  );
+}
 
-const renderFirstAssert = firstAssert => (
-  <AccordeonBox.SubMenu statusColor={color[firstAssert.status]} assert={firstAssert} hasOutput={firstAssert.output}>
+const renderFirstAssert = (firstAssert) => (
+  <AccordeonBox.SubMenu
+    assert={firstAssert}
+    hasOutput={firstAssert.output}
+    statusColor={color[firstAssert.status]}
+  >
     <AccordeonBox.Item output={firstAssert.output} />
   </AccordeonBox.SubMenu>
 );
 
-function Menu({
- children, firstAssert, resultData, assertsCount, successCount,
-}) {
+function Menu({ assertsCount, children, firstAssert, resultData, successCount }) {
   const [show, setShow] = useState(true);
   const isSyntaxError = resultData.status === 'error';
   const statusColor = color[resultData.status];
@@ -47,11 +51,14 @@ function Menu({
   };
   const uniqIndex = uniqueId('heading');
   const percent = (100 * successCount) / assertsCount;
-  const assertsStatusMessage = i18n.t('You passed %{successCount} from %{assertsCount} asserts. (%{percent}%)', {
-    successCount,
-    assertsCount,
-    percent,
-  });
+  const assertsStatusMessage = i18n.t(
+    'You passed %{successCount} from %{assertsCount} asserts. (%{percent}%)',
+    {
+      successCount,
+      assertsCount,
+      percent,
+    },
+  );
 
   useEffect(() => {
     setShow(isSyntaxError);
@@ -63,35 +70,41 @@ function Menu({
         <>
           <div className="card-header" id={`heading${uniqIndex} `}>
             <button
+              aria-controls={`collapse${uniqIndex}`}
+              aria-expanded="true"
               className="btn btn-sm btn-outline-secondary mr-3"
+              data-toggle="collapse"
               type="button"
               onClick={handleClick}
-              data-toggle="collapse"
-              aria-expanded="true"
-              aria-controls={`collapse${uniqIndex}`}
             >
-              {show ? <FontAwesomeIcon icon="arrow-circle-up" /> : <FontAwesomeIcon icon="arrow-circle-down" />}
+              {show ? (
+                <FontAwesomeIcon icon="arrow-circle-up" />
+              ) : (
+                <FontAwesomeIcon icon="arrow-circle-down" />
+              )}
             </button>
-            {!isSyntaxError && <span className="font-weight-bold small mr-3">{assertsStatusMessage}</span>}
+            {!isSyntaxError && (
+              <span className="font-weight-bold small mr-3">{assertsStatusMessage}</span>
+            )}
             <span className={`badge badge-${statusColor}`}>{message}</span>
           </div>
           {firstAssert && renderFirstAssert(firstAssert)}
         </>
       ) : (
-        <>
-          <span className={`badge badge-${statusColor}`}>{message}</span>
-        </>
+        <span className={`badge badge-${statusColor}`}>{message}</span>
       )}
-      <div id={`collapse${uniqIndex}`} className={classCollapse} aria-labelledby={`heading${uniqIndex}`}>
+      <div
+        aria-labelledby={`heading${uniqIndex}`}
+        className={classCollapse}
+        id={`collapse${uniqIndex}`}
+      >
         <div className="list-group list-group-flush">{children}</div>
       </div>
     </div>
   );
 }
 
-function SubMenu({
- children, statusColor, assert, hasOutput, uniqIndex, executionTime,
-}) {
+function SubMenu({ assert, children, executionTime, hasOutput, statusColor, uniqIndex }) {
   const [isShowLog, setIsShowLog] = useState(true);
   const classCollapse = cn('collapse', {
     show: isShowLog,
@@ -118,15 +131,19 @@ function SubMenu({
             </OverlayTrigger>
             {assert.output && (
               <button
+                aria-controls={`collapse${uniqIndex}`}
+                aria-expanded="true"
                 className="btn btn-sm btn-outline-info badge ml-2"
+                data-toggle="collapse"
                 type="button"
                 onClick={() => setIsShowLog(!isShowLog)}
-                data-toggle="collapse"
-                aria-expanded="true"
-                aria-controls={`collapse${uniqIndex}`}
               >
                 <span>
-                  {isShowLog ? <FontAwesomeIcon icon="arrow-circle-up" /> : <FontAwesomeIcon icon="arrow-circle-down" />}
+                  {isShowLog ? (
+                    <FontAwesomeIcon icon="arrow-circle-up" />
+                  ) : (
+                    <FontAwesomeIcon icon="arrow-circle-down" />
+                  )}
                   {' Log'}
                 </span>
               </button>
@@ -135,22 +152,28 @@ function SubMenu({
         </div>
         <pre className="my-1">
           <span className="d-block">{`${i18n.t('Receive:')} ${JSON.stringify(result)}`}</span>
-          <span className="d-block">{`${i18n.t('Expected:')} ${JSON.stringify(assert.expected)}`}</span>
-          <span className="d-block">{`${i18n.t('Arguments:')} ${JSON.stringify(assert.arguments)}`}</span>
+          <span className="d-block">{`${i18n.t('Expected:')} ${JSON.stringify(
+            assert.expected,
+          )}`}</span>
+          <span className="d-block">{`${i18n.t('Arguments:')} ${JSON.stringify(
+            assert.arguments,
+          )}`}</span>
         </pre>
         {hasOutput && (
-          <>
-            <div id={`collapse${uniqIndex}`} className={classCollapse} aria-labelledby={`heading${uniqIndex}`}>
-              {children}
-            </div>
-          </>
+          <div
+            aria-labelledby={`heading${uniqIndex}`}
+            className={classCollapse}
+            id={`collapse${uniqIndex}`}
+          >
+            {children}
+          </div>
         )}
       </div>
     </div>
   );
 }
 
-const Item = ({ output }) => {
+function Item({ output }) {
   if (output === '') {
     return null;
   }
@@ -163,7 +186,7 @@ const Item = ({ output }) => {
       </pre>
     </div>
   );
-};
+}
 
 AccordeonBox.Item = Item;
 AccordeonBox.Menu = Menu;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Card.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Card.jsx
index 95cda3a81..427321ced 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Card.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Card.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 
-const Card = ({ title, children }) => (
-  <div className="container-xl bg-white shadow-sm rounded py-4 mb-3">
-    <h3 className="text-center mb-4">{title}</h3>
-    {children}
-  </div>
-);
+function Card({ children, title }) {
+  return (
+    <div className="container-xl bg-white shadow-sm rounded py-4 mb-3">
+      <h3 className="text-center mb-4">{title}</h3>
+      {children}
+    </div>
+  );
+}
 
 export default Card;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/ChatContextMenu.jsx b/services/app/apps/codebattle/assets/js/widgets/components/ChatContextMenu.jsx
index eac3cc073..c819d9e9e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/ChatContextMenu.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/ChatContextMenu.jsx
@@ -1,27 +1,14 @@
-import React, {
-  useState,
-  useCallback,
-  useMemo,
-  memo,
-} from 'react';
+import React, { useState, useCallback, useMemo, memo } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import qs from 'qs';
-import {
-  Menu,
-  Item,
-  Separator,
-} from 'react-contexify';
+import { Menu, Item, Separator } from 'react-contexify';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { pushCommand } from '@/middlewares/Chat';
 import { openDirect } from '@/middlewares/Lobby';
-import {
-  currentUserIsAdminSelector,
-  currentUserIdSelector,
-  lobbyDataSelector,
-} from '@/selectors';
+import { currentUserIsAdminSelector, currentUserIdSelector, lobbyDataSelector } from '@/selectors';
 import { actions } from '@/slices';
 import { getLobbyUrl, getUserProfileUrl } from '@/utils/urlBuilders';
 
@@ -29,6 +16,9 @@ const blackSwordSrc = '/assets/images/fight-black.png';
 const whiteSwordSrc = '/assets/images/fight-white.png';
 
 function ChatContextMenu({
+  children,
+  inputRef,
+  menuId,
   request = {
     user: {
       name: null,
@@ -37,31 +27,22 @@ function ChatContextMenu({
       canInvite: false,
     },
   },
-  menuId,
-  inputRef,
-  children,
 }) {
   const dispatch = useDispatch();
 
   const [swordIconSrc, setSwordIconSrc] = useState(blackSwordSrc);
 
-  const currentUserIsAdmin = useSelector(state => currentUserIsAdminSelector(state));
+  const currentUserIsAdmin = useSelector((state) => currentUserIsAdminSelector(state));
   const currentUserId = useSelector(currentUserIdSelector);
   const { activeGames } = useSelector(lobbyDataSelector);
 
-  const {
-    isBot,
-    canInvite,
-    name,
-    userId,
-  } = request.user;
+  const { canInvite, isBot, name, userId } = request.user;
 
   const isCurrentUserHasActiveGames = useMemo(
-    () => (
+    () =>
       activeGames || activeGames.length > 0
         ? activeGames.some(({ players }) => players.some(({ id }) => id === currentUserId))
-        : true
-    ),
+        : true,
     [activeGames, currentUserId],
   );
   const isCurrentUser = !!userId && currentUserId === userId;
@@ -99,9 +80,7 @@ function ChatContextMenu({
         opponent_id: userId,
       });
       if (`/${window.location.hash}`.startsWith(getLobbyUrl())) {
-        dispatch(
-          actions.showCreateGameInviteModal({ opponentInfo: { id: userId, name } }),
-        );
+        dispatch(actions.showCreateGameInviteModal({ opponentInfo: { id: userId, name } }));
       } else {
         window.location.href = getLobbyUrl(queryParamsString);
       }
@@ -130,61 +109,44 @@ function ChatContextMenu({
   return (
     <>
       {children}
-      <Menu role="menu" id={menuId}>
-        <Item
-          role="menuitem"
-          aria-label="Copy Name"
-          onClick={handleCopy}
-        >
-          <FontAwesomeIcon
-            className="mr-2"
-            icon="copy"
-          />
+      <Menu id={menuId} role="menu">
+        <Item aria-label="Copy Name" role="menuitem" onClick={handleCopy}>
+          <FontAwesomeIcon className="mr-2" icon="copy" />
           <span>Copy Name</span>
         </Item>
-        <Item
-          role="menuitem"
-          aria-label="Info"
-          onClick={handleShowInfo}
-        >
-          <FontAwesomeIcon
-            className="mr-2"
-            icon="user"
-          />
+        <Item aria-label="Info" role="menuitem" onClick={handleShowInfo}>
+          <FontAwesomeIcon className="mr-2" icon="user" />
           <span>Info</span>
         </Item>
         {canCreatePrivateRoom ? (
           <Item
-            role="menuitem"
             aria-label="Direct message"
-            onClick={handleOpenDirect}
             disabled={!canCreatePrivateRoom}
+            role="menuitem"
+            onClick={handleOpenDirect}
           >
-            <FontAwesomeIcon
-              className="mr-2"
-              icon="comment-alt"
-            />
+            <FontAwesomeIcon className="mr-2" icon="comment-alt" />
             <span>Direct message</span>
           </Item>
         ) : null}
         {canInvite && (
           <Item
-            role="menuitem"
             aria-label="Send an invite"
+            disabled={inviteSendDisabled}
+            role="menuitem"
+            onBlur={handleBlurInvateMenuItem}
             onClick={handleCreateInviteModal}
+            onFocus={handleSelectInvateMenuItem}
             onMouseEnter={handleSelectInvateMenuItem}
             onMouseLeave={handleBlurInvateMenuItem}
-            onFocus={handleSelectInvateMenuItem}
-            onBlur={handleBlurInvateMenuItem}
-            disabled={inviteSendDisabled}
           >
             <img
               alt="invite"
-              src={swordIconSrc}
-              style={{ width: 14, height: 16 }}
               className={cn('mr-2', {
                 'text-muted': !inviteSendDisabled,
               })}
+              src={swordIconSrc}
+              style={{ width: 14, height: 16 }}
             />
             <span>Send an invite</span>
           </Item>
@@ -192,15 +154,8 @@ function ChatContextMenu({
         {currentUserIsAdmin ? (
           <>
             <Separator />
-            <Item
-              aria-label="Ban"
-              onClick={handleBanClick}
-              disabled={isBot}
-            >
-              <FontAwesomeIcon
-                className="mr-2"
-                icon="ban"
-              />
+            <Item aria-label="Ban" disabled={isBot} onClick={handleBanClick}>
+              <FontAwesomeIcon className="mr-2" icon="ban" />
               <span>Ban</span>
             </Item>
           </>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/ChatHeader.jsx b/services/app/apps/codebattle/assets/js/widgets/components/ChatHeader.jsx
index 84badf051..ac6375adc 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/ChatHeader.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/ChatHeader.jsx
@@ -7,7 +7,7 @@ import * as selectors from '../selectors';
 
 import Rooms from './Rooms';
 
-export default function ChatHeader({ showRooms = false, disabled = false }) {
+export default function ChatHeader({ disabled = false, showRooms = false }) {
   const currentUserIsAdmin = useSelector(selectors.currentUserIsAdminSelector);
 
   const handleCleanBanned = () => {
@@ -19,12 +19,12 @@ export default function ChatHeader({ showRooms = false, disabled = false }) {
       {showRooms && <Rooms disabled={disabled} />}
       {currentUserIsAdmin && (
         <button
-          type="button"
           className="btn btn-sm btn-link text-danger rounded-lg"
+          disabled={disabled}
+          type="button"
           onClick={() => {
             handleCleanBanned();
           }}
-          disabled={disabled}
         >
           Clean banned
         </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/ChatInput.jsx b/services/app/apps/codebattle/assets/js/widgets/components/ChatInput.jsx
index 7cda002b7..8e564d145 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/ChatInput.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/ChatInput.jsx
@@ -13,18 +13,18 @@ import useClickAway from '../utils/useClickAway';
 import EmojiPicker from './EmojiPicker';
 import EmojiToolTip from './EmojiTooltip';
 
-const trimColons = message => message.slice(0, message.lastIndexOf(':'));
+const trimColons = (message) => message.slice(0, message.lastIndexOf(':'));
 
-const getColons = message => message.slice(message.lastIndexOf(':') + 1);
+const getColons = (message) => message.slice(message.lastIndexOf(':') + 1);
 
-const getTooltipVisibility = async msg => {
+const getTooltipVisibility = async (msg) => {
   const endsWithEmojiCodeRegex = /.*:[a-zA-Z]{0,}([^ ])+$/;
   if (!endsWithEmojiCodeRegex.test(msg)) return Promise.resolve(false);
   const colons = getColons(msg);
   return !isEmpty(await SearchIndex.search(colons));
 };
 
-export default function ChatInput({ inputRef, disabled = false }) {
+export default function ChatInput({ disabled = false, inputRef }) {
   const [isPickerVisible, setPickerVisibility] = useState(false);
   const [isTooltipVisible, setTooltipVisibility] = useState(false);
   const [text, setText] = useState('');
@@ -35,7 +35,7 @@ export default function ChatInput({ inputRef, disabled = false }) {
     setTooltipVisibility(await getTooltipVisibility(value));
   };
 
-  const handleSubmit = e => {
+  const handleSubmit = (e) => {
     e.preventDefault();
     const message = {
       text,
@@ -69,10 +69,7 @@ export default function ChatInput({ inputRef, disabled = false }) {
     hideTooltip();
     await setText(`${before}${native}${after}`);
     input.focus();
-    input.setSelectionRange(
-      caretPosition + native.length,
-      caretPosition + native.length,
-    );
+    input.setSelectionRange(caretPosition + native.length, caretPosition + native.length);
   };
 
   useClickAway(
@@ -88,17 +85,14 @@ export default function ChatInput({ inputRef, disabled = false }) {
   }, []);
 
   return (
-    <form
-      className="border-top input-group mb-0 p-2"
-      onSubmit={handleSubmit}
-    >
+    <form className="border-top input-group mb-0 p-2" onSubmit={handleSubmit}>
       <input
+        ref={inputRef}
         className="form-control h-auto border-gray border-right-0 rounded-left"
+        disabled={disabled}
         placeholder="Please be nice in the chat!"
         value={text}
         onChange={handleChange}
-        ref={inputRef}
-        disabled={disabled}
       />
       {isTooltipVisible && (
         <EmojiToolTip
@@ -108,25 +102,21 @@ export default function ChatInput({ inputRef, disabled = false }) {
         />
       )}
       {isPickerVisible && (
-        <EmojiPicker
-          handleSelect={handleSelectEmodji}
-          hide={hidePicker}
-          disabled={disabled}
-        />
+        <EmojiPicker disabled={disabled} handleSelect={handleSelectEmodji} hide={hidePicker} />
       )}
       <div className="input-group-append border-left rounded-right">
         <button
-          type="button"
           className="btn bg-white border-gray border-left-0 border-right-0 px-2 py-0"
+          type="button"
           onClick={togglePickerVisibility}
         >
           <em-emoji id="grinning" size={20} />
         </button>
         <button
           className="btn btn-secondary border-gray border-left rounded-right"
+          disabled={disabled}
           type="button"
           onClick={handleSubmit}
-          disabled={disabled}
         >
           Send
         </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/CopyButton.jsx b/services/app/apps/codebattle/assets/js/widgets/components/CopyButton.jsx
index 1d3a6772a..edd93c0fe 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/CopyButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/CopyButton.jsx
@@ -3,7 +3,7 @@ import React, { useState, useCallback } from 'react';
 import copy from 'copy-to-clipboard';
 import i18n from 'i18next';
 
-function CopyButton({ className, value, disabled = false }) {
+function CopyButton({ className, disabled = false, value }) {
   const [copied, setCopied] = useState(false);
 
   const onClick = useCallback(() => {
@@ -15,11 +15,11 @@ function CopyButton({ className, value, disabled = false }) {
 
   return (
     <button
-      type="button"
       className={className}
-      onClick={onClick}
       data-testid="copy-button"
       disabled={disabled}
+      type="button"
+      onClick={onClick}
     >
       {i18n.t(textButtonCopy)}
     </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/CountdownTimer.jsx b/services/app/apps/codebattle/assets/js/widgets/components/CountdownTimer.jsx
index 69d0edbaa..ad6c4ebad 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/CountdownTimer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/CountdownTimer.jsx
@@ -4,9 +4,7 @@ import cn from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 
-const getProgress = (a, b) => (
-  100 - Math.ceil((a / b) * 100)
-);
+const getProgress = (a, b) => 100 - Math.ceil((a / b) * 100);
 
 const getDuration = (time, timeoutSeconds) => {
   const diff = moment().diff(moment.utc(time));
@@ -47,10 +45,7 @@ function CountdownTimer({ time, timeoutSeconds }) {
         {timeoutSeconds && 'Timeout in: '}
         <span>{moment.utc(duration).format('HH:mm:ss')}</span>
       </span>
-      <div
-        className={progressBgColor}
-        style={{ width: `${progress}%` }}
-      />
+      <div className={progressBgColor} style={{ width: `${progress}%` }} />
     </>
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.jsx b/services/app/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.jsx
index baf301ac2..a1208a4d1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/DropdownMenuDefault.jsx
@@ -3,31 +3,30 @@ import React from 'react';
 import i18n from '../../i18n';
 import levelToClass from '../config/levelToClass';
 
-const DropdownItem = ({ level, setLevel, setLevelClass }) => (
-  <button
-    key={level}
-    className="dropdown-item"
-    type="button"
-    onClick={() => {
-      setLevel(level);
-      setLevelClass(levelToClass[level]);
-    }}
-  >
-    <span className={`badge badge-pill badge-${levelToClass[level]} mr-1`}>&nbsp;</span>
-    {i18n.t(level)}
-  </button>
-);
+function DropdownItem({ level, setLevel, setLevelClass }) {
+  return (
+    <button
+      key={level}
+      className="dropdown-item"
+      type="button"
+      onClick={() => {
+        setLevel(level);
+        setLevelClass(levelToClass[level]);
+      }}
+    >
+      <span className={`badge badge-pill badge-${levelToClass[level]} mr-1`}>&nbsp;</span>
+      {i18n.t(level)}
+    </button>
+  );
+}
 
 const DropdownMenuDefault = ({ currentLevel, setLevel, setLevelClass }) => {
-  const orderedLevels = ['random', 'elementary', 'easy', 'medium', 'hard'].filter(level => level !== currentLevel);
+  const orderedLevels = ['random', 'elementary', 'easy', 'medium', 'hard'].filter(
+    (level) => level !== currentLevel,
+  );
 
-  return orderedLevels.map(level => (
-    <DropdownItem
-      key={level}
-      level={level}
-      setLevel={setLevel}
-      setLevelClass={setLevelClass}
-    />
+  return orderedLevels.map((level) => (
+    <DropdownItem key={level} level={level} setLevel={setLevel} setLevelClass={setLevelClass} />
   ));
 };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx
index 53f70e17b..1f18ec55b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx
@@ -41,16 +41,17 @@ class Editor extends PureComponent {
   // eslint-disable-next-line react/sort-comp
   notIncludedSyntaxHightlight = new Set(['haskell', 'elixir']);
 
-  ctrPlusS = null
+  ctrPlusS = null;
 
-  remoteKeys = []
+  remoteKeys = [];
 
   constructor(props) {
     super(props);
     this.statusBarRef = React.createRef();
-    const convertRemToPixels = rem => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    // const convertRemToPixels = (rem) =>
+    //   rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
     // statusBarHeight = lineHeight = current fontSize * 1.5
-    this.statusBarHeight = convertRemToPixels(1) * 1.5;
+    // this.statusBarHeight = convertRemToPixels(1) * 1.5;
     this.options = {
       tabSize: getLanguageTabSize(props.syntax),
       insertSpaces: shouldReplaceTabsWithSpaces(props.syntax),
@@ -72,18 +73,13 @@ class Editor extends PureComponent {
       },
     };
     /** @param {KeyboardEvent} e */
-    this.ctrPlusS = e => {
+    this.ctrPlusS = (e) => {
       if (e.key === 's' && (e.metaKey || e.ctrlKey)) e.preventDefault();
     };
   }
 
   async componentDidMount() {
-    const {
-      mode,
-      syntax,
-      checkResult,
-      toggleMuteSound,
-    } = this.props;
+    const { checkResult, mode, syntax, toggleMuteSound } = this.props;
 
     this.modes = {
       default: () => null,
@@ -121,12 +117,7 @@ class Editor extends PureComponent {
 
   async componentDidUpdate(prevProps, prevState) {
     const { remote } = this.state;
-    const {
-      syntax,
-      mode,
-      editable,
-      loading = false,
-    } = this.props;
+    const { editable, loading = false, mode, syntax } = this.props;
 
     if (mode !== prevProps.mode) {
       if (this.currentMode) {
@@ -157,16 +148,15 @@ class Editor extends PureComponent {
     const model = this.editor.getModel();
 
     if (prevProps.syntax !== syntax) {
-      model.updateOptions({ tabSize: getLanguageTabSize(syntax), insertSpaces: shouldReplaceTabsWithSpaces(syntax) });
+      model.updateOptions({
+        tabSize: getLanguageTabSize(syntax),
+        insertSpaces: shouldReplaceTabsWithSpaces(syntax),
+      });
 
       await this.updateHightLightForNotIncludeSyntax(syntax);
     }
 
-    if (
-      prevState.remote !== remote
-        && remote.cursor.range
-        && remote.selection.range
-    ) {
+    if (prevState.remote !== remote && remote.cursor.range && remote.selection.range) {
       this.remoteKeys = this.editor.deltaDecorations(this.remoteKeys, Object.values(remote));
     }
 
@@ -181,7 +171,7 @@ class Editor extends PureComponent {
     this.clearCursorListeners();
   }
 
-  updateHightLightForNotIncludeSyntax = async syntax => {
+  updateHightLightForNotIncludeSyntax = async (syntax) => {
     if (this.notIncludedSyntaxHightlight.has(syntax)) {
       const { default: HighlightRules } = await import(
         `monaco-ace-tokenizer/lib/ace/definitions/${syntax}`
@@ -196,7 +186,7 @@ class Editor extends PureComponent {
 
   handleResize = () => this.editor.layout();
 
-  handleChangeCursorSelection = e => {
+  handleChangeCursorSelection = (e) => {
     const { editable, gameMode, onChangeCursorSelection } = this.props;
     const isTournament = gameMode === GameRoomModes.tournament;
 
@@ -210,7 +200,7 @@ class Editor extends PureComponent {
     }
   };
 
-  handleChangeCursorPosition = e => {
+  handleChangeCursorPosition = (e) => {
     const { editable, onChangeCursorPosition } = this.props;
 
     if (editable && onChangeCursorPosition) {
@@ -221,9 +211,8 @@ class Editor extends PureComponent {
 
   updateRemoteCursorSelection = (startOffset, endOffset) => {
     const { editable, userType } = this.props;
-    const userClassName = userType === editorUserTypes.opponent
-      ? 'cb-remote-opponent'
-      : 'cb-remote-player';
+    const userClassName =
+      userType === editorUserTypes.opponent ? 'cb-remote-opponent' : 'cb-remote-player';
 
     if (!editable) {
       const startPosition = this.editor.getModel().getPositionAt(startOffset);
@@ -235,27 +224,21 @@ class Editor extends PureComponent {
       const endLineNumber = endPosition.lineNumber;
 
       const selection = {
-        range: new this.monaco.Range(
-          startLineNumber,
-          startColumn,
-          endLineNumber,
-          endColumn,
-        ),
+        range: new this.monaco.Range(startLineNumber, startColumn, endLineNumber, endColumn),
         options: { className: `cb-editor-remote-selection ${userClassName}` },
       };
 
-      this.setState(state => ({
+      this.setState((state) => ({
         remote: { ...state.remote, selection },
       }));
     }
-  }
+  };
 
-  updateRemoteCursorPosition = offset => {
+  updateRemoteCursorPosition = (offset) => {
     const { editable, userType } = this.props;
     const position = this.editor.getModel().getPositionAt(offset);
-    const userClassName = userType === editorUserTypes.opponent
-      ? 'cb-remote-opponent'
-      : 'cb-remote-player';
+    const userClassName =
+      userType === editorUserTypes.opponent ? 'cb-remote-opponent' : 'cb-remote-player';
 
     if (!editable) {
       const cursor = {
@@ -268,14 +251,14 @@ class Editor extends PureComponent {
         options: { className: `cb-editor-remote-cursor ${userClassName}` },
       };
 
-      this.setState(state => ({
+      this.setState((state) => ({
         remote: {
           ...state.remote,
           cursor,
         },
       }));
     }
-  }
+  };
 
   clearCursorListeners = () => {};
 
@@ -303,17 +286,11 @@ class Editor extends PureComponent {
     if (editable && !isTournament && !isBuilder) {
       this.editor.focus();
     } else if (editable && isTournament) {
-      this.editor.addCommand(
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V,
-        () => null,
-      );
+      this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V, () => null);
       this.editor.focus();
     } else {
       // disable copying for spectator
-      this.editor.addCommand(
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C,
-        () => null,
-      );
+      this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C, () => null);
       // this.editor.onDidChangeCursorSelection(() => {
       //   const { column, lineNumber } = this.editor.getPosition();
       //   this.editor.setPosition({ lineNumber, column });
@@ -322,23 +299,15 @@ class Editor extends PureComponent {
 
     // this.editor.getModel().updateOptions({ tabSize: this.tabSize });
 
-    this.editor.addCommand(
-      this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.Enter,
-      () => null,
-    );
+    this.editor.addCommand(this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.Enter, () => null);
 
-    this.editor.addCommand(
-      this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_M,
-      () => null,
-    );
+    this.editor.addCommand(this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_M, () => null);
 
     window.addEventListener('resize', this.handleResize);
   };
 
   render() {
-    const {
-      value, syntax, onChange, theme, loading = false,
-    } = this.props;
+    const { loading = false, onChange, syntax, theme, value } = this.props;
     // FIXME: move here and apply mapping object
     const mappedSyntax = languages[syntax];
     const statusBarClassName = cn('position-absolute px-1', {
@@ -346,36 +315,37 @@ class Editor extends PureComponent {
       'bg-white text-dark': theme === editorThemes.light,
     });
 
-    const loadingClassName = cn('position-absolute align-items-center justify-content-center w-100 h-100', {
-      'd-flex cb-loading-background': loading,
-      'd-none': !loading,
-    });
+    const loadingClassName = cn(
+      'position-absolute align-items-center justify-content-center w-100 h-100',
+      {
+        'd-flex cb-loading-background': loading,
+        'd-none': !loading,
+      },
+    );
 
     return (
       <>
         <MonacoEditor
-          theme={theme}
-          options={this.options}
-          width="100%"
+          data-guide-id="Editor"
+          editorDidMount={this.editorDidMount}
           height="100%"
           language={mappedSyntax}
-          editorDidMount={this.editorDidMount}
+          options={this.options}
+          theme={theme}
           value={value}
+          width="100%"
           onChange={onChange}
-          data-guide-id="Editor"
-        />
-        <div
-          ref={this.statusBarRef}
-          className={statusBarClassName}
-          style={{ bottom: '40px' }}
         />
-        <div className={loadingClassName}><Loading /></div>
+        <div ref={this.statusBarRef} className={statusBarClassName} style={{ bottom: '40px' }} />
+        <div className={loadingClassName}>
+          <Loading />
+        </div>
       </>
     );
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   const gameMode = gameModeSelector(state);
   return {
     gameMode,
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/EmojiPicker.jsx b/services/app/apps/codebattle/assets/js/widgets/components/EmojiPicker.jsx
index c3c458991..004524dad 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/EmojiPicker.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/EmojiPicker.jsx
@@ -5,22 +5,22 @@ import Picker from '@emoji-mart/react';
 
 import useKey from '../utils/useKey';
 
-export default function EmojiPicker({ handleSelect, hide, disabled = false }) {
+export default function EmojiPicker({ disabled = false, handleSelect, hide }) {
   useKey('Escape', () => hide(), { event: 'keyup' });
 
   const handleOnClickOutside = () => hide();
 
   return (
     <Picker
+      autoFocus
       data={data}
+      disabled={disabled}
+      emojiSize={20}
+      perLine={8}
       previewPosition="none"
       skinTonePosition="none"
-      perLine={8}
-      emojiSize={20}
-      onEmojiSelect={handleSelect}
       onClickOutside={handleOnClickOutside}
-      autoFocus
-      disabled={disabled}
+      onEmojiSelect={handleSelect}
     />
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/EmojiTooltip.jsx b/services/app/apps/codebattle/assets/js/widgets/components/EmojiTooltip.jsx
index 237ef764a..97daaac15 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/EmojiTooltip.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/EmojiTooltip.jsx
@@ -10,7 +10,7 @@ export default function EmojiTooltip({ colons, handleSelect, hide }) {
   const [emojis, setEmojis] = useState([]);
 
   const increaseIndex = () => {
-    setActiveIndex(prevIndex => {
+    setActiveIndex((prevIndex) => {
       const increment = prevIndex !== emojis.length - 1 ? 1 : -emojis.length + 1;
       return prevIndex + increment;
     });
@@ -19,7 +19,7 @@ export default function EmojiTooltip({ colons, handleSelect, hide }) {
   useEffect(() => {
     const fetchEmojis = async () => {
       const rawEmojis = await SearchIndex.search(colons);
-      const preparedEmojis = rawEmojis.map(emoji => ({
+      const preparedEmojis = rawEmojis.map((emoji) => ({
         ...emoji,
         native: emoji.skins[0].native,
         colons: emoji.skins[0].shortcodes,
@@ -31,7 +31,7 @@ export default function EmojiTooltip({ colons, handleSelect, hide }) {
   }, [colons]);
 
   const decreaseIndex = () => {
-    setActiveIndex(prevIndex => {
+    setActiveIndex((prevIndex) => {
       const decrement = prevIndex !== 0 ? 1 : -emojis.length + 1;
       return prevIndex - decrement;
     });
@@ -39,31 +39,38 @@ export default function EmojiTooltip({ colons, handleSelect, hide }) {
 
   useKey('Escape', () => hide());
 
-  useKey('Enter', e => {
-    e.preventDefault();
-    handleSelect(emojis[activeIndex]);
-  }, {}, [activeIndex, emojis]);
+  useKey(
+    'Enter',
+    (e) => {
+      e.preventDefault();
+      handleSelect(emojis[activeIndex]);
+    },
+    {},
+    [activeIndex, emojis],
+  );
 
   useKey('ArrowUp', () => decreaseIndex(), {}, [emojis]);
   useKey('ArrowDown', () => increaseIndex(), {}, [emojis]);
 
   return (
     <select
-      value={activeIndex}
       className="d-flex position-absolute flex-column border rounded w-50 x-bottom-75 custom-select mb-2"
-      onChange={e => { setActiveIndex(e.target.value); }}
-      onClick={() => { handleSelect(emojis[activeIndex]); }}
       size="4"
+      value={activeIndex}
+      onChange={(e) => {
+        setActiveIndex(e.target.value);
+      }}
+      onClick={() => {
+        handleSelect(emojis[activeIndex]);
+      }}
     >
-      {!isEmpty(emojis) && emojis.map((emoji, i) => (
-        <option
-          key={emoji.id}
-          value={+i}
-        >
-          {emoji.native}
-          {emoji.colons}
-        </option>
-      ))}
+      {!isEmpty(emojis) &&
+        emojis.map((emoji, i) => (
+          <option key={emoji.id} value={+i}>
+            {emoji.native}
+            {emoji.colons}
+          </option>
+        ))}
     </select>
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/ExtensionPopup.jsx b/services/app/apps/codebattle/assets/js/widgets/components/ExtensionPopup.jsx
index 0426eda84..1720812cf 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/ExtensionPopup.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/ExtensionPopup.jsx
@@ -4,20 +4,23 @@ import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { createRoot } from 'react-dom';
 
-const isExtensionInstalled = info => new Promise(resolve => {
-  const img = new Image();
-  img.src = `chrome-extension://${info.id}/${info.path}`;
-  img.onload = () => {
+const isExtensionInstalled = (info) =>
+  new Promise((resolve) => {
+    const img = new Image();
+    img.src = `chrome-extension://${info.id}/${info.path}`;
+    img.onload = () => {
       resolve(true);
-  };
-  img.onerror = () => {
-    resolve(false);
-  };
-});
+    };
+    img.onerror = () => {
+      resolve(false);
+    };
+  });
 
 function ExtensionPopup() {
   const [modalShowing, setModalShowing] = useState(true);
-  const handleHide = () => { setModalShowing(false); };
+  const handleHide = () => {
+    setModalShowing(false);
+  };
 
   return (
     <Modal show={modalShowing} onHide={handleHide}>
@@ -30,10 +33,10 @@ function ExtensionPopup() {
         <p>
           {'We have a '}
           <a
+            className="alert-link"
             href="https://chrome.google.com/webstore/detail/codebattle-web-extension/embfhnfkfobkdohleknckodkmhgmpdli?hl=en&"
-            target="_blank"
             rel="noreferrer"
-            className="alert-link"
+            target="_blank"
           >
             chrome extension
           </a>
@@ -42,17 +45,14 @@ function ExtensionPopup() {
       </Modal.Body>
       <Modal.Footer className="mx-auto">
         <Button
-          variant="outline-success"
-          target="_blank"
-          rel="noreferrer"
           href="https://chrome.google.com/webstore/detail/codebattle-web-extension/embfhnfkfobkdohleknckodkmhgmpdli?hl=en&"
+          rel="noreferrer"
+          target="_blank"
+          variant="outline-success"
         >
           Install
         </Button>
-        <Button
-          variant="outline-secondary"
-          onClick={handleHide}
-        >
+        <Button variant="outline-secondary" onClick={handleHide}>
           Close
         </Button>
       </Modal.Footer>
@@ -60,7 +60,7 @@ function ExtensionPopup() {
   );
 }
 
-export default domElement => {
+export default (domElement) => {
   const lastCheckExtension = window.localStorage.getItem('lastCheckExtension');
   const nowTime = Date.now();
   const threeDay = 1000 * 60 * 60 * 24 * 3;
@@ -68,7 +68,7 @@ export default domElement => {
   if (window.chrome && isExpired) {
     // TODO: move to env config extension id and icon path
     const extensionInfo = { id: 'embfhnfkfobkdohleknckodkmhgmpdli', path: 'assets/128.png' };
-    isExtensionInstalled(extensionInfo).then(isInstall => {
+    isExtensionInstalled(extensionInfo).then((isInstall) => {
       if (!isInstall) {
         window.localStorage.setItem('lastCheckExtension', nowTime);
         createRoot(domElement).render(<ExtensionPopup />);
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.jsx b/services/app/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.jsx
index 0a41f0c62..170308452 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/FeedbackAlertNotification.jsx
@@ -9,7 +9,7 @@ import AlertCodes from '../config/alertCodes';
 import { gameAlertsSelector } from '../selectors/index';
 import { actions } from '../slices';
 
-const getNotification = status => {
+const getNotification = (status) => {
   switch (status) {
     case AlertCodes.feedbackSendSuccessful: {
       return {
@@ -33,12 +33,15 @@ function FeedbackAlertNotification() {
   const dispatch = useDispatch();
   const alerts = useSelector(gameAlertsSelector);
 
-  const handleClose = useCallback(id => {
-    dispatch(actions.deleteAlert(id));
-  }, [dispatch]);
+  const handleClose = useCallback(
+    (id) => {
+      dispatch(actions.deleteAlert(id));
+    },
+    [dispatch],
+  );
 
   if (isEmpty(alerts)) {
-    return <></>;
+    return null;
   }
 
   return Object.entries(alerts).map(([key, value]) => {
@@ -46,11 +49,11 @@ function FeedbackAlertNotification() {
 
     return (
       <Alert
-        dismissible
-        onClose={() => handleClose(key)}
         key={key}
-        variant={result.status}
+        dismissible
         className="row mb-0 rounded-0 alert alert-info alert-dismissible fade show"
+        variant={result.status}
+        onClose={() => handleClose(key)}
       >
         {result.message}
       </Alert>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/FeedbackWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/components/FeedbackWidget.jsx
index bf1adf5ef..89dabb546 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/FeedbackWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/FeedbackWidget.jsx
@@ -8,25 +8,29 @@ import AlertCodes from '../config/alertCodes';
 import { currentUserNameSelector } from '../selectors/index';
 import { actions } from '../slices';
 
-const sendToServer = (payload, success, error) => fetch('/api/v1/feedback', {
-  method: 'POST',
-  headers: {
-    'Content-type': 'application/json',
-    'x-csrf-token': window.csrf_token,
-  },
-  body: JSON.stringify(payload),
-})
-  .then(success)
-  .catch(error);
+const sendToServer = (payload, success, error) =>
+  fetch('/api/v1/feedback', {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+      'x-csrf-token': window.csrf_token,
+    },
+    body: JSON.stringify(payload),
+  })
+    .then(success)
+    .catch(error);
 
 function FeedbackWidget() {
   const dispatch = useDispatch();
 
   const currentUserName = useSelector(currentUserNameSelector);
 
-  const addAlert = useCallback(status => {
-    dispatch(actions.addAlert({ [Date.now()]: status }));
-  }, [dispatch]);
+  const addAlert = useCallback(
+    (status) => {
+      dispatch(actions.addAlert({ [Date.now()]: status }));
+    },
+    [dispatch],
+  );
 
   return (
     <SlackFeedback
@@ -34,21 +38,26 @@ function FeedbackWidget() {
         <FontAwesomeIcon
           icon={['fas', 'rss']}
           style={{
-            color: '#ee3737', width: '20', height: '20', marginRight: '8px',
+            color: '#ee3737',
+            width: '20',
+            height: '20',
+            marginRight: '8px',
           }}
         />
       )}
       theme={themes.dark}
       user={currentUserName}
-      onSubmit={(payload, success, error) => sendToServer(payload)
-        .then(() => {
-          addAlert(AlertCodes.feedbackSendSuccessful);
-          success();
-        })
-        .catch(() => {
-          addAlert(AlertCodes.feedbackSendError);
-          error();
-        })}
+      onSubmit={(payload, success, error) =>
+        sendToServer(payload)
+          .then(() => {
+            addAlert(AlertCodes.feedbackSendSuccessful);
+            success();
+          })
+          .catch(() => {
+            addAlert(AlertCodes.feedbackSendError);
+            error();
+          })
+      }
     />
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/GameLevelBadge.jsx b/services/app/apps/codebattle/assets/js/widgets/components/GameLevelBadge.jsx
index 0359bd3c1..b95faa15d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/GameLevelBadge.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/GameLevelBadge.jsx
@@ -1,14 +1,11 @@
 import React from 'react';
 
-const GameLevelBadge = ({ level }) => (
-  <div
-    className="text-center"
-    data-toggle="tooltip"
-    data-placement="right"
-    title={level}
-  >
-    <img alt={level} src={`/assets/images/levels/${level}.svg`} />
-  </div>
-);
+function GameLevelBadge({ level }) {
+  return (
+    <div className="text-center" data-placement="right" data-toggle="tooltip" title={level}>
+      <img alt={level} src={`/assets/images/levels/${level}.svg`} />
+    </div>
+  );
+}
 
 export default GameLevelBadge;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/GamesHeatmap.jsx b/services/app/apps/codebattle/assets/js/widgets/components/GamesHeatmap.jsx
index cdee780b9..5b52965f8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/GamesHeatmap.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/GamesHeatmap.jsx
@@ -16,10 +16,10 @@ function GamesHeatmap() {
   useEffect(() => {
     axios
       .get('/api/v1/game_activity')
-      .then(response => {
+      .then((response) => {
         setActivities(response.data.activities);
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
   }, [dispatch]);
@@ -32,26 +32,26 @@ function GamesHeatmap() {
       <div className="card-body py-0 my-0">
         <CalendarHeatmap
           showWeekdayLabels
-          values={activities}
-          classForValue={value => {
+          classForValue={(value) => {
             if (!value) {
               return 'color-empty';
             }
             return GamesHeatmap.colorScale(value.count);
           }}
-          titleForValue={value => {
+          titleForValue={(value) => {
             if (!value) {
               return 'No games';
             }
             return `${value.count} games on ${value.date}`;
           }}
+          values={activities}
         />
       </div>
     </div>
   );
 }
 
-GamesHeatmap.colorScale = count => {
+GamesHeatmap.colorScale = (count) => {
   if (count >= 5) {
     return 'color-huge';
   }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx b/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx
index bac30f7f7..3bd3a8763 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/InvitesContainer.jsx
@@ -7,12 +7,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import { useDispatch, useSelector } from 'react-redux';
 
-import {
-  initInvites,
-  acceptInvite,
-  declineInvite,
-  cancelInvite,
-} from '../middlewares/Invite';
+import { initInvites, acceptInvite, declineInvite, cancelInvite } from '../middlewares/Invite';
 import initPresence from '../middlewares/Main';
 import * as selectors from '../selectors';
 import { selectors as invitesSelectors } from '../slices/invites';
@@ -22,56 +17,54 @@ import GameLevelBadge from './GameLevelBadge';
 
 const NoInvites = () => <div className="p-2">No Invites</div>;
 
-function InvitesList({ list, currentUserId }) {
+function InvitesList({ currentUserId, list }) {
   const dispatch = useDispatch();
 
   return list
     .sort(({ creatorId }) => creatorId === currentUserId)
-    .map(({
- id, creatorId, recipientId, creator, recipient, gameParams,
-}) => (
-  <div key={id} className="d-flex align-items-center p-2">
-    <div className="mx-1">
-      <GameLevelBadge level={gameParams.level} />
-    </div>
-    {currentUserId === recipientId && (
-    <>
-      <span className="text-truncate small mx-2 mr-auto">
-        <span className="font-weight-bold">{creator.name}</span>
-        <span className="mr-2"> invited you</span>
-      </span>
-      <button
-        type="submit"
-        className="btn btn-outline-danger small px-1 mx-1"
-        onClick={() => dispatch(acceptInvite(id, creator.name))}
-      >
-        Accept
-      </button>
-      <button
-        type="submit"
-        className="btn btn-outline-primary small px-1 mx-1"
-        onClick={() => dispatch(declineInvite(id, creator.name))}
-      >
-        Decline
-      </button>
-    </>
+    .map(({ creator, creatorId, gameParams, id, recipient, recipientId }) => (
+      <div key={id} className="d-flex align-items-center p-2">
+        <div className="mx-1">
+          <GameLevelBadge level={gameParams.level} />
+        </div>
+        {currentUserId === recipientId && (
+          <>
+            <span className="text-truncate small mx-2 mr-auto">
+              <span className="font-weight-bold">{creator.name}</span>
+              <span className="mr-2"> invited you</span>
+            </span>
+            <button
+              className="btn btn-outline-danger small px-1 mx-1"
+              type="submit"
+              onClick={() => dispatch(acceptInvite(id, creator.name))}
+            >
+              Accept
+            </button>
+            <button
+              className="btn btn-outline-primary small px-1 mx-1"
+              type="submit"
+              onClick={() => dispatch(declineInvite(id, creator.name))}
+            >
+              Decline
+            </button>
+          </>
         )}
-    {currentUserId === creatorId && (
-    <>
-      <span className="text-truncate small ml-2 mr-auto">
-        {'You invited '}
-        <span className="font-weight-bold mr-2">{recipient.name}</span>
-      </span>
-      <button
-        type="submit"
-        className="btn btn-outline-primary small mx-1 px-1"
-        onClick={() => dispatch(cancelInvite(id, recipient.name))}
-      >
-        Cancel
-      </button>
-    </>
+        {currentUserId === creatorId && (
+          <>
+            <span className="text-truncate small ml-2 mr-auto">
+              {'You invited '}
+              <span className="font-weight-bold mr-2">{recipient.name}</span>
+            </span>
+            <button
+              className="btn btn-outline-primary small mx-1 px-1"
+              type="submit"
+              onClick={() => dispatch(cancelInvite(id, recipient.name))}
+            >
+              Cancel
+            </button>
+          </>
         )}
-  </div>
+      </div>
     ));
 }
 
@@ -79,17 +72,14 @@ function OnlineIndicator() {
   const { presenceList } = useSelector(selectors.lobbyDataSelector);
   const count = presenceList ? presenceList.length : 0;
 
-  return (
-    <>
-      <span className="text-muted mr-2">{`${count} Online`}</span>
-    </>
-  );
+  return <span className="text-muted mr-2">{`${count} Online`}</span>;
 }
 
 function InvitesContainer() {
   const currentUserId = useSelector(selectors.currentUserIdSelector);
-  const checkInvitePlayers = ({ creatorId, recipientId }) => creatorId === currentUserId || recipientId === currentUserId;
-  const filterInvites = invite => invite.state === 'pending' && checkInvitePlayers(invite);
+  const checkInvitePlayers = ({ creatorId, recipientId }) =>
+    creatorId === currentUserId || recipientId === currentUserId;
+  const filterInvites = (invite) => invite.state === 'pending' && checkInvitePlayers(invite);
   const invites = useSelector(invitesSelectors.selectAll).filter(filterInvites);
 
   const dispatch = useDispatch();
@@ -102,12 +92,9 @@ function InvitesContainer() {
   }, []);
 
   useEffect(() => {
-    const inviteClasses = cn(
-      'position-absolute invites-counter badge badge-danger',
-      {
-        'd-none': invites.length === 0,
-      },
-    );
+    const inviteClasses = cn('position-absolute invites-counter badge badge-danger', {
+      'd-none': invites.length === 0,
+    });
     const invitesCountElement = document.getElementById('invites-counter-id');
     invitesCountElement.classList.add(...inviteClasses.split(' '));
     invitesCountElement.textContent = invites.length;
@@ -119,25 +106,21 @@ function InvitesContainer() {
     <>
       <OnlineIndicator />
       <OverlayTrigger
-        trigger={isSafari() ? 'click' : 'focus'}
         key="codebattle-invites"
-        placement={invites.length === 0 ? 'bottom-end' : 'bottom'}
-        overlay={(
+        overlay={
           <Popover id="popover-invites" show={invites.length !== 0}>
             {invites.length === 0 ? (
               <NoInvites />
             ) : (
-              <InvitesList list={invites} currentUserId={currentUserId} />
+              <InvitesList currentUserId={currentUserId} list={invites} />
             )}
           </Popover>
-        )}
+        }
+        placement={invites.length === 0 ? 'bottom-end' : 'bottom'}
+        trigger={isSafari() ? 'click' : 'focus'}
       >
         {({ ref, ...triggerHandler }) => (
-          <Button
-            variant="dark"
-            {...triggerHandler}
-            className="attachment mx-2"
-          >
+          <Button variant="dark" {...triggerHandler} className="attachment mx-2">
             <img
               ref={ref}
               alt="invites"
@@ -146,10 +129,8 @@ function InvitesContainer() {
             />
             {invites.length !== 0 ? (
               <>
-                <span className="position-absolute badge badge-danger">
-                  {invites.length}
-                </span>
-                <span className="sr-only">{'your\'s invites'}</span>
+                <span className="position-absolute badge badge-danger">{invites.length}</span>
+                <span className="sr-only">your&apos;s invites</span>
               </>
             ) : (
               <span className="sr-only">no invites</span>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/LanguageIcon.jsx b/services/app/apps/codebattle/assets/js/widgets/components/LanguageIcon.jsx
index ff7ed93a8..dcd5ec658 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/LanguageIcon.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/LanguageIcon.jsx
@@ -23,12 +23,14 @@ const iconsToClass = {
   php: 'icon-php-alt',
 };
 
-const LanguageIcon = ({ lang }) => (
-  <span
-    className={cn('d-flex', iconsToClass[lang], {
-      'mt-2': isMacintosh(),
-    })}
-  />
-);
+function LanguageIcon({ lang }) {
+  return (
+    <span
+      className={cn('d-flex', iconsToClass[lang], {
+        'mt-2': isMacintosh(),
+      })}
+    />
+  );
+}
 
 export default LanguageIcon;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/LanguagePicker.jsx b/services/app/apps/codebattle/assets/js/widgets/components/LanguagePicker.jsx
index eddd08f7e..02cbb1b1e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/LanguagePicker.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/LanguagePicker.jsx
@@ -3,13 +3,16 @@ import React, { useContext } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { inTestingRoomSelector, openedReplayerSelector } from '../machines/selectors';
-import { sendCurrentLangAndSetTemplate, updateCurrentLangAndSetTemplate } from '../middlewares/Game';
+import {
+  sendCurrentLangAndSetTemplate,
+  updateCurrentLangAndSetTemplate,
+} from '../middlewares/Game';
 import useMachineStateSelector from '../utils/useMachineStateSelector';
 
 import LanguagePickerView from './LanguagePickerView';
 import RoomContext from './RoomContext';
 
-function LanguagePicker({ status, editor: { currentLangSlug } }) {
+function LanguagePicker({ editor: { currentLangSlug }, status }) {
   const dispatch = useDispatch();
 
   const { mainService } = useContext(RoomContext);
@@ -25,9 +28,9 @@ function LanguagePicker({ status, editor: { currentLangSlug } }) {
 
   return (
     <LanguagePickerView
-      isDisabled={isOpenedReplayer || status === 'disabled'}
-      currentLangSlug={currentLangSlug}
       changeLang={changeLang}
+      currentLangSlug={currentLangSlug}
+      isDisabled={isOpenedReplayer || status === 'disabled'}
     />
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/LanguagePickerView.jsx b/services/app/apps/codebattle/assets/js/widgets/components/LanguagePickerView.jsx
index 12f711c26..1137c1ee1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/LanguagePickerView.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/LanguagePickerView.jsx
@@ -12,67 +12,73 @@ import LanguageIcon from './LanguageIcon';
 
 const defaultLanguages = Gon.getAsset('langs');
 
-  const customStyle = {
-    control: provided => ({
-      ...provided,
-      height: '33px',
-      minHeight: '31px',
-      minWidth: '210px',
-      borderRadius: '0.3rem',
-      backgroundColor: 'hsl(0, 0%, 100%)',
-    }),
-    indicatorsContainer: provided => ({
-      ...provided,
-      height: '29px',
-    }),
-    clearIndicator: provided => ({
-      ...provided,
-      padding: '5px',
-    }),
-    dropdownIndicator: provided => ({
-      ...provided,
-      padding: '5px',
-    }),
-    input: provided => ({
-      ...provided,
-      height: '21px',
-    }),
-  };
+const customStyle = {
+  control: (provided) => ({
+    ...provided,
+    height: '33px',
+    minHeight: '31px',
+    minWidth: '210px',
+    borderRadius: '0.3rem',
+    backgroundColor: 'hsl(0, 0%, 100%)',
+  }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    height: '29px',
+  }),
+  clearIndicator: (provided) => ({
+    ...provided,
+    padding: '5px',
+  }),
+  dropdownIndicator: (provided) => ({
+    ...provided,
+    padding: '5px',
+  }),
+  input: (provided) => ({
+    ...provided,
+    height: '21px',
+  }),
+};
 
-const LangTitle = ({ slug, name, version }) => (
-  <div className="d-inline-flex align-items-center text-nowrap">
-    <LanguageIcon lang={slug} className="ml-1" />
-    <span className="mx-1">{capitalize(name)}</span>
-    <span>{version}</span>
-  </div>
-);
+function LangTitle({ name, slug, version }) {
+  return (
+    <div className="d-inline-flex align-items-center text-nowrap">
+      <LanguageIcon className="ml-1" lang={slug} />
+      <span className="mx-1">{capitalize(name)}</span>
+      <span>{version}</span>
+    </div>
+  );
+}
 
 function LanguagePickerView({ changeLang, currentLangSlug, isDisabled }) {
   const languages = useSelector(selectors.editorLangsSelector);
 
   const langs = languages || defaultLanguages;
-  const [[currentLang], otherLangs] = useMemo(() => partition(langs, lang => lang.slug === currentLangSlug), [langs, currentLangSlug]);
-  const options = useMemo(() => otherLangs.map(lang => ({ label: <LangTitle {...lang} />, value: lang.name })), [otherLangs]);
+  const [[currentLang], otherLangs] = useMemo(
+    () => partition(langs, (lang) => lang.slug === currentLangSlug),
+    [langs, currentLangSlug],
+  );
+  const options = useMemo(
+    () => otherLangs.map((lang) => ({ label: <LangTitle {...lang} />, value: lang.name })),
+    [otherLangs],
+  );
   const defaultLang = useMemo(() => ({ label: <LangTitle {...currentLang} /> }), [currentLang]);
 
   if (isDisabled) {
     return (
-      <button className="btn btn-sm" type="button" disabled>
+      <button disabled className="btn btn-sm" type="button">
         <LangTitle {...currentLang} />
       </button>
     );
   }
 
   return (
-    <>
-      <Select
-        styles={customStyle}
-        className="guide-LanguagePicker"
-        defaultValue={defaultLang}
-        onChange={changeLang}
-        options={options}
-      />
-    </>
+    <Select
+      className="guide-LanguagePicker"
+      defaultValue={defaultLang}
+      options={options}
+      styles={customStyle}
+      onChange={changeLang}
+    />
   );
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Loading.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Loading.jsx
index 3218bc271..0da61fb16 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Loading.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Loading.jsx
@@ -2,21 +2,24 @@ import React from 'react';
 
 import ReactLoading from 'react-loading';
 
-const getSize = ({ small = false, adaptive = false }) => {
+const getSize = ({ adaptive = false, small = false }) => {
   switch (true) {
-    case adaptive: return 16;
-    case small: return 30;
-    default: return 50;
+    case adaptive:
+      return 16;
+    case small:
+      return 30;
+    default:
+      return 50;
   }
 };
 
-const Loading = params => {
+function Loading(params) {
   const size = getSize(params);
   return (
     <div className="d-flex my-0 py-1 justify-content-center">
-      <ReactLoading type="spin" color="#6c757d" height={size} width={size} />
+      <ReactLoading color="#6c757d" height={size} type="spin" width={size} />
     </div>
   );
-};
+}
 
 export default Loading;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Message.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Message.jsx
index 6a7c4d240..af235b482 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Message.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Message.jsx
@@ -5,15 +5,7 @@ import moment from 'moment';
 
 import MessageTag from './MessageTag';
 
-const Message = ({
-  text = '',
-  name = '',
-  userId,
-  type,
-  time,
-  meta,
-  displayMenu,
-}) => {
+function Message({ displayMenu, meta, name = '', text = '', time, type, userId }) {
   if (!text) {
     return null;
   }
@@ -66,30 +58,27 @@ const Message = ({
   return (
     <div className="d-flex align-items-baseline flex-wrap">
       <span
+        data-user-id={userId}
+        data-user-name={name}
         role="button"
         tabIndex={0}
         title={`Message (${name})`}
-        data-user-id={userId}
-        data-user-name={name}
-        onContextMenu={displayMenu}
         onClick={displayMenu}
+        onContextMenu={displayMenu}
         onKeyPress={displayMenu}
       >
         <MessageTag messageType={meta?.type} />
-        <span className="font-weight-bold">
-          {`${name}: `}
-        </span>
+        <span className="font-weight-bold">{`${name}: `}</span>
       </span>
-      <span className={cn(
-        'ml-1 text-break', {
-        'cb-private-text': meta?.type === 'private',
-      },
-      )}
+      <span
+        className={cn('ml-1 text-break', {
+          'cb-private-text': meta?.type === 'private',
+        })}
       >
         {parts.map((part, i) => renderMessagePart(part, i))}
       </span>
     </div>
   );
-};
+}
 
 export default Message;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Messages.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Messages.jsx
index 86fef25dd..825d84ae7 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Messages.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Messages.jsx
@@ -12,7 +12,7 @@ const getKey = (id, time, name) => {
   return `${time}-${name}`;
 };
 
-function Messages({ messages, displayMenu = () => {} }) {
+function Messages({ displayMenu = () => {}, messages }) {
   const listRef = useRef();
 
   const { stayScrolled /* , scrollBottom */ } = useStayScrolled(listRef);
@@ -23,33 +23,29 @@ function Messages({ messages, displayMenu = () => {} }) {
   }, [messages.length, stayScrolled]);
 
   return (
-    <>
-      <ul
-        ref={listRef}
-        className="overflow-auto pt-0 pl-3 pr-2 position-relative cb-messages-list flex-grow-1"
-      >
-        {messages.map(message => {
-          const {
-            id, userId, name, text, type, time, meta,
-          } = message;
-
-          const key = getKey(id, time, name);
-
-          return (
-            <Message
-              name={name}
-              userId={userId}
-              text={text}
-              key={key}
-              type={type}
-              time={time}
-              meta={meta}
-              displayMenu={displayMenu}
-            />
-          );
-        })}
-      </ul>
-    </>
+    <ul
+      ref={listRef}
+      className="overflow-auto pt-0 pl-3 pr-2 position-relative cb-messages-list flex-grow-1"
+    >
+      {messages.map((message) => {
+        const { id, meta, name, text, time, type, userId } = message;
+
+        const key = getKey(id, time, name);
+
+        return (
+          <Message
+            key={key}
+            displayMenu={displayMenu}
+            meta={meta}
+            name={name}
+            text={text}
+            time={time}
+            type={type}
+            userId={userId}
+          />
+        );
+      })}
+    </ul>
   );
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Modal.js b/services/app/apps/codebattle/assets/js/widgets/components/Modal.js
index 67f3b23f3..b1dce3f82 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Modal.js
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Modal.js
@@ -20,9 +20,6 @@ export default class Modal extends React.Component {
 
   render() {
     const { children } = this.props;
-    return createPortal(
-      children,
-      this.el,
-    );
+    return createPortal(children, this.el);
   }
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/PlayerLoading.jsx b/services/app/apps/codebattle/assets/js/widgets/components/PlayerLoading.jsx
index 3b94a653c..6eed24ba2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/PlayerLoading.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/PlayerLoading.jsx
@@ -2,11 +2,17 @@ import React from 'react';
 
 import ReactLoading from 'react-loading';
 
-const PlayerLoading = ({ small = false, show = false }) => {
+function PlayerLoading({ show = false, small = false }) {
   const size = small ? 30 : 50;
   return (
-    <ReactLoading className={`cb-player-loading ${!show && 'invisible'}`} type="spin" color="#6c757d" height={size} width={size} />
+    <ReactLoading
+      className={`cb-player-loading ${!show && 'invisible'}`}
+      color="#6c757d"
+      height={size}
+      type="spin"
+      width={size}
+    />
   );
-};
+}
 
 export default PlayerLoading;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.jsx b/services/app/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.jsx
index 9a2cbce41..a5bf7cda1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.jsx
@@ -5,23 +5,16 @@ import PropTypes from 'prop-types';
 import Overlay from 'react-bootstrap/Overlay';
 import Popover from 'react-bootstrap/Popover';
 
-function PopoverStickOnHover({
-  id,
-  delay,
-  onMouseEnter,
-  children,
-  component,
-  placement,
-}) {
+function PopoverStickOnHover({ children, component, delay, id, onMouseEnter, placement }) {
   const [showPopover, setShowPopover] = useState(false);
   const childNode = useRef(null);
   let setTimeoutConst = null;
 
   useEffect(() => () => {
-      if (setTimeoutConst) {
-        clearTimeout(setTimeoutConst);
-      }
-    });
+    if (setTimeoutConst) {
+      clearTimeout(setTimeoutConst);
+    }
+  });
 
   const handleMouseEnter = () => {
     setTimeoutConst = setTimeout(() => {
@@ -35,34 +28,31 @@ function PopoverStickOnHover({
     setShowPopover(false);
   };
 
-  const displayChild = React.Children.map(children, child => React.cloneElement(child, {
+  const displayChild = React.Children.map(children, (child) =>
+    React.cloneElement(child, {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      ref: node => {
+      ref: (node) => {
         childNode.current = node;
         const { ref } = child;
         if (typeof ref === 'function') {
           ref(node);
         }
       },
-    }))[0];
+    }),
+  )[0];
 
   return (
     <>
       {displayChild}
-      <Overlay
-        show={showPopover}
-        placement={placement}
-        target={childNode}
-        shouldUpdatePosition
-      >
+      <Overlay shouldUpdatePosition placement={placement} show={showPopover} target={childNode}>
         <Popover
+          id={id}
           trigger="click"
           onMouseEnter={() => {
             setShowPopover(true);
           }}
           onMouseLeave={handleMouseLeave}
-          id={id}
         >
           {component}
         </Popover>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/ResultIcon.jsx b/services/app/apps/codebattle/assets/js/widgets/components/ResultIcon.jsx
index 6d11a7d2d..08a4756a5 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/ResultIcon.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/ResultIcon.jsx
@@ -3,17 +3,14 @@ import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 
-const ResultIcon = ({ gameId, player1, player2 }) => {
+function ResultIcon({ gameId, player1, player2 }) {
   const tooltipId = `tooltip-${gameId}-${player1.id}`;
 
   if (player1.result === 'gave_up') {
     return (
-      <OverlayTrigger
-        overlay={<Tooltip id={tooltipId}>Player gave up</Tooltip>}
-        placement="left"
-      >
+      <OverlayTrigger overlay={<Tooltip id={tooltipId}>Player gave up</Tooltip>} placement="left">
         <span className="align-middle mr-1">
-          <i className="far fa-flag" aria-hidden="true" />
+          <i aria-hidden="true" className="far fa-flag" />
         </span>
       </OverlayTrigger>
     );
@@ -21,12 +18,9 @@ const ResultIcon = ({ gameId, player1, player2 }) => {
 
   if (player1.result === 'won' && player2.result !== 'gave_up') {
     return (
-      <OverlayTrigger
-        overlay={<Tooltip id={tooltipId}>Player won</Tooltip>}
-        placement="left"
-      >
+      <OverlayTrigger overlay={<Tooltip id={tooltipId}>Player won</Tooltip>} placement="left">
         <span className="align-middle mr-1">
-          <i className="fa fa-trophy text-warning" aria-hidden="true" />
+          <i aria-hidden="true" className="fa fa-trophy text-warning" />
         </span>
       </OverlayTrigger>
     );
@@ -37,6 +31,6 @@ const ResultIcon = ({ gameId, player1, player2 }) => {
       <i className="fa x-opacity-0">&nbsp;</i>
     </span>
   );
-};
+}
 
 export default ResultIcon;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Rooms.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Rooms.jsx
index fab3dd978..ab7107aa9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/Rooms.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/Rooms.jsx
@@ -14,26 +14,28 @@ export default function Rooms({ disabled }) {
   const activeRoom = useSelector(selectors.activeRoomSelector);
 
   return (
-    <>
-      <Dropdown as={ButtonGroup} title="" disabled={disabled}>
-        <Dropdown.Toggle className="rounded-top" split variant="secondary" id="dropdown-rooms" disabled={disabled}>
-          <span className="mr-2">{activeRoom.name}</span>
-        </Dropdown.Toggle>
+    <Dropdown as={ButtonGroup} disabled={disabled} title="">
+      <Dropdown.Toggle
+        split
+        className="rounded-top"
+        disabled={disabled}
+        id="dropdown-rooms"
+        variant="secondary"
+      >
+        <span className="mr-2">{activeRoom.name}</span>
+      </Dropdown.Toggle>
 
-        <Dropdown.Menu>
-          {
-            rooms.map(room => (
-              <Dropdown.Item
-                href="#"
-                key={room.targetUserId || room.name}
-                onSelect={() => dispatch(actions.setActiveRoom(room))}
-              >
-                {room.name}
-              </Dropdown.Item>
-            ))
-          }
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
+      <Dropdown.Menu>
+        {rooms.map((room) => (
+          <Dropdown.Item
+            key={room.targetUserId || room.name}
+            href="#"
+            onSelect={() => dispatch(actions.setActiveRoom(room))}
+          >
+            {room.name}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/SideScrollControls.jsx b/services/app/apps/codebattle/assets/js/widgets/components/SideScrollControls.jsx
index 8b456aed9..34da6db64 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/SideScrollControls.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/SideScrollControls.jsx
@@ -1,9 +1,4 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
@@ -53,9 +48,12 @@ function HorizontalScrollControls({ children }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleScroll = useCallback(event => {
-    setScrollLeft(event.currentTarget.scrollLeft);
-  }, [setScrollLeft]);
+  const handleScroll = useCallback(
+    (event) => {
+      setScrollLeft(event.currentTarget.scrollLeft);
+    },
+    [setScrollLeft],
+  );
 
   const handleScrollItemsRight = useCallback(() => {
     scrolledListRef.current.scrollBy({
@@ -69,51 +67,37 @@ function HorizontalScrollControls({ children }) {
     <>
       <div
         ref={leftButtonRef}
+        className={cn(className, 'cb-left-scroll-control', {
+          'd-flex': showLeftControl,
+          'd-none': !showLeftControl,
+        })}
         style={{ left: 0, zIndex: 1000 }}
-        className={cn(
-          className,
-          'cb-left-scroll-control',
-          {
-            'd-flex': showLeftControl,
-            'd-none': !showLeftControl,
-          },
-        )}
       >
         <button
-          type="button"
           className="btn border-0 rounded-circle p-2"
+          type="button"
           onClick={handleScrollItemsLeft}
         >
           <FontAwesomeIcon icon="chevron-left" />
         </button>
       </div>
-      <div
-        ref={scrolledListRef}
-        onScroll={handleScroll}
-        className="d-flex pb-2 overflow-auto"
-      >
+      <div ref={scrolledListRef} className="d-flex pb-2 overflow-auto" onScroll={handleScroll}>
         {children}
       </div>
       <div
         ref={rightButtonRef}
+        className={cn(className, 'cb-right-scroll-control', {
+          'd-flex': showRightControl,
+          'd-none': !showRightControl,
+        })}
         style={{ right: 0, zIndex: 1000 }}
-        className={cn(
-          className,
-          'cb-right-scroll-control',
-          {
-            'd-flex': showRightControl,
-            'd-none': !showRightControl,
-          },
-        )}
       >
         <button
-          type="button"
           className="btn border-0 rounded-circle p-2"
+          type="button"
           onClick={handleScrollItemsRight}
         >
-          <FontAwesomeIcon
-            icon="chevron-right"
-          />
+          <FontAwesomeIcon icon="chevron-right" />
         </button>
       </div>
     </>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/TournamentType.jsx b/services/app/apps/codebattle/assets/js/widgets/components/TournamentType.jsx
index 667d21d7c..b15f2962c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/TournamentType.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/TournamentType.jsx
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 function TournamentType({ type }) {
   if (type === 'individual') {
-    return (<FontAwesomeIcon icon="users" />);
+    return <FontAwesomeIcon icon="users" />;
   }
 
   if (type === 'team') {
@@ -26,12 +26,7 @@ function TournamentType({ type }) {
     );
   }
 
-  return (
-    <FontAwesomeIcon
-      title="Unknown tournament type"
-      icon="question-circle"
-    />
-  );
+  return <FontAwesomeIcon icon="question-circle" title="Unknown tournament type" />;
 }
 
 export default TournamentType;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserAchievements.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserAchievements.jsx
index 7e17f32fa..50fea688e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/UserAchievements.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/UserAchievements.jsx
@@ -2,48 +2,46 @@ import React from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
-const LangIcon = ({ size = 'md', lang }) => {
+function LangIcon({ lang, size = 'md' }) {
   const [width, height] = size === 'sm' ? [14, 14] : [65, 65];
   const margin = size === 'sm' ? 'm-0' : 'mr-1 mb-1';
   return (
     <img
       alt={lang}
-      title={lang}
-      width={width}
-      height={height}
       className={margin}
+      height={height}
       src={`/assets/images/achievements/${lang}.png`}
+      title={lang}
+      width={width}
     />
   );
-};
+}
 
-const renderPolyglotAchievement = languages => (
+const renderPolyglotAchievement = (languages) => (
   <div key="polyglot" className="cb-polyglot">
     <div className="d-flex h-75 flex-wrap align-items-center justify-content-around cb-polyglot-icons">
-      {languages.map(lang => (
+      {languages.map((lang) => (
         <LangIcon key={lang} lang={lang} size="sm" />
       ))}
     </div>
   </div>
 );
 
-const UserAchievements = ({ achievements }) => {
+function UserAchievements({ achievements }) {
   if (!isEmpty(achievements)) {
     return (
       <div className="d-flex justify-content-start flex-wrap mt-2">
-        {achievements.map(el => {
+        {achievements.map((el) => {
           const [name, languages] = el.split('?');
           if (name === 'win_games_with') {
             return renderPolyglotAchievement(languages.split('_'));
           }
-          return (
-            <LangIcon key={el} lang={el} />
-          );
+          return <LangIcon key={el} lang={el} />;
         })}
       </div>
     );
   }
   return '';
-};
+}
 
 export default UserAchievements;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx
index 625505bf4..b8c73aa86 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx
@@ -24,12 +24,12 @@ function UserPopoverContent({ user }) {
       .get(`/api/v1/user/${userId}/stats`, {
         signal: controller.signal,
       })
-      .then(response => {
+      .then((response) => {
         if (!controller.signal.aborted) {
           setStats(camelizeKeys(response.data));
         }
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
 
@@ -38,11 +38,15 @@ function UserPopoverContent({ user }) {
     };
   }, [dispatch, setStats, user.id]);
 
-  return <UserStats user={user} data={stats} />;
+  return <UserStats data={stats} user={user} />;
 }
 
 function UserInfo({
-  user, hideInfo = false, truncate = false, hideOnlineIndicator = false, loading = false,
+  hideInfo = false,
+  hideOnlineIndicator = false,
+  loading = false,
+  truncate = false,
+  user,
 }) {
   const { presenceList } = useSelector(selectors.lobbyDataSelector);
   const content = useMemo(() => <UserPopoverContent user={user} />, [user]);
@@ -62,27 +66,23 @@ function UserInfo({
     return (
       <div className={userClassName}>
         <UserName
-          user={user}
-          truncate={truncate}
-          isOnline={isOnline}
           hideOnlineIndicator={hideOnlineIndicator}
+          isOnline={isOnline}
+          truncate={truncate}
+          user={user}
         />
       </div>
     );
   }
 
   return (
-    <PopoverStickOnHover
-      id={`user-info-${user?.id}`}
-      placement="bottom-start"
-      component={content}
-    >
+    <PopoverStickOnHover component={content} id={`user-info-${user?.id}`} placement="bottom-start">
       <div className={userClassName}>
         <UserName
-          user={user}
-          truncate={truncate}
-          isOnline={isOnline}
           hideOnlineIndicator={hideOnlineIndicator}
+          isOnline={isOnline}
+          truncate={truncate}
+          user={user}
         />
       </div>
     </PopoverStickOnHover>
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
index 91a6538b9..ba0962636 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
@@ -28,38 +28,31 @@ const renderOnlineIndicator = (user, isOnline) => {
 
   return (
     <span>
-      <FontAwesomeIcon
-        icon={['fa', 'circle']}
-        className={onlineIndicatorClassName}
-      />
+      <FontAwesomeIcon className={onlineIndicatorClassName} icon={['fa', 'circle']} />
     </span>
   );
 };
 
-const UserName = ({
-  user, truncate, isOnline, hideOnlineIndicator,
-}) => (
-  <div className="d-flex align-items-baseline">
-    {!hideOnlineIndicator && renderOnlineIndicator(user, isOnline)}
-    <span className="d-flex align-items-center">
-      <LanguageIcon lang={user.lang || 'js'} />
-      <a
-        href={`/users/${user.id}`}
-        key={user.id}
-        className={cn('d-flex align-items-center', {
-          'text-danger': user.isAdmin,
-        })}
-      >
-        <p
-          className={`text-truncate m-0 ${
-              truncate ? 'x-username-truncated' : ''
-            }`}
+function UserName({ hideOnlineIndicator, isOnline, truncate, user }) {
+  return (
+    <div className="d-flex align-items-baseline">
+      {!hideOnlineIndicator && renderOnlineIndicator(user, isOnline)}
+      <span className="d-flex align-items-center">
+        <LanguageIcon lang={user.lang || 'js'} />
+        <a
+          key={user.id}
+          className={cn('d-flex align-items-center', {
+            'text-danger': user.isAdmin,
+          })}
+          href={`/users/${user.id}`}
         >
-          <u>{renderUserName(user)}</u>
-        </p>
-      </a>
-    </span>
-  </div>
+          <p className={`text-truncate m-0 ${truncate ? 'x-username-truncated' : ''}`}>
+            <u>{renderUserName(user)}</u>
+          </p>
+        </a>
+      </span>
+    </div>
   );
+}
 
 export default UserName;
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserStats.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserStats.jsx
index 19863f305..de47b012d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/UserStats.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/UserStats.jsx
@@ -4,7 +4,7 @@ import LanguageIcon from './LanguageIcon';
 import Loading from './Loading';
 import UserAchievements from './UserAchievements';
 
-const UserStats = ({ data, user: userInfo }) => {
+function UserStats({ data, user: userInfo }) {
   const avatarUrl = userInfo.avatarUrl || data?.user?.avatarUrl || '/assets/images/logo.svg';
   const name = userInfo.name || data?.user?.name || 'Jon Doe';
   const lang = userInfo.lang || data?.user?.lang || 'js';
@@ -14,10 +14,10 @@ const UserStats = ({ data, user: userInfo }) => {
         <div className="col d-flex align-items-center justify-content-between">
           <div className="d-flex align-items-center">
             <img
+              alt="User avatar"
               className="img-fluid rounded-lg"
-              style={{ maxHeight: '40px', width: '40px' }}
               src={avatarUrl}
-              alt="User avatar"
+              style={{ maxHeight: '40px', width: '40px' }}
             />
             <div className="d-flex flex-column ml-2">
               <div className="d-flex align-items-center">
@@ -28,11 +28,11 @@ const UserStats = ({ data, user: userInfo }) => {
               </div>
               <div className="d-flex justify-content-between align-items-baseline">
                 <div className="d-flex align-items-baseline">
-                  <img src="/assets/images/cup.svg" alt="rating" />
+                  <img alt="rating" src="/assets/images/cup.svg" />
                   <span className="ml-1">{data?.user?.rank || userInfo.rank || '####'}</span>
                 </div>
                 <div className="d-flex align-items-baseline ml-2">
-                  <img src="/assets/images/rating.svg" alt="rating" />
+                  <img alt="rating" src="/assets/images/rating.svg" />
                   <span className="ml-1">{data?.user?.rating || userInfo.rating || '####'}</span>
                 </div>
               </div>
@@ -56,13 +56,9 @@ const UserStats = ({ data, user: userInfo }) => {
           </div>
         </div>
       </div>
-      {!data ? (
-        <Loading small />
-      ) : (
-        <UserAchievements achievements={data.user.achievements} />
-      )}
+      {!data ? <Loading small /> : <UserAchievements achievements={data.user.achievements} />}
     </div>
   );
-};
+}
 
 export default UserStats;
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/editorSettingsByUserType.js b/services/app/apps/codebattle/assets/js/widgets/config/editorSettingsByUserType.js
index 2ee9cd7a9..306e80d22 100644
--- a/services/app/apps/codebattle/assets/js/widgets/config/editorSettingsByUserType.js
+++ b/services/app/apps/codebattle/assets/js/widgets/config/editorSettingsByUserType.js
@@ -7,13 +7,13 @@ export const editorBtnStatuses = {
 };
 
 const defaultSettings = {
-    editable: false,
-    showControlBtns: false,
-    checkBtnStatus: editorBtnStatuses.disabled,
-    resetBtnStatus: editorBtnStatuses.disabled,
-    langPickerStatus: editorBtnStatuses.disabled,
-    giveUpBtnStatus: editorBtnStatuses.disabled,
-    modeBtnsStatus: editorBtnStatuses.disabled,
+  editable: false,
+  showControlBtns: false,
+  checkBtnStatus: editorBtnStatuses.disabled,
+  resetBtnStatus: editorBtnStatuses.disabled,
+  langPickerStatus: editorBtnStatuses.disabled,
+  giveUpBtnStatus: editorBtnStatuses.disabled,
+  modeBtnsStatus: editorBtnStatuses.disabled,
 };
 
 export const editorSettingsByUserType = {
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/editorUserTypes.js b/services/app/apps/codebattle/assets/js/widgets/config/editorUserTypes.js
index d3b733276..7a8d432b8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/config/editorUserTypes.js
+++ b/services/app/apps/codebattle/assets/js/widgets/config/editorUserTypes.js
@@ -3,7 +3,7 @@ export default {
   player: 'player',
   opponent: 'opponent',
 
-// TODO: (feature) add teammates and clanmates to components
+  // TODO: (feature) add teammates and clanmates to components
   // teammate: 'teammate',
   // clanmate: 'clanmate',
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/hashLinkNames.js b/services/app/apps/codebattle/assets/js/widgets/config/hashLinkNames.js
index 59be602b6..62ae17b0e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/config/hashLinkNames.js
+++ b/services/app/apps/codebattle/assets/js/widgets/config/hashLinkNames.js
@@ -1,6 +1,6 @@
 export default {
-    default: '#lobby',
-    lobby: '#lobby',
-    tournaments: '#tournaments',
-    completedGames: '#completedGames',
+  default: '#lobby',
+  lobby: '#lobby',
+  tournaments: '#tournaments',
+  completedGames: '#completedGames',
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/levelRatio.js b/services/app/apps/codebattle/assets/js/widgets/config/levelRatio.js
index 8bd46ec43..6fb8c6328 100644
--- a/services/app/apps/codebattle/assets/js/widgets/config/levelRatio.js
+++ b/services/app/apps/codebattle/assets/js/widgets/config/levelRatio.js
@@ -1,6 +1,6 @@
 export default {
-    elementary: 0,
-    easy: 1,
-    medium: 2,
-    hard: 3,
+  elementary: 0,
+  easy: 1,
+  medium: 2,
+  hard: 3,
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/solutionTypes.js b/services/app/apps/codebattle/assets/js/widgets/config/solutionTypes.js
index 28679b643..f32a1d532 100644
--- a/services/app/apps/codebattle/assets/js/widgets/config/solutionTypes.js
+++ b/services/app/apps/codebattle/assets/js/widgets/config/solutionTypes.js
@@ -1,6 +1,6 @@
 export default {
-    complete: 'complete',
-    incomplete: 'incomplete',
-    waitingModerator: 'waiting_moderator',
-    baned: 'baned',
+  complete: 'complete',
+  incomplete: 'incomplete',
+  waitingModerator: 'waiting_moderator',
+  baned: 'baned',
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/config/tournament.js b/services/app/apps/codebattle/assets/js/widgets/config/tournament.js
index cd48b58a9..395cae5c2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/config/tournament.js
+++ b/services/app/apps/codebattle/assets/js/widgets/config/tournament.js
@@ -1,7 +1,7 @@
 export default {
-   loading: 'loading',
-   active: 'active',
-   waitingParticipants: 'waiting_participants',
-   cancelled: 'canceled',
-   finished: 'finished',
+  loading: 'loading',
+  active: 'active',
+  waitingParticipants: 'waiting_participants',
+  cancelled: 'canceled',
+  finished: 'finished',
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/index.jsx b/services/app/apps/codebattle/assets/js/widgets/index.jsx
index 7a530b2f5..dfc427f71 100755
--- a/services/app/apps/codebattle/assets/js/widgets/index.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/index.jsx
@@ -3,19 +3,31 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import {
- Game, Builder, Lobby, UsersRating, UserPage, SettingsPage, RegistrationPage, Invites, StairwayGamePage, TournamentPage,
+  Game,
+  Builder,
+  Lobby,
+  UsersRating,
+  UserPage,
+  SettingsPage,
+  RegistrationPage,
+  Invites,
+  StairwayGamePage,
+  TournamentPage,
 } from './App';
 
 const Heatmap = React.lazy(() => import('./pages/profile/Heatmap'));
 
-export const renderInvitesWidget = domElement => createRoot(domElement).render(<Invites />);
-export const renderGameWidget = domElement => createRoot(domElement).render(<Game />);
-export const renderBuilderWidget = domElement => createRoot(domElement).render(<Builder />);
-export const renderLobby = domElement => createRoot(domElement).render(<Lobby />);
-export const renderHeatmapWidget = domElement => createRoot(domElement).render(<Heatmap />);
-export const renderUsersRating = domElement => createRoot(domElement).render(<UsersRating />);
-export const renderUserPage = domElement => createRoot(domElement).render(<UserPage />);
-export const renderSettingPage = domElement => createRoot(domElement).render(<SettingsPage />);
-export const renderRegistrationPage = domElement => createRoot(domElement).render(<RegistrationPage />);
-export const renderStairwayGamePage = domElement => createRoot(domElement).render(<StairwayGamePage />);
-export const renderTournamentPage = domElement => createRoot(domElement).render(<TournamentPage />);
+export const renderInvitesWidget = (domElement) => createRoot(domElement).render(<Invites />);
+export const renderGameWidget = (domElement) => createRoot(domElement).render(<Game />);
+export const renderBuilderWidget = (domElement) => createRoot(domElement).render(<Builder />);
+export const renderLobby = (domElement) => createRoot(domElement).render(<Lobby />);
+export const renderHeatmapWidget = (domElement) => createRoot(domElement).render(<Heatmap />);
+export const renderUsersRating = (domElement) => createRoot(domElement).render(<UsersRating />);
+export const renderUserPage = (domElement) => createRoot(domElement).render(<UserPage />);
+export const renderSettingPage = (domElement) => createRoot(domElement).render(<SettingsPage />);
+export const renderRegistrationPage = (domElement) =>
+  createRoot(domElement).render(<RegistrationPage />);
+export const renderStairwayGamePage = (domElement) =>
+  createRoot(domElement).render(<StairwayGamePage />);
+export const renderTournamentPage = (domElement) =>
+  createRoot(domElement).render(<TournamentPage />);
diff --git a/services/app/apps/codebattle/assets/js/widgets/lib/player.js b/services/app/apps/codebattle/assets/js/widgets/lib/player.js
index 72fc80196..1041749e8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/lib/player.js
+++ b/services/app/apps/codebattle/assets/js/widgets/lib/player.js
@@ -6,17 +6,13 @@ import PlaybookStatusCodes from '../config/playbookStatusCodes';
 
 const snapshotStep = 400;
 
-const updatePlayers = (players, params) => (
-  players.map(player => (player.id === params.id
-    ? { ...player, ...params }
-    : player))
-);
-
-const updatePlayersGameResult = (players, firstPlayer, secondPlayer) => (
-  players.map(player => ((player.id === firstPlayer.id)
-    ? { ...player, ...firstPlayer }
-    : { ...player, ...secondPlayer }))
-);
+const updatePlayers = (players, params) =>
+  players.map((player) => (player.id === params.id ? { ...player, ...params } : player));
+
+const updatePlayersGameResult = (players, firstPlayer, secondPlayer) =>
+  players.map((player) =>
+    player.id === firstPlayer.id ? { ...player, ...firstPlayer } : { ...player, ...secondPlayer },
+  );
 
 export const { parse } = JSON;
 
@@ -79,9 +75,7 @@ const createFinalRecord = (index, record, params) => {
 };
 
 const reduceOriginalRecords = (acc, record, index) => {
-  const {
-    players, records, chat: chatState, type: playbookType,
-  } = acc;
+  const { chat: chatState, players, records, type: playbookType } = acc;
   const { messages, users } = chatState;
 
   const { type } = record;
@@ -90,10 +84,11 @@ const reduceOriginalRecords = (acc, record, index) => {
     const { editorText: prevEditorText } = find(players, { id: record.id });
 
     const diff = getDiff(prevEditorText, record.editorText);
-    const newPlayers = updatePlayers(
-      players,
-      { id: record.id, editorText: record.editorText, editorLang: record.editorLang },
-    );
+    const newPlayers = updatePlayers(players, {
+      id: record.id,
+      editorText: record.editorText,
+      editorLang: record.editorLang,
+    });
     const data = {
       type,
       userId: record.id,
@@ -108,15 +103,16 @@ const reduceOriginalRecords = (acc, record, index) => {
   }
 
   if (type === 'update_editor_data' && playbookType === PlaybookStatusCodes.stored) {
-    const { editorText, editorLang: prevEditorLang } = find(players, { id: record.id });
+    const { editorLang: prevEditorLang, editorText } = find(players, { id: record.id });
     const { diff } = record;
 
     const newEditorText = getText(editorText, diff);
     const editorLang = diff.nextLang || prevEditorLang;
-    const newPlayers = updatePlayers(
-      players,
-      { id: record.id, editorText: newEditorText, editorLang },
-    );
+    const newPlayers = updatePlayers(players, {
+      id: record.id,
+      editorText: newEditorText,
+      editorLang,
+    });
     const data = {
       type,
       userId: record.id,
@@ -187,7 +183,7 @@ const reduceOriginalRecords = (acc, record, index) => {
   }
 
   if (type === 'leave_chat') {
-    const newUsers = users.filter(user => user.id !== record.id);
+    const newUsers = users.filter((user) => user.id !== record.id);
     const newChatState = { users: newUsers, messages };
     const data = {
       type,
@@ -236,9 +232,7 @@ const reduceOriginalRecords = (acc, record, index) => {
   return { ...acc, records: [...records, newRecord] };
 };
 
-export const addRecord = ({
-  records, players, type, payload,
-}) => {
+export const addRecord = ({ payload, players, records, type }) => {
   if (!records) {
     return { records, players };
   }
@@ -247,15 +241,12 @@ export const addRecord = ({
 
   switch (type) {
     case 'update_editor_data': {
-      const { userId, langSlug, editorText } = payload;
+      const { editorText, langSlug, userId } = payload;
       const { editorText: prevEditorText } = find(players, { id: userId });
 
       const diff = getDiff(prevEditorText, editorText);
 
-      const newPlayers = updatePlayers(
-        players,
-        { id: userId, editorText, editorLang: langSlug },
-      );
+      const newPlayers = updatePlayers(players, { id: userId, editorText, editorLang: langSlug });
       const data = {
         type,
         userId,
@@ -295,7 +286,7 @@ export const addRecord = ({
   }
 };
 
-export const getFinalState = ({ recordId, records, initRecords }) => {
+export const getFinalState = ({ initRecords, recordId, records }) => {
   const gameInitialState = {
     players: initRecords,
     chat: {
@@ -318,7 +309,7 @@ export const getFinalState = ({ recordId, records, initRecords }) => {
 export const resolveDiffs = (playbook, type) => {
   const [initRecords, restRecords] = partition(
     playbook.records,
-    record => record.type === 'init',
+    (record) => record.type === 'init',
   );
 
   // record types "init"
@@ -332,11 +323,12 @@ export const resolveDiffs = (playbook, type) => {
     },
   };
 
-  const finalGameState = restRecords
-    .reduce(reduceOriginalRecords, initGameState);
+  const finalGameState = restRecords.reduce(reduceOriginalRecords, initGameState);
 
   const finalPlaybook = {
-    ...playbook, initRecords, ...finalGameState,
+    ...playbook,
+    initRecords,
+    ...finalGameState,
   };
   return finalPlaybook;
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/lib/sound.js b/services/app/apps/codebattle/assets/js/widgets/lib/sound.js
index c0417f9b4..2dcb08223 100644
--- a/services/app/apps/codebattle/assets/js/widgets/lib/sound.js
+++ b/services/app/apps/codebattle/assets/js/widgets/lib/sound.js
@@ -24,11 +24,12 @@ const soundSettings = Gon.getAsset('current_user').sound_settings;
 const soundType = soundSettings.type;
 const defaultSoundLevel = soundSettings.level * 0.1;
 
-const audio = (type = soundType, volume = defaultSoundLevel) => new Howl({
-  src: audioPaths[type],
-  sprite: audioConfigs[type]?.sprite,
-  volume,
-});
+const audio = (type = soundType, volume = defaultSoundLevel) =>
+  new Howl({
+    src: audioPaths[type],
+    sprite: audioConfigs[type]?.sprite,
+    volume,
+  });
 
 const sound = {
   play: (type, soundLevel) => {
@@ -44,7 +45,7 @@ const sound = {
   },
 };
 
-const createSound = slug => ({
+const createSound = (slug) => ({
   play: (type, soundLevel) => {
     const soundEffect = audio(slug, soundLevel);
     soundEffect.play(type);
diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/editor.js b/services/app/apps/codebattle/assets/js/widgets/machines/editor.js
index f37de5cec..607d822b5 100644
--- a/services/app/apps/codebattle/assets/js/widgets/machines/editor.js
+++ b/services/app/apps/codebattle/assets/js/widgets/machines/editor.js
@@ -1,9 +1,6 @@
 import { assign } from 'xstate';
 
-import {
-  editorBtnStatuses,
-  editorSettingsByUserType,
-} from '../config/editorSettingsByUserType';
+import { editorBtnStatuses, editorSettingsByUserType } from '../config/editorSettingsByUserType';
 import editorUserTypes from '../config/editorUserTypes';
 import sound from '../lib/sound';
 
@@ -47,11 +44,12 @@ const settingsByState = {
 };
 
 // const initContextByState = state => assign(({ userId }) => ({ ...settingsByState[state], userId }));
-const initContextByState = state => assign(({ userId, type }) => ({
-  ...editorSettingsByUserType[type],
-  ...settingsByState[state],
-  userId,
-}));
+const initContextByState = (state) =>
+  assign(({ type, userId }) => ({
+    ...editorSettingsByUserType[type],
+    ...settingsByState[state],
+    userId,
+  }));
 
 const initActiveEditor = assign(() => ({ editorState: 'active' }));
 const initTestingEditor = assign(() => ({ editorState: 'testing' }));
@@ -89,7 +87,11 @@ const editor = {
       after: {
         50000: {
           target: 'idle',
-          actions: ['soundFailureChecking', 'handleTimeoutFailureChecking', 'openCheckResultOutput'],
+          actions: [
+            'soundFailureChecking',
+            'handleTimeoutFailureChecking',
+            'openCheckResultOutput',
+          ],
         },
       },
       on: {
@@ -106,9 +108,9 @@ const editor = {
 
 export const config = {
   actions: {
-    userSendSolution: () => { },
-    handleTimeoutFailureChecking: () => { },
-    openCheckResultOutput: ctx => {
+    userSendSolution: () => {},
+    handleTimeoutFailureChecking: () => {},
+    openCheckResultOutput: (ctx) => {
       if (ctx.type === editorUserTypes.currentUser) {
         document.getElementById('leftOutput-tab').click();
       }
diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/game.js b/services/app/apps/codebattle/assets/js/widgets/machines/game.js
index c961d5c32..e707ffc91 100644
--- a/services/app/apps/codebattle/assets/js/widgets/machines/game.js
+++ b/services/app/apps/codebattle/assets/js/widgets/machines/game.js
@@ -133,7 +133,10 @@ const machine = {
           ),
           on: {
             JOIN: { target: 'connected', actions: ['handleReconnection'] },
-            SHOW_ERROR_MESSAGE: { target: 'disconnectedWithMessage', actions: ['handleDisconnection'] },
+            SHOW_ERROR_MESSAGE: {
+              target: 'disconnectedWithMessage',
+              actions: ['handleDisconnection'],
+            },
           },
         },
         disconnectedWithMessage: {
@@ -287,9 +290,9 @@ export const config = {
       throw new Error(`Unexpected behavior (payload: ${JSON.stringify(payload)})`);
     },
     // network actions
-    handleFailureJoin: () => { },
-    handleDisconnection: () => { },
-    handleReconnection: () => { },
+    handleFailureJoin: () => {},
+    handleDisconnection: () => {},
+    handleReconnection: () => {},
 
     // game actions
     soundWin: () => {
@@ -304,7 +307,7 @@ export const config = {
     soundTournamentRoundCreated: () => {
       sound.play('round_created');
     },
-    soundRematchUpdateStatus: () => { },
+    soundRematchUpdateStatus: () => {},
 
     // replayer actions
     toggleSpeedMode: assign({
diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/selectors.js b/services/app/apps/codebattle/assets/js/widgets/machines/selectors.js
index 9fa734451..e7b7a4dc2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/machines/selectors.js
+++ b/services/app/apps/codebattle/assets/js/widgets/machines/selectors.js
@@ -1,7 +1,7 @@
 import { networkMachineStates, replayerMachineStates, roomMachineStates } from './game';
 import { taskMachineStates } from './task';
 
-const stateSelector = state => state;
+const stateSelector = (state) => state;
 
 export const roomStateSelector = stateSelector;
 
@@ -9,37 +9,40 @@ export const taskStateSelector = stateSelector;
 
 export const editorStateSelector = stateSelector;
 
-export const inPreviewRoomSelector = state => state.matches({ room: roomMachineStates.preview });
+export const inPreviewRoomSelector = (state) => state.matches({ room: roomMachineStates.preview });
 
-export const inTestingRoomSelector = state => state.matches({ room: roomMachineStates.testing });
+export const inTestingRoomSelector = (state) => state.matches({ room: roomMachineStates.testing });
 
-export const isGameActiveSelector = state => state.matches({ room: roomMachineStates.active });
+export const isGameActiveSelector = (state) => state.matches({ room: roomMachineStates.active });
 
-export const isGameOverSelector = state => state.matches({ room: roomMachineStates.gameOver });
+export const isGameOverSelector = (state) => state.matches({ room: roomMachineStates.gameOver });
 
-export const inBuilderRoomSelector = state => state.matches({ room: roomMachineStates.builder });
+export const inBuilderRoomSelector = (state) => state.matches({ room: roomMachineStates.builder });
 
-export const inWaitingRoomSelector = state => state.matches({ room: roomMachineStates.waiting });
+export const inWaitingRoomSelector = (state) => state.matches({ room: roomMachineStates.waiting });
 
-export const openedReplayerSelector = state => state.matches({ replayer: replayerMachineStates.on });
+export const openedReplayerSelector = (state) =>
+  state.matches({ replayer: replayerMachineStates.on });
 
-export const gameRoomKeySelector = () => ('game');
+export const gameRoomKeySelector = () => 'game';
 
-export const isInvalidStateTaskSelector = state => state.matches(taskMachineStates.invalid);
+export const isInvalidStateTaskSelector = (state) => state.matches(taskMachineStates.invalid);
 
-export const isIdleStateTaskSelector = state => state.matches(taskMachineStates.idle);
+export const isIdleStateTaskSelector = (state) => state.matches(taskMachineStates.idle);
 
-export const isSavedStateTaskSelector = state => state.matches(taskMachineStates.saved);
+export const isSavedStateTaskSelector = (state) => state.matches(taskMachineStates.saved);
 
-export const isTaskAssertsReadySelector = state => [taskMachineStates.ready, taskMachineStates.saved].some(state.matches);
+export const isTaskAssertsReadySelector = (state) =>
+  [taskMachineStates.ready, taskMachineStates.saved].some(state.matches);
 
-export const isTaskPrepareSavingSelector = state => state.matches(taskMachineStates.prepareSaving);
+export const isTaskPrepareSavingSelector = (state) =>
+  state.matches(taskMachineStates.prepareSaving);
 
-export const isTaskPrepareTestingSelector = state => state.matches(taskMachineStates.prepareTesting);
+export const isTaskPrepareTestingSelector = (state) =>
+  state.matches(taskMachineStates.prepareTesting);
 
-export const isTaskAssertsFormingSelector = state => [
-  taskMachineStates.prepareSaving,
-  taskMachineStates.prepareTesting,
-].some(state.matches);
+export const isTaskAssertsFormingSelector = (state) =>
+  [taskMachineStates.prepareSaving, taskMachineStates.prepareTesting].some(state.matches);
 
-export const isDisconnectedWithMessageSelector = state => state.matches({ network: networkMachineStates.disconnectedWithMessage });
+export const isDisconnectedWithMessageSelector = (state) =>
+  state.matches({ network: networkMachineStates.disconnectedWithMessage });
diff --git a/services/app/apps/codebattle/assets/js/widgets/machines/task.js b/services/app/apps/codebattle/assets/js/widgets/machines/task.js
index 94be7984b..2254fc992 100644
--- a/services/app/apps/codebattle/assets/js/widgets/machines/task.js
+++ b/services/app/apps/codebattle/assets/js/widgets/machines/task.js
@@ -33,11 +33,10 @@ export const mapStateToValidationStatus = {
   [states.prepareTesting]: validationStatuses.validation,
 };
 
-export const getGeneratorStatus = (templateState, current) => (
+export const getGeneratorStatus = (templateState, current) =>
   templateState === taskTemplatesStates.none
     ? validationStatuses.none
-    : mapStateToValidationStatus[current.value]
-);
+    : mapStateToValidationStatus[current.value];
 
 const machine = {
   id: 'task',
@@ -106,12 +105,12 @@ export const config = {
     isSaved: (_ctx, { payload }) => payload.state !== taskStateCodes.blank,
   },
   actions: {
-    openTesting: () => { },
-    saveTask: () => { },
-    showTaskSaveConfirmation: () => { },
-    onSuccess: () => { },
-    onFailure: () => { },
-    onError: () => { },
+    openTesting: () => {},
+    saveTask: () => {},
+    showTaskSaveConfirmation: () => {},
+    onSuccess: () => {},
+    onFailure: () => {},
+    onError: () => {},
     handleError: assign({
       errorMessage: (_ctx, { payload }) => payload.message,
     }),
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Chat.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Chat.js
index 6bd47394c..248f6099c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Chat.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Chat.js
@@ -15,10 +15,11 @@ export const pushCommandTypes = {
   cleanBanned: 'clead_banned',
 };
 
-const establishChat = () => dispatch => {
-  const camelizeKeysAndDispatch = actionCreator => data => dispatch(actionCreator(camelizeKeys(data)));
+const establishChat = () => (dispatch) => {
+  const camelizeKeysAndDispatch = (actionCreator) => (data) =>
+    dispatch(actionCreator(camelizeKeys(data)));
 
-  channel.join().receive('ok', data => {
+  channel.join().receive('ok', (data) => {
     const page = getChatName('page');
     const greetingMessage = getSystemMessage({
       text: `Joined channel: ${capitalize(page)}`,
@@ -58,7 +59,7 @@ const establishChat = () => dispatch => {
   return clearChatListeners;
 };
 
-export const connectToChat = () => dispatch => {
+export const connectToChat = () => (dispatch) => {
   if (!isRecord) {
     const clearChatConnection = establishChat()(dispatch);
 
@@ -68,14 +69,12 @@ export const connectToChat = () => dispatch => {
   return () => {};
 };
 
-export const addMessage = payload => {
+export const addMessage = (payload) => {
   channel
     .push('chat:add_msg', decamelizeKeys(payload, { separator: '_' }))
-    .receive('error', error => console.error(error));
+    .receive('error', (error) => console.error(error));
 };
 
-export const pushCommand = command => {
-  channel
-    .push('chat:command', command)
-    .receive('error', error => console.error(error));
+export const pushCommand = (command) => {
+  channel.push('chat:command', command).receive('error', (error) => console.error(error));
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Game.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Game.js
index 34fb8f76a..2f16ca998 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Game.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Game.js
@@ -10,13 +10,14 @@ import GameStateCodes from '../config/gameStateCodes';
 import PlaybookStatusCodes from '../config/playbookStatusCodes';
 import { taskStateCodes } from '../config/task';
 import userTypes from '../config/userTypes';
-import {
-  parse, getFinalState, getText, resolveDiffs,
-} from '../lib/player';
+import { parse, getFinalState, getText, resolveDiffs } from '../lib/player';
 import * as selectors from '../selectors';
 import { actions, redirectToNewGame } from '../slices';
 import {
- taskTemplatesStates, labelTaskParamsWithIds, MAX_NAME_LENGTH, MIN_NAME_LENGTH,
+  taskTemplatesStates,
+  labelTaskParamsWithIds,
+  MAX_NAME_LENGTH,
+  MIN_NAME_LENGTH,
 } from '../utils/builder';
 import {
   getGamePlayers,
@@ -33,11 +34,10 @@ const isRecord = Gon.getAsset('is_record');
 const channelName = `game:${gameId}`;
 const channel = !isRecord && gameId ? socket.channel(channelName) : null;
 
-const camelizeKeysAndDispatch = (dispatch, actionCreator) => data => (
-  dispatch(actionCreator(camelizeKeys(data)))
-);
+const camelizeKeysAndDispatch = (dispatch, actionCreator) => (data) =>
+  dispatch(actionCreator(camelizeKeys(data)));
 
-const initEditors = dispatch => (playbookStatusCode, players) => {
+const initEditors = (dispatch) => (playbookStatusCode, players) => {
   const isHistory = playbookStatusCode === PlaybookStatusCodes.stored;
   const updateEditorTextAction = isHistory
     ? actions.updateEditorTextHistory
@@ -46,45 +46,36 @@ const initEditors = dispatch => (playbookStatusCode, players) => {
     ? actions.updateExecutionOutputHistory
     : actions.updateExecutionOutput;
 
-  players.forEach(player => {
+  players.forEach((player) => {
     const editorData = getPlayersText(player);
     const executionOutputData = getPlayersExecutionData(player);
 
-    dispatch(
-      updateEditorTextAction(editorData),
-    );
+    dispatch(updateEditorTextAction(editorData));
 
-    dispatch(
-      updateExecutionOutputAction(executionOutputData),
-    );
+    dispatch(updateExecutionOutputAction(executionOutputData));
   });
 };
 
-const updateStore = dispatch => ({
-  firstPlayer,
-  secondPlayer,
-  task,
-  langs,
-  gameStatus,
-  playbookStatusCode,
-}) => {
-  const players = getGamePlayers([firstPlayer, secondPlayer]);
+const updateStore =
+  (dispatch) =>
+  ({ firstPlayer, gameStatus, langs, playbookStatusCode, secondPlayer, task }) => {
+    const players = getGamePlayers([firstPlayer, secondPlayer]);
 
-  dispatch(actions.setLangs({ langs }));
-  dispatch(actions.updateGamePlayers({ players }));
+    dispatch(actions.setLangs({ langs }));
+    dispatch(actions.updateGamePlayers({ players }));
 
-  initEditors(dispatch)(playbookStatusCode, players);
+    initEditors(dispatch)(playbookStatusCode, players);
 
-  if (task) {
-    dispatch(actions.setGameTask({ task }));
-  }
+    if (task) {
+      dispatch(actions.setGameTask({ task }));
+    }
 
-  if (gameStatus) {
-    dispatch(actions.updateGameStatus(gameStatus));
-  }
-};
+    if (gameStatus) {
+      dispatch(actions.updateGameStatus(gameStatus));
+    }
+  };
 
-const initStoredGame = dispatch => data => {
+const initStoredGame = (dispatch) => (data) => {
   const mode = GameRoomModes.history;
 
   const gameStatus = {
@@ -106,14 +97,14 @@ const initStoredGame = dispatch => data => {
   dispatch(actions.updateChatData(data.chat));
 };
 
-const initPlaybook = dispatch => data => {
+const initPlaybook = (dispatch) => (data) => {
   initEditors(dispatch)(PlaybookStatusCodes.stored, data.players);
 
   dispatch(actions.loadPlaybook(data));
 };
 
 const initGameChannel = (dispatch, machine, currentChannel) => {
-  const onJoinFailure = payload => {
+  const onJoinFailure = (payload) => {
     machine.send('REJECT_LOADING_GAME', { payload });
     machine.send('FAILURE_JOIN', { payload });
     window.location.reload();
@@ -123,13 +114,13 @@ const initGameChannel = (dispatch, machine, currentChannel) => {
     machine.send('FAILURE');
   });
 
-  const onJoinSuccess = response => {
+  const onJoinSuccess = (response) => {
     const data = camelizeKeys(response);
 
     const {
+      langs,
       players: [firstPlayer, secondPlayer],
       task,
-      langs,
     } = data;
 
     const gameStatus = getGameStatus(data);
@@ -143,33 +134,34 @@ const initGameChannel = (dispatch, machine, currentChannel) => {
       playbookStatusCode: PlaybookStatusCodes.active,
     });
   };
-  currentChannel
-    .join()
-    .receive('ok', onJoinSuccess)
-    .receive('error', onJoinFailure);
+  currentChannel.join().receive('ok', onJoinSuccess).receive('error', onJoinFailure);
 };
 
-export const updateEditorText = (editorText, langSlug = null) => (dispatch, getState) => {
-  const state = getState();
-  const userId = selectors.currentUserIdSelector(state);
-  const currentLangSlug = langSlug || selectors.userLangSelector(state)(userId);
-  dispatch(actions.updateEditorText({ userId, editorText, langSlug: currentLangSlug }));
-};
+export const updateEditorText =
+  (editorText, langSlug = null) =>
+  (dispatch, getState) => {
+    const state = getState();
+    const userId = selectors.currentUserIdSelector(state);
+    const currentLangSlug = langSlug || selectors.userLangSelector(state)(userId);
+    dispatch(actions.updateEditorText({ userId, editorText, langSlug: currentLangSlug }));
+  };
 
-export const sendEditorText = (editorText, langSlug = null) => (dispatch, getState) => {
-  const state = getState();
-  const userId = selectors.currentUserIdSelector(state);
-  const currentLangSlug = langSlug || selectors.userLangSelector(state)(userId);
+export const sendEditorText =
+  (editorText, langSlug = null) =>
+  (dispatch, getState) => {
+    const state = getState();
+    const userId = selectors.currentUserIdSelector(state);
+    const currentLangSlug = langSlug || selectors.userLangSelector(state)(userId);
 
-  dispatch(actions.updateEditorText({ userId, editorText, langSlug: currentLangSlug }));
+    dispatch(actions.updateEditorText({ userId, editorText, langSlug: currentLangSlug }));
 
-  channel.push('editor:data', {
-    editor_text: editorText,
-    lang_slug: currentLangSlug,
-  });
-};
+    channel.push('editor:data', {
+      editor_text: editorText,
+      lang_slug: currentLangSlug,
+    });
+  };
 
-export const sendEditorCursorPosition = offset => {
+export const sendEditorCursorPosition = (offset) => {
   channel.push('editor:cursor_position', { offset });
 };
 
@@ -196,14 +188,14 @@ export const sendAcceptToRematch = () => {
   channel.push('rematch:accept_offer', {});
 };
 
-export const sendEditorLang = currentLangSlug => (dispatch, getState) => {
+export const sendEditorLang = (currentLangSlug) => (dispatch, getState) => {
   const state = getState();
   const userId = selectors.currentUserIdSelector(state);
 
   dispatch(actions.updateEditorLang({ userId, currentLangSlug }));
 };
 
-export const updateCurrentLangAndSetTemplate = langSlug => (dispatch, getState) => {
+export const updateCurrentLangAndSetTemplate = (langSlug) => (dispatch, getState) => {
   const state = getState();
   const langs = selectors.editorLangsSelector(state) || defaultLanguages;
   const currentText = selectors.currentPlayerTextByLangSelector(langSlug)(state);
@@ -212,7 +204,7 @@ export const updateCurrentLangAndSetTemplate = langSlug => (dispatch, getState)
   dispatch(updateEditorText(textToSet, langSlug));
 };
 
-export const sendCurrentLangAndSetTemplate = langSlug => (dispatch, getState) => {
+export const sendCurrentLangAndSetTemplate = (langSlug) => (dispatch, getState) => {
   const state = getState();
   const langs = selectors.editorLangsSelector(state) || defaultLanguages;
   const currentText = selectors.currentPlayerTextByLangSelector(langSlug)(state);
@@ -221,14 +213,14 @@ export const sendCurrentLangAndSetTemplate = langSlug => (dispatch, getState) =>
   dispatch(sendEditorText(textToSet, langSlug));
 };
 
-export const resetTextToTemplate = langSlug => (dispatch, getState) => {
+export const resetTextToTemplate = (langSlug) => (dispatch, getState) => {
   const state = getState();
   const langs = selectors.editorLangsSelector(state) || defaultLanguages;
   const { solutionTemplate: template } = find(langs, { slug: langSlug });
   dispatch(updateEditorText(template, langSlug));
 };
 
-export const resetTextToTemplateAndSend = langSlug => (dispatch, getState) => {
+export const resetTextToTemplateAndSend = (langSlug) => (dispatch, getState) => {
   const state = getState();
   const langs = selectors.editorLangsSelector(state) || defaultLanguages;
   const { solutionTemplate: template } = find(langs, { slug: langSlug });
@@ -238,15 +230,15 @@ export const resetTextToTemplateAndSend = langSlug => (dispatch, getState) => {
 export const soundNotification = notification();
 
 export const addCursorListeners = (id, onChangePosition, onChangeSelection) => {
-  const handleNewCursorPosition = debounce(data => {
-    const { userId, offset } = camelizeKeys(data);
+  const handleNewCursorPosition = debounce((data) => {
+    const { offset, userId } = camelizeKeys(data);
     if (id === userId) {
       onChangePosition(offset);
     }
   }, 80);
 
-  const handleNewCursorSelection = debounce(data => {
-    const { userId, startOffset, endOffset } = camelizeKeys(data);
+  const handleNewCursorSelection = debounce((data) => {
+    const { endOffset, startOffset, userId } = camelizeKeys(data);
     if (id === userId) {
       onChangeSelection(startOffset, endOffset);
     }
@@ -269,19 +261,19 @@ export const addCursorListeners = (id, onChangePosition, onChangeSelection) => {
   return clearCursorListeners;
 };
 
-export const activeEditorReady = machine => {
+export const activeEditorReady = (machine) => {
   machine.send('load_active_editor');
   // channel.on('editor:data', data => {
   //   const { userId } = camelizeKeys(data);
   //   machine.send('typing', { userId });
   // });
 
-  const handleStartsCheck = data => {
+  const handleStartsCheck = (data) => {
     const { userId } = camelizeKeys(data);
     machine.send('check_solution', { userId });
   };
 
-  const handleNewCheckResult = data => {
+  const handleNewCheckResult = (data) => {
     const { userId } = camelizeKeys(data);
     machine.send('receive_check_result', { userId });
   };
@@ -303,10 +295,10 @@ export const activeEditorReady = machine => {
   return clearEditorListeners;
 };
 
-export const activeGameReady = machine => dispatch => {
+export const activeGameReady = (machine) => (dispatch) => {
   initGameChannel(dispatch, machine, channel);
 
-  const handleNewEditorData = data => {
+  const handleNewEditorData = (data) => {
     dispatch(actions.updateEditorText(camelizeKeys(data)));
   };
 
@@ -314,12 +306,11 @@ export const activeGameReady = machine => dispatch => {
     dispatch(actions.updateCheckStatus({ [userId]: true }));
   };
 
-  const handleNewCheckResult = responseData => {
-    const {
-      state, solutionStatus, checkResult, players, userId,
-    } = camelizeKeys(responseData);
+  const handleNewCheckResult = (responseData) => {
+    const { checkResult, players, solutionStatus, state, userId } = camelizeKeys(responseData);
     if (solutionStatus) {
-      channel.push('game:score', {})
+      channel
+        .push('game:score', {})
         .receive('ok', camelizeKeysAndDispatch(dispatch, actions.setGameScore));
     }
     dispatch(actions.updateGamePlayers({ players }));
@@ -337,14 +328,14 @@ export const activeGameReady = machine => dispatch => {
     machine.send('user:check_complete', { payload });
   };
 
-  const handleUserJoined = data => {
+  const handleUserJoined = (data) => {
     const {
-      state,
-      startsAt,
-      timeoutSeconds,
       langs,
       players: [firstPlayer, secondPlayer],
+      startsAt,
+      state,
       task,
+      timeoutSeconds,
     } = camelizeKeys(data);
     const players = [
       { ...firstPlayer, type: userTypes.firstPlayer },
@@ -398,23 +389,24 @@ export const activeGameReady = machine => dispatch => {
     machine.send('game:user_joined', { payload: camelizeKeys(data) });
   };
 
-  const handleUserWon = data => {
-    const { players, state, msg } = camelizeKeys(data);
+  const handleUserWon = (data) => {
+    const { msg, players, state } = camelizeKeys(data);
     dispatch(actions.updateGamePlayers({ players }));
     dispatch(actions.updateGameStatus({ state, msg }));
     machine.send('user:won', { payload: camelizeKeys(data) });
   };
 
-  const handleUserGiveUp = data => {
-    const { players, state, msg } = camelizeKeys(data);
+  const handleUserGiveUp = (data) => {
+    const { msg, players, state } = camelizeKeys(data);
     dispatch(actions.updateGamePlayers({ players }));
     dispatch(actions.updateGameStatus({ state, msg }));
-    channel.push('game:score', {})
+    channel
+      .push('game:score', {})
       .receive('ok', camelizeKeysAndDispatch(dispatch, actions.setGameScore));
     machine.send('user:give_up', { payload: camelizeKeys(data) });
   };
 
-  const handleRematchStatusUpdate = data => {
+  const handleRematchStatusUpdate = (data) => {
     const payload = camelizeKeys(data);
     dispatch(actions.updateRematchStatus(payload));
     machine.send('rematch:status_updated', { payload });
@@ -425,14 +417,14 @@ export const activeGameReady = machine => dispatch => {
     redirectToNewGame(newGameId);
   };
 
-  const handleGameTimeout = data => {
+  const handleGameTimeout = (data) => {
     const { gameState } = camelizeKeys(data);
     const payload = { state: gameState };
     dispatch(actions.updateGameStatus(payload));
     machine.send('game:timeout', { payload });
   };
 
-  const handleTournamentRoundCreated = data => {
+  const handleTournamentRoundCreated = (data) => {
     const payload = camelizeKeys(data);
     dispatch(actions.setTournamentsInfo(data));
     machine.send('tournament:round_created', { payload });
@@ -481,25 +473,21 @@ const fetchOrCreateTask = (gameMachine, taskMachine) => (dispatch, getState) =>
   gameMachine.send('LOAD_GAME', message);
 };
 
-export const reloadGeneratorAndSolutionTemplates = taskMachine => (dispatch, getState) => {
+export const reloadGeneratorAndSolutionTemplates = (taskMachine) => (dispatch, getState) => {
   const state = getState();
 
   const langs = selectors.editorLangsSelector(state);
 
   const solution = langs.reduce(
-    (acc, lang) => (
-      lang.argumentsGeneratorTemplate
-        ? { ...acc, [lang.slug]: lang.solutionTemplate }
-        : acc
-    ),
+    (acc, lang) =>
+      lang.argumentsGeneratorTemplate ? { ...acc, [lang.slug]: lang.solutionTemplate } : acc,
     {},
   );
   const argumentsGenerator = langs.reduce(
-    (acc, lang) => (
+    (acc, lang) =>
       lang.argumentsGeneratorTemplate
         ? { ...acc, [lang.slug]: lang.argumentsGeneratorTemplate }
-        : acc
-    ),
+        : acc,
     {},
   );
 
@@ -507,7 +495,7 @@ export const reloadGeneratorAndSolutionTemplates = taskMachine => (dispatch, get
   taskMachine.send('CHANGES');
 };
 
-export const validateTaskName = name => (dispatch, getState) => {
+export const validateTaskName = (name) => (dispatch, getState) => {
   if (name.length < MIN_NAME_LENGTH || name.length > MAX_NAME_LENGTH) {
     return;
   }
@@ -519,7 +507,7 @@ export const validateTaskName = name => (dispatch, getState) => {
         'x-csrf-token': window.csrf_token,
       },
     })
-    .then(response => {
+    .then((response) => {
       const data = camelizeKeys(response.data);
       const { name: currentTaskName } = selectors.builderTaskSelector(getState());
 
@@ -533,50 +521,56 @@ export const validateTaskName = name => (dispatch, getState) => {
         dispatch(actions.setValidationStatuses({ name: [false, 'Name must be unique'] }));
       }
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch(actions.setValidationStatuses({ name: [false, error.message] }));
     });
 };
 
-export const updateTaskState = (id, state) => dispatch => {
+export const updateTaskState = (id, state) => (dispatch) => {
   axios
-    .patch(`/api/v1/tasks/${id}`, { task: { state } }, {
-      headers: {
-        'Content-Type': 'application/json',
-        'x-csrf-token': window.csrf_token,
+    .patch(
+      `/api/v1/tasks/${id}`,
+      { task: { state } },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'x-csrf-token': window.csrf_token,
+        },
       },
-    })
+    )
     .then(() => {
       dispatch(actions.setTaskState(state));
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch(actions.setError(error));
       console.error(error);
     });
 };
 
-export const publishTask = id => (dispatch, getState) => {
+export const publishTask = (id) => (dispatch, getState) => {
   const state = getState();
   const isAdmin = selectors.currentUserIsAdminSelector(state);
-  const nextTaskState = isAdmin
-    ? taskStateCodes.active
-    : taskStateCodes.moderation;
+  const nextTaskState = isAdmin ? taskStateCodes.active : taskStateCodes.moderation;
 
   dispatch(updateTaskState(id, nextTaskState));
 };
 
-export const updateTaskVisibility = (id, visibility, onError) => dispatch => {
+export const updateTaskVisibility = (id, visibility, onError) => (dispatch) => {
   axios
-    .patch(`/api/v1/tasks/${id}`, { task: { visibility } }, {
-      headers: {
-        'Content-Type': 'application/json',
-        'x-csrf-token': window.csrf_token,
+    .patch(
+      `/api/v1/tasks/${id}`,
+      { task: { visibility } },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'x-csrf-token': window.csrf_token,
+        },
       },
-    })
+    )
     .then(() => {
       dispatch(actions.setTaskVisibility(visibility));
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch(actions.setError(error));
       console.error(error);
       onError(error);
@@ -597,13 +591,13 @@ export const saveTask = (taskMachine, onError) => (dispatch, getState) => {
           'x-csrf-token': window.csrf_token,
         },
       })
-      .then(response => {
+      .then((response) => {
         const data = camelizeKeys(response.data);
 
         taskMachine.send('CONFIRM');
         window.location.href = `/tasks/${data.task.id}`;
       })
-      .catch(err => {
+      .catch((err) => {
         onError(err);
 
         dispatch(actions.setError(err));
@@ -617,13 +611,13 @@ export const saveTask = (taskMachine, onError) => (dispatch, getState) => {
           'x-csrf-token': window.csrf_token,
         },
       })
-      .then(data => {
+      .then((data) => {
         const labledTask = labelTaskParamsWithIds(data.task);
 
         dispatch(actions.setTask({ task: labledTask }));
         taskMachine.send('CONFIRM');
       })
-      .catch(err => {
+      .catch((err) => {
         onError(err);
 
         dispatch(actions.setError(err));
@@ -632,7 +626,7 @@ export const saveTask = (taskMachine, onError) => (dispatch, getState) => {
   }
 };
 
-export const deleteTask = id => dispatch => {
+export const deleteTask = (id) => (dispatch) => {
   axios
     .delete(`/api/v1/tasks/${id}`, {
       headers: {
@@ -643,23 +637,25 @@ export const deleteTask = id => dispatch => {
     .then(() => {
       window.location.href = '/tasks';
     })
-    .catch(err => {
+    .catch((err) => {
       dispatch(actions.setError(err));
       console.error(err);
     });
 };
 
-export const buildTaskAsserts = taskMachine => (dispatch, getState) => {
+export const buildTaskAsserts = (taskMachine) => (dispatch, getState) => {
   const state = getState();
 
   if (state.builder.templates.state !== taskTemplatesStates.init) {
-    dispatch(actions.setTaskAsserts({
-      asserts: state.builder.task.assertsExamples.map(({ arguments: args, expected }) => ({
-        arguments: JSON.parse(args),
-        expected: JSON.parse(expected),
-      })),
-      status: 'ok',
-    }));
+    dispatch(
+      actions.setTaskAsserts({
+        asserts: state.builder.task.assertsExamples.map(({ arguments: args, expected }) => ({
+          arguments: JSON.parse(args),
+          expected: JSON.parse(expected),
+        })),
+        status: 'ok',
+      }),
+    );
 
     taskMachine.send('SUCCESS');
     return;
@@ -671,25 +667,31 @@ export const buildTaskAsserts = taskMachine => (dispatch, getState) => {
   const textArgumentsGenerator = selectors.taskArgumentsGeneratorSelector(state, editorLang);
 
   axios
-    .post('/api/v1/tasks/build', {
-      task: decamelizeKeys(taskParams, { separator: '_' }),
-      arguments_generator_text: textArgumentsGenerator,
-      solution_text: textSolution,
-      editor_lang: editorLang,
-    }, {
-      headers: {
-        'Content-Type': 'application/json',
-        'x-csrf-token': window.csrf_token,
+    .post(
+      '/api/v1/tasks/build',
+      {
+        task: decamelizeKeys(taskParams, { separator: '_' }),
+        arguments_generator_text: textArgumentsGenerator,
+        solution_text: textSolution,
+        editor_lang: editorLang,
       },
-    })
-    .then(response => {
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'x-csrf-token': window.csrf_token,
+        },
+      },
+    )
+    .then((response) => {
       const data = camelizeKeys(response.data);
 
-      dispatch(actions.setTaskAsserts({
-        asserts: data.asserts || [],
-        status: data.status,
-        output: data.message,
-      }));
+      dispatch(
+        actions.setTaskAsserts({
+          asserts: data.asserts || [],
+          status: data.status,
+          output: data.message,
+        }),
+      );
 
       switch (data.status) {
         case 'ok': {
@@ -697,7 +699,9 @@ export const buildTaskAsserts = taskMachine => (dispatch, getState) => {
           break;
         }
         case 'failure':
-          taskMachine.send('FAILURE', { message: "Actual values doesn't match with expected values" });
+          taskMachine.send('FAILURE', {
+            message: "Actual values doesn't match with expected values",
+          });
           break;
         case 'error': {
           taskMachine.send('ERROR', { message: data.message });
@@ -708,12 +712,14 @@ export const buildTaskAsserts = taskMachine => (dispatch, getState) => {
         }
       }
     })
-    .catch(err => {
-      dispatch(actions.setTaskAsserts({
-        asserts: [],
-        status: 'error',
-        output: err.message,
-      }));
+    .catch((err) => {
+      dispatch(
+        actions.setTaskAsserts({
+          asserts: [],
+          status: 'error',
+          output: err.message,
+        }),
+      );
       taskMachine.send('ERROR', { message: err.message });
 
       dispatch(actions.setError(err));
@@ -721,21 +727,19 @@ export const buildTaskAsserts = taskMachine => (dispatch, getState) => {
     });
 };
 
-const fetchPlaybook = (machine, init) => dispatch => {
+const fetchPlaybook = (machine, init) => (dispatch) => {
   axios
     .get(`/api/v1/playbook/${gameId}`)
-    .then(response => {
+    .then((response) => {
       const data = camelizeKeys(response.data);
-      const type = isRecord
-        ? PlaybookStatusCodes.stored
-        : PlaybookStatusCodes.active;
+      const type = isRecord ? PlaybookStatusCodes.stored : PlaybookStatusCodes.active;
       const resolvedData = resolveDiffs(data, type);
 
       init(dispatch)(resolvedData);
 
       machine.send('LOAD_PLAYBOOK', { payload: resolvedData });
     })
-    .catch(err => {
+    .catch((err) => {
       dispatch(actions.setError(err));
       machine.send('REJECT_LOADING_PLAYBOOK', { payload: err });
 
@@ -745,52 +749,61 @@ const fetchPlaybook = (machine, init) => dispatch => {
   return () => {};
 };
 
-export const changePlaybookSolution = method => dispatch => {
-  axios.post(`/api/v1/playbooks/${method}`, {
-    game_id: gameId,
-  }, {
-    headers: {
-      'Content-type': 'application/json',
-      'x-csrf-token': window.csrf_token,
-    },
-  }).then(response => {
-    const data = camelizeKeys(response.data);
-
-    if (data.errors) {
-      console.error(data.errors);
-      dispatch(actions.setError({
-        message: data.errors[0],
-      }));
-    } else {
-      dispatch(actions.changeSolutionType(data));
-    }
-  }).catch(error => {
-    console.error(error);
-    dispatch(actions.setError(error));
-  });
+export const changePlaybookSolution = (method) => (dispatch) => {
+  axios
+    .post(
+      `/api/v1/playbooks/${method}`,
+      {
+        game_id: gameId,
+      },
+      {
+        headers: {
+          'Content-type': 'application/json',
+          'x-csrf-token': window.csrf_token,
+        },
+      },
+    )
+    .then((response) => {
+      const data = camelizeKeys(response.data);
+
+      if (data.errors) {
+        console.error(data.errors);
+        dispatch(
+          actions.setError({
+            message: data.errors[0],
+          }),
+        );
+      } else {
+        dispatch(actions.changeSolutionType(data));
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+      dispatch(actions.setError(error));
+    });
 };
 
-export const storedEditorReady = machine => {
+export const storedEditorReady = (machine) => {
   machine.send('load_stored_editor');
 
   return () => {};
 };
 
-export const downloadPlaybook = machine => dispatch => {
+export const downloadPlaybook = (machine) => (dispatch) => {
   dispatch(fetchPlaybook(machine, initPlaybook));
 };
 
-export const openPlaybook = machine => () => {
+export const openPlaybook = (machine) => () => {
   machine.send('OPEN_REPLAYER');
 };
 
-export const connectToTask = (gameMachine, taskMachine) => dispatch => {
+export const connectToTask = (gameMachine, taskMachine) => (dispatch) => {
   dispatch(fetchOrCreateTask(gameMachine, taskMachine));
 
   return () => {};
 };
 
-export const connectToGame = machine => dispatch => {
+export const connectToGame = (machine) => (dispatch) => {
   if (isRecord) {
     return fetchPlaybook(machine, initStoredGame)(dispatch);
   }
@@ -805,16 +818,13 @@ export const connectToGame = machine => dispatch => {
   return activeGameReady(machine)(dispatch);
 };
 
-export const connectToEditor = machine => () => (
-  isRecord
-    ? storedEditorReady(machine)
-    : activeEditorReady(machine)
-);
+export const connectToEditor = (machine) => () =>
+  isRecord ? storedEditorReady(machine) : activeEditorReady(machine);
 
 export const checkGameSolution = () => (dispatch, getState) => {
   const state = getState();
   const currentUserId = selectors.currentUserIdSelector(state);
-  const { text, lang } = selectors.getSolution(currentUserId)(state);
+  const { lang, text } = selectors.getSolution(currentUserId)(state);
 
   // FIXME: create actions for this state transitions
   // FIXME: create statuses for solutionStatus
@@ -829,10 +839,10 @@ export const checkGameSolution = () => (dispatch, getState) => {
   channel.push('check_result', payload);
 };
 
-export const checkTaskSolution = editorMachine => (dispatch, getState) => {
+export const checkTaskSolution = (editorMachine) => (dispatch, getState) => {
   const state = getState();
   const currentUserId = selectors.currentUserIdSelector(state);
-  const { text, lang } = selectors.getSolution(currentUserId)(state);
+  const { lang, text } = selectors.getSolution(currentUserId)(state);
   const task = selectors.builderTaskSelector(state);
 
   // FIXME: create actions for this state transitions
@@ -848,36 +858,39 @@ export const checkTaskSolution = editorMachine => (dispatch, getState) => {
 
   editorMachine.send('user_check_solution');
 
-  axios.post('/api/v1/tasks/check', payload, {
-    headers: {
-      'Content-Type': 'application/json',
-      'x-csrf-token': window.csrf_token,
-    },
-  }).then(response => {
-    const { checkResult } = camelizeKeys(response.data);
+  axios
+    .post('/api/v1/tasks/check', payload, {
+      headers: {
+        'Content-Type': 'application/json',
+        'x-csrf-token': window.csrf_token,
+      },
+    })
+    .then((response) => {
+      const { checkResult } = camelizeKeys(response.data);
 
-    dispatch(
-      actions.updateExecutionOutput({
-        ...checkResult,
-        userId: currentUserId,
-      }),
-    );
-    editorMachine.send('receive_check_result', { userId: currentUserId });
-  }).catch(error => {
-    dispatch(
-      actions.updateExecutionOutput({
-        status: 'error',
-        outputError: error.message,
-        asserts: [],
-        version: 2,
-        userId: currentUserId,
-      }),
-    );
-    editorMachine.send('receive_check_result', { userId: currentUserId });
-  });
+      dispatch(
+        actions.updateExecutionOutput({
+          ...checkResult,
+          userId: currentUserId,
+        }),
+      );
+      editorMachine.send('receive_check_result', { userId: currentUserId });
+    })
+    .catch((error) => {
+      dispatch(
+        actions.updateExecutionOutput({
+          status: 'error',
+          outputError: error.message,
+          asserts: [],
+          version: 2,
+          userId: currentUserId,
+        }),
+      );
+      editorMachine.send('receive_check_result', { userId: currentUserId });
+    });
 };
 
-export const sendReportOnUser = (userId, onSuccess, onError) => dispatch => {
+export const sendReportOnUser = (userId, onSuccess, onError) => (dispatch) => {
   const payload = { user_id: userId, reason: 'cheat', comment: '' };
 
   axios
@@ -887,10 +900,10 @@ export const sendReportOnUser = (userId, onSuccess, onError) => dispatch => {
         'x-csrf-token': window.csrf_token,
       },
     })
-    .then(data => {
+    .then((data) => {
       onSuccess(camelizeKeys(data));
     })
-    .catch(error => {
+    .catch((error) => {
       onError(error);
 
       dispatch(actions.setError(error));
@@ -898,41 +911,47 @@ export const sendReportOnUser = (userId, onSuccess, onError) => dispatch => {
     });
 };
 
-export const compressEditorHeight = userId => dispatch => dispatch(actions.compressEditorHeight({ userId }));
-export const expandEditorHeight = userId => dispatch => dispatch(actions.expandEditorHeight({ userId }));
+export const compressEditorHeight = (userId) => (dispatch) =>
+  dispatch(actions.compressEditorHeight({ userId }));
+export const expandEditorHeight = (userId) => (dispatch) =>
+  dispatch(actions.expandEditorHeight({ userId }));
 
 /*
  * Middleware actions for CodebattlePlayer
-*/
+ */
 
-export const setGameHistoryState = recordId => (dispatch, getState) => {
+export const setGameHistoryState = (recordId) => (dispatch, getState) => {
   const state = getState();
   const initRecords = selectors.playbookInitRecordsSelector(state);
   const records = selectors.playbookRecordsSelector(state);
 
-  const { players: editorsState, chat: chatState } = getFinalState({
+  const { chat: chatState, players: editorsState } = getFinalState({
     recordId,
     records,
     initRecords,
   });
 
-  editorsState.forEach(player => {
-    dispatch(actions.updateEditorTextHistory({
-      userId: player.id,
-      editorText: player.editorText,
-      langSlug: player.editorLang,
-    }));
-
-    dispatch(actions.updateExecutionOutputHistory({
-      ...player.checkResult,
-      userId: player.id,
-    }));
+  editorsState.forEach((player) => {
+    dispatch(
+      actions.updateEditorTextHistory({
+        userId: player.id,
+        editorText: player.editorText,
+        langSlug: player.editorLang,
+      }),
+    );
+
+    dispatch(
+      actions.updateExecutionOutputHistory({
+        ...player.checkResult,
+        userId: player.id,
+      }),
+    );
   });
 
   dispatch(actions.updateChatDataHistory(chatState));
 };
 
-export const updateGameHistoryState = nextRecordId => (dispatch, getState) => {
+export const updateGameHistoryState = (nextRecordId) => (dispatch, getState) => {
   const state = getState();
   const records = selectors.playbookRecordsSelector(state);
   const nextRecord = parse(records[nextRecordId]) || {};
@@ -943,18 +962,22 @@ export const updateGameHistoryState = nextRecordId => (dispatch, getState) => {
       const editorLang = selectors.editorLangHistorySelector(state, nextRecord);
       const newEditorText = getText(editorText, nextRecord.diff);
 
-      dispatch(actions.updateEditorTextHistory({
-        userId: nextRecord.userId,
-        editorText: newEditorText,
-        langSlug: nextRecord.diff.nextLang || editorLang,
-      }));
+      dispatch(
+        actions.updateEditorTextHistory({
+          userId: nextRecord.userId,
+          editorText: newEditorText,
+          langSlug: nextRecord.diff.nextLang || editorLang,
+        }),
+      );
       break;
     }
     case 'check_complete':
-      dispatch(actions.updateExecutionOutputHistory({
-        ...nextRecord.checkResult,
-        userId: nextRecord.userId,
-      }));
+      dispatch(
+        actions.updateExecutionOutputHistory({
+          ...nextRecord.checkResult,
+          userId: nextRecord.userId,
+        }),
+      );
       break;
     case 'chat_message':
     case 'join_chat':
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Invite.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Invite.js
index 884495de9..9e4839028 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Invite.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Invite.js
@@ -6,12 +6,11 @@ import { getSystemMessage } from '../utils/chat';
 
 const channel = socket.channel('invites');
 
-const camelizeKeysAndDispatch = (dispatch, actionCreator) => data => (
-  dispatch(actionCreator(camelizeKeys(data)))
-);
+const camelizeKeysAndDispatch = (dispatch, actionCreator) => (data) =>
+  dispatch(actionCreator(camelizeKeys(data)));
 
-const getRecipientName = data => data.invite.recipient.name;
-const getCreatorName = data => data.invite.creator.name;
+const getRecipientName = (data) => data.invite.recipient.name;
+const getCreatorName = (data) => data.invite.creator.name;
 const getOpponentName = (data, user) => {
   if (user.id === data.invite.creator_id) {
     return getRecipientName(data);
@@ -24,25 +23,29 @@ const getOpponentName = (data, user) => {
   return 'Anonymous';
 };
 
-export const initInvites = currentUser => dispatch => {
+export const initInvites = (currentUser) => (dispatch) => {
   const onJoinSuccess = () => {
-    channel.on('invites:init', data => {
+    channel.on('invites:init', (data) => {
       if (data.invites.length > 0) {
-        const message = getSystemMessage({ text: `You have (${data.invites.length}) invites to battle. Check ` });
+        const message = getSystemMessage({
+          text: `You have (${data.invites.length}) invites to battle. Check `,
+        });
         setTimeout(() => dispatch(actions.newChatMessage(message)), 100);
       }
       camelizeKeysAndDispatch(dispatch, actions.setInvites)(data);
     });
 
-    channel.on('invites:created', data => {
+    channel.on('invites:created', (data) => {
       if (data.invite.creator_id !== currentUser.id) {
-        const message = getSystemMessage({ text: `You received battle invite (from ${getCreatorName(data)})` });
+        const message = getSystemMessage({
+          text: `You received battle invite (from ${getCreatorName(data)})`,
+        });
         dispatch(actions.newChatMessage(message));
       }
 
       camelizeKeysAndDispatch(dispatch, actions.addInvite)(data);
     });
-    channel.on('invites:canceled', data => {
+    channel.on('invites:canceled', (data) => {
       if (data.invite.executor_id !== currentUser.id) {
         const message = getSystemMessage({
           text: `Invite has been canceled (Opponent ${getOpponentName(data, currentUser)})`,
@@ -53,7 +56,7 @@ export const initInvites = currentUser => dispatch => {
 
       camelizeKeysAndDispatch(dispatch, actions.updateInvite)(data);
     });
-    channel.on('invites:accepted', data => {
+    channel.on('invites:accepted', (data) => {
       if (data.invite.executor_id !== currentUser.id) {
         const message = getSystemMessage({
           text: `Invite has been accepted (Opponent ${getOpponentName(data, currentUser)})`,
@@ -61,20 +64,24 @@ export const initInvites = currentUser => dispatch => {
         });
         dispatch(actions.newChatMessage(message));
       }
-      setTimeout(() => { window.location.href = `/games/${data.invite.game_id}`; }, 250);
+      setTimeout(() => {
+        window.location.href = `/games/${data.invite.game_id}`;
+      }, 250);
 
       camelizeKeysAndDispatch(dispatch, actions.updateInvite)(data);
     });
-    channel.on('invites:expired', data => {
+    channel.on('invites:expired', (data) => {
       const message = getSystemMessage({
-        text: `Invite has been expired by timeout (${getCreatorName(data)} vs ${getRecipientName(data)})`,
+        text: `Invite has been expired by timeout (${getCreatorName(data)} vs ${getRecipientName(
+          data,
+        )})`,
         status: 'failure',
       });
       dispatch(actions.newChatMessage(message));
 
       camelizeKeysAndDispatch(dispatch, actions.updateInvite)(data);
     });
-    channel.on('invites:dropped', data => {
+    channel.on('invites:dropped', (data) => {
       const message = getSystemMessage({
         text: `Invite has been dropped (${getCreatorName(data)} vs ${getRecipientName(data)})`,
         status: 'failure',
@@ -85,41 +92,43 @@ export const initInvites = currentUser => dispatch => {
     });
   };
 
-  channel
-    .join()
-    .receive('ok', onJoinSuccess);
+  channel.join().receive('ok', onJoinSuccess);
 };
 
-export const createInvite = params => dispatch => channel
-  .push('invites:create', params)
-  .receive('ok', data => {
-    const message = getSystemMessage({ text: `You invite ${params.recipient_name} to battle. Wait for his reply` });
+export const createInvite = (params) => (dispatch) =>
+  channel.push('invites:create', params).receive('ok', (data) => {
+    const message = getSystemMessage({
+      text: `You invite ${params.recipient_name} to battle. Wait for his reply`,
+    });
     dispatch(actions.newChatMessage(message));
 
     camelizeKeysAndDispatch(dispatch, actions.addInvite)(data);
   });
 
-export const acceptInvite = id => dispatch => channel
-  .push('invites:accept', { id })
-  .receive('ok', data => {
-    setTimeout(() => { window.location.href = `/games/${data.invite.game_id}`; }, 250);
+export const acceptInvite = (id) => (dispatch) =>
+  channel.push('invites:accept', { id }).receive('ok', (data) => {
+    setTimeout(() => {
+      window.location.href = `/games/${data.invite.game_id}`;
+    }, 250);
 
     camelizeKeysAndDispatch(dispatch, actions.updateInvite)(data);
   });
 
-export const declineInvite = (id, opponentName) => dispatch => channel
-  .push('invites:cancel', { id })
-  .receive('ok', data => {
-    const message = getSystemMessage({ text: `You decline battle invite [Opponent ${opponentName}]` });
+export const declineInvite = (id, opponentName) => (dispatch) =>
+  channel.push('invites:cancel', { id }).receive('ok', (data) => {
+    const message = getSystemMessage({
+      text: `You decline battle invite [Opponent ${opponentName}]`,
+    });
     dispatch(actions.newChatMessage(message));
 
     camelizeKeysAndDispatch(dispatch, actions.updateInvite)(data);
   });
 
-export const cancelInvite = (id, opponentName) => dispatch => channel
-  .push('invites:cancel', { id })
-  .receive('ok', data => {
-    const message = getSystemMessage({ text: `You cancel battle invite [Opponent ${opponentName}]` });
+export const cancelInvite = (id, opponentName) => (dispatch) =>
+  channel.push('invites:cancel', { id }).receive('ok', (data) => {
+    const message = getSystemMessage({
+      text: `You cancel battle invite [Opponent ${opponentName}]`,
+    });
     dispatch(actions.newChatMessage(message));
 
     camelizeKeysAndDispatch(dispatch, actions.updateInvite)(data);
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Lobby.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Lobby.js
index f37569d4e..dae708f69 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Lobby.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Lobby.js
@@ -12,8 +12,9 @@ const channelName = 'lobby';
 const isRecord = Gon.getAsset('is_record');
 const channel = !isRecord ? socket.channel(channelName) : null;
 
-export const fetchState = currentUserId => dispatch => {
-  const camelizeKeysAndDispatch = actionCreator => data => dispatch(actionCreator(camelizeKeys(data)));
+export const fetchState = (currentUserId) => (dispatch) => {
+  const camelizeKeysAndDispatch = (actionCreator) => (data) =>
+    dispatch(actionCreator(camelizeKeys(data)));
 
   channel.join().receive('ok', camelizeKeysAndDispatch(actions.initGameList));
 
@@ -21,17 +22,14 @@ export const fetchState = currentUserId => dispatch => {
     dispatch(actions.updateLobbyChannelState(false));
   });
 
-  const handleGameUpsert = data => {
+  const handleGameUpsert = (data) => {
     const newData = camelizeKeys(data);
     const {
-      game: { players, id, state: gameState },
+      game: { id, players, state: gameState },
     } = newData;
     const currentPlayerId = currentUserId;
     const isGameStarted = gameState === 'playing';
-    const isCurrentUserInGame = some(
-      players,
-      ({ id: playerId }) => playerId === currentPlayerId,
-    );
+    const isCurrentUserInGame = some(players, ({ id: playerId }) => playerId === currentPlayerId);
 
     if (isGameStarted && isCurrentUserInGame) {
       window.location.href = `/games/${id}`;
@@ -40,7 +38,7 @@ export const fetchState = currentUserId => dispatch => {
     }
   };
 
-  const handleGameCheckStarted = data => {
+  const handleGameCheckStarted = (data) => {
     const { gameId, userId } = camelizeKeys(data);
     const payload = { gameId, userId, checkResult: { status: 'started' } };
 
@@ -50,10 +48,7 @@ export const fetchState = currentUserId => dispatch => {
   const refs = [
     channel.on('game:upsert', handleGameUpsert),
     channel.on('game:check_started', handleGameCheckStarted),
-    channel.on(
-      'game:check_completed',
-      camelizeKeysAndDispatch(actions.updateCheckResult),
-    ),
+    channel.on('game:check_completed', camelizeKeysAndDispatch(actions.updateCheckResult)),
     channel.on('game:remove', camelizeKeysAndDispatch(actions.removeGameLobby)),
     channel.on('game:finished', camelizeKeysAndDispatch(actions.finishGame)),
   ];
@@ -73,7 +68,7 @@ export const fetchState = currentUserId => dispatch => {
   return clearLobbyListeners;
 };
 
-export const openDirect = (userId, name) => dispatch => {
+export const openDirect = (userId, name) => (dispatch) => {
   const expireTo = calculateExpireDate();
   const roomData = {
     targetUserId: userId,
@@ -89,38 +84,28 @@ export const openDirect = (userId, name) => dispatch => {
   dispatch(actions.createPrivateRoom(roomData));
 };
 
-export const cancelGame = gameId => () => {
+export const cancelGame = (gameId) => () => {
   channel
     .push('game:cancel', { game_id: gameId })
-    .receive('error', error => console.error(error));
+    .receive('error', (error) => console.error(error));
 };
 
-export const createGame = params => {
-  channel
-    .push('game:create', params)
-    .receive('error', error => console.error(error));
+export const createGame = (params) => {
+  channel.push('game:create', params).receive('error', (error) => console.error(error));
 };
 
-export const createInvite = invite => {
-  channel
-    .push('game:create_invite', invite)
-    .receive('error', error => console.error(error));
+export const createInvite = (invite) => {
+  channel.push('game:create_invite', invite).receive('error', (error) => console.error(error));
 };
 
-export const acceptInvite = invite => () => {
-  channel
-    .push('game:accept_invite', invite)
-    .receive('error', error => console.error(error));
+export const acceptInvite = (invite) => () => {
+  channel.push('game:accept_invite', invite).receive('error', (error) => console.error(error));
 };
 
-export const declineInvite = invite => () => {
-  channel
-    .push('game:decline_invite', invite)
-    .receive('error', error => console.error(error));
+export const declineInvite = (invite) => () => {
+  channel.push('game:decline_invite', invite).receive('error', (error) => console.error(error));
 };
 
-export const cancelInvite = invite => () => {
-  channel
-    .push('game:cancel_invite', invite)
-    .receive('error', error => console.error(error));
+export const cancelInvite = (invite) => () => {
+  channel.push('game:cancel_invite', invite).receive('error', (error) => console.error(error));
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Main.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Main.js
index f1c4fe414..98d05a647 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Main.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Main.js
@@ -8,7 +8,7 @@ import { actions } from '../slices';
 const players = Gon.getAsset('players') || [];
 const currentUser = Gon.getAsset('current_user') || {};
 
-const getMajorState = metas => (
+const getMajorState = (metas) =>
   metas.reduce((state, item) => {
     switch (item.state) {
       case 'playing':
@@ -22,30 +22,29 @@ const getMajorState = metas => (
       default:
         return state;
     }
-  }, 'lobby')
-);
+  }, 'lobby');
 
 const getUserStateByPath = () => {
   const { pathname } = document.location;
 
   if (pathname.startsWith('/games')) {
-    const state = players.some(player => player.id === currentUser.id) ? 'playing' : 'watching';
+    const state = players.some((player) => player.id === currentUser.id) ? 'playing' : 'watching';
 
-    return ({
+    return {
       state,
-    });
+    };
   }
 
   if (pathname === '/') {
-    return ({
+    return {
       state: 'lobby',
-    });
+    };
   }
 
   if (pathname.startsWith('/tasks')) {
-    return ({
+    return {
       state: 'task',
-    });
+    };
   }
 
   return { state: 'online' };
@@ -61,19 +60,18 @@ const listBy = (id, { metas: [first, ...rest] }) => {
   return first;
 };
 
-const camelizeKeysAndDispatch = (dispatch, actionCreator) => data => (
-  dispatch(actionCreator(camelizeKeys(data)))
-);
+const camelizeKeysAndDispatch = (dispatch, actionCreator) => (data) =>
+  dispatch(actionCreator(camelizeKeys(data)));
 
-const initPresence = () => dispatch => {
+const initPresence = () => (dispatch) => {
   presence.onSync(() => {
     const list = presence.list(listBy);
     camelizeKeysAndDispatch(dispatch, actions.syncPresenceList)(list);
   });
 
-  channel
-    .join()
-    .receive('ok', () => { camelizeKeysAndDispatch(dispatch, actions.syncPresenceList); });
+  channel.join().receive('ok', () => {
+    camelizeKeysAndDispatch(dispatch, actions.syncPresenceList);
+  });
 
   channel.onError(() => dispatch(actions.updateMainChannelState(false)));
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Room.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Room.js
index 73a08b8a0..37b810fb0 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Room.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Room.js
@@ -13,9 +13,9 @@ export const calculateExpireDate = () => {
   return now.getTime() + ttl;
 };
 
-export const getStorageKey = userId => `${userId}-${uniqInstanceKey}-private-messages`;
+export const getStorageKey = (userId) => `${userId}-${uniqInstanceKey}-private-messages`;
 
-const getAllPrivateRooms = key => JSON.parse(localStorage.getItem(key)) || {};
+const getAllPrivateRooms = (key) => JSON.parse(localStorage.getItem(key)) || {};
 
 export const getPrivateRooms = (pageName, key) => {
   const allPrivateRooms = getAllPrivateRooms(key);
@@ -23,16 +23,14 @@ export const getPrivateRooms = (pageName, key) => {
   return pagePrivateRooms || [];
 };
 
-export const filterPrivateRooms = rooms => rooms.filter(({ required }) => !required);
+export const filterPrivateRooms = (rooms) => rooms.filter(({ required }) => !required);
 
-export const clearExpiredPrivateRooms = key => {
+export const clearExpiredPrivateRooms = (key) => {
   const now = new Date();
   const allPrivateRooms = getAllPrivateRooms(key);
   const allActualPrivateRooms = Object.entries(allPrivateRooms)
     .map(([pageName, pagePrivateRooms]) => {
-      const actualPrivateRooms = pagePrivateRooms.filter(room => (
-        room.expireTo > now.getTime()
-      ));
+      const actualPrivateRooms = pagePrivateRooms.filter((room) => room.expireTo > now.getTime());
       return [pageName, actualPrivateRooms];
     })
     .filter(([, pagePrivateRooms]) => pagePrivateRooms.length > 0);
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/StairwayGame.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/StairwayGame.js
index bbbd7f8b1..c2fe9da50 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/StairwayGame.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/StairwayGame.js
@@ -13,10 +13,10 @@ const tournamentChannelName = `tournament:${tournamentId}`;
 const tournamentChannel = socket.channel(tournamentChannelName);
 
 // export const soundNotification = notification();
-const connectToStairwayGame = gameId => dispatch => {
+const connectToStairwayGame = (gameId) => (dispatch) => {
   const activeMatchChannelName = `game:${gameId}`;
   const activeMatchChannel = socket.channel(activeMatchChannelName);
-  const onJoinSuccess = response => {
+  const onJoinSuccess = (response) => {
     const data = camelizeKeys(response);
     dispatch(actions.setGameData(data));
     dispatch(actions.setLangs(data));
@@ -28,28 +28,25 @@ const connectToStairwayGame = gameId => dispatch => {
   // .receive('error', onJoinFailure);
 };
 
-const initTournamentChannel = dispatch => {
+const initTournamentChannel = (dispatch) => {
   const onJoinFailure = () => {
     window.location.reload();
   };
 
-  const onJoinSuccess = response => {
+  const onJoinSuccess = (response) => {
     const data = camelizeKeys(response);
     dispatch(actions.setTournamentData(data));
     const { gameId } = data.activeMatch;
     dispatch(connectToStairwayGame(gameId));
   };
 
-  tournamentChannel
-    .join()
-    .receive('ok', onJoinSuccess)
-    .receive('error', onJoinFailure);
+  tournamentChannel.join().receive('ok', onJoinSuccess).receive('error', onJoinFailure);
 };
 
-export const connectToStairwayTournament = () => dispatch => {
+export const connectToStairwayTournament = () => (dispatch) => {
   initTournamentChannel(dispatch);
 
-  tournamentChannel.on('tournament:update', response => {
+  tournamentChannel.on('tournament:update', (response) => {
     const data = camelizeKeys(response);
     const matches = groupBy(data.tournament.matches, 'roundId');
     set(data, 'tournament.matches', matches);
@@ -61,7 +58,7 @@ export const connectToStairwayTournament = () => dispatch => {
   // round:update_match(round, newMatch)
   // round:update_participants(players)
   // round:update_statistics(statistics)
-  tournamentChannel.on('round:created', response => {
+  tournamentChannel.on('round:created', (response) => {
     const { tournament } = camelizeKeys(response);
 
     dispatch(actions.setNextRound(tournament));
@@ -82,19 +79,16 @@ const initActiveMatchChannel = (dispatch, state) => {
       window.location.reload();
     };
 
-    const onJoinSuccess = response => {
+    const onJoinSuccess = (response) => {
       const data = camelizeKeys(response);
       dispatch(actions.setNextRound(data));
     };
 
-    activeMatchChannel
-      .join()
-      .receive('ok', onJoinSuccess)
-      .receive('error', onJoinFailure);
+    activeMatchChannel.join().receive('ok', onJoinSuccess).receive('error', onJoinFailure);
   }
 };
 
-export const connectToActiveMatch = activeMatch => (dispatch, state) => {
+export const connectToActiveMatch = (activeMatch) => (dispatch, state) => {
   const nextMatchId = find(activeMatch.gameId);
   initActiveMatchChannel(dispatch, state, nextMatchId);
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js
index 7794fcc22..831d955b1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Tournament.js
@@ -8,22 +8,19 @@ const tournamentId = Gon.getAsset('tournament_id');
 const channelName = `tournament:${tournamentId}`;
 const channel = socket.channel(channelName);
 
-const initTournamentChannel = dispatch => {
+const initTournamentChannel = (dispatch) => {
   const onJoinFailure = () => {
     window.location.reload();
   };
 
-  const onJoinSuccess = response => {
+  const onJoinSuccess = (response) => {
     const data = camelizeKeys(response);
 
     console.log(data.tournament);
     dispatch(actions.setTournamentData(data.tournament));
   };
 
-  channel
-    .join()
-    .receive('ok', onJoinSuccess)
-    .receive('error', onJoinFailure);
+  channel.join().receive('ok', onJoinSuccess).receive('error', onJoinFailure);
 
   channel.onError(() => {
     dispatch(actions.updateTournamentChannelState(false));
@@ -32,16 +29,16 @@ const initTournamentChannel = dispatch => {
 
 // export const soundNotification = notification();
 
-export const connectToTournament = () => dispatch => {
+export const connectToTournament = () => (dispatch) => {
   initTournamentChannel(dispatch);
 
-  const handleUpdate = response => {
+  const handleUpdate = (response) => {
     const data = camelizeKeys(response);
 
     dispatch(actions.updateTournamentData(data.tournament));
   };
 
-  const handleRoundCreated = response => {
+  const handleRoundCreated = (response) => {
     const data = camelizeKeys(response);
 
     dispatch(actions.setNextRound(data.tournament));
@@ -67,34 +64,36 @@ export const connectToTournament = () => dispatch => {
   return clearTournamentChannel;
 };
 
-export const joinTournament = teamId => {
+export const joinTournament = (teamId) => {
   const params = teamId ? { team_id: teamId } : {};
-  channel.push('tournament:join', params).receive('error', error => console.error(error));
+  channel.push('tournament:join', params).receive('error', (error) => console.error(error));
 };
 
-export const leaveTournament = teamId => {
+export const leaveTournament = (teamId) => {
   const params = teamId ? { team_id: teamId } : {};
-  channel.push('tournament:leave', params).receive('error', error => console.error(error));
+  channel.push('tournament:leave', params).receive('error', (error) => console.error(error));
 };
 
 export const startTournament = () => {
-  channel.push('tournament:start', {}).receive('error', error => console.error(error));
+  channel.push('tournament:start', {}).receive('error', (error) => console.error(error));
 };
 
 export const cancelTournament = () => {
-  channel.push('tournament:cancel', {}).receive('error', error => console.error(error));
+  channel.push('tournament:cancel', {}).receive('error', (error) => console.error(error));
 };
 
 export const restartTournament = () => {
-  channel.push('tournament:restart', {}).receive('error', error => console.error(error));
+  channel.push('tournament:restart', {}).receive('error', (error) => console.error(error));
 };
 
 export const openUpTournament = () => {
-  channel.push('tournament:open_up', {}).receive('error', error => console.error(error));
+  channel.push('tournament:open_up', {}).receive('error', (error) => console.error(error));
 };
 
-export const kickFromTournament = userId => {
-  channel.push('tournament:kick', { user_id: userId }).receive('error', error => console.error(error));
+export const kickFromTournament = (userId) => {
+  channel
+    .push('tournament:kick', { user_id: userId })
+    .receive('error', (error) => console.error(error));
 };
 
 export default {};
diff --git a/services/app/apps/codebattle/assets/js/widgets/middlewares/Users.js b/services/app/apps/codebattle/assets/js/widgets/middlewares/Users.js
index c7f851a30..a5c2fbc05 100644
--- a/services/app/apps/codebattle/assets/js/widgets/middlewares/Users.js
+++ b/services/app/apps/codebattle/assets/js/widgets/middlewares/Users.js
@@ -5,7 +5,7 @@ import qs from 'qs';
 
 import { actions } from '../slices';
 
-export const loadUser = dispatch => async user => {
+export const loadUser = (dispatch) => async (user) => {
   try {
     const response = await axios.get(`/api/v1/users/${user.id}`);
     const data = camelizeKeys(response.data);
@@ -15,7 +15,7 @@ export const loadUser = dispatch => async user => {
   }
 };
 
-export const loadUserStats = dispatch => async user => {
+export const loadUserStats = (dispatch) => async (user) => {
   try {
     const response = await axios.get(`/api/v1/user/${user.id}/stats`);
     const data = camelizeKeys(response.data);
@@ -25,11 +25,8 @@ export const loadUserStats = dispatch => async user => {
   }
 };
 
-export const loadSimpleUserStats = (onSuccess, onFailure) => user => {
-  axios
-    .get(`/api/v1/user/${user.id}/simple_stats`)
-    .then(onSuccess)
-    .catch(onFailure);
+export const loadSimpleUserStats = (onSuccess, onFailure) => (user) => {
+  axios.get(`/api/v1/user/${user.id}/simple_stats`).then(onSuccess).catch(onFailure);
 };
 
 const periodToTimeUnit = {
@@ -37,34 +34,36 @@ const periodToTimeUnit = {
   monthly: 'month',
 };
 
-const getDateByPeriod = period => {
+const getDateByPeriod = (period) => {
   if (period === 'total') {
     return null;
   }
   return moment().startOf(periodToTimeUnit[period]).utc().format('YYYY-MM-DD');
 };
 
-export const getUsersRatingPage = ({ name, period, withBots }, { attribute, direction }, page, pageSize) => dispatch => {
-  const queryParamsString = qs.stringify({
-    page,
-    page_size: pageSize,
-    s: `${attribute}+${direction}`,
-    q: {
-      name_ilike: name,
-    },
-    date_from: getDateByPeriod(period),
-    with_bots: withBots,
-  });
-
-  axios
-    .get(`/api/v1/users?${queryParamsString}`)
-    .then(({ data }) => {
-      dispatch(actions.updateUsersRatingPage(camelizeKeys(data)));
-      dispatch(actions.finishStoreInit());
-    })
-    .catch(error => {
-      dispatch(actions.setError(error));
+export const getUsersRatingPage =
+  ({ name, period, withBots }, { attribute, direction }, page, pageSize) =>
+  (dispatch) => {
+    const queryParamsString = qs.stringify({
+      page,
+      page_size: pageSize,
+      s: `${attribute}+${direction}`,
+      q: {
+        name_ilike: name,
+      },
+      date_from: getDateByPeriod(period),
+      with_bots: withBots,
     });
-};
+
+    axios
+      .get(`/api/v1/users?${queryParamsString}`)
+      .then(({ data }) => {
+        dispatch(actions.updateUsersRatingPage(camelizeKeys(data)));
+        dispatch(actions.finishStoreInit());
+      })
+      .catch((error) => {
+        dispatch(actions.setError(error));
+      });
+  };
 
 export default loadUserStats;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/GameRoomWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/GameRoomWidget.jsx
index 73706696a..eb4efcc12 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/GameRoomWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/GameRoomWidget.jsx
@@ -42,17 +42,12 @@ const steps = [
     disableOverlayClose: true,
     title: 'Game page',
     content: (
-      <>
-        <div className="text-justify">
-          This is a
-          <b> game page</b>
-          . You need to solve the task
-          <b> first </b>
-          and pass all tests
-          <b> successfully</b>
-          .
-        </div>
-      </>
+      <div className="text-justify">
+        This is a<b> game page</b>. You need to solve the task
+        <b> first </b>
+        and pass all tests
+        <b> successfully</b>.
+      </div>
     ),
     locale: {
       skip: 'Skip guide',
@@ -130,8 +125,7 @@ const steps = [
     },
     target: '[data-guide-id="LeftEditor"] [data-guide-id="CheckResultButton"]',
     title: 'Check button',
-    content:
-      'Click the button to check your solution or use Ctrl+Enter/Cmd+Enter',
+    content: 'Click the button to check your solution or use Ctrl+Enter/Cmd+Enter',
     locale: {
       skip: 'Skip guide',
     },
@@ -140,8 +134,7 @@ const steps = [
     disableOverlayClose: true,
     target: '#leftOutput-tab',
     title: 'Result output',
-    content:
-      'Here you will see the results of the tests or compilation errors after check',
+    content: 'Here you will see the results of the tests or compilation errors after check',
     locale: {
       skip: 'Skip guide',
     },
@@ -153,7 +146,7 @@ function GameWidgetGuide() {
   const [isFirstTime, setIsFirstTime] = useState(
     window.localStorage.getItem('guideGamePassed') === null,
   );
-  const isShowGuide = useSelector(state => isShowGuideSelector(state));
+  const isShowGuide = useSelector((state) => isShowGuideSelector(state));
 
   return (
     (isShowGuide || isFirstTime) && (
@@ -163,8 +156,6 @@ function GameWidgetGuide() {
         scrollToFirstStep
         showProgress
         showSkipButton
-        steps={steps}
-        spotlightPadding={6}
         callback={({ status }) => {
           if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
             window.localStorage.setItem('guideGamePassed', 'true');
@@ -172,6 +163,8 @@ function GameWidgetGuide() {
             dispatch(actions.updateGameUI({ isShowGuide: false }));
           }
         }}
+        spotlightPadding={6}
+        steps={steps}
         styles={{
           options: {
             primaryColor: '#0275d8',
@@ -186,20 +179,14 @@ function GameWidgetGuide() {
   );
 }
 
-function GameRoomWidget({
-  pageName,
-  mainMachine,
-  taskMachine,
-  editorMachine,
-  toggleMuteSound,
-}) {
+function GameRoomWidget({ editorMachine, mainMachine, pageName, taskMachine, toggleMuteSound }) {
   const dispatch = useDispatch();
 
   const [taskModalShowing, setTaskModalShowing] = useState(false);
   const [taskConfigurationModalShowing, setTaskConfigurationModalShowing] = useState(false);
   const [resultModalShowing, setResultModalShowing] = useState(false);
 
-  const mute = useSelector(state => state.userSettings.mute);
+  const mute = useSelector((state) => state.userSettings.mute);
   const machines = useGameRoomMachine({
     setTaskModalShowing,
     setResultModalShowing,
@@ -207,10 +194,7 @@ function GameRoomWidget({
     taskMachine,
   });
 
-  const roomCurrent = useMachineStateSelector(
-    machines.mainService,
-    roomStateSelector,
-  );
+  const roomCurrent = useMachineStateSelector(machines.mainService, roomStateSelector);
   const inBuilderRoom = inBuilderRoomSelector(roomCurrent);
   const inPreviewRoom = inPreviewRoomSelector(roomCurrent);
   const inWaitingRoom = inWaitingRoomSelector(roomCurrent);
@@ -230,9 +214,7 @@ function GameRoomWidget({
       return clearTask;
     }
 
-    const clearGame = GameRoomActions.connectToGame(machines.mainService)(
-      dispatch,
-    );
+    const clearGame = GameRoomActions.connectToGame(machines.mainService)(dispatch);
     const clearChat = ChatActions.connectToChat()(dispatch);
 
     return () => {
@@ -243,7 +225,7 @@ function GameRoomWidget({
   }, []);
 
   useEffect(() => {
-    const muteSound = e => {
+    const muteSound = (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 'm') {
         e.preventDefault();
 
@@ -294,15 +276,13 @@ function GameRoomWidget({
                   setModalShowing={setTaskConfigurationModalShowing}
                 />
                 <AnimationModal
-                  setModalShowing={setResultModalShowing}
                   modalShowing={resultModalShowing}
+                  setModalShowing={setResultModalShowing}
                 />
                 {inBuilderRoom || (pageName === 'builder' && inPreviewRoom) ? (
                   <>
                     <BuilderSettingsWidget
-                      setConfigurationModalShowing={
-                        setTaskConfigurationModalShowing
-                      }
+                      setConfigurationModalShowing={setTaskConfigurationModalShowing}
                     />
                     <BuilderEditorsWidget />
                   </>
@@ -314,11 +294,7 @@ function GameRoomWidget({
                 )}
                 {mute && (
                   <div className="rounded p-2 bg-dark cb-mute-icon">
-                    <FontAwesomeIcon
-                      size="lg"
-                      color="white"
-                      icon={['fas', 'volume-mute']}
-                    />
+                    <FontAwesomeIcon color="white" icon={['fas', 'volume-mute']} size="lg" />
                   </div>
                 )}
                 {!replayerIsOpen && <FeedbackWidget />}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/AssertsOutput.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/AssertsOutput.jsx
index 4e9ea4df9..0aaa4a689 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/AssertsOutput.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/AssertsOutput.jsx
@@ -6,27 +6,26 @@ import AccordeonBox from '../../components/AccordeonBox';
 import assertsStatuses from '../../config/executionStatuses';
 import color from '../../config/statusColor';
 
-const AssertsOutput = memo(({ asserts, status, output }) => {
+const AssertsOutput = memo(({ asserts, output, status }) => {
   const uniqIndex = uniqueId('assertsOutput');
 
   return (
     <div className="overflow-auto" style={{ maxHeight: '412px' }}>
-      {(status === assertsStatuses.error && asserts.length === 0)
-      || [assertsStatuses.memoryLeak, assertsStatuses.timeout].includes(status) ? (
+      {(status === assertsStatuses.error && asserts.length === 0) ||
+      [assertsStatuses.memoryLeak, assertsStatuses.timeout].includes(status) ? (
         <AccordeonBox.Item output={output} />
       ) : (
-        asserts
-        && asserts.map((assert, index) => (
+        asserts &&
+        asserts.map((assert, index) => (
           <AccordeonBox.SubMenu
-            key={index.toString()}
-            statusColor={color[assert.status]}
-            executionTime={assert.executionTime || 0}
             assert={{
               ...assert,
               id: assert.id || index,
               value: assert.actual || assert.expected,
             }}
+            executionTime={assert.executionTime || 0}
             hasOutput={assert.output || assert.message}
+            statusColor={color[assert.status]}
             uniqIndex={uniqIndex}
           >
             <div className="alert alert-secondary mb-0 pb-0">
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BackToTaskBuilderButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BackToTaskBuilderButton.jsx
index 15f08db56..9359ab885 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BackToTaskBuilderButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BackToTaskBuilderButton.jsx
@@ -5,12 +5,15 @@ import RoomContext from '../../components/RoomContext';
 function BackToTaskBuilderButton() {
   const { mainService } = useContext(RoomContext);
 
-  const handleOpenTaskBuilder = useCallback(() => mainService.send('OPEN_TASK_BUILDER'), [mainService]);
+  const handleOpenTaskBuilder = useCallback(
+    () => mainService.send('OPEN_TASK_BUILDER'),
+    [mainService],
+  );
 
   return (
     <button
-      type="button"
       className="btn btn-secondary btn-block rounded-lg"
+      type="button"
       onClick={handleOpenTaskBuilder}
     >
       Back to task
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderActions.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderActions.jsx
index efb4f82dd..0aa94aad0 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderActions.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderActions.jsx
@@ -13,16 +13,11 @@ import {
   isTaskPrepareTestingSelector,
   taskStateSelector,
 } from '../../machines/selectors';
-import {
-  buildTaskAsserts,
-  deleteTask,
-  publishTask,
-  updateTaskState,
-} from '../../middlewares/Game';
+import { buildTaskAsserts, deleteTask, publishTask, updateTaskState } from '../../middlewares/Game';
 import * as selectors from '../../selectors';
 import useMachineStateSelector from '../../utils/useMachineStateSelector';
 
-function BuilderActions({ validExamples, clearSuggests }) {
+function BuilderActions({ clearSuggests, validExamples }) {
   const dispatch = useDispatch();
 
   const { taskService } = useContext(RoomContext);
@@ -38,12 +33,10 @@ function BuilderActions({ validExamples, clearSuggests }) {
   const isAdmin = useSelector(selectors.currentUserIsAdminSelector);
   const isOwner = useSelector(selectors.isTaskOwner);
 
-  const { id: taskId, state: taskState } = useSelector(
-    state => state.builder.task,
-  );
+  const { id: taskId, state: taskState } = useSelector((state) => state.builder.task);
 
-  const notPublished = taskState === taskStateCodes.draft
-    && taskState === taskStateCodes.moderation;
+  const notPublished =
+    taskState === taskStateCodes.draft && taskState === taskStateCodes.moderation;
   const readyTesting = validExamples;
   const readySave = useSelector(selectors.isValidTask);
 
@@ -54,10 +47,7 @@ function BuilderActions({ validExamples, clearSuggests }) {
     () => dispatch(buildTaskAsserts(taskService)),
     [taskService, dispatch],
   );
-  const finishPreparing = useCallback(
-    () => taskService.send('SUCCESS'),
-    [taskService],
-  );
+  const finishPreparing = useCallback(() => taskService.send('SUCCESS'), [taskService]);
   const prepareAsserts = isIdleTaskState ? buildAsserts : finishPreparing;
 
   const handleOpenTesting = useCallback(() => {
@@ -100,16 +90,16 @@ function BuilderActions({ validExamples, clearSuggests }) {
   return (
     <>
       <button
-        type="button"
         className="btn btn-md btn-secondary text-nowrap rounded-lg mb-2"
-        onClick={handleOpenTesting}
         disabled={disabledTestingBtn}
+        type="button"
+        onClick={handleOpenTesting}
       >
         {isTestingPrepare ? (
           <span
+            aria-hidden="true"
             className="spinner-border spinner-border-sm mr-2"
             role="status"
-            aria-hidden="true"
           />
         ) : (
           <FontAwesomeIcon className="mr-2" icon="play" />
@@ -117,16 +107,16 @@ function BuilderActions({ validExamples, clearSuggests }) {
         <span>Testing</span>
       </button>
       <button
-        type="button"
         className="btn btn-md btn-success text-nowrap text-white rounded-lg mb-2"
-        onClick={handleSaveTask}
         disabled={disabledSaveBtn}
+        type="button"
+        onClick={handleSaveTask}
       >
         {isSavingPrepare ? (
           <span
+            aria-hidden="true"
             className="spinner-border spinner-border-sm mr-2"
             role="status"
-            aria-hidden="true"
           />
         ) : (
           <FontAwesomeIcon className="mr-2" icon="save" />
@@ -135,8 +125,8 @@ function BuilderActions({ validExamples, clearSuggests }) {
       </button>
       {notPublished && (
         <button
-          type="button"
           className="btn btn-md btn-danger text-nowrap rounded-lg mb-2"
+          type="button"
           onClick={handleDeleteTask}
         >
           <FontAwesomeIcon className="mr-2" icon="trash" />
@@ -145,8 +135,8 @@ function BuilderActions({ validExamples, clearSuggests }) {
       )}
       {taskState === taskStateCodes.draft && (
         <button
-          type="button"
           className="btn btn-md btn-primary text-nowrap rounded-lg mb-2"
+          type="button"
           onClick={handlePublishTask}
         >
           <FontAwesomeIcon className="mr-2" icon="paper-plane" />
@@ -156,19 +146,19 @@ function BuilderActions({ validExamples, clearSuggests }) {
       {taskState === taskStateCodes.moderation && (
         <>
           <button
-            type="button"
-            className="btn btn-md btn-outline-danger text-nowrap rounded-top"
             disabled
+            className="btn btn-md btn-outline-danger text-nowrap rounded-top"
+            type="button"
           >
             On moderation
           </button>
           {(isOwner || !isAdmin) && (
             <button
+              className="btn btn-md btn-primary text-nowrap rounded-bottom mb-2"
+              disabled={!isOwner}
               title="Cancel moderation"
               type="button"
-              className="btn btn-md btn-primary text-nowrap rounded-bottom mb-2"
               onClick={handleUnpublishTask}
-              disabled={!isOwner}
             >
               <FontAwesomeIcon className="mr-2" icon="share" />
               Cancel
@@ -176,8 +166,8 @@ function BuilderActions({ validExamples, clearSuggests }) {
           )}
           {isAdmin && (
             <button
-              type="button"
               className="btn btn-md btn-primary text-nowrap rounded-bottom mb-2"
+              type="button"
               onClick={handlePublishTask}
             >
               <FontAwesomeIcon className="mr-2" icon="share" />
@@ -188,8 +178,8 @@ function BuilderActions({ validExamples, clearSuggests }) {
       )}
       {taskState === taskStateCodes.active && (
         <button
-          type="button"
           className="btn btn-md btn-danger text-nowrap rounded-lg mb-2"
+          type="button"
           onClick={handleDisableTask}
         >
           <FontAwesomeIcon className="mr-2" icon="times-circle" />
@@ -198,8 +188,8 @@ function BuilderActions({ validExamples, clearSuggests }) {
       )}
       {taskState === taskStateCodes.disabled && (
         <button
-          type="button"
           className="btn btn-md btn-primary text-nowrap rounded-lg mb-2"
+          type="button"
           onClick={handleActivateTask}
         >
           <FontAwesomeIcon className="mr-2" icon="check-circle" />
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderEditorsWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderEditorsWidget.jsx
index 0dfdff468..d87e99b58 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderEditorsWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderEditorsWidget.jsx
@@ -1,9 +1,4 @@
-import React, {
-  useState,
-  useContext,
-  useCallback,
-  memo,
-} from 'react';
+import React, { useState, useContext, useCallback, memo } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
@@ -20,10 +15,7 @@ import {
   isTaskAssertsReadySelector,
   taskStateSelector,
 } from '../../machines/selectors';
-import {
-  getGeneratorStatus,
-  validationStatuses,
-} from '../../machines/task';
+import { getGeneratorStatus, validationStatuses } from '../../machines/task';
 import { reloadGeneratorAndSolutionTemplates } from '../../middlewares/Game';
 import * as selectors from '../../selectors';
 import { actions } from '../../slices';
@@ -35,13 +27,12 @@ import VimModeButton from '../game/VimModeButton';
 import AssertsOutput from './AssertsOutput';
 import TaskPropStatusIcon from './TaskPropStatusIcon';
 
-const isGeneratorsError = status => (
-  status === assertsStatuses.error
-    || status === assertsStatuses.memoryLeak
-    || status === assertsStatuses.timeout
-);
+const isGeneratorsError = (status) =>
+  status === assertsStatuses.error ||
+  status === assertsStatuses.memoryLeak ||
+  status === assertsStatuses.timeout;
 
-const InfoPopup = ({ reloadGeneratorCode, editable, origin }) => {
+function InfoPopup({ editable, origin, reloadGeneratorCode }) {
   const infoClassName = cn(
     'd-flex align-items-center justify-content-around position-absolute w-100 h-100 p-3',
     'bg-gray text-black  cb-opacity-75',
@@ -58,11 +49,10 @@ const InfoPopup = ({ reloadGeneratorCode, editable, origin }) => {
     <div className={infoClassName}>
       {editable ? (
         <span className="text-center">
-          Reload (Press
-          {' '}
+          Reload (Press{' '}
           <button
-            type="button"
             className="btn border-0 rounded-lg p-1"
+            type="button"
             onClick={reloadGeneratorCode}
           >
             <FontAwesomeIcon icon="redo" />
@@ -70,11 +60,13 @@ const InfoPopup = ({ reloadGeneratorCode, editable, origin }) => {
           ) Generator/Solution code.
         </span>
       ) : (
-        <span className="text-center">Tests are not generated automatically. They are based only on examples</span>
+        <span className="text-center">
+          Tests are not generated automatically. They are based only on examples
+        </span>
       )}
     </div>
   );
-};
+}
 
 function BuilderEditorsWidget() {
   const dispatch = useDispatch();
@@ -92,19 +84,17 @@ function BuilderEditorsWidget() {
   const asserts = useSelector(selectors.taskAssertsSelector);
   const assertsStatus = useSelector(selectors.taskAssertsStatusSelector);
   const editorsLang = useSelector(selectors.taskGeneratorLangSelector);
-  const textArgumentsGenerator = useSelector(
-    selectors.taskTextArgumentsGeneratorSelector,
-  );
+  const textArgumentsGenerator = useSelector(selectors.taskTextArgumentsGeneratorSelector);
   const textSolution = useSelector(selectors.taskTextSolutionSelector);
   const currentUserId = useSelector(selectors.currentUserIdSelector);
   const theme = useSelector(selectors.editorsThemeSelector(currentUserId));
   const editorsMode = useSelector(selectors.editorsModeSelector(currentUserId));
 
   const [isValidArgumentsGenerator, invalidGeneratorReason] = useSelector(
-    state => state.builder.validationStatuses.argumentsGenerator,
+    (state) => state.builder.validationStatuses.argumentsGenerator,
   );
   const [isValidSolution, invalidSolutionReason] = useSelector(
-    state => state.builder.validationStatuses.solution,
+    (state) => state.builder.validationStatuses.solution,
   );
 
   const reloadCode = useCallback(() => {
@@ -138,20 +128,24 @@ function BuilderEditorsWidget() {
   };
 
   const changeTaskServiceState = useCallback(() => taskService.send('CHANGES'), [taskService]);
-  const handleChanges = isAssertsReady
-    ? changeTaskServiceState
-    : noop;
+  const handleChanges = isAssertsReady ? changeTaskServiceState : noop;
 
-  const onChangeGenerator = useCallback(value => {
-    handleChanges();
+  const onChangeGenerator = useCallback(
+    (value) => {
+      handleChanges();
 
-    dispatch(actions.setTaskArgumentsGenerator({ value }));
-  }, [dispatch, handleChanges]);
-  const onChangeSolution = useCallback(value => {
-    handleChanges();
+      dispatch(actions.setTaskArgumentsGenerator({ value }));
+    },
+    [dispatch, handleChanges],
+  );
+  const onChangeSolution = useCallback(
+    (value) => {
+      handleChanges();
 
-    dispatch(actions.setTaskSolution({ value }));
-  }, [dispatch, handleChanges]);
+      dispatch(actions.setTaskSolution({ value }));
+    },
+    [dispatch, handleChanges],
+  );
 
   const generatorParams = {
     ...params,
@@ -175,57 +169,55 @@ function BuilderEditorsWidget() {
   return (
     <>
       <div className="col-12 col-lg-6 p-1" data-editor-state="idle">
-        <div
-          className="card h-100 shadow-sm position-relative"
-          style={gameRoomEditorStyles}
-        >
+        <div className="card h-100 shadow-sm position-relative" style={gameRoomEditorStyles}>
           <div className="rounded-top" data-player-type="current_user">
-            <div className="btn-toolbar justify-content-between align-items-center m-1 mb-2" role="toolbar">
+            <div
+              className="btn-toolbar justify-content-between align-items-center m-1 mb-2"
+              role="toolbar"
+            >
               <div className="d-flex justify-content-between">
                 <div className="d-flex align-items-center p-1">
                   <div className="py-2">
                     <TaskPropStatusIcon
                       id="editorArgumentsGenerator"
+                      reason={invalidSolutionReason}
                       status={
                         !isValidArgumentsGenerator
                           ? validationStatuses.invalid
                           : getGeneratorStatus(templatesState, taskCurrent)
                       }
-                      reason={invalidSolutionReason}
                     />
                   </div>
                   <h5 className="pt-2">Step 3: Generator</h5>
                 </div>
                 <div
+                  aria-label="Editor mode"
                   className="btn-group align-items-center ml-2 mr-auto"
                   role="group"
-                  aria-label="Editor mode"
                 >
                   <VimModeButton playerId={currentUserId} />
                   <DakModeButton playerId={currentUserId} />
                 </div>
               </div>
               <div
-                className={
-                  cn('btn-group justify-content-between align-items-center', {
-                    'd-flex': params.edibatle,
-                    'd-none': !params.editable,
-                  })
-                }
+                className={cn('btn-group justify-content-between align-items-center', {
+                  'd-flex': params.edibatle,
+                  'd-none': !params.editable,
+                })}
               >
                 <button
+                  className="btn btn-sm btn-light rounded-left"
                   title="Reset Code"
                   type="button"
-                  className="btn btn-sm btn-light rounded-left"
                   onClick={resetCode}
                 >
                   <FontAwesomeIcon className="mr-2" icon="sync" />
                   Reset
                 </button>
                 <button
+                  className="btn btn-sm btn-light ml-1 rounded-right"
                   title="Reject asserts generation"
                   type="button"
-                  className="btn btn-sm btn-light ml-1 rounded-right"
                   onClick={rejectAssertsGeneration}
                 >
                   <FontAwesomeIcon className="mr-2" icon="window-close" />
@@ -236,33 +228,36 @@ function BuilderEditorsWidget() {
           </div>
           <Editor {...generatorParams} />
           {disabledEditors && (
-            <InfoPopup editable={editable} reloadGeneratorCode={reloadCode} origin={origin} />
+            <InfoPopup editable={editable} origin={origin} reloadGeneratorCode={reloadCode} />
           )}
         </div>
       </div>
       <div className="col-12 col-lg-6 p-1" data-editor-state="idle">
         <div className="card h-100 shadow-sm" style={gameRoomEditorStyles}>
           <div className="rounded-top" data-player-type="current_user">
-            <div className="btn-toolbar justify-content-between align-items-center m-1" role="toolbar">
+            <div
+              className="btn-toolbar justify-content-between align-items-center m-1"
+              role="toolbar"
+            >
               <div className="d-flex align-items-center p-1">
                 <div className="py-2">
                   <TaskPropStatusIcon
                     id="editorSolution"
+                    reason={invalidGeneratorReason}
                     status={
                       !isValidSolution
                         ? validationStatuses.invalid
                         : getGeneratorStatus(templatesState, taskCurrent)
                     }
-                    reason={invalidGeneratorReason}
                   />
                 </div>
                 <h5 className="pt-2">Step 4: Solution Example</h5>
                 <button
+                  className="btn btn-secondary ml-2 rounded-lg text-nowrap"
+                  disabled={assertsStatus.status === 'none'}
                   title={assertsPanelShowing ? 'Open solution code' : 'Open task asserts'}
                   type="button"
-                  className="btn btn-secondary ml-2 rounded-lg text-nowrap"
                   onClick={toggleAssertsPanel}
-                  disabled={assertsStatus.status === 'none'}
                 >
                   {assertsPanelShowing ? (
                     <>
@@ -273,26 +268,30 @@ function BuilderEditorsWidget() {
                     <>
                       <FontAwesomeIcon className="mr-2" icon="tasks" />
                       Asserts
-                      {asserts.length !== 0 && <span className={assertsBadgeClassName}>{asserts.length}</span>}
-                      {asserts.length === 0 && isGeneratorsError(assertsStatus.status) && <span className={assertsBadgeClassName}>!</span>}
+                      {asserts.length !== 0 && (
+                        <span className={assertsBadgeClassName}>{asserts.length}</span>
+                      )}
+                      {asserts.length === 0 && isGeneratorsError(assertsStatus.status) && (
+                        <span className={assertsBadgeClassName}>!</span>
+                      )}
                     </>
                   )}
                 </button>
               </div>
-              <LanguagePickerView
-                currentLangSlug={editorsLang}
-                isDisabled
-              />
+              <LanguagePickerView isDisabled currentLangSlug={editorsLang} />
             </div>
           </div>
           <div className={!assertsPanelShowing ? 'd-none' : ''}>
             <AssertsOutput asserts={asserts} {...assertsStatus} />
           </div>
-          <div id="editor" className={assertsPanelShowing ? 'd-none' : 'd-flex flex-column flex-grow-1'}>
+          <div
+            className={assertsPanelShowing ? 'd-none' : 'd-flex flex-column flex-grow-1'}
+            id="editor"
+          >
             <Editor {...solutionParams} />
           </div>
           {disabledEditors && (
-            <InfoPopup editable={editable} reloadGeneratorCode={reloadCode} origin={origin} />
+            <InfoPopup editable={editable} origin={origin} reloadGeneratorCode={reloadCode} />
           )}
         </div>
       </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderExampleForm.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderExampleForm.jsx
index fe37dd6c1..0d3c2404b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderExampleForm.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderExampleForm.jsx
@@ -1,10 +1,4 @@
-import React, {
-  useRef,
-  useState,
-  useCallback,
-  memo,
-  useContext,
-} from 'react';
+import React, { useRef, useState, useCallback, memo, useContext } from 'react';
 
 import cn from 'classnames';
 import cloneDeep from 'lodash/cloneDeep';
@@ -53,9 +47,9 @@ function BuilderExampleForm() {
     }
   });
 
-  const inputSignature = useSelector(state => state.builder.task.inputSignature);
-  const outputSignature = useSelector(state => state.builder.task.outputSignature);
-  const examples = useSelector(state => state.builder.task.assertsExamples);
+  const inputSignature = useSelector((state) => state.builder.task.inputSignature);
+  const outputSignature = useSelector((state) => state.builder.task.outputSignature);
+  const examples = useSelector((state) => state.builder.task.assertsExamples);
 
   const [inputSuggest, setInputSuggest] = useState();
   const [outputSuggest, setOutputSuggest] = useState();
@@ -66,21 +60,33 @@ function BuilderExampleForm() {
     setTimeout(() => inputEditTabRef.current?.click(), 10);
     setTimeout(() => inputArgumentNameInputRef.current?.focus(), 400);
   }, [setInputSuggest]);
-  const editInputType = useCallback(item => {
-    setInputSuggest(cloneDeep(item));
-    setTimeout(() => inputEditTabRef.current?.click(), 10);
-    setTimeout(() => inputSuggestRef.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'start',
-    }), 10);
-  }, [setInputSuggest]);
-  const deleteInputType = useCallback(item => {
-    dispatch(actions.removeTaskInputType({
-      typeId: item.id,
-    }));
-    taskService.send('CHANGES');
-  }, [dispatch, taskService]);
+  const editInputType = useCallback(
+    (item) => {
+      setInputSuggest(cloneDeep(item));
+      setTimeout(() => inputEditTabRef.current?.click(), 10);
+      setTimeout(
+        () =>
+          inputSuggestRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+          }),
+        10,
+      );
+    },
+    [setInputSuggest],
+  );
+  const deleteInputType = useCallback(
+    (item) => {
+      dispatch(
+        actions.removeTaskInputType({
+          typeId: item.id,
+        }),
+      );
+      taskService.send('CHANGES');
+    },
+    [dispatch, taskService],
+  );
   const clearInputSuggest = useCallback(() => {
     setInputSuggest();
     argumentsTabRef.current?.click();
@@ -91,18 +97,20 @@ function BuilderExampleForm() {
     taskService.send('CHANGES');
 
     let inputSignatureTypeCount = inputSignature.length;
-    const existedInputType = inputSignature.find(
-      item => item.id === inputSuggest.id,
-    );
+    const existedInputType = inputSignature.find((item) => item.id === inputSuggest.id);
 
     if (existedInputType) {
-      dispatch(actions.updateTaskInputType({
-        newType: cloneDeep(inputSuggest),
-      }));
+      dispatch(
+        actions.updateTaskInputType({
+          newType: cloneDeep(inputSuggest),
+        }),
+      );
     } else {
-      dispatch(actions.addTaskInputType({
-        newType: cloneDeep(inputSuggest),
-      }));
+      dispatch(
+        actions.addTaskInputType({
+          newType: cloneDeep(inputSuggest),
+        }),
+      );
       inputSignatureTypeCount += 1;
     }
 
@@ -111,20 +119,32 @@ function BuilderExampleForm() {
     } else {
       createInputTypeSuggest();
     }
-  }, [createInputTypeSuggest, clearInputSuggest, inputSignature, inputSuggest, dispatch, taskService]);
+  }, [
+    createInputTypeSuggest,
+    clearInputSuggest,
+    inputSignature,
+    inputSuggest,
+    dispatch,
+    taskService,
+  ]);
 
-  const editOutputType = useCallback(newOutputSignature => {
-    setOutputSuggest(cloneDeep(newOutputSignature));
-    setTimeout(() => outputEditTabRef.current?.click(), 10);
-  }, [setOutputSuggest]);
+  const editOutputType = useCallback(
+    (newOutputSignature) => {
+      setOutputSuggest(cloneDeep(newOutputSignature));
+      setTimeout(() => outputEditTabRef.current?.click(), 10);
+    },
+    [setOutputSuggest],
+  );
   const clearOutputSuggest = useCallback(() => {
     setOutputSuggest();
     argumentsTabRef.current?.click();
   }, [setOutputSuggest]);
   const submitNewOutputType = useCallback(() => {
-    dispatch(actions.updateTaskOutputType({
-      newType: cloneDeep(outputSuggest),
-    }));
+    dispatch(
+      actions.updateTaskOutputType({
+        newType: cloneDeep(outputSuggest),
+      }),
+    );
 
     taskService.send('CHANGES');
     clearOutputSuggest();
@@ -135,36 +155,48 @@ function BuilderExampleForm() {
     setTimeout(() => exampleEditTabRef.current?.click(), 10);
     setTimeout(() => exampleArgumentsInputRef.current?.focus(), 400);
   }, []);
-  const editExample = useCallback(example => {
-    setExampleSuggest(cloneDeep(example));
-    setTimeout(() => exampleEditTabRef.current?.click(), 10);
-    setTimeout(() => exampleSuggestRef.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'start',
-    }), 10);
-  }, [setExampleSuggest]);
-  const deleteExample = useCallback(example => {
-    dispatch(actions.removeTaskExample({
-      exampleId: example.id,
-    }));
-    taskService.send('CHANGES');
-  }, [dispatch, taskService]);
+  const editExample = useCallback(
+    (example) => {
+      setExampleSuggest(cloneDeep(example));
+      setTimeout(() => exampleEditTabRef.current?.click(), 10);
+      setTimeout(
+        () =>
+          exampleSuggestRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+          }),
+        10,
+      );
+    },
+    [setExampleSuggest],
+  );
+  const deleteExample = useCallback(
+    (example) => {
+      dispatch(
+        actions.removeTaskExample({
+          exampleId: example.id,
+        }),
+      );
+      taskService.send('CHANGES');
+    },
+    [dispatch, taskService],
+  );
   const clearExample = useCallback(() => {
     setExampleSuggest();
     argumentsTabRef.current?.click();
   }, [setExampleSuggest]);
   const submitNewExample = useCallback(() => {
-    const existingExample = examples.find(example => (example.id === exampleSuggest.id));
+    const existingExample = examples.find((example) => example.id === exampleSuggest.id);
 
     taskService.send('CHANGES');
-    const setExample = existingExample
-      ? actions.updateTaskExample
-      : actions.addTaskExample;
+    const setExample = existingExample ? actions.updateTaskExample : actions.addTaskExample;
 
-    dispatch(setExample({
-      newExample: cloneDeep(exampleSuggest),
-    }));
+    dispatch(
+      setExample({
+        newExample: cloneDeep(exampleSuggest),
+      }),
+    );
 
     createExampleSuggest();
   }, [examples, exampleSuggest, createExampleSuggest, dispatch, taskService]);
@@ -185,55 +217,55 @@ function BuilderExampleForm() {
         >
           <a
             ref={argumentsTabRef}
+            aria-controls="arguments"
+            aria-selected="true"
             className={`${navbarItemClassName} active`}
-            id="arguments-tab"
             data-toggle="tab"
             href="#arguments"
+            id="arguments-tab"
             role="tab"
-            aria-controls="arguments"
-            aria-selected="true"
           >
             Step 2
           </a>
           <a
             ref={inputEditTabRef}
+            aria-controls="inputEdit"
+            aria-selected="false"
             className={cn(navbarItemClassName, {
               'd-none': !inputSuggest,
             })}
-            id="inputEdit-tab"
             data-toggle="tab"
             href="#inputEdit"
+            id="inputEdit-tab"
             role="tab"
-            aria-controls="inputEdit"
-            aria-selected="false"
           >
             Input
           </a>
           <a
             ref={outputEditTabRef}
+            aria-controls="outputEdit"
+            aria-selected="false"
             className={cn(navbarItemClassName, {
               'd-none': !outputSuggest,
             })}
-            id="outputEdit-tab"
             data-toggle="tab"
             href="#outputEdit"
+            id="outputEdit-tab"
             role="tab"
-            aria-controls="outputEdit"
-            aria-selected="false"
           >
             Output
           </a>
           <a
             ref={exampleEditTabRef}
+            aria-controls="exampleEdit"
+            aria-selected="false"
             className={cn(navbarItemClassName, {
               'd-none': !exampleSuggest,
             })}
-            id="exampleEdit-tab"
             data-toggle="tab"
             href="#exampleEdit"
+            id="exampleEdit-tab"
             role="tab"
-            aria-controls="exampleEdit"
-            aria-selected="false"
           >
             Example
           </a>
@@ -244,77 +276,77 @@ function BuilderExampleForm() {
         id="nav-tabContent"
       >
         <div
+          aria-labelledby="task-tab"
           className="tab-pane fade show active"
           id="arguments"
           role="tabpanel"
-          aria-labelledby="task-tab"
         >
           <PreviewAssertsPanel
-            haveInputSuggest={!!inputSuggest}
-            haveExampleSuggest={!!exampleSuggest}
+            clearExample={clearExample}
             clearSuggests={clearSuggests}
-            openInputEditPanel={openInputEditPanel}
-            openExampleEditPanel={openExampleEditPanel}
+            createExampleSuggest={createExampleSuggest}
             createInputTypeSuggest={createInputTypeSuggest}
-            editInputType={editInputType}
+            deleteExample={deleteExample}
             deleteInputType={deleteInputType}
-            editOutputType={editOutputType}
-            createExampleSuggest={createExampleSuggest}
             editExample={editExample}
-            clearExample={clearExample}
-            deleteExample={deleteExample}
+            editInputType={editInputType}
+            editOutputType={editOutputType}
+            haveExampleSuggest={!!exampleSuggest}
+            haveInputSuggest={!!inputSuggest}
+            openExampleEditPanel={openExampleEditPanel}
+            openInputEditPanel={openInputEditPanel}
           />
         </div>
         <div
+          aria-labelledby="intputEdit-tab"
           className="tab-pane fade show"
           id="inputEdit"
           role="tabpanel"
-          aria-labelledby="intputEdit-tab"
         >
           <InputSignatureEditPanel
             argumentNameInputRef={inputArgumentNameInputRef}
-            items={inputSignature}
-            suggest={inputSuggest}
-            suggestRef={inputSuggestRef}
             handleAdd={createInputTypeSuggest}
-            handleEdit={editInputType}
+            handleClear={clearInputSuggest}
             handleDelete={deleteInputType}
+            handleEdit={editInputType}
             handleSubmit={submitNewInputSignature}
-            handleClear={clearInputSuggest}
+            items={inputSignature}
+            suggest={inputSuggest}
+            suggestRef={inputSuggestRef}
           />
         </div>
         <div
+          aria-labelledby="outputEdit-tab"
           className="tab-pane fade show"
           id="outputEdit"
           role="tabpanel"
-          aria-labelledby="outputEdit-tab"
         >
           <OutputSignatureEditPanel
-            item={outputSignature}
-            suggest={outputSuggest}
+            handleClear={clearOutputSuggest}
             handleEdit={editOutputType}
             handleSubmit={submitNewOutputType}
-            handleClear={clearOutputSuggest}
+            item={outputSignature}
+            suggest={outputSuggest}
           />
         </div>
         <div
+          aria-labelledby="exampleEdit-tab"
           className="tab-pane fade show"
           id="exampleEdit"
           role="tabpanel"
-          aria-labelledby="exampleEdit-tab"
         >
           <ExamplesEditPanel
             argumentsInputRef={exampleArgumentsInputRef}
-            items={examples}
+            handleAdd={createExampleSuggest}
+            handleClear={clearExample}
+            handleDelete={deleteExample}
+            handleEdit={editExample}
+            handleSubmit={submitNewExample}
             inputSignature={inputSignature}
+            items={examples}
             outputSignature={outputSignature}
             suggest={exampleSuggest}
             suggestRef={exampleSuggestRef}
-            handleAdd={createExampleSuggest}
-            handleEdit={editExample}
-            handleDelete={deleteExample}
-            handleSubmit={submitNewExample}
-            handleClear={clearExample}
           />
         </div>
       </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderSettingsWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderSettingsWidget.jsx
index 0146a39b5..8f26968b6 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderSettingsWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderSettingsWidget.jsx
@@ -15,10 +15,10 @@ function BuilderSettingsWidget({ setConfigurationModalShowing }) {
 
   const task = useSelector(selectors.builderTaskSelector);
   const {
+    mode: gameRoomMode,
     startsAt,
-    timeoutSeconds,
     state: gameStateName,
-    mode: gameRoomMode,
+    timeoutSeconds,
   } = useSelector(selectors.gameStatusSelector);
   const taskLanguage = useSelector(selectors.taskDescriptionLanguageselector);
 
@@ -26,7 +26,7 @@ function BuilderSettingsWidget({ setConfigurationModalShowing }) {
     setConfigurationModalShowing(true);
   }, [setConfigurationModalShowing]);
 
-  const handleSetLanguage = lang => () => dispatch(actions.setTaskDescriptionLanguage(lang));
+  const handleSetLanguage = (lang) => () => dispatch(actions.setTaskDescriptionLanguage(lang));
 
   return (
     <>
@@ -39,33 +39,33 @@ function BuilderSettingsWidget({ setConfigurationModalShowing }) {
               role="tablist"
             >
               <a
+                aria-controls="task"
+                aria-selected="true"
                 className="nav-item nav-link col-3 border-0 active rounded-0 px-1 py-2"
-                id="task-tab"
                 data-toggle="tab"
                 href="#task"
+                id="task-tab"
                 role="tab"
-                aria-controls="task"
-                aria-selected="true"
               >
                 Step 1
               </a>
               <a
+                aria-controls="taskStatus"
+                aria-selected="false"
                 className="nav-item nav-link col-3 border-0 rounded-0 px-1 py-2"
-                id="taskStatus-tab"
                 data-toggle="tab"
                 href="#taskStatus"
+                id="taskStatus-tab"
                 role="tab"
-                aria-controls="taskStatus"
-                aria-selected="false"
               >
                 Status
               </a>
               <div className="rounded-0 text-center bg-white border-left col-6 text-black px-1 py-2">
                 <TimerContainer
-                  time={startsAt}
+                  gameStateName={gameStateName}
                   mode={gameRoomMode}
+                  time={startsAt}
                   timeoutSeconds={timeoutSeconds}
-                  gameStateName={gameStateName}
                 />
               </div>
             </div>
@@ -75,23 +75,23 @@ function BuilderSettingsWidget({ setConfigurationModalShowing }) {
             id="nav-tabContent"
           >
             <div
+              aria-labelledby="task-tab"
               className="tab-pane fade show active h-100"
               id="task"
               role="tabpanel"
-              aria-labelledby="task-tab"
             >
               <BuilderTaskAssignment
-                task={task}
-                taskLanguage={taskLanguage}
                 handleSetLanguage={handleSetLanguage}
                 openConfiguration={openTaskConfiguration}
+                task={task}
+                taskLanguage={taskLanguage}
               />
             </div>
             <div
+              aria-labelledby="taskStatus-tab"
               className="tab-pane h-100"
               id="taskStatus"
               role="tabpanel"
-              aria-labelledby="taskStatus-tab"
             >
               <BuilderStatus task={task} />
             </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderStatus.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderStatus.jsx
index 2ef3a79ed..7a5d0737d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderStatus.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderStatus.jsx
@@ -19,96 +19,89 @@ function BuilderStatus() {
   const taskCurrent = useMachineStateSelector(taskService, taskStateSelector);
 
   const [isValidName, invalidNameReason] = useSelector(
-    state => state.builder.validationStatuses.name,
+    (state) => state.builder.validationStatuses.name,
   );
   const [isValidDescription, invalidDescriptionReason] = useSelector(
-    state => state.builder.validationStatuses.description,
+    (state) => state.builder.validationStatuses.description,
   );
   const [isValidInputSignature, invalidInputReason] = useSelector(
-    state => state.builder.validationStatuses.inputSignature,
+    (state) => state.builder.validationStatuses.inputSignature,
   );
   const [isValidExamples, invalidExamplesReason] = useSelector(
-    state => state.builder.validationStatuses.assertsExamples,
+    (state) => state.builder.validationStatuses.assertsExamples,
+  );
+  const [isValidArgumentsGenerator, invalidArgumentsGeneratorReason] = useSelector(
+    (state) => state.builder.validationStatuses.argumentsGenerator,
   );
-  const [
-    isValidArgumentsGenerator,
-    invalidArgumentsGeneratorReason,
-  ] = useSelector(state => state.builder.validationStatuses.argumentsGenerator);
   const [isValidSolution, invalidSolutionReason] = useSelector(
-    state => state.builder.validationStatuses.solution,
+    (state) => state.builder.validationStatuses.solution,
   );
 
-  const templateState = useSelector(state => state.builder.templates.state);
+  const templateState = useSelector((state) => state.builder.templates.state);
 
   return (
     <div className="p-3">
       <p className="small">
         <TaskPropStatusIcon
           id="statusName"
-          status={
-            isValidName ? validationStatuses.valid : validationStatuses.invalid
-          }
           reason={invalidNameReason}
+          status={isValidName ? validationStatuses.valid : validationStatuses.invalid}
         />
         Name
       </p>
       <p className="small">
         <TaskPropStatusIcon
           id="statusDescription"
-          status={
-            isValidDescription
-              ? validationStatuses.valid
-              : validationStatuses.invalid
-          }
           reason={invalidDescriptionReason}
+          status={isValidDescription ? validationStatuses.valid : validationStatuses.invalid}
         />
         Description
       </p>
       <p className="small">
         <TaskPropStatusIcon
           id="statusSignature"
+          reason={invalidInputReason}
           status={
             !isValidInputSignature
               ? validationStatuses.invalid
               : mapStateToValidationStatus[taskCurrent.value]
           }
-          reason={invalidInputReason}
         />
         Type Signatures
       </p>
       <p className="small">
         <TaskPropStatusIcon
           id="statusExamples"
+          reason={invalidExamplesReason}
           status={
             !isValidExamples
               ? validationStatuses.invalid
               : mapStateToValidationStatus[taskCurrent.value]
           }
-          reason={invalidExamplesReason}
         />
         Examples
       </p>
       <p className="small">
         <TaskPropStatusIcon
           id="statusArgumentsGenerator"
+          reason={invalidArgumentsGeneratorReason}
           status={
             !isValidArgumentsGenerator
               ? validationStatuses.invalid
               : getGeneratorStatus(templateState, taskCurrent)
           }
-          reason={invalidArgumentsGeneratorReason}
         />
         Input arguments generator
       </p>
       <p className="small">
         <TaskPropStatusIcon
           id="statusSolution"
+          reason={invalidSolutionReason}
           status={
             !isValidSolution
               ? validationStatuses.invalid
               : getGeneratorStatus(templateState, taskCurrent)
           }
-          reason={invalidSolutionReason}
         />
         Solution Example
       </p>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderTaskAssignment.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderTaskAssignment.jsx
index 05b4ef93e..39d15b8b8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderTaskAssignment.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/BuilderTaskAssignment.jsx
@@ -18,49 +18,51 @@ import useTaskDescriptionParams from '../../utils/useTaskDescriptionParams';
 import TaskDescriptionMarkdown from '../game/TaskDescriptionMarkdown';
 import TaskLanguagesSelection from '../game/TaskLanguageSelection';
 
-const defaultLevels = ['elementary', 'easy', 'medium', 'hard'].map(level => ({
+const defaultLevels = ['elementary', 'easy', 'medium', 'hard'].map((level) => ({
   value: level,
   label: capitalize(level),
 }));
 
-const ConfigurationButton = ({ onClick, disabled }) => (
-  <button
-    type="button"
-    className="btn btn-outline-secondary mr-1 btn-sm text-nowrap rounded-lg"
-    onClick={onClick}
-    data-toggle="tooltip"
-    data-placement="top"
-    title="Open task details"
-    disabled={disabled}
-  >
-    <FontAwesomeIcon icon="cog" />
-    <span className="ml-1">Details</span>
-  </button>
-);
+function ConfigurationButton({ disabled, onClick }) {
+  return (
+    <button
+      className="btn btn-outline-secondary mr-1 btn-sm text-nowrap rounded-lg"
+      data-placement="top"
+      data-toggle="tooltip"
+      disabled={disabled}
+      title="Open task details"
+      type="button"
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon="cog" />
+      <span className="ml-1">Details</span>
+    </button>
+  );
+}
 
 const renderGameLevelSelectButton = (level, handleSetLevel) => (
   <div className="dropdown mr-1">
     <button
-      type="button"
-      title="level"
+      aria-expanded="false"
       className={cn('btn border-gray dropdown-toggle rounded-lg', {
         'p-0': level === 'hard' || level === 'medium',
         'p-1': level === 'elementary' || level === 'easy',
       })}
-      data-toggle="dropdown"
-      aria-expanded="false"
       data-offset="10,20"
+      data-toggle="dropdown"
+      title="level"
+      type="button"
     >
       <img alt={level} src={`/assets/images/levels/${level}.svg`} />
     </button>
     <div className="dropdown-menu">
-      {defaultLevels.map(({ value, label }) => (
+      {defaultLevels.map(({ label, value }) => (
         <button
           key={value}
-          type="button"
           aria-label={value}
           className={cn('dropdown-item', { active: value === level })}
           data-value={value}
+          type="button"
           onClick={handleSetLevel}
         >
           {label}
@@ -70,16 +72,14 @@ const renderGameLevelSelectButton = (level, handleSetLevel) => (
   </div>
 );
 
-function BuilderTaskAssignment({
-  task,
-  taskLanguage,
-  handleSetLanguage,
-  openConfiguration,
-}) {
+function BuilderTaskAssignment({ handleSetLanguage, openConfiguration, task, taskLanguage }) {
   const dispatch = useDispatch();
 
   const editable = useSelector(selectors.canEditTask);
-  const [avaibleLanguages, displayLanguage, description] = useTaskDescriptionParams(task, taskLanguage);
+  const [avaibleLanguages, displayLanguage, description] = useTaskDescriptionParams(
+    task,
+    taskLanguage,
+  );
   const descriptionTextMapping = {
     en: task.descriptionEn,
     ru: task.descriptionRu,
@@ -87,7 +87,7 @@ function BuilderTaskAssignment({
   const taskDescriptionText = descriptionTextMapping[taskLanguage];
 
   const handleSetLevel = useCallback(
-    event => {
+    (event) => {
       const { value } = event.currentTarget.dataset;
       dispatch(actions.setTaskLevel({ level: value }));
     },
@@ -95,7 +95,7 @@ function BuilderTaskAssignment({
   );
 
   const handleSetDescription = useCallback(
-    event => {
+    (event) => {
       dispatch(
         actions.setTaskDescription({
           lang: taskLanguage,
@@ -107,17 +107,17 @@ function BuilderTaskAssignment({
   );
 
   const [validName, invalidNameReason] = useSelector(
-    state => state.builder.validationStatuses.name,
+    (state) => state.builder.validationStatuses.name,
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const validateName = useCallback(
-    debounce(name => dispatch(validateTaskName(name)), 700),
+    debounce((name) => dispatch(validateTaskName(name)), 700),
     [],
   );
 
   const handleSetName = useCallback(
-    event => {
+    (event) => {
       dispatch(actions.setTaskName({ name: event.target.value }));
       validateName(event.target.value);
     },
@@ -139,23 +139,18 @@ function BuilderTaskAssignment({
               {task.state === taskStateCodes.blank ? (
                 <div className="position-relative">
                   <input
-                    type="text"
-                    className={cn(
-                      'form-control form-control-sm rounded-lg ml-2',
-                      {
-                        'is-invalid': !validName && task.name.length > 0,
-                      },
-                    )}
-                    placeholder="Enter name"
-                    aria-label="Task Name"
                     aria-describedby="basic-addon1"
+                    aria-label="Task Name"
+                    className={cn('form-control form-control-sm rounded-lg ml-2', {
+                      'is-invalid': !validName && task.name.length > 0,
+                    })}
+                    placeholder="Enter name"
+                    type="text"
                     value={task.name}
                     onChange={handleSetName}
                   />
                   {!validName && task.name.length > 0 && (
-                    <div className="invalid-tooltip ml-2">
-                      {invalidNameReason}
-                    </div>
+                    <div className="invalid-tooltip ml-2">{invalidNameReason}</div>
                   )}
                 </div>
               ) : (
@@ -170,11 +165,11 @@ function BuilderTaskAssignment({
             </h6>
           )}
           <div className="d-flex align-items-center mb-2">
-            <ConfigurationButton onClick={openConfiguration} disabled={!editable} />
+            <ConfigurationButton disabled={!editable} onClick={openConfiguration} />
             <TaskLanguagesSelection
-              handleSetLanguage={handleSetLanguage}
               avaibleLanguages={avaibleLanguages}
               displayLanguage={displayLanguage}
+              handleSetLanguage={handleSetLanguage}
             />
           </div>
         </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplePreview.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplePreview.jsx
index 39bf179a9..44d179f5f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplePreview.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplePreview.jsx
@@ -2,24 +2,16 @@ import React from 'react';
 
 import { itemActionClassName, itemClassName } from '../../utils/builder';
 
-const getText = (args, expected) => (
-  `${JSON.stringify(args)} -> ${JSON.stringify(expected)}`
-);
+const getText = (args, expected) => `${JSON.stringify(args)} -> ${JSON.stringify(expected)}`;
 
-const ExamplePreview = ({
-  arguments: args,
-  expected,
-}) => (
-  <div
-    className={itemClassName}
-  >
-    <div
-      title={getText(args, expected)}
-      className={itemActionClassName}
-    >
-      {getText(args, expected)}
+function ExamplePreview({ arguments: args, expected }) {
+  return (
+    <div className={itemClassName}>
+      <div className={itemActionClassName} title={getText(args, expected)}>
+        {getText(args, expected)}
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default ExamplePreview;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesEditPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesEditPanel.jsx
index 4c659c2c8..ea7d5f20d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesEditPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesEditPanel.jsx
@@ -11,22 +11,24 @@ import ExamplesTrack from './ExamplesTrack';
 import SignatureTrack from './SignatureTrack';
 
 function ExampleForm({
+  argumentsInputRef,
   example,
   exampleRef,
-  argumentsInputRef,
-  validationStatus,
   handleClear,
   handleEdit,
   handleReset,
   handleSubmit,
+  validationStatus,
 }) {
   const handleArguments = useCallback(
-    event => {
+    (event) => {
       const data = event.target.value;
       const newExample = cloneDeep({ ...example, arguments: data });
       if (exampleRef?.current) {
         exampleRef.current.scrollIntoView({
-          behavior: 'smooth', block: 'nearest', inline: 'start',
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'start',
         });
       }
 
@@ -35,12 +37,14 @@ function ExampleForm({
     [example, exampleRef, handleEdit],
   );
   const handleExpected = useCallback(
-    event => {
+    (event) => {
       const data = event.target.value;
       const newExample = cloneDeep({ ...example, expected: data });
       if (exampleRef?.current) {
         exampleRef.current.scrollIntoView({
-          behavior: 'smooth', block: 'nearest', inline: 'start',
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'start',
         });
       }
 
@@ -55,57 +59,44 @@ function ExampleForm({
         <div className="d-flex position-relative">
           <input
             ref={argumentsInputRef}
-            className={cn(
-              'form-control cb-builder-argument-input m-1 rounded-lg',
-              {
-                'is-invalid': !validationStatus.arguments.valid,
-              },
-            )}
+            className={cn('form-control cb-builder-argument-input m-1 rounded-lg', {
+              'is-invalid': !validationStatus.arguments.valid,
+            })}
             value={example?.arguments || ''}
             onChange={handleArguments}
           />
-          <div className="invalid-tooltip">
-            {validationStatus.arguments.reason}
-          </div>
+          <div className="invalid-tooltip">{validationStatus.arguments.reason}</div>
         </div>
         <div className="d-flex position-relative">
           <input
-            className={cn(
-              'form-control cb-builder-argument-input m-1 rounded-lg',
-              {
-                'is-invalid': !validationStatus.expected.valid,
-              },
-            )}
+            className={cn('form-control cb-builder-argument-input m-1 rounded-lg', {
+              'is-invalid': !validationStatus.expected.valid,
+            })}
             value={example?.expected || ''}
             onChange={handleExpected}
           />
-          <div className="invalid-tooltip">
-            {validationStatus.expected.reason}
-          </div>
+          <div className="invalid-tooltip">{validationStatus.expected.reason}</div>
         </div>
       </div>
       <div className="d-flex">
         <button
-          type="button"
           className="btn btn-sm m-1 text-white btn-success rounded-lg"
+          disabled={!validationStatus.arguments.valid || !validationStatus.expected.valid}
+          type="button"
           onClick={handleSubmit}
-          disabled={
-            !validationStatus.arguments.valid
-            || !validationStatus.expected.valid
-          }
         >
           Submit
         </button>
         <button
-          type="button"
           className="btn btn-sm m-1 mx-1 btn-secondary rounded-lg"
+          type="button"
           onClick={handleReset}
         >
           <FontAwesomeIcon icon="redo" />
         </button>
         <button
-          type="button"
           className="btn btn-sm m-1 btn-danger rounded-lg"
+          type="button"
           onClick={handleClear}
         >
           <FontAwesomeIcon icon="times" />
@@ -116,21 +107,21 @@ function ExampleForm({
 }
 
 function ExamplesEditPanel({
-  items,
   argumentsInputRef,
-  suggest,
-  suggestRef,
-  valid = true,
-  inputSignature,
-  outputSignature,
   handleAdd,
-  handleEdit,
+  handleClear,
   handleDelete,
+  handleEdit,
   handleSubmit,
-  handleClear,
+  inputSignature,
+  items,
+  outputSignature,
+  suggest,
+  suggestRef,
+  valid = true,
 }) {
   const handleReset = useCallback(() => {
-    const existedExample = items.find(item => item.id === suggest?.id);
+    const existedExample = items.find((item) => item.id === suggest?.id);
 
     if (existedExample) {
       handleEdit(cloneDeep(existedExample));
@@ -156,23 +147,21 @@ function ExamplesEditPanel({
             <SignatureTrack items={inputSignature} />
             <div className="text-nowrap align-self-center mr-2">{'->'}</div>
             <div className={itemClassName} role="group">
-              <div className={itemActionClassName}>
-                {`(${outputSignature.type.name})`}
-              </div>
+              <div className={itemActionClassName}>{`(${outputSignature.type.name})`}</div>
             </div>
           </div>
           <h6 className="pl-1">Examples: </h6>
           <div className="d-flex mb-2">
             <ExamplesTrack
+              editable
+              handleAdd={handleAdd}
+              handleClear={handleClear}
+              handleDelete={handleDelete}
+              handleEdit={handleEdit}
               items={items}
               selected={suggest}
               selectedRef={suggestRef}
               valid={valid}
-              handleAdd={handleAdd}
-              handleEdit={handleEdit}
-              handleDelete={handleDelete}
-              handleClear={handleClear}
-              editable
             />
           </div>
         </div>
@@ -180,24 +169,20 @@ function ExamplesEditPanel({
           <h6 className="pl-1">Example Value Edit: </h6>
           <div className="overflow-auto d-flex">
             <ExampleForm
+              argumentsInputRef={argumentsInputRef}
               example={suggest}
               exampleRef={suggestRef}
-              argumentsInputRef={argumentsInputRef}
-              validationStatus={validationStatus}
+              handleClear={handleClear}
               handleEdit={handleEdit}
               handleReset={handleReset}
-              handleClear={handleClear}
               handleSubmit={handleSubmit}
+              validationStatus={validationStatus}
             />
           </div>
         </div>
       </div>
       <div>
-        <button
-          type="button"
-          className="btn btn-sm rounded-circle"
-          onClick={handleClear}
-        >
+        <button className="btn btn-sm rounded-circle" type="button" onClick={handleClear}>
           <FontAwesomeIcon icon="times" />
         </button>
       </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesTrack.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesTrack.jsx
index 57569f385..0fee883eb 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesTrack.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/ExamplesTrack.jsx
@@ -4,92 +4,77 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
-import {
-  itemClassName,
-  itemActionClassName,
-  itemAddClassName,
-} from '../../utils/builder';
+import { itemClassName, itemActionClassName, itemAddClassName } from '../../utils/builder';
 
-const getValueText = (value = '') => (value || '?');
+const getValueText = (value = '') => value || '?';
 
-const ExamplesTrack = ({
+function ExamplesTrack({
+  editable,
+  handleAdd,
+  handleDelete,
+  handleEdit,
   items = [],
   selected = {},
   selectedRef,
   valid = true,
-  editable,
-  handleAdd,
-  handleEdit,
-  handleDelete,
-}) => (
-  <>
-    {items.map(item => (
-      <div
-        key={item.id}
-        className={cn(itemClassName, {
-          'border-warning': selected?.id === item.id,
-          'border-danger': selected?.id !== item.id && !valid,
-        })}
-        role="group"
-      >
+}) {
+  return (
+    <>
+      {items.map((item) => (
         <div
-          ref={selectedRef}
-          title={`Example: ${item.id}`}
-          className={itemActionClassName}
+          key={item.id}
+          className={cn(itemClassName, {
+            'border-warning': selected?.id === item.id,
+            'border-danger': selected?.id !== item.id && !valid,
+          })}
+          role="group"
         >
-          {
-            selected?.id === item.id
+          <div ref={selectedRef} className={itemActionClassName} title={`Example: ${item.id}`}>
+            {selected?.id === item.id
               ? `${getValueText(selected?.arguments)} -> ${getValueText(selected?.expected)}`
-              : `${getValueText(item.arguments)} -> ${getValueText(item.expected)}`
-          }
+              : `${getValueText(item.arguments)} -> ${getValueText(item.expected)}`}
+          </div>
+          {editable && selected?.id !== item.id && (
+            <>
+              <button
+                className={`btn ${itemActionClassName} btn-outline-secondary`}
+                title={`Edit example: ${item.id}`}
+                type="button"
+                onClick={() => handleEdit(item)}
+              >
+                <FontAwesomeIcon icon="pen" />
+              </button>
+              <button
+                className={`btn ${itemActionClassName} btn-outline-danger rounded-right`}
+                title={`Remove example: ${item.id}`}
+                type="button"
+                onClick={() => handleDelete(item)}
+              >
+                <FontAwesomeIcon icon="trash" />
+              </button>
+            </>
+          )}
         </div>
-        {editable && selected?.id !== item.id && (
-          <>
-            <button
-              type="button"
-              title={`Edit example: ${item.id}`}
-              className={`btn ${itemActionClassName} btn-outline-secondary`}
-              onClick={() => handleEdit(item)}
-            >
-              <FontAwesomeIcon icon="pen" />
-            </button>
-            <button
-              type="button"
-              title={`Remove example: ${item.id}`}
-              className={`btn ${itemActionClassName} btn-outline-danger rounded-right`}
-              onClick={() => handleDelete(item)}
-            >
-              <FontAwesomeIcon icon="trash" />
-            </button>
-          </>
-        )}
-      </div>
-    ))}
-    {!isEmpty(selected) && !items.some(item => item.id === selected.id) && (
-      <div
-        key={selected.id}
-        className={`${itemClassName} border-warning`}
-        role="group"
-      >
-        <div
-          title="New Example"
-          className={itemActionClassName}
-        >
-          {`${getValueText(selected.arguments)} -> ${getValueText(selected.expected)}`}
+      ))}
+      {!isEmpty(selected) && !items.some((item) => item.id === selected.id) && (
+        <div key={selected.id} className={`${itemClassName} border-warning`} role="group">
+          <div className={itemActionClassName} title="New Example">
+            {`${getValueText(selected.arguments)} -> ${getValueText(selected.expected)}`}
+          </div>
         </div>
-      </div>
-    )}
-    {!isEmpty(selected) && items.some(item => item.id === selected.id) && (
-      <button
-        type="button"
-        title="Add input parameter"
-        className={itemAddClassName}
-        onClick={handleAdd}
-      >
-        <FontAwesomeIcon icon="plus" />
-      </button>
-    )}
-  </>
-);
+      )}
+      {!isEmpty(selected) && items.some((item) => item.id === selected.id) && (
+        <button
+          className={itemAddClassName}
+          title="Add input parameter"
+          type="button"
+          onClick={handleAdd}
+        >
+          <FontAwesomeIcon icon="plus" />
+        </button>
+      )}
+    </>
+  );
+}
 
 export default ExamplesTrack;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/InputSignatureEditPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/InputSignatureEditPanel.jsx
index 30770d15a..195aa05f5 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/InputSignatureEditPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/InputSignatureEditPanel.jsx
@@ -1,42 +1,41 @@
-import React, {
-  useMemo,
-  useCallback,
-} from 'react';
+import React, { useMemo, useCallback } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 
-import {
-  argumentTypes,
-  defaultSignatureByType,
-} from '../../utils/builder';
+import { argumentTypes, defaultSignatureByType } from '../../utils/builder';
 
 import SignatureForm from './SignatureForm';
 import SignatureTrack from './SignatureTrack';
 
 function InputSignatureEditPanel({
-  items = [],
   argumentNameInputRef,
-  suggest,
-  suggestRef,
-  valid = true,
   handleAdd,
-  handleEdit,
+  handleClear,
   handleDelete,
+  handleEdit,
   handleSubmit,
-  handleClear,
+  items = [],
+  suggest,
+  suggestRef,
+  valid = true,
 }) {
-  const handleChangeName = useCallback(event => {
-    handleEdit({ ...suggest, argumentName: event.target.value });
-    if (suggestRef?.current) {
-      suggestRef.current.scrollIntoView({
-        behavior: 'smooth', block: 'nearest', inline: 'start',
-      });
-    }
-  }, [suggest, suggestRef, handleEdit]);
+  const handleChangeName = useCallback(
+    (event) => {
+      handleEdit({ ...suggest, argumentName: event.target.value });
+      if (suggestRef?.current) {
+        suggestRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'start',
+        });
+      }
+    },
+    [suggest, suggestRef, handleEdit],
+  );
 
   const handleReset = useCallback(() => {
-    const existedInputSignature = items.find(item => item.id === suggest?.id);
+    const existedInputSignature = items.find((item) => item.id === suggest?.id);
 
     if (existedInputSignature) {
       handleEdit(existedInputSignature);
@@ -64,7 +63,9 @@ function InputSignatureEditPanel({
       return [false, 'Only lowercase latin'];
     }
 
-    if (items.find(item => item.id !== suggest.id && item.argumentName === suggest.argumentName)) {
+    if (
+      items.find((item) => item.id !== suggest.id && item.argumentName === suggest.argumentName)
+    ) {
       return [false, 'Name must be unig'];
     }
 
@@ -79,14 +80,14 @@ function InputSignatureEditPanel({
           <div className="overflow-auto mb-2">
             {suggest && (
               <SignatureTrack
+                editable
+                handleAdd={handleAdd}
+                handleDelete={handleDelete}
+                handleEdit={handleEdit}
                 items={items}
                 selected={suggest}
                 selectedRef={suggestRef}
                 valid={valid}
-                handleAdd={handleAdd}
-                handleEdit={handleEdit}
-                handleDelete={handleDelete}
-                editable
               />
             )}
           </div>
@@ -98,14 +99,11 @@ function InputSignatureEditPanel({
               <div className="input-group position-relative">
                 <input
                   ref={argumentNameInputRef}
-                  className={cn(
-                    'form-control cb-builder-argument-input m-1 rounded-lg',
-                    {
-                      'is-invalid': !validName,
-                    },
-                  )}
-                  onChange={handleChangeName}
+                  className={cn('form-control cb-builder-argument-input m-1 rounded-lg', {
+                    'is-invalid': !validName,
+                  })}
                   value={suggest?.argumentName || ''}
+                  onChange={handleChangeName}
                 />
               </div>
             </div>
@@ -113,30 +111,27 @@ function InputSignatureEditPanel({
               <h6 className="pl-1">Type: </h6>
               <div className="d-flex">
                 <div className="overflow-auto d-flex pb-2">
-                  <SignatureForm
-                    signature={suggest}
-                    handleEdit={handleEdit}
-                  />
+                  <SignatureForm handleEdit={handleEdit} signature={suggest} />
                 </div>
                 <div className="d-flex btn-group pb-2 m-1">
                   <button
-                    type="button"
                     className="btn btn-sm text-white btn-success rounded-lg"
-                    onClick={handleSubmit}
                     disabled={!validName}
+                    type="button"
+                    onClick={handleSubmit}
                   >
                     Submit
                   </button>
                   <button
-                    type="button"
                     className="btn btn-sm mx-2 btn-secondary rounded-lg"
+                    type="button"
                     onClick={handleReset}
                   >
                     <FontAwesomeIcon icon="redo" />
                   </button>
                   <button
-                    type="button"
                     className="btn btn-sm btn-danger rounded-lg"
+                    type="button"
                     onClick={handleClear}
                   >
                     <FontAwesomeIcon icon="times" />
@@ -149,9 +144,9 @@ function InputSignatureEditPanel({
       </div>
       <div>
         <button
-          type="button"
-          title="Clear suggest"
           className="btn btn-sm rounded-circle"
+          title="Clear suggest"
+          type="button"
           onClick={handleClear}
         >
           <FontAwesomeIcon icon="times" />
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/OutputSignatureEditPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/OutputSignatureEditPanel.jsx
index e4374ff1c..96e461064 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/OutputSignatureEditPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/OutputSignatureEditPanel.jsx
@@ -1,25 +1,13 @@
-import React, {
-  useCallback,
-} from 'react';
+import React, { useCallback } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import isEmpty from 'lodash/isEmpty';
 
-import {
-  defaultSignatureByType,
-  argumentTypes,
-  itemActionClassName,
-} from '../../utils/builder';
+import { defaultSignatureByType, argumentTypes, itemActionClassName } from '../../utils/builder';
 
 import SignatureForm from './SignatureForm';
 
-function OutputSignatureEditPanel({
-  item,
-  suggest,
-  handleEdit,
-  handleSubmit,
-  handleClear,
-}) {
+function OutputSignatureEditPanel({ handleClear, handleEdit, handleSubmit, item, suggest }) {
   const handleReset = useCallback(() => {
     if (item) {
       handleEdit(item);
@@ -38,11 +26,12 @@ function OutputSignatureEditPanel({
         <div className="d-flex flex-column ml-2 overflow-auto">
           <h6 className="pl-1">Output type: </h6>
           <div className="d-flex">
-            <div key={suggest.id} className="btn-group m-1 border-gray border-warning rounded-lg" role="group">
-              <div
-                title="New Output"
-                className={itemActionClassName}
-              >
+            <div
+              key={suggest.id}
+              className="btn-group m-1 border-gray border-warning rounded-lg"
+              role="group"
+            >
+              <div className={itemActionClassName} title="New Output">
                 {`(${suggest.type.name})`}
               </div>
             </div>
@@ -52,19 +41,19 @@ function OutputSignatureEditPanel({
           <h6 className="pl-1">Type: </h6>
           <div className="d-flex">
             <div className="overflow-auto d-flex pb-2">
-              <SignatureForm signature={suggest} handleEdit={handleEdit} />
+              <SignatureForm handleEdit={handleEdit} signature={suggest} />
             </div>
             <div className="d-flex btn-group pb-2 m-1">
               <button
-                type="button"
                 className="btn btn-sm text-white btn-success rounded-lg"
+                type="button"
                 onClick={handleSubmit}
               >
                 {item ? 'Update' : 'Submit'}
               </button>
               <button
-                type="button"
                 className="btn btn-sm mx-2 btn-secondary rounded-lg"
+                type="button"
                 onClick={handleReset}
               >
                 <FontAwesomeIcon icon="redo" />
@@ -74,7 +63,7 @@ function OutputSignatureEditPanel({
         </div>
       </div>
       <div>
-        <button type="button" className="btn btn-sm rounded-circle" onClick={handleClear}>
+        <button className="btn btn-sm rounded-circle" type="button" onClick={handleClear}>
           <FontAwesomeIcon icon="times" />
         </button>
       </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/PreviewAssertsPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/PreviewAssertsPanel.jsx
index db79173b3..cb0dba079 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/PreviewAssertsPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/PreviewAssertsPanel.jsx
@@ -18,7 +18,7 @@ import BuilderActions from './BuilderActions';
 import ExamplesTrack from './ExamplesTrack';
 import SignatureTrack from './SignatureTrack';
 
-const TaskStateBadge = ({ state }) => {
+function TaskStateBadge({ state }) {
   const className = cn('badge py-2 mb-2', {
     'badge-danger': state === taskStateCodes.disabled,
     'badge-success': state === taskStateCodes.active,
@@ -30,39 +30,37 @@ const TaskStateBadge = ({ state }) => {
   }
 
   return <span className={className}>{state}</span>;
-};
+}
 
 function PreviewAssertsPanel({
-  haveInputSuggest,
-  haveExampleSuggest,
-
   clearSuggests,
-
-  openInputEditPanel,
-  openExampleEditPanel,
+  createExampleSuggest,
 
   createInputTypeSuggest,
-  editInputType,
+
+  deleteExample,
   deleteInputType,
-  editOutputType,
 
-  createExampleSuggest,
   editExample,
-  deleteExample,
+  editInputType,
+  editOutputType,
+  haveExampleSuggest,
+
+  haveInputSuggest,
+  openExampleEditPanel,
+  openInputEditPanel,
 }) {
   const {
+    assertsExamples: examples,
     inputSignature,
     outputSignature,
-    assertsExamples: examples,
     state: taskState,
-  } = useSelector(state => state.builder.task);
+  } = useSelector((state) => state.builder.task);
 
   const validInputSignature = useSelector(
-    state => state.builder.validationStatuses.inputSignature[0],
-  );
-  const validExamples = useSelector(
-    state => state.builder.validationStatuses.assertsExamples[0],
+    (state) => state.builder.validationStatuses.inputSignature[0],
   );
+  const validExamples = useSelector((state) => state.builder.validationStatuses.assertsExamples[0]);
 
   const editable = useSelector(selectors.canEditTask);
 
@@ -74,23 +72,21 @@ function PreviewAssertsPanel({
           <div className="d-flex overflow-auto pb-2">
             <SignatureTrack
               editable={editable}
+              handleDelete={deleteInputType}
+              handleEdit={editInputType}
               items={inputSignature}
               valid={validInputSignature}
-              handleEdit={editInputType}
-              handleDelete={deleteInputType}
             />
           </div>
           {editable && inputSignature.length !== MAX_INPUT_ARGUMENTS_COUNT && (
             <div className="d-flex mb-2">
               <button
-                type="button"
-                title="Add input parameter"
                 className={cn(itemAddClassName, {
                   'ml-1': inputSignature.length === 0,
                 })}
-                onClick={
-                  haveInputSuggest ? openInputEditPanel : createInputTypeSuggest
-                }
+                title="Add input parameter"
+                type="button"
+                onClick={haveInputSuggest ? openInputEditPanel : createInputTypeSuggest}
               >
                 <FontAwesomeIcon icon={haveInputSuggest ? 'edit' : 'plus'} />
               </button>
@@ -102,17 +98,14 @@ function PreviewAssertsPanel({
           <div className="d-flex overflow-auto pb-2">
             {!!outputSignature && (
               <div className={itemClassName} role="group">
-                <div
-                  title={`(${outputSignature.type.name})`}
-                  className={itemActionClassName}
-                >
+                <div className={itemActionClassName} title={`(${outputSignature.type.name})`}>
                   {`(${outputSignature.type.name})`}
                 </div>
                 {editable && (
                   <button
-                    type="button"
-                    title="Edit output parameter"
                     className={`btn ${itemActionClassName} btn-outline-secondary rounded-right`}
+                    title="Edit output parameter"
+                    type="button"
                     onClick={() => editOutputType({ ...outputSignature })}
                   >
                     <FontAwesomeIcon icon="pen" />
@@ -126,27 +119,23 @@ function PreviewAssertsPanel({
         <div className="d-flex">
           <div className="d-flex overflow-auto pb-2">
             <ExamplesTrack
-              items={examples}
               editable={editable}
-              valid={validExamples}
-              handleEdit={editExample}
               handleDelete={deleteExample}
+              handleEdit={editExample}
+              items={examples}
+              valid={validExamples}
             />
           </div>
           {editable && (
             <div className="d-flex mb-2">
               <button
-                type="button"
-                title="Add example"
                 className={cn(itemAddClassName, {
                   'ml-1': examples.length === 0,
                 })}
-                onClick={
-                  haveExampleSuggest
-                    ? openExampleEditPanel
-                    : createExampleSuggest
-                }
                 disabled={inputSignature.length === 0}
+                title="Add example"
+                type="button"
+                onClick={haveExampleSuggest ? openExampleEditPanel : createExampleSuggest}
               >
                 <FontAwesomeIcon icon={haveExampleSuggest ? 'edit' : 'plus'} />
               </button>
@@ -156,10 +145,7 @@ function PreviewAssertsPanel({
       </div>
       <div className="d-flex flex-column pl-1">
         <TaskStateBadge state={taskState} />
-        <BuilderActions
-          validExamples={validExamples}
-          clearSuggests={clearSuggests}
-        />
+        <BuilderActions clearSuggests={clearSuggests} validExamples={validExamples} />
       </div>
     </div>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureForm.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureForm.jsx
index e92cc0cb5..b9c1d4212 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureForm.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureForm.jsx
@@ -1,7 +1,4 @@
-import React, {
-  useMemo,
-  useCallback,
-} from 'react';
+import React, { useMemo, useCallback } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 import reverse from 'lodash/reverse';
@@ -13,7 +10,7 @@ import {
   MAX_NESTED_TYPE_LEVEL,
 } from '../../utils/builder';
 
-const resolveSignatureToTypes = signature => {
+const resolveSignatureToTypes = (signature) => {
   if (!signature) {
     return [];
   }
@@ -29,21 +26,24 @@ const resolveSignatureToTypes = signature => {
   return types;
 };
 
-function SignatureForm({ signature, handleEdit }) {
+function SignatureForm({ handleEdit, signature }) {
   const types = useMemo(() => resolveSignatureToTypes(signature), [signature]);
 
-  const handleSelect = useCallback((newType, nestedIndex) => {
-    const newTypes = types.map((type, index) => (index === nestedIndex ? newType : type));
-    const newSuggestType = reverse(newTypes).reduce((acc, type) => {
-      if (haveNestedType(type)) {
-        const nested = isEmpty(acc) ? { name: argumentTypes.integer } : acc;
-        return { name: type, nested };
-      }
+  const handleSelect = useCallback(
+    (newType, nestedIndex) => {
+      const newTypes = types.map((type, index) => (index === nestedIndex ? newType : type));
+      const newSuggestType = reverse(newTypes).reduce((acc, type) => {
+        if (haveNestedType(type)) {
+          const nested = isEmpty(acc) ? { name: argumentTypes.integer } : acc;
+          return { name: type, nested };
+        }
 
-      return { name: type };
-    }, {});
-    handleEdit({ argumentName: signature.argumentName, id: signature.id, type: newSuggestType });
-  }, [handleEdit, types, signature]);
+        return { name: type };
+      }, {});
+      handleEdit({ argumentName: signature.argumentName, id: signature.id, type: newSuggestType });
+    },
+    [handleEdit, types, signature],
+  );
 
   if (isEmpty(signature)) {
     return null;
@@ -54,16 +54,14 @@ function SignatureForm({ signature, handleEdit }) {
       // eslint-disable-next-line react/no-array-index-key
       key={`${typeName}-${index}`}
       className="form-control custom-select rounded-lg m-1 cb-builder-type-selector"
-      value={typeName}
-      onChange={e => { handleSelect(e.target.value, index); }}
       size={1}
+      value={typeName}
+      onChange={(e) => {
+        handleSelect(e.target.value, index);
+      }}
     >
-      {argumentTypeNames.map(t => (
-        <option
-          key={t}
-          value={t}
-          disabled={haveNestedType(t) && index + 1 > MAX_NESTED_TYPE_LEVEL}
-        >
+      {argumentTypeNames.map((t) => (
+        <option key={t} disabled={haveNestedType(t) && index + 1 > MAX_NESTED_TYPE_LEVEL} value={t}>
           {t}
         </option>
       ))}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignaturePreview.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignaturePreview.jsx
index e1142d388..b56a472d2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignaturePreview.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignaturePreview.jsx
@@ -2,24 +2,16 @@ import React from 'react';
 
 import { itemActionClassName, itemClassName } from '../../utils/builder';
 
-const getText = (name, type) => (
-  name ? `${name} (${type.name})` : `(${type.name})`
-);
+const getText = (name, type) => (name ? `${name} (${type.name})` : `(${type.name})`);
 
-const SignaturePreview = ({
-  argumentName,
-  type,
-}) => (
-  <div
-    className={itemClassName}
-  >
-    <div
-      title={getText(argumentName, type)}
-      className={itemActionClassName}
-    >
-      {getText(argumentName, type)}
+function SignaturePreview({ argumentName, type }) {
+  return (
+    <div className={itemClassName}>
+      <div className={itemActionClassName} title={getText(argumentName, type)}>
+        {getText(argumentName, type)}
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default SignaturePreview;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureTrack.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureTrack.jsx
index 64fef4b3d..a46929b6f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureTrack.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/SignatureTrack.jsx
@@ -4,88 +4,83 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
-import {
-  itemActionClassName,
-  itemAddClassName,
-  itemClassName,
-} from '../../utils/builder';
+import { itemActionClassName, itemAddClassName, itemClassName } from '../../utils/builder';
 
-const getName = (name = '') => (name || '?');
+const getName = (name = '') => name || '?';
 
-const SignatureTrack = ({
+function SignatureTrack({
+  editable,
+  handleAdd,
+  handleDelete,
+  handleEdit,
   items = [],
   selected = {},
   selectedRef,
   valid = true,
-  editable,
-  handleAdd,
-  handleEdit,
-  handleDelete,
-}) => (
-  <>
-    {items.map(item => (
-      <div
-        key={item.id}
-        className={cn(itemClassName, {
-          'border-warning': selected.id === item.id,
-          'border-danger': selected.id !== item.id && !valid,
-        })}
-        role="group"
-      >
+}) {
+  return (
+    <>
+      {items.map((item) => (
         <div
-          ref={selectedRef}
-          title={`${item.argumentName} (${item.type.name})`}
-          className={itemActionClassName}
+          key={item.id}
+          className={cn(itemClassName, {
+            'border-warning': selected.id === item.id,
+            'border-danger': selected.id !== item.id && !valid,
+          })}
+          role="group"
         >
-          {
-            selected?.id === item.id
+          <div
+            ref={selectedRef}
+            className={itemActionClassName}
+            title={`${item.argumentName} (${item.type.name})`}
+          >
+            {selected?.id === item.id
               ? `${getName(selected.argumentName)} (${selected.type.name})`
-              : `${getName(item.argumentName)} (${item.type.name})`
-          }
+              : `${getName(item.argumentName)} (${item.type.name})`}
+          </div>
+          {editable && selected.id !== item.id && (
+            <>
+              <button
+                className={`btn ${itemActionClassName} btn-outline-secondary`}
+                title={`Edit ${item.argumentName}`}
+                type="button"
+                onClick={() => handleEdit(item)}
+              >
+                <FontAwesomeIcon icon="pen" />
+              </button>
+              <button
+                className={`btn ${itemActionClassName} btn-outline-danger rounded-right`}
+                title={`Delete ${item.argumentName}`}
+                type="button"
+                onClick={() => handleDelete(item)}
+              >
+                <FontAwesomeIcon icon="trash" />
+              </button>
+            </>
+          )}
         </div>
-        {editable && selected.id !== item.id && (
-          <>
-            <button
-              type="button"
-              title={`Edit ${item.argumentName}`}
-              className={`btn ${itemActionClassName} btn-outline-secondary`}
-              onClick={() => handleEdit(item)}
-            >
-              <FontAwesomeIcon icon="pen" />
-            </button>
-            <button
-              type="button"
-              title={`Delete ${item.argumentName}`}
-              className={`btn ${itemActionClassName} btn-outline-danger rounded-right`}
-              onClick={() => handleDelete(item)}
-            >
-              <FontAwesomeIcon icon="trash" />
-            </button>
-          </>
-        )}
-      </div>
-    ))}
-    {!isEmpty(selected) && !items.some(item => item.id === selected.id) && (
-      <div key={selected.id} className={`${itemClassName} border-warning`} role="group">
-        <div
-          title="New input"
-          className={itemActionClassName}
-        >
-          {`${selected.argumentName || '?'} (${selected.type.name})`}
+      ))}
+      {!isEmpty(selected) && !items.some((item) => item.id === selected.id) && (
+        <div key={selected.id} className={`${itemClassName} border-warning`} role="group">
+          <div className={itemActionClassName} title="New input">
+            {`${selected.argumentName || '?'} (${selected.type.name})`}
+          </div>
         </div>
-      </div>
-    )}
-    {!isEmpty(selected) && items.some(item => item.id === selected.id) && items.length !== 3 && (
-      <button
-        type="button"
-        title="Add input parameter"
-        className={itemAddClassName}
-        onClick={handleAdd}
-      >
-        <FontAwesomeIcon icon="plus" />
-      </button>
-    )}
-  </>
-);
+      )}
+      {!isEmpty(selected) &&
+        items.some((item) => item.id === selected.id) &&
+        items.length !== 3 && (
+          <button
+            className={itemAddClassName}
+            title="Add input parameter"
+            type="button"
+            onClick={handleAdd}
+          >
+            <FontAwesomeIcon icon="plus" />
+          </button>
+        )}
+    </>
+  );
+}
 
 export default SignatureTrack;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfigurationModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfigurationModal.jsx
index 6da96388c..54800705a 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfigurationModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfigurationModal.jsx
@@ -1,6 +1,4 @@
-import React, {
- useState, useCallback, useRef, useEffect, memo,
-} from 'react';
+import React, { useState, useCallback, useRef, useEffect, memo } from 'react';
 
 import cn from 'classnames';
 import Modal from 'react-bootstrap/Modal';
@@ -16,10 +14,10 @@ function TaskConfigurationModal({ modalShowing, setModalShowing }) {
 
   const [configState, setConfigState] = useState('init');
 
-  const task = useSelector(state => state.builder.task);
+  const task = useSelector((state) => state.builder.task);
 
   const onChangeVisibility = useCallback(
-    event => {
+    (event) => {
       if (configState === 'loading') {
         return;
       }
@@ -62,18 +60,16 @@ function TaskConfigurationModal({ modalShowing, setModalShowing }) {
       </Modal.Header>
       <Modal.Body>
         <div
-          className={
-            cn('d-flex custom-control custom-switch', {
-              'text-muted': configState === 'loading',
-            })
-          }
+          className={cn('d-flex custom-control custom-switch', {
+            'text-muted': configState === 'loading',
+          })}
         >
           <input
             ref={visibilityInputRef}
-            type="checkbox"
+            checked={task.visibility === taskVisibilityCodes.public}
             className="custom-control-input"
             id="visibility"
-            checked={task.visibility === taskVisibilityCodes.public}
+            type="checkbox"
             onChange={onChangeVisibility}
           />
           {/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfirmationModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfirmationModal.jsx
index 51dd5b072..a9525b67f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfirmationModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskConfirmationModal.jsx
@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  memo,
-} from 'react';
+import React, { useState, useCallback, useRef, useEffect, memo } from 'react';
 
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
@@ -27,7 +21,7 @@ function TaskConfirmationModal({ modalShowing, taskService }) {
   const [error, setError] = useState(null);
 
   const taskParams = useSelector(taskSelector);
-  const templateState = useSelector(state => state.builder.templates.state);
+  const templateState = useSelector((state) => state.builder.templates.state);
 
   const handleConfirmation = useCallback(() => {
     dispatch(saveTask(taskService, setError));
@@ -47,16 +41,11 @@ function TaskConfirmationModal({ modalShowing, taskService }) {
     return null;
   }
 
-  const title = taskParams.state === taskStateCodes.blank
-    ? 'Confirm task creation'
-    : 'Confirm task changes';
+  const title =
+    taskParams.state === taskStateCodes.blank ? 'Confirm task creation' : 'Confirm task changes';
 
   return (
-    <Modal
-      contentClassName="overflow-auto h-75"
-      show={modalShowing}
-      onHide={handleCancel}
-    >
+    <Modal contentClassName="overflow-auto h-75" show={modalShowing} onHide={handleCancel}>
       <Modal.Header closeButton>
         <Modal.Title>{title}</Modal.Title>
       </Modal.Header>
@@ -112,18 +101,15 @@ function TaskConfirmationModal({ modalShowing, taskService }) {
       </Modal.Body>
       <Modal.Footer>
         <div className="d-flex justify-content-between w-100">
-          <Button
-            onClick={handleCancel}
-            className="btn btn-secondary rounded-lg"
-          >
+          <Button className="btn btn-secondary rounded-lg" onClick={handleCancel}>
             Cancel
           </Button>
           <div className="d-flex">
             {error && <div className="invalid-feedback">{error.message}</div>}
             <Button
               ref={confirmBtnRef}
-              onClick={handleConfirmation}
               className="btn btn-success text-white rounded-lg"
+              onClick={handleConfirmation}
             >
               Confirm
             </Button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskPropStatusIcon.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskPropStatusIcon.jsx
index 51ede35f5..e60ac4dea 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskPropStatusIcon.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/builder/TaskPropStatusIcon.jsx
@@ -16,33 +16,38 @@ const iconByValidStatus = {
   [validationStatuses.validation]: ['fas', 'spinner'],
 };
 
-const getStatusClassName = status => cn('mx-2', {
-  'text-success': status === validationStatuses.valid,
-  'text-danger': status === validationStatuses.invalid,
-  'text-warning cb-loading-icon': status === validationStatuses.validation,
-  'text-black-50': status === validationStatuses.none || status === validationStatuses.edited,
-});
+const getStatusClassName = (status) =>
+  cn('mx-2', {
+    'text-success': status === validationStatuses.valid,
+    'text-danger': status === validationStatuses.invalid,
+    'text-warning cb-loading-icon': status === validationStatuses.validation,
+    'text-black-50': status === validationStatuses.none || status === validationStatuses.edited,
+  });
 
-const Icon = ({ status }) => (
-  <FontAwesomeIcon
-    data-task-prop-status={status}
-    className={getStatusClassName(status)}
-    icon={iconByValidStatus[status]}
-  />
-);
+function Icon({ status }) {
+  return (
+    <FontAwesomeIcon
+      className={getStatusClassName(status)}
+      data-task-prop-status={status}
+      icon={iconByValidStatus[status]}
+    />
+  );
+}
 
-const TaskPropStatusIcon = ({ id, status, reason }) => (
-  reason ? (
+function TaskPropStatusIcon({ id, reason, status }) {
+  return reason ? (
     <OverlayTrigger
-      trigger={isSafari() ? 'click' : 'focus'}
+      overlay={<Tooltip id={id}>reason</Tooltip>}
       placement="top"
-      overlay={(<Tooltip id={id}>reason</Tooltip>)}
+      trigger={isSafari() ? 'click' : 'focus'}
     >
       <span className="cursor-pointer">
         <Icon status={status} />
       </span>
     </OverlayTrigger>
-  ) : (<Icon status={status} />)
-);
+  ) : (
+    <Icon status={status} />
+  );
+}
 
 export default TaskPropStatusIcon;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ActionsAfterGame.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ActionsAfterGame.jsx
index b1ce642ce..c82a64420 100755
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ActionsAfterGame.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ActionsAfterGame.jsx
@@ -25,14 +25,10 @@ function ActionsAfterGame() {
   }
 
   if (gameMode === GameRoomModes.tournament) {
-    return <></>;
+    return null;
   }
 
-  return (
-    <>
-      <RematchButton disabled={isRematchDisabled} />
-    </>
-  );
+  return <RematchButton disabled={isRematchDisabled} />;
 }
 
 export default ActionsAfterGame;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx
index c9d11695e..cb58702f8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx
@@ -7,9 +7,9 @@ import { useSelector } from 'react-redux';
 import gifs from '../../config/gifs';
 import { gamePlayersSelector, currentUserIdSelector } from '../../selectors';
 
-function AnimationModal({ setModalShowing, modalShowing }) {
-  const players = useSelector(state => gamePlayersSelector(state));
-  const currentUserId = useSelector(state => currentUserIdSelector(state));
+function AnimationModal({ modalShowing, setModalShowing }) {
+  const players = useSelector((state) => gamePlayersSelector(state));
+  const currentUserId = useSelector((state) => currentUserIdSelector(state));
   // TODO: Сделать анимацию для спектаторов указать кто победил а кто проиграл
   // Можно сделать в виде MortalCombat
   // assigned to karen9999
@@ -18,9 +18,8 @@ function AnimationModal({ setModalShowing, modalShowing }) {
     return null;
   }
   const { result } = players[currentUserId];
-  const titleModal = result === 'won'
-      ? "Woohoo, you're Champion!!!!!"
-      : "If you read this you've lost the game";
+  const titleModal =
+    result === 'won' ? "Woohoo, you're Champion!!!!!" : "If you read this you've lost the game";
   const buttonText = result === 'won' ? 'Thanks' : "I'll be back";
   const handleCloseModal = () => {
     setModalShowing(false);
@@ -34,15 +33,15 @@ function AnimationModal({ setModalShowing, modalShowing }) {
         <Modal.Body>
           <div className="d-flex justify-content-center">
             <img
+              alt="animation"
               className="w-100 rounded-lg"
-              style={{ maxWidth: '400px', height: '300px' }}
               src={gifs[result]}
-              alt="animation"
+              style={{ maxWidth: '400px', height: '300px' }}
             />
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={handleCloseModal} className="btn btn-secondary rounded-lg">
+          <Button className="btn btn-secondary rounded-lg" onClick={handleCloseModal}>
             {buttonText}
           </Button>
         </Modal.Footer>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ApprovePlaybookButtons.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ApprovePlaybookButtons.jsx
index c75710cfb..be7d5d907 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ApprovePlaybookButtons.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ApprovePlaybookButtons.jsx
@@ -17,51 +17,45 @@ function ApprovePlaybookButtons({ playbookSolutionType }) {
   switch (playbookSolutionType) {
     case SolutionTypeCodes.waitingModerator:
       return (
-        <>
-          <div className="d-flex btn-block">
-            <button
-              type="button"
-              className="btn btn-outline-primary flex-grow-1 mr-1 rounded-lg"
-              onClick={approve}
-            >
-              Approve
-            </button>
-            <button
-              type="button"
-              className="btn btn-outline-danger flex-grow-1 ml-1 rounded-lg"
-              onClick={reject}
-            >
-              Ban
-            </button>
-          </div>
-        </>
-      );
-    case SolutionTypeCodes.complete:
-      return (
-        <>
+        <div className="d-flex btn-block">
           <button
+            className="btn btn-outline-primary flex-grow-1 mr-1 rounded-lg"
             type="button"
-            className="btn btn-block btn-outline-danger rounded-lg"
-            onClick={reject}
+            onClick={approve}
           >
-            To baned list
+            Approve
           </button>
-        </>
-      );
-    case SolutionTypeCodes.baned:
-      return (
-        <>
           <button
+            className="btn btn-outline-danger flex-grow-1 ml-1 rounded-lg"
             type="button"
-            className="btn btn-block btn-outline-primary rounded-lg"
-            onClick={approve}
+            onClick={reject}
           >
-            To approved list
+            Ban
           </button>
-        </>
+        </div>
+      );
+    case SolutionTypeCodes.complete:
+      return (
+        <button
+          className="btn btn-block btn-outline-danger rounded-lg"
+          type="button"
+          onClick={reject}
+        >
+          To baned list
+        </button>
+      );
+    case SolutionTypeCodes.baned:
+      return (
+        <button
+          className="btn btn-block btn-outline-primary rounded-lg"
+          type="button"
+          onClick={approve}
+        >
+          To approved list
+        </button>
       );
     default:
-      return <></>;
+      return null;
   }
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/BackToHomeButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/BackToHomeButton.jsx
index 5a1e04c7c..09caa76cd 100755
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/BackToHomeButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/BackToHomeButton.jsx
@@ -9,7 +9,7 @@ export default function BackToHomeButton() {
   };
 
   return (
-    <button className="btn btn-secondary btn-block rounded-lg" onClick={handleClick} type="button">
+    <button className="btn btn-secondary btn-block rounded-lg" type="button" onClick={handleClick}>
       {title}
     </button>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx
index 4dfb11bc8..b062370d1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ChatWidget.jsx
@@ -1,8 +1,4 @@
-import React, {
-  useContext,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 
 import cn from 'classnames';
 import filter from 'lodash/filter';
@@ -37,13 +33,13 @@ function ChatWidget() {
   const openedReplayer = useMachineStateSelector(mainService, openedReplayerSelector);
   const isTestingRoom = useMachineStateSelector(mainService, inTestingRoomSelector);
 
-  const isTournamentGame = (gameMode === GameRoomModes.tournament);
-  const isStandardGame = (gameMode === GameRoomModes.standard);
+  const isTournamentGame = gameMode === GameRoomModes.tournament;
+  const isStandardGame = gameMode === GameRoomModes.standard;
   const showChatInput = !openedReplayer && !isTestingRoom;
 
   const inputRef = useRef(null);
 
-  const { menuId, menuRequest, displayMenu } = useChatContextMenu({
+  const { displayMenu, menuId, menuRequest } = useChatContextMenu({
     type: 'game',
     users,
     canInvite: isStandardGame,
@@ -57,14 +53,10 @@ function ChatWidget() {
   }, [isTournamentGame, users]);
 
   const activeRoom = useSelector(selectors.activeRoomSelector);
-  const filteredMessages = messages.filter(message => shouldShowMessage(message, activeRoom));
+  const filteredMessages = messages.filter((message) => shouldShowMessage(message, activeRoom));
 
   return (
-    <ChatContextMenu
-      menuId={menuId}
-      inputRef={inputRef}
-      request={menuRequest}
-    >
+    <ChatContextMenu inputRef={inputRef} menuId={menuId} request={menuRequest}>
       <div className="d-flex flex-wrap flex-sm-nowrap shadow-sm h-100 rounded-lg">
         <div
           className={cn(
@@ -72,15 +64,15 @@ function ChatWidget() {
             'game-chat-container cb-messages-container',
           )}
         >
-          <ChatHeader showRooms={isStandardGame} disabled={!isOnline} />
-          {openedReplayer
-            ? <Messages messages={historyMessages} />
-            : <Messages displayMenu={displayMenu} messages={filteredMessages} />}
-          {showChatInput && <ChatInput inputRef={inputRef} disabled={!isOnline} />}
+          <ChatHeader disabled={!isOnline} showRooms={isStandardGame} />
+          {openedReplayer ? (
+            <Messages messages={historyMessages} />
+          ) : (
+            <Messages displayMenu={displayMenu} messages={filteredMessages} />
+          )}
+          {showChatInput && <ChatInput disabled={!isOnline} inputRef={inputRef} />}
           {isTestingRoom && (
-            <div
-              className="d-flex position-absolute w-100 h-100 bg-dark cb-opacity-50 rounded-left justify-content-center text-white"
-            >
+            <div className="d-flex position-absolute w-100 h-100 bg-dark cb-opacity-50 rounded-left justify-content-center text-white">
               <span className="align-self-center">Chat is Disabled</span>
             </div>
           )}
@@ -92,23 +84,21 @@ function ChatWidget() {
             </div>
             {!isTestingRoom && (
               <div className="px-3 py-3 w-100 border-top">
-                <p className="mb-1 text-nowrap">
-                  {`Online players: ${listOfUsers.length}`}
-                </p>
-                {listOfUsers.map(user => (
+                <p className="mb-1 text-nowrap">{`Online players: ${listOfUsers.length}`}</p>
+                {listOfUsers.map((user) => (
                   <div
-                    role="button"
-                    tabIndex={0}
-                    className="my-1"
-                    title={user.name}
                     key={user.id}
+                    className="my-1"
                     data-user-id={user.id}
                     data-user-name={user.name}
-                    onContextMenu={displayMenu}
+                    role="button"
+                    tabIndex={0}
+                    title={user.name}
                     onClick={displayMenu}
+                    onContextMenu={displayMenu}
                     onKeyPress={displayMenu}
                   >
-                    <UserInfo user={user} hideInfo hideOnlineIndicator />
+                    <UserInfo hideInfo hideOnlineIndicator user={user} />
                   </div>
                 ))}
               </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattlePlayer.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattlePlayer.jsx
index 322881be9..b89adcf67 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattlePlayer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattlePlayer.jsx
@@ -60,21 +60,21 @@ class CodebattlePlayer extends Component {
       mainService.send('PLAY');
       this.play(handlerPosition);
     }
-  }
+  };
 
   onPauseClick = () => {
     const { mainService } = this.context;
     mainService.send('PAUSE');
-  }
+  };
 
   onChangeSpeed = () => {
     const { mainService } = this.context;
     mainService.send('TOGGLE_SPEED_MODE');
-  }
+  };
 
   // Slider callbacks
 
-  onSliderHandleChange = value => {
+  onSliderHandleChange = (value) => {
     this.setState({ handlerPosition: value });
 
     const { roomCurrent } = this.props;
@@ -83,15 +83,15 @@ class CodebattlePlayer extends Component {
     if (roomCurrent.matches({ replayer: replayerMachineStates.holded })) {
       setTimeout(this.runSetGameState, setGameStateDelay, value);
     }
-  }
+  };
 
   onSliderHandleChangeStart = () => {
     const { mainService } = this.context;
     mainService.send('HOLD');
-  }
+  };
 
-  onSliderHandleChangeEnd = handlerPosition => {
-    const { setError, roomCurrent } = this.props;
+  onSliderHandleChangeEnd = (handlerPosition) => {
+    const { roomCurrent, setError } = this.props;
     const { mainService } = this.context;
     const { holding } = roomCurrent.context;
 
@@ -106,20 +106,20 @@ class CodebattlePlayer extends Component {
       default:
         setError(new Error('Unexpected holding state [replayer machine]'));
     }
-  }
+  };
 
-  onSliderHandleChangeIntent = intent => {
+  onSliderHandleChangeIntent = (intent) => {
     this.setState(() => ({ lastIntent: intent }));
-  }
+  };
 
   onSliderHandleChangeIntentEnd = () => {
     this.setState(() => ({ lastIntent: 0 }));
-  }
+  };
 
   // Helpers
 
-  setGameState = handlerPosition => {
-    const { setGameStateByRecordId, stepCoefficient, recordsCount } = this.props;
+  setGameState = (handlerPosition) => {
+    const { recordsCount, setGameStateByRecordId, stepCoefficient } = this.props;
     const { mainService } = this.context;
 
     // Based on handler position we can calculate next record
@@ -132,10 +132,10 @@ class CodebattlePlayer extends Component {
     }
 
     this.setState({ handlerPosition, nextRecordId });
-  }
+  };
 
   updateGameState = () => {
-    const { updateGameStateByRecordId, recordsCount } = this.props;
+    const { recordsCount, updateGameStateByRecordId } = this.props;
     const { nextRecordId: recordId } = this.state;
     const { mainService } = this.context;
     const nextRecordId = recordId + 1;
@@ -148,19 +148,19 @@ class CodebattlePlayer extends Component {
     }
 
     this.setState({ nextRecordId });
-  }
+  };
 
-  play = handlerPosition => {
+  play = (handlerPosition) => {
     const { roomCurrent } = this.props;
 
     const { speedMode } = roomCurrent.context;
     const playDelay = playDelays[speedMode];
 
     setTimeout(this.runPlay, playDelay, handlerPosition);
-  }
+  };
 
-  runPlay = handlerPosition => {
-    const { stepCoefficient, roomCurrent } = this.props;
+  runPlay = (handlerPosition) => {
+    const { roomCurrent, stepCoefficient } = this.props;
     const { handlerPosition: currentHandlerPosition } = this.state;
 
     /*
@@ -180,7 +180,7 @@ class CodebattlePlayer extends Component {
     }
   };
 
-  runSetGameState = handlerPosition => {
+  runSetGameState = (handlerPosition) => {
     const { handlerPosition: currentHandlerPosition } = this.state;
 
     /*
@@ -194,11 +194,9 @@ class CodebattlePlayer extends Component {
   };
 
   render() {
-    const { recordsCount, mainEvents, roomCurrent } = this.props;
+    const { mainEvents, recordsCount, roomCurrent } = this.props;
 
-    const {
-      isEnabled, direction, handlerPosition, lastIntent, nextRecordId,
-    } = this.state;
+    const { direction, handlerPosition, isEnabled, lastIntent, nextRecordId } = this.state;
 
     if (!roomCurrent.matches({ replayer: replayerMachineStates.on }) || recordsCount === 0) {
       return null;
@@ -214,27 +212,27 @@ class CodebattlePlayer extends Component {
                 <ControlPanel
                   nextRecordId={nextRecordId}
                   roomCurrent={roomCurrent}
-                  onPlayClick={this.onPlayClick}
-                  onPauseClick={this.onPauseClick}
                   onChangeSpeed={this.onChangeSpeed}
+                  onPauseClick={this.onPauseClick}
+                  onPlayClick={this.onPlayClick}
                 >
                   <Slider
                     className="cb-slider col-md-7 ml-1"
-                    value={handlerPosition}
-                    isEnabled={isEnabled}
                     direction={direction}
+                    isEnabled={isEnabled}
+                    value={handlerPosition}
                     onChange={this.onSliderHandleChange}
-                    onChangeStart={this.onSliderHandleChangeStart}
                     onChangeEnd={this.onSliderHandleChangeEnd}
+                    onChangeStart={this.onSliderHandleChangeStart}
                     onIntent={this.onSliderHandleChangeIntent}
                     onIntentEnd={this.onSliderHandleChangeIntentEnd}
                   >
                     <CodebattleSliderBar
-                      mainEvents={mainEvents}
-                      roomCurrent={roomCurrent}
                       handlerPosition={handlerPosition}
                       lastIntent={lastIntent}
+                      mainEvents={mainEvents}
                       recordsCount={recordsCount}
+                      roomCurrent={roomCurrent}
                       setGameState={this.setGameState}
                     />
                   </Slider>
@@ -250,7 +248,7 @@ class CodebattlePlayer extends Component {
 
 CodebattlePlayer.contextType = RoomContext;
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   const recordsCount = playbookRecordsSelector(state).length;
   const { mainEvents } = state.playbook;
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.jsx
index 1429fad8e..ab61c902b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/CodebattleSliderBar.jsx
@@ -9,86 +9,81 @@ const handleClassnames = 'cb-slider-handle position-absolute rounded-circle';
 const buttonClassnames = 'cb-slider-handle-button position-absolute rounded-circle bg-danger';
 const sliderBarClassnames = 'cb-slider-bar position-absolute rounded';
 
-const SliderBar = ({ value, className }) => (
-  <div
-    className={className}
-    style={{
-      width: `${value * 100}%`,
-    }}
-  />
-);
-
-const SliderAction = ({
- value, className, setGameState, event,
-}) => (
-  <div>
-    <OverlayTrigger
-      placement="top"
-      overlay={(
-        <Tooltip id="tooltip-top">
-          {`Check started by ${event.userName}`}
-        </Tooltip>
-        )}
-    >
-      <div
-        role="button"
-        aria-hidden="true"
-        onClick={() => {
-        setGameState(value);
+function SliderBar({ className, value }) {
+  return (
+    <div
+      className={className}
+      style={{
+        width: `${value * 100}%`,
       }}
-        className={className}
-        style={{
+    />
+  );
+}
+
+function SliderAction({ className, event, setGameState, value }) {
+  return (
+    <div>
+      <OverlayTrigger
+        overlay={<Tooltip id="tooltip-top">{`Check started by ${event.userName}`}</Tooltip>}
+        placement="top"
+      >
+        <div
+          aria-hidden="true"
+          className={className}
+          role="button"
+          style={{
             left: `${value * 100}%`,
           }}
-      />
-    </OverlayTrigger>
-  </div>
+          onClick={() => {
+            setGameState(value);
+          }}
+        />
+      </OverlayTrigger>
+    </div>
   );
+}
 
-const SliderHandle = ({ value, className }) => (
-  <div
-    className={className}
-    style={{
-      left: `${value * 100}%`,
-    }}
-  >
-    <div className={buttonClassnames} />
-  </div>
-);
-
-const CodebattleSliderBar = ({
- roomCurrent, handlerPosition, lastIntent, mainEvents, recordsCount, setGameState,
-}) => (
-  <>
-    <div className="cb-slider-timeline position-absolute rounded w-100 x-bg-gray">
-      {
-        roomCurrent.matches({ replayer: replayerMachineStates.holded })
-          && (
-          <SliderBar
-            className={`${sliderBarClassnames} x-intent-background`}
-            value={lastIntent}
-          />
-)
-      }
-      <SliderBar
-        className={`${sliderBarClassnames} bg-danger`}
-        value={handlerPosition}
-      />
+function SliderHandle({ className, value }) {
+  return (
+    <div
+      className={className}
+      style={{
+        left: `${value * 100}%`,
+      }}
+    >
+      <div className={buttonClassnames} />
     </div>
-    {mainEvents.map(event => (
-      <SliderAction
-        value={event.recordId / recordsCount}
-        className="cb-slider-action position-absolute bg-warning rounded"
-        key={event.recordId}
-        event={event}
-        setGameState={setGameState}
-      />
-    ))}
-    <SliderHandle
-      className={handleClassnames}
-      value={handlerPosition}
-    />
-  </>
-);
+  );
+}
+
+function CodebattleSliderBar({
+  handlerPosition,
+  lastIntent,
+  mainEvents,
+  recordsCount,
+  roomCurrent,
+  setGameState,
+}) {
+  return (
+    <>
+      <div className="cb-slider-timeline position-absolute rounded w-100 x-bg-gray">
+        {roomCurrent.matches({ replayer: replayerMachineStates.holded }) && (
+          <SliderBar className={`${sliderBarClassnames} x-intent-background`} value={lastIntent} />
+        )}
+        <SliderBar className={`${sliderBarClassnames} bg-danger`} value={handlerPosition} />
+      </div>
+      {mainEvents.map((event) => (
+        <SliderAction
+          key={event.recordId}
+          className="cb-slider-action position-absolute bg-warning rounded"
+          event={event}
+          setGameState={setGameState}
+          value={event.recordId / recordsCount}
+        />
+      ))}
+      <SliderHandle className={handleClassnames} value={handlerPosition} />
+    </>
+  );
+}
 
 export default CodebattleSliderBar;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ContributorsList.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ContributorsList.jsx
index 25f75ea49..1f5954ac8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ContributorsList.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ContributorsList.jsx
@@ -6,21 +6,21 @@ import { useDispatch } from 'react-redux';
 
 import { actions } from '../../slices';
 
-const renderContributorsList = contributors => (
+const renderContributorsList = (contributors) => (
   <ul className="d-flex flex-row align-items-begin list-unstyled mb-2">
     {contributors
       ? contributors.map(({ avatarLink, link }) => (
-        <li key={avatarLink}>
-          <a href={link}>
-            <img
-              className="img-fluid mr-3 rounded-lg"
-              width="40"
-              height="40"
-              src={avatarLink}
-              alt="avatar"
-            />
-          </a>
-        </li>
+          <li key={avatarLink}>
+            <a href={link}>
+              <img
+                alt="avatar"
+                className="img-fluid mr-3 rounded-lg"
+                height="40"
+                src={avatarLink}
+                width="40"
+              />
+            </a>
+          </li>
         ))
       : null}
   </ul>
@@ -40,15 +40,15 @@ function ContributorsList({ name }) {
     }
     axios
       .get(url)
-      .then(res => {
-        const authors = res.data.filter(item => item.author);
-        const contributorsList = authors.map(el => ({
+      .then((res) => {
+        const authors = res.data.filter((item) => item.author);
+        const contributorsList = authors.map((el) => ({
           avatarLink: el.author.avatar_url,
           link: el.author.html_url,
         }));
         setAvatars(uniqBy(contributorsList, 'avatarLink'));
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
   }, [url, name, dispatch]);
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ControlPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ControlPanel.jsx
index 2902fe1a8..e96b46cdb 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ControlPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ControlPanel.jsx
@@ -13,12 +13,12 @@ import { actions } from '../../slices';
 const gameId = Gon.getAsset('game_id');
 
 function ControlPanel({
-  roomCurrent,
-  onPauseClick,
-  onPlayClick,
-  onChangeSpeed,
   children,
   nextRecordId,
+  onChangeSpeed,
+  onPauseClick,
+  onPlayClick,
+  roomCurrent,
 }) {
   const dispatch = useDispatch();
 
@@ -47,35 +47,37 @@ function ControlPanel({
   return (
     <>
       <button
-        type="button"
         className="mr-4 btn btn-light rounded-lg"
+        type="button"
         onClick={onControlButtonClick}
       >
         {isPaused ? (
-          <PlayerIcon.Play width={32} height={32} />
+          <PlayerIcon.Play height={32} width={32} />
         ) : (
-          <PlayerIcon.Pause width={32} height={32} />
+          <PlayerIcon.Pause height={32} width={32} />
         )}
       </button>
       {children}
       <div className="dropup ml-2">
         <button
+          aria-expanded="false"
+          aria-haspopup="true"
           className="btn btn-light px-2 ml-1 shadow-none d-flex rounded-lg"
-          type="button"
-          id="dropdownMenuButton"
           data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
+          id="dropdownMenuButton"
+          type="button"
         >
           <i className="fas fa-cog" />
         </button>
-        <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <div aria-labelledby="dropdownMenuButton" className="dropdown-menu">
           <div className="d-flex">
-            <button type="button" className={speedControlClassNames} onClick={onChangeSpeed}>x2</button>
+            <button className={speedControlClassNames} type="button" onClick={onChangeSpeed}>
+              x2
+            </button>
             <button
-              type="button"
               className="btn btn-sm rounded ml-2 border btn-light rounded-lg"
               title="Copy history game url at current record id"
+              type="button"
               onClick={() => {
                 const url = `https://codebattle.hexlet.io/games/${gameId}?t=${nextRecordId}`;
                 copy(url);
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/DarkModeButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/DarkModeButton.jsx
index 9b55f9a4a..dba77af84 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/DarkModeButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/DarkModeButton.jsx
@@ -10,7 +10,7 @@ import { actions } from '../../slices';
 function DakModeButton({ playerId }) {
   const dispatch = useDispatch();
 
-  const currentTheme = useSelector(state => editorsThemeSelector(playerId)(state));
+  const currentTheme = useSelector((state) => editorsThemeSelector(playerId)(state));
 
   const isDarkMode = currentTheme === editorThemes.dark;
   const mode = isDarkMode ? editorThemes.light : editorThemes.dark;
@@ -25,7 +25,7 @@ function DakModeButton({ playerId }) {
   };
 
   return (
-    <button type="button" className={classNames} onClick={handleToggleDarkMode}>
+    <button className={classNames} type="button" onClick={handleToggleDarkMode}>
       {isDarkMode ? 'Light' : 'Dark'}
     </button>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorContainer.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorContainer.jsx
index 320c8b59c..85a66400c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorContainer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorContainer.jsx
@@ -1,8 +1,4 @@
-import React, {
-  useEffect,
-  useContext,
-  useCallback,
-} from 'react';
+import React, { useEffect, useContext, useCallback } from 'react';
 
 import { useInterpret } from '@xstate/react';
 import cn from 'classnames';
@@ -34,25 +30,33 @@ import useMachineStateSelector from '../../utils/useMachineStateSelector';
 import EditorToolbar from './EditorToolbar';
 
 function EditorContainer({
-  id,
-  editorMachine,
-  type,
   cardClassName,
-  theme,
-  editorState,
+  children,
   editorHeight,
+  editorMachine,
   editorMode,
-  children,
+  editorState,
+  id,
+  theme,
+  type,
 }) {
   const dispatch = useDispatch();
   const players = useSelector(selectors.gamePlayersSelector);
   const gameMode = useSelector(selectors.gameModeSelector);
 
   const currentUserId = useSelector(selectors.currentUserIdSelector);
-  const currentEditorLangSlug = useSelector(state => selectors.userLangSelector(state)(currentUserId));
+  const currentEditorLangSlug = useSelector((state) =>
+    selectors.userLangSelector(state)(currentUserId),
+  );
 
-  const updateEditorValue = useCallback(data => dispatch(GameActions.updateEditorText(data)), [dispatch]);
-  const sendEditorValue = useCallback(data => dispatch(GameActions.sendEditorText(data)), [dispatch]);
+  const updateEditorValue = useCallback(
+    (data) => dispatch(GameActions.updateEditorText(data)),
+    [dispatch],
+  );
+  const sendEditorValue = useCallback(
+    (data) => dispatch(GameActions.sendEditorText(data)),
+    [dispatch],
+  );
 
   const { mainService } = useContext(RoomContext);
   const isPreview = useMachineStateSelector(mainService, inPreviewRoomSelector);
@@ -64,41 +68,44 @@ function EditorContainer({
 
   const context = { userId: id, type };
 
-  const editorService = useInterpret(
-    editorMachine,
-    {
-      context,
-      devTools: true,
-      id: `editor_${id}`,
-      actions: {
-        userSendSolution: ctx => {
-          if (ctx.editorState === 'active') {
-            dispatch(GameActions.checkGameSolution());
-          }
-        },
-        handleTimeoutFailureChecking: ctx => {
-          dispatch(actions.updateExecutionOutput({
+  const editorService = useInterpret(editorMachine, {
+    context,
+    devTools: true,
+    id: `editor_${id}`,
+    actions: {
+      userSendSolution: (ctx) => {
+        if (ctx.editorState === 'active') {
+          dispatch(GameActions.checkGameSolution());
+        }
+      },
+      handleTimeoutFailureChecking: (ctx) => {
+        dispatch(
+          actions.updateExecutionOutput({
             userId: ctx.userId,
             status: 'timeout',
             output: '',
             result: {},
             asserts: [],
-          }));
+          }),
+        );
 
-          dispatch(actions.updateCheckStatus({ [ctx.userId]: false }));
-        },
+        dispatch(actions.updateCheckStatus({ [ctx.userId]: false }));
       },
     },
-  );
+  });
 
   const editorCurrent = useMachineStateSelector(editorService, editorStateSelector);
 
-  const checkActiveTaskSolution = useCallback(() => editorService.send('user_check_solution'), [editorService]);
-  const checkTestTaskSolution = useCallback(() => dispatch(GameActions.checkTaskSolution(editorService)), [dispatch, editorService]);
+  const checkActiveTaskSolution = useCallback(
+    () => editorService.send('user_check_solution'),
+    [editorService],
+  );
+  const checkTestTaskSolution = useCallback(
+    () => dispatch(GameActions.checkTaskSolution(editorService)),
+    [dispatch, editorService],
+  );
 
-  const checkResult = inTestingRoom
-    ? checkTestTaskSolution
-    : checkActiveTaskSolution;
+  const checkResult = inTestingRoom ? checkTestTaskSolution : checkActiveTaskSolution;
 
   useEffect(() => {
     if (inTestingRoom) {
@@ -117,7 +124,7 @@ function EditorContainer({
 
   useEffect(() => {
     /** @param {KeyboardEvent} e */
-    const check = e => {
+    const check = (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
         e.preventDefault();
         checkResult();
@@ -132,7 +139,7 @@ function EditorContainer({
       };
     }
 
-    return () => { };
+    return () => {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inTestingRoom]);
 
@@ -146,9 +153,7 @@ function EditorContainer({
     checkResult,
     currentEditorLangSlug,
     ...userSettings,
-    giveUpBtnStatus: isActiveGame
-      ? userSettings.giveUpBtnStatus
-      : EditorBtnStatuses.disabled,
+    giveUpBtnStatus: isActiveGame ? userSettings.giveUpBtnStatus : EditorBtnStatuses.disabled,
   };
 
   const toolbarParams = {
@@ -162,7 +167,8 @@ function EditorContainer({
 
   const canChange = userSettings.type === editorUserTypes.currentUser && !openedReplayer;
   const canSendCursor = canChange && !inTestingRoom && !inBuilderRoom;
-  const updateEditor = editorCurrent.context.editorState === 'testing' ? updateEditorValue : sendEditorValue;
+  const updateEditor =
+    editorCurrent.context.editorState === 'testing' ? updateEditorValue : sendEditorValue;
   const onChange = canChange ? updateEditor : noop();
   const onChangeCursorSelection = canSendCursor ? GameActions.sendEditorCursorSelection : undefined;
   const onChangeCursorPosition = canSendCursor ? GameActions.sendEditorCursorPosition : undefined;
@@ -192,16 +198,12 @@ function EditorContainer({
   });
 
   return (
-    <div data-editor-state={editorCurrent.value} className={pannelBackground}>
-      <div
-        className={cardClassName}
-        style={gameRoomEditorStyles}
-        data-guide-id="LeftEditor"
-      >
+    <div className={pannelBackground} data-editor-state={editorCurrent.value}>
+      <div className={cardClassName} data-guide-id="LeftEditor" style={gameRoomEditorStyles}>
         <EditorToolbar
           {...toolbarParams}
-          toolbarClassNames="btn-toolbar justify-content-between align-items-center m-1"
           editorSettingClassNames="btn-group align-items-center m-1"
+          toolbarClassNames="btn-toolbar justify-content-between align-items-center m-1"
           userInfoClassNames="btn-group align-items-center justify-content-end m-1"
         />
         {children({
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorHeightButtons.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorHeightButtons.jsx
index 8a0aef149..e3a057ab4 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorHeightButtons.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorHeightButtons.jsx
@@ -6,24 +6,24 @@ import { compressEditorHeight, expandEditorHeight } from '../../middlewares/Game
 
 function EditorHeightButtons({ editor: { userId } }) {
   const dispatch = useDispatch();
-  const compressEditor = userID => () => dispatch(compressEditorHeight(userID));
-  const expandEditor = userID => () => dispatch(expandEditorHeight(userID));
+  const compressEditor = (userID) => () => dispatch(compressEditorHeight(userID));
+  const expandEditor = (userID) => () => dispatch(expandEditorHeight(userID));
 
   return (
-    <div className="mx-1" role="group" aria-label="Editor height">
+    <div aria-label="Editor height" className="mx-1" role="group">
       <button
-        type="button"
         className="btn btn-sm btn-light border"
+        type="button"
         onClick={compressEditor(userId)}
       >
-        <i className="fas fa-compress-arrows-alt" aria-hidden="true" />
+        <i aria-hidden="true" className="fas fa-compress-arrows-alt" />
       </button>
       <button
-        type="button"
         className="btn btn-sm btn-light border ml-2"
+        type="button"
         onClick={expandEditor(userId)}
       >
-        <i className="fas fa-expand-arrows-alt" aria-hidden="true" />
+        <i aria-hidden="true" className="fas fa-expand-arrows-alt" />
       </button>
     </div>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx
index 748af9e01..723925b5d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/EditorToolbar.jsx
@@ -10,74 +10,62 @@ import GameResultIcon from './GameResultIcon';
 import UserGameScore from './UserGameScore';
 import VimModeButton from './VimModeButton';
 
-const ModeButtons = ({ player }) => (
-  <div
-    className="btn-group align-items-center mr-auto"
-    role="group"
-    aria-label="Editor mode"
-  >
-    <VimModeButton playerId={player.id} />
-    <DarkModeButton playerId={player.id} />
-  </div>
-);
+function ModeButtons({ player }) {
+  return (
+    <div aria-label="Editor mode" className="btn-group align-items-center mr-auto" role="group">
+      <VimModeButton playerId={player.id} />
+      <DarkModeButton playerId={player.id} />
+    </div>
+  );
+}
 
-const EditorToolbar = ({
-  type,
-  mode,
-  player,
+function EditorToolbar({
+  actionBtnsProps,
   editor,
-  toolbarClassNames,
   editorSettingClassNames,
-  userInfoClassNames,
+  isHistory = false,
   langPickerStatus,
-  actionBtnsProps,
+  mode,
+  player,
   showControlBtns,
-  isHistory = false,
-}) => (
-  <>
-    <div className="rounded-top" data-player-type={type}>
-      <div className={toolbarClassNames} role="toolbar">
-        <div className="d-flex justify-content-between">
-          <div
-            className={editorSettingClassNames}
-            role="group"
-            aria-label="Editor settings"
-          >
-            <LanguagePicker editor={editor} status={langPickerStatus} />
+  toolbarClassNames,
+  type,
+  userInfoClassNames,
+}) {
+  return (
+    <>
+      <div className="rounded-top" data-player-type={type}>
+        <div className={toolbarClassNames} role="toolbar">
+          <div className="d-flex justify-content-between">
+            <div aria-label="Editor settings" className={editorSettingClassNames} role="group">
+              <LanguagePicker editor={editor} status={langPickerStatus} />
+            </div>
+            {showControlBtns && !isHistory && <ModeButtons player={player} />}
           </div>
-          {showControlBtns && !isHistory && <ModeButtons player={player} />}
-        </div>
 
-        <div className="d-flex justify-content-between">
-          {showControlBtns && !isHistory && (
-            <GameActionButtons {...actionBtnsProps} />
-          )}
-          <div
-            className={userInfoClassNames}
-            role="group"
-            aria-label="User info"
-          >
-            <UserInfo user={player} />
-            {mode === GameRoomModes.standard && (
-              <UserGameScore userId={player.id} />
-            )}
+          <div className="d-flex justify-content-between">
+            {showControlBtns && !isHistory && <GameActionButtons {...actionBtnsProps} />}
+            <div aria-label="User info" className={userInfoClassNames} role="group">
+              <UserInfo user={player} />
+              {mode === GameRoomModes.standard && <UserGameScore userId={player.id} />}
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div
-      className="position-absolute"
-      style={{
-        bottom: '5%',
-        right: '5%',
-        opacity: '0.5',
-        zIndex: '100',
-      }}
-    >
-      <GameResultIcon editor={editor} />
-    </div>
-  </>
-);
+      <div
+        className="position-absolute"
+        style={{
+          bottom: '5%',
+          right: '5%',
+          opacity: '0.5',
+          zIndex: '100',
+        }}
+      >
+        <GameResultIcon editor={editor} />
+      </div>
+    </>
+  );
+}
 
 export default EditorToolbar;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
index a9fae77f7..a53df7980 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
@@ -7,7 +7,11 @@ import { useDispatch } from 'react-redux';
 
 import RoomContext from '../../components/RoomContext';
 import { inTestingRoomSelector } from '../../machines/selectors';
-import { sendGiveUp, resetTextToTemplateAndSend, resetTextToTemplate } from '../../middlewares/Game';
+import {
+  sendGiveUp,
+  resetTextToTemplateAndSend,
+  resetTextToTemplate,
+} from '../../middlewares/Game';
 import { actions } from '../../slices';
 import useMachineStateSelector from '../../utils/useMachineStateSelector';
 
@@ -26,19 +30,19 @@ function CheckResultButton({ onClick, status }) {
     case 'enabled':
       return (
         <button type="button" {...commonProps}>
-          <FontAwesomeIcon icon={['fas', 'play-circle']} className="success" />
+          <FontAwesomeIcon className="success" icon={['fas', 'play-circle']} />
         </button>
       );
     case 'checking':
       return (
         <button type="button" {...commonProps} disabled>
-          <FontAwesomeIcon icon="spinner" pulse />
+          <FontAwesomeIcon pulse icon="spinner" />
         </button>
       );
     case 'disabled':
       return (
         <button type="button" {...commonProps} disabled>
-          <FontAwesomeIcon icon={['fas', 'play-circle']} className="success" />
+          <FontAwesomeIcon className="success" icon={['fas', 'play-circle']} />
         </button>
       );
     default: {
@@ -111,11 +115,11 @@ function ResetButton({ onClick, status }) {
 }
 
 function GameActionButtons({
-  currentEditorLangSlug,
-  checkResult,
   checkBtnStatus,
-  resetBtnStatus,
+  checkResult,
+  currentEditorLangSlug,
   giveUpBtnStatus,
+  resetBtnStatus,
 }) {
   const dispatch = useDispatch();
 
@@ -147,21 +151,23 @@ function GameActionButtons({
 
   const renderModal = () => (
     <Modal show={modalShowing} onHide={modalHide}>
-      <Modal.Body className="text-center">
-        Are you sure you want to give up?
-      </Modal.Body>
+      <Modal.Body className="text-center">Are you sure you want to give up?</Modal.Body>
       <Modal.Footer className="mx-auto">
-        <Button onClick={handleGiveUp} className="btn-danger rounded-lg">Give up</Button>
-        <Button onClick={modalHide} className="btn-secondary rounded-lg">Cancel</Button>
+        <Button className="btn-danger rounded-lg" onClick={handleGiveUp}>
+          Give up
+        </Button>
+        <Button className="btn-secondary rounded-lg" onClick={modalHide}>
+          Cancel
+        </Button>
       </Modal.Footer>
     </Modal>
   );
 
   return (
     <div className="py-2 mr-2" role="toolbar">
-      <GiveUpButton onClick={modalShow} status={giveUpBtnStatus} />
-      <ResetButton onClick={handleReset} status={resetBtnStatus} />
-      <CheckResultButton onClick={checkResult} status={checkBtnStatus} />
+      <GiveUpButton status={giveUpBtnStatus} onClick={modalShow} />
+      <ResetButton status={resetBtnStatus} onClick={handleReset} />
+      <CheckResultButton status={checkBtnStatus} onClick={checkResult} />
       {renderModal()}
     </div>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResult.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResult.jsx
index 29ed8f750..b074dc916 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResult.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResult.jsx
@@ -11,18 +11,18 @@ import GameStateCodes from '../../config/gameStateCodes';
 import * as selectors from '../../selectors';
 
 function GameResult() {
-  const currentUserId = useSelector(state => selectors.currentUserIdSelector(state));
-  const players = useSelector(state => selectors.gamePlayersSelector(state));
+  const currentUserId = useSelector((state) => selectors.currentUserIdSelector(state));
+  const players = useSelector((state) => selectors.gamePlayersSelector(state));
   const isCurrentUserPlayer = hasIn(players, currentUserId);
-  const gameStatus = useSelector(state => selectors.gameStatusSelector(state));
-  const gameMode = useSelector(state => selectors.gameModeSelector(state));
+  const gameStatus = useSelector((state) => selectors.gameStatusSelector(state));
+  const gameMode = useSelector((state) => selectors.gameModeSelector(state));
 
   const result = useMemo(() => {
     if (gameStatus.state === GameStateCodes.timeout) {
-      return ({
+      return {
         alertStyle: 'danger',
         msg: 'Time is up. There are no winners in the game',
-      });
+      };
     }
 
     const winner = find(players, ['result', 'won']);
@@ -32,32 +32,28 @@ function GameResult() {
     }
 
     if (currentUserId === winner.id) {
-      const msg = gameMode === GameRoomModes.training
-        ? i18n.t('Win Training Message')
-        : i18n.t('Win Game Message');
+      const msg =
+        gameMode === GameRoomModes.training
+          ? i18n.t('Win Training Message')
+          : i18n.t('Win Game Message');
 
-      return ({
+      return {
         alertStyle: 'success',
         msg,
-      });
-    } if (isCurrentUserPlayer) {
-      return ({
+      };
+    }
+    if (isCurrentUserPlayer) {
+      return {
         alertStyle: 'danger',
         msg: i18n.t('Lose Game Message'),
-      });
+      };
     }
 
     return null;
-  }, [
-    currentUserId,
-    players,
-    isCurrentUserPlayer,
-    gameStatus.state,
-    gameMode,
-  ]);
+  }, [currentUserId, players, isCurrentUserPlayer, gameStatus.state, gameMode]);
 
   if (result) {
-    return (<Alert variant={result.alertStyle}>{result.msg}</Alert>);
+    return <Alert variant={result.alertStyle}>{result.msg}</Alert>;
   }
   return null;
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.jsx
index 74a1e21cd..92d8d731c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameResultIcon.jsx
@@ -20,26 +20,16 @@ function GameResultIcon({ editor: { userId } }) {
 
   if (resultUser1 === 'gave_up') {
     return (
-      <OverlayTrigger
-        overlay={<Tooltip id={tooltipId}>Player gave up</Tooltip>}
-        placement="left"
-      >
-        <img
-          src="/assets/images/big-flag.png"
-          alt="white-flag"
-          style={{ width: '200px' }}
-        />
+      <OverlayTrigger overlay={<Tooltip id={tooltipId}>Player gave up</Tooltip>} placement="left">
+        <img alt="white-flag" src="/assets/images/big-flag.png" style={{ width: '200px' }} />
       </OverlayTrigger>
     );
   }
 
   if (resultUser1 === 'won' && resultUser2 !== 'gave_up') {
     return (
-      <OverlayTrigger
-        overlay={<Tooltip id={tooltipId}>Player won</Tooltip>}
-        placement="left"
-      >
-        <img src="/assets/images/big-gold-cup.png" alt="gold-cup" />
+      <OverlayTrigger overlay={<Tooltip id={tooltipId}>Player won</Tooltip>} placement="left">
+        <img alt="gold-cup" src="/assets/images/big-gold-cup.png" />
       </OverlayTrigger>
     );
   }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameWidget.jsx
index 4b0db1f2a..d16063860 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameWidget.jsx
@@ -16,39 +16,43 @@ import EditorContainer from './EditorContainer';
 import Output from './Output';
 import OutputTab from './OutputTab';
 
-const EditorWrapper = ({ children, id, className }) => (
-  <div id={id} className={className}>
-    {children}
-  </div>
-);
+function EditorWrapper({ children, className, id }) {
+  return (
+    <div className={className} id={id}>
+      {children}
+    </div>
+  );
+}
 
-function RightSide({ output, children }) {
+function RightSide({ children, output }) {
   const [showTab, setShowTab] = useState('editor');
   const isShowOutput = output && output.status;
-  const content = showTab === 'editor' ? (
-    <EditorWrapper id="editor" className="d-flex flex-column flex-grow-1 position-relative">
-      {children}
-    </EditorWrapper>
-  ) : (
-    <div className="d-flex flex-column flex-grow-1 overflow-auto">
-      <div className="h-auto">
-        {isShowOutput && <Output sideOutput={output} />}
+  const content =
+    showTab === 'editor' ? (
+      <EditorWrapper className="d-flex flex-column flex-grow-1 position-relative" id="editor">
+        {children}
+      </EditorWrapper>
+    ) : (
+      <div className="d-flex flex-column flex-grow-1 overflow-auto">
+        <div className="h-auto">{isShowOutput && <Output sideOutput={output} />}</div>
       </div>
-    </div>
-  );
+    );
 
   return (
     <>
       {content}
       <nav>
-        <div className="nav nav-tabs bg-gray text-uppercase text-center font-weight-bold" id="nav-tab" role="tablist">
+        <div
+          className="nav nav-tabs bg-gray text-uppercase text-center font-weight-bold"
+          id="nav-tab"
+          role="tablist"
+        >
           <a
-            className={cn(
-              'nav-item nav-link flex-grow-1 text-black rounded-0 px-5',
-              { active: showTab === 'editor' },
-            )}
+            className={cn('nav-item nav-link flex-grow-1 text-black rounded-0 px-5', {
+              active: showTab === 'editor',
+            })}
             href="#Editor"
-            onClick={e => {
+            onClick={(e) => {
               e.preventDefault();
               setShowTab('editor');
             }}
@@ -56,17 +60,16 @@ function RightSide({ output, children }) {
             Editor
           </a>
           <a
-            className={cn(
-              'nav-item nav-link flex-grow-1 text-black rounded-0 p-2 block',
-              { active: showTab === 'output' },
-            )}
+            className={cn('nav-item nav-link flex-grow-1 text-black rounded-0 p-2 block', {
+              active: showTab === 'output',
+            })}
             href="#Output"
-            onClick={e => {
+            onClick={(e) => {
               e.preventDefault();
               setShowTab('output');
             }}
           >
-            {isShowOutput && <OutputTab sideOutput={output} side="right" />}
+            {isShowOutput && <OutputTab side="right" sideOutput={output} />}
           </a>
         </div>
       </nav>
@@ -83,12 +86,12 @@ function GameWidget({ editorMachine }) {
   const rightEditor = useSelector(selectors.rightEditorSelector(roomCurrent));
   const leftUserId = get(leftEditor, ['userId'], null);
   const rightUserId = get(rightEditor, ['userId'], null);
-  const leftUserType = currentUserId === leftUserId
-    ? editorUserTypes.currentUser
-    : editorUserTypes.player;
-  const rightUserType = leftUserType === editorUserTypes.currentUser
-    ? editorUserTypes.opponent
-    : editorUserTypes.player;
+  const leftUserType =
+    currentUserId === leftUserId ? editorUserTypes.currentUser : editorUserTypes.player;
+  const rightUserType =
+    leftUserType === editorUserTypes.currentUser
+      ? editorUserTypes.opponent
+      : editorUserTypes.player;
 
   const leftEditorHeight = useSelector(selectors.editorHeightSelector(roomCurrent, leftUserId));
   const rightEditorHeight = useSelector(selectors.editorHeightSelector(roomCurrent, rightUserId));
@@ -99,32 +102,30 @@ function GameWidget({ editorMachine }) {
   return (
     <>
       <EditorContainer
-        id={leftUserId}
-        editorMachine={editorMachine}
-        type={leftUserType}
-        orientation="left"
-        editorState={leftEditor}
         cardClassName="card h-100 shadow-sm position-relative"
-        theme={theme}
         editorHeight={leftEditorHeight}
+        editorMachine={editorMachine}
         editorMode={leftEditorsMode}
+        editorState={leftEditor}
+        id={leftUserId}
+        orientation="left"
+        theme={theme}
+        type={leftUserType}
       >
-        {params => (
-          <Editor {...params} />
-        )}
+        {(params) => <Editor {...params} />}
       </EditorContainer>
       <EditorContainer
-        id={rightUserId}
-        editorMachine={editorMachine}
-        type={rightUserType}
-        orientation="right"
-        editorState={rightEditor}
         cardClassName="card h-100 shadow-sm"
-        theme={theme}
         editorHeight={rightEditorHeight}
+        editorMachine={editorMachine}
         editorMode={editorModes.default}
+        editorState={rightEditor}
+        id={rightUserId}
+        orientation="right"
+        theme={theme}
+        type={rightUserType}
       >
-        {params => (
+        {(params) => (
           <RightSide output={rightOutput}>
             <Editor {...params} />
           </RightSide>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GoToNextGame.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GoToNextGame.jsx
index d8c2e8a6d..c31efaa6f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/GoToNextGame.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/GoToNextGame.jsx
@@ -1,19 +1,15 @@
 import React from 'react';
 
-const GoToNextGame = ({ currentUserId, tournamentsInfo: { playerGames } }) => {
+function GoToNextGame({ currentUserId, tournamentsInfo: { playerGames } }) {
   const nextGame = playerGames.find(({ id }) => id === currentUserId);
 
   return (
-    <>
-      {
-        nextGame && (
-          <a className="btn btn-success btn-block" href={`/games/${nextGame.gameId}`}>
-            Go to next game
-          </a>
-        )
-      }
-    </>
+    nextGame && (
+      <a className="btn btn-success btn-block" href={`/games/${nextGame.gameId}`}>
+        Go to next game
+      </a>
+    )
   );
-};
+}
 
 export default GoToNextGame;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/InfoWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/InfoWidget.jsx
index 04675e641..7fd938f69 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/InfoWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/InfoWidget.jsx
@@ -3,7 +3,11 @@ import React, { useContext, memo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import RoomContext from '../../components/RoomContext';
-import { inPreviewRoomSelector, inTestingRoomSelector, roomStateSelector } from '../../machines/selectors';
+import {
+  inPreviewRoomSelector,
+  inTestingRoomSelector,
+  roomStateSelector,
+} from '../../machines/selectors';
 import {
   gameTaskSelector,
   gameStatusSelector,
@@ -30,16 +34,16 @@ function InfoWidget() {
   const taskLanguage = useSelector(taskDescriptionLanguageselector);
   const task = useSelector(isTestingRoom ? builderTaskSelector : gameTaskSelector);
   const {
+    mode: gameRoomMode,
     startsAt,
-    timeoutSeconds,
     state: gameStateName,
-    mode: gameRoomMode,
+    timeoutSeconds,
   } = useSelector(gameStatusSelector);
   const leftOutput = useSelector(leftExecutionOutputSelector(roomCurrent));
   const isShowOutput = leftOutput && leftOutput.status;
   const idOutput = 'leftOutput';
 
-  const handleSetLanguage = lang => () => dispatch(actions.setTaskDescriptionLanguage(lang));
+  const handleSetLanguage = (lang) => () => dispatch(actions.setTaskDescriptionLanguage(lang));
 
   return (
     <>
@@ -52,65 +56,66 @@ function InfoWidget() {
               role="tablist"
             >
               <a
+                aria-controls="task"
+                aria-selected="true"
                 className="nav-item nav-link col-3 border-0 active rounded-0 px-1 py-2"
-                id="task-tab"
                 data-toggle="tab"
                 href="#task"
+                id="task-tab"
                 role="tab"
-                aria-controls="task"
-                aria-selected="true"
               >
                 Task
               </a>
               <a
+                aria-controls={`${idOutput}`}
+                aria-selected="false"
                 className="nav-item nav-link col-3 border-0 rounded-0 px-1 py-2"
-                id={`${idOutput}-tab`}
                 data-toggle="tab"
                 href={`#${idOutput}`}
+                id={`${idOutput}-tab`}
                 role="tab"
-                aria-controls={`${idOutput}`}
-                aria-selected="false"
               >
                 Output
               </a>
-              <div
-                className="rounded-0 text-center bg-white border-left col-6 text-black px-1 py-2"
-              >
+              <div className="rounded-0 text-center bg-white border-left col-6 text-black px-1 py-2">
                 {isPreviewRoom ? (
                   'Loading...'
                 ) : (
                   <TimerContainer
-                    time={startsAt}
+                    gameStateName={gameStateName}
                     mode={gameRoomMode}
+                    time={startsAt}
                     timeoutSeconds={timeoutSeconds}
-                    gameStateName={gameStateName}
                   />
                 )}
               </div>
             </div>
           </nav>
-          <div className="tab-content flex-grow-1 bg-white rounded-bottom overflow-auto " id="nav-tabContent">
+          <div
+            className="tab-content flex-grow-1 bg-white rounded-bottom overflow-auto "
+            id="nav-tabContent"
+          >
             <div
+              aria-labelledby="task-tab"
               className="tab-pane fade show active h-100"
               id="task"
               role="tabpanel"
-              aria-labelledby="task-tab"
             >
               <TaskAssignment
+                handleSetLanguage={handleSetLanguage}
                 task={task}
                 taskLanguage={taskLanguage}
-                handleSetLanguage={handleSetLanguage}
               />
             </div>
             <div
+              aria-labelledby={`${idOutput}-tab`}
               className="tab-pane h-100"
               id={idOutput}
               role="tabpanel"
-              aria-labelledby={`${idOutput}-tab`}
             >
               {isShowOutput && (
                 <>
-                  <OutputTab sideOutput={leftOutput} side="left" />
+                  <OutputTab side="left" sideOutput={leftOutput} />
                   <Output sideOutput={leftOutput} />
                 </>
               )}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/NetworkAlert.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/NetworkAlert.jsx
index 2fd9ba0bd..a50c8a876 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/NetworkAlert.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/NetworkAlert.jsx
@@ -6,7 +6,10 @@ import useMachineStateSelector from '../../utils/useMachineStateSelector';
 
 function NetworkAlert() {
   const { mainService } = useContext(RoomContext);
-  const isDisconnectedWithMessage = useMachineStateSelector(mainService, isDisconnectedWithMessageSelector);
+  const isDisconnectedWithMessage = useMachineStateSelector(
+    mainService,
+    isDisconnectedWithMessageSelector,
+  );
 
   if (isDisconnectedWithMessage) {
     return (
@@ -18,7 +21,7 @@ function NetworkAlert() {
     );
   }
 
-  return (<></>);
+  return null;
 }
 
 export default memo(NetworkAlert);
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/NewGameButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/NewGameButton.jsx
index 130a6daaa..3679a6178 100755
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/NewGameButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/NewGameButton.jsx
@@ -7,26 +7,30 @@ import i18n from '../../../i18n';
 import GameTypeCodes from '../../config/gameTypeCodes';
 import * as selectors from '../../selectors';
 
-const NewGameButton = props => {
-  const { gameTask: { level }, gameMode, timeoutSeconds } = props;
+function NewGameButton(props) {
+  const {
+    gameMode,
+    gameTask: { level },
+    timeoutSeconds,
+  } = props;
   const type = gameMode === GameTypeCodes.regular ? 'withRandomPlayer' : 'withFriend';
   const queryParamsString = qs.stringify({ level, type, timeout_seconds: timeoutSeconds });
   const gameUrl = `/games?${queryParamsString}`;
 
   return (
     <button
-      type="button"
       className="btn btn-secondary btn-block rounded-lg"
-      data-method="post"
       data-csrf={window.csrf_token}
+      data-method="post"
       data-to={gameUrl}
+      type="button"
     >
       {i18n.t('Start new game')}
     </button>
   );
-};
+}
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   timeoutSeconds: selectors.gameStatusSelector(state).timeoutSeconds,
   gameTask: selectors.gameTaskSelector(state),
 });
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/Notifications.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/Notifications.jsx
index 1d3e2acfc..0edc3620b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/Notifications.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/Notifications.jsx
@@ -25,8 +25,8 @@ function Notifications() {
   const { tournamentId } = useSelector(selectors.gameStatusSelector);
   const currentUserId = useSelector(selectors.currentUserIdSelector);
   const players = useSelector(selectors.gamePlayersSelector);
-  const playbookSolutionType = useSelector(state => state.playbook.solutionType);
-  const tournamentsInfo = useSelector(state => state.game.tournamentsInfo);
+  const playbookSolutionType = useSelector((state) => state.playbook.solutionType);
+  const tournamentsInfo = useSelector((state) => state.game.tournamentsInfo);
   const isAdmin = useSelector(selectors.currentUserIsAdminSelector);
   const isCurrentUserPlayer = hasIn(players, currentUserId);
   const isTournamentGame = !!tournamentId;
@@ -36,23 +36,22 @@ function Notifications() {
     <>
       {roomCurrent.matches({ room: roomMachineStates.testing }) && <BackToTaskBuilderButton />}
       <ReplayerControlButton />
-      {(isCurrentUserPlayer && roomCurrent.matches({ room: roomMachineStates.gameOver }))
-        && (
-          <>
-            <GameResult />
-            <ActionsAfterGame />
-          </>
-        )}
-      {(isAdmin && !roomCurrent.matches({ replayer: replayerMachineStates.off })) && (
+      {isCurrentUserPlayer && roomCurrent.matches({ room: roomMachineStates.gameOver }) && (
         <>
-          <ApprovePlaybookButtons playbookSolutionType={playbookSolutionType} />
+          <GameResult />
+          <ActionsAfterGame />
         </>
       )}
-      {isTournamentGame && isActiveTournament
-        && <GoToNextGame tournamentsInfo={tournamentsInfo} currentUserId={currentUserId} />}
+      {isAdmin && !roomCurrent.matches({ replayer: replayerMachineStates.off }) && (
+        <ApprovePlaybookButtons playbookSolutionType={playbookSolutionType} />
+      )}
+      {isTournamentGame && isActiveTournament && (
+        <GoToNextGame currentUserId={currentUserId} tournamentsInfo={tournamentsInfo} />
+      )}
       {isTournamentGame && <BackToTournamentButton />}
-      {!isTournamentGame && !roomCurrent.matches({ room: roomMachineStates.testing })
-        && <BackToHomeButton />}
+      {!isTournamentGame && !roomCurrent.matches({ room: roomMachineStates.testing }) && (
+        <BackToHomeButton />
+      )}
     </>
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/Output.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/Output.jsx
index 3652d8f91..649d63ddf 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/Output.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/Output.jsx
@@ -6,38 +6,32 @@ import uniqueId from 'lodash/uniqueId';
 import AccordeonBox from '../../components/AccordeonBox';
 import color from '../../config/statusColor';
 
-const Output = ({ sideOutput }) => {
-  const {
-    status, output, outputError, asserts, version = 0,
-  } = sideOutput;
+function Output({ sideOutput }) {
+  const { asserts, output, outputError, status, version = 0 } = sideOutput;
 
   const uniqIndex = uniqueId('heading');
-  const normalizedAsserts = version === 2 ? asserts : asserts.map(elem => camelizeKeys(JSON.parse(elem)));
+  const normalizedAsserts =
+    version === 2 ? asserts : asserts.map((elem) => camelizeKeys(JSON.parse(elem)));
   const normalizedOutput = version === 2 ? outputError : output;
 
-  return (
-    <>
-      {['error', 'memory_leak', 'timeout'].includes(status) ? (
-        <AccordeonBox.Item output={normalizedOutput} />
-      ) : (
-        normalizedAsserts
-        && normalizedAsserts.map((assert, index) => (
-          <AccordeonBox.SubMenu
-            key={index.toString()}
-            statusColor={color[assert.status]}
-            executionTime={assert.executionTime}
-            assert={assert}
-            hasOutput={assert.output}
-            uniqIndex={uniqIndex}
-          >
-            <div className="alert alert-secondary mb-0 pb-0">
-              <pre>{assert.output}</pre>
-            </div>
-          </AccordeonBox.SubMenu>
-        ))
-      )}
-    </>
+  return ['error', 'memory_leak', 'timeout'].includes(status) ? (
+    <AccordeonBox.Item output={normalizedOutput} />
+  ) : (
+    normalizedAsserts &&
+      normalizedAsserts.map((assert) => (
+        <AccordeonBox.SubMenu
+          assert={assert}
+          executionTime={assert.executionTime}
+          hasOutput={assert.output}
+          statusColor={color[assert.status]}
+          uniqIndex={uniqIndex}
+        >
+          <div className="alert alert-secondary mb-0 pb-0">
+            <pre>{assert.output}</pre>
+          </div>
+        </AccordeonBox.SubMenu>
+      ))
   );
-};
+}
 
 export default Output;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/OutputTab.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/OutputTab.jsx
index c881a4c95..dd4a36aec 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/OutputTab.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/OutputTab.jsx
@@ -3,10 +3,12 @@ import React from 'react';
 import i18n from '../../../i18n';
 import color from '../../config/statusColor';
 
-const getMessage = status => {
+const getMessage = (status) => {
   switch (status) {
     case 'timeout':
-      return i18n.t("We couldn't retrieve check results. Check your network connection or your solution for bugs or :prod_is_down:");
+      return i18n.t(
+        "We couldn't retrieve check results. Check your network connection or your solution for bugs or :prod_is_down:",
+      );
     case 'error':
       return i18n.t('solution cannot be executed');
     case 'failure':
@@ -18,8 +20,8 @@ const getMessage = status => {
   }
 };
 
-const OutputTab = ({ sideOutput }) => {
-  const { successCount, assertsCount, status } = sideOutput;
+function OutputTab({ sideOutput }) {
+  const { assertsCount, status, successCount } = sideOutput;
   const isShowMessage = status === 'failure';
   const statusColor = color[status];
   const message = getMessage(status);
@@ -34,7 +36,7 @@ const OutputTab = ({ sideOutput }) => {
       {isShowMessage && <span className="font-weight-bold small mr-3">{assertsStatusMessage}</span>}
       <span className={`p-2 bg-${statusColor}`}>{message}</span>
     </>
-);
-};
+  );
+}
 
 export default OutputTab;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/RematchButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/RematchButton.jsx
index 8cf65218d..80b041be9 100755
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/RematchButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/RematchButton.jsx
@@ -21,17 +21,13 @@ const getPlayerStatus = (rematchInitiatorId, currentUserId) => {
 };
 
 const RematchButton = ({
-  gameStatus: { rematchState, rematchInitiatorId },
   currentUserId,
-  isOpponentInGame,
   disabled,
+  gameStatus: { rematchInitiatorId, rematchState },
+  isOpponentInGame,
 }) => {
   const renderBtnAfterReject = () => (
-    <button
-      type="button"
-      className="btn btn-danger btn-block"
-      disabled={disabled}
-    >
+    <button className="btn btn-danger btn-block" disabled={disabled} type="button">
       {i18n.t('Rejected Offer')}
     </button>
   );
@@ -43,11 +39,7 @@ const RematchButton = ({
       'btn-warning': !isOpponentInGame,
     });
     return (
-      <button
-        type="button"
-        className={classNames}
-        disabled
-      >
+      <button disabled className={classNames} type="button">
         {i18n.t(text)}
       </button>
     );
@@ -59,23 +51,19 @@ const RematchButton = ({
       <div className="d-flex">
         <button
           className="btn btn-outline-secondary mr-1"
+          title="Accept"
           type="button"
           onClick={sendAcceptToRematch}
-          title="Accept"
         >
-          <FontAwesomeIcon
-            icon={faCheck}
-          />
+          <FontAwesomeIcon icon={faCheck} />
         </button>
         <button
           className="btn btn-outline-secondary"
+          title="Decline"
           type="button"
           onClick={sendRejectToRematch}
-          title="Decline"
         >
-          <FontAwesomeIcon
-            icon={faXmark}
-          />
+          <FontAwesomeIcon icon={faXmark} />
         </button>
       </div>
     </div>
@@ -83,10 +71,10 @@ const RematchButton = ({
 
   const renderBtnByDefault = () => (
     <button
-      type="button"
       className="btn btn-secondary btn-block rounded-lg"
-      onClick={sendOfferToRematch}
       disabled={disabled}
+      type="button"
+      onClick={sendOfferToRematch}
     >
       {disabled ? i18n.t('Opponent has left') : i18n.t('Rematch')}
     </button>
@@ -102,11 +90,12 @@ const RematchButton = ({
 
   const playerStatus = getPlayerStatus(rematchInitiatorId, currentUserId);
 
-  return mapRematchStateToButtons[`${rematchState}_${playerStatus}`]
-    || mapRematchStateToButtons.none;
+  return (
+    mapRematchStateToButtons[`${rematchState}_${playerStatus}`] || mapRematchStateToButtons.none
+  );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   const currentUserId = selectors.currentUserIdSelector(state);
 
   return {
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/ReplayerControlButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/ReplayerControlButton.jsx
index 7d8f7dd05..e5e5709d0 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/ReplayerControlButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/ReplayerControlButton.jsx
@@ -35,11 +35,11 @@ function ReplayerControlButton() {
     case roomCurrent.matches({ replayer: replayerMachineStates.empty }): {
       return (
         <button
-          type="button"
-          onClick={loadReplayer}
-          className="btn btn-secondary btn-block rounded-lg"
           aria-label="Open Record Player"
+          className="btn btn-secondary btn-block rounded-lg"
           disabled={isPreviewRoom}
+          type="button"
+          onClick={loadReplayer}
         >
           {i18n.t('Open History')}
         </button>
@@ -48,11 +48,11 @@ function ReplayerControlButton() {
     case roomCurrent.matches({ replayer: replayerMachineStates.off }): {
       return (
         <button
-          type="button"
-          onClick={openLoadedReplayer}
-          className="btn btn-secondary btn-block rounded-lg"
           aria-label="Open Record Player"
+          className="btn btn-secondary btn-block rounded-lg"
           disabled={isPreviewRoom}
+          type="button"
+          onClick={openLoadedReplayer}
         >
           {i18n.t('Open History')}
         </button>
@@ -61,10 +61,10 @@ function ReplayerControlButton() {
     case roomCurrent.matches({ replayer: replayerMachineStates.on }): {
       return (
         <button
+          aria-label="Close Record Player"
+          className="btn btn-secondary btn-block rounded-lg"
           type="button"
           onClick={() => mainService.send('CLOSE_REPLAYER')}
-          className="btn btn-secondary btn-block rounded-lg"
-          aria-label="Close Record Player"
         >
           {i18n.t('Return to game')}
         </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/SignUpButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/SignUpButton.jsx
index d6c7600d6..2224191c6 100755
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/SignUpButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/SignUpButton.jsx
@@ -2,10 +2,12 @@ import React from 'react';
 
 import i18n from '../../../i18n';
 
-const SignUpButton = () => (
-  <a className="btn btn-success btn-block" href="/auth/github">
-    {i18n.t('Sign up')}
-  </a>
-);
+function SignUpButton() {
+  return (
+    <a className="btn btn-success btn-block" href="/auth/github">
+      {i18n.t('Sign up')}
+    </a>
+  );
+}
 
 export default SignUpButton;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/StartTrainingButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/StartTrainingButton.jsx
index 4d171f2d8..667082fac 100755
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/StartTrainingButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/StartTrainingButton.jsx
@@ -16,11 +16,11 @@ function StartTrainingButton() {
 
   return (
     <button
-      type="button"
       className="btn btn-primary btn-block"
-      data-method="post"
       data-csrf={window.csrf_token}
+      data-method="post"
       data-to={getCreateTrainingGameUrl}
+      type="button"
     >
       {title}
     </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx
index eab5f65f7..7a3941103 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskAssignment.jsx
@@ -13,11 +13,11 @@ import ContributorsList from './ContributorsList';
 import TaskDescriptionMarkdown from './TaskDescriptionMarkdown';
 import TaskLanguagesSelection from './TaskLanguageSelection';
 
-const renderTaskLink = name => {
+const renderTaskLink = (name) => {
   const link = `https://github.com/hexlet-codebattle/battle_asserts/tree/master/src/battle_asserts/issues/${name}.clj`;
 
   return (
-    <a href={link} className="d-inline-block">
+    <a className="d-inline-block" href={link}>
       <span className="fab fa-github mr-1" />
       link
     </a>
@@ -32,19 +32,19 @@ function ShowGuideButton() {
 
   return (
     <button
-      type="button"
       className="btn btn-outline-secondary btn-sm mx-2 text-nowrap rounded-lg"
-      onClick={guideShow}
-      data-toggle="tooltip"
       data-placement="top"
+      data-toggle="tooltip"
       title="Show guide"
+      type="button"
+      onClick={guideShow}
     >
       Show guide
     </button>
   );
 }
 
-function TaskAssignment({ task, taskLanguage, handleSetLanguage }) {
+function TaskAssignment({ handleSetLanguage, task, taskLanguage }) {
   const [avaibleLanguages, displayLanguage, description] = useTaskDescriptionParams(
     task,
     taskLanguage,
@@ -65,9 +65,9 @@ function TaskAssignment({ task, taskLanguage, handleSetLanguage }) {
           </h6>
           <div className="d-flex align-items-center">
             <TaskLanguagesSelection
-              handleSetLanguage={handleSetLanguage}
               avaibleLanguages={avaibleLanguages}
               displayLanguage={displayLanguage}
+              handleSetLanguage={handleSetLanguage}
             />
             <ShowGuideButton />
           </div>
@@ -83,9 +83,7 @@ function TaskAssignment({ task, taskLanguage, handleSetLanguage }) {
             <div className="d-flex align-items-end flex-column flex-sm-row justify-content-between">
               <h6 className="card-text small font-italic text-black-50">
                 <span className="mr-2">
-                  {i18n.t(
-                    'Found a mistake? Have something to add? Pull Requests are welcome: ',
-                  )}
+                  {i18n.t('Found a mistake? Have something to add? Pull Requests are welcome: ')}
                 </span>
                 {renderTaskLink(task.name)}
               </h6>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionMarkdown.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionMarkdown.jsx
index 4027ccb89..076468c6a 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionMarkdown.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskDescriptionMarkdown.jsx
@@ -2,24 +2,20 @@ import React from 'react';
 
 import ReactMarkdown from 'react-markdown';
 
-const TaskDescriptionMarkdown = ({ description }) => (
-  <ReactMarkdown
-    source={description}
-    renderers={{
-      linkReference: reference => {
-        if (!reference.href) {
-          return (
-            <>
-              [
-              {reference.children}
-              ]
-            </>
-);
-        }
-        return <a href={reference.$ref}>{reference.children}</a>;
-      },
-    }}
-  />
-);
+function TaskDescriptionMarkdown({ description }) {
+  return (
+    <ReactMarkdown
+      renderers={{
+        linkReference: (reference) => {
+          if (!reference.href) {
+            return <>[{reference.children}]</>;
+          }
+          return <a href={reference.$ref}>{reference.children}</a>;
+        },
+      }}
+      source={description}
+    />
+  );
+}
 
 export default TaskDescriptionMarkdown;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.jsx
index ed3315702..2ae38e049 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/TaskLanguageSelection.jsx
@@ -2,16 +2,12 @@ import React from 'react';
 
 import Dropdown from 'react-bootstrap/Dropdown';
 
-const TaskLanguagesSelection = ({
-  avaibleLanguages,
-  displayLanguage,
-  handleSetLanguage,
-}) => {
+function TaskLanguagesSelection({ avaibleLanguages, displayLanguage, handleSetLanguage }) {
   if (avaibleLanguages.length < 2) {
     return null;
   }
 
-  const renderLanguage = language => (
+  const renderLanguage = (language) => (
     <Dropdown.Item
       key={language}
       active={language === displayLanguage}
@@ -24,8 +20,8 @@ const TaskLanguagesSelection = ({
   return (
     <Dropdown className="d-flex">
       <Dropdown.Toggle
-        id="tasklang-dropdown-toggle"
         className="shadow-none rounded-lg p-1 btn-sm"
+        id="tasklang-dropdown-toggle"
         variant="outline-secondary"
       >
         {displayLanguage.toUpperCase()}
@@ -35,6 +31,6 @@ const TaskLanguagesSelection = ({
       </Dropdown.Menu>
     </Dropdown>
   );
-};
+}
 
 export default TaskLanguagesSelection;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/TimerContainer.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/TimerContainer.jsx
index e17ac8324..21234d210 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/TimerContainer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/TimerContainer.jsx
@@ -15,9 +15,7 @@ const gameStatuses = {
   timeout: 'game_over',
 };
 
-function TimerContainer({
- time, mode, timeoutSeconds, gameStateName,
-}) {
+function TimerContainer({ gameStateName, mode, time, timeoutSeconds }) {
   const { mainService, taskService } = useContext(RoomContext);
   const roomCurrent = useMachineStateSelector(mainService, roomStateSelector);
   const taskCurrent = useMachineStateSelector(taskService, taskStateSelector);
@@ -51,8 +49,8 @@ function TimerContainer({
   }
 
   if (
-    roomCurrent.matches({ room: roomMachineStates.gameOver })
-    || roomCurrent.matches({ room: roomMachineStates.stored })
+    roomCurrent.matches({ room: roomMachineStates.gameOver }) ||
+    roomCurrent.matches({ room: roomMachineStates.stored })
   ) {
     return gameStatuses[gameStateName];
   }
@@ -62,7 +60,7 @@ function TimerContainer({
   }
 
   if (!time) {
-    return <></>;
+    return null;
   }
 
   return <Timer time={time} />;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/UserGameScore.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/UserGameScore.jsx
index 98b6bd345..8222b2478 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/UserGameScore.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/UserGameScore.jsx
@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { userGameScoreSelector } from '../../selectors';
 
 function UserGameScore({ userId }) {
-  const { winnerId, results } = useSelector(userGameScoreSelector);
+  const { results, winnerId } = useSelector(userGameScoreSelector);
 
   const showScore = Object.values(results).reduce((acc, score) => acc + Number(score), 0) > 0;
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.jsx
index 18dd7878e..7f8f6200f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/VimModeButton.jsx
@@ -9,7 +9,7 @@ import { actions } from '../../slices';
 
 function VimModeButton({ playerId }) {
   const dispatch = useDispatch();
-  const currentMode = useSelector(state => editorsModeSelector(playerId)(state));
+  const currentMode = useSelector((state) => editorsModeSelector(playerId)(state));
 
   const isVimMode = currentMode === editorModes.vim;
 
@@ -25,7 +25,7 @@ function VimModeButton({ playerId }) {
   };
 
   return (
-    <button type="button" className={classNames} onClick={handleToggleVimMode}>
+    <button className={classNames} type="button" onClick={handleToggleVimMode}>
       Vim
     </button>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/WaitingOpponentInfo.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/WaitingOpponentInfo.jsx
index b38c1d797..e678d9748 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/WaitingOpponentInfo.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/WaitingOpponentInfo.jsx
@@ -8,13 +8,9 @@ function WaitingOpponentInfo({ gameUrl }) {
   return (
     <div className="jumbotron container text-center bg-white shadow-sm">
       <div className="col-xl-8 col-lg-10 col-12 m-auto">
-        <h2 className="h2 font-weight-normal">
-          {i18n.t('Waiting for an opponent')}
-        </h2>
+        <h2 className="h2 font-weight-normal">{i18n.t('Waiting for an opponent')}</h2>
         <p className="lead mb-4">
-          {i18n.t(
-            'Please wait for someone to join or send an invite using the link below',
-          )}
+          {i18n.t('Please wait for someone to join or send an invite using the link below')}
         </p>
         <div>
           <div className="d-flex justify-content-center input-group mb-3">
@@ -25,11 +21,11 @@ function WaitingOpponentInfo({ gameUrl }) {
             </div>
             <CopyButton className="btn btn-secondary" value={gameUrl} />
             <button
-              type="button"
               className="btn btn-danger rounded-right"
-              data-method="delete"
               data-csrf={window.csrf_token}
+              data-method="delete"
               data-to={gameUrl}
+              type="button"
             >
               Cancel
             </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.jsx
index 3a0b19fdb..502c7235b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Announcement.jsx
@@ -1,27 +1,29 @@
 // import React from 'react';
 // import Table from 'react-bootstrap/Table';
 
-const Announcement = () => null;
-  // <Table striped borderless className="border border-dark m-0">
-  //   <thead>
-  //     <tr className="bg-gray">
-  //       <th scope="col" className="text-uppercase p-1" colSpan="2">
-  //         <div className="d-flex align-items-center flex-nowrap">
-  //           <span className="d-flex m-2">Announcement</span>
-  //         </div>
-  //       </th>
-  //     </tr>
-  //   </thead>
-  //   <tbody>
-  //     <tr>
-  //       <td className="pr-0">Monthly Arena 2021.12.13 15:30(UTC)</td>
-  //       <td className="text-right pl-0" />
-  //     </tr>
-  //     <tr>
-  //       <td className="pr-0">Monthly Team Skirmish 2021.12.13 15:50(UTC)</td>
-  //       <td className="text-right pl-0" />
-  //     </tr>
-  //   </tbody>
-  // </Table>
+function Announcement() {
+  return null;
+}
+// <Table striped borderless className="border border-dark m-0">
+//   <thead>
+//     <tr className="bg-gray">
+//       <th scope="col" className="text-uppercase p-1" colSpan="2">
+//         <div className="d-flex align-items-center flex-nowrap">
+//           <span className="d-flex m-2">Announcement</span>
+//         </div>
+//       </th>
+//     </tr>
+//   </thead>
+//   <tbody>
+//     <tr>
+//       <td className="pr-0">Monthly Arena 2021.12.13 15:30(UTC)</td>
+//       <td className="text-right pl-0" />
+//     </tr>
+//     <tr>
+//       <td className="pr-0">Monthly Team Skirmish 2021.12.13 15:50(UTC)</td>
+//       <td className="text-right pl-0" />
+//     </tr>
+//   </tbody>
+// </Table>
 
 export default Announcement;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx
index 1efee36ad..240eae4e1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx
@@ -1,6 +1,4 @@
-import React, {
-  useCallback,
-} from 'react';
+import React, { useCallback } from 'react';
 
 import Modal from 'react-bootstrap/Modal';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,12 +8,7 @@ import * as lobbyMiddlewares from '../../middlewares/Lobby';
 import * as selectors from '../../selectors';
 import { actions } from '../../slices';
 
-function ChatActionModal({
-  presenceList,
-  chatInputRef,
-  modalShowing,
-  setModalShowing,
-}) {
+function ChatActionModal({ chatInputRef, modalShowing, presenceList, setModalShowing }) {
   const dispatch = useDispatch();
 
   const currentUserId = useSelector(selectors.currentUserIdSelector);
@@ -23,36 +16,40 @@ function ChatActionModal({
   const handleCloseModal = useCallback(() => {
     setModalShowing({ opened: false });
   }, [setModalShowing]);
-  const createBattleInvite = useCallback(event => {
-    event.preventDefault();
+  const createBattleInvite = useCallback(
+    (event) => {
+      event.preventDefault();
 
-    const { userId, userName } = event.currentTarget.dataset;
-    setModalShowing({ opened: false });
+      const { userId, userName } = event.currentTarget.dataset;
+      setModalShowing({ opened: false });
 
-    dispatch(
-      actions.showCreateGameInviteModal({
-        opponentInfo: { id: Number(userId), name: userName },
-      }),
-    );
-  }, [dispatch, setModalShowing]);
-  const openDirect = useCallback(event => {
-    event.preventDefault();
+      dispatch(
+        actions.showCreateGameInviteModal({
+          opponentInfo: { id: Number(userId), name: userName },
+        }),
+      );
+    },
+    [dispatch, setModalShowing],
+  );
+  const openDirect = useCallback(
+    (event) => {
+      event.preventDefault();
 
-    const { userId, userName } = event.currentTarget.dataset;
-    setModalShowing({ opened: false });
+      const { userId, userName } = event.currentTarget.dataset;
+      setModalShowing({ opened: false });
 
-    dispatch(lobbyMiddlewares.openDirect(Number(userId), userName));
-    if (chatInputRef.current) {
-      chatInputRef.current.focus();
-    }
-  }, [dispatch, chatInputRef, setModalShowing]);
+      dispatch(lobbyMiddlewares.openDirect(Number(userId), userName));
+      if (chatInputRef.current) {
+        chatInputRef.current.focus();
+      }
+    },
+    [dispatch, chatInputRef, setModalShowing],
+  );
 
-  const title = modalShowing.action === 'sendMessage'
-    ? 'Send private message'
-    : 'Send battle invite';
-  const handleSelectPlayer = modalShowing.action === 'sendMessage'
-    ? openDirect
-    : createBattleInvite;
+  const title =
+    modalShowing.action === 'sendMessage' ? 'Send private message' : 'Send battle invite';
+  const handleSelectPlayer =
+    modalShowing.action === 'sendMessage' ? openDirect : createBattleInvite;
 
   return (
     <Modal contentClassName="h-75" show={modalShowing.opened} onHide={handleCloseModal}>
@@ -62,22 +59,23 @@ function ChatActionModal({
       <Modal.Body className="bg-light overflow-auto">
         {modalShowing.action && (
           <div className="d-flex flex-column">
-            {presenceList.map(presenceUser => (
-              currentUserId !== presenceUser.id && (
-                <div
-                  role="button"
-                  tabIndex={0}
-                  className="btn btn-light mb-2 p-3"
-                  key={presenceUser.id}
-                  data-user-id={presenceUser.id}
-                  data-user-name={presenceUser.user.name}
-                  onClick={handleSelectPlayer}
-                  onKeyPress={handleSelectPlayer}
-                >
-                  <UserInfo user={presenceUser.user} hideInfo hideOnlineIndicator />
-                </div>
-              )
-            ))}
+            {presenceList.map(
+              (presenceUser) =>
+                currentUserId !== presenceUser.id && (
+                  <div
+                    key={presenceUser.id}
+                    className="btn btn-light mb-2 p-3"
+                    data-user-id={presenceUser.id}
+                    data-user-name={presenceUser.user.name}
+                    role="button"
+                    tabIndex={0}
+                    onClick={handleSelectPlayer}
+                    onKeyPress={handleSelectPlayer}
+                  >
+                    <UserInfo hideInfo hideOnlineIndicator user={presenceUser.user} />
+                  </div>
+                ),
+            )}
           </div>
         )}
       </Modal.Body>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.jsx
index e3f7269f1..95419620b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CompletedGames.jsx
@@ -1,9 +1,4 @@
-import React, {
-  memo,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 
 import cn from 'classnames';
 import moment from 'moment';
@@ -18,7 +13,7 @@ import GameCard from './GameCard';
 
 const CompletedGamesRows = memo(({ games }) => (
   <>
-    {games.map(game => (
+    {games.map((game) => (
       <tr key={game.id}>
         <td className="p-3 align-middle text-nowrap">
           <GameLevelBadge level={game.level} />
@@ -26,23 +21,29 @@ const CompletedGamesRows = memo(({ games }) => (
         <td className="px-1 py-3 align-middle text-nowrap cb-username-td text-truncate">
           <div className="d-flex align-items-center">
             <ResultIcon gameId={game.id} player1={game.players[0]} player2={game.players[1]} />
-            <UserInfo user={game.players[0]} truncate="true" />
+            <UserInfo truncate="true" user={game.players[0]} />
           </div>
         </td>
         <td className="px-1 py-3 align-middle text-nowrap cb-username-td text-truncate">
           <div className="d-flex align-items-center">
             <ResultIcon gameId={game.id} player1={game.players[1]} player2={game.players[0]} />
-            <UserInfo user={game.players[1]} truncate="true" />
+            <UserInfo truncate="true" user={game.players[1]} />
           </div>
         </td>
-        <td className="px-1 py-3 align-middle text-nowrap">{moment.utc(game.finishesAt).local().format('MM.DD HH:mm')}</td>
+        <td className="px-1 py-3 align-middle text-nowrap">
+          {moment.utc(game.finishesAt).local().format('MM.DD HH:mm')}
+        </td>
         <td className="px-1 py-3 align-middle">
-          <a type="button" className="btn btn-secondary btn-sm rounded-lg" href={`/games/${game.id}`}>
+          <a
+            className="btn btn-secondary btn-sm rounded-lg"
+            href={`/games/${game.id}`}
+            type="button"
+          >
             Show
           </a>
         </td>
       </tr>
-      ))}
+    ))}
   </>
 ));
 
@@ -50,15 +51,15 @@ const commonTableClassName = 'table table-sm table-striped border-gray border-0
 const commonClassName = 'd-none d-sm-none d-md-block';
 
 function CompletedGames({
+  className,
   games,
   loadNextPage = null,
-  totalGames,
-  className,
   tableClassName = '',
+  totalGames,
 }) {
   const dispatch = useDispatch();
 
-  const { nextPage, totalPages } = useSelector(state => state.completedGames);
+  const { nextPage, totalPages } = useSelector((state) => state.completedGames);
   const object = useMemo(
     () => ({ loading: false }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -82,18 +83,24 @@ function CompletedGames({
 
     const onCardsScroll = () => {
       if (!cardListRef.current) return;
-      const width = cardListRef.current.scrollWidth - cardListRef.current.parentElement?.offsetWidth;
+      const width =
+        cardListRef.current.scrollWidth - (cardListRef.current.parentElement?.offsetWidth || 0);
       const delta = width - cardListRef.current.scrollLeft;
 
-      if (delta < 50) { load(); }
+      if (delta < 50) {
+        load();
+      }
     };
 
     const onTableScroll = () => {
       if (!tableRef.current) return;
-      const height = tableRef.current.scrollHeight - tableRef.current.parentElement?.offsetHeight;
+      const height =
+        tableRef.current.scrollHeight - (tableRef.current.parentElement?.offsetHeight || 0);
       const delta = height - tableRef.current.scrollTop;
 
-      if (delta < 500) { load(); }
+      if (delta < 500) {
+        load();
+      }
     };
 
     observerTableRef.current?.addEventListener('scroll', onTableScroll);
@@ -113,14 +120,8 @@ function CompletedGames({
 
   return (
     <>
-      <div
-        ref={tableRef}
-        className={cn(commonClassName, className)}
-        data-testid="scroll"
-      >
-        <table
-          className={cn(commonTableClassName, tableClassName)}
-        >
+      <div ref={tableRef} className={cn(commonClassName, className)} data-testid="scroll">
+        <table className={cn(commonTableClassName, tableClassName)}>
           <thead>
             <tr>
               <th className="p-3 border-0">Level</th>
@@ -136,14 +137,13 @@ function CompletedGames({
           </tbody>
         </table>
       </div>
-      <div ref={cardListRef} className="d-none d-sm-block d-md-none d-flex m-2 overflow-auto position-relative">
+      <div
+        ref={cardListRef}
+        className="d-none d-sm-block d-md-none d-flex m-2 overflow-auto position-relative"
+      >
         <HorizontalScrollControls>
-          {games.map(game => (
-            <GameCard
-              key={`card-${game.id}`}
-              type="completed"
-              game={game}
-            />
+          {games.map((game) => (
+            <GameCard key={`card-${game.id}`} game={game} type="completed" />
           ))}
         </HorizontalScrollControls>
       </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.jsx
index 8b5e3fa9a..9f2ec0b7f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.jsx
@@ -29,19 +29,14 @@ function UserLabel({ user }) {
   });
 
   return (
-    <>
-      <span className="text-truncate">
-        <FontAwesomeIcon
-          icon={['fa', 'circle']}
-          className={onlineIndicatorClassName}
-        />
-        <span>{user.name}</span>
-      </span>
-    </>
+    <span className="text-truncate">
+      <FontAwesomeIcon className={onlineIndicatorClassName} icon={['fa', 'circle']} />
+      <span>{user.name}</span>
+    </span>
   );
 }
 
-function OpponentSelect({ setOpponent, opponent }) {
+function OpponentSelect({ opponent, setOpponent }) {
   const currentUserId = useSelector(selectors.currentUserIdSelector);
   const dispatch = useDispatch();
 
@@ -59,27 +54,27 @@ function OpponentSelect({ setOpponent, opponent }) {
 
         const options = users
           .filter(({ id }) => currentUserId !== id)
-          .map(user => ({ label: <UserLabel user={user} />, value: user }));
+          .map((user) => ({ label: <UserLabel user={user} />, value: user }));
 
         callback(options);
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
   };
 
   return (
     <AsyncSelect
+      defaultOptions
       className="w-100"
+      loadOptions={loadOptions}
       value={
         opponent && {
           label: <UserLabel user={opponent} />,
           value: opponent,
         }
       }
-      defaultOptions
       onChange={({ value }) => setOpponent(value)}
-      loadOptions={loadOptions}
     />
   );
 }
@@ -111,9 +106,7 @@ function CreateGameDialog({ hideModal }) {
 
   const isInvite = game.type === 'invite';
 
-  const createBtnTitle = isInvite
-    ? i18n.t('Create invite')
-    : i18n.t('Create battle');
+  const createBtnTitle = isInvite ? i18n.t('Create invite') : i18n.t('Create battle');
 
   const createGame = () => {
     if (isInvite && opponent) {
@@ -139,36 +132,37 @@ function CreateGameDialog({ hideModal }) {
     hideModal();
   };
 
-  const renderPickGameType = () => currentGameTypeCodes.map(gameType => (
-    <button
-      type="button"
-      key={gameType}
-      className={cn('btn rounded-lg', {
+  const renderPickGameType = () =>
+    currentGameTypeCodes.map((gameType) => (
+      <button
+        key={gameType}
+        className={cn('btn rounded-lg', {
           'bg-orange text-white': game.type === gameType,
           'btn-outline-orange': game.type !== gameType,
         })}
-      onClick={() => setGame({ ...game, type: gameType })}
-    >
-      {gameTypeName[gameType]}
-    </button>
+        type="button"
+        onClick={() => setGame({ ...game, type: gameType })}
+      >
+        {gameTypeName[gameType]}
+      </button>
     ));
 
   return (
     <div>
       <h5>{i18n.t('Level')}</h5>
       <div className="d-flex justify-content-around px-5 mt-3">
-        {gameLevels.map(level => (
+        {gameLevels.map((level) => (
           <button
             key={level}
-            type="button"
             className={cn('btn border-0 mb-2 rounded-lg', {
               'bg-orange': game.level === level,
               'btn-outline-orange': game.level !== level,
             })}
-            onClick={() => setGame({ ...game, level })}
-            data-toggle="tooltip"
             data-placement="right"
+            data-toggle="tooltip"
             title={level}
+            type="button"
+            onClick={() => setGame({ ...game, level })}
           >
             <img alt={level} src={`/assets/images/levels/${level}.svg`} />
           </button>
@@ -176,46 +170,42 @@ function CreateGameDialog({ hideModal }) {
       </div>
 
       <h5>{i18n.t('Game Type')}</h5>
-      <div className="d-flex justify-content-around px-5 mt-3 mb-2">
-        {renderPickGameType()}
-      </div>
+      <div className="d-flex justify-content-around px-5 mt-3 mb-2">{renderPickGameType()}</div>
       <h5>{i18n.t('Time control')}</h5>
       <div className="d-flex flex-column px-5 mt-3 mb-2">
         <input
-          type="range"
           className="form-range w-100"
-          value={game.timeoutSeconds / 60}
-          onChange={e => setGame({ ...game, timeoutSeconds: e.target.value * 60 })}
-          min="3"
+          id="customRange3"
           max="60"
+          min="3"
           step="1"
-          id="customRange3"
+          type="range"
+          value={game.timeoutSeconds / 60}
+          onChange={(e) => setGame({ ...game, timeoutSeconds: e.target.value * 60 })}
         />
-        <span className="text-center text-orange">
-          {i18n.t(`${game.timeoutSeconds / 60} min`)}
-        </span>
+        <span className="text-center text-orange">{i18n.t(`${game.timeoutSeconds / 60} min`)}</span>
       </div>
       {isInvite && (
         <>
           <h5>{i18n.t('Choose opponent')}</h5>
           <div className="d-flex justify-content-around px-5 mt-3 mb-2">
-            <OpponentSelect setOpponent={setOpponent} opponent={opponent} />
+            <OpponentSelect opponent={opponent} setOpponent={setOpponent} />
           </div>
         </>
       )}
       <TaskChoice
-        chosenTask={chosenTask}
-        setChosenTask={setChosenTask}
         chosenTags={chosenTags}
-        setChosenTags={setChosenTags}
+        chosenTask={chosenTask}
         level={game.level}
         randomTask={randomTask}
+        setChosenTags={setChosenTags}
+        setChosenTask={setChosenTask}
       />
       <button
-        type="button"
         className="btn btn-success mb-2 mt-4 d-flex ml-auto text-white font-weight-bold rounded-lg"
-        onClick={createGame}
         disabled={isInvite && !opponent}
+        type="button"
+        onClick={createGame}
       >
         {createBtnTitle}
       </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.jsx
index 7339f40b0..dac0605f0 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameActionButton.jsx
@@ -13,24 +13,30 @@ import ShowButton from './ShowButton';
 
 const havePlayer = (userId, game) => !isEmpty(find(game.players, { id: userId }));
 
-const ContinueButton = ({ url, type = 'table' }) => (
-  <a type="button" className={`btn btn-success ${type === 'table' ? '' : 'w-100'} text-white btn-sm rounded-lg`} href={url}>
-    Continue
-  </a>
-);
+function ContinueButton({ type = 'table', url }) {
+  return (
+    <a
+      className={`btn btn-success ${type === 'table' ? '' : 'w-100'} text-white btn-sm rounded-lg`}
+      href={url}
+      type="button"
+    >
+      Continue
+    </a>
+  );
+}
 
-function GameActionButton({
-  type = 'table', game, currentUserId, isGuest, isOnline,
-}) {
+function GameActionButton({ currentUserId, game, isGuest, isOnline, type = 'table' }) {
   const gameUrl = makeGameUrl(game.id);
   const gameUrlJoin = makeGameUrl(game.id, 'join');
   const gameState = game.state;
   const signInUrl = getSignInGithubUrl();
 
   if (gameState === gameStateCodes.playing) {
-    return havePlayer(currentUserId, game)
-      ? <ContinueButton url={gameUrl} />
-      : <ShowButton url={gameUrl} type={type} />;
+    return havePlayer(currentUserId, game) ? (
+      <ContinueButton url={gameUrl} />
+    ) : (
+      <ShowButton type={type} url={gameUrl} />
+    );
   }
 
   if (gameState === gameStateCodes.waitingOpponent) {
@@ -42,23 +48,23 @@ function GameActionButton({
           <div className="btn-group ml-5">
             <ContinueButton url={gameUrl} />
             <button
-              type="button"
               className="btn btn-sm btn-outline-secondary border-0"
-              onClick={() => copy(`${window.location.host}${gameUrl}`)}
-              data-toggle="tooltip"
               data-placement="right"
+              data-toggle="tooltip"
               title="Copy link"
+              type="button"
+              onClick={() => copy(`${window.location.host}${gameUrl}`)}
             >
               <i className="far fa-copy" />
             </button>
             <button
-              type="button"
               className="btn btn-sm btn-hover border-0"
-              onClick={lobbyMiddlewares.cancelGame(game.id)}
-              data-toggle="tooltip"
               data-placement="right"
-              title="Cancel game"
+              data-toggle="tooltip"
               disabled={!isOnline}
+              title="Cancel game"
+              type="button"
+              onClick={lobbyMiddlewares.cancelGame(game.id)}
             >
               <i className="fas fa-times" />
             </button>
@@ -70,25 +76,25 @@ function GameActionButton({
     if (playing) {
       return (
         <div className="btn-group">
-          <ContinueButton url={gameUrl} type={type} />
+          <ContinueButton type={type} url={gameUrl} />
           <button
-            type="button"
             className="btn btn-sm btn-outline-secondary border-0"
-            onClick={() => copy(`${window.location.host}${gameUrl}`)}
-            data-toggle="tooltip"
             data-placement="right"
+            data-toggle="tooltip"
             title="Copy link"
+            type="button"
+            onClick={() => copy(`${window.location.host}${gameUrl}`)}
           >
             <i className="far fa-copy" />
           </button>
           <button
-            type="button"
             className="btn btn-sm btn-hover border-0"
-            onClick={lobbyMiddlewares.cancelGame(game.id)}
-            data-toggle="tooltip"
             data-placement="right"
-            title="Cancel game"
+            data-toggle="tooltip"
             disabled={!isOnline}
+            title="Cancel game"
+            type="button"
+            onClick={lobbyMiddlewares.cancelGame(game.id)}
           >
             <i className="fas fa-times" />
           </button>
@@ -99,10 +105,10 @@ function GameActionButton({
     if (isGuest) {
       return (
         <button
-          type="button"
           className={`btn ${type === 'table' ? 'w-100' : ''} btn-outline-success btn-sm rounded-lg`}
           data-method="get"
           data-to={signInUrl}
+          type="button"
         >
           {i18n.t('Sign in with %{name}', { name: 'Github' })}
         </button>
@@ -111,11 +117,11 @@ function GameActionButton({
 
     return (
       <button
-        type="button"
         className={`btn btn-orange btn-sm ${type === 'table' ? 'ml-1 px-4' : ''} rounded-lg`}
-        data-method="post"
         data-csrf={window.csrf_token}
+        data-method="post"
         data-to={gameUrlJoin}
+        type="button"
       >
         {i18n.t('Fight')}
       </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.jsx
index f1aaeb61d..3ac7dabc9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameCard.jsx
@@ -29,14 +29,12 @@ const getPerfomance = (won, lost) => {
   return `${int}.${rest.slice(0, 2)}`;
 };
 
-function UserSimpleStats({
-  user,
-}) {
+function UserSimpleStats({ user }) {
   const [state, setState] = useState('closed');
   const [data, setData] = useState();
 
   const load = () => {
-    const onSuccess = payload => {
+    const onSuccess = (payload) => {
       setData(payload.data.stats.games);
       setState('opened');
     };
@@ -51,18 +49,14 @@ function UserSimpleStats({
   return (
     <>
       {state === 'loading' && (
-        <button
-          type="button"
-          className="btn btn-sm btn-secondary rounded-lg"
-          disabled
-        >
+        <button disabled className="btn btn-sm btn-secondary rounded-lg" type="button">
           Loading...
         </button>
       )}
       {state === 'closed' && (
         <button
-          type="button"
           className="btn btn-sm btn-success text-nowrap text-white rounded-lg"
+          type="button"
           onClick={load}
         >
           Show stats
@@ -72,11 +66,7 @@ function UserSimpleStats({
         <span className="text-nowrap">{`Won/Lost: ${getPerfomance(data.won, data.lost)}`}</span>
       )}
       {state === 'error' && (
-        <button
-          type="button"
-          className="btn btn-sm btn-danger rounded-lg"
-          onClick={load}
-        >
+        <button className="btn btn-sm btn-danger rounded-lg" type="button" onClick={load}>
           Reload
         </button>
       )}
@@ -84,13 +74,7 @@ function UserSimpleStats({
   );
 }
 
-function GameCard({
-  type,
-  game,
-  currentUserId = null,
-  isGuest = true,
-  isOnline = false,
-}) {
+function GameCard({ currentUserId = null, game, isGuest = true, isOnline = false, type }) {
   return (
     <div
       key={`card-${game.id}`}
@@ -105,36 +89,34 @@ function GameCard({
         </div>
         <div className="d-flex flex-column align-self-center">
           {game.players.length === 1 ? (
-            <>
-              <div className="d-flex flex-column align-items-center">
-                <UserInfo user={game.players[0]} />
-                {currentUserId !== game.players[0] && (
-                  <UserSimpleStats user={game.players[0]} />
-                )}
-              </div>
-            </>
+            <div className="d-flex flex-column align-items-center">
+              <UserInfo user={game.players[0]} />
+              {currentUserId !== game.players[0] && <UserSimpleStats user={game.players[0]} />}
+            </div>
           ) : (
             <>
               <div className="d-flex flex-column align-items-center position-relative">
                 <div className="d-flex">
-                  <ResultIcon gameId={game.id} player1={game.players[0]} player2={game.players[1]} />
+                  <ResultIcon
+                    gameId={game.id}
+                    player1={game.players[0]}
+                    player2={game.players[1]}
+                  />
                   <UserInfo user={game.players[0]} />
                 </div>
-                {
-                    type === 'active'
-                      && <GameProgressBar player={game.players[0]} position="left" />
-                }
+                {type === 'active' && <GameProgressBar player={game.players[0]} position="left" />}
               </div>
               <span className="text-center">VS</span>
               <div className="d-flex flex-column align-items-center position-relative">
                 <div className="d-flex">
-                  <ResultIcon gameId={game.id} player1={game.players[1]} player2={game.players[0]} />
+                  <ResultIcon
+                    gameId={game.id}
+                    player1={game.players[1]}
+                    player2={game.players[0]}
+                  />
                   <UserInfo user={game.players[1]} />
                 </div>
-                {
-                    type === 'active'
-                      && <GameProgressBar player={game.players[1]} position="left" />
-                }
+                {type === 'active' && <GameProgressBar player={game.players[1]} position="left" />}
               </div>
             </>
           )}
@@ -142,15 +124,15 @@ function GameCard({
       </div>
       {type === 'active' && (
         <GameActionButton
-          type="card"
-          game={game}
           currentUserId={currentUserId}
+          game={game}
           isGuest={isGuest}
           isOnline={isOnline}
+          type="card"
         />
       )}
       {type === 'completed' && (
-        <a type="button" className="btn btn-secondary btn-sm rounded-lg" href={`/games/${game.id}`}>
+        <a className="btn btn-secondary btn-sm rounded-lg" href={`/games/${game.id}`} type="button">
           Show
         </a>
       )}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameProgressBar.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameProgressBar.jsx
index d55132f8b..f4179e728 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameProgressBar.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameProgressBar.jsx
@@ -4,11 +4,11 @@ import cn from 'classnames';
 
 import PlayerLoading from '../../components/PlayerLoading';
 
-const getPregressbarClass = player => cn('cb-check-result-bar shadow-sm', player.checkResult.status);
+const getPregressbarClass = (player) =>
+  cn('cb-check-result-bar shadow-sm', player.checkResult.status);
 
-const getPregressbarWidth = player => `${
-  (player.checkResult?.successCount / player.checkResult?.assertsCount) * 100
-}%`;
+const getPregressbarWidth = (player) =>
+  `${(player.checkResult.successCount / player.checkResult.assertsCount) * 100}%`;
 
 function GameProgressBar({ player, position }) {
   const positionStyle = position === 'right' ? { right: 0 } : {};
@@ -21,10 +21,7 @@ function GameProgressBar({ player, position }) {
           style={{ width: getPregressbarWidth(player), ...positionStyle }}
         />
       </div>
-      <PlayerLoading
-        show={player.checkResult.status === 'started'}
-        small
-      />
+      <PlayerLoading small show={player.checkResult.status === 'started'} />
     </>
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.jsx
index 81f1d5f93..492ce7db9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameRoomPreview.jsx
@@ -9,7 +9,7 @@ const defaultAvatarUrl = 'https://avatars.githubusercontent.com/u/35539033?v=4';
 const players = Gon.getAsset('players');
 
 // TODO : user user.avatarUrl
-const GameRoomPreview = ({ pageName }) => {
+function GameRoomPreview({ pageName }) {
   if (pageName === 'builder') {
     return (
       <div className="preview container-fluid slideInLeft">
@@ -34,33 +34,41 @@ const GameRoomPreview = ({ pageName }) => {
     <div className="preview container-fluid slideInLeft">
       <div className="preview__container w-100 d-flex align-items-center">
         <div className="player1">
-          <img src={player1.avatar_url || defaultAvatarUrl} alt="avatar" className="player1__avatar" />
+          <img
+            alt="avatar"
+            className="player1__avatar"
+            src={player1.avatar_url || defaultAvatarUrl}
+          />
           <p className="player1__name">{player1.name}</p>
           <div className="player1__status">
             <LanguageIcon className="preview__icon" lang={player1.lang} />
             <span className="preview__info">{player1.lang}</span>
-            <img className="preview__icon" src="/assets/images/rating.svg" alt="rating" />
+            <img alt="rating" className="preview__icon" src="/assets/images/rating.svg" />
             <span className="preview__info">{player1.rating}</span>
           </div>
         </div>
 
         <div className="preview__middle">
-          <img src="/assets/images/fight.svg" alt="fight" className="preview__fight" />
+          <img alt="fight" className="preview__fight" src="/assets/images/fight.svg" />
         </div>
 
         <div className="player2">
-          <img src={player2.avatar_url || defaultAvatarUrl} alt="avatar" className="player2__avatar" />
+          <img
+            alt="avatar"
+            className="player2__avatar"
+            src={player2.avatar_url || defaultAvatarUrl}
+          />
           <p className="player2__name">{player2.name}</p>
           <div className="player2__status">
             <LanguageIcon className="preview__icon" lang={player2.lang} />
             <span className="preview__info">{player2.lang}</span>
-            <img className="preview__icon" src="/assets/images/rating.svg" alt="rating" />
+            <img alt="rating" className="preview__icon" src="/assets/images/rating.svg" />
             <span className="preview__info">{player2.rating}</span>
           </div>
         </div>
       </div>
     </div>
   );
-};
+}
 
 export default GameRoomPreview;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameStateBadge.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameStateBadge.jsx
index 4fb319c3c..1770954d2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameStateBadge.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/GameStateBadge.jsx
@@ -4,12 +4,10 @@ function GameStateBadge({ state }) {
   return (
     <img
       alt={state}
-      title={state}
       src={
-        state === 'playing'
-          ? '/assets/images/playing.svg'
-          : '/assets/images/waitingOpponent.svg'
+        state === 'playing' ? '/assets/images/playing.svg' : '/assets/images/waitingOpponent.svg'
       }
+      title={state}
     />
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.jsx
index df2016b44..f4adb263c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/Leaderboard.jsx
@@ -12,14 +12,16 @@ import { leaderboardSelector } from '../../slices/leaderboard';
 function Leaderboard() {
   const dispatch = useDispatch();
 
-  const { users: rating, period } = useSelector(leaderboardSelector);
+  const { period, users: rating } = useSelector(leaderboardSelector);
 
   const anchorWeekRef = useRef(null);
   const anchorMonthRef = useRef(null);
   const anchorAllRef = useRef(null);
 
-  const handlePeriodClick = e => {
-    const { target: { textContent } } = e;
+  const handlePeriodClick = (e) => {
+    const {
+      target: { textContent },
+    } = e;
     const periodValue = textContent && textContent.trim();
     e.preventDefault();
 
@@ -52,27 +54,23 @@ function Leaderboard() {
   }, [period]);
 
   return (
-    <Table striped borderless className="border border-dark m-0">
+    <Table borderless striped className="border border-dark m-0">
       <thead>
         <tr className="bg-gray">
-          <th scope="col" className="text-uppercase p-1" colSpan="2">
+          <th className="text-uppercase p-1" colSpan="2" scope="col">
             <div className="d-flex align-items-center flex-nowrap">
-              <img
-                alt="rating"
-                src="/assets/images/topPlayers.svg"
-                className="m-2"
-              />
+              <img alt="rating" className="m-2" src="/assets/images/topPlayers.svg" />
               <p className="d-inline-flex align-items-baseline flex-nowrap m-0 p-0">
                 <span className="d-flex">Leaderboard</span>
                 <span className="ml-2 small d-flex">
                   <u>
                     <a
-                      href="#!"
                       ref={anchorWeekRef}
-                      onClick={handlePeriodClick}
                       className={classnames({
                         'text-orange': period === periodTypes.WEEKLY,
                       })}
+                      href="#!"
+                      onClick={handlePeriodClick}
                     >
                       {periodTypes.WEEKLY}
                     </a>
@@ -80,12 +78,12 @@ function Leaderboard() {
                   /
                   <u>
                     <a
-                      href="#!"
                       ref={anchorMonthRef}
-                      onClick={handlePeriodClick}
                       className={classnames({
                         'text-orange': period === periodTypes.MONTHLY,
                       })}
+                      href="#!"
+                      onClick={handlePeriodClick}
                     >
                       {periodTypes.MONTHLY}
                     </a>
@@ -93,12 +91,12 @@ function Leaderboard() {
                   /
                   <u>
                     <a
-                      href="#!"
                       ref={anchorAllRef}
-                      onClick={handlePeriodClick}
                       className={classnames({
                         'text-orange': period === periodTypes.ALL,
                       })}
+                      href="#!"
+                      onClick={handlePeriodClick}
                     >
                       {periodTypes.ALL}
                     </a>
@@ -110,12 +108,12 @@ function Leaderboard() {
         </tr>
       </thead>
       <tbody>
-        {rating
-          && rating.map(item => (
+        {rating &&
+          rating.map((item) => (
             <tr key={item.name}>
               <td className="pr-0">
                 <div className="d-flex">
-                  <UserInfo user={item} truncate />
+                  <UserInfo truncate user={item} />
                 </div>
               </td>
               <td className="text-right pl-0">{item.rating}</td>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx
index 4f9a20b85..45fed85fc 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyChat.jsx
@@ -18,95 +18,95 @@ import { shouldShowMessage } from '../../utils/chat';
 import useChatContextMenu from '../../utils/useChatContextMenu';
 import useChatRooms from '../../utils/useChatRooms';
 
-function ChatGroupedPlayersList({ players, displayMenu }) {
+function ChatGroupedPlayersList({ displayMenu, players }) {
   const {
-    watching: watchingList = [],
-    online: onlineList = [],
     lobby: lobbyList = [],
+    online: onlineList = [],
     playing: playingList = [],
     task: builderList = [],
+    watching: watchingList = [],
   } = groupBy(players, 'currentState');
 
   return (
     <>
       {watchingList.length !== 0 && <div>Watching: </div>}
-      {watchingList.map(player => (
+      {watchingList.map((player) => (
         <div
-          role="button"
-          tabIndex={0}
-          className="mb-1"
           key={player.id}
+          className="mb-1"
           data-user-id={player.id}
           data-user-name={player.user.name}
-          onContextMenu={displayMenu}
+          role="button"
+          tabIndex={0}
           onClick={displayMenu}
+          onContextMenu={displayMenu}
           onKeyPress={displayMenu}
         >
-          <UserInfo user={player.user} hideInfo hideOnlineIndicator />
+          <UserInfo hideInfo hideOnlineIndicator user={player.user} />
         </div>
       ))}
       {playingList.length !== 0 && <div>Playing: </div>}
-      {playingList.map(player => (
+      {playingList.map((player) => (
         <div
-          role="button"
-          tabIndex={0}
-          className="mb-1"
           key={player.id}
+          className="mb-1"
           data-user-id={player.id}
           data-user-name={player.user.name}
-          onContextMenu={displayMenu}
+          role="button"
+          tabIndex={0}
           onClick={displayMenu}
+          onContextMenu={displayMenu}
           onKeyPress={displayMenu}
         >
-          <UserInfo user={player.user} hideInfo hideOnlineIndicator />
+          <UserInfo hideInfo hideOnlineIndicator user={player.user} />
         </div>
       ))}
       {lobbyList.length !== 0 && <div>Lobby: </div>}
-      {lobbyList.map(player => (
+      {lobbyList.map((player) => (
         <div
-          role="button"
-          tabIndex={0}
-          className="mb-1"
           key={player.id}
+          className="mb-1"
           data-user-id={player.id}
           data-user-name={player.user.name}
-          onContextMenu={displayMenu}
+          role="button"
+          tabIndex={0}
           onClick={displayMenu}
+          onContextMenu={displayMenu}
           onKeyPress={displayMenu}
         >
-          <UserInfo user={player.user} hideInfo hideOnlineIndicator />
+          <UserInfo hideInfo hideOnlineIndicator user={player.user} />
         </div>
       ))}
       {onlineList.length !== 0 && <div>Online: </div>}
-      {onlineList.map(player => (
+      {onlineList.map((player) => (
         <div
-          role="button"
-          tabIndex={0}
-          className="mb-1"
           key={player.id}
+          className="mb-1"
           data-user-id={player.id}
           data-user-name={player.user.name}
-          onContextMenu={displayMenu}
+          role="button"
+          tabIndex={0}
           onClick={displayMenu}
+          onContextMenu={displayMenu}
           onKeyPress={displayMenu}
         >
-          <UserInfo user={player.user} hideInfo hideOnlineIndicator />
+          <UserInfo hideInfo hideOnlineIndicator user={player.user} />
         </div>
       ))}
       {builderList.length !== 0 && <div>Edit task: </div>}
-      {builderList.map(player => (
+      {builderList.map((player) => (
         <div
-          role="button"
-          tabIndex={0}
-          className="mb-1"
           key={player.id}
+          className="mb-1"
           data-user-id={player.id}
           data-user-name={player.user.name}
-          onContextMenu={displayMenu}
+          role="button"
+          tabIndex={0}
           onClick={displayMenu}
+          onContextMenu={displayMenu}
           onKeyPress={displayMenu}
         >
-          <UserInfo user={player.user} hideInfo hideOnlineIndicator />
+          <UserInfo hideInfo hideOnlineIndicator user={player.user} />
         </div>
       ))}
     </>
@@ -118,26 +118,18 @@ const chatHeaderClassName = cn(
   'p-0 bg-light rounded-left h-sm-100 cb-lobby-widget-container w-100',
 );
 
-function LobbyChat({
-  connectToChat,
-  presenceList,
-  setOpenActionModalShowing,
-  inputRef,
-}) {
+function LobbyChat({ connectToChat, inputRef, presenceList, setOpenActionModalShowing }) {
   const messages = useSelector(selectors.chatMessagesSelector);
   const isOnline = useSelector(selectors.chatChannelStateSelector);
 
-  const users = useMemo(
-    () => presenceList.map(({ user }) => user),
-    [presenceList],
-  );
+  const users = useMemo(() => presenceList.map(({ user }) => user), [presenceList]);
 
   useEffect(() => {
     connectToChat();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const { menuId, menuRequest, displayMenu } = useChatContextMenu({
+  const { displayMenu, menuId, menuRequest } = useChatContextMenu({
     type: 'lobby',
     users,
     canInvite: true,
@@ -154,19 +146,17 @@ function LobbyChat({
   useChatRooms('page');
 
   const activeRoom = useSelector(selectors.activeRoomSelector);
-  const filteredMessages = messages.filter(message => shouldShowMessage(message, activeRoom));
+  const filteredMessages = messages.filter((message) => shouldShowMessage(message, activeRoom));
 
   if (!presenceList) {
     return null;
   }
 
   return (
-    <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
+    <ChatContextMenu inputRef={inputRef} menuId={menuId} request={menuRequest}>
       <div className="d-flex flex-column flex-lg-row flex-md-row rounded shadow-sm mt-2">
-        <div
-          className={chatHeaderClassName}
-        >
-          <ChatHeader disabled={!isOnline} showRooms />
+        <div className={chatHeaderClassName}>
+          <ChatHeader showRooms disabled={!isOnline} />
           <Messages displayMenu={displayMenu} messages={filteredMessages} />
           <ChatInput disabled={!isOnline} inputRef={inputRef} />
         </div>
@@ -184,37 +174,30 @@ function LobbyChat({
               )}
               <div className="d-flex justify-items-center p-2">
                 <button
-                  type="button"
                   className="btn btn-sm p-0 rounded-lg mr-1"
-                  onClick={openSendMessageModal}
                   disabled={!isOnline || presenceList.length <= 1}
+                  type="button"
+                  onClick={openSendMessageModal}
                 >
-                  <FontAwesomeIcon
-                    title="Send message"
-                    className="text-dark"
-                    icon={faEnvelope}
-                  />
+                  <FontAwesomeIcon className="text-dark" icon={faEnvelope} title="Send message" />
                 </button>
                 <button
-                  type="button"
                   className="btn btn-sm p-0 rounded-lg"
-                  onClick={openSendInviteModal}
                   disabled={!isOnline || presenceList.length <= 1}
+                  type="button"
+                  onClick={openSendInviteModal}
                 >
                   <img
-                    title="Send fight invite"
                     alt="fight"
-                    style={{ width: '16px', height: '16px' }}
                     src="/assets/images/fight-black.png"
+                    style={{ width: '16px', height: '16px' }}
+                    title="Send fight invite"
                   />
                 </button>
               </div>
             </div>
             <div className="d-flex px-3 flex-column align-items-start overflow-auto">
-              <ChatGroupedPlayersList
-                players={presenceList}
-                displayMenu={displayMenu}
-              />
+              <ChatGroupedPlayersList displayMenu={displayMenu} players={presenceList} />
             </div>
           </div>
         </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
index ef389b8b2..3c12e3aa7 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
@@ -1,10 +1,4 @@
-import React, {
-  memo,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from 'react';
+import React, { memo, useState, useRef, useEffect, useCallback } from 'react';
 
 import cn from 'classnames';
 import Gon from 'gon';
@@ -44,9 +38,10 @@ import LobbyChat from './LobbyChat';
 import ShowButton from './ShowButton';
 import TournamentCard from './TournamentCard';
 
-const isActiveGame = game => [gameStateCodes.playing, gameStateCodes.waitingOpponent].includes(game.state);
+const isActiveGame = (game) =>
+  [gameStateCodes.playing, gameStateCodes.waitingOpponent].includes(game.state);
 
-const Players = memo(({ players, isBot, gameId }) => {
+const Players = memo(({ gameId, isBot, players }) => {
   if (players.length === 1) {
     const badgeClassName = cn('badge badge-pill ml-2', {
       'badge-secondary': isBot,
@@ -65,9 +60,7 @@ const Players = memo(({ players, isBot, gameId }) => {
             overlay={<Tooltip id={tooltipId}>{tooltipInfo}</Tooltip>}
             placement="right"
           >
-            <span className={badgeClassName}>
-              {isBot ? 'No rating' : 'Rating'}
-            </span>
+            <span className={badgeClassName}>{isBot ? 'No rating' : 'Rating'}</span>
           </OverlayTrigger>
         </div>
       </td>
@@ -79,9 +72,9 @@ const Players = memo(({ players, isBot, gameId }) => {
       <td className="p-3 align-middle text-nowrap cb-username-td text-truncate">
         <div className="d-flex flex-column position-relative">
           <UserInfo
-            user={players[0]}
             hideOnlineIndicator
             loading={players[0].checkResult.status === 'started'}
+            user={players[0]}
           />
           <GameProgressBar player={players[0]} position="left" />
         </div>
@@ -89,9 +82,9 @@ const Players = memo(({ players, isBot, gameId }) => {
       <td className="p-3 align-middle text-nowrap cb-username-td text-truncate">
         <div className="d-flex flex-column position-relative">
           <UserInfo
-            user={players[1]}
             hideOnlineIndicator
             loading={players[1].checkResult.status === 'started'}
+            user={players[1]}
           />
           <GameProgressBar player={players[1]} position="right" />
         </div>
@@ -100,7 +93,7 @@ const Players = memo(({ players, isBot, gameId }) => {
   );
 });
 
-const LiveTournaments = ({ tournaments }) => {
+function LiveTournaments({ tournaments }) {
   if (isEmpty(tournaments)) {
     return (
       <div className="text-center">
@@ -128,14 +121,11 @@ const LiveTournaments = ({ tournaments }) => {
             </tr>
           </thead>
           <tbody className="">
-            {sortedTournaments.map(tournament => (
+            {sortedTournaments.map((tournament) => (
               <tr key={tournament.id}>
                 <td className="p-3 align-middle">{tournament.name}</td>
                 <td className="p-3 align-middle text-nowrap">
-                  {moment
-                    .utc(tournament.startsAt)
-                    .local()
-                    .format('YYYY-MM-DD HH:mm')}
+                  {moment.utc(tournament.startsAt).local().format('YYYY-MM-DD HH:mm')}
                 </td>
                 <td className="p-3 align-middle text-nowrap">
                   <UserInfo user={tournament.creator} />
@@ -150,15 +140,9 @@ const LiveTournaments = ({ tournaments }) => {
       </div>
       <div className="d-none d-sm-block d-md-none d-flex m-2 overflow-auto position-relative">
         <HorizontalScrollControls>
-          {sortedTournaments.map(
-            tournament => (
-              <TournamentCard
-                key={`card-${tournament.id}`}
-                type="active"
-                tournament={tournament}
-              />
-            ),
-          )}
+          {sortedTournaments.map((tournament) => (
+            <TournamentCard key={`card-${tournament.id}`} tournament={tournament} type="active" />
+          ))}
         </HorizontalScrollControls>
       </div>
       <div className="text-center mt-3">
@@ -168,9 +152,9 @@ const LiveTournaments = ({ tournaments }) => {
       </div>
     </div>
   );
-};
+}
 
-const CompletedTournaments = ({ tournaments }) => {
+function CompletedTournaments({ tournaments }) {
   if (isEmpty(tournaments)) {
     return null;
   }
@@ -192,15 +176,12 @@ const CompletedTournaments = ({ tournaments }) => {
             </tr>
           </thead>
           <tbody className="">
-            {sortedTournaments.map(tournament => (
+            {sortedTournaments.map((tournament) => (
               <tr key={tournament.id}>
                 <td className="p-3 align-middle">{tournament.name}</td>
                 <td className="p-3 align-middle">{tournament.type}</td>
                 <td className="p-3 align-middle text-nowrap">
-                  {moment
-                    .utc(tournament.startsAt)
-                    .local()
-                    .format('YYYY-MM-DD HH:mm')}
+                  {moment.utc(tournament.startsAt).local().format('YYYY-MM-DD HH:mm')}
                 </td>
                 <td className="p-3 align-middle text-nowrap">
                   <UserInfo user={tournament.creator} />
@@ -215,29 +196,25 @@ const CompletedTournaments = ({ tournaments }) => {
       </div>
       <div className="d-none d-sm-block d-md-none d-flex m-2 overflow-auto position-relative">
         <HorizontalScrollControls>
-          {sortedTournaments.map(
-            tournament => (
-              <TournamentCard
-                key={`card-${tournament.id}`}
-                type="completed"
-                tournament={tournament}
-              />
-            ),
-          )}
+          {sortedTournaments.map((tournament) => (
+            <TournamentCard
+              key={`card-${tournament.id}`}
+              tournament={tournament}
+              type="completed"
+            />
+          ))}
         </HorizontalScrollControls>
       </div>
     </div>
   );
-};
+}
 
-const ActiveGames = ({
-  games, currentUserId, isGuest, isOnline,
-}) => {
+function ActiveGames({ currentUserId, games, isGuest, isOnline }) {
   if (!games) {
     return null;
   }
 
-  const filterGames = game => {
+  const filterGames = (game) => {
     if (game.visibilityType === 'hidden') {
       return !!find(game.players, { id: currentUserId });
     }
@@ -249,18 +226,14 @@ const ActiveGames = ({
     return <p className="text-center">There are no active games right now.</p>;
   }
 
-  const gamesSortByLevel = sortBy(filtetedGames, [
-    game => levelRatio[game.level],
-  ]);
+  const gamesSortByLevel = sortBy(filtetedGames, [(game) => levelRatio[game.level]]);
 
   const {
-    gamesWithCurrentUser = [],
     gamesWithActiveUsers = [],
     gamesWithBots = [],
-  } = groupBy(gamesSortByLevel, game => {
-    const isCurrentUserPlay = game.players.some(
-      ({ id }) => id === currentUserId,
-    );
+    gamesWithCurrentUser = [],
+  } = groupBy(gamesSortByLevel, (game) => {
+    const isCurrentUserPlay = game.players.some(({ id }) => id === currentUserId);
     if (isCurrentUserPlay) {
       return 'gamesWithCurrentUser';
     }
@@ -270,11 +243,7 @@ const ActiveGames = ({
     return 'gamesWithBots';
   });
 
-  const sortedGames = [
-    ...gamesWithCurrentUser,
-    ...gamesWithActiveUsers,
-    ...gamesWithBots,
-  ];
+  const sortedGames = [...gamesWithCurrentUser, ...gamesWithActiveUsers, ...gamesWithBots];
 
   return (
     <>
@@ -292,55 +261,51 @@ const ActiveGames = ({
           </thead>
           <tbody>
             {sortedGames.map(
-              game => isActiveGame(game) && (
-                <tr key={game.id} className="text-dark game-item">
-                  <td className="p-3 align-middle text-nowrap">
-                    <GameLevelBadge level={game.level} />
-                  </td>
-                  <td className="p-3 align-middle text-center text-nowrap">
-                    <GameStateBadge state={game.state} />
-                  </td>
-                  <Players
-                    gameId={game.id}
-                    players={game.players}
-                    isBot={game.isBot}
-                  />
-                  <td className="p-3 align-middle text-center">
-                    <GameActionButton
-                      type="table"
-                      game={game}
-                      currentUserId={currentUserId}
-                      isGuest={isGuest}
-                      isOnline={isOnline}
-                    />
-                  </td>
-                </tr>
-              ),
+              (game) =>
+                isActiveGame(game) && (
+                  <tr key={game.id} className="text-dark game-item">
+                    <td className="p-3 align-middle text-nowrap">
+                      <GameLevelBadge level={game.level} />
+                    </td>
+                    <td className="p-3 align-middle text-center text-nowrap">
+                      <GameStateBadge state={game.state} />
+                    </td>
+                    <Players gameId={game.id} isBot={game.isBot} players={game.players} />
+                    <td className="p-3 align-middle text-center">
+                      <GameActionButton
+                        currentUserId={currentUserId}
+                        game={game}
+                        isGuest={isGuest}
+                        isOnline={isOnline}
+                        type="table"
+                      />
+                    </td>
+                  </tr>
+                ),
             )}
           </tbody>
         </table>
       </div>
-      <div
-        className="d-none d-sm-block d-md-none d-flex m-2 position-relative"
-      >
+      <div className="d-none d-sm-block d-md-none d-flex m-2 position-relative">
         <HorizontalScrollControls>
           {sortedGames.map(
-            game => isActiveGame(game) && (
-              <GameCard
-                key={`card-${game.id}`}
-                type="active"
-                game={game}
-                currentUserId={currentUserId}
-                isGuest={isGuest}
-                isOnline={isOnline}
-              />
-            ),
+            (game) =>
+              isActiveGame(game) && (
+                <GameCard
+                  key={`card-${game.id}`}
+                  currentUserId={currentUserId}
+                  game={game}
+                  isGuest={isGuest}
+                  isOnline={isOnline}
+                  type="active"
+                />
+              ),
           )}
         </HorizontalScrollControls>
       </div>
     </>
   );
-};
+}
 
 const tabLinkClassName = (...hash) => {
   const url = new URL(window.location);
@@ -350,7 +315,7 @@ const tabLinkClassName = (...hash) => {
   );
 };
 
-const tabContentClassName = hash => {
+const tabContentClassName = (hash) => {
   const url = new URL(window.location);
   return cn({
     'tab-pane': true,
@@ -360,20 +325,20 @@ const tabContentClassName = hash => {
   });
 };
 
-const tabLinkHandler = hash => () => {
+const tabLinkHandler = (hash) => () => {
   window.location.hash = hash;
 };
 
-const GameContainers = ({
+function GameContainers({
   activeGames,
   completedGames,
-  liveTournaments,
   completedTournaments,
-  totalGames,
   currentUserId,
   isGuest = true,
   isOnline = false,
-}) => {
+  liveTournaments,
+  totalGames,
+}) {
   useEffect(() => {
     if (!window.location.hash) {
       tabLinkHandler(hashLinkNames.default)();
@@ -385,45 +350,42 @@ const GameContainers = ({
     <div className="p-0 shadow-sm rounded-lg">
       <nav>
         <div
-          id="nav-tab"
           className="nav nav-tabs flex-nowrap cb-overflow-x-auto bg-gray rounded-top border-dark border-bottom"
+          id="nav-tab"
           role="tablist"
         >
           <a
-            className={tabLinkClassName(
-              hashLinkNames.lobby,
-              hashLinkNames.default,
-            )}
-            id="lobby-tab"
+            aria-controls="lobby"
+            aria-selected="true"
+            className={tabLinkClassName(hashLinkNames.lobby, hashLinkNames.default)}
             data-toggle="tab"
             href="#lobby"
+            id="lobby-tab"
             role="tab"
-            aria-controls="lobby"
-            aria-selected="true"
             onClick={tabLinkHandler(hashLinkNames.lobby)}
           >
             Lobby
           </a>
           <a
+            aria-controls="tournaments"
+            aria-selected="false"
             className={tabLinkClassName(hashLinkNames.tournaments)}
-            id="tournaments-tab"
             data-toggle="tab"
             href="#tournaments"
+            id="tournaments-tab"
             role="tab"
-            aria-controls="tournaments"
-            aria-selected="false"
             onClick={tabLinkHandler(hashLinkNames.tournaments)}
           >
             Tournaments
           </a>
           <a
+            aria-controls="completedGames"
+            aria-selected="false"
             className={tabLinkClassName(hashLinkNames.completedGames)}
-            id="completedGames-tab"
             data-toggle="tab"
             href="#completedGames"
+            id="completedGames-tab"
             role="tab"
-            aria-controls="completedGames"
-            aria-selected="false"
             onClick={tabLinkHandler(hashLinkNames.completedGames)}
           >
             Completed Games
@@ -432,48 +394,45 @@ const GameContainers = ({
       </nav>
       <div className="tab-content" id="nav-tabContent">
         <div
-          className={tabContentClassName(
-            hashLinkNames.lobby,
-            hashLinkNames.default,
-          )}
+          aria-labelledby="lobby-tab"
+          className={tabContentClassName(hashLinkNames.lobby, hashLinkNames.default)}
           id="lobby"
           role="tabpanel"
-          aria-labelledby="lobby-tab"
         >
           <ActiveGames
-            games={activeGames}
             currentUserId={currentUserId}
+            games={activeGames}
             isGuest={isGuest}
             isOnline={isOnline}
           />
         </div>
         <div
+          aria-labelledby="tournaments-tab"
           className={tabContentClassName(hashLinkNames.tournaments)}
           id="tournaments"
           role="tabpanel"
-          aria-labelledby="tournaments-tab"
         >
           <LiveTournaments tournaments={liveTournaments} />
           <CompletedTournaments tournaments={completedTournaments} />
         </div>
         <div
+          aria-labelledby="completedGames-tab"
           className={tabContentClassName(hashLinkNames.completedGames)}
           id="completedGames"
           role="tabpanel"
-          aria-labelledby="completedGames-tab"
         >
           <CompletedGames
-            type="completed"
             className="table-responsive scroll cb-lobby-widget-container"
             games={completedGames}
             loadNextPage={loadNextPage}
             totalGames={totalGames}
+            type="completed"
           />
         </div>
       </div>
     </div>
   );
-};
+}
 
 const renderModal = (show, handleCloseModal) => (
   <Modal show={show} onHide={handleCloseModal}>
@@ -486,18 +445,20 @@ const renderModal = (show, handleCloseModal) => (
   </Modal>
 );
 
-const CreateGameButton = ({ onClick, isOnline, isContinue }) => (
-  <button
-    type="button"
-    className="btn btn-success border-0 text-uppercase font-weight-bold py-3 rounded-lg"
-    onClick={onClick}
-    disabled={!isOnline}
-  >
-    {isContinue ? 'Continue' : 'Create a Game'}
-  </button>
-);
+function CreateGameButton({ isContinue, isOnline, onClick }) {
+  return (
+    <button
+      className="btn btn-success border-0 text-uppercase font-weight-bold py-3 rounded-lg"
+      disabled={!isOnline}
+      type="button"
+      onClick={onClick}
+    >
+      {isContinue ? 'Continue' : 'Create a Game'}
+    </button>
+  );
+}
 
-const LobbyWidget = () => {
+function LobbyWidget() {
   const currentOpponent = Gon.getAsset('opponent');
 
   const dispatch = useDispatch();
@@ -511,10 +472,10 @@ const LobbyWidget = () => {
   const activeGame = useSelector(selectors.activeGameSelector);
   const {
     activeGames,
-    liveTournaments,
+    channel: { online },
     completedTournaments,
+    liveTournaments,
     presenceList,
-    channel: { online },
   } = useSelector(selectors.lobbyDataSelector);
 
   const [actionModalShowing, setActionModalShowing] = useState({ opened: false });
@@ -553,37 +514,45 @@ const LobbyWidget = () => {
     <div className="container-lg">
       {renderModal(isModalShow, handleCloseModal)}
       <ChatActionModal
-        presenceList={presenceList}
         chatInputRef={chatInputRef}
         modalShowing={actionModalShowing}
+        presenceList={presenceList}
         setModalShowing={setActionModalShowing}
       />
       <div className="row">
         <div className="d-flex flex-column col-12 col-lg-8 p-0 mb-2 pr-lg-2">
           <div className="d-none d-sm-block d-md-none d-flex flex-column mb-2">
-            <CreateGameButton onClick={handleCreateGameBtnClick} isOnline={online} isContinue={!!activeGame} />
+            <CreateGameButton
+              isContinue={!!activeGame}
+              isOnline={online}
+              onClick={handleCreateGameBtnClick}
+            />
           </div>
           <GameContainers
             activeGames={activeGames}
             completedGames={completedGames}
-            liveTournaments={liveTournaments}
             completedTournaments={completedTournaments}
-            totalGames={totalGames}
             currentUserId={currentUserId}
             isGuest={isGuest}
             isOnline={online}
+            liveTournaments={liveTournaments}
+            totalGames={totalGames}
           />
           <LobbyChat
-            setOpenActionModalShowing={setActionModalShowing}
-            presenceList={presenceList}
             inputRef={chatInputRef}
+            presenceList={presenceList}
+            setOpenActionModalShowing={setActionModalShowing}
           />
         </div>
 
         <div className="d-flex flex-column col-12 col-lg-4 p-0">
           <div className="d-none d-sm-none d-md-block">
             <div className="d-flex flex-column">
-              <CreateGameButton onClick={handleCreateGameBtnClick} isOnline={online} isContinue={!!activeGame} />
+              <CreateGameButton
+                isContinue={!!activeGame}
+                isOnline={online}
+                onClick={handleCreateGameBtnClick}
+              />
             </div>
           </div>
           <div className="mt-2">
@@ -596,6 +565,6 @@ const LobbyWidget = () => {
       </div>
     </div>
   );
-};
+}
 
 export default LobbyWidget;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.jsx
index e41764e1e..ca5a565a3 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ShowButton.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
 
-function ShowButton({ url, type = 'table' }) {
+function ShowButton({ type = 'table', url }) {
   return (
     <a
-      type="button"
-      className={`btn ${
-        type === 'table' ? 'px-4 ml-1' : ''
-      } btn-secondary btn-sm rounded-lg`}
+      className={`btn ${type === 'table' ? 'px-4 ml-1' : ''} btn-secondary btn-sm rounded-lg`}
       href={url}
+      type="button"
     >
       Show
     </a>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TaskChoice.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TaskChoice.jsx
index 68ccd566a..409433ea8 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TaskChoice.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TaskChoice.jsx
@@ -16,15 +16,13 @@ import i18n from '../../../i18n';
 import * as selectors from '../../selectors';
 import { actions } from '../../slices';
 
-const isRandomTask = task => !has(task, 'id');
+const isRandomTask = (task) => !has(task, 'id');
 
 const mapTagsToTaskIds = (tasks, tags) => {
   const otherTag = tags.at(-1);
   const popularTags = tags.slice(0, -1);
 
-  const initAcc = tags.reduce((acc, tag) => (
-    { ...acc, [tag]: [] }
-  ), {});
+  const initAcc = tags.reduce((acc, tag) => ({ ...acc, [tag]: [] }), {});
 
   return tasks.reduce((acc, task) => {
     const newAcc = task.tags.reduce((currentAcc, tag) => {
@@ -53,7 +51,7 @@ const mapTagsToTaskIds = (tasks, tags) => {
 };
 
 const getTaskIdsByTags = (dictionary, tags) => {
-  const taskIds = tags.map(tag => dictionary[tag]);
+  const taskIds = tags.map((tag) => dictionary[tag]);
   return intersection(...taskIds);
 };
 
@@ -63,60 +61,45 @@ const filterTasksByTagsAndLevel = (tasks, tags, dictionary) => {
   }
 
   const availableTaskIds = getTaskIdsByTags(dictionary, tags);
-  return tasks.filter(task => availableTaskIds.includes(task.id));
+  return tasks.filter((task) => availableTaskIds.includes(task.id));
 };
 
-const CurrentUserTaskLabel = ({ task, userStats = { user: { avatarUrl: '' } } }) => {
-  const { user: { avatarUrl } } = userStats;
+function CurrentUserTaskLabel({ task, userStats = { user: { avatarUrl: '' } } }) {
+  const {
+    user: { avatarUrl },
+  } = userStats;
 
   return (
     <div className="d-flex align-items-center">
       <div className="mr-1">
         <img
+          alt="User avatar"
           className="img-fluid"
-          style={{ maxHeight: '16px', width: '16px' }}
           src={avatarUrl}
-          alt="User avatar"
+          style={{ maxHeight: '16px', width: '16px' }}
         />
       </div>
       <div>
-        <span className="text-truncate">
-          {task.name}
-        </span>
+        <span className="text-truncate">{task.name}</span>
       </div>
     </div>
   );
-};
+}
 
-const renderIcon = type => {
+const renderIcon = (type) => {
   switch (type) {
     case 'user':
-      return (
-        <FontAwesomeIcon
-          icon={faUser}
-          className="mr-1"
-        />
-      );
+      return <FontAwesomeIcon className="mr-1" icon={faUser} />;
     case 'github':
-      return (
-        <FontAwesomeIcon
-          icon={['fab', 'github']}
-          className="mr-1"
-        />
-      );
+      return <FontAwesomeIcon className="mr-1" icon={['fab', 'github']} />;
     default:
-      return (
-        <FontAwesomeIcon
-          icon={faShuffle}
-          className="mr-1"
-        />
-      );
+      return <FontAwesomeIcon className="mr-1" icon={faShuffle} />;
   }
 };
 
 const isCreatedByCurrentUser = (taskCreatorId, userId) => taskCreatorId && taskCreatorId === userId;
 
-const TaskLabel = ({ task, userStats, currentUserId }) => {
+function TaskLabel({ currentUserId, task, userStats }) {
   if (isCreatedByCurrentUser(task.creatorId, currentUserId)) {
     return <CurrentUserTaskLabel task={task} userStats={userStats} />;
   }
@@ -127,14 +110,9 @@ const TaskLabel = ({ task, userStats, currentUserId }) => {
       <span>{task.name}</span>
     </span>
   );
-};
+}
 
-function TaskSelect({
-  setChosenTask,
-  randomTask,
-  tasks,
-  level,
-}) {
+function TaskSelect({ level, randomTask, setChosenTask, tasks }) {
   const dispatch = useDispatch();
   const defaultOption = { label: <TaskLabel task={randomTask} />, value: randomTask.name };
   const currentUserId = useSelector(selectors.currentUserIdSelector);
@@ -144,10 +122,10 @@ function TaskSelect({
   useEffect(() => {
     axios
       .get(`/api/v1/user/${currentUserId}/stats`)
-      .then(response => {
+      .then((response) => {
         setUserStats(camelizeKeys(response.data));
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -165,32 +143,25 @@ function TaskSelect({
       key={`task-choise-${level}`}
       className="w-100"
       defaultValue={defaultOption}
-      onChange={onChange}
-      filterOption={({ value: { name } }, inputValue) => (
+      filterOption={({ value: { name } }, inputValue) =>
         name.toLowerCase().includes(inputValue.toLowerCase())
-      )}
-      options={
-        allTasks.map(task => (
-          {
-            label: <TaskLabel
-              task={task}
-              userStats={userStats}
-              currentUserId={currentUserId}
-            />,
-            value: task,
-          }))
-        }
+      }
+      options={allTasks.map((task) => ({
+        label: <TaskLabel currentUserId={currentUserId} task={task} userStats={userStats} />,
+        value: task,
+      }))}
+      onChange={onChange}
     />
   );
 }
 
 export default function TaskChoice({
-  chosenTask,
-  setChosenTask,
   chosenTags,
-  setChosenTags,
+  chosenTask,
   level,
   randomTask,
+  setChosenTags,
+  setChosenTask,
 }) {
   const dispatch = useDispatch();
   const taskTags = Gon.getAsset('task_tags');
@@ -204,7 +175,7 @@ export default function TaskChoice({
         const { tasks } = camelizeKeys(data);
         setAllTasks(tasks);
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -212,11 +183,16 @@ export default function TaskChoice({
 
   const tagsToTaskIdsDictionary = mapTagsToTaskIds(allTasks, taskTags);
 
-  const tasksFilteredByLevel = allTasks.filter(task => task.level === level);
+  const tasksFilteredByLevel = allTasks.filter((task) => task.level === level);
 
-  const filteredTasks = filterTasksByTagsAndLevel(tasksFilteredByLevel, chosenTags, tagsToTaskIdsDictionary, level);
+  const filteredTasks = filterTasksByTagsAndLevel(
+    tasksFilteredByLevel,
+    chosenTags,
+    tagsToTaskIdsDictionary,
+    level,
+  );
 
-  const isTagButtonDisabled = tag => {
+  const isTagButtonDisabled = (tag) => {
     if (!isRandomTask(chosenTask)) {
       return true;
     }
@@ -224,15 +200,14 @@ export default function TaskChoice({
     return availableTaskIds.length === 0;
   };
 
-  const isTagChosen = tag => (
+  const isTagChosen = (tag) =>
     isRandomTask(chosenTask)
       ? chosenTags.includes(tag)
-      : tagsToTaskIdsDictionary[tag].includes(chosenTask.id)
-  );
+      : tagsToTaskIdsDictionary[tag].includes(chosenTask.id);
 
-  const toggleTagButton = tag => {
+  const toggleTagButton = (tag) => {
     if (chosenTags.includes(tag)) {
-      const tagsWithoutChosen = chosenTags.filter(chosenTag => chosenTag !== tag);
+      const tagsWithoutChosen = chosenTags.filter((chosenTag) => chosenTag !== tag);
       setChosenTags(tagsWithoutChosen);
       return;
     }
@@ -244,25 +219,25 @@ export default function TaskChoice({
       <h5>{i18n.t('Choose task by name or tags')}</h5>
       <div className="d-flex justify-content-around px-5 mt-3 mb-2">
         <TaskSelect
-          setChosenTask={setChosenTask}
+          level={level}
           randomTask={randomTask}
+          setChosenTask={setChosenTask}
           tasks={filteredTasks}
-          level={level}
         />
       </div>
       <div className="d-flex flex-column justify-content-around px-5 mt-3 mb-2">
         <h6>{i18n.t('Tags')}</h6>
         <div className="border p-2 rounded-lg">
-          {taskTags.map(tag => (
+          {taskTags.map((tag) => (
             <button
               key={tag}
-              type="button"
               className={cn('btn btn-sm mr-1 tag rounded-lg', {
                 'bg-orange text-white': isTagChosen(tag),
                 'tag-btn-outline-orange': !isTagChosen(tag),
               })}
-              onClick={() => toggleTagButton(tag)}
               disabled={isTagButtonDisabled(tag)}
+              type="button"
+              onClick={() => toggleTagButton(tag)}
             >
               {tag}
             </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.jsx
index 200c0d2ae..0f619f34d 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/TournamentCard.jsx
@@ -7,13 +7,9 @@ import UserInfo from '../../components/UserInfo';
 
 import ShowButton from './ShowButton';
 
-function TournamentCard({
-  tournament,
-}) {
+function TournamentCard({ tournament }) {
   return (
-    <div
-      className="d-flex flex-column shadow-sm p-2 mb-2 mx-2 bg-white border rounded-lg"
-    >
+    <div className="d-flex flex-column shadow-sm p-2 mb-2 mx-2 bg-white border rounded-lg">
       <div className="d-flex flex-column mb-2 h-100">
         <h4 className="p-1 text-nowrap">{tournament.name}</h4>
         <h5 className="p-1 text-nowrap">
@@ -22,12 +18,7 @@ function TournamentCard({
           {` ${tournament.type}`}
         </h5>
         <span className="p-1 text-nowrap">
-          {`Starts at ${
-            moment
-              .utc(tournament.startsAt)
-              .local()
-              .format('YYYY-MM-DD HH:mm')
-          }`}
+          {`Starts at ${moment.utc(tournament.startsAt).local().format('YYYY-MM-DD HH:mm')}`}
         </span>
         <span className="d-flex p-1 text-nowrap">
           <span className="mr-2">Creator:</span>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.jsx
index 3f6b96f74..4ca84806c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/profile/Heatmap.jsx
@@ -7,7 +7,7 @@ import { useDispatch } from 'react-redux';
 import Loading from '../../components/Loading';
 import { actions } from '../../slices';
 
-const getColorScale = count => {
+const getColorScale = (count) => {
   if (count >= 5) {
     return 'color-huge';
   }
@@ -29,10 +29,10 @@ function Heatmap() {
     const userId = window.location.pathname.split('/').pop();
     axios
       .get(`/api/v1/${userId}/activity`)
-      .then(response => {
+      .then((response) => {
         setActivities(response.data.activities);
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
   }, [setActivities, dispatch]);
@@ -49,19 +49,19 @@ function Heatmap() {
       <div className="card-body py-0 my-0">
         <CalendarHeatmap
           showWeekdayLabels
-          values={activities}
-          classForValue={value => {
+          classForValue={(value) => {
             if (!value) {
               return 'color-empty';
             }
             return getColorScale(value.count);
           }}
-          titleForValue={value => {
+          titleForValue={(value) => {
             if (!value) {
               return 'No games';
             }
             return `${value.count} games on ${value.date}`;
           }}
+          values={activities}
         />
       </div>
     </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.jsx
index 8039cd92b..e236342bd 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/profile/UserProfile.jsx
@@ -30,9 +30,7 @@ import Heatmap from './Heatmap';
 
 function UserProfile() {
   const [stats, setStats] = useState(null);
-  const { completedGames, totalGames } = useSelector(
-    selectors.completedGamesData,
-  );
+  const { completedGames, totalGames } = useSelector(selectors.completedGamesData);
 
   const dispatch = useDispatch();
 
@@ -41,10 +39,10 @@ function UserProfile() {
 
     axios
       .get(`/api/v1/user/${userId}/stats`)
-      .then(response => {
+      .then((response) => {
         setStats(camelizeKeys(response.data));
       })
-      .catch(error => {
+      .catch((error) => {
         dispatch(actions.setError(error));
       });
   }, [dispatch]);
@@ -53,27 +51,28 @@ function UserProfile() {
     dispatch(fetchCompletedGames());
   }, [dispatch]);
 
-  const dateParse = date => new Date(date).toLocaleString('en-US', {
+  const dateParse = (date) =>
+    new Date(date).toLocaleString('en-US', {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
     });
 
-  const renderAchivement = achievement => {
+  const renderAchivement = (achievement) => {
     if (achievement.includes('win_games_with')) {
       const langs = achievement.split('?').pop().split('_');
 
       return (
         <div className="cb-polyglot mr-1 mb-1" title={achievement}>
           <div className="d-flex h-75 flex-wrap align-items-center justify-content-around cb-polyglot-icons">
-            {langs.map(lang => (
+            {langs.map((lang) => (
               <img
-                src={`/assets/images/achievements/${lang}.png`}
+                key={lang}
                 alt={lang}
+                height="14"
+                src={`/assets/images/achievements/${lang}.png`}
                 title={lang}
                 width="14"
-                height="14"
-                key={lang}
               />
             ))}
           </div>
@@ -82,12 +81,12 @@ function UserProfile() {
     }
     return (
       <img
+        alt={achievement}
         className="mr-1 mb-1"
+        height="65"
         src={`/assets/images/achievements/${achievement}.png`}
-        alt={achievement}
         title={achievement}
         width="65"
-        height="65"
       />
     );
   };
@@ -119,26 +118,25 @@ function UserProfile() {
     ];
 
     const groups = groupBy(stats.stats.all, 'lang');
-    const reducedByLangStats = mapValues(groups, group => group.reduce((total, item) => total + item.count, 0));
-    const resultDataForPie = Object.entries(reducedByLangStats).map(
-      ([lang, count]) => ({ name: lang, value: count }),
+    const reducedByLangStats = mapValues(groups, (group) =>
+      group.reduce((total, item) => total + item.count, 0),
     );
+    const resultDataForPie = Object.entries(reducedByLangStats).map(([lang, count]) => ({
+      name: lang,
+      value: count,
+    }));
     const fullMark = Math.max(...Object.values(stats.stats.games));
-    const resultDataForRadar = Object.keys(stats.stats.games).map(
-      subject => ({
-        subject,
-        A: stats.stats.games[subject],
-        fullMark,
-      }),
-    );
+    const resultDataForRadar = Object.keys(stats.stats.games).map((subject) => ({
+      subject,
+      A: stats.stats.games[subject],
+      fullMark,
+    }));
 
-    const sortedDataForPie = resultDataForPie.sort(
-      ({ value: a }, { value: b }) => {
-        if (a < b) return 1;
-        if (a > b) return -1;
-        return 0;
-      },
-    );
+    const sortedDataForPie = resultDataForPie.sort(({ value: a }, { value: b }) => {
+      if (a < b) return 1;
+      if (a > b) return -1;
+      return 0;
+    });
     const sortedDataForRadar = resultDataForRadar.sort((a, b) => {
       if (a.subject === 'won') return -1;
       if (b.subject === 'won') return 1;
@@ -150,42 +148,28 @@ function UserProfile() {
     return (
       <>
         <div className="col-6">
-          <ResponsiveContainer width="100%" height="100%">
-            <RadarChart
-              cx="50%"
-              cy="50%"
-              outerRadius="80%"
-              data={sortedDataForRadar}
-            >
+          <ResponsiveContainer height="100%" width="100%">
+            <RadarChart cx="50%" cy="50%" data={sortedDataForRadar} outerRadius="80%">
               <PolarGrid />
               <PolarAngleAxis dataKey="subject" />
               <PolarRadiusAxis />
-              <Radar
-                name="count"
-                dataKey="A"
-                stroke="#8884d8"
-                fill="#8884d8"
-                fillOpacity={0.6}
-              />
+              <Radar dataKey="A" fill="#8884d8" fillOpacity={0.6} name="count" stroke="#8884d8" />
               <Tooltip />
             </RadarChart>
           </ResponsiveContainer>
         </div>
         <div className="col-6">
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer height="100%" width="100%">
             <PieChart>
               <Pie
-                dataKey="value"
+                label
                 data={sortedDataForPie}
+                dataKey="value"
                 labelLine={false}
-                label
                 position="inside"
               >
                 {sortedDataForPie.map(({ name }, index) => (
-                  <Cell
-                    key={`cell-${name}`}
-                    fill={colors[index % colors.length]}
-                  />
+                  <Cell key={`cell-${name}`} fill={colors[index % colors.length]} />
                 ))}
               </Pie>
               <Tooltip />
@@ -217,10 +201,7 @@ function UserProfile() {
           <p className="lead">games_played</p>
         </div>
       </div>
-      <div
-        className="row my-4 justify-content-center"
-        style={{ width: '100%', height: 400 }}
-      >
+      <div className="row my-4 justify-content-center" style={{ width: '100%', height: 400 }}>
         {renderCustomPieChart()}
       </div>
       <div className="row my-4 justify-content-center">
@@ -236,24 +217,20 @@ function UserProfile() {
       <div className="col-12">
         <div className="text-left">
           {completedGames && completedGames.length > 0 && (
-            <>
-              <CompletedGames
-                className="table-responsive scroll h-75"
-                games={completedGames}
-                loadNextPage={loadNextPage}
-                totalGames={totalGames}
-              />
-            </>
+            <CompletedGames
+              className="table-responsive scroll h-75"
+              games={completedGames}
+              loadNextPage={loadNextPage}
+              totalGames={totalGames}
+            />
           )}
           {completedGames && completedGames.length === 0 && (
-            <>
-              <div
-                style={{ height: 498 }}
-                className="d-flex align-items-center justify-content-center border text-muted"
-              >
-                No completed games
-              </div>
-            </>
+            <div
+              className="d-flex align-items-center justify-content-center border text-muted"
+              style={{ height: 498 }}
+            >
+              No completed games
+            </div>
           )}
         </div>
       </div>
@@ -264,24 +241,24 @@ function UserProfile() {
       <nav>
         <div className="nav nav-tabs bg-gray" id="nav-tab" role="tablist">
           <a
+            aria-controls="statistics"
+            aria-selected="true"
             className="nav-item nav-link active text-uppercase rounded-0 text-black font-weight-bold p-3"
-            id="statistics-tab"
             data-toggle="tab"
             href="#statistics"
+            id="statistics-tab"
             role="tab"
-            aria-controls="statistics"
-            aria-selected="true"
           >
             Statistics
           </a>
           <a
+            aria-controls="completedGames"
+            aria-selected="false"
             className="nav-item nav-link text-uppercase rounded-0 text-black font-weight-bold p-3"
-            id="completedGames-tab"
             data-toggle="tab"
             href="#completedGames"
+            id="completedGames-tab"
             role="tab"
-            aria-controls="completedGames"
-            aria-selected="false"
           >
             Completed games
           </a>
@@ -289,18 +266,18 @@ function UserProfile() {
       </nav>
       <div className="tab-content" id="nav-tabContent">
         <div
+          aria-labelledby="statistics-tab"
           className="tab-pane fade border show active"
           id="statistics"
           role="tabpanel"
-          aria-labelledby="statistics-tab"
         >
           {renderStatistics()}
         </div>
         <div
+          aria-labelledby="completedGames-tab"
           className="tab-pane fade"
           id="completedGames"
           role="tabpanel"
-          aria-labelledby="completedGames-tab"
         >
           {renderCompletedGames()}
         </div>
@@ -314,9 +291,9 @@ function UserProfile() {
         <div className="col-12 col-md-3 my-4 cb-user-data d-flex flex-column">
           <div className="mb-2 mb-sm-4 d-flex justify-content-center">
             <img
+              alt="User avatar"
               className="cb-profile-avatar rounded"
               src={stats.user.avatarUrl}
-              alt="User avatar"
             />
           </div>
           <div className="text-center">
@@ -325,11 +302,11 @@ function UserProfile() {
             <h3 className="my-2 cb-heading">
               <span className="d-none d-sm-block">Lang:</span>
               <img
-                src={`/assets/images/achievements/${langIconNames[stats.user.lang]}.png`}
                 alt={stats.user.lang}
+                height="30"
+                src={`/assets/images/achievements/${langIconNames[stats.user.lang]}.png`}
                 title={stats.user.lang}
                 width="30"
-                height="30"
               />
             </h3>
             <hr />
@@ -340,9 +317,9 @@ function UserProfile() {
             <h1 className="my-2">
               {stats.user.githubName && (
                 <a
-                  title="Github account"
                   className="text-muted"
                   href={`https://github.com/${stats.user.githubName}`}
+                  title="Github account"
                 >
                   <span className="fab fa-github" />
                 </a>
@@ -354,10 +331,8 @@ function UserProfile() {
                   <hr className="mt-2" />
                   <h5 className="text-break cb-heading">Achievements</h5>
                   <div className="col d-flex flex-wrap justify-content-start cb-profile mt-3 pl-0">
-                    {stats.user.achievements.map(achievement => (
-                      <div key={achievement}>
-                        {renderAchivement(achievement)}
-                      </div>
+                    {stats.user.achievements.map((achievement) => (
+                      <div key={achievement}>{renderAchivement(achievement)}</div>
                     ))}
                   </div>
                 </>
@@ -365,9 +340,7 @@ function UserProfile() {
             </div>
           </div>
         </div>
-        <div className="col-12 col-md-9 my-4 cb-user-stats">
-          {statContainers()}
-        </div>
+        <div className="col-12 col-md-9 my-4 cb-user-stats">{statContainers()}</div>
       </div>
     </div>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/rating/RatingList.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/rating/RatingList.jsx
index a8e5ff4f9..b0be4871e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/rating/RatingList.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/rating/RatingList.jsx
@@ -10,13 +10,11 @@ import UserInfo from '../../components/UserInfo';
 import { getUsersRatingPage } from '../../middlewares/Users';
 import { usersListSelector } from '../../selectors';
 
-const decorateJoinedDate = str => moment.utc(str).format('LL');
+const decorateJoinedDate = (str) => moment.utc(str).format('LL');
 
 const renderSortArrow = (attribute, sortParams) => {
   const { attribute: currentAttribute, direction } = sortParams;
-  const classes = attribute === currentAttribute
-      ? `cb-sort-arrow ${direction}`
-      : 'sort-arrows';
+  const classes = attribute === currentAttribute ? `cb-sort-arrow ${direction}` : 'sort-arrows';
 
   return <span className={`d-inline-block ${classes}`} />;
 };
@@ -24,18 +22,15 @@ const renderSortArrow = (attribute, sortParams) => {
 const renderUser = (page, pageSize, user, index) => (
   <tr key={user.id}>
     <td className="p-3 align-middle text-nowrap text-muted">
-      #
-      {(page - 1) * pageSize + index + 1}
+      #{(page - 1) * pageSize + index + 1}
     </td>
     <td className="tex-left p-3 align-middle text-nowrap ">
-      <UserInfo user={user} truncate />
+      <UserInfo truncate user={user} />
     </td>
     <td className="p-3 align-middle text-nowrap ">{user.rank}</td>
     <td className="p-3 align-middle text-nowrap ">{user.rating}</td>
     <td className="p-3 align-middle text-nowrap ">{user.gamesPlayed}</td>
-    <td className="p-3 align-middle text-nowrap ">
-      {decorateJoinedDate(user.insertedAt)}
-    </td>
+    <td className="p-3 align-middle text-nowrap ">{decorateJoinedDate(user.insertedAt)}</td>
     <td className="p-3 align-middle text-nowrap ">
       {user.githubId ? (
         <a
@@ -55,30 +50,22 @@ const renderUser = (page, pageSize, user, index) => (
   </tr>
 );
 
-const renderPagination = (
-  { pageInfo: { pageNumber, pageSize, totalEntries } },
-  setPage,
-) => (
+const renderPagination = ({ pageInfo: { pageNumber, pageSize, totalEntries } }, setPage) => (
   <Pagination
     activePage={pageNumber}
+    itemClass="page-item"
     itemsCountPerPage={pageSize}
-    totalItemsCount={totalEntries}
+    linkClass="page-link"
     pageRangeDisplayed={5}
-    onChange={page => {
+    totalItemsCount={totalEntries}
+    onChange={(page) => {
       setPage(page);
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }}
-    itemClass="page-item"
-    linkClass="page-link"
   />
 );
 
-const renderFilterPeriodButtons = (
-  period,
-  filterParams,
-  setFilterParams,
-  setPage,
-) => {
+const renderFilterPeriodButtons = (period, filterParams, setFilterParams, setPage) => {
   const classes = cn(
     'mr-1 btn nav-link',
     filterParams.period === period ? 'nav-link active' : 'btn-link',
@@ -87,8 +74,8 @@ const renderFilterPeriodButtons = (
   return (
     <li key={period} className="nav-item">
       <button
-        type="button"
         className={classes}
+        type="button"
         onClick={() => {
           setFilterParams({ ...filterParams, period });
           setPage(1);
@@ -132,7 +119,7 @@ function UsersRating() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterParams, sortParams, page, pageSize]);
 
-  const triggerSort = attribute => {
+  const triggerSort = (attribute) => {
     const direction = sortParams.direction === 'desc' ? 'asc' : 'desc';
 
     setSortParams({
@@ -148,12 +135,9 @@ function UsersRating() {
       <p>{`Total entries: ${totalEntries}`}</p>
 
       <ul className="nav nav-pills justify-content-center mb-3">
-        {periods.map(period => renderFilterPeriodButtons(
-            period,
-            filterParams,
-            setFilterParams,
-            setPage,
-          ))}
+        {periods.map((period) =>
+          renderFilterPeriodButtons(period, filterParams, setFilterParams, setPage),
+        )}
       </ul>
 
       <div className="form-inline justify-content-between">
@@ -164,13 +148,13 @@ function UsersRating() {
             </span>
           </div>
           <input
-            type="text"
+            aria-describedby="basic-addon1"
+            aria-label="Username"
             className="form-control"
             placeholder="Username"
-            aria-label="Username"
-            aria-describedby="basic-addon1"
+            type="text"
             value={filterParams.name}
-            onChange={e => {
+            onChange={(e) => {
               setFilterParams({ ...filterParams, name: e.target.value });
               setPage(1);
             }}
@@ -183,7 +167,7 @@ function UsersRating() {
               <select
                 className="custom-select"
                 id="usersPerPage"
-                onChange={e => {
+                onChange={(e) => {
                   setPageSize(e.target.value);
                   setPage(1);
                 }}
@@ -200,10 +184,11 @@ function UsersRating() {
           <div className="form-check ml-3 mb-3">
             <label className="form-check-label" htmlFor="withBots">
               <input
-                id="withBots"
                 className="form-check-input"
-                type="checkbox"
+                defaultChecked={withBots}
+                id="withBots"
                 name="with_bots"
+                type="checkbox"
                 onChange={() => {
                   setFilterParams({
                     ...filterParams,
@@ -211,7 +196,6 @@ function UsersRating() {
                   });
                   setPage(1);
                 }}
-                defaultChecked={withBots}
               />
               With bots
             </label>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx
index b0fdc8c1f..4dea9ce29 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/registration/Registration.jsx
@@ -5,46 +5,51 @@ import cn from 'classnames';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
-const getCsrfToken = () => document
-  .querySelector("meta[name='csrf-token']")
-  .getAttribute('content'); // validation token
+const getCsrfToken = () =>
+  document.querySelector("meta[name='csrf-token']").getAttribute('content'); // validation token
 
-const isShowInvalidMessage = (formik, typeValue) => formik.submitCount !== 0 && !!formik.errors[typeValue];
+const isShowInvalidMessage = (formik, typeValue) =>
+  formik.submitCount !== 0 && !!formik.errors[typeValue];
 
-const getInputClassName = isInvalid => cn('form-control', {
+const getInputClassName = (isInvalid) =>
+  cn('form-control', {
     'is-invalid': isInvalid,
   });
 
-const Container = ({ children }) => (
-  <div className="container-fluid">
-    <div className="row justify-content-center">
-      <div className="col-lg-5 col-md-5 col-sm-5 px-md-4">
-        <div className="card border-light shadow-sm">{children}</div>
+function Container({ children }) {
+  return (
+    <div className="container-fluid">
+      <div className="row justify-content-center">
+        <div className="col-lg-5 col-md-5 col-sm-5 px-md-4">
+          <div className="card border-light shadow-sm">{children}</div>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
 
-const Title = ({ text }) => <h3 className="text-center">{text}</h3>;
+function Title({ text }) {
+  return <h3 className="text-center">{text}</h3>;
+}
 
-const Form = ({ onSubmit, id, children }) => (
-  <form onSubmit={onSubmit} noValidate>
-    {children}
-    <input
-      type="submit"
-      name="commit"
-      id={`${id}-submit`}
-      value="Submit"
-      aria-label="SubmitForm"
-      className="btn btn-primary btn-block rounded-lg"
-      data-disable-with="Submit"
-    />
-  </form>
-);
+function Form({ children, id, onSubmit }) {
+  return (
+    <form noValidate onSubmit={onSubmit}>
+      {children}
+      <input
+        aria-label="SubmitForm"
+        className="btn btn-primary btn-block rounded-lg"
+        data-disable-with="Submit"
+        id={`${id}-submit`}
+        name="commit"
+        type="submit"
+        value="Submit"
+      />
+    </form>
+  );
+}
 
-const Input = ({
- id, type, title, formik,
-}) => {
+function Input({ formik, id, title, type }) {
   const isInvalid = isShowInvalidMessage(formik, id);
   const inputClassName = getInputClassName(isInvalid);
 
@@ -52,81 +57,82 @@ const Input = ({
     <div className="form-group">
       <span className="text-primary">{title}</span>
       <input
-        type={type}
-        id={id}
         aria-label={id}
         className={inputClassName}
+        id={id}
+        type={type}
         {...formik.getFieldProps(id)}
       />
       {isInvalid && <div className="invalid-feedback">{formik.errors[id]}</div>}
     </div>
   );
-};
+}
 
-const Body = ({ children }) => (
-  <div className="card-body p-lg-4 p-xl-5">{children}</div>
-);
+function Body({ children }) {
+  return <div className="card-body p-lg-4 p-xl-5">{children}</div>;
+}
 
-const Footer = ({ children }) => (
-  <div className="card-footer py-2">
-    <div className="text-center">{children}</div>
-  </div>
-);
+function Footer({ children }) {
+  return (
+    <div className="card-footer py-2">
+      <div className="text-center">{children}</div>
+    </div>
+  );
+}
 
 const searchParams = new URLSearchParams(window.location.search);
 const getNextLocation = () => (searchParams.has('next') ? searchParams.get('next') : '/');
-const getLinkWithNext = link => (searchParams.has('next') ? `${link}?next=${searchParams.get('next')}` : link);
+const getLinkWithNext = (link) =>
+  searchParams.has('next') ? `${link}?next=${searchParams.get('next')}` : link;
 
-const SocialLinks = () => (
-  <>
-    <div className="mt-1">
-      <a
-        type="button"
-        aria-label="signInWithGithub"
-        href={getLinkWithNext('/auth/github')}
-        className="btn w-100 px-2 btn-outline-dark rounded-lg"
-      >
-        Sign in with Github
+function SocialLinks() {
+  return (
+    <>
+      <div className="mt-1">
+        <a
+          aria-label="signInWithGithub"
+          className="btn w-100 px-2 btn-outline-dark rounded-lg"
+          href={getLinkWithNext('/auth/github')}
+          type="button"
+        >
+          Sign in with Github
+        </a>
+      </div>
+      <div className="mt-1">
+        <a
+          aria-label="signInWithDiscord"
+          className="btn w-100 px-2 btn-outline-dark rounded-lg"
+          href={getLinkWithNext('/auth/discord')}
+          type="button"
+        >
+          Sign in with Discord
+        </a>
+      </div>
+    </>
+  );
+}
+
+function SignInInvitation() {
+  return (
+    <div className="small">
+      <span className="text-muted">If you have an account</span>
+      <a className="btn-link ml-3" href={getLinkWithNext('/session/new')} role="button">
+        Sign In
       </a>
     </div>
-    <div className="mt-1">
-      <a
-        type="button"
-        aria-label="signInWithDiscord"
-        href={getLinkWithNext('/auth/discord')}
-        className="btn w-100 px-2 btn-outline-dark rounded-lg"
-      >
-        Sign in with Discord
+  );
+}
+
+function SignUpInvitation() {
+  return (
+    <div className="small">
+      <span className="text-muted">Have not an account?</span>
+      <a className="btn-link ml-3" href={getLinkWithNext('/users/new')} role="button">
+        Sign Up
       </a>
     </div>
-  </>
-);
-
-const SignInInvitation = () => (
-  <div className="small">
-    <span className="text-muted">If you have an account</span>
-    <a
-      href={getLinkWithNext('/session/new')}
-      role="button"
-      className="btn-link ml-3"
-    >
-      Sign In
-    </a>
-  </div>
-);
-
-const SignUpInvitation = () => (
-  <div className="small">
-    <span className="text-muted">Have not an account?</span>
-    <a
-      href={getLinkWithNext('/users/new')}
-      role="button"
-      className="btn-link ml-3"
-    >
-      Sign Up
-    </a>
-  </div>
-);
+  );
+}
 
 function SignIn() {
   const formik = useFormik({
@@ -151,13 +157,17 @@ function SignIn() {
         .then(() => {
           window.location.href = getNextLocation();
         })
-        .catch(error => {
+        .catch((error) => {
           // TODO: add log for auth error
           // TODO: Add better errors handler
           if (error.response.data.errors) {
             const { errors } = error.response.data;
-            if (errors.email) { formik.setFieldError('email', errors.email); }
-            if (errors.base) { formik.setFieldError('base', errors.base); }
+            if (errors.email) {
+              formik.setFieldError('email', errors.email);
+            }
+            if (errors.base) {
+              formik.setFieldError('base', errors.base);
+            }
           }
         });
     },
@@ -166,16 +176,11 @@ function SignIn() {
   return (
     <Container>
       <Body>
-        <Form onSubmit={formik.handleSubmit} id="login">
+        <Form id="login" onSubmit={formik.handleSubmit}>
           <Title text="Sign In" />
-          <Input id="base" type="hidden" formik={formik} />
-          <Input id="email" type="email" title="Email" formik={formik} />
-          <Input
-            id="password"
-            type="password"
-            title="Password"
-            formik={formik}
-          />
+          <Input formik={formik} id="base" type="hidden" />
+          <Input formik={formik} id="email" title="Email" type="email" />
+          <Input formik={formik} id="password" title="Password" type="password" />
           <div className="text-right my-3">
             <a className="text-primary" href="/remind_password">
               Forgot your password?
@@ -204,53 +209,52 @@ function SignUp() {
       passwordConfirmation: '',
     },
     validationSchema: Yup.object().shape({
-      name: Yup
-        .string()
+      name: Yup.string()
         .test(
           'start-or-end-with-empty-symbols',
-          'Can\'t start or end with empty symbols',
-          value => {
+          "Can't start or end with empty symbols",
+          (value) => {
             if (!value) {
               return true;
             }
-            const invalidSymbolIndex = invalidSymbols.findIndex(invalidSymbol => (
-              value.startsWith(invalidSymbol) || value.endsWith(invalidSymbol)
-            ));
+            const invalidSymbolIndex = invalidSymbols.findIndex(
+              (invalidSymbol) => value.startsWith(invalidSymbol) || value.endsWith(invalidSymbol),
+            );
 
             return invalidSymbolIndex === -1;
           },
         )
         .min(3, 'Should be from 3 to 16 characters')
         .max(16, 'Should be from 3 to 16 characters')
-        .matches(/^[a-z]+[a-z0-9_-\s{1}][a-z0-9_]+$/i, 'Can contain letters, numbers and underscores and should begin with a Latin letter')
+        .matches(
+          /^[a-z]+[a-z0-9_-\s{1}][a-z0-9_]+$/i,
+          'Can contain letters, numbers and underscores and should begin with a Latin letter',
+        )
         .required('Nickname required'),
-      email: Yup
-        .string()
+      email: Yup.string()
         .email('Invalid email')
-        .test(
-          'exclude-braille-pattern-blank',
-          'Invalid email',
-          value => (
-            value
-              ? !value.includes(braillePatternBlank)
-              : true
-          ),
+        .test('exclude-braille-pattern-blank', 'Invalid email', (value) =>
+          value ? !value.includes(braillePatternBlank) : true,
+        )
+        .matches(
+          /^[a-z0-9]{1}[^;]*[a-z0-9]{1}@[^;]*$/i,
+          'Should begin and end with a Latin letter or number',
+        )
+        .matches(
+          /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/i,
+          "Can't contain special symbols",
         )
-        .matches(/^[a-z0-9]{1}[^;]*[a-z0-9]{1}@[^;]*$/i, 'Should begin and end with a Latin letter or number')
-        .matches(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/i, 'Can\'t contain special symbols')
         .required('Email required'),
-      password: Yup
-        .string()
-        .matches(/^\S*$/, 'Can\'t contain empty symbols')
+      password: Yup.string()
+        .matches(/^\S*$/, "Can't contain empty symbols")
         .min(6, 'Should be from 6 to 16 characters')
         .max(16, 'Should be from 6 to 16 characters')
         .required('Password required'),
-      passwordConfirmation: Yup
-        .string()
+      passwordConfirmation: Yup.string()
         .required('Confirmation required')
         .oneOf([Yup.ref('password')], 'Passwords must match'),
     }),
-    onSubmit: formData => {
+    onSubmit: (formData) => {
       axios
         .post('/api/v1/users', formData, {
           headers: {
@@ -261,13 +265,19 @@ function SignUp() {
         .then(() => {
           window.location.href = getNextLocation();
         })
-        .catch(error => {
+        .catch((error) => {
           // TODO: Add better errors handler
           if (error.response.data.errors) {
             const { errors } = error.response.data;
-            if (errors.name) { formik.setFieldError('name', errors.name); }
-            if (errors.email) { formik.setFieldError('email', errors.email); }
-            if (errors.base) { formik.setFieldError('base', errors.base); }
+            if (errors.name) {
+              formik.setFieldError('name', errors.name);
+            }
+            if (errors.email) {
+              formik.setFieldError('email', errors.email);
+            }
+            if (errors.base) {
+              formik.setFieldError('base', errors.base);
+            }
           }
         });
     },
@@ -276,22 +286,17 @@ function SignUp() {
   return (
     <Container>
       <Body>
-        <Form onSubmit={formik.handleSubmit} id="registration">
+        <Form id="registration" onSubmit={formik.handleSubmit}>
           <Title text="Sign Up" />
-          <Input id="base" type="hidden" formik={formik} />
-          <Input id="name" type="text" title="Nickname" formik={formik} />
-          <Input id="email" type="email" title="Email" formik={formik} />
+          <Input formik={formik} id="base" type="hidden" />
+          <Input formik={formik} id="name" title="Nickname" type="text" />
+          <Input formik={formik} id="email" title="Email" type="email" />
+          <Input formik={formik} id="password" title="Password" type="password" />
           <Input
-            id="password"
-            type="password"
-            title="Password"
             formik={formik}
-          />
-          <Input
             id="passwordConfirmation"
-            type="password"
             title="Password Confirmation"
-            formik={formik}
+            type="password"
           />
         </Form>
         <SocialLinks />
@@ -315,22 +320,30 @@ function ResetPassword() {
     }),
     onSubmit: ({ email }) => {
       axios
-        .post('/api/v1/reset_password', { email }, {
-          headers: {
-            'Content-Type': 'application/json',
-            'x-csrf-token': getCsrfToken(),
+        .post(
+          '/api/v1/reset_password',
+          { email },
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              'x-csrf-token': getCsrfToken(),
+            },
           },
-        })
+        )
         .then(() => {
           setIsSend(true);
         })
-        .catch(error => {
+        .catch((error) => {
           // TODO: add log for auth error
           // TODO: Add better errors handler
           if (error.response.data.errors) {
             const { errors } = error.response.data;
-            if (errors.email) { formik.setFieldError('email', errors.email); }
-            if (errors.base) { formik.setFieldError('base', errors.base); }
+            if (errors.email) {
+              formik.setFieldError('email', errors.email);
+            }
+            if (errors.base) {
+              formik.setFieldError('base', errors.base);
+            }
           }
         });
     },
@@ -339,10 +352,7 @@ function ResetPassword() {
   if (isSend) {
     return (
       <Container>
-        <Body>
-          We have sent you an email with instructions on how to reset your
-          password
-        </Body>
+        <Body>We have sent you an email with instructions on how to reset your password</Body>
       </Container>
     );
   }
@@ -350,10 +360,10 @@ function ResetPassword() {
   return (
     <Container>
       <Body>
-        <Form onSubmit={formik.handleSubmit} id="remindPassword">
+        <Form id="remindPassword" onSubmit={formik.handleSubmit}>
           <Title text="Forgot your password?" />
-          <Input id="base" type="hidden" formik={formik} />
-          <Input id="email" type="email" title="Email" formik={formik} />
+          <Input formik={formik} id="base" type="hidden" />
+          <Input formik={formik} id="email" title="Email" type="email" />
         </Form>
       </Body>
       <Footer>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.jsx
index 8bfd9cc1b..18e281ad4 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettings.jsx
@@ -13,7 +13,7 @@ import UserSettingsForm from './UserSettingsForm';
 
 const PROVIDERS = ['github', 'discord'];
 
-const BindSocialBtn = ({ provider, disabled, isBinded }) => {
+function BindSocialBtn({ disabled, isBinded, provider }) {
   const formatedProviderName = capitalize(provider);
 
   return (
@@ -27,12 +27,12 @@ const BindSocialBtn = ({ provider, disabled, isBinded }) => {
       />
       {isBinded ? (
         <button
-          type="button"
           className="bind-social"
-          data-method="delete"
           data-csrf={window.csrf_token}
+          data-method="delete"
           data-to={`/auth/${provider}`}
           disabled={disabled}
+          type="button"
         >
           {`Unlink ${formatedProviderName}`}
         </button>
@@ -43,18 +43,18 @@ const BindSocialBtn = ({ provider, disabled, isBinded }) => {
       )}
     </div>
   );
-};
+}
 
-const renderSocialBtns = currentUserSettings => {
-  const getProviderName = slug => currentUserSettings[`${slug}_name`];
-  return PROVIDERS.map(provider => {
+const renderSocialBtns = (currentUserSettings) => {
+  const getProviderName = (slug) => currentUserSettings[`${slug}_name`];
+  return PROVIDERS.map((provider) => {
     const providerName = getProviderName(provider);
     return (
       <BindSocialBtn
-        provider={provider}
-        isBinded={providerName && providerName.length}
-        disabled={providerName && providerName.length}
         key={provider}
+        disabled={providerName && providerName.length}
+        isBinded={providerName && providerName.length}
+        provider={provider}
       />
     );
   });
@@ -90,7 +90,7 @@ function UserSettings() {
     await setTimeout(() => setAnimation('done'), 1600);
   };
 
-  const getNotificationMessage = status => {
+  const getNotificationMessage = (status) => {
     let message;
     switch (status) {
       case 'editSuccess': {
@@ -124,10 +124,7 @@ function UserSettings() {
 
         <h2 className="font-weight-normal">Settings</h2>
       </div>
-      <UserSettingsForm
-        settings={settings}
-        onSubmit={handleUpdateUserSettings}
-      />
+      <UserSettingsForm settings={settings} onSubmit={handleUpdateUserSettings} />
       <div className="mt-3 ml-2 d-flex flex-column">
         <h3 className="mb-3 font-weight-normal">Socials</h3>
         {renderSocialBtns(settings)}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx
index d516cf771..89ebd4eba 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/settings/UserSettingsForm.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
 
 import Slider from 'calcite-react/Slider';
-import {
- Formik, Form, Field, useField,
-} from 'formik';
+import { Formik, Form, Field, useField } from 'formik';
 import capitalize from 'lodash/capitalize';
 import * as Icon from 'react-feather';
 import * as Yup from 'yup';
@@ -13,7 +11,7 @@ import { createPlayer } from '../../lib/sound';
 
 const playingLanguages = Object.entries(languages);
 
-const TextInput = ({ label, ...props }) => {
+function TextInput({ label, ...props }) {
   const [field, meta] = useField(props);
   const { name } = props;
 
@@ -32,14 +30,15 @@ const TextInput = ({ label, ...props }) => {
       )}
     </div>
   );
-};
+}
 
-const UserSettingsForm = ({ onSubmit, settings }) => {
-  const renderLanguages = langs => langs.map(([slug, lang]) => (
-    <option key={slug} value={slug}>
-      {capitalize(lang)}
-    </option>
-  ));
+function UserSettingsForm({ onSubmit, settings }) {
+  const renderLanguages = (langs) =>
+    langs.map(([slug, lang]) => (
+      <option key={slug} value={slug}>
+        {capitalize(lang)}
+      </option>
+    ));
 
   const player = createPlayer();
 
@@ -50,151 +49,138 @@ const UserSettingsForm = ({ onSubmit, settings }) => {
 
   const validationSchema = Yup.object({
     name: Yup.string()
-            .strict()
-            .required("Field can't be empty")
-            .min(3, 'Should be at least 3 characters')
-            .max(16, 'Should be 16 character(s) or less')
-            .trim(),
+      .strict()
+      .required("Field can't be empty")
+      .min(3, 'Should be at least 3 characters')
+      .max(16, 'Should be 16 character(s) or less')
+      .trim(),
   });
 
   return (
-    <>
-      {settings && (
-        <Formik
-          initialValues={{
-            name: settings.name,
-            sound_settings: {
-              type: settings.sound_settings.type,
-              level: settings.sound_settings.level,
-            },
-            lang: settings.lang || '',
-          }}
-          validationSchema={validationSchema}
-          onSubmit={onSubmit}
-        >
-          {({
-            handleChange, dirty, isSubmitting, values,
-          }) => (
-            <Form>
-              <div className="container">
-                <div className="row form-group mb-3">
-                  <div className="col-3">
-                    <TextInput
-                      className="col-5"
-                      data-testid="nameInput"
-                      label="Your name"
-                      id="name"
-                      name="name"
-                      type="text"
-                      placeholder="Enter your name"
-                    />
-                  </div>
-                  <div className="col-3">
-                    <div className="h6">Your weapon</div>
-                    <Field
-                      as="select"
-                      data-testid="langSelect"
-                      aria-label="Programming language select"
-                      name="lang"
-                      className="custom-select"
-                    >
-                      {renderLanguages(playingLanguages)}
-                    </Field>
-                  </div>
-                </div>
-              </div>
-
-              <div id="my-radio-group" className="h6 ml-2">
-                Select sound type
-              </div>
-              <div
-                role="group"
-                aria-labelledby="my-radio-group"
-                className="ml-3 mb-3"
-              >
-                <div>
-                  <Field
-                    type="radio"
-                    name="sound_settings.type"
-                    value="dendy"
-                    className="mr-2"
-                    onClick={() => playSound('dendy', values.sound_settings.level * 0.1)}
+    settings && (
+      <Formik
+        initialValues={{
+          name: settings.name,
+          sound_settings: {
+            type: settings.sound_settings.type,
+            level: settings.sound_settings.level,
+          },
+          lang: settings.lang || '',
+        }}
+        validationSchema={validationSchema}
+        onSubmit={onSubmit}
+      >
+        {({ dirty, handleChange, isSubmitting, values }) => (
+          <Form>
+            <div className="container">
+              <div className="row form-group mb-3">
+                <div className="col-3">
+                  <TextInput
+                    className="col-5"
+                    data-testid="nameInput"
+                    id="name"
+                    label="Your name"
+                    name="name"
+                    placeholder="Enter your name"
+                    type="text"
                   />
-                  Dendy
                 </div>
-                <div>
+                <div className="col-3">
+                  <div className="h6">Your weapon</div>
                   <Field
-                    type="radio"
-                    name="sound_settings.type"
-                    value="cs"
-                    className="mr-2"
-                    onClick={() => playSound('cs', values.sound_settings.level * 0.1)}
-                  />
-                  CS
-                </div>
-                <div>
-                  <Field
-                    type="radio"
-                    name="sound_settings.type"
-                    value="standart"
-                    className="mr-2"
-                    onClick={() => playSound('standart', values.sound_settings.level * 0.1)}
-                  />
-                  Standart
-                </div>
-                <div>
-                  <Field
-                    type="radio"
-                    name="sound_settings.type"
-                    value="silent"
-                    className="mr-2"
-                  />
-                  Silent
+                    aria-label="Programming language select"
+                    as="select"
+                    className="custom-select"
+                    data-testid="langSelect"
+                    name="lang"
+                  >
+                    {renderLanguages(playingLanguages)}
+                  </Field>
                 </div>
               </div>
+            </div>
 
-              <div className="h6 ml-2">Select sound level</div>
-              <div className="ml-2 mb-3 d-flex align-items-center">
-                <Icon.VolumeX />
+            <div className="h6 ml-2" id="my-radio-group">
+              Select sound type
+            </div>
+            <div aria-labelledby="my-radio-group" className="ml-3 mb-3" role="group">
+              <div>
                 <Field
-                  component={Slider}
-                  type="range"
-                  min={0}
-                  max={10}
-                  name="sound_settings.level"
-                  disabled={values.sound_settings.type === 'silent'}
-                  onInput={e => {
-                    handleChange(e);
-                    playSound(values.sound_settings.type, e.target.value * 0.1);
-                  }}
-                  className="ml-3 mr-3 form-control"
+                  className="mr-2"
+                  name="sound_settings.type"
+                  type="radio"
+                  value="dendy"
+                  onClick={() => playSound('dendy', values.sound_settings.level * 0.1)}
                 />
-                <Icon.Volume2 />
+                Dendy
               </div>
-
-              <div className="d-flex justify-content-center">
-                <button
-                  disabled={!dirty}
-                  aria-label="SubmitForm"
-                  style={{ width: '120px' }}
-                  type="submit"
-                  className="btn py-1 btn-primary rounded-lg"
-                >
-                  {!isSubmitting ? (
-                    'Save'
-                  ) : (
-                    <div className="spinner-border spinner-border-sm" role="status">
-                      <span className="sr-only">Loading...</span>
-                    </div>
-                  )}
-                </button>
+              <div>
+                <Field
+                  className="mr-2"
+                  name="sound_settings.type"
+                  type="radio"
+                  value="cs"
+                  onClick={() => playSound('cs', values.sound_settings.level * 0.1)}
+                />
+                CS
               </div>
-            </Form>
-          )}
-        </Formik>
-      )}
-    </>
+              <div>
+                <Field
+                  className="mr-2"
+                  name="sound_settings.type"
+                  type="radio"
+                  value="standart"
+                  onClick={() => playSound('standart', values.sound_settings.level * 0.1)}
+                />
+                Standart
+              </div>
+              <div>
+                <Field className="mr-2" name="sound_settings.type" type="radio" value="silent" />
+                Silent
+              </div>
+            </div>
+
+            <div className="h6 ml-2">Select sound level</div>
+            <div className="ml-2 mb-3 d-flex align-items-center">
+              <Icon.VolumeX />
+              <Field
+                className="ml-3 mr-3 form-control"
+                component={Slider}
+                disabled={values.sound_settings.type === 'silent'}
+                max={10}
+                min={0}
+                name="sound_settings.level"
+                type="range"
+                onInput={(e) => {
+                  handleChange(e);
+                  playSound(values.sound_settings.type, e.target.value * 0.1);
+                }}
+              />
+              <Icon.Volume2 />
+            </div>
+
+            <div className="d-flex justify-content-center">
+              <button
+                aria-label="SubmitForm"
+                className="btn py-1 btn-primary rounded-lg"
+                disabled={!dirty}
+                style={{ width: '120px' }}
+                type="submit"
+              >
+                {!isSubmitting ? (
+                  'Save'
+                ) : (
+                  <div className="spinner-border spinner-border-sm" role="status">
+                    <span className="sr-only">Loading...</span>
+                  </div>
+                )}
+              </button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    )
   );
-};
+}
 
 export default UserSettingsForm;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualIntendedPlayersPanel.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualIntendedPlayersPanel.jsx
index 5488f9104..bd785180e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualIntendedPlayersPanel.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualIntendedPlayersPanel.jsx
@@ -5,33 +5,42 @@ import TournamentStates from '../../config/tournament';
 
 import JoinButton from './JoinButton';
 
-const Players = ({ players }) => (
-  <div className="my-3">
-    {players.length !== 0 ? (
-      <>
-        {players.map(player => (
-          <UserInfo user={player} hideOnlineIndicator />
-        ))}
-      </>
-    ) : <p>No Participants yet</p>}
-  </div>
-);
+function Players({ players }) {
+  return (
+    <div className="my-3">
+      {players.length !== 0 ? (
+        <>
+          {players.map((player) => (
+            <UserInfo hideOnlineIndicator user={player} />
+          ))}
+        </>
+      ) : (
+        <p>No Participants yet</p>
+      )}
+    </div>
+  );
+}
 
-const IndividualIntentedPlayersPanel = ({
-    state,
-    intentedPlayers,
-    participantPlayers,
-    currentUserId,
-}) => (
-  <div className="mt-3">
-    <JoinButton
-      title="Click join to confirm that you want to participate in this tournament"
-      isShow={state === TournamentStates.waitingParticipants && intentedPlayers.some(player => player.id === currentUserId)}
-      isParticipant={participantPlayers.some(player => player.id === currentUserId)}
-    />
-    <h3>Players</h3>
-    <Players players={participantPlayers} />
-  </div>
-    );
+function IndividualIntentedPlayersPanel({
+  currentUserId,
+  intentedPlayers,
+  participantPlayers,
+  state,
+}) {
+  return (
+    <div className="mt-3">
+      <JoinButton
+        isParticipant={participantPlayers.some((player) => player.id === currentUserId)}
+        isShow={
+          state === TournamentStates.waitingParticipants &&
+          intentedPlayers.some((player) => player.id === currentUserId)
+        }
+        title="Click join to confirm that you want to participate in this tournament"
+      />
+      <h3>Players</h3>
+      <Players players={participantPlayers} />
+    </div>
+  );
+}
 
 export default memo(IndividualIntentedPlayersPanel);
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualMatches.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualMatches.jsx
index fcb337fdf..c34760459 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualMatches.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/IndividualMatches.jsx
@@ -1,6 +1,4 @@
-import React, {
- memo, useMemo,
-} from 'react';
+import React, { memo, useMemo } from 'react';
 
 import cn from 'classnames';
 import capitalize from 'lodash/capitalize';
@@ -78,7 +76,7 @@ const getLinkParams = (match, currentUserId) => {
   switch (true) {
     case match.state === 'waiting' && isParticipant:
       return ['Wait', cn(cardClassName, 'bg-warning')];
-    case (match.state === 'active' && isParticipant):
+    case match.state === 'active' && isParticipant:
       return ['Join', cn(cardClassName, 'bg-winner')];
     case isWinner:
       return ['Show', cn(cardClassName, 'bg-winner')];
@@ -89,26 +87,21 @@ const getLinkParams = (match, currentUserId) => {
   }
 };
 
-const getRange = (count, min, max) => (
-  count - min === count - max
-    ? [count - min]
-    : [count - max, count - min]
-);
+const getRange = (count, min, max) =>
+  count - min === count - max ? [count - min] : [count - max, count - min];
 
 const getMatchesByRound = (matches, type, playersCount) => {
   const maxPlayers = maxPlayersPerRoundType[type];
   const minPlayers = maxPlayers / 2 + 1;
 
-  const result = Object.values(matches).slice(
-    ...getRange(playersCount, minPlayers, maxPlayers),
-  );
+  const result = Object.values(matches).slice(...getRange(playersCount, minPlayers, maxPlayers));
 
   console.log([type, playersCount], [maxPlayers, minPlayers], matches, result);
 
   return result;
 };
 
-const getTitleByState = state => {
+const getTitleByState = (state) => {
   switch (state) {
     case TournamentStates.cancelled:
       return 'The tournament is cancelled';
@@ -121,9 +114,7 @@ const getTitleByState = state => {
 
 const getResultClass = (match, playerId) => (match.winnerId === playerId ? 'fa fa-trophy' : '');
 
-function Round({
- matches, players, playersCount, type, currentUserId,
-}) {
+function Round({ currentUserId, matches, players, playersCount, type }) {
   const showRound = playersCount > maxPlayersPerRoundType[type] / 2;
 
   const matchesPerRound = useMemo(
@@ -132,16 +123,14 @@ function Round({
   );
 
   if (!showRound) {
-    return <></>;
+    return null;
   }
 
   return (
     <div className="round">
-      <div className="h4 text-center">
-        {getTitleByRoundType(type, playersCount)}
-      </div>
+      <div className="h4 text-center">{getTitleByRoundType(type, playersCount)}</div>
       <div className="round-inner">
-        {matchesPerRound.map(match => (
+        {matchesPerRound.map((match) => (
           <div key={match.gameId} className="match">
             <div className="match__content">
               {match ? (
@@ -149,20 +138,17 @@ function Round({
                   <div className="d-flex justify-content-center align-items-center">
                     <span>{match.state}</span>
                     <div id={match.gameId}>
-                      <a
-                        href={`/games/${match.gameId}`}
-                        className="btn btn-sm btn-success m-1"
-                      >
+                      <a className="btn btn-sm btn-success m-1" href={`/games/${match.gameId}`}>
                         {getLinkParams(match, currentUserId)[0]}
                       </a>
                     </div>
                   </div>
                   <div className="d-flex flex-column justify-content-around">
-                    {match.playerIds.map(id => (
+                    {match.playerIds.map((id) => (
                       <div
                         className={`d-flex align-items-center bg-light tournament-bg-${match.state}`}
                       >
-                        <UserInfo user={players[id]} hideOnlineIndicator />
+                        <UserInfo hideOnlineIndicator user={players[id]} />
                         <span className={getResultClass(match, id)} />
                       </div>
                     ))}
@@ -181,7 +167,7 @@ function Round({
   );
 }
 
-function TournamentTimer({ startsAt, isOnline }) {
+function TournamentTimer({ isOnline, startsAt }) {
   const [duration, seconds] = useTimer(startsAt);
 
   if (!isOnline) {
@@ -207,15 +193,15 @@ function TournamentStatus({ children }) {
 }
 
 function IndividualMatches({
-  state,
-  startsAt,
-  matches,
-  players,
-  playersCount = 0,
   currentUserId,
   isLive,
-  isOver,
   isOnline,
+  isOver,
+  matches,
+  players,
+  playersCount = 0,
+  startsAt,
+  state,
 }) {
   if (!isLive && !isOver) {
     return (
@@ -228,7 +214,7 @@ function IndividualMatches({
   if (state === TournamentStates.waitingParticipants) {
     return (
       <TournamentStatus>
-        <TournamentTimer startsAt={startsAt} isOnline={isOnline} />
+        <TournamentTimer isOnline={isOnline} startsAt={startsAt} />
       </TournamentStatus>
     );
   }
@@ -239,13 +225,13 @@ function IndividualMatches({
 
       <div className="overflow-auto mt-2">
         <div className="bracket">
-          {roundTypesValues.map(type => (
+          {roundTypesValues.map((type) => (
             <Round
+              currentUserId={currentUserId}
               matches={matches}
               players={players}
               playersCount={playersCount}
               type={type}
-              currentUserId={currentUserId}
             />
           ))}
         </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/JoinButton.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/JoinButton.jsx
index 466cf2875..5c1b4de92 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/JoinButton.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/JoinButton.jsx
@@ -5,9 +5,7 @@ import cn from 'classnames';
 
 import { leaveTournament, joinTournament } from '../../middlewares/Tournament';
 
-const JoinButton = ({
- isShow, isParticipant, title, matchId, disabled = true,
-}) => {
+function JoinButton({ disabled = true, isParticipant, isShow, matchId, title }) {
   const onClick = isParticipant ? leaveTournament : joinTournament;
   const text = isParticipant ? 'Leave' : 'Join';
   const actionIcon = isParticipant ? 'user-minus' : 'user-plus';
@@ -16,22 +14,22 @@ const JoinButton = ({
     <>
       {title && isShow && <p>{title}</p>}
       <button
-        type="button"
-        onClick={() => {
-          onClick(matchId);
-        }}
         className={cn('btn text-nowrap rounded-lg', {
           'btn-outline-danger': isParticipant,
           'btn-outline-secondary': !isParticipant,
           'd-none': !isShow,
         })}
         disabled={disabled}
+        type="button"
+        onClick={() => {
+          onClick(matchId);
+        }}
       >
         <FontAwesomeIcon className="mr-2" icon={actionIcon} />
         {text}
       </button>
     </>
   );
-};
+}
 
 export default JoinButton;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Participants.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Participants.jsx
index 97b055074..e0d79bb0e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Participants.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Participants.jsx
@@ -2,41 +2,38 @@ import React, { memo } from 'react';
 
 import UserInfo from '../../components/UserInfo';
 
-const Players = ({
-  players,
-  playersCount,
-  canBan,
-  handleKick,
-}) => (
-  <div className="my-2 bg-white shadow-sm p-3 rounded-lg">
-    <div className="d-flex align-items-center flex-wrap justify-content-start">
-      <h5 className="mb-2 mr-5 text-nowrap">{`Total players: ${playersCount}`}</h5>
-    </div>
-    <div className="my-2">
-      {playersCount === 0 ? (
-        <p className="test-nowrap">NO_PARTICIPANTS_YET</p>
-      ) : (
-        Object.values(players).map((player, index) => (
-          <div key={player.id} className="my-3 d-flex">
-            <span>{index}</span>
-            <div className="ml-4">
-              <UserInfo user={player} />
+function Players({ canBan, handleKick, players, playersCount }) {
+  return (
+    <div className="my-2 bg-white shadow-sm p-3 rounded-lg">
+      <div className="d-flex align-items-center flex-wrap justify-content-start">
+        <h5 className="mb-2 mr-5 text-nowrap">{`Total players: ${playersCount}`}</h5>
+      </div>
+      <div className="my-2">
+        {playersCount === 0 ? (
+          <p className="test-nowrap">NO_PARTICIPANTS_YET</p>
+        ) : (
+          Object.values(players).map((player, index) => (
+            <div key={player.id} className="my-3 d-flex">
+              <span>{index}</span>
+              <div className="ml-4">
+                <UserInfo user={player} />
+              </div>
+              {canBan && (
+                <button
+                  className="btn btn-link btn-sm text-danger"
+                  data-player-id={player.id}
+                  type="button"
+                  onClick={handleKick}
+                >
+                  Kick
+                </button>
+              )}
             </div>
-            {canBan && (
-              <button
-                type="button"
-                className="btn btn-link btn-sm text-danger"
-                data-player-id={player.id}
-                onClick={handleKick}
-              >
-                Kick
-              </button>
-            )}
-          </div>
-        ))
-      )}
+          ))
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default memo(Players);
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayerPicker.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayerPicker.jsx
index 8cdcd4b4b..878c23fcf 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayerPicker.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/PlayerPicker.jsx
@@ -5,7 +5,7 @@ import Select from 'react-select';
 import UserInfo from '../../components/UserInfo';
 
 const customStyle = {
-  control: provided => ({
+  control: (provided) => ({
     ...provided,
     height: '33px',
     minHeight: '31px',
@@ -13,58 +13,55 @@ const customStyle = {
     borderRadius: 'unset',
     backgroundColor: 'hsl(0, 0%, 100%)',
   }),
-  indicatorsContainer: provided => ({
+  indicatorsContainer: (provided) => ({
     ...provided,
     height: '29px',
   }),
-  clearIndicator: provided => ({
+  clearIndicator: (provided) => ({
     ...provided,
     padding: '5px',
   }),
-  dropdownIndicator: provided => ({
+  dropdownIndicator: (provided) => ({
     ...provided,
     padding: '5px',
   }),
-  input: provided => ({
+  input: (provided) => ({
     ...provided,
     height: '21px',
   }),
 };
 
-function PlayerPicker({
- players, activePlayer, changePlayer, isDisabled,
-}) {
+function PlayerPicker({ activePlayer, changePlayer, isDisabled, players }) {
   const options = useMemo(
-    () => players
-        .filter(player => player.id !== activePlayer.id)
-        .map(player => ({
-          label: <UserInfo user={player} truncate />,
+    () =>
+      players
+        .filter((player) => player.id !== activePlayer.id)
+        .map((player) => ({
+          label: <UserInfo truncate user={player} />,
           value: player.id,
         })),
     [players, activePlayer],
   );
   const defaultValue = useMemo(
-    () => ({ label: <UserInfo user={activePlayer} truncate /> }),
+    () => ({ label: <UserInfo truncate user={activePlayer} /> }),
     [activePlayer],
   );
 
   if (isDisabled) {
     return (
-      <button className="btn btn-sm" type="button" disabled>
-        <UserInfo user={activePlayer} truncate />
+      <button disabled className="btn btn-sm" type="button">
+        <UserInfo truncate user={activePlayer} />
       </button>
     );
   }
 
   return (
-    <>
-      <Select
-        styles={customStyle}
-        defaultValue={defaultValue}
-        onChange={changePlayer}
-        options={options}
-      />
-    </>
+    <Select
+      defaultValue={defaultValue}
+      options={options}
+      styles={customStyle}
+      onChange={changePlayer}
+    />
   );
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorContainer.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorContainer.jsx
index 7f5801f13..98940c548 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorContainer.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorContainer.jsx
@@ -9,20 +9,22 @@ import { currentUserIdSelector } from '../../selectors';
 function StairwayEditorContainer({ playerId }) {
   const editable = useSelector(currentUserIdSelector) === playerId;
   // TODO: create selector
-  const playerData = useSelector(state => find(state.stairwayGame.game?.players, { id: playerId }));
+  const playerData = useSelector((state) =>
+    find(state.stairwayGame.game?.players, { id: playerId }),
+  );
 
   if (!playerData) {
     return null;
   }
   return (
     <Editor
-      value={playerData.editorText}
-      editable={editable}
-      syntax={playerData.editorLang}
-      onChange={() => {}}
       checkResult={() => {}}
+      editable={editable}
       mode="default"
+      syntax={playerData.editorLang}
       theme="vs-dark"
+      value={playerData.editorText}
+      onChange={() => {}}
     />
   );
 }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorToolbar.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorToolbar.jsx
index eaf021003..a6c5effad 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorToolbar.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayEditorToolbar.jsx
@@ -17,25 +17,21 @@ const toolbarClassNames = 'btn-toolbar justify-content-between align-items-cente
 const editorSettingClassNames = 'btn-group align-items-center m-1';
 const userInfoClassNames = 'btn-group align-items-center justify-content-end m-1';
 
-const ModeButtons = ({ player }) => (
-  <div
-    className="btn-group align-items-center mr-auto"
-    role="group"
-    aria-label="Editor mode"
-  >
-    <VimModeButton player={player} />
-    <DarkModeButton player={player} />
-  </div>
-);
+function ModeButtons({ player }) {
+  return (
+    <div aria-label="Editor mode" className="btn-group align-items-center mr-auto" role="group">
+      <VimModeButton player={player} />
+      <DarkModeButton player={player} />
+    </div>
+  );
+}
 
-function StairwayEditorToolbar({
-  activePlayer,
-  setActivePlayerId,
-  players,
-}) {
+function StairwayEditorToolbar({ activePlayer, players, setActivePlayerId }) {
   const dispatch = useDispatch();
 
-  const playerData = useSelector(state => find(state.stairwayGame.game?.players, { id: activePlayer.id }));
+  const playerData = useSelector((state) =>
+    find(state.stairwayGame.game?.players, { id: activePlayer.id }),
+  );
   const currentUserId = useSelector(currentUserIdSelector);
   const changeLang = useCallback(
     ({ label: { props } }) => dispatch(actions.changeEditorLang({ editorLang: props.slug })),
@@ -47,7 +43,7 @@ function StairwayEditorToolbar({
   );
   const isDisabledLanguagePicker = activePlayer.id !== currentUserId;
   const isDisabledPlayerPicker = useMemo(
-    () => players.some(player => player.id === currentUserId),
+    () => players.some((player) => player.id === currentUserId),
     [players, currentUserId],
   );
   const actionBtnsProps = {
@@ -59,41 +55,29 @@ function StairwayEditorToolbar({
   };
 
   return (
-    <>
-      <div data-player-type={type}>
-        <div className={toolbarClassNames} role="toolbar">
-          <div
-            className={editorSettingClassNames}
-            role="group"
-            aria-label="Editor settings"
-          >
-            <LanguagePickerView
-              isDisabled={isDisabledLanguagePicker}
-              currentLangSlug={playerData?.editorLang}
-              changeLang={changeLang}
-            />
-          </div>
+    <div data-player-type={type}>
+      <div className={toolbarClassNames} role="toolbar">
+        <div aria-label="Editor settings" className={editorSettingClassNames} role="group">
+          <LanguagePickerView
+            changeLang={changeLang}
+            currentLangSlug={playerData?.editorLang}
+            isDisabled={isDisabledLanguagePicker}
+          />
+        </div>
 
-          <>
-            <ModeButtons player={activePlayer} />
-            <GameActionButtons {...actionBtnsProps} />
-          </>
+        <ModeButtons player={activePlayer} />
+        <GameActionButtons {...actionBtnsProps} />
 
-          <div
-            className={userInfoClassNames}
-            role="group"
-            aria-label="User info"
-          >
-            <PlayerPicker
-              isDisabled={isDisabledPlayerPicker}
-              players={players}
-              changePlayer={changePlayer}
-              activePlayer={activePlayer}
-            />
-          </div>
+        <div aria-label="User info" className={userInfoClassNames} role="group">
+          <PlayerPicker
+            activePlayer={activePlayer}
+            changePlayer={changePlayer}
+            isDisabled={isDisabledPlayerPicker}
+            players={players}
+          />
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayGameInfo.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayGameInfo.jsx
index a5db72e21..22c8e7855 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayGameInfo.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayGameInfo.jsx
@@ -4,7 +4,7 @@ import find from 'lodash/find';
 
 import TaskAssignment from '../game/TaskAssignment';
 
-const StairwayGameInfo = ({ tasks, currentTaskId }) => {
+function StairwayGameInfo({ currentTaskId, tasks }) {
   if (!tasks) {
     return null;
   }
@@ -16,6 +16,6 @@ const StairwayGameInfo = ({ tasks, currentTaskId }) => {
   }
 
   return <TaskAssignment task={task} />;
-};
+}
 
 export default memo(StairwayGameInfo);
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayOutputTab.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayOutputTab.jsx
index 47cd7b4d1..893b74b42 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayOutputTab.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayOutputTab.jsx
@@ -6,20 +6,16 @@ import Output from '../game/Output';
 import OutputTab from '../game/OutputTab';
 
 function StairwayOutputTab({ playerId }) {
-  const output = useSelector(
-    state => state.executionOutput.results[playerId],
-  );
+  const output = useSelector((state) => state.executionOutput.results[playerId]);
   const isShowOutput = output && output.status;
 
   return (
-    <>
-      {isShowOutput && (
-        <>
-          <OutputTab sideOutput={output} side="left" />
-          <Output sideOutput={output} />
-        </>
-      )}
-    </>
+    !!isShowOutput && (
+      <>
+        <OutputTab side="left" sideOutput={output} />
+        <Output sideOutput={output} />
+      </>
+    )
   );
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayRounds.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayRounds.jsx
index 4c7625504..0524933a3 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayRounds.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/StairwayRounds.jsx
@@ -2,13 +2,8 @@ import React from 'react';
 
 import cn from 'classnames';
 
-const StairwayRounds = ({
-  players,
-  activePlayerId,
-  activeRoundId,
-  setActiveRoundId,
-}) => {
-  const currentUser = players.find(player => player.id === activePlayerId);
+function StairwayRounds({ activePlayerId, activeRoundId, players, setActiveRoundId }) {
+  const currentUser = players.find((player) => player.id === activePlayerId);
 
   const renderRoundTabs = currentUser.tasks.map(({ roundId, status }) => {
     const isActiveRound = activeRoundId === roundId;
@@ -21,17 +16,16 @@ const StairwayRounds = ({
       'btn-primary': status === 'active',
     });
 
-    const onClick = isActiveRound || status === 'disabled'
-        ? () => {}
-        : () => setActiveRoundId(roundId);
+    const onClick =
+      isActiveRound || status === 'disabled' ? () => {} : () => setActiveRoundId(roundId);
 
     return (
       <React.Fragment key={roundId}>
         <div className="col d-flex px-0 m-2">
           <button
-            type="button"
             className={className}
             disabled={status === 'disabled'}
+            type="button"
             onClick={onClick}
           >
             {roundId}
@@ -42,15 +36,11 @@ const StairwayRounds = ({
   });
 
   return (
-    <>
-      <div className="d-flex flex-row" style={{ background: '#ffffff' }}>
-        <div className="col d-flex flex-grow-0 px-2 m-auto justify-content-center">
-          Rounds:
-        </div>
-        {renderRoundTabs}
-      </div>
-    </>
+    <div className="d-flex flex-row" style={{ background: '#ffffff' }}>
+      <div className="col d-flex flex-grow-0 px-2 m-auto justify-content-center">Rounds:</div>
+      {renderRoundTabs}
+    </div>
   );
-};
+}
 
 export default StairwayRounds;
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TeamMatches.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TeamMatches.jsx
index d526d4cb5..17eeb5cec 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TeamMatches.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TeamMatches.jsx
@@ -4,18 +4,22 @@ import reverse from 'lodash/reverse';
 
 import UserInfo from '../../components/UserInfo';
 
-const calcRoundResult = matches => matches.reduce((acc, match) => {
-    const [gameResultPlayer1, gameResultPlayer2] = match.players.map(p => p.result);
+const calcRoundResult = (matches) =>
+  matches.reduce(
+    (acc, match) => {
+      const [gameResultPlayer1, gameResultPlayer2] = match.players.map((p) => p.result);
 
-    if (gameResultPlayer1 === 'won' || gameResultPlayer2 === 'gave_up') {
+      if (gameResultPlayer1 === 'won' || gameResultPlayer2 === 'gave_up') {
         return { ...acc, first: acc.first + 1 };
-    }
-    if (gameResultPlayer2 === 'won' || gameResultPlayer1 === 'gave_up') {
+      }
+      if (gameResultPlayer2 === 'won' || gameResultPlayer1 === 'gave_up') {
         return { ...acc, second: acc.second + 1 };
-    }
+      }
 
-    return acc;
-}, { first: 0, second: 0 });
+      return acc;
+    },
+    { first: 0, second: 0 },
+  );
 
 const getLinkParams = (match, currentUserId) => {
   const isWinner = match.winnerId === currentUserId;
@@ -35,46 +39,39 @@ const getLinkParams = (match, currentUserId) => {
   }
 };
 
-function TeamMatches({ matches, currentUserId }) {
+function TeamMatches({ currentUserId, matches }) {
   const rounds = useMemo(() => reverse(Object.values(matches)), [matches]);
 
   return (
     <>
       $
-      {rounds.map(roundMatches => (
+      {rounds.map((roundMatches) => (
         <div className="col-12 mt-3 py-2 bg-white shadow-sm rounded">
           <div className="row mb-3">
             <div className="col-5">
               <h3 className="font-weight-light mb-0">{`round ${roundMatches[0].roundId}`}</h3>
             </div>
             <div className="col-1 text-center">
-              <span className="font-weight-light mb-0">
-                {calcRoundResult(roundMatches).first}
-              </span>
+              <span className="font-weight-light mb-0">{calcRoundResult(roundMatches).first}</span>
             </div>
             <div className="col-1 text-center">
-              <span className="font-weight-light mb-0">
-                {calcRoundResult(roundMatches).second}
-              </span>
+              <span className="font-weight-light mb-0">{calcRoundResult(roundMatches).second}</span>
             </div>
             $
-            {roundMatches.map(match => {
+            {roundMatches.map((match) => {
               const [player1, player2] = match.players;
               const [linkName, bgClass] = getLinkParams(match, currentUserId);
 
               return (
                 <div className={`row align-items-center py-2 ${bgClass}`}>
                   <div className="col-6">
-                    <UserInfo user={player1} hideOnlineIndicator />
+                    <UserInfo hideOnlineIndicator user={player1} />
                   </div>
                   <div className="col-4">
-                    <UserInfo user={player2} hideOnlineIndicator />
+                    <UserInfo hideOnlineIndicator user={player2} />
                   </div>
                   <div className="col-2 text-right">
-                    <a
-                      className="btn btn-success"
-                      href={`/games/${match.gameId}`}
-                    >
+                    <a className="btn btn-success" href={`/games/${match.gameId}`}>
                       {linkName}
                     </a>
                   </div>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Tournament.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Tournament.jsx
index 8f868f34e..12894e169 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Tournament.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/Tournament.jsx
@@ -4,10 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import TournamentStates from '../../config/tournament';
 import { connectToChat } from '../../middlewares/Chat';
-import {
-  connectToTournament,
-  kickFromTournament,
-} from '../../middlewares/Tournament';
+import { connectToTournament, kickFromTournament } from '../../middlewares/Tournament';
 import * as selectors from '../../selectors';
 
 import IndividualMatches from './IndividualMatches';
@@ -21,10 +18,7 @@ function Tournament() {
   const dispatch = useDispatch();
 
   const tournament = useSelector(selectors.tournamentSelector);
-  const playersCount = useMemo(
-    () => Object.keys(tournament.players).length,
-    [tournament.players],
-  );
+  const playersCount = useMemo(() => Object.keys(tournament.players).length, [tournament.players]);
   const isOver = useMemo(
     () => [TournamentStates.finished, TournamentStates.cancelled].includes(tournament.state),
     [tournament.state],
@@ -33,7 +27,7 @@ function Tournament() {
   const currentUserId = useSelector(selectors.currentUserIdSelector);
   const isAdmin = useSelector(selectors.currentUserIsAdminSelector);
   const isGuest = useSelector(selectors.currentUserIsGuestSelector);
-  const handleKick = useCallback(event => {
+  const handleKick = useCallback((event) => {
     const { playerId } = event.currentTarget.dataset;
     if (playerId) {
       kickFromTournament(playerId);
@@ -61,12 +55,7 @@ function Tournament() {
         <h1 className="text-center">{tournament.name}</h1>
         <p className="text-center">
           <span>
-            Please
-            {' '}
-            <a href="/session/new">sign in</a>
-            {' '}
-            to see the tournament
-            details
+            Please <a href="/session/new">sign in</a> to see the tournament details
           </span>
         </p>
       </>
@@ -77,20 +66,20 @@ function Tournament() {
     return (
       <>
         <TournamentHeader
-          id={tournament.id}
-          state={tournament.state}
-          type={tournament.type}
-          accessType={tournament.accessType}
           accessToken={tournament.accessToken}
+          accessType={tournament.accessType}
+          creatorId={tournament.creatorId}
+          currentUserId={currentUserId}
+          id={tournament.id}
           isLive={tournament.isLive}
+          isOnline={tournament.channel.online}
+          isOver={isOver}
+          level={tournament.level}
           name={tournament.name}
           players={tournament.players}
           playersCount={playersCount}
-          creatorId={tournament.creatorId}
-          currentUserId={currentUserId}
-          level={tournament.level}
-          isOver={isOver}
-          isOnline={tournament.channel.online}
+          state={tournament.state}
+          type={tournament.type}
         />
         Tournament stairways
         {/* Chat  */}
@@ -123,25 +112,22 @@ function Tournament() {
           <div className="col-12 col-lg-9 mb-2 mb-lg-0">
             <div className="bg-white shadow-sm rounded-lg p-3">
               <TournamentHeader
-                id={tournament.id}
-                state={tournament.state}
-                type={tournament.type}
-                accessType={tournament.accessType}
                 accessToken={tournament.accessToken}
+                accessType={tournament.accessType}
+                creatorId={tournament.creatorId}
+                currentUserId={currentUserId}
+                id={tournament.id}
                 isLive={tournament.isLive}
+                isOnline={tournament.channel.online}
+                isOver={isOver}
+                level={tournament.level}
                 name={tournament.name}
                 players={tournament.players}
                 playersCount={playersCount}
-                creatorId={tournament.creatorId}
-                currentUserId={currentUserId}
-                level={tournament.level}
-                isOver={isOver}
-                isOnline={tournament.channel.online}
-              />
-              <TeamMatches
-                matches={tournament.matches}
-                currentUserId={currentUserId}
+                state={tournament.state}
+                type={tournament.type}
               />
+              <TeamMatches currentUserId={currentUserId} matches={tournament.matches} />
             </div>
           </div>
           <div className="col-12 col-lg-3">
@@ -153,55 +139,50 @@ function Tournament() {
   }
 
   return (
-    <>
-      <div className="container-fluid">
-        <div className="row flex-lg-row-reverse">
-          <div className="col-12 col-lg-9 mb-2 mb-lg-0">
-            <div className="bg-white h-100 shadow-sm rounded-lg p-3">
-              <TournamentHeader
-                id={tournament.id}
-                state={tournament.state}
-                type={tournament.type}
-                accessType={tournament.accessType}
-                accessToken={tournament.accessToken}
-                name={tournament.name}
-                players={tournament.players}
-                playersCount={playersCount}
-                creatorId={tournament.creatorId}
-                currentUserId={currentUserId}
-                level={tournament.level}
-                isOver={isOver}
-                isLive={tournament.isLive}
-                isOnline={tournament.channel.online}
-              />
-              <IndividualMatches
-                state={tournament.state}
-                startsAt={tournament.startsAt}
-                matches={tournament.matches}
-                players={tournament.players}
-                playersCount={playersCount}
-                currentUserId={currentUserId}
-                isOver={isOver}
-                isLive={tournament.isLive}
-                isOnline={tournament.channel.online}
-              />
-            </div>
-          </div>
-          <div className="d-flex flex-column flex-lg-column-reverse col-12 col-lg-3">
-            <Players
+    <div className="container-fluid">
+      <div className="row flex-lg-row-reverse">
+        <div className="col-12 col-lg-9 mb-2 mb-lg-0">
+          <div className="bg-white h-100 shadow-sm rounded-lg p-3">
+            <TournamentHeader
+              accessToken={tournament.accessToken}
+              accessType={tournament.accessType}
+              creatorId={tournament.creatorId}
+              currentUserId={currentUserId}
+              id={tournament.id}
+              isLive={tournament.isLive}
+              isOnline={tournament.channel.online}
+              isOver={isOver}
+              level={tournament.level}
+              name={tournament.name}
               players={tournament.players}
               playersCount={playersCount}
-              canBan={
-                isAdmin
-                && tournament.state === TournamentStates.waitingParticipants
-              }
-              handleKick={handleKick}
+              state={tournament.state}
+              type={tournament.type}
+            />
+            <IndividualMatches
+              currentUserId={currentUserId}
+              isLive={tournament.isLive}
+              isOnline={tournament.channel.online}
+              isOver={isOver}
+              matches={tournament.matches}
+              players={tournament.players}
+              playersCount={playersCount}
+              startsAt={tournament.startsAt}
+              state={tournament.state}
             />
-            <TournamentChat />
           </div>
         </div>
+        <div className="d-flex flex-column flex-lg-column-reverse col-12 col-lg-3">
+          <Players
+            canBan={isAdmin && tournament.state === TournamentStates.waitingParticipants}
+            handleKick={handleKick}
+            players={tournament.players}
+            playersCount={playersCount}
+          />
+          <TournamentChat />
+        </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.jsx
index eb5d5e164..7822c5ec9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChat.jsx
@@ -1,8 +1,4 @@
-import React, {
-  memo,
-  useCallback,
-  useRef,
-} from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -28,7 +24,7 @@ function TournamentChat() {
 
   const inputRef = useRef(null);
 
-  const { menuId, menuRequest, displayMenu } = useChatContextMenu({
+  const { displayMenu, menuId, menuRequest } = useChatContextMenu({
     type: 'tournament',
     users,
     canInvite: false,
@@ -37,21 +33,18 @@ function TournamentChat() {
   useChatRooms('channel');
 
   return (
-    <ChatContextMenu menuId={menuId} inputRef={inputRef} request={menuRequest}>
+    <ChatContextMenu inputRef={inputRef} menuId={menuId} request={menuRequest}>
       <div className="sticky-top bg-white rounded-lg">
         <div className="rounded-top shadow-sm" style={{ height: '350px' }}>
-          <div
-            className="overflow-auto h-100 text-break"
-            id="new-chat-message"
-          >
+          <div className="overflow-auto h-100 text-break" id="new-chat-message">
             <div className="d-flex border-bottom align-items-center">
               <Rooms disabled={!isOnline} />
               {currentUserIsAdmin && (
                 <button
-                  type="button"
                   className="btn btn-sm btn-link text-danger"
-                  onClick={handleCleanBanned}
                   disabled={!isOnline}
+                  type="button"
+                  onClick={handleCleanBanned}
                 >
                   Clean banned
                 </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx
index 133b0df6f..e9be8d23a 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentChatInput.jsx
@@ -5,33 +5,39 @@ import { addMessage } from '../../middlewares/Chat';
 export default function TournamentChatInput({ disabled }) {
   const [message, setMessage] = useState('');
   const inputRef = useRef(null);
-  const handleChange = useCallback(({ target: { value } }) => {
-    setMessage(value);
-  }, [setMessage]);
+  const handleChange = useCallback(
+    ({ target: { value } }) => {
+      setMessage(value);
+    },
+    [setMessage],
+  );
 
-  const handleSubmit = useCallback(e => {
-    e.preventDefault();
-    addMessage(message);
-    setMessage('');
-  }, [message]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      addMessage(message);
+      setMessage('');
+    },
+    [message],
+  );
 
   return (
     <form className="m-0" onSubmit={handleSubmit}>
       <div className="d-flex input-group shadow-sm rounded-bottom border-top">
         <input
-          type="text"
           ref={inputRef}
           className="form-control rounded-0 border-0 border-top x-rounded-bottom-left"
+          disabled={disabled}
+          placeholder="Write message..."
+          type="text"
           value={message}
           onChange={handleChange}
-          placeholder="Write message..."
-          disabled={disabled}
         />
         <div className="input-group-append">
           <button
-            type="submit"
             className="btn btn-secondary x-rounded-bottom-right border-0 rounded-0"
             disabled={disabled}
+            type="submit"
           >
             Send
           </button>
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentHeader.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentHeader.jsx
index 62d3fa207..da990cae1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentHeader.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentHeader.jsx
@@ -1,7 +1,4 @@
-import React, {
-  memo,
-  useMemo,
-} from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
@@ -17,27 +14,23 @@ import * as selectors from '../../selectors';
 import JoinButton from './JoinButton';
 import TournamentMainControlButtons from './TournamentMainControlButtons';
 
-const getIconByAccessType = accessType => (
-  accessType === 'token'
-    ? 'lock'
-    : 'unlock'
-);
+const getIconByAccessType = (accessType) => (accessType === 'token' ? 'lock' : 'unlock');
 
 function TournamentHeader({
-  id: tournamentId,
-  state,
-  type,
-  accessType,
   accessToken,
-  isLive,
-  name,
-  players,
-  playersCount,
+  accessType,
   creatorId,
   currentUserId,
-  level,
+  id: tournamentId,
+  isLive,
   isOnline = false,
   isOver = false,
+  level,
+  name,
+  players,
+  playersCount,
+  state,
+  type,
 }) {
   const isAdmin = useSelector(selectors.currentUserIsAdminSelector);
   const canModerate = useMemo(
@@ -49,32 +42,30 @@ function TournamentHeader({
     <>
       <div className="d-flex flex-column flex-sm-row align-items-begin justify-content-between border-bottom">
         <div className="d-flex align-items-center pb-2">
-          <h2 title={name} className="m-0 text-capitalize text-nowrap overflow-auto">{name}</h2>
+          <h2 className="m-0 text-capitalize text-nowrap overflow-auto" title={name}>
+            {name}
+          </h2>
           <div
             className="text-center ml-3"
-            data-toggle="tooltip"
             data-placement="right"
+            data-toggle="tooltip"
             title="Tournament level"
           >
             <GameLevelBadge level={level} />
           </div>
           <div
-            title={
-              accessType === 'token'
-                ? 'Private tournament'
-                : 'Public tournament'
-            }
             className="text-center ml-2"
+            title={accessType === 'token' ? 'Private tournament' : 'Public tournament'}
           >
             <FontAwesomeIcon icon={getIconByAccessType(accessType)} />
           </div>
           {isOnline ? (
             <div
-              title={isLive ? 'Active tournament' : 'Inactive tournament'}
               className={cn('text-center ml-2', {
                 'text-primary': isLive,
                 'text-light': !isLive,
               })}
+              title={isLive ? 'Active tournament' : 'Inactive tournament'}
             >
               <FontAwesomeIcon icon="wifi" />
             </div>
@@ -85,35 +76,27 @@ function TournamentHeader({
           )}
         </div>
         {!isOver && isLive && (
-          <div
-            className="d-flex justify-items-center pb-2"
-          >
+          <div className="d-flex justify-items-center pb-2">
             {type !== 'team' && (
               <JoinButton
-                isShow={isLive && state !== TournamentStates.active}
-                isParticipant={!!players[currentUserId]}
                 disabled={!isOnline || !isLive}
+                isParticipant={!!players[currentUserId]}
+                isShow={isLive && state !== TournamentStates.active}
               />
             )}
             {canModerate && (
               <TournamentMainControlButtons
                 accessType={accessType}
-                tournamentId={tournamentId}
-                canStart={
-                  state === TournamentStates.waitingParticipants
-                  && playersCount > 0
-                }
+                canStart={state === TournamentStates.waitingParticipants && playersCount > 0}
                 disabled={!isOnline}
+                tournamentId={tournamentId}
               />
             )}
           </div>
         )}
       </div>
       <div className="d-flex small text-nowrap text-muted mt-2">
-        <div
-          title={type}
-          className="d-flex align-items-center"
-        >
+        <div className="d-flex align-items-center" title={type}>
           Mode:
           <span className="ml-2">
             <TournamentType type={type} />
@@ -121,13 +104,15 @@ function TournamentHeader({
         </div>
         {canModerate && accessType === 'token' && (
           <div className="d-flex input-group ml-2">
-            <div title="Access token" className="input-group-prepend">
-              <span className="input-group-text"><FontAwesomeIcon icon="key" /></span>
+            <div className="input-group-prepend" title="Access token">
+              <span className="input-group-text">
+                <FontAwesomeIcon icon="key" />
+              </span>
             </div>
             <CopyButton
               className="btn btn-secondary rounded-right"
-              value={accessToken}
               disabled={!isLive}
+              value={accessToken}
             />
           </div>
         )}
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx
index 0db7d7e3c..283401046 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/tournament/TournamentMainControlButtons.jsx
@@ -10,68 +10,62 @@ import {
   openUpTournament as handleOpenUpTournament,
 } from '../../middlewares/Tournament';
 
-const CustomToggle = React.forwardRef(({ onClick, disabled }, ref) => (
+const CustomToggle = React.forwardRef(({ disabled, onClick }, ref) => (
   <button
-    type="button"
     ref={ref}
     className="btn btn-success text-white rounded-right"
-    onClick={onClick}
     disabled={disabled}
+    type="button"
+    onClick={onClick}
   >
     <FontAwesomeIcon icon="ellipsis-v" />
   </button>
 ));
 
-const TournamentMainControlButtons = ({
-  accessType,
-  tournamentId,
-  canStart,
-  disabled = true,
-}) => (
-  <>
-    <button
-      type="button"
-      className="btn btn-success text-white text-nowrap ml-2 rounded-left"
-      onClick={handleStartTournament}
-      disabled={!canStart || disabled}
-    >
-      <FontAwesomeIcon className="mr-2" icon="play" />
-      Start
-    </button>
-    <Dropdown
-      title="Task actions"
-      className="d-flex"
-    >
-      <Dropdown.Toggle
-        as={CustomToggle}
-        id="tournament-actions-dropdown-toggle"
-        disabled={disabled}
-      />
-      <Dropdown.Menu>
-        <Dropdown.Item disabled={disabled} key="edit" href={`/tournaments/${tournamentId}/edit`}>
-          <FontAwesomeIcon className="mr-2" icon="edit" />
-          Edit
-        </Dropdown.Item>
-        <Dropdown.Item disabled={disabled} key="restart" onSelect={handleRestartTournament}>
-          <FontAwesomeIcon className="mr-2" icon="sync" />
-          Restart
-        </Dropdown.Item>
-        <Dropdown.Item disabled={disabled} key="cancel" onSelect={handleCancelTournament}>
-          <FontAwesomeIcon className="mr-2" icon="trash" />
-          Cancel
-        </Dropdown.Item>
-        {accessType === 'token' && (
-          <>
-            <Dropdown.Divider />
-            <Dropdown.Item disabled={disabled} key="openUp" onSelect={handleOpenUpTournament}>
-              <FontAwesomeIcon className="mr-2" icon="unlock" />
-              Open up
-            </Dropdown.Item>
-          </>
-        )}
-      </Dropdown.Menu>
-    </Dropdown>
-  </>
-);
+function TournamentMainControlButtons({ accessType, canStart, disabled = true, tournamentId }) {
+  return (
+    <>
+      <button
+        className="btn btn-success text-white text-nowrap ml-2 rounded-left"
+        disabled={!canStart || disabled}
+        type="button"
+        onClick={handleStartTournament}
+      >
+        <FontAwesomeIcon className="mr-2" icon="play" />
+        Start
+      </button>
+      <Dropdown className="d-flex" title="Task actions">
+        <Dropdown.Toggle
+          as={CustomToggle}
+          disabled={disabled}
+          id="tournament-actions-dropdown-toggle"
+        />
+        <Dropdown.Menu>
+          <Dropdown.Item key="edit" disabled={disabled} href={`/tournaments/${tournamentId}/edit`}>
+            <FontAwesomeIcon className="mr-2" icon="edit" />
+            Edit
+          </Dropdown.Item>
+          <Dropdown.Item key="restart" disabled={disabled} onSelect={handleRestartTournament}>
+            <FontAwesomeIcon className="mr-2" icon="sync" />
+            Restart
+          </Dropdown.Item>
+          <Dropdown.Item key="cancel" disabled={disabled} onSelect={handleCancelTournament}>
+            <FontAwesomeIcon className="mr-2" icon="trash" />
+            Cancel
+          </Dropdown.Item>
+          {accessType === 'token' && (
+            <>
+              <Dropdown.Divider />
+              <Dropdown.Item key="openUp" disabled={disabled} onSelect={handleOpenUpTournament}>
+                <FontAwesomeIcon className="mr-2" icon="unlock" />
+                Open up
+              </Dropdown.Item>
+            </>
+          )}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
 
 export default memo(TournamentMainControlButtons);
diff --git a/services/app/apps/codebattle/assets/js/widgets/selectors/index.js b/services/app/apps/codebattle/assets/js/widgets/selectors/index.js
index dd58d3b98..cf67df366 100644
--- a/services/app/apps/codebattle/assets/js/widgets/selectors/index.js
+++ b/services/app/apps/codebattle/assets/js/widgets/selectors/index.js
@@ -15,32 +15,36 @@ import userTypes from '../config/userTypes';
 import { replayerMachineStates } from '../machines/game';
 import { makeEditorTextKey } from '../utils/gameRoom';
 
-export const currentUserIdSelector = state => state.user.currentUserId;
+export const currentUserIdSelector = (state) => state.user.currentUserId;
 
-export const currentUserIsAdminSelector = state => state.user.users[state.user.currentUserId].is_admin;
+export const currentUserIsAdminSelector = (state) =>
+  state.user.users[state.user.currentUserId].is_admin;
 
-export const currentUserIsGuestSelector = state => state.user.users[state.user.currentUserId].is_guest;
+export const currentUserIsGuestSelector = (state) =>
+  state.user.users[state.user.currentUserId].is_guest;
 
-export const isShowGuideSelector = state => state.gameUI.isShowGuide;
+export const isShowGuideSelector = (state) => state.gameUI.isShowGuide;
 
-export const gamePlayersSelector = state => state.game.players;
+export const gamePlayersSelector = (state) => state.game.players;
 
-export const firstPlayerSelector = state => find(gamePlayersSelector(state), { type: userTypes.firstPlayer });
+export const firstPlayerSelector = (state) =>
+  find(gamePlayersSelector(state), { type: userTypes.firstPlayer });
 
-export const secondPlayerSelector = state => find(gamePlayersSelector(state), { type: userTypes.secondPlayer });
+export const secondPlayerSelector = (state) =>
+  find(gamePlayersSelector(state), { type: userTypes.secondPlayer });
 
-export const opponentPlayerSelector = state => {
+export const opponentPlayerSelector = (state) => {
   const currentUserId = currentUserIdSelector(state);
   return find(gamePlayersSelector(state), ({ id }) => id !== currentUserId);
 };
 
-const editorsMetaSelector = state => state.editor.meta;
-export const editorTextsSelector = state => state.editor.text;
-export const editorTextsHistorySelector = state => state.editor.textHistory;
+const editorsMetaSelector = (state) => state.editor.meta;
+export const editorTextsSelector = (state) => state.editor.text;
+export const editorTextsHistorySelector = (state) => state.editor.textHistory;
 
-export const gameStatusSelector = state => state.game.gameStatus;
+export const gameStatusSelector = (state) => state.game.gameStatus;
 
-export const getSolution = playerId => state => {
+export const getSolution = (playerId) => (state) => {
   const meta = editorsMetaSelector(state)[playerId];
   const editorTexts = editorTextsSelector(state);
 
@@ -53,7 +57,7 @@ export const getSolution = playerId => state => {
   };
 };
 
-export const editorDataSelector = (romeCurrent, playerId) => state => {
+export const editorDataSelector = (romeCurrent, playerId) => (state) => {
   const meta = editorsMetaSelector(state)[playerId];
   const editorTexts = editorTextsSelector(state);
   const editorTextsHistory = editorTextsHistorySelector(state);
@@ -92,31 +96,35 @@ export const secondEditorSelector = (state, roomCurrent) => {
   return editorDataSelector(roomCurrent, playerId)(state);
 };
 
-export const leftEditorSelector = roomCurrent => createDraftSafeSelector(
-  state => state,
-  state => {
-    const currentUserId = currentUserIdSelector(state);
-    const player = get(gamePlayersSelector(state), currentUserId, false);
-    const editorSelector = !!player && player.type === userTypes.secondPlayer
-      ? secondEditorSelector
-      : firstEditorSelector;
-    return editorSelector(state, roomCurrent);
-  },
-);
+export const leftEditorSelector = (roomCurrent) =>
+  createDraftSafeSelector(
+    (state) => state,
+    (state) => {
+      const currentUserId = currentUserIdSelector(state);
+      const player = get(gamePlayersSelector(state), currentUserId, false);
+      const editorSelector =
+        !!player && player.type === userTypes.secondPlayer
+          ? secondEditorSelector
+          : firstEditorSelector;
+      return editorSelector(state, roomCurrent);
+    },
+  );
 
-export const rightEditorSelector = roomCurrent => createDraftSafeSelector(
-  state => state,
-  state => {
-    const currentUserId = currentUserIdSelector(state);
-    const player = get(gamePlayersSelector(state), currentUserId, false);
-    const editorSelector = !!player && player.type === userTypes.secondPlayer
-      ? firstEditorSelector
-      : secondEditorSelector;
-    return editorSelector(state, roomCurrent);
-  },
-);
+export const rightEditorSelector = (roomCurrent) =>
+  createDraftSafeSelector(
+    (state) => state,
+    (state) => {
+      const currentUserId = currentUserIdSelector(state);
+      const player = get(gamePlayersSelector(state), currentUserId, false);
+      const editorSelector =
+        !!player && player.type === userTypes.secondPlayer
+          ? firstEditorSelector
+          : secondEditorSelector;
+      return editorSelector(state, roomCurrent);
+    },
+  );
 
-export const editorSideSelector = (side, roomCurrent) => state => {
+export const editorSideSelector = (side, roomCurrent) => (state) => {
   const editors = {
     left: leftEditorSelector,
     right: rightEditorSelector,
@@ -124,22 +132,23 @@ export const editorSideSelector = (side, roomCurrent) => state => {
   return editors[side](roomCurrent)(state);
 };
 
-export const currentPlayerTextByLangSelector = lang => state => {
+export const currentPlayerTextByLangSelector = (lang) => (state) => {
   const userId = currentUserIdSelector(state);
   const editorTexts = editorTextsSelector(state);
   return editorTexts[makeEditorTextKey(userId, lang)];
 };
 
-export const userLangSelector = state => userId => get(editorsMetaSelector(state)[userId], 'currentLangSlug', null);
+export const userLangSelector = (state) => (userId) =>
+  get(editorsMetaSelector(state)[userId], 'currentLangSlug', null);
 export const userGameScoreSelector = createDraftSafeSelector(
-  state => state.game.gameStatus.score,
-  score => ({
+  (state) => state.game.gameStatus.score,
+  (score) => ({
     winnerId: score?.winnerId,
     results: score?.playerResults,
   }),
 );
 
-export const gameStatusTitleSelector = state => {
+export const gameStatusTitleSelector = (state) => {
   const gameStatus = gameStatusSelector(state);
   switch (gameStatus.state) {
     case GameStateCodes.waitingOpponent:
@@ -153,199 +162,206 @@ export const gameStatusTitleSelector = state => {
   }
 };
 
-export const gameTaskSelector = state => state.game.task;
-
-export const canEditTask = state => state.builder.task.origin !== 'github'
-  && ((currentUserIdSelector(state) === state.builder.task.creatorId
-    && (state.builder.task.state === taskStateCodes.blank
-      || state.builder.task.state === taskStateCodes.draft))
-    || (currentUserIsAdminSelector(state)
-      && state.builder.task.state !== taskStateCodes.moderation));
-
-export const isTaskOwner = state => (
-  currentUserIdSelector(state) === state.builder.task?.creatorId
-  || currentUserIdSelector(state) === state.task?.creatorId
-);
-
-export const canEditTaskGenerator = state => (
-  (currentUserIdSelector(state) === state.builder.task.creatorId
-    && state.builder.task.state !== taskStateCodes.moderation
-  ) || (currentUserIsAdminSelector(state)
-    && state.builder.task.state !== taskStateCodes.moderation
-  )
-);
-
-export const isValidTask = state => (
-  state.builder.validationStatuses.name[0]
-  && state.builder.validationStatuses.description[0]
-  && state.builder.validationStatuses.assertsExamples[0]
-  && state.builder.validationStatuses.solution[0]
-  && state.builder.validationStatuses.argumentsGenerator[0]
-);
-
-export const builderTaskSelector = state => state.builder.task;
-
-export const taskTemplatesStateSelector = state => state.builder.templates.state;
-
-export const taskGeneratorLangSelector = state => state.builder.generatorLang;
-
-export const taskOriginSelector = state => state.builder.task.origin;
-
-export const taskAssertsSelector = state => state.builder.task.asserts;
-
-export const taskAssertsStatusSelector = state => state.builder.assertsStatus;
-
-export const taskTextSolutionSelector = state => state.builder.textSolution[state.builder.generatorLang];
-
-export const taskTextArgumentsGeneratorSelector = state => state.builder.textArgumentsGenerator[state.builder.generatorLang];
-
-export const taskParamsSelector = (params = { normalize: true }) => createDraftSafeSelector(
-  state => state.builder.task,
-  state => state.builder.task.inputSignature,
-  state => state.builder.task.outputSignature,
-  state => state.builder.task.asserts,
-  state => state.builder.task.assertsExamples,
-  state => state.builder.generatorLang,
-  state => state.builder.textSolution,
-  state => state.builder.textArgumentsGenerator,
-  (
-    task,
-    inputSignature,
-    outputSignature,
-    asserts,
-    assertsExamples,
-    generatorLang,
-    textSolution,
-    textArgumentsGenerator,
-  ) => ({
-    ...task,
-    inputSignature: inputSignature.map(item => (params.normalize ? pick(item, ['argumentName', 'type']) : item)),
-    outputSignature: params.normalize ? pick(outputSignature, ['type']) : outputSignature,
-    asserts: asserts.map(item => (params.normalize ? pick(item, ['arguments', 'expected']) : item)),
-    assertsExamples: assertsExamples.map(item => (params.normalize ? pick(item, ['arguments', 'expected']) : item)),
-    generatorLang,
-    solution: textSolution[generatorLang],
-    argumentsGenerator: textArgumentsGenerator[generatorLang],
-  }),
-);
+export const gameTaskSelector = (state) => state.game.task;
+
+export const canEditTask = (state) =>
+  state.builder.task.origin !== 'github' &&
+  ((currentUserIdSelector(state) === state.builder.task.creatorId &&
+    (state.builder.task.state === taskStateCodes.blank ||
+      state.builder.task.state === taskStateCodes.draft)) ||
+    (currentUserIsAdminSelector(state) && state.builder.task.state !== taskStateCodes.moderation));
+
+export const isTaskOwner = (state) =>
+  currentUserIdSelector(state) === state.builder.task?.creatorId ||
+  currentUserIdSelector(state) === state.task?.creatorId;
+
+export const canEditTaskGenerator = (state) =>
+  (currentUserIdSelector(state) === state.builder.task.creatorId &&
+    state.builder.task.state !== taskStateCodes.moderation) ||
+  (currentUserIsAdminSelector(state) && state.builder.task.state !== taskStateCodes.moderation);
+
+export const isValidTask = (state) =>
+  state.builder.validationStatuses.name[0] &&
+  state.builder.validationStatuses.description[0] &&
+  state.builder.validationStatuses.assertsExamples[0] &&
+  state.builder.validationStatuses.solution[0] &&
+  state.builder.validationStatuses.argumentsGenerator[0];
+
+export const builderTaskSelector = (state) => state.builder.task;
+
+export const taskTemplatesStateSelector = (state) => state.builder.templates.state;
+
+export const taskGeneratorLangSelector = (state) => state.builder.generatorLang;
+
+export const taskOriginSelector = (state) => state.builder.task.origin;
+
+export const taskAssertsSelector = (state) => state.builder.task.asserts;
+
+export const taskAssertsStatusSelector = (state) => state.builder.assertsStatus;
+
+export const taskTextSolutionSelector = (state) =>
+  state.builder.textSolution[state.builder.generatorLang];
+
+export const taskTextArgumentsGeneratorSelector = (state) =>
+  state.builder.textArgumentsGenerator[state.builder.generatorLang];
+
+export const taskParamsSelector = (params = { normalize: true }) =>
+  createDraftSafeSelector(
+    (state) => state.builder.task,
+    (state) => state.builder.task.inputSignature,
+    (state) => state.builder.task.outputSignature,
+    (state) => state.builder.task.asserts,
+    (state) => state.builder.task.assertsExamples,
+    (state) => state.builder.generatorLang,
+    (state) => state.builder.textSolution,
+    (state) => state.builder.textArgumentsGenerator,
+    (
+      task,
+      inputSignature,
+      outputSignature,
+      asserts,
+      assertsExamples,
+      generatorLang,
+      textSolution,
+      textArgumentsGenerator,
+    ) => ({
+      ...task,
+      inputSignature: inputSignature.map((item) =>
+        params.normalize ? pick(item, ['argumentName', 'type']) : item,
+      ),
+      outputSignature: params.normalize ? pick(outputSignature, ['type']) : outputSignature,
+      asserts: asserts.map((item) =>
+        params.normalize ? pick(item, ['arguments', 'expected']) : item,
+      ),
+      assertsExamples: assertsExamples.map((item) =>
+        params.normalize ? pick(item, ['arguments', 'expected']) : item,
+      ),
+      generatorLang,
+      solution: textSolution[generatorLang],
+      argumentsGenerator: textArgumentsGenerator[generatorLang],
+    }),
+  );
 
 export const taskSolutionSelector = (state, lang) => state.builder.textSolution[lang];
 
-export const taskArgumentsGeneratorSelector = (state, lang) => state.builder.textArgumentsGenerator[lang];
+export const taskArgumentsGeneratorSelector = (state, lang) =>
+  state.builder.textArgumentsGenerator[lang];
 
-export const isTestingReady = state => (
-  state.builder.validationStatuses.inputSignature[0]
-  && state.builder.validationStatuses.outputSignature[0]
-  && state.builder.validationStatuses.examples[0]
-  && state.builder.validationStatuses.solution[0]
-  && state.builder.validationStatuses.argumentsGenerator[0]
-);
+export const isTestingReady = (state) =>
+  state.builder.validationStatuses.inputSignature[0] &&
+  state.builder.validationStatuses.outputSignature[0] &&
+  state.builder.validationStatuses.examples[0] &&
+  state.builder.validationStatuses.solution[0] &&
+  state.builder.validationStatuses.argumentsGenerator[0];
 
-export const editorLangsSelector = state => state.editor.langs;
+export const editorLangsSelector = (state) => state.editor.langs;
 
-export const langInputSelector = state => state.editor.langInput;
+export const langInputSelector = (state) => state.editor.langInput;
 
-export const editorHeightSelector = (roomCurrent, userId) => state => {
+export const editorHeightSelector = (roomCurrent, userId) => (state) => {
   const editorData = editorDataSelector(roomCurrent, userId)(state);
   return get(editorData, 'editorHeight', defaultEditorHeight);
 };
 
-export const executionOutputSelector = (roomCurrent, userId) => state => (roomCurrent.matches({ replayer: replayerMachineStates.on })
-  ? state.executionOutput.historyResults[userId]
-  : state.executionOutput.results[userId]);
+export const executionOutputSelector = (roomCurrent, userId) => (state) =>
+  roomCurrent.matches({ replayer: replayerMachineStates.on })
+    ? state.executionOutput.historyResults[userId]
+    : state.executionOutput.results[userId];
 
-export const firstExecutionOutputSelector = roomCurrent => state => {
+export const firstExecutionOutputSelector = (roomCurrent) => (state) => {
   const playerId = firstPlayerSelector(state).id;
   return executionOutputSelector(roomCurrent, playerId)(state);
 };
 
-export const secondExecutionOutputSelector = roomCurrent => state => {
+export const secondExecutionOutputSelector = (roomCurrent) => (state) => {
   const playerId = secondPlayerSelector(state).id;
   return executionOutputSelector(roomCurrent, playerId)(state);
 };
 
-export const leftExecutionOutputSelector = roomCurrent => state => {
+export const leftExecutionOutputSelector = (roomCurrent) => (state) => {
   const currentUserId = currentUserIdSelector(state);
   const player = get(gamePlayersSelector(state), currentUserId, false);
 
-  const outputSelector = player.type === userTypes.secondPlayer
-    ? secondExecutionOutputSelector
-    : firstExecutionOutputSelector;
+  const outputSelector =
+    player.type === userTypes.secondPlayer
+      ? secondExecutionOutputSelector
+      : firstExecutionOutputSelector;
   return outputSelector(roomCurrent)(state);
 };
 
-export const rightExecutionOutputSelector = roomCurrent => state => {
+export const rightExecutionOutputSelector = (roomCurrent) => (state) => {
   const currentUserId = currentUserIdSelector(state);
   const player = get(gamePlayersSelector(state), currentUserId, false);
 
-  const outputSelector = !!player && player.type === userTypes.secondPlayer
-    ? firstExecutionOutputSelector
-    : secondExecutionOutputSelector;
+  const outputSelector =
+    !!player && player.type === userTypes.secondPlayer
+      ? firstExecutionOutputSelector
+      : secondExecutionOutputSelector;
   return outputSelector(roomCurrent)(state);
 };
 
-export const tournamentSelector = state => state.tournament;
+export const tournamentSelector = (state) => state.tournament;
 
-export const usersInfoSelector = state => state.usersInfo;
+export const usersInfoSelector = (state) => state.usersInfo;
 
-export const chatUsersSelector = state => state.chat.users;
+export const chatUsersSelector = (state) => state.chat.users;
 
-export const chatMessagesSelector = state => state.chat.messages;
+export const chatMessagesSelector = (state) => state.chat.messages;
 
-export const chatChannelStateSelector = state => state.chat.channel.online;
+export const chatChannelStateSelector = (state) => state.chat.channel.online;
 
-export const chatHistoryMessagesSelector = state => state.chat.history.messages;
+export const chatHistoryMessagesSelector = (state) => state.chat.history.messages;
 
-export const currentChatUserSelector = state => {
+export const currentChatUserSelector = (state) => {
   const currentUserId = currentUserIdSelector(state);
 
   return find(chatUsersSelector(state), { id: currentUserId });
 };
 
-export const editorsModeSelector = currentUserId => state => {
+export const editorsModeSelector = (currentUserId) => (state) => {
   if (hasIn(gamePlayersSelector(state), currentUserId)) {
     return state.gameUI.editorMode;
   }
   return editorModes.default;
 };
 
-export const editorsThemeSelector = userId => state => {
+export const editorsThemeSelector = (userId) => (state) => {
   if (hasIn(gamePlayersSelector(state), userId)) {
     return state.gameUI.editorTheme;
   }
   return editorThemes.dark;
 };
 
-export const taskDescriptionLanguageselector = state => state.gameUI.taskDescriptionLanguage;
+export const taskDescriptionLanguageselector = (state) => state.gameUI.taskDescriptionLanguage;
 
-export const playbookStatusSelector = state => state.playbook.state;
+export const playbookStatusSelector = (state) => state.playbook.state;
 
-export const playbookInitRecordsSelector = state => state.playbook.initRecords;
+export const playbookInitRecordsSelector = (state) => state.playbook.initRecords;
 
-export const playbookRecordsSelector = state => state.playbook.records;
+export const playbookRecordsSelector = (state) => state.playbook.records;
 
-export const lobbyDataSelector = state => state.lobby;
+export const lobbyDataSelector = (state) => state.lobby;
 
-export const usersStatsSelector = state => state.user.usersStats;
+export const usersStatsSelector = (state) => state.user.usersStats;
 
-export const usersListSelector = state => state.user.usersRatingPage;
+export const usersListSelector = (state) => state.user.usersRatingPage;
 
-export const gameTypeSelector = state => state.game.gameStatus.type;
+export const gameTypeSelector = (state) => state.game.gameStatus.type;
 
-export const gameModeSelector = state => state.game.gameStatus.mode;
+export const gameModeSelector = (state) => state.game.gameStatus.mode;
 
-export const userSettingsSelector = state => state.userSettings;
+export const userSettingsSelector = (state) => state.userSettings;
 
-export const gameAlertsSelector = state => state.game.alerts;
+export const gameAlertsSelector = (state) => state.game.alerts;
 
-export const isOpponentInGameSelector = state => {
+export const isOpponentInGameSelector = (state) => {
   const findedUser = find(chatUsersSelector(state), {
     id: opponentPlayerSelector(state).id,
   });
   return !isUndefined(findedUser);
 };
 
-export const currentUserNameSelector = state => {
+export const currentUserNameSelector = (state) => {
   const currentUserId = currentUserIdSelector(state);
   if (!currentUserId) {
     return 'Anonymous user';
@@ -353,22 +369,20 @@ export const currentUserNameSelector = state => {
   return state.user.users[currentUserId].name;
 };
 
-export const activeGameSelector = state => {
+export const activeGameSelector = (state) => {
   const currentUserId = currentUserIdSelector(state);
 
-  const getMyGame = game => game.players.some(
-    ({ id }) => id === currentUserId,
-  );
+  const getMyGame = (game) => game.players.some(({ id }) => id === currentUserId);
 
   return state.lobby.activeGames.find(getMyGame);
 };
 
-export const isModalShow = state => state.lobby.createGameModal.show;
+export const isModalShow = (state) => state.lobby.createGameModal.show;
 
-export const modalSelector = state => state.lobby.createGameModal;
+export const modalSelector = (state) => state.lobby.createGameModal;
 
-export const completedGamesData = state => state.completedGames;
+export const completedGamesData = (state) => state.completedGames;
 
-export const activeRoomSelector = state => state.chat.activeRoom;
+export const activeRoomSelector = (state) => state.chat.activeRoom;
 
-export const roomsSelector = state => state.chat.rooms;
+export const roomsSelector = (state) => state.chat.rooms;
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/builder.js b/services/app/apps/codebattle/assets/js/widgets/slices/builder.js
index 7375cdb3a..cf4817bf1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/builder.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/builder.js
@@ -14,7 +14,7 @@ import {
 
 import initial from './initial';
 
-const getTaskAssertsStatus = task => ({
+const getTaskAssertsStatus = (task) => ({
   status: task.asserts.length > 0 ? 'ok' : 'none',
   output: '',
 });
@@ -52,7 +52,7 @@ const builder = createSlice({
 
       state.validationStatuses.description = validateDescription(value);
     },
-    setTaskTemplates: (state, { payload: { solution, argumentsGenerator } }) => {
+    setTaskTemplates: (state, { payload: { argumentsGenerator, solution } }) => {
       state.templates = {
         solution,
         argumentsGenerator,
@@ -61,7 +61,7 @@ const builder = createSlice({
       state.textSolution = solution;
       state.textArgumentsGenerator = argumentsGenerator;
     },
-    resetGeneratorAndSolution: state => {
+    resetGeneratorAndSolution: (state) => {
       const prevGeneratorLang = state.task.generatorLang;
 
       state.textSolution = {
@@ -74,16 +74,22 @@ const builder = createSlice({
       };
       state.generatorLang = prevGeneratorLang;
 
-      if (!state.validationStatuses.solution[0] || !state.validationStatuses.argumentsGenerator[0]) {
+      if (
+        !state.validationStatuses.solution[0] ||
+        !state.validationStatuses.argumentsGenerator[0]
+      ) {
         state.validationStatuses.solution = [true];
         state.validationStatuses.argumentsGenerator = [true];
         state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
       }
     },
-    rejectGeneratorAndSolution: state => {
+    rejectGeneratorAndSolution: (state) => {
       state.templates.state = 'none';
 
-      if (!state.validationStatuses.solution[0] || !state.validationStatuses.argumentsGenerator[0]) {
+      if (
+        !state.validationStatuses.solution[0] ||
+        !state.validationStatuses.argumentsGenerator[0]
+      ) {
         state.validationStatuses.solution = [true];
         state.validationStatuses.argumentsGenerator = [true];
         state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
@@ -92,7 +98,7 @@ const builder = createSlice({
     setTaskTemplatesState: (state, { payload }) => {
       state.templates.state = payload;
     },
-    setTaskAsserts: (state, { payload: { asserts, status, output = '' } }) => {
+    setTaskAsserts: (state, { payload: { asserts, output = '', status } }) => {
       state.task.asserts = asserts;
       state.task.examples = getExamplesFromAsserts(state.task.assertsExamples);
       state.assertsStatus = {
@@ -110,18 +116,16 @@ const builder = createSlice({
       state.validationStatuses.inputSignature = validateInputSignatures(state.task.inputSignature);
     },
     updateTaskInputType: (state, { payload: { newType } }) => {
-      state.task.inputSignature = state.task.inputSignature.map(item => (
-        item.id === newType.id ? newType : item
-      ));
+      state.task.inputSignature = state.task.inputSignature.map((item) =>
+        item.id === newType.id ? newType : item,
+      );
       if (state.task.assertsExamples.length > 0) {
         state.task.assertsExamples = [];
         state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
       }
     },
     removeTaskInputType: (state, { payload: { typeId } }) => {
-      remove(state.task.inputSignature, item => (
-        item.id === typeId
-      ));
+      remove(state.task.inputSignature, (item) => item.id === typeId);
       if (state.task.assertsExamples.length > 0) {
         state.task.assertsExamples = [];
         state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
@@ -140,21 +144,22 @@ const builder = createSlice({
       state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
     },
     updateTaskExample: (state, { payload: { newExample } }) => {
-      state.task.assertsExamples = state.task.assertsExamples.map(example => (
-        example.id === newExample.id ? newExample : example
-      ));
+      state.task.assertsExamples = state.task.assertsExamples.map((example) =>
+        example.id === newExample.id ? newExample : example,
+      );
       state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
     },
     removeTaskExample: (state, { payload: { exampleId } }) => {
-      remove(state.task.assertsExamples, item => (
-        item.id === exampleId
-      ));
+      remove(state.task.assertsExamples, (item) => item.id === exampleId);
       state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
     },
     setGeneratorsLang: (state, { payload: { lang } }) => {
       state.generatorLang = lang;
 
-      if (!state.validationStatuses.solution[0] || !state.validationStatuses.argumentsGenerator[0]) {
+      if (
+        !state.validationStatuses.solution[0] ||
+        !state.validationStatuses.argumentsGenerator[0]
+      ) {
         state.validationStatuses.solution = [true];
         state.validationStatuses.argumentsGenerator = [true];
         state.validationStatuses.assertsExamples = validateExamples(state.task.assertsExamples);
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/chat.js b/services/app/apps/codebattle/assets/js/widgets/slices/chat.js
index 2b81e0601..1da57d3b7 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/chat.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/chat.js
@@ -2,10 +2,7 @@ import { createSlice, current } from '@reduxjs/toolkit';
 
 import defaultRooms from '../config/rooms';
 import { ttl, filterPrivateRooms } from '../middlewares/Room';
-import {
-  isMessageForCurrentUser,
-  isMessageForCurrentPrivateRoom,
-} from '../utils/chat';
+import { isMessageForCurrentUser, isMessageForCurrentPrivateRoom } from '../utils/chat';
 
 const initialState = {
   users: [],
@@ -42,19 +39,17 @@ const chat = createSlice({
     },
     newChatMessage: (state, { payload }) => {
       if (isMessageForCurrentUser(payload)) {
-        state.rooms = state.rooms.map(room => (
+        state.rooms = state.rooms.map((room) =>
           isMessageForCurrentPrivateRoom(room, payload)
             ? { ...room, expireTo: room.expireTo + ttl }
-            : room
-        ));
+            : room,
+        );
       }
 
       state.messages = [...state.messages, payload];
     },
     banUserChat: (state, { payload }) => {
-      state.messages = [
-        ...state.messages.filter(message => message.name !== payload.name),
-      ];
+      state.messages = [...state.messages.filter((message) => message.name !== payload.name)];
     },
     setActiveRoom: (state, { payload }) => {
       state.activeRoom = payload;
@@ -62,9 +57,9 @@ const chat = createSlice({
     createPrivateRoom: (state, { payload }) => {
       const rooms = current(state.rooms);
       const privateRooms = filterPrivateRooms(rooms);
-      const existingPrivateRoom = privateRooms.find(room => (
-        room.targetUserId === payload.targetUserId
-      ));
+      const existingPrivateRoom = privateRooms.find(
+        (room) => room.targetUserId === payload.targetUserId,
+      );
       if (existingPrivateRoom) {
         state.activeRoom = existingPrivateRoom;
         return;
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/completedGames.js b/services/app/apps/codebattle/assets/js/widgets/slices/completedGames.js
index 302446edc..0bb8a2d36 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/completedGames.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/completedGames.js
@@ -20,19 +20,16 @@ export const fetchCompletedGames = createAsyncThunk(
   },
 );
 
-export const loadNextPage = createAsyncThunk(
-  'completedGames/loadNextPage',
-  async page => {
-    const userId = window.location.pathname.split('/').pop() || null;
-    const route = userId
-      ? `/api/v1/games/completed?user_id=${userId}&page_size=20&page=${page}`
-      : `/api/v1/games/completed?page_size=20&page=${page}`;
+export const loadNextPage = createAsyncThunk('completedGames/loadNextPage', async (page) => {
+  const userId = window.location.pathname.split('/').pop() || null;
+  const route = userId
+    ? `/api/v1/games/completed?user_id=${userId}&page_size=20&page=${page}`
+    : `/api/v1/games/completed?page_size=20&page=${page}`;
 
-    const response = await axios.get(route);
+  const response = await axios.get(route);
 
-    return camelizeKeys(response.data);
-  },
-);
+  return camelizeKeys(response.data);
+});
 
 const completedGames = createSlice({
   name: 'completedGames',
@@ -46,7 +43,7 @@ const completedGames = createSlice({
   },
   reducers: {},
   extraReducers: {
-    [fetchCompletedGames.pending]: state => {
+    [fetchCompletedGames.pending]: (state) => {
       state.status = 'loading';
       state.error = null;
     },
@@ -61,7 +58,7 @@ const completedGames = createSlice({
       state.status = 'rejected';
       state.error = action.error;
     },
-    [loadNextPage.pending]: state => {
+    [loadNextPage.pending]: (state) => {
       state.status = 'loading';
       state.error = null;
     },
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/editor.js b/services/app/apps/codebattle/assets/js/widgets/slices/editor.js
index e140be5aa..ace09d525 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/editor.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/editor.js
@@ -16,21 +16,21 @@ const meta = createSlice({
   name: 'meta',
   initialState: initial.editor.meta,
   reducers: {
-    updateEditorLang: (state, { payload: { userId, currentLangSlug } }) => {
+    updateEditorLang: (state, { payload: { currentLangSlug, userId } }) => {
       state[userId] = {
         ...state[userId],
         userId,
         currentLangSlug,
       };
     },
-    updateEditorTextHistory: (state, { payload: { userId, langSlug } }) => {
+    updateEditorTextHistory: (state, { payload: { langSlug, userId } }) => {
       state[userId] = {
         ...state[userId],
         userId,
         historyCurrentLangSlug: langSlug,
       };
     },
-    updateEditorText: (state, { payload: { userId, langSlug } }) => {
+    updateEditorText: (state, { payload: { langSlug, userId } }) => {
       state[userId] = {
         ...state[userId],
         userId,
@@ -59,10 +59,7 @@ const text = createSlice({
   name: 'text',
   initialState: initial.editor.text,
   extraReducers: {
-    [meta.actions.updateEditorText]: (
-      state,
-      { payload: { userId, langSlug, editorText } },
-    ) => {
+    [meta.actions.updateEditorText]: (state, { payload: { editorText, langSlug, userId } }) => {
       state[makeEditorTextKey(userId, langSlug)] = editorText;
     },
   },
@@ -72,7 +69,7 @@ const textHistory = createSlice({
   name: 'textHistory',
   initialState: initial.editor.textHistory,
   extraReducers: {
-    [meta.actions.updateEditorTextHistory]: (state, { payload: { userId, editorText } }) => {
+    [meta.actions.updateEditorTextHistory]: (state, { payload: { editorText, userId } }) => {
       state[userId] = editorText;
     },
   },
@@ -92,7 +89,7 @@ const langsHistory = createSlice({
   name: 'langsHistory',
   initialState: initial.editor.langsHistory,
   extraReducers: {
-    [meta.actions.updateEditorTextHistory]: (state, { payload: { userId, langSlug } }) => {
+    [meta.actions.updateEditorTextHistory]: (state, { payload: { langSlug, userId } }) => {
       state[userId] = langSlug;
     },
   },
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/executionOutput.js b/services/app/apps/codebattle/assets/js/widgets/slices/executionOutput.js
index e26685f1f..6f56574ec 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/executionOutput.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/executionOutput.js
@@ -6,16 +6,10 @@ const executionOutput = createSlice({
   name: 'executionOutput',
   initialState: initial.executionOutput,
   reducers: {
-    updateExecutionOutput: (
-      state,
-      { payload: { userId, ...rest } },
-    ) => {
+    updateExecutionOutput: (state, { payload: { userId, ...rest } }) => {
       state.results[userId] = rest;
     },
-    updateExecutionOutputHistory: (
-      state,
-      { payload: { userId, ...rest } },
-    ) => {
+    updateExecutionOutputHistory: (state, { payload: { userId, ...rest } }) => {
       state.historyResults[userId] = rest;
     },
   },
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/game.js b/services/app/apps/codebattle/assets/js/widgets/slices/game.js
index 1f264603c..3f24576b4 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/game.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/game.js
@@ -21,10 +21,7 @@ const game = createSlice({
       Object.assign(state.gameStatus, payload);
     },
     updateGamePlayers: (state, { payload: { players: playersList } }) => {
-      const newPlayersState = playersList.reduce(
-        setPlayerToSliceState,
-        state.players,
-      );
+      const newPlayersState = playersList.reduce(setPlayerToSliceState, state.players);
       state.players = newPlayersState;
     },
     updateCheckStatus: (state, { payload }) => {
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/index.js b/services/app/apps/codebattle/assets/js/widgets/slices/index.js
index db84d409a..98bdb8c92 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/index.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/index.js
@@ -1,12 +1,8 @@
 import builder, { actions as builderActions } from './builder';
 import chat, { actions as chatActions } from './chat';
-import completedGames, {
-  actions as completedGamesActions,
-} from './completedGames';
+import completedGames, { actions as completedGamesActions } from './completedGames';
 import editor, { actions as editorActions } from './editor';
-import executionOutput, {
-  actions as executionOutputActions,
-} from './executionOutput';
+import executionOutput, { actions as executionOutputActions } from './executionOutput';
 import game, { actions as gameActions } from './game';
 import gameUI, { actions as gameUIActions } from './gameUI';
 import invites, { actions as invitesActions } from './invites';
@@ -20,7 +16,7 @@ import user, { actions as userActions } from './user';
 import userSettings, { actions as userSettingActions } from './userSettings';
 import usersInfo, { actions as usersInfoActions } from './usersInfo';
 
-const setError = error => ({
+const setError = (error) => ({
   type: 'ERROR',
   error: true,
   payload: error,
@@ -47,7 +43,7 @@ export const actions = {
   ...tournamentActions,
 };
 
-export const redirectToNewGame = gameId => {
+export const redirectToNewGame = (gameId) => {
   window.location.href = `/games/${gameId}`;
 };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/initial.js b/services/app/apps/codebattle/assets/js/widgets/slices/initial.js
index ad7a9d08b..93d1d0628 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/initial.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/initial.js
@@ -35,18 +35,10 @@ const usersRatingData = Gon.getAsset('users_rating');
 const gameParams = gameData ? camelizeKeys(gameData) : undefined;
 const taskParams = taskData ? camelizeKeys(taskData) : undefined;
 const tournamentParams = tournamentData ? camelizeKeys(tournamentData) : undefined;
-const completedGamesParams = completedGamesData
-  ? camelizeKeys(completedGamesData)
-  : [];
-const activeGamesParams = activeGamesData
-  ? camelizeKeys(activeGamesData)
-  : [];
-const tournamentsParams = tournamentsData
-  ? camelizeKeys(tournamentsData)
-  : [];
-const usersRatingParams = usersRatingData
-  ? camelizeKeys(usersRatingData)
-  : [];
+const completedGamesParams = completedGamesData ? camelizeKeys(completedGamesData) : [];
+const activeGamesParams = activeGamesData ? camelizeKeys(activeGamesData) : [];
+const tournamentsParams = tournamentsData ? camelizeKeys(tournamentsData) : [];
+const usersRatingParams = usersRatingData ? camelizeKeys(usersRatingData) : [];
 const currentUserId = currentUserParams ? currentUserParams.id : null;
 const initialUsers = currentUserParams
   ? { [currentUserParams.id]: { ...currentUserParams, type: userTypes.spectator } }
@@ -68,56 +60,46 @@ const defaultGameStatusState = {
 
 const initialGameStatus = gameParams
   ? {
-    ...defaultGameStatusState,
-    ...getGameStatus(gameParams),
-  }
+      ...defaultGameStatusState,
+      ...getGameStatus(gameParams),
+    }
   : defaultGameStatusState;
 
-const initialGameTask = gameParams
-  ? gameParams.task
-  : null;
+const initialGameTask = gameParams ? gameParams.task : null;
 
 const initialPlayers = gameParams
-  ? getGamePlayers(gameParams.players)
-    .reduce(setPlayerToSliceState, {})
+  ? getGamePlayers(gameParams.players).reduce(setPlayerToSliceState, {})
   : {};
 
-const initialLangs = gameParams
-  ? gameParams.langs
-  : [];
+const initialLangs = gameParams ? gameParams.langs : [];
 
-const setPlayersMetaToSliseState = (state, { userId, langSlug }) => ({
+const setPlayersMetaToSliseState = (state, { langSlug, userId }) => ({
   ...state,
   [userId]: { userId, currentLangSlug: langSlug, historyCurrentLangSlug: langSlug },
 });
 
-const setPlayersTextToSliseState = (state, { userId, editorText, langSlug }) => ({
+const setPlayersTextToSliseState = (state, { editorText, langSlug, userId }) => ({
   ...state,
   [makeEditorTextKey(userId, langSlug)]: editorText,
 });
 
-const setPlayersLangToSliseState = (state, { userId, langSlug }) => ({
+const setPlayersLangToSliseState = (state, { langSlug, userId }) => ({
   ...state,
   [userId]: langSlug,
 });
 
 const initialMeta = gameParams
-  ? gameParams.players
-    .map(getPlayersText)
-    .reduce(setPlayersMetaToSliseState, {})
+  ? gameParams.players.map(getPlayersText).reduce(setPlayersMetaToSliseState, {})
   : {};
 
 const initialText = gameParams
-  ? gameParams.players
-    .map(getPlayersText)
-    .reduce(setPlayersTextToSliseState, {})
+  ? gameParams.players.map(getPlayersText).reduce(setPlayersTextToSliseState, {})
   : {};
 
-const initialLangsHistory = gameParams && isRecord
-  ? gameParams.players
-    .map(getPlayersText)
-    .reduce(setPlayersLangToSliseState, {})
-  : {};
+const initialLangsHistory =
+  gameParams && isRecord
+    ? gameParams.players.map(getPlayersText).reduce(setPlayersLangToSliseState, {})
+    : {};
 
 const setPlayersResultsToSliceState = (state, { userId, ...rest }) => ({
   ...state,
@@ -125,12 +107,10 @@ const setPlayersResultsToSliceState = (state, { userId, ...rest }) => ({
 });
 
 const initialResults = gameParams
-  ? gameParams.players
-    .map(getPlayersExecutionData)
-    .reduce(setPlayersResultsToSliceState, {})
+  ? gameParams.players.map(getPlayersExecutionData).reduce(setPlayersResultsToSliceState, {})
   : {};
 
-const defaultTaskParams = ({
+const defaultTaskParams = {
   name: '',
   level: 'elementary',
   state: taskStateCodes.none,
@@ -145,7 +125,7 @@ const defaultTaskParams = ({
   argumentsGenerator: '',
   generatorLang: 'js',
   visibility: taskVisibilityCodes.hidden,
-});
+};
 
 const defaultTaskTemplates = {
   state: taskTemplatesStates.loading,
@@ -158,7 +138,7 @@ const defaultTaskAssertsStatus = {
   output: '',
 };
 
-const defaultValidationStatuses = ({
+const defaultValidationStatuses = {
   name: [false],
   description: [false],
   solution: [true],
@@ -166,9 +146,9 @@ const defaultValidationStatuses = ({
   inputSignature: [false],
   outputSignature: [true],
   assertsExamples: [false],
-});
+};
 
-const getTaskValidationStatuses = task => ({
+const getTaskValidationStatuses = (task) => ({
   ...defaultValidationStatuses,
   name: validateTaskName(task.name),
   description: validateTaskName(task.descriptionEn),
@@ -176,15 +156,9 @@ const getTaskValidationStatuses = task => ({
   assertsExamples: validateExamples(task.assertsExamples),
 });
 
-const initialTask = taskParams
-  ? labelTaskParamsWithIds(taskParams)
-  : defaultTaskParams;
-const initialTemplates = taskParams
-  ? getTaskTemplates(taskData)
-  : defaultTaskTemplates;
-const initialAssertsStatus = taskParams
-  ? taskData
-  : defaultTaskAssertsStatus;
+const initialTask = taskParams ? labelTaskParamsWithIds(taskParams) : defaultTaskParams;
+const initialTemplates = taskParams ? getTaskTemplates(taskData) : defaultTaskTemplates;
+const initialAssertsStatus = taskParams ? taskData : defaultTaskAssertsStatus;
 const initialValidationStatuses = taskParams
   ? getTaskValidationStatuses(taskParams)
   : defaultValidationStatuses;
@@ -222,14 +196,14 @@ const defaultTournamentParams = {
 
 const initialTournament = tournamentParams
   ? {
-    ...defaultTournamentParams,
-    ...tournamentParams,
-    channel: { online: !tournamentParams.isLive },
-  }
+      ...defaultTournamentParams,
+      ...tournamentParams,
+      channel: { online: !tournamentParams.isLive },
+    }
   : defaultTournamentParams;
 
-const initialLiveTournaments = tournamentsParams.filter(x => x.isLive);
-const initialCompletedTournaments = tournamentsParams.filter(x => !x.isLive);
+const initialLiveTournaments = tournamentsParams.filter((x) => x.isLive);
+const initialCompletedTournaments = tournamentsParams.filter((x) => !x.isLive);
 
 const initial = {
   game: {
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/invites.js b/services/app/apps/codebattle/assets/js/widgets/slices/invites.js
index 64e9f5498..449c0ed09 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/invites.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/invites.js
@@ -16,4 +16,4 @@ const invitesSlice = createSlice({
 
 export default invitesSlice.reducer;
 export const { actions } = invitesSlice;
-export const selectors = invitesAdapter.getSelectors(state => state.invites);
+export const selectors = invitesAdapter.getSelectors((state) => state.invites);
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/leaderboard.js b/services/app/apps/codebattle/assets/js/widgets/slices/leaderboard.js
index b787202ac..5932b6d2c 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/leaderboard.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/leaderboard.js
@@ -10,38 +10,33 @@ const periodMapping = {
   [periodTypes.WEEKLY]: 'week',
 };
 
-export const leaderboardSelector = state => state.leaderboard;
+export const leaderboardSelector = (state) => state.leaderboard;
 
-const fetchUsers = createAsyncThunk(
-  'users/fetchUsers',
-  async ({ periodType }, { getState }) => {
-    const { loading } = getState().leaderboard;
-    if (loading !== 'pending') {
-      return;
-    }
+const fetchUsers = createAsyncThunk('users/fetchUsers', async ({ periodType }, { getState }) => {
+  const { loading } = getState().leaderboard;
+  if (loading !== 'pending') {
+    return;
+  }
 
-    const baseParams = {
-      s: 'rating+desc',
-      page_size: '7',
-      with_bots: false,
-    };
+  const baseParams = {
+    s: 'rating+desc',
+    page_size: '7',
+    with_bots: false,
+  };
 
-    const params = periodType === periodTypes.ALL
-        ? baseParams
-        : {
-            ...baseParams,
-            date_from: moment()
-              .startOf(periodMapping[periodType])
-              .utc()
-              .format('YYYY-MM-DD'),
-          };
+  const params =
+    periodType === periodTypes.ALL
+      ? baseParams
+      : {
+          ...baseParams,
+          date_from: moment().startOf(periodMapping[periodType]).utc().format('YYYY-MM-DD'),
+        };
 
-    const response = await axios.get('/api/v1/users', { params });
+  const response = await axios.get('/api/v1/users', { params });
 
-    /* eslint-disable-next-line */
+  /* eslint-disable-next-line */
     return response.data;
-  },
-);
+});
 
 const leaderboardSlice = createSlice({
   name: 'leaderboard',
@@ -57,7 +52,7 @@ const leaderboardSlice = createSlice({
     },
   },
   extraReducers: {
-    [fetchUsers.pending]: state => {
+    [fetchUsers.pending]: (state) => {
       if (state.loading === 'idle') {
         state.loading = 'pending';
       }
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/lobby.js b/services/app/apps/codebattle/assets/js/widgets/slices/lobby.js
index 649794e2a..f61b75262 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/lobby.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/lobby.js
@@ -27,22 +27,19 @@ const lobby = createSlice({
   name: 'lobby',
   initialState,
   reducers: {
-    initGameList: (
-      state,
-      { payload: { activeGames, tournaments } },
-    ) => ({
+    initGameList: (state, { payload: { activeGames, tournaments } }) => ({
       ...state,
       activeGames,
-      liveTournaments: tournaments.filter(x => x.isLive),
-      completedTournaments: tournaments.filter(x => !x.isLive),
+      liveTournaments: tournaments.filter((x) => x.isLive),
+      completedTournaments: tournaments.filter((x) => !x.isLive),
       channel: { online: true },
     }),
     updateCheckResult: (state, { payload }) => {
-      state.activeGames = state.activeGames.map(game => {
+      state.activeGames = state.activeGames.map((game) => {
         if (game.id === payload.gameId) {
-          const newPlayers = game.players.map(player => (player.id === payload.userId
-              ? { ...player, checkResult: payload.checkResult }
-              : player));
+          const newPlayers = game.players.map((player) =>
+            player.id === payload.userId ? { ...player, checkResult: payload.checkResult } : player,
+          );
 
           return { ...game, players: newPlayers };
         }
@@ -71,12 +68,12 @@ const lobby = createSlice({
     finishGame: (state, { payload: { game } }) => {
       state.activeGames = reject(state.activeGames, { id: game.id });
     },
-    showCreateGameModal: state => {
+    showCreateGameModal: (state) => {
       state.createGameModal.show = true;
       state.createGameModal.gameOptions = {};
       state.createGameModal.opponentInfo = null;
     },
-    closeCreateGameModal: state => {
+    closeCreateGameModal: (state) => {
       state.createGameModal.show = false;
       state.createGameModal.gameOptions = {};
       state.createGameModal.opponentInfo = null;
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/playbook.js b/services/app/apps/codebattle/assets/js/widgets/slices/playbook.js
index 9b6abdd5e..87a95a3b0 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/playbook.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/playbook.js
@@ -20,7 +20,9 @@ const playbook = createSlice({
   initialState,
   reducers: {
     loadPlaybook: (state, { payload }) => {
-      const mainEvents = payload.records.filter(record => parse(record).type === 'check_complete').map(parse);
+      const mainEvents = payload.records
+        .filter((record) => parse(record).type === 'check_complete')
+        .map(parse);
       return { ...state, ...payload, mainEvents };
     },
     changeSolutionType: (state, { payload }) => ({ ...state, solutionType: payload.solutionType }),
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/stairway.js b/services/app/apps/codebattle/assets/js/widgets/slices/stairway.js
index 6207bde0d..4becd41e2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/stairway.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/stairway.js
@@ -21,7 +21,7 @@ const stairwayGame = createSlice({
       state.game = payload;
     },
     // changeEditorLang: (state, { payload: { editorLang } }) =>
-      // _.update(state, 'editorValue.editorLang', editorLang),
+    // _.update(state, 'editorValue.editorLang', editorLang),
     // reducerName: () => {},
   },
 });
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/user.js b/services/app/apps/codebattle/assets/js/widgets/slices/user.js
index 5ce9e3157..93eb22570 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/user.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/user.js
@@ -17,24 +17,22 @@ const userSlice = createSlice({
     },
     updateUsers: (state, { payload }) => {
       const { users: usersList } = payload;
-      const users = usersList.reduce(
-        (acc, user) => ({ ...acc, [user.id]: user }),
-        {},
-      );
+      const users = usersList.reduce((acc, user) => ({ ...acc, [user.id]: user }), {});
       if (!isEmpty(users)) {
         Object.assign(state.users, users);
       }
     },
     updateUsersStats: (state, { payload }) => {
-      const { userId, stats, achievements } = payload;
+      const { achievements, stats, userId } = payload;
       state.usersStats[userId] = { stats, achievements };
     },
     updateUsersRatingPage: (state, { payload }) => {
-      const {
-        users, pageInfo, dateFrom, withBots,
-      } = payload;
+      const { dateFrom, pageInfo, users, withBots } = payload;
       state.usersRatingPage = {
-        users, pageInfo, dateFrom, withBots: (withBots === 'true'),
+        users,
+        pageInfo,
+        dateFrom,
+        withBots: withBots === 'true',
       };
     },
   },
diff --git a/services/app/apps/codebattle/assets/js/widgets/slices/userSettings.js b/services/app/apps/codebattle/assets/js/widgets/slices/userSettings.js
index 678e4b5c3..7bfcb66c2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/slices/userSettings.js
+++ b/services/app/apps/codebattle/assets/js/widgets/slices/userSettings.js
@@ -5,7 +5,7 @@ import capitalize from 'lodash/capitalize';
 
 const userSettings = Gon.getAsset('current_user');
 
-const createValidationErrors = response => {
+const createValidationErrors = (response) => {
   const [fieldName] = Object.keys(response.data.errors);
   const [errorMessage] = response.data.errors[fieldName];
   const normalizedErrorMessage = capitalize(errorMessage);
@@ -48,12 +48,12 @@ const userSettingsSlice = createSlice({
   name: 'userSettings',
   initialState,
   reducers: {
-    toggleMuteSound: state => {
+    toggleMuteSound: (state) => {
       localStorage.setItem('ui_mute_sound', !state.mute);
-      return ({ ...state, mute: !state.mute });
+      return { ...state, mute: !state.mute };
     },
   },
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     // The `builder` callback form is used here because it provides correctly typed reducers from the action creators
     builder.addCase(updateUserSettings.fulfilled, (state, { payload }) => {
       Object.assign(state, payload);
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/builder.js b/services/app/apps/codebattle/assets/js/widgets/utils/builder.js
index 1a33f7765..3bb71671e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/builder.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/builder.js
@@ -23,7 +23,8 @@ export const MAX_DESCRIPTION_LENGTH = 1024;
 
 export const itemClassName = 'btn-group border-gray rounded-lg m-1 mr-2';
 export const itemActionClassName = 'btn-sm text-nowrap border-0';
-export const itemAddClassName = 'btn btn-sm btn-outline-secondary border-0 text-nowrap rounded-lg my-1 py-2';
+export const itemAddClassName =
+  'btn btn-sm btn-outline-secondary border-0 text-nowrap rounded-lg my-1 py-2';
 
 export const argumentTypeNames = [
   argumentTypes.integer,
@@ -39,43 +40,48 @@ export const defaultSignatureByType = {
   [argumentTypes.string]: { type: { name: argumentTypes.string } },
   [argumentTypes.float]: { type: { name: argumentTypes.float } },
   [argumentTypes.boolean]: { type: { name: argumentTypes.boolean } },
-  [argumentTypes.hash]: { type: { name: argumentTypes.hash, nested: { name: argumentTypes.integer } } },
-  [argumentTypes.array]: { type: { name: argumentTypes.array, nested: { name: argumentTypes.integer } } },
+  [argumentTypes.hash]: {
+    type: { name: argumentTypes.hash, nested: { name: argumentTypes.integer } },
+  },
+  [argumentTypes.array]: {
+    type: { name: argumentTypes.array, nested: { name: argumentTypes.integer } },
+  },
 };
 
-export const getDefaultInputSignatureByType = type => ({
-  argumentName: '', ...defaultSignatureByType[type],
+export const getDefaultInputSignatureByType = (type) => ({
+  argumentName: '',
+  ...defaultSignatureByType[type],
 });
 
-export const getExamplesFromAsserts = asserts => (
-  `\`\`\`\n${asserts.map(({ expected, arguments: args }) => {
+export const getExamplesFromAsserts = (asserts) =>
+  `\`\`\`\n${asserts
+    .map(({ arguments: args, expected }) => {
       const argsStr = JSON.stringify(JSON.parse(args));
       return `${expected} == solution(${argsStr.slice(1, argsStr.length - 1)})`;
-  }).join('\n')}`
-);
+    })
+    .join('\n')}`;
 
-export const labelTaskParamsWithIds = task => ({
+export const labelTaskParamsWithIds = (task) => ({
   ...task,
   assertsExamples: task.assertsExamples.map((item, index) => ({ ...item, id: index })),
   inputSignature: task.inputSignature.map((item, index) => ({ ...item, id: index })),
   outputSignature: { ...task.outputSignature, id: Date.now() },
 });
 
-export const getTaskTemplates = task => ({
-  state: !task.solution && !task.argumentsGenerator
-    ? taskTemplatesStates.none
-    : taskTemplatesStates.init,
-  solution: task.solution
-    ? { [task.generatorLang]: task.solution }
-    : {},
+export const getTaskTemplates = (task) => ({
+  state:
+    !task.solution && !task.argumentsGenerator
+      ? taskTemplatesStates.none
+      : taskTemplatesStates.init,
+  solution: task.solution ? { [task.generatorLang]: task.solution } : {},
   argumentsGenerator: task.argumentsGenerator
     ? { [task.generatorLang]: task.argumentsGenerator }
     : {},
 });
 
-export const haveNestedType = type => !!defaultSignatureByType[type].type.nested;
+export const haveNestedType = (type) => !!defaultSignatureByType[type].type.nested;
 
-export const validateTaskName = name => {
+export const validateTaskName = (name) => {
   if (!name || name.length === 0) {
     return [false, 'Name is required'];
   }
@@ -91,7 +97,7 @@ export const validateTaskName = name => {
   return [true];
 };
 
-export const validateDescription = description => {
+export const validateDescription = (description) => {
   if (!description || description.length === 0) {
     return [false, 'Description is required'];
   }
@@ -107,7 +113,7 @@ export const validateDescription = description => {
   return [true];
 };
 
-export const validateInputSignatures = inputSignature => {
+export const validateInputSignatures = (inputSignature) => {
   if (inputSignature.length === 0) {
     return [false, 'At least 1 argument must be described'];
   }
@@ -115,7 +121,7 @@ export const validateInputSignatures = inputSignature => {
   return [true];
 };
 
-export const validateExamples = examples => {
+export const validateExamples = (examples) => {
   if (examples.length < MIN_EXAMPLES_COUNT) {
     return [false, `Must be at least ${MIN_EXAMPLES_COUNT} examples`];
   }
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/chat.js b/services/app/apps/codebattle/assets/js/widgets/utils/chat.js
index 25884ea95..ca0c742b9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/chat.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/chat.js
@@ -6,29 +6,27 @@ import rooms from '../config/rooms';
 
 const currentUser = Gon.getAsset('current_user');
 
-export const isGeneralRoom = room => room.name === rooms.general.name;
+export const isGeneralRoom = (room) => room.name === rooms.general.name;
 
-export const isPrivateRoom = room => !Object.values(rooms).some(r => r.name === room.name);
+export const isPrivateRoom = (room) => !Object.values(rooms).some((r) => r.name === room.name);
 
-export const isPrivateMessage = messageType => messageType === messageTypes.private;
+export const isPrivateMessage = (messageType) => messageType === messageTypes.private;
 
-export const isSystemMessage = messageType => messageType === messageTypes.system;
+export const isSystemMessage = (messageType) => messageType === messageTypes.system;
 
-export const isMessageForCurrentPrivateRoom = (room, message) => (
-  room.targetUserId === message.meta?.targetUserId || room.targetUserId === message.userId
-);
+export const isMessageForCurrentPrivateRoom = (room, message) =>
+  room.targetUserId === message.meta?.targetUserId || room.targetUserId === message.userId;
 
-export const isMessageForCurrentUser = message => (
-  message.meta?.type === messageTypes.private
-  && (message.userId === currentUser.id || message.meta.targetUserId === currentUser.id)
-);
+export const isMessageForCurrentUser = (message) =>
+  message.meta?.type === messageTypes.private &&
+  (message.userId === currentUser.id || message.meta.targetUserId === currentUser.id);
 
-export const isMessageForEveryone = message => !message.meta || message.meta.type === messageTypes.general;
+export const isMessageForEveryone = (message) =>
+  !message.meta || message.meta.type === messageTypes.general;
 
-const isProperPrivateRoomActive = (message, room) => (
-  (room.targetUserId === message.meta.targetUserId && message.userId === currentUser.id)
-  || (room.targetUserId === message.userId && message.meta.targetUserId === currentUser.id)
-);
+const isProperPrivateRoomActive = (message, room) =>
+  (room.targetUserId === message.meta.targetUserId && message.userId === currentUser.id) ||
+  (room.targetUserId === message.userId && message.meta.targetUserId === currentUser.id);
 
 export const shouldShowMessage = (message, room) => {
   if (isSystemMessage(message.type)) {
@@ -40,11 +38,11 @@ export const shouldShowMessage = (message, room) => {
   }
 
   switch (room.name) {
-    case (rooms.general.name): {
+    case rooms.general.name: {
       return true;
     }
 
-    case (rooms.system.name): {
+    case rooms.system.name: {
       return message.type === messageTypes.system;
     }
 
@@ -54,12 +52,12 @@ export const shouldShowMessage = (message, room) => {
 };
 
 export const getSystemMessage = ({
-  type = messageTypes.system,
-  text = '',
-  status = 'event',
-  userId,
   name,
+  status = 'event',
+  text = '',
   time,
+  type = messageTypes.system,
+  userId,
 }) => ({
   id: new Date().getTime(),
   type,
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/editor.js b/services/app/apps/codebattle/assets/js/widgets/utils/editor.js
index 0a98d6c5c..f9e8ced51 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/editor.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/editor.js
@@ -1,12 +1,12 @@
 import langToSpacesMapping from '../config/langToSpacesMapping';
 import languageTabSizes from '../config/languageTabSizes';
 
-const getLanguageTabSize = language => {
+const getLanguageTabSize = (language) => {
   const defaultTabSize = 2;
 
   return languageTabSizes[language] || defaultTabSize;
 };
 
-export const shouldReplaceTabsWithSpaces = language => langToSpacesMapping[language] || false;
+export const shouldReplaceTabsWithSpaces = (language) => langToSpacesMapping[language] || false;
 
 export default getLanguageTabSize;
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/gameRoom.js b/services/app/apps/codebattle/assets/js/widgets/utils/gameRoom.js
index 82f063ef1..f91aacf4f 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/gameRoom.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/gameRoom.js
@@ -1,15 +1,15 @@
 import userTypes from '../config/userTypes';
 
 export const getGameStatus = ({
-  state,
-  startsAt,
-  type,
   mode,
-  timeoutSeconds,
-  rematchState,
-  tournamentId,
   rematchInitiatorId,
+  rematchState,
   score,
+  startsAt,
+  state,
+  timeoutSeconds,
+  tournamentId,
+  type,
 }) => ({
   state,
   type,
@@ -32,13 +32,13 @@ export const getGamePlayers = ([firstPlayer, secondPlayer]) => {
   return players;
 };
 
-export const getPlayersText = player => ({
+export const getPlayersText = (player) => ({
   userId: player.id,
   editorText: player.editorText,
   langSlug: player.editorLang,
 });
 
-export const getPlayersExecutionData = player => ({
+export const getPlayersExecutionData = (player) => ({
   ...player.checkResult,
   userId: player.id,
 });
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/names.js b/services/app/apps/codebattle/assets/js/widgets/utils/names.js
index 5f9828ab1..092f5d939 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/names.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/names.js
@@ -16,7 +16,7 @@ const prefixes = {
   },
 };
 
-const getChatName = entityName => {
+const getChatName = (entityName) => {
   if (tournamentId) {
     return `${prefixes[entityName].tournament}_${tournamentId}`;
   }
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/notification.js b/services/app/apps/codebattle/assets/js/widgets/utils/notification.js
index af7cefc6b..15cfc2a12 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/notification.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/notification.js
@@ -12,9 +12,7 @@ let timerID = null;
 const startBlinkingMsg = () => {
   timerID = setInterval(() => {
     sound.play('win');
-    document.title = document.title === settings.message
-        ? settings.defaultTitle
-        : settings.message;
+    document.title = document.title === settings.message ? settings.defaultTitle : settings.message;
   }, settings.intervalBlinking);
 };
 
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/urlBuilders.js b/services/app/apps/codebattle/assets/js/widgets/utils/urlBuilders.js
index fa6205dd9..ed5acfb91 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/urlBuilders.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/urlBuilders.js
@@ -1,5 +1,5 @@
 export const makeGameUrl = (...paths) => `/games/${paths.join('/')}/`;
 export const getSignInGithubUrl = () => '/auth/github';
 export const getCreateTrainingGameUrl = () => '/games/training';
-export const getLobbyUrl = params => (params ? `/?${params}` : '/#lobby');
-export const getUserProfileUrl = userId => `/users/${userId}`;
+export const getLobbyUrl = (params) => (params ? `/?${params}` : '/#lobby');
+export const getUserProfileUrl = (userId) => `/users/${userId}`;
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useChatContextMenu.js b/services/app/apps/codebattle/assets/js/widgets/utils/useChatContextMenu.js
index 46e5da73c..bbfc24852 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useChatContextMenu.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useChatContextMenu.js
@@ -2,36 +2,35 @@ import { useCallback, useState, useMemo } from 'react';
 
 import { useContextMenu } from 'react-contexify';
 
-const useChatContextMenu = ({
-  type,
-  users,
-  canInvite = false,
-}) => {
+const useChatContextMenu = ({ canInvite = false, type, users }) => {
   const menuConf = useMemo(() => ({ id: `${type}-chat` }), [type]);
   const { show } = useContextMenu(menuConf);
 
   const [menuRequest, setMenuRequest] = useState();
 
-  const displayMenu = useCallback(event => {
-    const { userId, userName } = event.currentTarget.dataset;
-
-    if (!userId) {
-      return;
-    }
-
-    const user = users.find(({ id }) => id === Number(userId));
-    const request = {
-      user: {
-        name: user?.name || userName,
-        isBot: user?.isBot || Number(userId) < 0,
-        userId: user?.id || Number(userId),
-        canInvite: user ? canInvite : false,
-      },
-    };
-
-    setMenuRequest(request);
-    show({ event });
-  }, [show, users, canInvite, setMenuRequest]);
+  const displayMenu = useCallback(
+    (event) => {
+      const { userId, userName } = event.currentTarget.dataset;
+
+      if (!userId) {
+        return;
+      }
+
+      const user = users.find(({ id }) => id === Number(userId));
+      const request = {
+        user: {
+          name: user?.name || userName,
+          isBot: user?.isBot || Number(userId) < 0,
+          userId: user?.id || Number(userId),
+          canInvite: user ? canInvite : false,
+        },
+      };
+
+      setMenuRequest(request);
+      show({ event });
+    },
+    [show, users, canInvite, setMenuRequest],
+  );
 
   return {
     menuId: menuConf.id,
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useChatRooms.js b/services/app/apps/codebattle/assets/js/widgets/utils/useChatRooms.js
index 1345bb241..255f12fdd 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useChatRooms.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useChatRooms.js
@@ -14,16 +14,13 @@ import { actions } from '../slices';
 
 import getChatName from './names';
 
-const useChatRooms = key => {
+const useChatRooms = (key) => {
   const dispatch = useDispatch();
   const pageName = getChatName(key);
   const rooms = useSelector(selectors.roomsSelector);
   const currentUserId = useSelector(selectors.currentUserIdSelector);
 
-  const storageKey = useMemo(
-    () => getStorageKey(currentUserId),
-    [currentUserId],
-  );
+  const storageKey = useMemo(() => getStorageKey(currentUserId), [currentUserId]);
 
   useEffect(() => {
     clearExpiredPrivateRooms(storageKey);
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useClickAway.js b/services/app/apps/codebattle/assets/js/widgets/utils/useClickAway.js
index f3361dcef..9cc3afc92 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useClickAway.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useClickAway.js
@@ -5,26 +5,26 @@ const off = (obj, ...args) => obj.removeEventListener(...args);
 
 const defaultEvents = ['mousedown', 'touchstart'];
 const useClickAway = (ref, onClickAway, events = defaultEvents) => {
-    const savedCallback = useRef(onClickAway);
-    useEffect(() => {
-        savedCallback.current = onClickAway;
-    }, [onClickAway]);
-    useEffect(() => {
-        const handler = event => {
-            const { current: el } = ref;
-            // eslint-disable-next-line no-unused-expressions
-            el && !el.contains(event.target) && savedCallback.current(event);
-        };
-        // eslint-disable-next-line no-restricted-syntax
-        for (const eventName of events) {
-            on(document, eventName, handler);
-        }
-        return () => {
-            // eslint-disable-next-line no-restricted-syntax
-            for (const eventName of events) {
-                off(document, eventName, handler);
-            }
-        };
-    }, [events, ref]);
+  const savedCallback = useRef(onClickAway);
+  useEffect(() => {
+    savedCallback.current = onClickAway;
+  }, [onClickAway]);
+  useEffect(() => {
+    const handler = (event) => {
+      const { current: el } = ref;
+      // eslint-disable-next-line no-unused-expressions
+      el && !el.contains(event.target) && savedCallback.current(event);
+    };
+    // eslint-disable-next-line no-restricted-syntax
+    for (const eventName of events) {
+      on(document, eventName, handler);
+    }
+    return () => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const eventName of events) {
+        off(document, eventName, handler);
+      }
+    };
+  }, [events, ref]);
 };
 export default useClickAway;
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useEvent.js b/services/app/apps/codebattle/assets/js/widgets/utils/useEvent.js
index c86d41d60..f61d8da2b 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useEvent.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useEvent.js
@@ -2,30 +2,30 @@ import { useEffect } from 'react';
 
 const isClient = typeof window === 'object';
 const defaultTarget = isClient ? window : null;
-const isListenerType1 = target => !!target.addEventListener;
-const isListenerType2 = target => !!target.on;
-const useEvent = (name, handler, target = defaultTarget, options) => {
-    useEffect(() => {
-        if (!handler) {
-            return;
-        }
-        if (!target) {
-            return;
-        }
-        if (isListenerType1(target)) {
-            target.addEventListener(name, handler, options);
-        } else if (isListenerType2(target)) {
-            target.on(name, handler, options);
-        }
-        // eslint-disable-next-line consistent-return
-        return () => {
-            if (isListenerType1(target)) {
-                target?.removeEventListener(name, handler, options);
-            } else if (isListenerType2(target)) {
-                target.off(name, handler, options);
-            }
-        };
+const isListenerType1 = (target) => !!target.addEventListener;
+const isListenerType2 = (target) => !!target.on;
+const useEvent = (name, handler, options, target = defaultTarget) => {
+  useEffect(() => {
+    if (!handler) {
+      return;
+    }
+    if (!target) {
+      return;
+    }
+    if (isListenerType1(target)) {
+      target.addEventListener(name, handler, options);
+    } else if (isListenerType2(target)) {
+      target.on(name, handler, options);
+    }
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (isListenerType1(target)) {
+        target?.removeEventListener(name, handler, options);
+      } else if (isListenerType2(target)) {
+        target.off(name, handler, options);
+      }
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [name, handler, target, JSON.stringify(options)]);
+  }, [name, handler, target, JSON.stringify(options)]);
 };
 export default useEvent;
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useGameRoomMachine.js b/services/app/apps/codebattle/assets/js/widgets/utils/useGameRoomMachine.js
index eb71c744c..d530a3345 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useGameRoomMachine.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useGameRoomMachine.js
@@ -4,9 +4,9 @@ import { useDispatch } from 'react-redux';
 import { actions } from '../slices';
 
 const useGameRoomMachine = ({
-  setTaskModalShowing,
-  setResultModalShowing,
   mainMachine,
+  setResultModalShowing,
+  setTaskModalShowing,
   taskMachine,
 }) => {
   const dispatch = useDispatch();
@@ -33,23 +33,29 @@ const useGameRoomMachine = ({
         setTaskModalShowing(false);
       },
       onSuccess: () => {
-        dispatch(actions.setValidationStatuses({
-          solution: [true],
-          assertsExamples: [true],
-          argumentsGenerator: [true],
-        }));
+        dispatch(
+          actions.setValidationStatuses({
+            solution: [true],
+            assertsExamples: [true],
+            argumentsGenerator: [true],
+          }),
+        );
       },
       onFailure: (_ctx, event) => {
-        dispatch(actions.setValidationStatuses({
-          solution: [false, event.message],
-          assertsExamples: [false, event.message],
-        }));
+        dispatch(
+          actions.setValidationStatuses({
+            solution: [false, event.message],
+            assertsExamples: [false, event.message],
+          }),
+        );
       },
       onError: (_ctx, event) => {
-        dispatch(actions.setValidationStatuses({
-          solution: [false, event.message],
-          argumentsGenerator: [false, event.message],
-        }));
+        dispatch(
+          actions.setValidationStatuses({
+            solution: [false, event.message],
+            argumentsGenerator: [false, event.message],
+          }),
+        );
       },
     },
   });
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useKey.js b/services/app/apps/codebattle/assets/js/widgets/utils/useKey.js
index cf66e9369..e62395fd2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useKey.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useKey.js
@@ -3,30 +3,31 @@ import { useMemo } from 'react';
 
 import useEvent from './useEvent';
 
-const noop = () => { };
+const noop = () => {};
 
-const createKeyPredicate = keyFilter => (typeof keyFilter === 'function'
+const createKeyPredicate = (keyFilter) =>
+  typeof keyFilter === 'function'
     ? keyFilter
     : typeof keyFilter === 'string'
-        ? event => event.key === keyFilter
-        : keyFilter
-            ? () => true
-            : () => false);
+    ? (event) => event.key === keyFilter
+    : keyFilter
+    ? () => true
+    : () => false;
 
 const useKey = (key, fn = noop, opts = {}, deps = [key]) => {
-    const { event = 'keydown', target, options } = opts;
-    const useMemoHandler = useMemo(() => {
-        const predicate = createKeyPredicate(key);
-        const handler = handlerEvent => {
-            if (predicate(handlerEvent)) {
-                return fn(handlerEvent);
-            }
+  const { event = 'keydown', options, target } = opts;
+  const useMemoHandler = useMemo(() => {
+    const predicate = createKeyPredicate(key);
+    const handler = (handlerEvent) => {
+      if (predicate(handlerEvent)) {
+        return fn(handlerEvent);
+      }
 
-            return null;
-        };
-        return handler;
+      return null;
+    };
+    return handler;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-    useEvent(event, useMemoHandler, target, options);
+  }, deps);
+  useEvent(event, useMemoHandler, options, target);
 };
 export default useKey;
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useTaskDescriptionParams.js b/services/app/apps/codebattle/assets/js/widgets/utils/useTaskDescriptionParams.js
index 7b009c47d..24d7923f5 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useTaskDescriptionParams.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useTaskDescriptionParams.js
@@ -5,10 +5,11 @@ import keys from 'lodash/keys';
 
 import taskDescriptionLanguages from '../config/taskDescriptionLanguages';
 
-const useTaskDescriptionParams = (task, taskLanguage) => useMemo(() => {
+const useTaskDescriptionParams = (task, taskLanguage) =>
+  useMemo(() => {
     const avaibleLanguages = keys(task)
-      .filter(key => key.includes('description'))
-      .map(key => key.split('description'))
+      .filter((key) => key.includes('description'))
+      .map((key) => key.split('description'))
       .map(([, language]) => language.toLowerCase());
 
     const displayLanguage = includes(avaibleLanguages, taskLanguage)
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/useValidationExample.js b/services/app/apps/codebattle/assets/js/widgets/utils/useValidationExample.js
index 11a0b99f5..977662cb1 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/useValidationExample.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/useValidationExample.js
@@ -28,13 +28,17 @@ const isValidValueToSignature = (value, signature) => {
       return isBoolean(value);
     }
     case argumentTypes.array: {
-      return isArray(value) && !value.some(item => !isValidValueToSignature(item, signature.nested));
+      return (
+        isArray(value) && !value.some((item) => !isValidValueToSignature(item, signature.nested))
+      );
     }
     case argumentTypes.hash: {
-      return !isArray(value)
-        && isObject(value)
-        && !Object.keys(value).some(item => item.length === 0)
-        && !Object.values(value).some(item => !isValidValueToSignature(item, signature.nested));
+      return (
+        !isArray(value) &&
+        isObject(value) &&
+        !Object.keys(value).some((item) => item.length === 0) &&
+        !Object.values(value).some((item) => !isValidValueToSignature(item, signature.nested))
+      );
     }
     default: {
       return false;
@@ -42,11 +46,7 @@ const isValidValueToSignature = (value, signature) => {
   }
 };
 
-const useValidationExample = ({
-  suggest,
-  inputSignature,
-  outputSignature,
-}) => {
+const useValidationExample = ({ inputSignature, outputSignature, suggest }) => {
   const [validArguments, reasonInvalidArguments] = useMemo(() => {
     try {
       if (!suggest) {
@@ -67,10 +67,8 @@ const useValidationExample = ({
         return [false, `Must be ${inputSignature.length} args [Now ${data.length}]`];
       }
 
-      if (
-        data.some((arg, index) => !isValidValueToSignature(arg, inputSignature[index].type))
-      ) {
-        return [false, 'Doesn\'t match with signature'];
+      if (data.some((arg, index) => !isValidValueToSignature(arg, inputSignature[index].type))) {
+        return [false, "Doesn't match with signature"];
       }
 
       return [true];
@@ -91,7 +89,7 @@ const useValidationExample = ({
       const data = JSON.parse(suggest.expected);
 
       if (!isValidValueToSignature(data, outputSignature.type)) {
-        return [false, 'Doesn\'t match with signature'];
+        return [false, "Doesn't match with signature"];
       }
 
       return [true];
@@ -100,10 +98,13 @@ const useValidationExample = ({
     }
   }, [suggest, outputSignature]);
 
-  const validationStatus = useMemo(() => ({
-    arguments: { valid: validArguments, reason: reasonInvalidArguments },
-    expected: { valid: validExpected, reason: reasonInvalidExpected },
-  }), [validArguments, validExpected, reasonInvalidArguments, reasonInvalidExpected]);
+  const validationStatus = useMemo(
+    () => ({
+      arguments: { valid: validArguments, reason: reasonInvalidArguments },
+      expected: { valid: validExpected, reason: reasonInvalidExpected },
+    }),
+    [validArguments, validExpected, reasonInvalidArguments, reasonInvalidExpected],
+  );
 
   return validationStatus;
 };
diff --git a/services/app/apps/codebattle/assets/js/widgets/utils/users.js b/services/app/apps/codebattle/assets/js/widgets/utils/users.js
index 2b48730a4..7f926cdb6 100644
--- a/services/app/apps/codebattle/assets/js/widgets/utils/users.js
+++ b/services/app/apps/codebattle/assets/js/widgets/utils/users.js
@@ -1,5 +1,5 @@
-export const isBotId = userId => userId < 0;
+export const isBotId = (userId) => userId < 0;
 
 export default {
- isBotId,
+  isBotId,
 };
diff --git a/services/app/apps/codebattle/package.json b/services/app/apps/codebattle/package.json
index b37bee70b..679d8c595 100644
--- a/services/app/apps/codebattle/package.json
+++ b/services/app/apps/codebattle/package.json
@@ -20,14 +20,7 @@
     "moduleNameMapper": {
       "monaco-editor": "<rootDir>/node_modules/react-monaco-editor",
       "^.+\\.(css|styl|less|sass|scss|po|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-      "^@/components(.*)$": "<rootDir>/assets/js/widgets/components$1",
-      "^@/lib(.*)$": "<rootDir>/assets/js/widgets/lib$1",
-      "^@/machines(.*)$": "<rootDir>/assets/js/widgets/machines$1",
-      "^@/middlewares(.*)$": "<rootDir>/assets/js/widgets/middlewares$1",
-      "^@/pages(.*)$": "<rootDir>/assets/js/widgets/pages$1",
-      "^@/selectors(.*)$": "<rootDir>/assets/js/widgets/selectors$1",
-      "^@/slices(.*)$": "<rootDir>/assets/js/widgets/slices$1",
-      "^@/utils(.*)$": "<rootDir>/assets/js/widgets/utils$1"
+      "^@/(.*)$": "<rootDir>/assets/js/widgets/$1"
     },
     "testPathIgnorePatterns": [
       "/helpers/"
@@ -128,14 +121,17 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "^23.13.2",
+    "eslint": "^8.48.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx": "0.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sort-destructure-keys": "^1.5.0",
     "exports-loader": "^4.0.0",
     "file-loader": "^6.2.0",
     "i18next-po-loader": "^1.0.0",
@@ -144,6 +140,7 @@
     "jest-transform-stub": "^2.0.0",
     "postcss": "^8.4.27",
     "postcss-loader": "^7.3.3",
+    "prettier": "^3.0.3",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^13.3.2",
     "terser-webpack-plugin": "^5.3.9",
diff --git a/services/app/apps/codebattle/yarn.lock b/services/app/apps/codebattle/yarn.lock
index 4d970ed96..1b7c6c9a2 100644
--- a/services/app/apps/codebattle/yarn.lock
+++ b/services/app/apps/codebattle/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@adobe/css-tools@^4.0.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
@@ -1726,22 +1731,38 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@eslint/eslintrc@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz"
-  integrity sha512-XRUeBZ5zBWLYgSANMpThFddrZZkEbGHgUdt5UJjZfnlN9BGCiUBrf+nvbRupSjMvqzwnQN0qwCmOxITt1cfywA==
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.6.1":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.0.tgz#11195513186f68d42fbf449f9a7136b2c0c92005"
+  integrity sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==
+
+"@eslint/eslintrc@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
+  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
   dependencies:
     ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
     import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
-    lodash "^4.17.19"
-    minimatch "^3.0.4"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.48.0":
+  version "8.48.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.48.0.tgz#642633964e217905436033a2bd08bf322849b7fb"
+  integrity sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==
+
 "@esri/arcgis-rest-auth@^2.14.1":
   version "2.24.0"
   resolved "https://registry.npmjs.org/@esri/arcgis-rest-auth/-/arcgis-rest-auth-2.24.0.tgz"
@@ -1836,6 +1857,25 @@
   resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz#1a106721368dba5e7e9fb7e9a3a6f9efbd8df36d"
   integrity sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==
 
+"@humanwhocodes/config-array@^0.11.10":
+  version "0.11.11"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
+  integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@@ -2172,11 +2212,24 @@
     "@nodelib/fs.stat" "2.0.3"
     run-parallel "^1.1.9"
 
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
 "@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz"
   integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
 
+"@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
 "@nodelib/fs.walk@^1.2.3":
   version "1.2.4"
   resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz"
@@ -2185,6 +2238,26 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgr/utils@^2.3.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.2.tgz#9e638bbe9a6a6f165580dc943f138fd3309a2cbc"
+  integrity sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    fast-glob "^3.3.0"
+    is-glob "^4.0.3"
+    open "^9.1.0"
+    picocolors "^1.0.0"
+    tslib "^2.6.0"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -2543,16 +2616,16 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
-"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.6":
-  version "7.0.6"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz"
-  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
-
 "@types/json-schema@^7.0.5":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
+"@types/json-schema@^7.0.6":
+  version "7.0.6"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz"
+  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
@@ -2651,6 +2724,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
   integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
 
+"@types/semver@^7.3.12":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.1.tgz#0480eeb7221eb9bc398ad7432c9d7e14b1a5a367"
+  integrity sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -2721,28 +2799,53 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/experimental-utils@^2.5.0":
-  version "2.34.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz"
-  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
+"@typescript-eslint/scope-manager@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
   dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.34.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^2.0.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+
+"@typescript-eslint/types@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/typescript-estree@2.34.0":
-  version "2.34.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz"
-  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
+"@typescript-eslint/typescript-estree@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
   dependencies:
-    debug "^4.1.1"
-    eslint-visitor-keys "^1.1.0"
-    glob "^7.1.6"
-    is-glob "^4.0.1"
-    lodash "^4.17.15"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/visitor-keys" "5.62.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@^5.10.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@types/json-schema" "^7.0.9"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.62.0"
+    "@typescript-eslint/types" "5.62.0"
+    "@typescript-eslint/typescript-estree" "5.62.0"
+    eslint-scope "^5.1.1"
+    semver "^7.3.7"
+
+"@typescript-eslint/visitor-keys@5.62.0":
+  version "5.62.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
+  dependencies:
+    "@typescript-eslint/types" "5.62.0"
+    eslint-visitor-keys "^3.3.0"
 
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
@@ -2943,10 +3046,10 @@ acorn-import-assertions@^1.9.0:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
   integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
 
-acorn-jsx@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz"
-  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn-walk@^7.1.1:
   version "7.2.0"
@@ -2958,12 +3061,12 @@ acorn-walk@^8.0.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.4, acorn@^8.8.2:
+acorn@^8.0.4, acorn@^8.8.2, acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
@@ -3027,17 +3130,7 @@ ajv-keywords@^5.0.0, ajv-keywords@^5.1.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0:
-  version "6.12.3"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz"
-  integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ajv@^6.10.2, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3057,11 +3150,6 @@ ajv@^8.0.0, ajv@^8.8.0, ajv@^8.9.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
 ansi-escapes@^4.2.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz"
@@ -3079,11 +3167,6 @@ ansi-regex@^2.0.0:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
   integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
 
-ansi-regex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz"
-  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
-
 ansi-regex@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz"
@@ -3099,7 +3182,7 @@ ansi-styles@^2.2.1:
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
   integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
@@ -3230,6 +3313,17 @@ array-includes@^3.1.1:
     es-abstract "^1.17.0"
     is-string "^1.0.5"
 
+array-includes@^3.1.6:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda"
+  integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    is-string "^1.0.7"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
@@ -3248,7 +3342,18 @@ array.prototype.find@^2.1.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.4"
 
-array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3:
+array.prototype.findlastindex@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
+  integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.2.1"
+
+array.prototype.flat@^1.2.1:
   version "1.2.4"
   resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz"
   integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
@@ -3257,14 +3362,49 @@ array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
-array.prototype.flatmap@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz"
-  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
+array.prototype.flat@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz#620eff7442503d66c799d95503f82b475745cefd"
+  integrity sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.2.1"
+
+arraybuffer.prototype.slice@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
+  integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    is-array-buffer "^3.0.2"
+    is-shared-array-buffer "^1.0.2"
 
 assign-symbols@^1.0.0:
   version "1.0.0"
@@ -3276,16 +3416,18 @@ ast-types-flow@^0.0.7:
   resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
   integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
 
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
 async@~1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/async/-/async-1.2.1.tgz"
   integrity sha1-pIFqF81f9RbfosdpikUzabl5DeA=
 
+asynciterator.prototype@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz#8c5df0514936cdd133604dfcc9d3fb93f09b2b62"
+  integrity sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==
+  dependencies:
+    has-symbols "^1.0.3"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
@@ -3534,6 +3676,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
+big-integer@^1.6.44:
+  version "1.6.51"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
+  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
@@ -3650,6 +3797,13 @@ bootstrap@^4.6.2:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
   integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
 
+bplist-parser@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
+  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
+  dependencies:
+    big-integer "^1.6.44"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3765,6 +3919,13 @@ buffer@^5.2.1:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
 
+bundle-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
+  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
+  dependencies:
+    run-applescript "^5.0.0"
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -4241,11 +4402,6 @@ console-polyfill@0.3.0:
   resolved "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz"
   integrity sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ==
 
-contains-path@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz"
-  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
-
 content-disposition@0.5.4, content-disposition@^0.5.2:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -4667,20 +4823,27 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
 decache@^3.0.5:
   version "3.1.0"
   resolved "https://registry.npmjs.org/decache/-/decache-3.1.0.tgz"
@@ -4839,6 +5002,24 @@ deepmerge@^4.3.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
+default-browser-id@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
+  integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
+  dependencies:
+    bplist-parser "^0.2.0"
+    untildify "^4.0.0"
+
+default-browser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
+  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+  dependencies:
+    bundle-name "^3.0.0"
+    default-browser-id "^3.0.0"
+    execa "^7.1.1"
+    titleize "^3.0.0"
+
 default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
@@ -4851,6 +5032,11 @@ define-lazy-prop@^2.0.0:
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
+define-lazy-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz"
@@ -4962,14 +5148,6 @@ dns-packet@^5.2.2:
   dependencies:
     "@leichtgewicht/ip-codec" "^2.0.1"
 
-doctrine@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz"
-  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
@@ -5179,11 +5357,6 @@ emoji-mart@^5.5.2:
   resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
   integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
 
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -5226,13 +5399,6 @@ enhanced-resolve@^5.15.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
-  dependencies:
-    ansi-colors "^4.1.1"
-
 entities@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz"
@@ -5256,7 +5422,7 @@ enzyme-shallow-equal@^1.0.0:
     has "^1.0.3"
     object-is "^1.1.2"
 
-error-ex@^1.2.0, error-ex@^1.3.1:
+error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -5322,6 +5488,51 @@ es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-abstract@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.1.tgz#8b4e5fc5cefd7f1660f0f8e1a52900dfbc9d9ccc"
+  integrity sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    arraybuffer.prototype.slice "^1.0.1"
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    es-set-tostringtag "^2.0.1"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.2.1"
+    get-symbol-description "^1.0.0"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    is-array-buffer "^3.0.2"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.10"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.5.0"
+    safe-array-concat "^1.0.0"
+    safe-regex-test "^1.0.0"
+    string.prototype.trim "^1.2.7"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    typed-array-buffer "^1.0.0"
+    typed-array-byte-length "^1.0.0"
+    typed-array-byte-offset "^1.0.0"
+    typed-array-length "^1.0.4"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.10"
+
 es-get-iterator@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
@@ -5337,11 +5548,47 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
+es-iterator-helpers@^1.0.12:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.14.tgz#19cd7903697d97e21198f3293b55e8985791c365"
+  integrity sha512-JgtVnwiuoRuzLvqelrvN3Xu7H9bu2ap/kQ2CrM62iidP8SKuD99rWU3CJy++s7IVL2qb/AjXPGR/E7i9ngd/Cw==
+  dependencies:
+    asynciterator.prototype "^1.0.0"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-set-tostringtag "^2.0.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    iterator.prototype "^1.1.0"
+    safe-array-concat "^1.0.0"
+
 es-module-lexer@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
   integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==
 
+es-set-tostringtag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
+  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  dependencies:
+    get-intrinsic "^1.1.3"
+    has "^1.0.3"
+    has-tostringtag "^1.0.0"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
@@ -5388,65 +5635,75 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^14.2.1:
-  version "14.2.1"
-  resolved "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz"
-  integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==
+eslint-config-airbnb-base@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236"
+  integrity sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==
   dependencies:
     confusing-browser-globals "^1.0.10"
     object.assign "^4.1.2"
-    object.entries "^1.1.2"
+    object.entries "^1.1.5"
+    semver "^6.3.0"
 
-eslint-config-airbnb@^18.2.1:
-  version "18.2.1"
-  resolved "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz"
-  integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg==
+eslint-config-airbnb@^19.0.4:
+  version "19.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz#84d4c3490ad70a0ffa571138ebcdea6ab085fdc3"
+  integrity sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==
   dependencies:
-    eslint-config-airbnb-base "^14.2.1"
+    eslint-config-airbnb-base "^15.0.0"
     object.assign "^4.1.2"
-    object.entries "^1.1.2"
+    object.entries "^1.1.5"
 
-eslint-import-resolver-node@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz"
-  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
+eslint-config-prettier@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f"
+  integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==
+
+eslint-import-resolver-node@^0.3.7:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
   dependencies:
-    debug "^2.6.9"
-    resolve "^1.13.1"
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
 
-eslint-module-utils@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz"
-  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
+eslint-module-utils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
+  integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
   dependencies:
-    debug "^2.6.9"
-    pkg-dir "^2.0.0"
+    debug "^3.2.7"
 
-eslint-plugin-import@2.22.1:
-  version "2.22.1"
-  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz"
-  integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
+eslint-plugin-import@2.28.1:
+  version "2.28.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4"
+  integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==
   dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flat "^1.2.3"
-    contains-path "^0.1.0"
-    debug "^2.6.9"
-    doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.4"
-    eslint-module-utils "^2.6.0"
+    array-includes "^3.1.6"
+    array.prototype.findlastindex "^1.2.2"
+    array.prototype.flat "^1.3.1"
+    array.prototype.flatmap "^1.3.1"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.7"
+    eslint-module-utils "^2.8.0"
     has "^1.0.3"
-    minimatch "^3.0.4"
-    object.values "^1.1.1"
-    read-pkg-up "^2.0.0"
-    resolve "^1.17.0"
-    tsconfig-paths "^3.9.0"
+    is-core-module "^2.13.0"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.6"
+    object.groupby "^1.0.0"
+    object.values "^1.1.6"
+    semver "^6.3.1"
+    tsconfig-paths "^3.14.2"
 
-eslint-plugin-jest@^23.13.2:
-  version "23.20.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-23.20.0.tgz"
-  integrity sha512-+6BGQt85OREevBDWCvhqj1yYA4+BFK4XnRZSGJionuEYmcglMZYLNNBBemwzbqUAckURaHdJSBcjHPyrtypZOw==
+eslint-plugin-jest@^27.2.3:
+  version "27.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.2.3.tgz#6f8a4bb2ca82c0c5d481d1b3be256ab001f5a3ec"
+  integrity sha512-sRLlSCpICzWuje66Gl9zvdF6mwD5X86I4u55hJyFBsxYOsBCmT5+kSUjf+fkFWVMMgpzNEupjW8WzUqi83hJAQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "^2.5.0"
+    "@typescript-eslint/utils" "^5.10.0"
 
 eslint-plugin-jsx-a11y@^6.4.1:
   version "6.4.1"
@@ -5474,34 +5731,54 @@ eslint-plugin-jsx@0.1.0:
     html-tags "1"
     svg-tags "1"
 
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz"
-  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+eslint-plugin-prettier@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
+  integrity sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.5"
+
+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
 eslint-plugin-react@3.4.2:
   version "3.4.2"
   resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-3.4.2.tgz"
   integrity sha1-nm74qAVPisO4e5cjbnuEnlg13Gw=
 
-eslint-plugin-react@^7.21.5:
-  version "7.21.5"
-  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz"
-  integrity sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==
+eslint-plugin-react@^7.33.2:
+  version "7.33.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
+  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
   dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flatmap "^1.2.3"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    array.prototype.tosorted "^1.1.1"
     doctrine "^2.1.0"
-    has "^1.0.3"
+    es-iterator-helpers "^1.0.12"
+    estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
-    object.entries "^1.1.2"
-    object.fromentries "^2.0.2"
-    object.values "^1.1.1"
-    prop-types "^15.7.2"
-    resolve "^1.18.1"
-    string.prototype.matchall "^4.0.2"
+    minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    object.hasown "^1.1.2"
+    object.values "^1.1.6"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.4"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.8"
 
-eslint-scope@5.1.1, eslint-scope@^5.0.0, eslint-scope@^5.1.1:
+eslint-plugin-sort-destructure-keys@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-sort-destructure-keys/-/eslint-plugin-sort-destructure-keys-1.5.0.tgz#dc45ff119b6886d4e72d3e0ff8a528af83b89388"
+  integrity sha512-xGLyqHtbFXZNXQSvAiQ4ISBYokrbUywEhmaA50fKtSKgceCv5y3zjoNuZwcnajdM6q29Nxj+oXC9KcqfMsAPrg==
+  dependencies:
+    natural-compare-lite "^1.4.0"
+
+eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -5509,89 +5786,85 @@ eslint-scope@5.1.1, eslint-scope@^5.0.0, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-utils@^2.0.0, eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
-eslint-visitor-keys@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz"
-  integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
 
 eslint-visitor-keys@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint@^7.14.0:
-  version "7.14.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-7.14.0.tgz"
-  integrity sha512-5YubdnPXrlrYAFCKybPuHIAH++PINe1pmKNc5wQRB9HSbqIK1ywAnntE3Wwua4giKu0bjligf1gLF6qxMGOYRA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@eslint/eslintrc" "^0.2.1"
-    ajv "^6.10.0"
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@^8.48.0:
+  version "8.48.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.48.0.tgz#bf9998ba520063907ba7bfe4c480dc8be03c2155"
+  integrity sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.2"
+    "@eslint/js" "8.48.0"
+    "@humanwhocodes/config-array" "^0.11.10"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
-    debug "^4.0.1"
+    debug "^4.3.2"
     doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.0"
-    esquery "^1.2.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-yaml "^3.13.1"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
-    lodash "^4.17.19"
-    minimatch "^3.0.4"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^5.2.3"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^7.3.0:
-  version "7.3.0"
-  resolved "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz"
-  integrity sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.3.0"
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz"
-  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
+esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -5612,7 +5885,7 @@ estraverse@^5.1.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz"
   integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
 
-estraverse@^5.2.0:
+estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
@@ -5714,6 +5987,21 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+execa@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
+  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^4.3.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
 executable@^4.1.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz"
@@ -5859,6 +6147,11 @@ fast-diff@1.2.0:
   resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-diff@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
+  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
+
 fast-equals@^2.0.0:
   version "2.0.4"
   resolved "https://registry.npmjs.org/fast-equals/-/fast-equals-2.0.4.tgz"
@@ -5876,7 +6169,7 @@ fast-glob@^3.0.3:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
-fast-glob@^3.2.11, fast-glob@^3.3.0:
+fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -5942,12 +6235,12 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
-    flat-cache "^2.0.1"
+    flat-cache "^3.0.4"
 
 file-loader@^6.2.0:
   version "6.2.0"
@@ -6049,13 +6342,6 @@ find-root@^1.1.0:
   resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
-find-up@^2.0.0, find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
@@ -6064,6 +6350,14 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
 find-up@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-6.3.0.tgz#2abab3d3280b2dc7ac10199ef324c4e002c8c790"
@@ -6086,19 +6380,19 @@ find@^0.2.4:
   dependencies:
     traverse-chain "~0.1.0"
 
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+flat-cache@^3.0.4:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.1.0.tgz#0e54ab4a1a60fe87e2946b6b00657f1c99e1af3f"
+  integrity sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==
   dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
+    flatted "^3.2.7"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
 
-flatted@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz"
-  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+flatted@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
 fn-name@~3.0.0:
   version "3.0.0"
@@ -6234,12 +6528,17 @@ function.prototype.name@^1.1.2:
     es-abstract "^1.18.0-next.1"
     functions-have-names "^1.2.1"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-
-functions-have-names@^1.2.1:
+function.prototype.name@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+functions-have-names@^1.2.1:
   version "1.2.2"
   resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz"
   integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==
@@ -6322,11 +6621,19 @@ get-stream@^5.0.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0:
+get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz"
@@ -6349,7 +6656,7 @@ gifsicle@^5.0.0:
     bin-wrapper "^4.0.0"
     execa "^5.0.0"
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.1.0, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz"
   integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
@@ -6363,7 +6670,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -6375,7 +6682,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.6"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -6412,12 +6719,19 @@ globals@^11.1.0:
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+globals@^13.19.0:
+  version "13.21.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.21.0.tgz#163aae12f34ef502f5153cfbdd3600f36c63c571"
+  integrity sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==
   dependencies:
-    type-fest "^0.8.1"
+    type-fest "^0.20.2"
+
+globalthis@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
 
 globby@^10.0.0:
   version "10.0.2"
@@ -6433,6 +6747,18 @@ globby@^10.0.0:
     merge2 "^1.2.3"
     slash "^3.0.0"
 
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 globby@^13.1.1:
   version "13.2.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
@@ -6509,6 +6835,11 @@ graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   resolved "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz"
   integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
 
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz"
@@ -6538,7 +6869,7 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-has-bigints@^1.0.1:
+has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
@@ -6783,6 +7114,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+human-signals@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
+  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
+
 humps@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz"
@@ -6840,17 +7176,12 @@ ieee754@^1.1.4:
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
 ignore@^5.1.1:
   version "5.1.8"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
-ignore@^5.2.4:
+ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -6950,14 +7281,6 @@ immutable@^4.0.0:
   resolved "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz"
   integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
 
-import-fresh@^3.0.0:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz"
-  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
 import-fresh@^3.2.1:
   version "3.2.2"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.2.tgz"
@@ -7017,16 +7340,7 @@ ini@^1.3.4:
   resolved "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
-internal-slot@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.2.tgz"
-  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    has "^1.0.3"
-    side-channel "^1.0.2"
-
-internal-slot@^1.0.4:
+internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
   integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
@@ -7124,6 +7438,13 @@ is-arrayish@^0.2.1:
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -7151,7 +7472,7 @@ is-buffer@^1.1.4, is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-callable@^1.1.3:
+is-callable@^1.1.3, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
@@ -7260,6 +7581,11 @@ is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
+is-docker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
@@ -7277,10 +7603,12 @@ is-extglob@^2.1.1:
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
 
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
@@ -7292,6 +7620,13 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
+is-generator-function@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-gif@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz"
@@ -7318,6 +7653,13 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-inside-container@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+  dependencies:
+    is-docker "^3.0.0"
+
 is-jpg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz"
@@ -7348,6 +7690,11 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
 is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@@ -7372,6 +7719,11 @@ is-object@^1.0.1:
   resolved "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz"
   integrity sha1-iVJojF7C/9awPsyF52ngKQMINHA=
 
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
 is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
@@ -7448,6 +7800,11 @@ is-stream@^2.0.0:
   resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
 is-string@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz"
@@ -7486,7 +7843,7 @@ is-touch-device@^1.0.1:
   resolved "https://registry.npmjs.org/is-touch-device/-/is-touch-device-1.0.1.tgz"
   integrity sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw==
 
-is-typed-array@^1.1.10:
+is-typed-array@^1.1.10, is-typed-array@^1.1.9:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
   integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
@@ -7503,6 +7860,13 @@ is-weakmap@^2.0.1:
   resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
   integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
 
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-weakset@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
@@ -7538,7 +7902,7 @@ is_js@^0.9.0:
   resolved "https://registry.npmjs.org/is_js/-/is_js-0.9.0.tgz"
   integrity sha1-CrlFQFArp6+iTIVqqYVWFmnpxS0=
 
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
+isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
@@ -7630,6 +7994,16 @@ isurl@^1.0.0-alpha5:
     has-to-string-tag-x "^1.2.0"
     is-object "^1.0.1"
 
+iterator.prototype@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.1.tgz#ab5b790e23ec00658f5974e032a2b05188bd3a5c"
+  integrity sha512-9E+nePc8C9cnQldmNl6bgpTY6zI4OPRZd97fhJ/iVZ1GifIUDVV5F6x1nEDqpe8KaMEZGT4xgrwKQDxXnjOIZQ==
+  dependencies:
+    define-properties "^1.2.0"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.3"
+
 jest-changed-files@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz"
@@ -8156,6 +8530,11 @@ json-buffer@3.0.0:
   resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz"
   integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz"
@@ -8193,6 +8572,13 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.2:
   version "2.1.3"
   resolved "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz"
@@ -8225,6 +8611,13 @@ keyv@3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
+keyv@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.3.tgz#00873d2b046df737963157bd04f294ca818c9c25"
+  integrity sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==
+  dependencies:
+    json-buffer "3.0.1"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
@@ -8305,16 +8698,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-load-json-file@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz"
-  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^2.2.0"
-    pify "^2.0.0"
-    strip-bom "^3.0.0"
-
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -8338,14 +8721,6 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
@@ -8353,6 +8728,13 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
 locate-path@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-7.2.0.tgz#69cb1779bd90b35ab1e771e1f2f89a202c2a8a8a"
@@ -8390,6 +8772,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
@@ -8647,6 +9034,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
 mimic-response@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz"
@@ -8669,7 +9061,7 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimatch@^3.0.4, minimatch@^3.1.1:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -8681,6 +9073,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz"
@@ -8746,7 +9143,7 @@ ms@2.1.2:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3:
+ms@2.1.3, ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -8781,6 +9178,11 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
@@ -8850,7 +9252,7 @@ node-releases@^2.0.8:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
   integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
-normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
+normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -8903,6 +9305,13 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
+  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+  dependencies:
+    path-key "^4.0.0"
+
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz"
@@ -8934,6 +9343,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-inspect@^1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+
 object-inspect@^1.7.0, object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz"
@@ -9019,15 +9433,41 @@ object.entries@^1.1.2:
     es-abstract "^1.17.5"
     has "^1.0.3"
 
-object.fromentries@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.2.tgz"
-  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
+object.entries@^1.1.5, object.entries@^1.1.6:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
+  integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
+object.fromentries@^2.0.6:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
+  integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
+object.groupby@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
+  integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+
+object.hasown@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
+  integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
+  dependencies:
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 object.pick@^1.3.0:
   version "1.3.0"
@@ -9046,7 +9486,7 @@ object.values@^1.0.4:
     es-abstract "^1.18.0-next.1"
     has "^1.0.3"
 
-object.values@^1.1.0, object.values@^1.1.1:
+object.values@^1.1.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz"
   integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
@@ -9056,6 +9496,15 @@ object.values@^1.1.0, object.values@^1.1.1:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.values@^1.1.6:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a"
+  integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -9094,6 +9543,13 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
 open@^8.0.9:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
@@ -9103,6 +9559,16 @@ open@^8.0.9:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+open@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
+  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
+  dependencies:
+    default-browser "^4.0.0"
+    define-lazy-prop "^3.0.0"
+    is-inside-container "^1.0.0"
+    is-wsl "^2.2.0"
+
 opener@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -9120,17 +9586,17 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
   dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
 
 optipng-bin@^7.0.0:
   version "7.0.1"
@@ -9198,13 +9664,6 @@ p-is-promise@^1.1.0:
   resolved "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz"
   integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=
 
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
@@ -9212,6 +9671,13 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-limit@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
@@ -9219,13 +9685,6 @@ p-limit@^4.0.0:
   dependencies:
     yocto-queue "^1.0.0"
 
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
@@ -9233,6 +9692,13 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
 p-locate@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-6.0.0.tgz#3da9a49d4934b901089dca3302fa65dc5a05c04f"
@@ -9279,11 +9745,6 @@ p-timeout@^2.0.1:
   dependencies:
     p-finally "^1.0.0"
 
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
@@ -9313,13 +9774,6 @@ parse-entities@^1.1.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-parse-json@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz"
-  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
-  dependencies:
-    error-ex "^1.2.0"
-
 parse-json@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz"
@@ -9350,11 +9804,6 @@ path-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
 
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -9380,6 +9829,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
@@ -9390,13 +9844,6 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
-path-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz"
-  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
-  dependencies:
-    pify "^2.0.0"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
@@ -9442,7 +9889,7 @@ picomatch@^2.2.3, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
+pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
@@ -9481,13 +9928,6 @@ pirates@^4.0.4:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz"
-  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
-  dependencies:
-    find-up "^2.1.0"
-
 pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
@@ -9835,6 +10275,18 @@ prepend-http@^2.0.0:
   resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
+
 pretty-format@^25.2.1, pretty-format@^25.5.0:
   version "25.5.0"
   resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz"
@@ -9874,11 +10326,6 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-progress@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
 prompts@^2.0.1:
   version "2.3.2"
   resolved "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz"
@@ -10444,14 +10891,6 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-read-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz"
-  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^2.0.0"
-
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz"
@@ -10461,15 +10900,6 @@ read-pkg-up@^7.0.1:
     read-pkg "^5.2.0"
     type-fest "^0.8.1"
 
-read-pkg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz"
-  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
-  dependencies:
-    load-json-file "^2.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^2.0.0"
-
 read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz"
@@ -10596,6 +11026,18 @@ redux@^4.1.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+reflect.getprototypeof@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
+  integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz"
@@ -10660,7 +11102,7 @@ regex-parser@^2.2.11:
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
   integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.2.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -10677,11 +11119,6 @@ regexp.prototype.flags@^1.5.0:
     define-properties "^1.2.0"
     functions-have-names "^1.2.3"
 
-regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
-
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz"
@@ -10841,7 +11278,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.3.2:
+resolve@^1.10.0, resolve@^1.3.2:
   version "1.17.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -10865,7 +11302,7 @@ resolve@^1.18.1:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-resolve@^1.19.0:
+resolve@^1.19.0, resolve@^1.22.4:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
   integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@@ -10874,6 +11311,15 @@ resolve@^1.19.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^2.0.0-next.4:
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 responselike@1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz"
@@ -10903,13 +11349,6 @@ rimraf@2, rimraf@^2.5.4:
   dependencies:
     glob "^7.1.3"
 
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz"
-  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
@@ -10943,11 +11382,28 @@ rsvp@^4.8.4:
   resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+run-applescript@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
+  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
+  dependencies:
+    execa "^5.0.0"
+
 run-parallel@^1.1.9:
   version "1.1.9"
   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz"
   integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
 
+safe-array-concat@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
+  integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
@@ -10958,6 +11414,15 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0,
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz"
@@ -11121,7 +11586,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.2.1, semver@^7.3.2, semver@^7.3.8:
+semver@^7.3.2, semver@^7.3.7, semver@^7.3.8:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -11255,14 +11720,6 @@ shellwords@^0.1.1:
   resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
-side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz"
-  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
-  dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -11311,15 +11768,6 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
@@ -11545,15 +11993,6 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-string-width@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz"
@@ -11563,17 +12002,28 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.matchall@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz"
-  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
+string.prototype.matchall@^4.0.8:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.9.tgz#148779de0f75d36b13b15885fec5cadde994520d"
+  integrity sha512-6i5hL3MqG/K2G43mWXWgP+qizFW/QH/7kCNN13JrJS5q48FN5IKksLDscexKP3dnmB6cdm9jlNgAsWNLpSykmA==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0"
-    has-symbols "^1.0.1"
-    internal-slot "^1.0.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.5"
+    regexp.prototype.flags "^1.5.0"
+    side-channel "^1.0.4"
+
+string.prototype.trim@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd"
+  integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
 
 string.prototype.trimend@^1.0.1:
   version "1.0.1"
@@ -11583,6 +12033,15 @@ string.prototype.trimend@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+string.prototype.trimend@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e"
+  integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz"
@@ -11591,6 +12050,15 @@ string.prototype.trimstart@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
+string.prototype.trimstart@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298"
+  integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -11612,13 +12080,6 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
-
 strip-ansi@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz"
@@ -11626,6 +12087,13 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
@@ -11653,6 +12121,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-indent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz"
@@ -11660,7 +12133,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -11785,15 +12258,13 @@ synchronous-promise@^2.0.13:
   resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.npmjs.org/table/-/table-5.4.6.tgz"
-  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+synckit@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
+  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
   dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.5.0"
 
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
@@ -11929,6 +12400,11 @@ tiny-warning@^1.0.2:
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+titleize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
+  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+
 tmpl@1.0.5, tmpl@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -12048,14 +12524,14 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-tsconfig-paths@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz"
-  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+tsconfig-paths@^3.14.2:
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
+  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.0"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
     strip-bom "^3.0.0"
 
 tslib@^1.10.0, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
@@ -12068,10 +12544,15 @@ tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
-tsutils@^3.17.1:
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
-  integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==
+tslib@^2.5.0, tslib@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
   dependencies:
     tslib "^1.8.1"
 
@@ -12106,6 +12587,11 @@ type-fest@^0.11.0:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz"
   integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
 
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz"
@@ -12124,6 +12610,45 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed-array-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
+  integrity sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+    is-typed-array "^1.1.10"
+
+typed-array-byte-length@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz#d787a24a995711611fb2b87a4052799517b230d0"
+  integrity sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    has-proto "^1.0.1"
+    is-typed-array "^1.1.10"
+
+typed-array-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz#cbbe89b51fdef9cd6aaf07ad4707340abbc4ea0b"
+  integrity sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==
+  dependencies:
+    available-typed-arrays "^1.0.5"
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    has-proto "^1.0.1"
+    is-typed-array "^1.1.10"
+
+typed-array-length@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
+  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    is-typed-array "^1.1.9"
+
 typed-styles@^0.0.7:
   version "0.0.7"
   resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz"
@@ -12136,6 +12661,16 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
 unbzip2-stream@^1.0.9:
   version "1.4.3"
   resolved "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz"
@@ -12294,6 +12829,11 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
 update-browserslist-db@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
@@ -12403,11 +12943,6 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v8-compile-cache@^2.0.3:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz"
-  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
-
 v8-to-istanbul@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-7.0.0.tgz"
@@ -12691,6 +13226,24 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
 which-collection@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
@@ -12706,7 +13259,7 @@ which-module@^2.0.0:
   resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.11, which-typed-array@^1.1.9:
+which-typed-array@^1.1.10, which-typed-array@^1.1.11, which-typed-array@^1.1.9:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a"
   integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==
@@ -12736,7 +13289,7 @@ wildcard@^2.0.0:
   resolved "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz"
   integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
 
-word-wrap@^1.2.3, word-wrap@~1.2.3:
+word-wrap@~1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
   integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
@@ -12773,13 +13326,6 @@ write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/write/-/write-1.0.3.tgz"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
 ws@^7.3.1:
   version "7.5.9"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
@@ -12878,6 +13424,11 @@ yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
 yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"