diff --git a/@types/formatjs.d.ts b/@types/formatjs.d.ts
new file mode 100644
index 0000000..273fbd7
--- /dev/null
+++ b/@types/formatjs.d.ts
@@ -0,0 +1,2 @@
+declare module '@formatjs/intl-pluralrules/polyfill' {}
+declare module '@formatjs/intl-relativetimeformat/polyfill' {}
diff --git a/@types/redux-localstorage.d.ts b/@types/redux-localstorage.d.ts
new file mode 100644
index 0000000..07130b3
--- /dev/null
+++ b/@types/redux-localstorage.d.ts
@@ -0,0 +1,25 @@
+// https://github.com/elgerlambert/redux-localstorage/issues/78#issuecomment-323609784
+
+// import * as Redux from 'redux';
+
+declare module 'redux-localstorage' {
+  export interface ConfigRS {
+    key: string;
+    merge?: any;
+    slicer?: any;
+    serialize?: (
+      value: any,
+      replacer?: (key: string, value: any) => any,
+      space?: string | number,
+    ) => string;
+    deserialize?: (
+      text: string,
+      reviver?: (key: any, value: any) => any,
+    ) => any;
+  }
+
+  export default function persistState(
+    paths: string | string[],
+    config: ConfigRS,
+  ): () => any;
+}
diff --git a/@types/unexpected.d.ts b/@types/unexpected.d.ts
new file mode 100644
index 0000000..491d67c
--- /dev/null
+++ b/@types/unexpected.d.ts
@@ -0,0 +1,86 @@
+declare module 'unexpected' {
+  namespace unexpected {
+    interface EnchantedPromise<T> extends Promise<T> {
+      and<A extends Array<unknown> = []>(
+        assertionName: string,
+        subject: unknown,
+        ...args: A
+      ): EnchantedPromise<any>;
+    }
+
+    interface Expect {
+      /**
+       * @see http://unexpected.js.org/api/expect/
+       */
+      <A extends Array<unknown> = []>(
+        subject: unknown,
+        assertionName: string,
+        ...args: A
+      ): EnchantedPromise<any>;
+
+      it<A extends Array<unknown> = []>(
+        assertionName: string,
+        subject?: unknown,
+        ...args: A
+      ): EnchantedPromise<any>;
+
+      /**
+       * @see http://unexpected.js.org/api/clone/
+       */
+      clone(): this;
+
+      /**
+       * @see http://unexpected.js.org/api/addAssertion/
+       */
+      addAssertion<T, A extends Array<unknown> = []>(
+        pattern: string,
+        handler: (expect: Expect, subject: T, ...args: A) => void,
+      ): this;
+
+      /**
+       * @see http://unexpected.js.org/api/addType/
+       */
+      addType<T>(typeDefinition: unexpected.TypeDefinition<T>): this;
+
+      /**
+       * @see http://unexpected.js.org/api/fail/
+       */
+      fail<A extends Array<unknown> = []>(format: string, ...args: A): void;
+      fail<E extends Error>(error: E): void;
+
+      /**
+       * @see http://unexpected.js.org/api/freeze/
+       */
+      freeze(): this;
+
+      /**
+       * @see http://unexpected.js.org/api/use/
+       */
+      use(plugin: unexpected.PluginDefinition): this;
+    }
+
+    interface PluginDefinition {
+      name?: string;
+      version?: string;
+      dependencies?: Array<string>;
+      installInto(expect: Expect): void;
+    }
+
+    interface TypeDefinition<T> {
+      name: string;
+      identify(value: unknown): value is T;
+      base?: string;
+      equal?(a: T, b: T, equal: (a: unknown, b: unknown) => boolean): boolean;
+      inspect?(
+        value: T,
+        depth: number,
+        output: any,
+        inspect: (value: unknown, depth: number) => any,
+      ): void;
+    }
+  }
+
+  const unexpected: unexpected.Expect;
+
+  export = unexpected;
+}
diff --git a/@types/webpack-loaders.d.ts b/@types/webpack-loaders.d.ts
index 2948cb9..b198f9a 100644
--- a/@types/webpack-loaders.d.ts
+++ b/@types/webpack-loaders.d.ts
@@ -26,9 +26,7 @@ declare module '*.jpg' {
 declare module '*.intl.json' {
   import { MessageDescriptor } from 'react-intl';
 
-  const descriptor: {
-    [key: string]: MessageDescriptor;
-  };
+  const descriptor: Record<string, MessageDescriptor>;
 
   export = descriptor;
 }
diff --git a/package.json b/package.json
index e6960cc..62c2c66 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
   "license": "Apache-2.0",
   "repository": "https://github.com/elyby/accounts-frontend",
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=10.0.0",
+    "yarn": "1.19.1"
   },
   "workspaces": [
     "packages/*",
@@ -124,6 +125,7 @@
     "@storybook/addons": "^5.3.4",
     "@storybook/react": "^5.3.4",
     "@types/jest": "^24.9.0",
+    "@types/sinon": "^7.5.1",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
     "babel-loader": "^8.0.0",
diff --git a/packages/app/components/accounts/AccountSwitcher.tsx b/packages/app/components/accounts/AccountSwitcher.tsx
index a30e056..a5405ce 100644
--- a/packages/app/components/accounts/AccountSwitcher.tsx
+++ b/packages/app/components/accounts/AccountSwitcher.tsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import { SKIN_DARK, COLOR_WHITE, Skin } from 'app/components/ui';
 import { Button } from 'app/components/ui/form';
 import { authenticate, revoke } from 'app/components/accounts/actions';
diff --git a/packages/app/components/accounts/actions.test.ts b/packages/app/components/accounts/actions.test.ts
index 11a16e7..185f62a 100644
--- a/packages/app/components/accounts/actions.test.ts
+++ b/packages/app/components/accounts/actions.test.ts
@@ -12,13 +12,10 @@ import {
 } from 'app/components/accounts/actions';
 import {
   add,
-  ADD,
   activate,
-  ACTIVATE,
   remove,
   reset,
 } from 'app/components/accounts/actions/pure-actions';
-import { SET_LOCALE } from 'app/components/i18n/actions';
 import { updateUser, setUser } from 'app/components/user/actions';
 import { setLogin, setAccountSwitcher } from 'app/components/auth/actions';
 import { Dispatch, RootState } from 'app/reducers';
@@ -124,20 +121,20 @@ describe('components/accounts/actions', () => {
         ]),
       ));
 
-    it(`dispatches ${ADD} action`, () =>
+    it(`dispatches accounts:add action`, () =>
       authenticate(account)(dispatch, getState, undefined).then(() =>
         expect(dispatch, 'to have a call satisfying', [add(account)]),
       ));
 
-    it(`dispatches ${ACTIVATE} action`, () =>
+    it(`dispatches accounts:activate action`, () =>
       authenticate(account)(dispatch, getState, undefined).then(() =>
         expect(dispatch, 'to have a call satisfying', [activate(account)]),
       ));
 
-    it(`dispatches ${SET_LOCALE} action`, () =>
+    it(`dispatches i18n:setLocale action`, () =>
       authenticate(account)(dispatch, getState, undefined).then(() =>
         expect(dispatch, 'to have a call satisfying', [
-          { type: SET_LOCALE, payload: { locale: 'be' } },
+          { type: 'i18n:setLocale', payload: { locale: 'be' } },
         ]),
       ));
 
@@ -479,7 +476,7 @@ describe('components/accounts/actions', () => {
       const key = `stranger${foreignAccount.id}`;
 
       beforeEach(() => {
-        sessionStorage.setItem(key, 1);
+        sessionStorage.setItem(key, '1');
 
         logoutStrangers()(dispatch, getState, undefined);
       });
diff --git a/packages/app/components/accounts/actions.ts b/packages/app/components/accounts/actions.ts
index 1c2c5d1..5962d58 100644
--- a/packages/app/components/accounts/actions.ts
+++ b/packages/app/components/accounts/actions.ts
@@ -90,7 +90,7 @@ export function authenticate(
 
       if (!newRefreshToken) {
         // mark user as stranger (user does not want us to remember his account)
-        sessionStorage.setItem(`stranger${newAccount.id}`, 1);
+        sessionStorage.setItem(`stranger${newAccount.id}`, '1');
       }
 
       if (auth && auth.oauth && auth.oauth.clientId) {
diff --git a/packages/app/components/accounts/actions/pure-actions.ts b/packages/app/components/accounts/actions/pure-actions.ts
index 3859f5c..c65d464 100644
--- a/packages/app/components/accounts/actions/pure-actions.ts
+++ b/packages/app/components/accounts/actions/pure-actions.ts
@@ -1,78 +1,67 @@
-import {
-  Account,
-  AddAction,
-  RemoveAction,
-  ActivateAction,
-  UpdateTokenAction,
-  ResetAction,
-} from '../reducer';
+import { Action as ReduxAction } from 'redux';
+import { Account } from 'app/components/accounts/reducer';
+
+interface AddAction extends ReduxAction {
+  type: 'accounts:add';
+  payload: Account;
+}
 
-export const ADD = 'accounts:add';
-/**
- * @private
- *
- * @param {Account} account
- *
- * @returns {object} - action definition
- */
 export function add(account: Account): AddAction {
   return {
-    type: ADD,
+    type: 'accounts:add',
     payload: account,
   };
 }
 
-export const REMOVE = 'accounts:remove';
-/**
- * @private
- *
- * @param {Account} account
- *
- * @returns {object} - action definition
- */
+interface RemoveAction extends ReduxAction {
+  type: 'accounts:remove';
+  payload: Account;
+}
+
 export function remove(account: Account): RemoveAction {
   return {
-    type: REMOVE,
+    type: 'accounts:remove',
     payload: account,
   };
 }
 
-export const ACTIVATE = 'accounts:activate';
-/**
- * @private
- *
- * @param {Account} account
- *
- * @returns {object} - action definition
- */
+interface ActivateAction extends ReduxAction {
+  type: 'accounts:activate';
+  payload: Account;
+}
+
 export function activate(account: Account): ActivateAction {
   return {
-    type: ACTIVATE,
+    type: 'accounts:activate',
     payload: account,
   };
 }
 
-export const RESET = 'accounts:reset';
-/**
- * @private
- *
- * @returns {object} - action definition
- */
+interface ResetAction extends ReduxAction {
+  type: 'accounts:reset';
+}
+
 export function reset(): ResetAction {
   return {
-    type: RESET,
+    type: 'accounts:reset',
   };
 }
 
-export const UPDATE_TOKEN = 'accounts:updateToken';
-/**
- * @param {string} token
- *
- * @returns {object} - action definition
- */
+interface UpdateTokenAction extends ReduxAction {
+  type: 'accounts:updateToken';
+  payload: string;
+}
+
 export function updateToken(token: string): UpdateTokenAction {
   return {
-    type: UPDATE_TOKEN,
+    type: 'accounts:updateToken',
     payload: token,
   };
 }
+
+export type Action =
+  | AddAction
+  | RemoveAction
+  | ActivateAction
+  | ResetAction
+  | UpdateTokenAction;
diff --git a/packages/app/components/accounts/reducer.test.ts b/packages/app/components/accounts/reducer.test.ts
index c4f5fa9..4ec1c47 100644
--- a/packages/app/components/accounts/reducer.test.ts
+++ b/packages/app/components/accounts/reducer.test.ts
@@ -1,17 +1,8 @@
 import expect from 'app/test/unexpected';
 
 import { updateToken } from './actions';
-import {
-  add,
-  remove,
-  activate,
-  reset,
-  ADD,
-  REMOVE,
-  ACTIVATE,
-  UPDATE_TOKEN,
-  RESET,
-} from './actions/pure-actions';
+import { add, remove, activate, reset } from './actions/pure-actions';
+import { AccountsState } from './index';
 import accounts, { Account } from './reducer';
 
 const account: Account = {
@@ -22,7 +13,7 @@ const account: Account = {
 } as Account;
 
 describe('Accounts reducer', () => {
-  let initial;
+  let initial: AccountsState;
 
   beforeEach(() => {
     initial = accounts(undefined, {} as any);
@@ -39,7 +30,7 @@ describe('Accounts reducer', () => {
       state: 'foo',
     }));
 
-  describe(ACTIVATE, () => {
+  describe('accounts:activate', () => {
     it('sets active account', () => {
       expect(accounts(initial, activate(account)), 'to satisfy', {
         active: account.id,
@@ -47,7 +38,7 @@ describe('Accounts reducer', () => {
     });
   });
 
-  describe(ADD, () => {
+  describe('accounts:add', () => {
     it('adds an account', () =>
       expect(accounts(initial, add(account)), 'to satisfy', {
         available: [account],
@@ -106,7 +97,7 @@ describe('Accounts reducer', () => {
     });
   });
 
-  describe(REMOVE, () => {
+  describe('accounts:remove', () => {
     it('should remove an account', () =>
       expect(
         accounts({ ...initial, available: [account] }, remove(account)),
@@ -128,7 +119,7 @@ describe('Accounts reducer', () => {
     });
   });
 
-  describe(RESET, () => {
+  describe('actions:reset', () => {
     it('should reset accounts state', () =>
       expect(
         accounts({ ...initial, available: [account] }, reset()),
@@ -137,7 +128,7 @@ describe('Accounts reducer', () => {
       ));
   });
 
-  describe(UPDATE_TOKEN, () => {
+  describe('accounts:updateToken', () => {
     it('should update token', () => {
       const newToken = 'newToken';
 
diff --git a/packages/app/components/accounts/reducer.ts b/packages/app/components/accounts/reducer.ts
index c18bd16..389f79e 100644
--- a/packages/app/components/accounts/reducer.ts
+++ b/packages/app/components/accounts/reducer.ts
@@ -1,3 +1,5 @@
+import { Action } from './actions/pure-actions';
+
 export type Account = {
   id: number;
   username: string;
@@ -8,25 +10,9 @@ export type Account = {
 
 export type State = {
   active: number | null;
-  available: Account[];
+  available: Array<Account>;
 };
 
-export type AddAction = { type: 'accounts:add'; payload: Account };
-export type RemoveAction = { type: 'accounts:remove'; payload: Account };
-export type ActivateAction = { type: 'accounts:activate'; payload: Account };
-export type UpdateTokenAction = {
-  type: 'accounts:updateToken';
-  payload: string;
-};
-export type ResetAction = { type: 'accounts:reset' };
-
-type Action =
-  | AddAction
-  | RemoveAction
-  | ActivateAction
-  | UpdateTokenAction
-  | ResetAction;
-
 export function getActiveAccount(state: { accounts: State }): Account | null {
   const accountId = state.accounts.active;
 
diff --git a/packages/app/components/auth/BaseAuthBody.tsx b/packages/app/components/auth/BaseAuthBody.tsx
index 07228ee..7692663 100644
--- a/packages/app/components/auth/BaseAuthBody.tsx
+++ b/packages/app/components/auth/BaseAuthBody.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
 import AuthError from 'app/components/auth/authError/AuthError';
 import { FormModel } from 'app/components/ui/form';
-import { RouteComponentProps } from 'react-router-dom';
 
 import Context, { AuthContext } from './Context';
 
@@ -11,7 +12,7 @@ import Context, { AuthContext } from './Context';
 
 class BaseAuthBody extends React.Component<
   // TODO: this may be converted to generic type RouteComponentProps<T>
-  RouteComponentProps<{ [key: string]: any }>
+  RouteComponentProps<Record<string, any>>
 > {
   static contextType = Context;
   /* TODO: use declare */ context: React.ContextType<typeof Context>;
@@ -32,10 +33,14 @@ class BaseAuthBody extends React.Component<
     this.prevErrors = this.context.auth.error;
   }
 
-  renderErrors() {
+  renderErrors(): ReactNode {
     const error = this.form.getFirstError();
 
-    return error && <AuthError error={error} onClose={this.onClearErrors} />;
+    if (error === null) {
+      return null;
+    }
+
+    return <AuthError error={error} onClose={this.onClearErrors} />;
   }
 
   onFormSubmit() {
diff --git a/packages/app/components/auth/PanelTransition.tsx b/packages/app/components/auth/PanelTransition.tsx
index 5e1a88e..bd2fddb 100644
--- a/packages/app/components/auth/PanelTransition.tsx
+++ b/packages/app/components/auth/PanelTransition.tsx
@@ -1,8 +1,15 @@
-import React from 'react';
+import React, { CSSProperties, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { AccountsState } from 'app/components/accounts';
 import { User } from 'app/components/user';
 import { connect } from 'react-redux';
-import { TransitionMotion, spring } from 'react-motion';
+import {
+  TransitionMotion,
+  spring,
+  PlainStyle,
+  Style,
+  TransitionStyle,
+  TransitionPlainStyle,
+} from 'react-motion';
 import {
   Panel,
   PanelBody,
@@ -44,7 +51,7 @@ type PanelId = string;
  * - Panel index defines the direction of X transition of both panels
  * (e.g. the panel with lower index will slide from left side, and with greater from right side)
  */
-const contexts: Array<PanelId[]> = [
+const contexts: Array<Array<PanelId>> = [
   ['login', 'password', 'forgotPassword', 'mfa', 'recoverPassword'],
   ['register', 'activation', 'resendActivation'],
   ['acceptRules'],
@@ -70,40 +77,41 @@ if (process.env.NODE_ENV !== 'production') {
     });
 
     return acc;
-  }, {});
+  }, {} as Record<string, Array<PanelId>>);
 }
 
 type ValidationError =
   | string
   | {
       type: string;
-      payload: { [key: string]: any };
+      payload: Record<string, any>;
     };
 
-type AnimationProps = {
+interface AnimationStyle extends PlainStyle {
   opacitySpring: number;
   transformSpring: number;
-};
+}
 
-type AnimationContext = {
+interface AnimationData {
+  Title: ReactElement;
+  Body: ReactElement;
+  Footer: ReactElement;
+  Links: ReactNode;
+  hasBackButton: boolean | ((props: Props) => boolean);
+}
+
+interface AnimationContext extends TransitionPlainStyle {
   key: PanelId;
-  style: AnimationProps;
-  data: {
-    Title: React.ReactElement<any>;
-    Body: React.ReactElement<any>;
-    Footer: React.ReactElement<any>;
-    Links: React.ReactElement<any>;
-    hasBackButton: boolean | ((props: Props) => boolean);
-  };
-};
+  style: AnimationStyle;
+  data: AnimationData;
+}
 
-type OwnProps = {
-  Title: React.ReactElement<any>;
-  Body: React.ReactElement<any>;
-  Footer: React.ReactElement<any>;
-  Links: React.ReactElement<any>;
-  children?: React.ReactElement<any>;
-};
+interface OwnProps {
+  Title: ReactElement;
+  Body: ReactElement;
+  Footer: ReactElement;
+  Links: ReactNode;
+}
 
 interface Props extends OwnProps {
   // context props
@@ -114,17 +122,18 @@ interface Props extends OwnProps {
   resolve: () => void;
   reject: () => void;
 
-  setErrors: (errors: { [key: string]: ValidationError }) => void;
+  setErrors: (errors: Record<string, ValidationError>) => void;
 }
 
-type State = {
+interface State {
   contextHeight: number;
   panelId: PanelId | void;
   prevPanelId: PanelId | void;
   isHeightDirty: boolean;
   forceHeight: 1 | 0;
   direction: 'X' | 'Y';
-};
+  formsHeights: Record<PanelId, number>;
+}
 
 class PanelTransition extends React.PureComponent<Props, State> {
   state: State = {
@@ -134,16 +143,17 @@ class PanelTransition extends React.PureComponent<Props, State> {
     forceHeight: 0 as const,
     direction: 'X' as const,
     prevPanelId: undefined,
+    formsHeights: {},
   };
 
   isHeightMeasured: boolean = false;
   wasAutoFocused: boolean = false;
-  body: null | {
+  body: {
     autoFocus: () => void;
     onFormSubmit: () => void;
-  } = null;
+  } | null = null;
 
-  timerIds: NodeJS.Timeout[] = []; // this is a list of a probably running timeouts to clean on unmount
+  timerIds: Array<number> = []; // this is a list of a probably running timeouts to clean on unmount
 
   componentDidUpdate(prevProps: Props) {
     const nextPanel: PanelId =
@@ -166,7 +176,8 @@ class PanelTransition extends React.PureComponent<Props, State> {
 
       if (forceHeight) {
         this.timerIds.push(
-          setTimeout(() => {
+          // https://stackoverflow.com/a/51040768/5184751
+          window.setTimeout(() => {
             this.setState({ forceHeight: 0 });
           }, 100),
         );
@@ -208,7 +219,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
       hasGoBack: boolean;
     } = Body.type as any;
 
-    const formHeight = this.state[`formHeight${panelId}`] || 0;
+    const formHeight = this.state.formsHeights[panelId] || 0;
 
     // a hack to disable height animation on first render
     const { isHeightMeasured } = this;
@@ -310,7 +321,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
     );
   }
 
-  onFormSubmit = () => {
+  onFormSubmit = (): void => {
     this.props.clearErrors();
 
     if (this.body) {
@@ -318,29 +329,28 @@ class PanelTransition extends React.PureComponent<Props, State> {
     }
   };
 
-  onFormInvalid = (errors: { [key: string]: ValidationError }) =>
+  onFormInvalid = (errors: Record<string, ValidationError>): void =>
     this.props.setErrors(errors);
 
-  willEnter = (config: AnimationContext) => this.getTransitionStyles(config);
-  willLeave = (config: AnimationContext) =>
-    this.getTransitionStyles(config, { isLeave: true });
+  willEnter = (config: TransitionStyle): PlainStyle => {
+    const transform = this.getTransformForPanel(config.key);
 
-  /**
-   * @param {object} config
-   * @param {string} config.key
-   * @param {object} [options]
-   * @param {object} [options.isLeave=false] - true, if this is a leave transition
-   *
-   * @returns {object}
-   */
-  getTransitionStyles(
-    { key }: AnimationContext,
-    options: { isLeave?: boolean } = {},
-  ): {
-    transformSpring: number;
-    opacitySpring: number;
-  } {
-    const { isLeave = false } = options;
+    return {
+      transformSpring: transform,
+      opacitySpring: 1,
+    };
+  };
+
+  willLeave = (config: TransitionStyle): Style => {
+    const transform = this.getTransformForPanel(config.key);
+
+    return {
+      transformSpring: spring(transform, transformSpringConfig),
+      opacitySpring: spring(0, opacitySpringConfig),
+    };
+  };
+
+  getTransformForPanel(key: PanelId): number {
     const { panelId, prevPanelId } = this.state;
 
     const fromLeft = -1;
@@ -363,14 +373,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
       sign *= -1;
     }
 
-    const transform = sign * 100;
-
-    return {
-      transformSpring: isLeave
-        ? spring(transform, transformSpringConfig)
-        : transform,
-      opacitySpring: isLeave ? spring(0, opacitySpringConfig) : 1,
-    };
+    return sign * 100;
   }
 
   getDirection(next: PanelId, prev: PanelId): 'X' | 'Y' {
@@ -383,24 +386,23 @@ class PanelTransition extends React.PureComponent<Props, State> {
     return context.includes(next) ? 'X' : 'Y';
   }
 
-  onUpdateHeight = (height: number, key: PanelId) => {
-    const heightKey = `formHeight${key}`;
-
-    // @ts-ignore
+  onUpdateHeight = (height: number, key: PanelId): void => {
     this.setState({
-      [heightKey]: height,
+      formsHeights: {
+        ...this.state.formsHeights,
+        [key]: height,
+      },
     });
   };
 
-  onUpdateContextHeight = (height: number) => {
+  onUpdateContextHeight = (height: number): void => {
     this.setState({
       contextHeight: height,
     });
   };
 
-  onGoBack = (event: React.MouseEvent<HTMLElement>) => {
+  onGoBack: MouseEventHandler = (event): void => {
     event.preventDefault();
-
     authFlow.goBack();
   };
 
@@ -409,7 +411,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
    *
    * @param {number} length number of panels transitioned
    */
-  tryToAutoFocus(length: number) {
+  tryToAutoFocus(length: number): void {
     if (!this.body) {
       return;
     }
@@ -425,20 +427,17 @@ class PanelTransition extends React.PureComponent<Props, State> {
     }
   }
 
-  shouldMeasureHeight() {
+  shouldMeasureHeight(): string {
     const { user, accounts, auth } = this.props;
     const { isHeightDirty } = this.state;
 
-    const errorString = Object.values(auth.error || {}).reduce(
-      (acc: string, item: ValidationError): string => {
-        if (typeof item === 'string') {
-          return acc + item;
-        }
+    const errorString = Object.values(auth.error || {}).reduce((acc, item) => {
+      if (typeof item === 'string') {
+        return acc + item;
+      }
 
-        return acc + item.type;
-      },
-      '',
-    ) as string;
+      return acc + item.type;
+    }, '') as string;
 
     return [
       errorString,
@@ -448,9 +447,9 @@ class PanelTransition extends React.PureComponent<Props, State> {
     ].join('');
   }
 
-  getHeader({ key, style, data }: AnimationContext) {
-    const { Title } = data;
-    const { transformSpring } = style;
+  getHeader({ key, style, data }: TransitionPlainStyle): ReactElement {
+    const { Title } = data as AnimationData;
+    const { transformSpring } = (style as unknown) as AnimationStyle;
 
     let { hasBackButton } = data;
 
@@ -459,7 +458,10 @@ class PanelTransition extends React.PureComponent<Props, State> {
     }
 
     const transitionStyle = {
-      ...this.getDefaultTransitionStyles(key, style),
+      ...this.getDefaultTransitionStyles(
+        key,
+        (style as unknown) as AnimationStyle,
+      ),
       opacity: 1, // reset default
     };
 
@@ -491,15 +493,12 @@ class PanelTransition extends React.PureComponent<Props, State> {
     );
   }
 
-  getBody({ key, style, data }: AnimationContext) {
-    const { Body } = data;
-    const { transformSpring } = style;
+  getBody({ key, style, data }: TransitionPlainStyle): ReactElement {
+    const { Body } = data as AnimationData;
+    const { transformSpring } = (style as unknown) as AnimationStyle;
     const { direction } = this.state;
 
-    let transform: { [key: string]: string } = this.translate(
-      transformSpring,
-      direction,
-    );
+    let transform = this.translate(transformSpring, direction);
     let verticalOrigin = 'top';
 
     if (direction === 'Y') {
@@ -507,8 +506,11 @@ class PanelTransition extends React.PureComponent<Props, State> {
       transform = {};
     }
 
-    const transitionStyle = {
-      ...this.getDefaultTransitionStyles(key, style),
+    const transitionStyle: CSSProperties = {
+      ...this.getDefaultTransitionStyles(
+        key,
+        (style as unknown) as AnimationStyle,
+      ),
       top: 'auto', // reset default
       [verticalOrigin]: 0,
       ...transform,
@@ -522,6 +524,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
         onMeasure={height => this.onUpdateHeight(height, key)}
       >
         {React.cloneElement(Body, {
+          // @ts-ignore
           ref: body => {
             this.body = body;
           },
@@ -530,10 +533,13 @@ class PanelTransition extends React.PureComponent<Props, State> {
     );
   }
 
-  getFooter({ key, style, data }: AnimationContext) {
-    const { Footer } = data;
+  getFooter({ key, style, data }: TransitionPlainStyle): ReactElement {
+    const { Footer } = data as AnimationData;
 
-    const transitionStyle = this.getDefaultTransitionStyles(key, style);
+    const transitionStyle = this.getDefaultTransitionStyles(
+      key,
+      (style as unknown) as AnimationStyle,
+    );
 
     return (
       <div key={`footer/${key}`} style={transitionStyle}>
@@ -542,10 +548,13 @@ class PanelTransition extends React.PureComponent<Props, State> {
     );
   }
 
-  getLinks({ key, style, data }: AnimationContext) {
-    const { Links } = data;
+  getLinks({ key, style, data }: TransitionPlainStyle): ReactElement {
+    const { Links } = data as AnimationData;
 
-    const transitionStyle = this.getDefaultTransitionStyles(key, style);
+    const transitionStyle = this.getDefaultTransitionStyles(
+      key,
+      (style as unknown) as AnimationStyle,
+    );
 
     return (
       <div key={`links/${key}`} style={transitionStyle}>
@@ -554,16 +563,9 @@ class PanelTransition extends React.PureComponent<Props, State> {
     );
   }
 
-  /**
-   * @param {string} key
-   * @param {object} style
-   * @param {number} style.opacitySpring
-   *
-   * @returns {object}
-   */
   getDefaultTransitionStyles(
     key: string,
-    { opacitySpring }: Readonly<AnimationProps>,
+    { opacitySpring }: Readonly<AnimationStyle>,
   ): {
     position: 'absolute';
     top: number;
@@ -582,7 +584,11 @@ class PanelTransition extends React.PureComponent<Props, State> {
     };
   }
 
-  translate(value: number, direction: 'X' | 'Y' = 'X', unit: '%' | 'px' = '%') {
+  translate(
+    value: number,
+    direction: 'X' | 'Y' = 'X',
+    unit: '%' | 'px' = '%',
+  ): CSSProperties {
     return {
       WebkitTransform: `translate${direction}(${value}${unit})`,
       transform: `translate${direction}(${value}${unit})`,
diff --git a/packages/app/components/auth/RejectionLink.tsx b/packages/app/components/auth/RejectionLink.tsx
index 78f1a76..f63382d 100644
--- a/packages/app/components/auth/RejectionLink.tsx
+++ b/packages/app/components/auth/RejectionLink.tsx
@@ -1,20 +1,22 @@
-import React, { useContext } from 'react';
+import React, { ComponentType, useContext } from 'react';
 import { FormattedMessage as Message, MessageDescriptor } from 'react-intl';
 
 import Context, { AuthContext } from './Context';
 
 interface Props {
   isAvailable?: (context: AuthContext) => boolean;
-  payload?: { [key: string]: any };
+  payload?: Record<string, any>;
   label: MessageDescriptor;
 }
 
-export type RejectionLinkProps = Props;
-
-function RejectionLink(props: Props) {
+const RejectionLink: ComponentType<Props> = ({
+  isAvailable,
+  payload,
+  label,
+}) => {
   const context = useContext(Context);
 
-  if (props.isAvailable && !props.isAvailable(context)) {
+  if (isAvailable && !isAvailable(context)) {
     // TODO: if want to properly support multiple links, we should control
     // the dividers ' | ' rendered from factory too
     return null;
@@ -26,12 +28,12 @@ function RejectionLink(props: Props) {
       onClick={event => {
         event.preventDefault();
 
-        context.reject(props.payload);
+        context.reject(payload);
       }}
     >
-      <Message {...props.label} />
+      <Message {...label} />
     </a>
   );
-}
+};
 
 export default RejectionLink;
diff --git a/packages/app/components/auth/acceptRules/AcceptRulesBody.js b/packages/app/components/auth/acceptRules/AcceptRulesBody.tsx
similarity index 100%
rename from packages/app/components/auth/acceptRules/AcceptRulesBody.js
rename to packages/app/components/auth/acceptRules/AcceptRulesBody.tsx
diff --git a/packages/app/components/auth/actions.test.ts b/packages/app/components/auth/actions.test.ts
index 8fa5bc0..2374da5 100644
--- a/packages/app/components/auth/actions.test.ts
+++ b/packages/app/components/auth/actions.test.ts
@@ -1,3 +1,4 @@
+import { Action as ReduxAction } from 'redux';
 import sinon from 'sinon';
 import expect from 'app/test/unexpected';
 
@@ -15,33 +16,36 @@ import {
   login,
   setLogin,
 } from 'app/components/auth/actions';
+import { OauthData, OAuthValidateResponse } from '../../services/api/oauth';
 
-const oauthData = {
+const oauthData: OauthData = {
   clientId: '',
   redirectUrl: '',
   responseType: '',
   scope: '',
   state: '',
+  prompt: 'none',
 };
 
 describe('components/auth/actions', () => {
   const dispatch = sinon.stub().named('store.dispatch');
   const getState = sinon.stub().named('store.getState');
 
-  function callThunk(fn, ...args) {
+  function callThunk<A extends Array<any>, F extends (...args: A) => any>(
+    fn: F,
+    ...args: A
+  ): Promise<void> {
     const thunk = fn(...args);
 
     return thunk(dispatch, getState);
   }
 
-  function expectDispatchCalls(calls) {
-    expect(
-      dispatch,
-      'to have calls satisfying',
-      [[setLoadingState(true)]]
-        .concat(calls)
-        .concat([[setLoadingState(false)]]),
-    );
+  function expectDispatchCalls(calls: Array<Array<ReduxAction>>) {
+    expect(dispatch, 'to have calls satisfying', [
+      [setLoadingState(true)],
+      ...calls,
+      [setLoadingState(false)],
+    ]);
   }
 
   beforeEach(() => {
@@ -58,14 +62,20 @@ describe('components/auth/actions', () => {
   });
 
   describe('#oAuthValidate()', () => {
-    let resp;
+    let resp: OAuthValidateResponse;
 
     beforeEach(() => {
       resp = {
-        client: { id: 123 },
-        oAuth: { state: 123 },
+        client: {
+          id: '123',
+          name: '',
+          description: '',
+        },
+        oAuth: {
+          state: 123,
+        },
         session: {
-          scopes: ['scopes'],
+          scopes: ['account_info'],
         },
       };
 
diff --git a/packages/app/components/auth/actions.ts b/packages/app/components/auth/actions.ts
index 38048ba..23fde96 100644
--- a/packages/app/components/auth/actions.ts
+++ b/packages/app/components/auth/actions.ts
@@ -1,7 +1,8 @@
+import { Action as ReduxAction } from 'redux';
 import { browserHistory } from 'app/services/history';
 import logger from 'app/services/logger';
 import localStorage from 'app/services/localStorage';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import history from 'app/services/history';
 import {
   updateUser,
@@ -15,22 +16,27 @@ import {
   recoverPassword as recoverPasswordEndpoint,
   OAuthResponse,
 } from 'app/services/api/authentication';
-import oauth, { OauthData, Client, Scope } from 'app/services/api/oauth';
-import signup from 'app/services/api/signup';
+import oauth, { OauthData, Scope } from 'app/services/api/oauth';
+import {
+  register as registerEndpoint,
+  activate as activateEndpoint,
+  resendActivation as resendActivationEndpoint,
+} from 'app/services/api/signup';
 import dispatchBsod from 'app/components/ui/bsod/dispatchBsod';
 import { create as createPopup } from 'app/components/ui/popup/actions';
 import ContactForm from 'app/components/contact/ContactForm';
 import { Account } from 'app/components/accounts/reducer';
 import { ThunkAction, Dispatch } from 'app/reducers';
+import { Resp } from 'app/services/request';
 
-import { getCredentials } from './reducer';
+import { Credentials, Client, OAuthState, getCredentials } from './reducer';
 
-type ValidationError =
-  | string
-  | {
-      type: string;
-      payload: { [key: string]: any };
-    };
+interface ValidationErrorLiteral {
+  type: string;
+  payload: Record<string, any>;
+}
+
+type ValidationError = string | ValidationErrorLiteral;
 
 /**
  * Routes user to the previous page if it is possible
@@ -169,16 +175,15 @@ export function register({
   rulesAgreement: boolean;
 }) {
   return wrapInLoader((dispatch, getState) =>
-    signup
-      .register({
-        email,
-        username,
-        password,
-        rePassword,
-        rulesAgreement,
-        lang: getState().user.lang,
-        captcha,
-      })
+    registerEndpoint({
+      email,
+      username,
+      password,
+      rePassword,
+      rulesAgreement,
+      lang: getState().user.lang,
+      captcha,
+    })
       .then(() => {
         dispatch(
           updateUser({
@@ -201,8 +206,7 @@ export function activate({
   key: string;
 }): ThunkAction<Promise<Account>> {
   return wrapInLoader(dispatch =>
-    signup
-      .activate({ key })
+    activateEndpoint(key)
       .then(authHandler(dispatch))
       .catch(validationErrorsHandler(dispatch, '/resend-activation')),
   );
@@ -216,8 +220,7 @@ export function resendActivation({
   captcha: string;
 }) {
   return wrapInLoader(dispatch =>
-    signup
-      .resendActivation({ email, captcha })
+    resendActivationEndpoint(email, captcha)
       .then(resp => {
         dispatch(
           updateUser({
@@ -235,25 +238,26 @@ export function contactUs() {
   return createPopup({ Popup: ContactForm });
 }
 
-export const SET_CREDENTIALS = 'auth:setCredentials';
+interface SetCredentialsAction extends ReduxAction {
+  type: 'auth:setCredentials';
+  payload: Credentials | null;
+}
+
+function setCredentials(payload: Credentials | null): SetCredentialsAction {
+  return {
+    type: 'auth:setCredentials',
+    payload,
+  };
+}
+
 /**
  * Sets login in credentials state
- *
  * Resets the state, when `null` is passed
  *
- * @param {string|null} login
- *
- * @returns {object}
+ * @param login
  */
-export function setLogin(login: string | null) {
-  return {
-    type: SET_CREDENTIALS,
-    payload: login
-      ? {
-          login,
-        }
-      : null,
-  };
+export function setLogin(login: string | null): SetCredentialsAction {
+  return setCredentials(login ? { login } : null);
 }
 
 export function relogin(login: string | null): ThunkAction {
@@ -262,19 +266,20 @@ export function relogin(login: string | null): ThunkAction {
     const returnUrl =
       credentials.returnUrl || location.pathname + location.search;
 
-    dispatch({
-      type: SET_CREDENTIALS,
-      payload: {
+    dispatch(
+      setCredentials({
         login,
         returnUrl,
         isRelogin: true,
-      },
-    });
+      }),
+    );
 
     browserHistory.push('/login');
   };
 }
 
+export type CredentialsAction = SetCredentialsAction;
+
 function requestTotp({
   login,
   password,
@@ -288,41 +293,55 @@ function requestTotp({
     // merging with current credentials to propogate returnUrl
     const credentials = getCredentials(getState());
 
-    dispatch({
-      type: SET_CREDENTIALS,
-      payload: {
+    dispatch(
+      setCredentials({
         ...credentials,
         login,
         password,
         rememberMe,
         isTotpRequired: true,
-      },
-    });
+      }),
+    );
   };
 }
 
-export const SET_SWITCHER = 'auth:setAccountSwitcher';
-export function setAccountSwitcher(isOn: boolean) {
+interface SetSwitcherAction extends ReduxAction {
+  type: 'auth:setAccountSwitcher';
+  payload: boolean;
+}
+
+export function setAccountSwitcher(isOn: boolean): SetSwitcherAction {
   return {
-    type: SET_SWITCHER,
+    type: 'auth:setAccountSwitcher',
     payload: isOn,
   };
 }
 
-export const ERROR = 'auth:error';
-export function setErrors(errors: { [key: string]: ValidationError } | null) {
+export type AccountSwitcherAction = SetSwitcherAction;
+
+interface SetErrorAction extends ReduxAction {
+  type: 'auth:error';
+  payload: Record<string, ValidationError> | null;
+  error: boolean;
+}
+
+export function setErrors(
+  errors: Record<string, ValidationError> | null,
+): SetErrorAction {
   return {
-    type: ERROR,
+    type: 'auth:error',
     payload: errors,
     error: true,
   };
 }
 
-export function clearErrors() {
+export function clearErrors(): SetErrorAction {
   return setErrors(null);
 }
 
-const KNOWN_SCOPES = [
+export type ErrorAction = SetErrorAction;
+
+const KNOWN_SCOPES: ReadonlyArray<string> = [
   'minecraft_server_session',
   'offline_access',
   'account_info',
@@ -470,11 +489,76 @@ function handleOauthParamsValidation(
   return Promise.reject(resp);
 }
 
-export const SET_CLIENT = 'set_client';
-export function setClient({ id, name, description }: Client) {
+interface SetClientAction extends ReduxAction {
+  type: 'set_client';
+  payload: Client;
+}
+
+export function setClient(payload: Client): SetClientAction {
   return {
-    type: SET_CLIENT,
-    payload: { id, name, description },
+    type: 'set_client',
+    payload,
+  };
+}
+
+export type ClientAction = SetClientAction;
+
+interface SetOauthAction extends ReduxAction {
+  type: 'set_oauth';
+  payload: Pick<
+    OAuthState,
+    | 'clientId'
+    | 'redirectUrl'
+    | 'responseType'
+    | 'scope'
+    | 'prompt'
+    | 'loginHint'
+    | 'state'
+  >;
+}
+
+// Input data is coming right from the query string, so the names
+// are the same, as used for initializing OAuth2 request
+export function setOAuthRequest(data: {
+  client_id?: string;
+  redirect_uri?: string;
+  response_type?: string;
+  scope?: string;
+  prompt?: string;
+  loginHint?: string;
+  state?: string;
+}): SetOauthAction {
+  return {
+    type: 'set_oauth',
+    payload: {
+      // TODO: there is too much default empty string. Maybe we can somehow validate it
+      //       on the level, where this action is called?
+      clientId: data.client_id || '',
+      redirectUrl: data.redirect_uri || '',
+      responseType: data.response_type || '',
+      scope: data.scope || '',
+      prompt: data.prompt || '',
+      loginHint: data.loginHint || '',
+      state: data.state || '',
+    },
+  };
+}
+
+interface SetOAuthResultAction extends ReduxAction {
+  type: 'set_oauth_result';
+  payload: Pick<OAuthState, 'success' | 'code' | 'displayCode'>;
+}
+
+export const SET_OAUTH_RESULT = 'set_oauth_result'; // TODO: remove
+
+export function setOAuthCode(payload: {
+  success: boolean;
+  code: string;
+  displayCode: boolean;
+}): SetOAuthResultAction {
+  return {
+    type: 'set_oauth_result',
+    payload,
   };
 }
 
@@ -507,69 +591,43 @@ export function resetAuth(): ThunkAction {
   };
 }
 
-export const SET_OAUTH = 'set_oauth';
-export function setOAuthRequest(data: {
-  client_id?: string;
-  redirect_uri?: string;
-  response_type?: string;
-  scope?: string;
-  prompt?: string;
-  loginHint?: string;
-  state?: string;
-}) {
+interface RequestPermissionsAcceptAction extends ReduxAction {
+  type: 'require_permissions_accept';
+}
+
+export function requirePermissionsAccept(): RequestPermissionsAcceptAction {
   return {
-    type: SET_OAUTH,
-    payload: {
-      clientId: data.client_id,
-      redirectUrl: data.redirect_uri,
-      responseType: data.response_type,
-      scope: data.scope,
-      prompt: data.prompt,
-      loginHint: data.loginHint,
-      state: data.state,
-    },
+    type: 'require_permissions_accept',
   };
 }
 
-export const SET_OAUTH_RESULT = 'set_oauth_result';
-export function setOAuthCode(data: {
-  success: boolean;
-  code: string;
-  displayCode: boolean;
-}) {
+export type OAuthAction =
+  | SetOauthAction
+  | SetOAuthResultAction
+  | RequestPermissionsAcceptAction;
+
+interface SetScopesAction extends ReduxAction {
+  type: 'set_scopes';
+  payload: Array<Scope>;
+}
+
+export function setScopes(payload: Array<Scope>): SetScopesAction {
   return {
-    type: SET_OAUTH_RESULT,
-    payload: {
-      success: data.success,
-      code: data.code,
-      displayCode: data.displayCode,
-    },
+    type: 'set_scopes',
+    payload,
   };
 }
 
-export const REQUIRE_PERMISSIONS_ACCEPT = 'require_permissions_accept';
-export function requirePermissionsAccept() {
-  return {
-    type: REQUIRE_PERMISSIONS_ACCEPT,
-  };
+export type ScopesAction = SetScopesAction;
+
+interface SetLoadingAction extends ReduxAction {
+  type: 'set_loading_state';
+  payload: boolean;
 }
 
-export const SET_SCOPES = 'set_scopes';
-export function setScopes(scopes: Scope[]) {
-  if (!Array.isArray(scopes)) {
-    throw new Error('Scopes must be array');
-  }
-
+export function setLoadingState(isLoading: boolean): SetLoadingAction {
   return {
-    type: SET_SCOPES,
-    payload: scopes,
-  };
-}
-
-export const SET_LOADING_STATE = 'set_loading_state';
-export function setLoadingState(isLoading: boolean) {
-  return {
-    type: SET_LOADING_STATE,
+    type: 'set_loading_state',
     payload: isLoading,
   };
 }
@@ -594,6 +652,8 @@ function wrapInLoader<T>(fn: ThunkAction<Promise<T>>): ThunkAction<Promise<T>> {
   };
 }
 
+export type LoadingAction = SetLoadingAction;
+
 function needActivation() {
   return updateUser({
     isActive: false,
@@ -615,12 +675,20 @@ function authHandler(dispatch: Dispatch) {
     });
 }
 
-function validationErrorsHandler(dispatch: Dispatch, repeatUrl?: string) {
+function validationErrorsHandler(
+  dispatch: Dispatch,
+  repeatUrl?: string,
+): (
+  resp: Resp<{
+    errors?: Record<string, string>;
+    data?: Record<string, any>;
+  }>,
+) => Promise<never> {
   return resp => {
     if (resp.errors) {
       const [firstError] = Object.keys(resp.errors);
-      const error = {
-        type: resp.errors[firstError],
+      const firstErrorObj: ValidationError = {
+        type: resp.errors[firstError] as string,
         payload: {
           isGuest: true,
           repeatUrl: '',
@@ -629,20 +697,24 @@ function validationErrorsHandler(dispatch: Dispatch, repeatUrl?: string) {
 
       if (resp.data) {
         // TODO: this should be formatted on backend
-        Object.assign(error.payload, resp.data);
+        Object.assign(firstErrorObj.payload, resp.data);
       }
 
       if (
-        ['error.key_not_exists', 'error.key_expire'].includes(error.type) &&
+        ['error.key_not_exists', 'error.key_expire'].includes(
+          firstErrorObj.type,
+        ) &&
         repeatUrl
       ) {
         // TODO: this should be formatted on backend
-        error.payload.repeatUrl = repeatUrl;
+        firstErrorObj.payload.repeatUrl = repeatUrl;
       }
 
-      resp.errors[firstError] = error;
+      // TODO: can I clone the object or its necessary to catch modified errors list on corresponding catches?
+      const errors: Record<string, ValidationError> = resp.errors;
+      errors[firstError] = firstErrorObj;
 
-      dispatch(setErrors(resp.errors));
+      dispatch(setErrors(errors));
     }
 
     return Promise.reject(resp);
diff --git a/packages/app/components/auth/activation/ActivationBody.js b/packages/app/components/auth/activation/ActivationBody.tsx
similarity index 89%
rename from packages/app/components/auth/activation/ActivationBody.js
rename to packages/app/components/auth/activation/ActivationBody.tsx
index a949715..45dc4cd 100644
--- a/packages/app/components/auth/activation/ActivationBody.js
+++ b/packages/app/components/auth/activation/ActivationBody.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
@@ -13,14 +12,6 @@ export default class ActivationBody extends BaseAuthBody {
   static displayName = 'ActivationBody';
   static panelId = 'activation';
 
-  static propTypes = {
-    match: PropTypes.shape({
-      params: PropTypes.shape({
-        key: PropTypes.string,
-      }),
-    }),
-  };
-
   autoFocusField =
     this.props.match.params && this.props.match.params.key ? null : 'key';
 
diff --git a/packages/app/components/auth/authError/AuthError.js b/packages/app/components/auth/authError/AuthError.js
deleted file mode 100644
index 93833ad..0000000
--- a/packages/app/components/auth/authError/AuthError.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import errorsDict from 'app/services/errorsDict';
-import { PanelBodyHeader } from 'app/components/ui/Panel';
-
-let autoHideTimer;
-function resetTimer() {
-  if (autoHideTimer) {
-    clearTimeout(autoHideTimer);
-    autoHideTimer = null;
-  }
-}
-export default function AuthError({ error, onClose = function() {} }) {
-  resetTimer();
-
-  if (error.payload && error.payload.canRepeatIn) {
-    error.payload.msLeft = error.payload.canRepeatIn * 1000;
-    setTimeout(onClose, error.payload.msLeft - Date.now() + 1500); // 1500 to let the user see, that time is elapsed
-  }
-
-  return (
-    <PanelBodyHeader
-      type="error"
-      onClose={() => {
-        resetTimer();
-        onClose();
-      }}
-    >
-      {errorsDict.resolve(error)}
-    </PanelBodyHeader>
-  );
-}
-
-AuthError.displayName = 'AuthError';
-AuthError.propTypes = {
-  error: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({
-      type: PropTypes.string,
-      payload: PropTypes.object,
-    }),
-  ]).isRequired,
-  onClose: PropTypes.func,
-};
diff --git a/packages/app/components/auth/authError/AuthError.tsx b/packages/app/components/auth/authError/AuthError.tsx
new file mode 100644
index 0000000..08b29b0
--- /dev/null
+++ b/packages/app/components/auth/authError/AuthError.tsx
@@ -0,0 +1,45 @@
+import React, { ComponentType, useEffect } from 'react';
+
+import { resolve as resolveError } from 'app/services/errorsDict';
+import { PanelBodyHeader } from 'app/components/ui/Panel';
+import { ValidationError } from 'app/components/ui/form/FormModel';
+
+interface Props {
+  error: ValidationError;
+  onClose?: () => void;
+}
+
+let autoHideTimer: number | null = null;
+function resetTimeout(): void {
+  if (autoHideTimer) {
+    clearTimeout(autoHideTimer);
+    autoHideTimer = null;
+  }
+}
+
+const AuthError: ComponentType<Props> = ({ error, onClose }) => {
+  useEffect(() => {
+    resetTimeout();
+
+    if (
+      onClose &&
+      typeof error !== 'string' &&
+      error.payload &&
+      error.payload.canRepeatIn
+    ) {
+      const msLeft = error.payload.canRepeatIn * 1000;
+      // 1500 to let the user see, that time is elapsed
+      setTimeout(onClose, msLeft - Date.now() + 1500);
+    }
+
+    return resetTimeout;
+  }, [error, onClose]);
+
+  return (
+    <PanelBodyHeader type="error" onClose={onClose}>
+      {resolveError(error)}
+    </PanelBodyHeader>
+  );
+};
+
+export default AuthError;
diff --git a/packages/app/components/auth/chooseAccount/ChooseAccountBody.js b/packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
similarity index 92%
rename from packages/app/components/auth/chooseAccount/ChooseAccountBody.js
rename to packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
index 3b3d75e..7ea8286 100644
--- a/packages/app/components/auth/chooseAccount/ChooseAccountBody.js
+++ b/packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
 
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
 import { AccountSwitcher } from 'app/components/accounts';
+import { Account } from 'app/components/accounts/reducer';
 
 import styles from './chooseAccount.scss';
 import messages from './ChooseAccount.intl.json';
@@ -46,7 +47,7 @@ export default class ChooseAccountBody extends BaseAuthBody {
     );
   }
 
-  onSwitch = account => {
+  onSwitch = (account: Account): void => {
     this.context.resolve(account);
   };
 }
diff --git a/packages/app/components/auth/factory.tsx b/packages/app/components/auth/factory.tsx
index 7d10072..0cf6e13 100644
--- a/packages/app/components/auth/factory.tsx
+++ b/packages/app/components/auth/factory.tsx
@@ -1,36 +1,36 @@
-import React from 'react';
+import React, { ComponentProps, ComponentType } from 'react';
 import { Button } from 'app/components/ui/form';
-import RejectionLink, {
-  RejectionLinkProps,
-} from 'app/components/auth/RejectionLink';
+import RejectionLink from 'app/components/auth/RejectionLink';
 import AuthTitle from 'app/components/auth/AuthTitle';
 import { MessageDescriptor } from 'react-intl';
 import { Color } from 'app/components/ui';
+import BaseAuthBody from './BaseAuthBody';
 
-/**
- * @param {object} options
- * @param {string|object} options.title - panel title
- * @param {React.ReactElement} options.body
- * @param {object} options.footer - config for footer Button
- * @param {Array|object|null} options.links - link config or an array of link configs
- *
- * @returns {object} - structure, required for auth panel to work
- */
-export default function({
-  title,
-  body,
-  footer,
-  links,
-}: {
+export type Factory = () => {
+  Title: ComponentType;
+  Body: typeof BaseAuthBody;
+  Footer: ComponentType;
+  Links: ComponentType;
+};
+
+type RejectionLinkProps = ComponentProps<typeof RejectionLink>;
+interface FactoryParams {
   title: MessageDescriptor;
-  body: React.ElementType;
+  body: typeof BaseAuthBody;
   footer: {
     color?: Color;
     label: string | MessageDescriptor;
     autoFocus?: boolean;
   };
-  links?: RejectionLinkProps | RejectionLinkProps[];
-}) {
+  links?: RejectionLinkProps | Array<RejectionLinkProps>;
+}
+
+export default function({
+  title,
+  body,
+  footer,
+  links,
+}: FactoryParams): Factory {
   return () => ({
     Title: () => <AuthTitle title={title} />,
     Body: body,
@@ -38,7 +38,7 @@ export default function({
     Links: () =>
       links ? (
         <span>
-          {([] as RejectionLinkProps[])
+          {([] as Array<RejectionLinkProps>)
             .concat(links)
             .map((link, index) => [
               index ? ' | ' : '',
diff --git a/packages/app/components/auth/finish/Finish.tsx b/packages/app/components/auth/finish/Finish.tsx
index b52fba7..c5ddeff 100644
--- a/packages/app/components/auth/finish/Finish.tsx
+++ b/packages/app/components/auth/finish/Finish.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { connect } from 'react-redux';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
@@ -13,7 +13,7 @@ interface Props {
   appName: string;
   code?: string;
   state: string;
-  displayCode?: string;
+  displayCode?: boolean;
   success?: boolean;
 }
 
@@ -84,7 +84,7 @@ class Finish extends React.Component<Props> {
     );
   }
 
-  onCopyClick = event => {
+  onCopyClick: MouseEventHandler = event => {
     event.preventDefault();
 
     const { code } = this.props;
diff --git a/packages/app/components/auth/forgotPassword/ForgotPasswordBody.js b/packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx
similarity index 100%
rename from packages/app/components/auth/forgotPassword/ForgotPasswordBody.js
rename to packages/app/components/auth/forgotPassword/ForgotPasswordBody.tsx
diff --git a/packages/app/components/auth/login/LoginBody.js b/packages/app/components/auth/login/LoginBody.tsx
similarity index 85%
rename from packages/app/components/auth/login/LoginBody.js
rename to packages/app/components/auth/login/LoginBody.tsx
index f903977..a139801 100644
--- a/packages/app/components/auth/login/LoginBody.js
+++ b/packages/app/components/auth/login/LoginBody.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
+
 import { Input } from 'app/components/ui/form';
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
+import { User } from 'app/components/user/reducer';
 
 import messages from './Login.intl.json';
 
 export default class LoginBody extends BaseAuthBody {
   static displayName = 'LoginBody';
   static panelId = 'login';
-  static hasGoBack = state => {
+  static hasGoBack = (state: { user: User }) => {
     return !state.user.isGuest;
   };
 
diff --git a/packages/app/components/auth/password/PasswordBody.js b/packages/app/components/auth/password/PasswordBody.tsx
similarity index 100%
rename from packages/app/components/auth/password/PasswordBody.js
rename to packages/app/components/auth/password/PasswordBody.tsx
diff --git a/packages/app/components/auth/permissions/PermissionsBody.js b/packages/app/components/auth/permissions/PermissionsBody.tsx
similarity index 100%
rename from packages/app/components/auth/permissions/PermissionsBody.js
rename to packages/app/components/auth/permissions/PermissionsBody.tsx
diff --git a/packages/app/components/auth/recoverPassword/RecoverPasswordBody.js b/packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
similarity index 92%
rename from packages/app/components/auth/recoverPassword/RecoverPasswordBody.js
rename to packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
index 98a970f..2a252a8 100644
--- a/packages/app/components/auth/recoverPassword/RecoverPasswordBody.js
+++ b/packages/app/components/auth/recoverPassword/RecoverPasswordBody.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
@@ -16,14 +15,6 @@ export default class RecoverPasswordBody extends BaseAuthBody {
   static panelId = 'recoverPassword';
   static hasGoBack = true;
 
-  static propTypes = {
-    match: PropTypes.shape({
-      params: PropTypes.shape({
-        key: PropTypes.string,
-      }),
-    }),
-  };
-
   autoFocusField =
     this.props.match.params && this.props.match.params.key
       ? 'newPassword'
diff --git a/packages/app/components/auth/reducer.test.ts b/packages/app/components/auth/reducer.test.ts
index 666d668..1b5ba5d 100644
--- a/packages/app/components/auth/reducer.test.ts
+++ b/packages/app/components/auth/reducer.test.ts
@@ -1,14 +1,9 @@
 import expect from 'app/test/unexpected';
 import auth from './reducer';
-import {
-  setLogin,
-  SET_CREDENTIALS,
-  setAccountSwitcher,
-  SET_SWITCHER,
-} from './actions';
+import { setLogin, setAccountSwitcher } from './actions';
 
 describe('components/auth/reducer', () => {
-  describe(SET_CREDENTIALS, () => {
+  describe('auth:setCredentials', () => {
     it('should set login', () => {
       const expectedLogin = 'foo';
 
@@ -22,7 +17,7 @@ describe('components/auth/reducer', () => {
     });
   });
 
-  describe(SET_SWITCHER, () => {
+  describe('auth:setAccountSwitcher', () => {
     it('should be enabled by default', () =>
       expect(auth(undefined, {} as any), 'to satisfy', {
         isSwitcherEnabled: true,
diff --git a/packages/app/components/auth/reducer.ts b/packages/app/components/auth/reducer.ts
index 4b0ae6e..8be2f20 100644
--- a/packages/app/components/auth/reducer.ts
+++ b/packages/app/components/auth/reducer.ts
@@ -1,26 +1,34 @@
-import { combineReducers } from 'redux';
+import { combineReducers, Reducer } from 'redux';
 import { RootState } from 'app/reducers';
+import { Scope } from '../../services/api/oauth';
 
 import {
-  ERROR,
-  SET_CLIENT,
-  SET_OAUTH,
-  SET_OAUTH_RESULT,
-  SET_SCOPES,
-  SET_LOADING_STATE,
-  REQUIRE_PERMISSIONS_ACCEPT,
-  SET_CREDENTIALS,
-  SET_SWITCHER,
+  ErrorAction,
+  CredentialsAction,
+  AccountSwitcherAction,
+  LoadingAction,
+  ClientAction,
+  OAuthAction,
+  ScopesAction,
 } from './actions';
 
-type Credentials = {
-  login?: string;
+export interface Credentials {
+  login?: string | null; // By some reasons there is can be null value. Need to investigate.
   password?: string;
   rememberMe?: boolean;
   returnUrl?: string;
   isRelogin?: boolean;
   isTotpRequired?: boolean;
-};
+}
+
+type Error = Record<
+  string,
+  | string
+  | {
+      type: string;
+      payload: Record<string, any>;
+    }
+> | null;
 
 export interface Client {
   id: string;
@@ -28,7 +36,7 @@ export interface Client {
   description: string;
 }
 
-interface OAuthState {
+export interface OAuthState {
   clientId: string;
   redirectUrl: string;
   responseType: string;
@@ -39,27 +47,113 @@ interface OAuthState {
   state: string;
   success?: boolean;
   code?: string;
-  displayCode?: string;
+  displayCode?: boolean;
   acceptRequired?: boolean;
 }
 
+type Scopes = Array<Scope>;
+
 export interface State {
   credentials: Credentials;
-  error: null | {
-    [key: string]:
-      | string
-      | {
-          type: string;
-          payload: { [key: string]: any };
-        };
-  };
+  error: Error;
   isLoading: boolean;
   isSwitcherEnabled: boolean;
   client: Client | null;
   oauth: OAuthState | null;
-  scopes: string[];
+  scopes: Scopes;
 }
 
+const error: Reducer<State['error'], ErrorAction> = (
+  state = null,
+  { type, payload },
+) => {
+  if (type === 'auth:error') {
+    return payload;
+  }
+
+  return state;
+};
+
+const credentials: Reducer<State['credentials'], CredentialsAction> = (
+  state = {},
+  { type, payload },
+) => {
+  if (type === 'auth:setCredentials') {
+    if (payload) {
+      return {
+        ...payload,
+      };
+    }
+
+    return {};
+  }
+
+  return state;
+};
+
+const isSwitcherEnabled: Reducer<
+  State['isSwitcherEnabled'],
+  AccountSwitcherAction
+> = (state = true, { type, payload }) => {
+  if (type === 'auth:setAccountSwitcher') {
+    return payload;
+  }
+
+  return state;
+};
+
+const isLoading: Reducer<State['isLoading'], LoadingAction> = (
+  state = false,
+  { type, payload },
+) => {
+  if (type === 'set_loading_state') {
+    return payload;
+  }
+
+  return state;
+};
+
+const client: Reducer<State['client'], ClientAction> = (
+  state = null,
+  { type, payload },
+) => {
+  if (type === 'set_client') {
+    return payload;
+  }
+
+  return state;
+};
+
+const oauth: Reducer<State['oauth'], OAuthAction> = (state = null, action) => {
+  switch (action.type) {
+    case 'set_oauth':
+      return action.payload;
+    case 'set_oauth_result':
+      return {
+        ...(state as OAuthState),
+        ...action.payload,
+      };
+    case 'require_permissions_accept':
+      return {
+        ...(state as OAuthState),
+        acceptRequired: true,
+      };
+    default:
+      return state;
+  }
+};
+
+const scopes: Reducer<State['scopes'], ScopesAction> = (
+  state = [],
+  { type, payload },
+) => {
+  if (type === 'set_scopes') {
+    return payload;
+  }
+
+  return state;
+};
+
 export default combineReducers<State>({
   credentials,
   error,
@@ -70,135 +164,6 @@ export default combineReducers<State>({
   scopes,
 });
 
-function error(
-  state = null,
-  { type, payload = null, error = false },
-): State['error'] {
-  switch (type) {
-    case ERROR:
-      if (!error) {
-        throw new Error('Expected payload with error');
-      }
-
-      return payload;
-
-    default:
-      return state;
-  }
-}
-
-function credentials(
-  state = {},
-  {
-    type,
-    payload,
-  }: {
-    type: string;
-    payload: Credentials | null;
-  },
-): State['credentials'] {
-  if (type === SET_CREDENTIALS) {
-    if (payload && typeof payload === 'object') {
-      return {
-        ...payload,
-      };
-    }
-
-    return {};
-  }
-
-  return state;
-}
-
-function isSwitcherEnabled(
-  state = true,
-  { type, payload = false },
-): State['isSwitcherEnabled'] {
-  switch (type) {
-    case SET_SWITCHER:
-      if (typeof payload !== 'boolean') {
-        throw new Error('Expected payload of boolean type');
-      }
-
-      return payload;
-
-    default:
-      return state;
-  }
-}
-
-function isLoading(
-  state = false,
-  { type, payload = null },
-): State['isLoading'] {
-  switch (type) {
-    case SET_LOADING_STATE:
-      return !!payload;
-
-    default:
-      return state;
-  }
-}
-
-function client(state = null, { type, payload }): State['client'] {
-  switch (type) {
-    case SET_CLIENT:
-      return {
-        id: payload.id,
-        name: payload.name,
-        description: payload.description,
-      };
-
-    default:
-      return state;
-  }
-}
-
-function oauth(
-  state: State['oauth'] = null,
-  { type, payload },
-): State['oauth'] {
-  switch (type) {
-    case SET_OAUTH:
-      return {
-        clientId: payload.clientId,
-        redirectUrl: payload.redirectUrl,
-        responseType: payload.responseType,
-        scope: payload.scope,
-        prompt: payload.prompt,
-        loginHint: payload.loginHint,
-        state: payload.state,
-      };
-
-    case SET_OAUTH_RESULT:
-      return {
-        ...(state as OAuthState),
-        success: payload.success,
-        code: payload.code,
-        displayCode: payload.displayCode,
-      };
-
-    case REQUIRE_PERMISSIONS_ACCEPT:
-      return {
-        ...(state as OAuthState),
-        acceptRequired: true,
-      };
-
-    default:
-      return state;
-  }
-}
-
-function scopes(state = [], { type, payload = [] }): State['scopes'] {
-  switch (type) {
-    case SET_SCOPES:
-      return payload;
-
-    default:
-      return state;
-  }
-}
-
 export function getLogin(
   state: RootState | Pick<RootState, 'auth'>,
 ): string | null {
diff --git a/packages/app/components/auth/register/RegisterBody.js b/packages/app/components/auth/register/RegisterBody.tsx
similarity index 100%
rename from packages/app/components/auth/register/RegisterBody.js
rename to packages/app/components/auth/register/RegisterBody.tsx
diff --git a/packages/app/components/auth/resendActivation/ResendActivationBody.js b/packages/app/components/auth/resendActivation/ResendActivationBody.tsx
similarity index 100%
rename from packages/app/components/auth/resendActivation/ResendActivationBody.js
rename to packages/app/components/auth/resendActivation/ResendActivationBody.tsx
diff --git a/packages/app/components/contact/ContactForm.test.tsx b/packages/app/components/contact/ContactForm.test.tsx
index 4fc7a62..350b525 100644
--- a/packages/app/components/contact/ContactForm.test.tsx
+++ b/packages/app/components/contact/ContactForm.test.tsx
@@ -1,17 +1,23 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import expect from 'app/test/unexpected';
 import sinon from 'sinon';
-import { shallow, mount } from 'enzyme';
+import { shallow, mount, ShallowWrapper, ReactWrapper } from 'enzyme';
 import { IntlProvider } from 'react-intl';
 import feedback from 'app/services/api/feedback';
 import { User } from 'app/components/user';
 
 import { ContactForm } from './ContactForm';
 
+type ContactFormShallowType = ShallowWrapper<
+  ComponentProps<typeof ContactForm>,
+  any,
+  ContactForm
+>;
+
 describe('ContactForm', () => {
   describe('when rendered', () => {
     const user = {} as User;
-    let component;
+    let component: ContactFormShallowType;
 
     beforeEach(() => {
       component = shallow(<ContactForm user={user} />);
@@ -57,7 +63,7 @@ describe('ContactForm', () => {
     const user = {
       email: 'foo@bar.com',
     } as User;
-    let component;
+    let component: ContactFormShallowType;
 
     beforeEach(() => {
       component = shallow(<ContactForm user={user} />);
@@ -76,7 +82,7 @@ describe('ContactForm', () => {
     const user = {
       email: 'foo@bar.com',
     } as User;
-    let component;
+    let component: ContactFormShallowType;
 
     beforeEach(() => {
       component = shallow(<ContactForm user={user} />);
@@ -93,15 +99,15 @@ describe('ContactForm', () => {
     const user = {
       email: 'foo@bar.com',
     } as User;
-    let component;
-    let wrapper;
+    let component: ContactForm;
+    let wrapper: ReactWrapper;
 
     beforeEach(() => {
       // TODO: add polyfill for from validation for jsdom
 
       wrapper = mount(
         <IntlProvider locale="en" defaultLocale="en">
-          <ContactForm user={user} ref={el => (component = el)} />
+          <ContactForm user={user} ref={el => (component = el!)} />
         </IntlProvider>,
       );
     });
@@ -118,8 +124,8 @@ describe('ContactForm', () => {
     const user = {
       email: 'foo@bar.com',
     } as User;
-    let component;
-    let wrapper;
+    let component: ContactForm;
+    let wrapper: ReactWrapper;
     const requestData = {
       email: user.email,
       subject: 'Test subject',
@@ -137,16 +143,18 @@ describe('ContactForm', () => {
       // TODO: try to rewrite with unexpected-react
       wrapper = mount(
         <IntlProvider locale="en" defaultLocale="en">
-          <ContactForm user={user} ref={el => (component = el)} />
+          <ContactForm user={user} ref={el => (component = el!)} />
         </IntlProvider>,
       );
 
-      wrapper.find('input[name="email"]').getDOMNode().value =
+      wrapper.find('input[name="email"]').getDOMNode<HTMLInputElement>().value =
         requestData.email;
-      wrapper.find('input[name="subject"]').getDOMNode().value =
-        requestData.subject;
-      wrapper.find('textarea[name="message"]').getDOMNode().value =
-        requestData.message;
+      wrapper
+        .find('input[name="subject"]')
+        .getDOMNode<HTMLInputElement>().value = requestData.subject;
+      wrapper
+        .find('textarea[name="message"]')
+        .getDOMNode<HTMLInputElement>().value = requestData.message;
     });
 
     afterEach(() => {
diff --git a/packages/app/components/contact/ContactForm.tsx b/packages/app/components/contact/ContactForm.tsx
index f6d8e15..ca6f76d 100644
--- a/packages/app/components/contact/ContactForm.tsx
+++ b/packages/app/components/contact/ContactForm.tsx
@@ -172,9 +172,9 @@ export class ContactForm extends React.Component<
     );
   }
 
-  onSubmit = () => {
+  onSubmit = (): Promise<void> => {
     if (this.state.isLoading) {
-      return;
+      return Promise.resolve();
     }
 
     this.setState({ isLoading: true });
diff --git a/packages/app/components/dev/apps/actions.ts b/packages/app/components/dev/apps/actions.ts
index fcf7ea4..bd3e991 100644
--- a/packages/app/components/dev/apps/actions.ts
+++ b/packages/app/components/dev/apps/actions.ts
@@ -1,17 +1,15 @@
-import { Dispatch } from 'redux';
+import { Dispatch, Action as ReduxAction } from 'redux';
 import { OauthAppResponse } from 'app/services/api/oauth';
 import oauth from 'app/services/api/oauth';
 import { User } from 'app/components/user';
+import { ThunkAction } from 'app/reducers';
 
 import { Apps } from './reducer';
 
-type SetAvailableAction = {
+interface SetAvailableAction extends ReduxAction {
   type: 'apps:setAvailable';
   payload: Array<OauthAppResponse>;
-};
-type DeleteAppAction = { type: 'apps:deleteApp'; payload: string };
-type AddAppAction = { type: 'apps:addApp'; payload: OauthAppResponse };
-export type Action = SetAvailableAction | DeleteAppAction | AddAppAction;
+}
 
 export function setAppsList(apps: Array<OauthAppResponse>): SetAvailableAction {
   return {
@@ -27,14 +25,19 @@ export function getApp(
   return state.apps.available.find(app => app.clientId === clientId) || null;
 }
 
-export function fetchApp(clientId: string) {
-  return async (dispatch: Dispatch<any>): Promise<void> => {
+export function fetchApp(clientId: string): ThunkAction<Promise<void>> {
+  return async dispatch => {
     const app = await oauth.getApp(clientId);
 
     dispatch(addApp(app));
   };
 }
 
+interface AddAppAction extends ReduxAction {
+  type: 'apps:addApp';
+  payload: OauthAppResponse;
+}
+
 function addApp(app: OauthAppResponse): AddAppAction {
   return {
     type: 'apps:addApp',
@@ -69,6 +72,11 @@ export function deleteApp(clientId: string) {
   };
 }
 
+interface DeleteAppAction extends ReduxAction {
+  type: 'apps:deleteApp';
+  payload: string;
+}
+
 function createDeleteAppAction(clientId: string): DeleteAppAction {
   return {
     type: 'apps:deleteApp',
@@ -76,8 +84,11 @@ function createDeleteAppAction(clientId: string): DeleteAppAction {
   };
 }
 
-export function resetApp(clientId: string, resetSecret: boolean) {
-  return async (dispatch: Dispatch<any>): Promise<void> => {
+export function resetApp(
+  clientId: string,
+  resetSecret: boolean,
+): ThunkAction<Promise<void>> {
+  return async dispatch => {
     const { data: app } = await oauth.reset(clientId, resetSecret);
 
     if (resetSecret) {
@@ -85,3 +96,5 @@ export function resetApp(clientId: string, resetSecret: boolean) {
     }
   };
 }
+
+export type Action = SetAvailableAction | DeleteAppAction | AddAppAction;
diff --git a/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx b/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx
index 863e13d..4b0938c 100644
--- a/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx
+++ b/packages/app/components/dev/apps/applicationForm/ApplicationForm.tsx
@@ -19,12 +19,15 @@ import ApplicationTypeSwitcher from './ApplicationTypeSwitcher';
 import WebsiteType from './WebsiteType';
 import MinecraftServerType from './MinecraftServerType';
 
-const typeToForm: {
-  [K in ApplicationType]: {
+type TypeToForm = Record<
+  ApplicationType,
+  {
     label: MessageDescriptor;
     component: React.ComponentType<any>;
-  };
-} = {
+  }
+>;
+
+const typeToForm: TypeToForm = {
   [TYPE_APPLICATION]: {
     label: messages.website,
     component: WebsiteType,
@@ -35,16 +38,15 @@ const typeToForm: {
   },
 };
 
-const typeToLabel = Object.keys(typeToForm).reduce(
-  (result, key: ApplicationType) => {
-    result[key] = typeToForm[key].label;
+type TypeToLabel = Record<ApplicationType, MessageDescriptor>;
 
-    return result;
-  },
-  {} as {
-    [K in ApplicationType]: MessageDescriptor;
-  },
-);
+const typeToLabel: TypeToLabel = ((Object.keys(typeToForm) as unknown) as Array<
+  ApplicationType
+>).reduce((result, key) => {
+  result[key] = typeToForm[key].label;
+
+  return result;
+}, {} as TypeToLabel);
 
 export default class ApplicationForm extends React.Component<{
   app: OauthAppResponse;
diff --git a/packages/app/components/dev/apps/applicationForm/ApplicationTypeSwitcher.tsx b/packages/app/components/dev/apps/applicationForm/ApplicationTypeSwitcher.tsx
index 9fcbb58..5cc4776 100644
--- a/packages/app/components/dev/apps/applicationForm/ApplicationTypeSwitcher.tsx
+++ b/packages/app/components/dev/apps/applicationForm/ApplicationTypeSwitcher.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { ApplicationType } from 'app/components/dev/apps';
 import { MessageDescriptor } from 'react-intl';
 import { SKIN_LIGHT } from 'app/components/ui';
@@ -6,20 +6,20 @@ import { Radio } from 'app/components/ui/form';
 
 import styles from './applicationTypeSwitcher.scss';
 
-export default function ApplicationTypeSwitcher({
-  setType,
-  appTypes,
-  selectedType,
-}: {
-  appTypes: {
-    [K in ApplicationType]: MessageDescriptor;
-  };
+interface Props {
+  appTypes: Record<ApplicationType, MessageDescriptor>;
   selectedType: ApplicationType | null;
   setType: (type: ApplicationType) => void;
-}) {
-  return (
-    <div>
-      {Object.keys(appTypes).map((type: ApplicationType) => (
+}
+
+const ApplicationTypeSwitcher: ComponentType<Props> = ({
+  appTypes,
+  selectedType,
+  setType,
+}) => (
+  <div>
+    {((Object.keys(appTypes) as unknown) as Array<ApplicationType>).map(
+      type => (
         <div className={styles.radioContainer} key={type}>
           <Radio
             onChange={() => setType(type)}
@@ -29,7 +29,9 @@ export default function ApplicationTypeSwitcher({
             checked={selectedType === type}
           />
         </div>
-      ))}
-    </div>
-  );
-}
+      ),
+    )}
+  </div>
+);
+
+export default ApplicationTypeSwitcher;
diff --git a/packages/app/components/dev/apps/applicationForm/MinecraftServerType.tsx b/packages/app/components/dev/apps/applicationForm/MinecraftServerType.tsx
index 53a1c31..5993b88 100644
--- a/packages/app/components/dev/apps/applicationForm/MinecraftServerType.tsx
+++ b/packages/app/components/dev/apps/applicationForm/MinecraftServerType.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { OauthAppResponse } from 'app/services/api/oauth';
 import { Input, FormModel } from 'app/components/ui/form';
@@ -7,52 +7,51 @@ import styles from 'app/components/profile/profileForm.scss';
 
 import messages from './ApplicationForm.intl.json';
 
-export default function MinecraftServerType({
-  form,
-  app,
-}: {
+interface Props {
   form: FormModel;
   app: OauthAppResponse;
-}) {
-  return (
-    <div>
-      <div className={styles.formRow}>
-        <Input
-          {...form.bindField('name')}
-          label={messages.serverName}
-          defaultValue={app.name}
-          required
-          skin={SKIN_LIGHT}
-        />
-      </div>
-
-      <div className={styles.formRow}>
-        <p className={styles.description}>
-          <Message {...messages.ipAddressIsOptionButPreferable} />
-        </p>
-      </div>
-      <div className={styles.formRow}>
-        <Input
-          {...form.bindField('minecraftServerIp')}
-          label={messages.serverIp}
-          defaultValue={app.minecraftServerIp}
-          skin={SKIN_LIGHT}
-        />
-      </div>
-
-      <div className={styles.formRow}>
-        <p className={styles.description}>
-          <Message {...messages.youCanAlsoSpecifyServerSite} />
-        </p>
-      </div>
-      <div className={styles.formRow}>
-        <Input
-          {...form.bindField('websiteUrl')}
-          label={messages.websiteLink}
-          defaultValue={app.websiteUrl}
-          skin={SKIN_LIGHT}
-        />
-      </div>
-    </div>
-  );
 }
+
+const MinecraftServerType: ComponentType<Props> = ({ form, app }) => (
+  <div>
+    <div className={styles.formRow}>
+      <Input
+        {...form.bindField('name')}
+        label={messages.serverName}
+        defaultValue={app.name}
+        required
+        skin={SKIN_LIGHT}
+      />
+    </div>
+
+    <div className={styles.formRow}>
+      <p className={styles.description}>
+        <Message {...messages.ipAddressIsOptionButPreferable} />
+      </p>
+    </div>
+    <div className={styles.formRow}>
+      <Input
+        {...form.bindField('minecraftServerIp')}
+        label={messages.serverIp}
+        defaultValue={app.minecraftServerIp}
+        skin={SKIN_LIGHT}
+      />
+    </div>
+
+    <div className={styles.formRow}>
+      <p className={styles.description}>
+        <Message {...messages.youCanAlsoSpecifyServerSite} />
+      </p>
+    </div>
+    <div className={styles.formRow}>
+      <Input
+        {...form.bindField('websiteUrl')}
+        label={messages.websiteLink}
+        defaultValue={app.websiteUrl}
+        skin={SKIN_LIGHT}
+      />
+    </div>
+  </div>
+);
+
+export default MinecraftServerType;
diff --git a/packages/app/components/dev/apps/applicationForm/WebsiteType.tsx b/packages/app/components/dev/apps/applicationForm/WebsiteType.tsx
index 1aa54c4..b7ad785 100644
--- a/packages/app/components/dev/apps/applicationForm/WebsiteType.tsx
+++ b/packages/app/components/dev/apps/applicationForm/WebsiteType.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Input, TextArea, FormModel } from 'app/components/ui/form';
 import { OauthAppResponse } from 'app/services/api/oauth';
@@ -7,68 +7,67 @@ import styles from 'app/components/profile/profileForm.scss';
 
 import messages from './ApplicationForm.intl.json';
 
-export default function WebsiteType({
-  form,
-  app,
-}: {
+interface Props {
   form: FormModel;
   app: OauthAppResponse;
-}) {
-  return (
-    <div>
-      <div className={styles.formRow}>
-        <Input
-          {...form.bindField('name')}
-          label={messages.applicationName}
-          defaultValue={app.name}
-          required
-          skin={SKIN_LIGHT}
-        />
-      </div>
-
-      <div className={styles.formRow}>
-        <p className={styles.description}>
-          <Message {...messages.appDescriptionWillBeAlsoVisibleOnOauthPage} />
-        </p>
-      </div>
-      <div className={styles.formRow}>
-        <TextArea
-          {...form.bindField('description')}
-          label={messages.description}
-          defaultValue={app.description}
-          skin={SKIN_LIGHT}
-          minRows={3}
-        />
-      </div>
-
-      <div className={styles.formRow}>
-        <p className={styles.description}>
-          <Message {...messages.websiteLinkWillBeUsedAsAdditionalId} />
-        </p>
-      </div>
-      <div className={styles.formRow}>
-        <Input
-          {...form.bindField('websiteUrl')}
-          label={messages.websiteLink}
-          defaultValue={app.websiteUrl}
-          skin={SKIN_LIGHT}
-        />
-      </div>
-
-      <div className={styles.formRow}>
-        <p className={styles.description}>
-          <Message {...messages.redirectUriLimitsAllowableBaseAddress} />
-        </p>
-      </div>
-      <div className={styles.formRow}>
-        <Input
-          {...form.bindField('redirectUri')}
-          label={messages.redirectUri}
-          defaultValue={app.redirectUri}
-          required
-          skin={SKIN_LIGHT}
-        />
-      </div>
-    </div>
-  );
 }
+
+const WebsiteType: ComponentType<Props> = ({ form, app }) => (
+  <div>
+    <div className={styles.formRow}>
+      <Input
+        {...form.bindField('name')}
+        label={messages.applicationName}
+        defaultValue={app.name}
+        required
+        skin={SKIN_LIGHT}
+      />
+    </div>
+
+    <div className={styles.formRow}>
+      <p className={styles.description}>
+        <Message {...messages.appDescriptionWillBeAlsoVisibleOnOauthPage} />
+      </p>
+    </div>
+    <div className={styles.formRow}>
+      <TextArea
+        {...form.bindField('description')}
+        label={messages.description}
+        defaultValue={app.description}
+        skin={SKIN_LIGHT}
+        minRows={3}
+      />
+    </div>
+
+    <div className={styles.formRow}>
+      <p className={styles.description}>
+        <Message {...messages.websiteLinkWillBeUsedAsAdditionalId} />
+      </p>
+    </div>
+    <div className={styles.formRow}>
+      <Input
+        {...form.bindField('websiteUrl')}
+        label={messages.websiteLink}
+        defaultValue={app.websiteUrl}
+        skin={SKIN_LIGHT}
+      />
+    </div>
+
+    <div className={styles.formRow}>
+      <p className={styles.description}>
+        <Message {...messages.redirectUriLimitsAllowableBaseAddress} />
+      </p>
+    </div>
+    <div className={styles.formRow}>
+      <Input
+        {...form.bindField('redirectUri')}
+        label={messages.redirectUri}
+        defaultValue={app.redirectUri}
+        required
+        skin={SKIN_LIGHT}
+      />
+    </div>
+  </div>
+);
+
+export default WebsiteType;
diff --git a/packages/app/components/dev/apps/reducer.ts b/packages/app/components/dev/apps/reducer.ts
index 9a3e039..73bb5ec 100644
--- a/packages/app/components/dev/apps/reducer.ts
+++ b/packages/app/components/dev/apps/reducer.ts
@@ -3,7 +3,7 @@ import { OauthAppResponse } from 'app/services/api/oauth';
 import { Action } from './actions';
 
 export interface Apps {
-  available: OauthAppResponse[];
+  available: Array<OauthAppResponse>;
 }
 
 const defaults: Apps = {
@@ -42,8 +42,6 @@ export default function apps(state: Apps = defaults, action: Action): Apps {
           app => app.clientId !== action.payload,
         ),
       };
-
-    default:
   }
 
   return state;
diff --git a/packages/app/components/i18n/IntlProvider.tsx b/packages/app/components/i18n/IntlProvider.tsx
index a1bb5a1..f0c8145 100644
--- a/packages/app/components/i18n/IntlProvider.tsx
+++ b/packages/app/components/i18n/IntlProvider.tsx
@@ -1,16 +1,14 @@
-import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import React, { useState, useEffect, ComponentType } from 'react';
+import { useSelector } from 'react-redux';
 import { RawIntlProvider, IntlShape } from 'react-intl';
 import i18n from 'app/services/i18n';
 import { RootState } from 'app/reducers';
 
-type Props = {
-  children: React.ReactNode;
-  locale: string;
-};
-
-function IntlProvider({ children, locale }: Props) {
+const IntlProvider: ComponentType = ({ children }) => {
   const [intl, setIntl] = useState<IntlShape>(i18n.getIntl());
+  const locale = useSelector(
+    ({ i18n: i18nState }: RootState) => i18nState.locale,
+  );
 
   useEffect(() => {
     (async () => {
@@ -19,8 +17,6 @@ function IntlProvider({ children, locale }: Props) {
   }, [locale]);
 
   return <RawIntlProvider value={intl}>{children}</RawIntlProvider>;
-}
+};
 
-export default connect(({ i18n: i18nState }: RootState) => i18nState)(
-  IntlProvider,
-);
+export default IntlProvider;
diff --git a/packages/app/components/i18n/actions.ts b/packages/app/components/i18n/actions.ts
index 431a1ed..604bd3c 100644
--- a/packages/app/components/i18n/actions.ts
+++ b/packages/app/components/i18n/actions.ts
@@ -1,10 +1,9 @@
+import { Action as ReduxAction } from 'redux';
 import i18n from 'app/services/i18n';
+import { ThunkAction } from 'app/reducers';
 
-export const SET_LOCALE = 'i18n:setLocale';
-export function setLocale(desiredLocale: string) {
-  return async (
-    dispatch: (action: { [key: string]: any }) => any,
-  ): Promise<string> => {
+export function setLocale(desiredLocale: string): ThunkAction<Promise<string>> {
+  return async dispatch => {
     const locale = i18n.detectLanguage(desiredLocale);
 
     dispatch(_setLocale(locale));
@@ -13,11 +12,20 @@ export function setLocale(desiredLocale: string) {
   };
 }
 
-function _setLocale(locale: string) {
+interface SetAction extends ReduxAction {
+  type: 'i18n:setLocale';
+  payload: {
+    locale: string;
+  };
+}
+
+function _setLocale(locale: string): SetAction {
   return {
-    type: SET_LOCALE,
+    type: 'i18n:setLocale',
     payload: {
       locale,
     },
   };
 }
+
+export type Action = SetAction;
diff --git a/packages/app/components/i18n/localeFlags.ts b/packages/app/components/i18n/localeFlags.ts
index 24360f7..535ff25 100644
--- a/packages/app/components/i18n/localeFlags.ts
+++ b/packages/app/components/i18n/localeFlags.ts
@@ -1,6 +1,6 @@
 import supportedLocales from 'app/i18n';
 
-const localeToCountryCode = {
+const localeToCountryCode: Record<string, string> = {
   en: 'gb',
   be: 'by',
   pt: 'br',
diff --git a/packages/app/components/i18n/reducer.ts b/packages/app/components/i18n/reducer.ts
index 4266db0..952c477 100644
--- a/packages/app/components/i18n/reducer.ts
+++ b/packages/app/components/i18n/reducer.ts
@@ -1,18 +1,20 @@
 import i18n from 'app/services/i18n';
 
-import { SET_LOCALE } from './actions';
+import { Action } from './actions';
 
-export type State = { locale: string };
+export interface State {
+  locale: string;
+}
 
-const defaultState = {
+const defaultState: State = {
   locale: i18n.detectLanguage(),
 };
 
 export default function(
   state: State = defaultState,
-  { type, payload }: { type: string; payload: State },
+  { type, payload }: Action,
 ): State {
-  if (type === SET_LOCALE) {
+  if (type === 'i18n:setLocale') {
     return payload;
   }
 
diff --git a/packages/app/components/languageSwitcher/LanguageList.tsx b/packages/app/components/languageSwitcher/LanguageList.tsx
index 0218f06..ccdbe78 100644
--- a/packages/app/components/languageSwitcher/LanguageList.tsx
+++ b/packages/app/components/languageSwitcher/LanguageList.tsx
@@ -1,5 +1,13 @@
-import React from 'react';
-import { TransitionMotion, spring, presets } from 'react-motion';
+import React, { MouseEventHandler } from 'react';
+import {
+  TransitionMotion,
+  spring,
+  presets,
+  TransitionStyle,
+  TransitionPlainStyle,
+  PlainStyle,
+  Style,
+} from 'react-motion';
 import { FormattedMessage as Message } from 'react-intl';
 import clsx from 'clsx';
 
@@ -13,6 +21,34 @@ import mayTheForceBeWithYou from './images/may_the_force_be_with_you.svg';
 import biteMyShinyMetalAss from './images/bite_my_shiny_metal_ass.svg';
 import iTookAnArrowInMyKnee from './images/i_took_an_arrow_in_my_knee.svg';
 
+interface EmptyCaption {
+  src: string;
+  caption: string;
+}
+
+const emptyCaptions: ReadonlyArray<EmptyCaption> = [
+  {
+    // Homestuck
+    src: thatFuckingPumpkin,
+    caption: 'That fucking pumpkin',
+  },
+  {
+    // Star Wars
+    src: mayTheForceBeWithYou,
+    caption: 'May The Force Be With You',
+  },
+  {
+    // Futurama
+    src: biteMyShinyMetalAss,
+    caption: 'Bite my shiny metal ass',
+  },
+  {
+    // The Elder Scrolls V: Skyrim
+    src: iTookAnArrowInMyKnee,
+    caption: 'I took an arrow in my knee',
+  },
+];
+
 const itemHeight = 51;
 
 export default class LanguageList extends React.Component<{
@@ -84,70 +120,60 @@ export default class LanguageList extends React.Component<{
     );
   }
 
-  getEmptyCaption() {
-    const emptyCaptions = [
-      {
-        // Homestuck
-        src: thatFuckingPumpkin,
-        caption: 'That fucking pumpkin',
-      },
-      {
-        // Star Wars
-        src: mayTheForceBeWithYou,
-        caption: 'May The Force Be With You',
-      },
-      {
-        // Futurama
-        src: biteMyShinyMetalAss,
-        caption: 'Bite my shiny metal ass',
-      },
-      {
-        // The Elder Scrolls V: Skyrim
-        src: iTookAnArrowInMyKnee,
-        caption: 'I took an arrow in my knee',
-      },
-    ];
-
+  getEmptyCaption(): EmptyCaption {
     return emptyCaptions[Math.floor(Math.random() * emptyCaptions.length)];
   }
 
-  onChangeLang(lang: string) {
-    return (event: React.MouseEvent<HTMLElement>) => {
+  onChangeLang(lang: string): MouseEventHandler {
+    return event => {
       event.preventDefault();
 
       this.props.onChangeLang(lang);
     };
   }
 
-  getItemsWithDefaultStyles = () =>
-    this.getItemsWithStyles({ useSpring: false });
-
-  getItemsWithStyles = (
-    { useSpring }: { useSpring?: boolean } = { useSpring: true },
-  ) =>
-    Object.keys({ ...this.props.langs }).reduce(
+  getItemsWithDefaultStyles = (): Array<TransitionPlainStyle> => {
+    return Object.keys({ ...this.props.langs }).reduce(
       (previous, key) => [
         ...previous,
         {
           key,
           data: this.props.langs[key],
           style: {
-            height: useSpring ? spring(itemHeight, presets.gentle) : itemHeight,
-            opacity: useSpring ? spring(1, presets.gentle) : 1,
+            height: itemHeight,
+            opacity: 1,
           },
         },
       ],
-      [],
+      [] as Array<TransitionPlainStyle>,
     );
+  };
 
-  willEnter() {
+  getItemsWithStyles = (): Array<TransitionStyle> => {
+    return Object.keys({ ...this.props.langs }).reduce(
+      (previous, key) => [
+        ...previous,
+        {
+          key,
+          data: this.props.langs[key],
+          style: {
+            height: spring(itemHeight, presets.gentle),
+            opacity: spring(1, presets.gentle),
+          },
+        },
+      ],
+      [] as Array<TransitionStyle>,
+    );
+  };
+
+  willEnter(): PlainStyle {
     return {
       height: 0,
       opacity: 1,
     };
   }
 
-  willLeave() {
+  willLeave(): Style {
     return {
       height: spring(0),
       opacity: spring(0),
diff --git a/packages/app/components/languageSwitcher/LanguageSwitcher.tsx b/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
index c4e0f40..5492706 100644
--- a/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
+++ b/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
@@ -15,15 +15,15 @@ import { RootState } from 'app/reducers';
 
 const translateUrl = 'http://ely.by/translate';
 
-export type LocaleData = {
+export interface LocaleData {
   code: string;
   name: string;
   englishName: string;
   progress: number;
   isReleased: boolean;
-};
+}
 
-export type LocalesMap = { [code: string]: LocaleData };
+export type LocalesMap = Record<string, LocaleData>;
 
 type OwnProps = {
   onClose: () => void;
@@ -142,7 +142,7 @@ class LanguageSwitcher extends React.Component<
       previous[key] = langs[key];
 
       return previous;
-    }, {});
+    }, {} as typeof langs);
 
     this.setState({
       filter,
diff --git a/packages/app/components/languageSwitcher/LocaleItem.tsx b/packages/app/components/languageSwitcher/LocaleItem.tsx
index 5d7fc2e..267b345 100644
--- a/packages/app/components/languageSwitcher/LocaleItem.tsx
+++ b/packages/app/components/languageSwitcher/LocaleItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType, ReactNode } from 'react';
 import { localeFlags } from 'app/components/i18n';
 import { FormattedMessage as Message } from 'react-intl';
 
@@ -6,10 +6,14 @@ import messages from './languageSwitcher.intl.json';
 import styles from './languageSwitcher.scss';
 import { LocaleData } from './LanguageSwitcher';
 
-export default function LocaleItem({ locale }: { locale: LocaleData }) {
-  const { code, name, englishName, progress, isReleased } = locale;
+interface Props {
+  locale: LocaleData;
+}
 
-  let progressLabel;
+const LocaleItem: ComponentType<Props> = ({
+  locale: { code, name, englishName, progress, isReleased },
+}) => {
+  let progressLabel: ReactNode;
 
   if (progress !== 100) {
     progressLabel = (
@@ -41,4 +45,6 @@ export default function LocaleItem({ locale }: { locale: LocaleData }) {
       <span className={styles.languageCircle} />
     </div>
   );
-}
+};
+
+export default LocaleItem;
diff --git a/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx b/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
index bc198b9..0309df2 100644
--- a/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
+++ b/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
@@ -1,25 +1,23 @@
-import React from 'react';
+import React, { ComponentType, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
 import { localeFlags } from 'app/components/i18n';
 import LANGS from 'app/i18n';
-import { connect } from 'react-redux';
 import { create as createPopup } from 'app/components/ui/popup/actions';
 import LanguageSwitcher from 'app/components/languageSwitcher';
 import { RootState } from 'app/reducers';
 
 import styles from './link.scss';
 
-type Props = {
-  userLang: string;
-  interfaceLocale: string;
-  showLanguageSwitcherPopup: (event: React.MouseEvent<HTMLSpanElement>) => void;
-};
+const LanguageLink: ComponentType = () => {
+  const dispatch = useDispatch();
+  const showLanguageSwitcherPopup = useCallback(() => {
+    dispatch(createPopup({ Popup: LanguageSwitcher }));
+  }, [dispatch]);
+
+  const userLang = useSelector((state: RootState) => state.user.lang);
+  const interfaceLocale = useSelector((state: RootState) => state.i18n.locale);
 
-function LanguageLink({
-  userLang,
-  interfaceLocale,
-  showLanguageSwitcherPopup,
-}: Props) {
   const localeDefinition = LANGS[userLang] || LANGS[interfaceLocale];
 
   return (
@@ -40,14 +38,6 @@ function LanguageLink({
       {localeDefinition.name}
     </span>
   );
-}
+};
 
-export default connect(
-  (state: RootState) => ({
-    userLang: state.user.lang,
-    interfaceLocale: state.i18n.locale,
-  }),
-  {
-    showLanguageSwitcherPopup: () => createPopup({ Popup: LanguageSwitcher }),
-  },
-)(LanguageLink);
+export default LanguageLink;
diff --git a/packages/app/components/profile/changeEmail/ChangeEmail.tsx b/packages/app/components/profile/changeEmail/ChangeEmail.tsx
index d685d0e..f18adf8 100644
--- a/packages/app/components/profile/changeEmail/ChangeEmail.tsx
+++ b/packages/app/components/profile/changeEmail/ChangeEmail.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
 import { SlideMotion } from 'app/components/ui/motion';
@@ -21,27 +21,31 @@ import messages from './ChangeEmail.intl.json';
 const STEPS_TOTAL = 3;
 
 export type ChangeEmailStep = 0 | 1 | 2;
-type HeightProp = 'step0Height' | 'step1Height' | 'step2Height';
-type HeightDict = {
-  [K in HeightProp]?: number;
-};
 
 interface Props {
   onChangeStep: (step: ChangeEmailStep) => void;
   lang: string;
   email: string;
-  stepForms: FormModel[];
+  stepForms: Array<FormModel>;
   onSubmit: (step: ChangeEmailStep, form: FormModel) => Promise<void>;
   step: ChangeEmailStep;
   code?: string;
 }
 
-interface State extends HeightDict {
+interface State {
   newEmail: string | null;
   activeStep: ChangeEmailStep;
   code: string;
 }
 
+interface FormStepParams {
+  form: FormModel;
+  isActiveStep: boolean;
+  isCodeSpecified: boolean;
+  email: string;
+  code?: string;
+}
+
 export default class ChangeEmail extends React.Component<Props, State> {
   static get defaultProps(): Partial<Props> {
     return {
@@ -145,21 +149,28 @@ export default class ChangeEmail extends React.Component<Props, State> {
     return (
       <SlideMotion activeStep={activeStep}>
         {new Array(STEPS_TOTAL).fill(0).map((_, step) => {
-          const form = this.props.stepForms[step];
-
-          return this[`renderStep${step}`]({
+          const formParams: FormStepParams = {
+            form: this.props.stepForms[step],
+            isActiveStep: step === activeStep,
+            isCodeSpecified,
             email,
             code,
-            isCodeSpecified,
-            form,
-            isActiveStep: step === activeStep,
-          });
+          };
+
+          switch (step) {
+            case 0:
+              return this.renderStep0(formParams);
+            case 1:
+              return this.renderStep1(formParams);
+            case 2:
+              return this.renderStep2(formParams);
+          }
         })}
       </SlideMotion>
     );
   }
 
-  renderStep0({ email, form }) {
+  renderStep0({ email, form }: FormStepParams): ReactNode {
     return (
       <div key="step0" data-testid="step1" className={styles.formBody}>
         <div className={styles.formRow}>
@@ -183,7 +194,13 @@ export default class ChangeEmail extends React.Component<Props, State> {
     );
   }
 
-  renderStep1({ email, form, code, isCodeSpecified, isActiveStep }) {
+  renderStep1({
+    email,
+    form,
+    code,
+    isCodeSpecified,
+    isActiveStep,
+  }: FormStepParams): ReactNode {
     return (
       <div key="step1" data-testid="step2" className={styles.formBody}>
         <div className={styles.formRow}>
@@ -230,7 +247,12 @@ export default class ChangeEmail extends React.Component<Props, State> {
     );
   }
 
-  renderStep2({ form, code, isCodeSpecified, isActiveStep }) {
+  renderStep2({
+    form,
+    code,
+    isCodeSpecified,
+    isActiveStep,
+  }: FormStepParams): ReactNode {
     const { newEmail } = this.state;
 
     return (
@@ -268,14 +290,6 @@ export default class ChangeEmail extends React.Component<Props, State> {
     );
   }
 
-  onStepMeasure(step: ChangeEmailStep) {
-    return (height: number) =>
-      // @ts-ignore
-      this.setState({
-        [`step${step}Height`]: height,
-      });
-  }
-
   nextStep() {
     const { activeStep } = this.state;
     const nextStep = activeStep + 1;
diff --git a/packages/app/components/profile/changePassword/ChangePassword.test.js b/packages/app/components/profile/changePassword/ChangePassword.test.tsx
similarity index 97%
rename from packages/app/components/profile/changePassword/ChangePassword.test.js
rename to packages/app/components/profile/changePassword/ChangePassword.test.tsx
index 7172aca..0af2064 100644
--- a/packages/app/components/profile/changePassword/ChangePassword.test.js
+++ b/packages/app/components/profile/changePassword/ChangePassword.test.tsx
@@ -15,6 +15,7 @@ describe('<ChangePassword />', () => {
 
   it('should call onSubmit if passwords entered', () => {
     const onSubmit = sinon.spy(() => ({ catch: () => {} })).named('onSubmit');
+    // @ts-ignore
     const component = shallow(<ChangePassword onSubmit={onSubmit} />);
 
     component.find('Form').simulate('submit');
diff --git a/packages/app/components/profile/multiFactorAuth/MfaEnable.tsx b/packages/app/components/profile/multiFactorAuth/MfaEnable.tsx
index 2f818f0..f221d47 100644
--- a/packages/app/components/profile/multiFactorAuth/MfaEnable.tsx
+++ b/packages/app/components/profile/multiFactorAuth/MfaEnable.tsx
@@ -55,7 +55,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
-    if (typeof props.step === 'number' && props.step !== state.activeStep) {
+    if (props.step !== state.activeStep) {
       return {
         activeStep: props.step,
       };
@@ -122,7 +122,7 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
         <Confirmation
           key="step3"
           form={this.props.confirmationForm}
-          formRef={(el: Form) => (this.confirmationFormEl = el)}
+          formRef={el => (this.confirmationFormEl = el)}
           onSubmit={this.onTotpSubmit}
           onInvalid={() => this.forceUpdate()}
         />
diff --git a/packages/app/components/profile/multiFactorAuth/confirmation/Confirmation.tsx b/packages/app/components/profile/multiFactorAuth/confirmation/Confirmation.tsx
index 51194ec..8660bac 100644
--- a/packages/app/components/profile/multiFactorAuth/confirmation/Confirmation.tsx
+++ b/packages/app/components/profile/multiFactorAuth/confirmation/Confirmation.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
-import { Input, Form, FormModel } from 'app/components/ui/form';
 
+import { Input, Form, FormModel } from 'app/components/ui/form';
 import profileForm from 'app/components/profile/profileForm.scss';
+
 import messages from '../MultiFactorAuth.intl.json';
 
 export default function Confirmation({
@@ -13,7 +14,7 @@ export default function Confirmation({
 }: {
   form: FormModel;
   formRef?: (el: Form | null) => void;
-  onSubmit: (form: FormModel) => Promise<void>;
+  onSubmit: (form: FormModel) => Promise<void> | void;
   onInvalid: () => void;
 }) {
   return (
diff --git a/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx b/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx
index 4ed9d5a..cd51f53 100644
--- a/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx
+++ b/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx
@@ -1,54 +1,52 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import clsx from 'clsx';
+
 import { Form, Button, Input, FormModel } from 'app/components/ui/form';
 import popupStyles from 'app/components/ui/popup/popup.scss';
 
 import styles from './passwordRequestForm.scss';
 import messages from './PasswordRequestForm.intl.json';
 
-function PasswordRequestForm({
-  form,
-  onSubmit,
-}: {
+interface Props {
   form: FormModel;
   onSubmit: (form: FormModel) => void;
-}) {
-  return (
-    <div
-      className={styles.requestPasswordForm}
-      data-testid="password-request-form"
-    >
-      <div className={popupStyles.popup}>
-        <Form onSubmit={() => onSubmit(form)} form={form}>
-          <div className={popupStyles.header}>
-            <h2 className={popupStyles.headerTitle}>
-              <Message {...messages.title} />
-            </h2>
-          </div>
-
-          <div className={clsx(popupStyles.body, styles.body)}>
-            <span className={styles.lockIcon} />
-
-            <div className={styles.description}>
-              <Message {...messages.description} />
-            </div>
-
-            <Input
-              {...form.bindField('password')}
-              type="password"
-              required
-              autoFocus
-              color="green"
-              skin="light"
-              center
-            />
-          </div>
-          <Button color="green" label={messages.continue} block type="submit" />
-        </Form>
-      </div>
-    </div>
-  );
 }
 
+const PasswordRequestForm: ComponentType<Props> = ({ form, onSubmit }) => (
+  <div
+    className={styles.requestPasswordForm}
+    data-testid="password-request-form"
+  >
+    <div className={popupStyles.popup}>
+      <Form onSubmit={onSubmit} form={form}>
+        <div className={popupStyles.header}>
+          <h2 className={popupStyles.headerTitle}>
+            <Message {...messages.title} />
+          </h2>
+        </div>
+
+        <div className={clsx(popupStyles.body, styles.body)}>
+          <span className={styles.lockIcon} />
+
+          <div className={styles.description}>
+            <Message {...messages.description} />
+          </div>
+
+          <Input
+            {...form.bindField('password')}
+            type="password"
+            required
+            autoFocus
+            color="green"
+            skin="light"
+            center
+          />
+        </div>
+        <Button color="green" label={messages.continue} block type="submit" />
+      </Form>
+    </div>
+  </div>
+);
+
 export default PasswordRequestForm;
diff --git a/packages/app/components/ui/bsod/Box.ts b/packages/app/components/ui/bsod/Box.ts
index 5fa9726..625c70d 100644
--- a/packages/app/components/ui/bsod/Box.ts
+++ b/packages/app/components/ui/bsod/Box.ts
@@ -91,9 +91,7 @@ export default class Box {
       endY: number;
     }> = [];
 
-    // eslint-disable-next-line guard-for-in
-    for (const i in boxPoints) {
-      const point = boxPoints[i];
+    Object.values(boxPoints).forEach(point => {
       const angle = Math.atan2(light.y - point.y, light.x - point.x);
       const endX = point.x + shadowLength * Math.sin(-angle - Math.PI / 2);
       const endY = point.y + shadowLength * Math.cos(-angle - Math.PI / 2);
@@ -103,7 +101,7 @@ export default class Box {
         endX,
         endY,
       });
-    }
+    });
 
     for (let i = points.length - 1; i >= 0; i--) {
       const n = i === 3 ? 0 : i + 1;
diff --git a/packages/app/components/ui/bsod/BsodMiddleware.ts b/packages/app/components/ui/bsod/BsodMiddleware.ts
index d697034..af17ba5 100644
--- a/packages/app/components/ui/bsod/BsodMiddleware.ts
+++ b/packages/app/components/ui/bsod/BsodMiddleware.ts
@@ -18,8 +18,7 @@ class BsodMiddleware implements Middleware {
   async catch<T extends Resp<any>>(
     resp?: T | InternalServerError | Error,
   ): Promise<T> {
-    const { originalResponse }: { originalResponse?: Resp<any> } = (resp ||
-      {}) as InternalServerError;
+    const { originalResponse } = (resp || {}) as InternalServerError;
 
     if (
       resp &&
diff --git a/packages/app/components/ui/bsod/actions.ts b/packages/app/components/ui/bsod/actions.ts
index 2128074..d34841a 100644
--- a/packages/app/components/ui/bsod/actions.ts
+++ b/packages/app/components/ui/bsod/actions.ts
@@ -1,9 +1,13 @@
-import { Action } from 'redux';
+import { Action as ReduxAction } from 'redux';
 
-export const BSOD = 'BSOD';
+interface BSoDAction extends ReduxAction {
+  type: 'BSOD';
+}
 
-export function bsod(): Action {
+export function bsod(): BSoDAction {
   return {
-    type: BSOD,
+    type: 'BSOD',
   };
 }
+
+export type Action = BSoDAction;
diff --git a/packages/app/components/ui/bsod/reducer.ts b/packages/app/components/ui/bsod/reducer.ts
index df930db..b546a78 100644
--- a/packages/app/components/ui/bsod/reducer.ts
+++ b/packages/app/components/ui/bsod/reducer.ts
@@ -1,9 +1,9 @@
-import { BSOD } from './actions';
+import { Action } from './actions';
 
 export type State = boolean;
 
-export default function(state: State = false, { type }): State {
-  if (type === BSOD) {
+export default function(state: State = false, { type }: Action): State {
+  if (type === 'BSOD') {
     return true;
   }
 
diff --git a/packages/app/components/ui/form/Dropdown.tsx b/packages/app/components/ui/form/Dropdown.tsx
index 84944bd..8c8c9e3 100644
--- a/packages/app/components/ui/form/Dropdown.tsx
+++ b/packages/app/components/ui/form/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
+import React, { InputHTMLAttributes, MouseEventHandler } from 'react';
 import ReactDOM from 'react-dom';
 import { MessageDescriptor } from 'react-intl';
 import clsx from 'clsx';
@@ -40,10 +40,12 @@ export default class Dropdown extends FormInputComponent<Props, State> {
   componentDidMount() {
     // listen to capturing phase to ensure, that our event handler will be
     // called before all other
+    // @ts-ignore
     document.addEventListener('click', this.onBodyClick, true);
   }
 
   componentWillUnmount() {
+    // @ts-ignore
     document.removeEventListener('click', this.onBodyClick);
   }
 
@@ -98,7 +100,7 @@ export default class Dropdown extends FormInputComponent<Props, State> {
     });
   }
 
-  onSelectItem(item: OptionItem) {
+  onSelectItem(item: OptionItem): MouseEventHandler {
     return event => {
       event.preventDefault();
 
@@ -141,11 +143,12 @@ export default class Dropdown extends FormInputComponent<Props, State> {
     this.toggle();
   };
 
-  onBodyClick = (event: MouseEvent) => {
+  onBodyClick: MouseEventHandler = event => {
     if (this.state.isActive) {
-      const el = ReactDOM.findDOMNode(this);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const el = ReactDOM.findDOMNode(this)!;
 
-      if (!el.contains(event.target) && el !== event.target) {
+      if (!el.contains(event.target as HTMLElement) && el !== event.target) {
         event.preventDefault();
         event.stopPropagation();
 
diff --git a/packages/app/components/ui/form/Form.tsx b/packages/app/components/ui/form/Form.tsx
index 3db5846..719339b 100644
--- a/packages/app/components/ui/form/Form.tsx
+++ b/packages/app/components/ui/form/Form.tsx
@@ -1,18 +1,33 @@
 import React from 'react';
 import clsx from 'clsx';
+
 import logger from 'app/services/logger';
 
 import FormModel from './FormModel';
 import styles from './form.scss';
 
-interface Props {
+interface BaseProps {
   id: string;
   isLoading: boolean;
-  form?: FormModel;
-  onSubmit: (form: FormModel | FormData) => void | Promise<void>;
-  onInvalid: (errors: { [errorKey: string]: string }) => void;
+  onInvalid: (errors: Record<string, string>) => void;
   children: React.ReactNode;
 }
+
+interface PropsWithoutForm extends BaseProps {
+  onSubmit: (form: FormData) => Promise<void> | void;
+}
+
+interface PropsWithForm extends BaseProps {
+  form: FormModel;
+  onSubmit: (form: FormModel) => Promise<void> | void;
+}
+
+type Props = PropsWithoutForm | PropsWithForm;
+
+function hasForm(props: Props): props is PropsWithForm {
+  return 'form' in props;
+}
+
 interface State {
   id: string; // just to track value for derived updates
   isTouched: boolean;
@@ -39,7 +54,7 @@ export default class Form extends React.Component<Props, State> {
   mounted = false;
 
   componentDidMount() {
-    if (this.props.form) {
+    if (hasForm(this.props)) {
       this.props.form.addLoadingListener(this.onLoading);
     }
 
@@ -65,8 +80,8 @@ export default class Form extends React.Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const nextForm = this.props.form;
-    const prevForm = prevProps.form;
+    const nextForm = hasForm(this.props) ? this.props.form : undefined;
+    const prevForm = hasForm(prevProps) ? prevProps.form : undefined;
 
     if (nextForm !== prevForm) {
       if (prevForm) {
@@ -80,7 +95,7 @@ export default class Form extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    if (this.props.form) {
+    if (hasForm(this.props)) {
       this.props.form.removeLoadingListener(this.onLoading);
     }
 
@@ -119,15 +134,19 @@ export default class Form extends React.Component<Props, State> {
     }
 
     if (form.checkValidity()) {
-      const result = this.props.onSubmit(
-        this.props.form ? this.props.form : new FormData(form),
-      );
+      let result: Promise<void> | void;
+
+      if (hasForm(this.props)) {
+        result = this.props.onSubmit(this.props.form);
+      } else {
+        result = this.props.onSubmit(new FormData(form));
+      }
 
       if (result && result.then) {
         this.setState({ isLoading: true });
 
         result
-          .catch((errors: { [key: string]: string }) => {
+          .catch((errors: Record<string, string>) => {
             this.setErrors(errors);
           })
           .finally(() => this.mounted && this.setState({ isLoading: false }));
@@ -136,10 +155,10 @@ export default class Form extends React.Component<Props, State> {
       const invalidEls: NodeListOf<InputElement> = form.querySelectorAll(
         ':invalid',
       );
-      const errors = {};
+      const errors: Record<string, string> = {};
       invalidEls[0].focus(); // focus on first error
 
-      Array.from(invalidEls).reduce((acc, el: InputElement) => {
+      Array.from(invalidEls).reduce((acc, el) => {
         if (!el.name) {
           logger.warn('Found an element without name', { el });
 
@@ -164,7 +183,10 @@ export default class Form extends React.Component<Props, State> {
   }
 
   setErrors(errors: { [key: string]: string }) {
-    this.props.form && this.props.form.setErrors(errors);
+    if (hasForm(this.props)) {
+      this.props.form.setErrors(errors);
+    }
+
     this.props.onInvalid(errors);
   }
 
diff --git a/packages/app/components/ui/form/FormComponent.tsx b/packages/app/components/ui/form/FormComponent.tsx
index b3b16d1..fd83da5 100644
--- a/packages/app/components/ui/form/FormComponent.tsx
+++ b/packages/app/components/ui/form/FormComponent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { MessageDescriptor } from 'react-intl';
 import i18n from 'app/services/i18n';
 
-class FormComponent<P, S = {}> extends React.Component<P, S> {
+export default class FormComponent<P, S = {}> extends React.Component<P, S> {
   /**
    * Formats message resolving intl translations
    *
@@ -37,5 +37,3 @@ class FormComponent<P, S = {}> extends React.Component<P, S> {
    */
   onFormInvalid() {}
 }
-
-export default FormComponent;
diff --git a/packages/app/components/ui/form/FormError.tsx b/packages/app/components/ui/form/FormError.tsx
index b34a5ab..bd0fbad 100644
--- a/packages/app/components/ui/form/FormError.tsx
+++ b/packages/app/components/ui/form/FormError.tsx
@@ -1,31 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import errorsDict from 'app/services/errorsDict';
+import React, { ComponentType, ReactNode } from 'react';
+import { resolve as resolveError } from 'app/services/errorsDict';
+import { MessageDescriptor } from 'react-intl';
 
 import styles from './form.scss';
 
-export default function FormError({
-  error,
-}: {
-  error?:
-    | string
-    | React.ReactNode
-    | {
-        type: string;
-        payload: { [key: string]: any };
-      };
-}) {
-  return error ? (
-    <div className={styles.fieldError}>{errorsDict.resolve(error)}</div>
-  ) : null;
+interface Props {
+  error?: Parameters<typeof resolveError>[0] | MessageDescriptor | null;
 }
 
-FormError.propTypes = {
-  error: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({
-      type: PropTypes.string.isRequired,
-      payload: PropTypes.object.isRequired,
-    }),
-  ]),
+function isMessageDescriptor(
+  message: Props['error'],
+): message is MessageDescriptor {
+  return (
+    typeof message === 'object' &&
+    typeof (message as MessageDescriptor).id !== 'undefined'
+  );
+}
+
+const FormError: ComponentType<Props> = ({ error }) => {
+  if (!error) {
+    return null;
+  }
+
+  let content: ReactNode;
+
+  if (isMessageDescriptor(error)) {
+    content = error;
+  } else {
+    content = resolveError(error);
+  }
+
+  return <div className={styles.fieldError}>{content}</div>;
 };
+
+export default FormError;
diff --git a/packages/app/components/ui/form/FormModel.ts b/packages/app/components/ui/form/FormModel.ts
index 0a076c4..0e3b2fd 100644
--- a/packages/app/components/ui/form/FormModel.ts
+++ b/packages/app/components/ui/form/FormModel.ts
@@ -6,15 +6,13 @@ export type ValidationError =
   | string
   | {
       type: string;
-      payload?: { [key: string]: any };
+      payload?: Record<string, any>;
     };
 
 export default class FormModel {
-  fields = {};
-  errors: {
-    [fieldId: string]: ValidationError;
-  } = {};
-  handlers: LoadingListener[] = [];
+  fields: Record<string, any> = {};
+  errors: Record<string, ValidationError> = {};
+  handlers: Array<LoadingListener> = [];
   renderErrors: boolean;
   _isLoading: boolean;
 
@@ -27,7 +25,7 @@ export default class FormModel {
     this.renderErrors = options.renderErrors !== false;
   }
 
-  hasField(fieldId: string) {
+  hasField(fieldId: string): boolean {
     return !!this.fields[fieldId];
   }
 
@@ -83,7 +81,7 @@ export default class FormModel {
    *
    * @param {string} fieldId - an id of field to focus
    */
-  focus(fieldId: string) {
+  focus(fieldId: string): void {
     if (!this.fields[fieldId]) {
       throw new Error(
         `Can not focus. The field with an id ${fieldId} does not exists`,
@@ -100,7 +98,7 @@ export default class FormModel {
    *
    * @returns {string}
    */
-  value(fieldId: string) {
+  value(fieldId: string): string {
     const field = this.fields[fieldId];
 
     if (!field) {
@@ -124,7 +122,7 @@ export default class FormModel {
    *
    * @param {object} errors - object maping {fieldId: errorType}
    */
-  setErrors(errors: { [key: string]: ValidationError }) {
+  setErrors(errors: Record<string, ValidationError>): void {
     if (typeof errors !== 'object' || errors === null) {
       throw new Error('Errors must be an object');
     }
@@ -151,21 +149,11 @@ export default class FormModel {
     return error || null;
   }
 
-  /**
-   * Get error by id
-   *
-   * @param {string} fieldId - an id of field to get error for
-   *
-   * @returns {string|object|null}
-   */
-  getError(fieldId: string) {
+  getError(fieldId: string): ValidationError | null {
     return this.errors[fieldId] || null;
   }
 
-  /**
-   * @returns {bool}
-   */
-  hasErrors() {
+  hasErrors(): boolean {
     return Object.keys(this.errors).length > 0;
   }
 
@@ -174,7 +162,7 @@ export default class FormModel {
    *
    * @returns {object}
    */
-  serialize(): { [key: string]: any } {
+  serialize(): Record<string, any> {
     return Object.keys(this.fields).reduce((acc, fieldId) => {
       const field = this.fields[fieldId];
 
@@ -185,7 +173,7 @@ export default class FormModel {
       }
 
       return acc;
-    }, {});
+    }, {} as Record<string, any>);
   }
 
   /**
@@ -193,7 +181,7 @@ export default class FormModel {
    *
    * @param {Function} fn
    */
-  addLoadingListener(fn: LoadingListener) {
+  addLoadingListener(fn: LoadingListener): void {
     this.removeLoadingListener(fn);
     this.handlers.push(fn);
   }
@@ -203,14 +191,14 @@ export default class FormModel {
    *
    * @param {Function} fn
    */
-  removeLoadingListener(fn: LoadingListener) {
+  removeLoadingListener(fn: LoadingListener): void {
     this.handlers = this.handlers.filter(handler => handler !== fn);
   }
 
   /**
    * Switch form in loading state
    */
-  beginLoading() {
+  beginLoading(): void {
     this._isLoading = true;
     this.notifyHandlers();
   }
@@ -218,12 +206,12 @@ export default class FormModel {
   /**
    * Disable loading state
    */
-  endLoading() {
+  endLoading(): void {
     this._isLoading = false;
     this.notifyHandlers();
   }
 
-  private notifyHandlers() {
+  private notifyHandlers(): void {
     this.handlers.forEach(fn => fn(this._isLoading));
   }
 }
diff --git a/packages/app/components/ui/form/Input.test.tsx b/packages/app/components/ui/form/Input.test.tsx
index 0c6ae69..57f2b8c 100644
--- a/packages/app/components/ui/form/Input.test.tsx
+++ b/packages/app/components/ui/form/Input.test.tsx
@@ -22,7 +22,7 @@ describe('Input', () => {
     );
 
     expect(
-      wrapper.find('input[name="test"]').getDOMNode().value,
+      wrapper.find('input[name="test"]').getDOMNode<HTMLInputElement>().value,
       'to equal',
       'foo',
     );
diff --git a/packages/app/components/ui/form/TextArea.tsx b/packages/app/components/ui/form/TextArea.tsx
index bf7bc5c..56e86f4 100644
--- a/packages/app/components/ui/form/TextArea.tsx
+++ b/packages/app/components/ui/form/TextArea.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
-import TextareaAutosize from 'react-textarea-autosize';
+import TextareaAutosize, {
+  TextareaAutosizeProps,
+} from 'react-textarea-autosize';
 import clsx from 'clsx';
 import { uniqueId, omit } from 'app/functions';
 import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';
@@ -8,22 +10,15 @@ import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-type TextareaAutosizeProps = {
-  onHeightChange?: (number, TextareaAutosizeProps) => void;
-  useCacheForDOMMeasurements?: boolean;
-  minRows?: number;
-  maxRows?: number;
-  inputRef?: (el?: HTMLTextAreaElement) => void;
-};
+interface OwnProps {
+  placeholder?: string | MessageDescriptor;
+  label?: string | MessageDescriptor;
+  skin: Skin;
+  color: Color;
+}
 
 export default class TextArea extends FormInputComponent<
-  {
-    placeholder?: string | MessageDescriptor;
-    label?: string | MessageDescriptor;
-    skin: Skin;
-    color: Color;
-  } & TextareaAutosizeProps &
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>
+  OwnProps & Omit<TextareaAutosizeProps, keyof OwnProps>
 > {
   static defaultProps = {
     color: COLOR_GREEN,
diff --git a/packages/app/components/ui/loader/ComponentLoader.tsx b/packages/app/components/ui/loader/ComponentLoader.tsx
index a32271f..575f732 100644
--- a/packages/app/components/ui/loader/ComponentLoader.tsx
+++ b/packages/app/components/ui/loader/ComponentLoader.tsx
@@ -1,26 +1,29 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import clsx from 'clsx';
+
 import { Skin } from 'app/components/ui';
 
 import styles from './componentLoader.scss';
 
 // TODO: add mode to not show loader until first ~150ms
 
-function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
-  return (
-    <div
-      className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
-    >
-      <div className={styles.spins}>
-        {new Array(5).fill(0).map((_, index) => (
-          <div
-            className={clsx(styles.spin, styles[`spin${index}`])}
-            key={index}
-          />
-        ))}
-      </div>
-    </div>
-  );
+interface Props {
+  skin?: Skin;
 }
 
+const ComponentLoader: ComponentType<Props> = ({ skin = 'dark' }) => (
+  <div
+    className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
+  >
+    <div className={styles.spins}>
+      {new Array(5).fill(0).map((_, index) => (
+        <div
+          className={clsx(styles.spin, styles[`spin${index}`])}
+          key={index}
+        />
+      ))}
+    </div>
+  </div>
+);
+
 export default ComponentLoader;
diff --git a/packages/app/components/ui/loader/ImageLoader.tsx b/packages/app/components/ui/loader/ImageLoader.tsx
index 65d5943..6c0cd82 100644
--- a/packages/app/components/ui/loader/ImageLoader.tsx
+++ b/packages/app/components/ui/loader/ImageLoader.tsx
@@ -1,71 +1,64 @@
-import React from 'react';
+import React, { ComponentType, useEffect, useState } from 'react';
 import clsx from 'clsx';
-import { ComponentLoader } from 'app/components/ui/loader';
+
 import { SKIN_LIGHT } from 'app/components/ui';
 
+import ComponentLoader from './ComponentLoader';
 import styles from './imageLoader.scss';
 
-export default class ImageLoader extends React.Component<
-  {
-    src: string;
-    alt: string;
-    ratio: number; // width:height ratio
-    onLoad?: Function;
-  },
-  {
-    isLoading: boolean;
-  }
-> {
-  state = {
-    isLoading: true,
-  };
-
-  componentDidMount() {
-    this.preloadImage();
-  }
-
-  preloadImage() {
-    const img = new Image();
-    img.onload = () => this.imageLoaded();
-    img.onerror = () => this.preloadImage();
-    img.src = this.props.src;
-  }
-
-  imageLoaded() {
-    this.setState({ isLoading: false });
-
-    if (this.props.onLoad) {
-      this.props.onLoad();
-    }
-  }
-
-  render() {
-    const { isLoading } = this.state;
-    const { src, alt, ratio } = this.props;
-
-    return (
-      <div className={styles.container}>
-        <div
-          style={{
-            height: 0,
-            paddingBottom: `${ratio * 100}%`,
-          }}
-        />
-
-        {isLoading && (
-          <div className={styles.loader}>
-            <ComponentLoader skin={SKIN_LIGHT} />
-          </div>
-        )}
-
-        <div
-          className={clsx(styles.image, {
-            [styles.imageLoaded]: !isLoading,
-          })}
-        >
-          <img src={src} alt={alt} />
-        </div>
-      </div>
-    );
-  }
+interface Props {
+  src: string;
+  alt: string;
+  ratio: number; // width:height ratio
+  onLoad?: () => void;
 }
+
+const ImageLoader: ComponentType<Props> = ({
+  src,
+  alt,
+  ratio,
+  onLoad = () => {},
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    function preloadImage() {
+      const img = new Image();
+      img.onload = () => {
+        setIsLoading(false);
+        onLoad();
+      };
+      img.onerror = preloadImage;
+      img.src = src;
+    }
+
+    preloadImage();
+  }, [src]);
+
+  return (
+    <div className={styles.container}>
+      <div
+        style={{
+          height: 0,
+          paddingBottom: `${ratio * 100}%`,
+        }}
+      />
+
+      {isLoading && (
+        <div className={styles.loader}>
+          <ComponentLoader skin={SKIN_LIGHT} />
+        </div>
+      )}
+
+      <div
+        className={clsx(styles.image, {
+          [styles.imageLoaded]: !isLoading,
+        })}
+      >
+        <img src={src} alt={alt} />
+      </div>
+    </div>
+  );
+};
+
+export default ImageLoader;
diff --git a/packages/app/components/ui/motion/SlideMotion.tsx b/packages/app/components/ui/motion/SlideMotion.tsx
index b781cbd..4144fef 100644
--- a/packages/app/components/ui/motion/SlideMotion.tsx
+++ b/packages/app/components/ui/motion/SlideMotion.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Motion, spring } from 'react-motion';
+
 import MeasureHeight from 'app/components/MeasureHeight';
 
 import styles from './slide-motion.scss';
@@ -10,18 +11,19 @@ interface Props {
 }
 
 interface State {
-  // [stepHeight: string]: number;
   version: string;
   prevChildren: React.ReactNode | undefined;
+  stepsHeights: Record<Props['activeStep'], number>;
 }
 
 class SlideMotion extends React.PureComponent<Props, State> {
   state: State = {
     prevChildren: undefined, // to track version updates
     version: `${this.props.activeStep}.0`,
+    stepsHeights: [],
   };
 
-  isHeightMeasured: boolean;
+  private isHeightMeasured: boolean;
 
   static getDerivedStateFromProps(props: Props, state: State) {
     let [, version] = state.version.split('.').map(Number);
@@ -42,7 +44,7 @@ class SlideMotion extends React.PureComponent<Props, State> {
 
     const { version } = this.state;
 
-    const activeStepHeight = this.state[`step${activeStep}Height`] || 0;
+    const activeStepHeight = this.state.stepsHeights[activeStep] || 0;
 
     // a hack to disable height animation on first render
     const { isHeightMeasured } = this;
@@ -65,7 +67,7 @@ class SlideMotion extends React.PureComponent<Props, State> {
 
     return (
       <Motion style={motionStyle}>
-        {(interpolatingStyle: { height: number; transform: string }) => (
+        {interpolatingStyle => (
           <div
             style={{
               overflow: 'hidden',
@@ -96,13 +98,14 @@ class SlideMotion extends React.PureComponent<Props, State> {
     );
   }
 
-  onStepMeasure(step: number) {
-    return (height: number) =>
-      // @ts-ignore
-      this.setState({
-        [`step${step}Height`]: height,
-      });
-  }
+  onStepMeasure = (step: number) => (height: number) => {
+    this.setState({
+      stepsHeights: {
+        ...this.state.stepsHeights,
+        [step]: height,
+      },
+    });
+  };
 }
 
 export default SlideMotion;
diff --git a/packages/app/components/ui/popup/PopupStack.test.js b/packages/app/components/ui/popup/PopupStack.test.tsx
similarity index 96%
rename from packages/app/components/ui/popup/PopupStack.test.js
rename to packages/app/components/ui/popup/PopupStack.test.tsx
index 48ee0b8..98bca1f 100644
--- a/packages/app/components/ui/popup/PopupStack.test.js
+++ b/packages/app/components/ui/popup/PopupStack.test.tsx
@@ -5,10 +5,10 @@ import React from 'react';
 
 import { shallow, mount } from 'enzyme';
 
-import { PopupStack } from 'app/components/ui/popup/PopupStack';
+import PopupStack from 'app/components/ui/popup/PopupStack';
 import styles from 'app/components/ui/popup/popup.scss';
 
-function DummyPopup(/** @type {{[key: string]: any}} */ _props) {
+function DummyPopup(_props: Record<string, any>) {
   return null;
 }
 
@@ -39,7 +39,7 @@ describe('<PopupStack />', () => {
       destroy: () => {},
       popups: [
         {
-          Popup: (props = {}) => {
+          Popup: (props = { onClose: Function }) => {
             // eslint-disable-next-line
             expect(props.onClose, 'to be a', 'function');
 
diff --git a/packages/app/components/ui/popup/PopupStack.tsx b/packages/app/components/ui/popup/PopupStack.tsx
index 21a2a22..75a97c6 100644
--- a/packages/app/components/ui/popup/PopupStack.tsx
+++ b/packages/app/components/ui/popup/PopupStack.tsx
@@ -2,16 +2,19 @@ import React from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { browserHistory } from 'app/services/history';
 import { connect } from 'react-redux';
+import { Location } from 'history';
 import { RootState } from 'app/reducers';
 
 import { PopupConfig } from './reducer';
 import { destroy } from './actions';
 import styles from './popup.scss';
 
-export class PopupStack extends React.Component<{
+interface Props {
   popups: PopupConfig[];
   destroy: (popup: PopupConfig) => void;
-}> {
+}
+
+export class PopupStack extends React.Component<Props> {
   unlistenTransition: () => void;
 
   componentDidMount() {
@@ -87,7 +90,7 @@ export class PopupStack extends React.Component<{
     }
   };
 
-  onRouteLeave = nextLocation => {
+  onRouteLeave = (nextLocation: Location) => {
     if (nextLocation) {
       this.popStack();
     }
diff --git a/packages/app/components/ui/popup/actions.ts b/packages/app/components/ui/popup/actions.ts
index 2e236c6..71d1a04 100644
--- a/packages/app/components/ui/popup/actions.ts
+++ b/packages/app/components/ui/popup/actions.ts
@@ -1,17 +1,28 @@
+import { Action as ReduxPopup } from 'redux';
 import { PopupConfig } from './reducer';
 
-export const POPUP_CREATE = 'POPUP_CREATE';
-export function create(payload: PopupConfig) {
-  return {
-    type: POPUP_CREATE,
-    payload,
-  };
+interface PopupCreateAction extends ReduxPopup {
+  type: 'POPUP_CREATE';
+  payload: PopupConfig;
 }
 
-export const POPUP_DESTROY = 'POPUP_DESTROY';
-export function destroy(popup: PopupConfig) {
+export function create(popup: PopupConfig): PopupCreateAction {
   return {
-    type: POPUP_DESTROY,
+    type: 'POPUP_CREATE',
     payload: popup,
   };
 }
+
+interface PopupDestroyAction extends ReduxPopup {
+  type: 'POPUP_DESTROY';
+  payload: PopupConfig;
+}
+
+export function destroy(popup: PopupConfig): PopupDestroyAction {
+  return {
+    type: 'POPUP_DESTROY',
+    payload: popup,
+  };
+}
+
+export type Action = PopupCreateAction | PopupDestroyAction;
diff --git a/packages/app/components/ui/popup/reducer.test.js b/packages/app/components/ui/popup/reducer.test.tsx
similarity index 86%
rename from packages/app/components/ui/popup/reducer.test.js
rename to packages/app/components/ui/popup/reducer.test.tsx
index 55fbbcc..f533eca 100644
--- a/packages/app/components/ui/popup/reducer.test.js
+++ b/packages/app/components/ui/popup/reducer.test.tsx
@@ -1,7 +1,11 @@
+import React, { ComponentType } from 'react';
+
 import expect from 'app/test/unexpected';
-import React from 'react';
-import reducer from 'app/components/ui/popup/reducer';
-import { create, destroy } from 'app/components/ui/popup/actions';
+
+import reducer, { PopupConfig, State } from './reducer';
+import { create, destroy } from './actions';
+
+const FakeComponent: ComponentType = () => <span />;
 
 describe('popup/reducer', () => {
   it('should have no popups by default', () => {
@@ -61,12 +65,12 @@ describe('popup/reducer', () => {
   });
 
   describe('#destroy', () => {
-    let state;
-    let popup;
+    let state: State;
+    let popup: PopupConfig;
 
     beforeEach(() => {
       state = reducer(state, create({ Popup: FakeComponent }));
-      popup = state.popups[0];
+      [popup] = state.popups;
     });
 
     it('should remove popup', () => {
@@ -92,7 +96,3 @@ describe('popup/reducer', () => {
     });
   });
 });
-
-function FakeComponent() {
-  return <span />;
-}
diff --git a/packages/app/components/ui/popup/reducer.ts b/packages/app/components/ui/popup/reducer.ts
index 6b99e72..c4982ec 100644
--- a/packages/app/components/ui/popup/reducer.ts
+++ b/packages/app/components/ui/popup/reducer.ts
@@ -1,35 +1,33 @@
 import React from 'react';
 import { combineReducers } from 'redux';
 
-import { POPUP_CREATE, POPUP_DESTROY } from './actions';
+import { Action } from './actions';
 
 export interface PopupConfig {
   Popup: React.ElementType;
-  props?: { [key: string]: any };
-  // do not allow hiding popup
+  props?: Record<string, any>;
+  // Don't allow hiding popup
   disableOverlayClose?: boolean;
 }
 
 export type State = {
-  popups: PopupConfig[];
+  popups: Array<PopupConfig>;
 };
 
 export default combineReducers<State>({
   popups,
 });
 
-function popups(state: PopupConfig[] = [], { type, payload }) {
+function popups(state: Array<PopupConfig> = [], { type, payload }: Action) {
   switch (type) {
-    case POPUP_CREATE:
+    case 'POPUP_CREATE':
       if (!payload.Popup) {
         throw new Error('Popup is required');
       }
 
       return state.concat(payload);
-
-    case POPUP_DESTROY:
+    case 'POPUP_DESTROY':
       return state.filter(popup => popup !== payload);
-
     default:
       return state;
   }
diff --git a/packages/app/components/ui/scroll/ScrollIntoView.tsx b/packages/app/components/ui/scroll/ScrollIntoView.tsx
index 57babac..735f74a 100644
--- a/packages/app/components/ui/scroll/ScrollIntoView.tsx
+++ b/packages/app/components/ui/scroll/ScrollIntoView.tsx
@@ -3,16 +3,18 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { restoreScroll } from './scroll';
 
-class ScrollIntoView extends React.PureComponent<
-  RouteComponentProps & {
-    top?: boolean; // do not touch any DOM and simply scroll to top on location change
-  }
-> {
+interface OwnProps {
+  top?: boolean; // don't touch any DOM and simply scroll to top on location change
+}
+
+type Props = RouteComponentProps & OwnProps;
+
+class ScrollIntoView extends React.PureComponent<Props> {
   componentDidMount() {
     this.onPageUpdate();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
     if (this.props.location !== prevProps.location) {
       this.onPageUpdate();
     }
diff --git a/packages/app/components/user/middlewares/bearerHeaderMiddleware.test.ts b/packages/app/components/user/middlewares/bearerHeaderMiddleware.test.ts
index 73e3ae4..325b19a 100644
--- a/packages/app/components/user/middlewares/bearerHeaderMiddleware.test.ts
+++ b/packages/app/components/user/middlewares/bearerHeaderMiddleware.test.ts
@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import expect from 'app/test/unexpected';
 import { RootState } from 'app/reducers';
 
 import bearerHeaderMiddleware from 'app/components/user/middlewares/bearerHeaderMiddleware';
+import { MiddlewareRequestOptions } from '../../../services/request/PromiseMiddlewareLayer';
 
 describe('bearerHeaderMiddleware', () => {
   const emptyState: RootState = {
@@ -33,27 +35,29 @@ describe('bearerHeaderMiddleware', () => {
     } as any);
 
     it('should set Authorization header', async () => {
-      let data: any = {
+      let data: MiddlewareRequestOptions = {
+        url: '',
         options: {
           headers: {},
         },
       };
 
-      data = middleware.before && (await middleware.before(data));
+      data = await middleware.before!(data);
 
       expectBearerHeader(data, token);
     });
 
     it('overrides user.token with options.token if available', async () => {
       const tokenOverride = 'tokenOverride';
-      let data: any = {
+      let data: MiddlewareRequestOptions = {
+        url: '',
         options: {
           headers: {},
           token: tokenOverride,
         },
       };
 
-      data = middleware.before && (await middleware.before(data));
+      data = await middleware.before!(data);
 
       expectBearerHeader(data, tokenOverride);
     });
@@ -62,16 +66,12 @@ describe('bearerHeaderMiddleware', () => {
       const tokenOverride = null;
       const data: any = {
         options: {
-          headers: {} as { [key: string]: any },
+          headers: {},
           token: tokenOverride,
         },
       };
 
-      if (!middleware.before) {
-        throw new Error('No middleware.before');
-      }
-
-      const resp = await middleware.before(data);
+      const resp = await middleware.before!(data);
 
       expect(resp.options.headers.Authorization, 'to be undefined');
     });
@@ -84,22 +84,19 @@ describe('bearerHeaderMiddleware', () => {
       }),
     } as any);
 
-    const data: any = {
+    const data: MiddlewareRequestOptions = {
+      url: '',
       options: {
-        headers: {} as { [key: string]: any },
+        headers: {},
       },
     };
 
-    if (!middleware.before) {
-      throw new Error('No middleware.before');
-    }
-
-    const resp = await middleware.before(data);
+    const resp = await middleware.before!(data);
 
     expect(resp.options.headers.Authorization, 'to be undefined');
   });
 
-  function expectBearerHeader(data, token) {
+  function expectBearerHeader(data: MiddlewareRequestOptions, token: string) {
     expect(data.options.headers, 'to satisfy', {
       Authorization: `Bearer ${token}`,
     });
diff --git a/packages/app/components/user/middlewares/refreshTokenMiddleware.test.ts b/packages/app/components/user/middlewares/refreshTokenMiddleware.test.ts
index 2b78fd6..d1dfa0d 100644
--- a/packages/app/components/user/middlewares/refreshTokenMiddleware.test.ts
+++ b/packages/app/components/user/middlewares/refreshTokenMiddleware.test.ts
@@ -1,11 +1,13 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import expect from 'app/test/unexpected';
-import sinon from 'sinon';
+import sinon, { SinonSpy, SinonStub } from 'sinon';
 
 import refreshTokenMiddleware from 'app/components/user/middlewares/refreshTokenMiddleware';
 import { browserHistory } from 'app/services/history';
 import * as authentication from 'app/services/api/authentication';
-import { InternalServerError } from 'app/services/request';
+import { InternalServerError, Middleware } from 'app/services/request';
 import { updateToken } from 'app/components/accounts/actions';
+import { MiddlewareRequestOptions } from '../../../services/request/PromiseMiddlewareLayer';
 
 const refreshToken = 'foo';
 const expiredToken =
@@ -15,9 +17,9 @@ const validToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE0NzA3NjE5NzcsImV4cCI6NDEwMjQ0NDgwMCwiaWF0IjoxNDcwNzYxOTc3LCJqdGkiOiJpZDEyMzQ1NiJ9.M4KY4QgHOUzhpAZjWoHJbGsEJPR-RBsJ1c1BKyxvAoU';
 
 describe('refreshTokenMiddleware', () => {
-  let middleware;
-  let getState;
-  let dispatch;
+  let middleware: Middleware;
+  let getState: SinonStub;
+  let dispatch: SinonSpy<[any], any>;
 
   const email = 'test@email.com';
 
@@ -92,7 +94,7 @@ describe('refreshTokenMiddleware', () => {
           Promise.resolve(validToken),
         );
 
-        return middleware.before(data).then(resp => {
+        return middleware.before!(data).then(resp => {
           expect(resp, 'to satisfy', data);
 
           expect(authentication.requestToken, 'to have a call satisfying', [
@@ -102,8 +104,13 @@ describe('refreshTokenMiddleware', () => {
       });
 
       it('should not apply to refresh-token request', () => {
-        const data = { url: '/refresh-token', options: {} };
-        const resp = middleware.before(data);
+        const data: MiddlewareRequestOptions = {
+          url: '/refresh-token',
+          options: {
+            headers: {},
+          },
+        };
+        const resp = middleware.before!(data);
 
         return expect(resp, 'to be fulfilled with', data).then(() =>
           expect(authentication.requestToken, 'was not called'),
@@ -111,11 +118,14 @@ describe('refreshTokenMiddleware', () => {
       });
 
       it('should not auto refresh token if options.token specified', () => {
-        const data = {
+        const data: MiddlewareRequestOptions = {
           url: 'foo',
-          options: { token: 'foo' },
+          options: {
+            token: 'foo',
+            headers: {},
+          },
         };
-        middleware.before(data);
+        middleware.before!(data);
 
         expect(authentication.requestToken, 'was not called');
       });
@@ -132,13 +142,11 @@ describe('refreshTokenMiddleware', () => {
           Promise.resolve(validToken),
         );
 
-        return middleware
-          .before(data)
-          .then(() =>
-            expect(dispatch, 'to have a call satisfying', [
-              updateToken(validToken),
-            ]),
-          );
+        return middleware.before!(data).then(() =>
+          expect(dispatch, 'to have a call satisfying', [
+            updateToken(validToken),
+          ]),
+        );
       });
 
       it('should relogin if token can not be parsed', () => {
@@ -159,9 +167,12 @@ describe('refreshTokenMiddleware', () => {
           user: {},
         });
 
-        const req = { url: 'foo', options: {} };
+        const req: MiddlewareRequestOptions = {
+          url: 'foo',
+          options: { headers: {} },
+        };
 
-        return expect(middleware.before(req), 'to be rejected with', {
+        return expect(middleware.before!(req), 'to be rejected with', {
           message: 'Invalid token',
         }).then(() => {
           expect(authentication.requestToken, 'was not called');
@@ -174,7 +185,7 @@ describe('refreshTokenMiddleware', () => {
         (authentication.requestToken as any).returns(Promise.reject());
 
         return expect(
-          middleware.before({ url: 'foo', options: {} }),
+          middleware.before!({ url: 'foo', options: { headers: {} } }),
           'to be rejected',
         ).then(() => assertRelogin());
       });
@@ -185,7 +196,7 @@ describe('refreshTokenMiddleware', () => {
         (authentication.requestToken as any).returns(Promise.reject(resp));
 
         return expect(
-          middleware.before({ url: 'foo', options: {} }),
+          middleware.before!({ url: 'foo', options: { headers: {} } }),
           'to be rejected with',
           resp,
         ).then(() =>
@@ -205,11 +216,13 @@ describe('refreshTokenMiddleware', () => {
         user: {},
       });
 
-      const data = {
+      const data: MiddlewareRequestOptions = {
         url: 'foo',
-        options: {},
+        options: {
+          headers: {},
+        },
       };
-      const resp = middleware.before(data);
+      const resp = middleware.before!(data);
 
       return expect(resp, 'to be fulfilled with', data).then(() =>
         expect(authentication.requestToken, 'was not called'),
@@ -242,7 +255,7 @@ describe('refreshTokenMiddleware', () => {
       type: 'yii\\web\\UnauthorizedHttpException',
     };
 
-    let restart;
+    let restart: SinonStub;
 
     beforeEach(() => {
       getState.returns({
@@ -275,19 +288,31 @@ describe('refreshTokenMiddleware', () => {
 
     it('should request new token if expired', () =>
       expect(
-        middleware.catch(expiredResponse, { options: {} }, restart),
+        middleware.catch!(
+          expiredResponse,
+          { url: '', options: { headers: {} } },
+          restart,
+        ),
         'to be fulfilled',
       ).then(assertNewTokenRequest));
 
     it('should request new token if invalid credential', () =>
       expect(
-        middleware.catch(badTokenReponse, { options: {} }, restart),
+        middleware.catch!(
+          badTokenReponse,
+          { url: '', options: { headers: {} } },
+          restart,
+        ),
         'to be fulfilled',
       ).then(assertNewTokenRequest));
 
     it('should request new token if token is incorrect', () =>
       expect(
-        middleware.catch(incorrectTokenReponse, { options: {} }, restart),
+        middleware.catch!(
+          incorrectTokenReponse,
+          { url: '', options: { headers: {} } },
+          restart,
+        ),
         'to be fulfilled',
       ).then(assertNewTokenRequest));
 
@@ -310,7 +335,11 @@ describe('refreshTokenMiddleware', () => {
       });
 
       return expect(
-        middleware.catch(incorrectTokenReponse, { options: {} }, restart),
+        middleware.catch!(
+          incorrectTokenReponse,
+          { url: '', options: { headers: {} } },
+          restart,
+        ),
         'to be rejected',
       ).then(() => {
         assertRelogin();
@@ -318,11 +347,13 @@ describe('refreshTokenMiddleware', () => {
     });
 
     it('should pass the request through if options.token specified', () => {
-      const promise = middleware.catch(
+      const promise = middleware.catch!(
         expiredResponse,
         {
+          url: '',
           options: {
             token: 'foo',
+            headers: {},
           },
         },
         restart,
@@ -339,10 +370,13 @@ describe('refreshTokenMiddleware', () => {
     it('should pass the rest of failed requests through', () => {
       const resp = {};
 
-      const promise = middleware.catch(
+      const promise = middleware.catch!(
         resp,
         {
-          options: {},
+          url: '',
+          options: {
+            headers: {},
+          },
         },
         restart,
       );
diff --git a/packages/app/components/userbar/LoggedInPanel.tsx b/packages/app/components/userbar/LoggedInPanel.tsx
index 3468678..225d8af 100644
--- a/packages/app/components/userbar/LoggedInPanel.tsx
+++ b/packages/app/components/userbar/LoggedInPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import clsx from 'clsx';
 import { AccountSwitcher } from 'app/components/accounts';
 
@@ -21,6 +21,7 @@ export default class LoggedInPanel extends React.Component<
 
   componentDidMount() {
     if (window.document) {
+      // @ts-ignore
       window.document.addEventListener('click', this.onBodyClick);
     }
 
@@ -29,6 +30,7 @@ export default class LoggedInPanel extends React.Component<
 
   componentWillUnmount() {
     if (window.document) {
+      // @ts-ignore
       window.document.removeEventListener('click', this.onBodyClick);
     }
 
@@ -105,15 +107,15 @@ function createOnOutsideComponentClickHandler(
   getEl: () => HTMLElement | null,
   isActive: () => boolean,
   callback: () => void,
-) {
+): MouseEventHandler {
   // TODO: we have the same logic in LangMenu
   // Probably we should decouple this into some helper function
   // TODO: the name of function may be better...
-  return (event: { target: HTMLElement } & MouseEvent) => {
+  return event => {
     const el = getEl();
 
     if (isActive() && el) {
-      if (!el.contains(event.target) && el !== event.target) {
+      if (!el.contains(event.target as HTMLElement) && el !== event.target) {
         event.preventDefault();
 
         // add a small delay for the case someone have alredy called toggle
diff --git a/packages/app/i18n/index.d.ts b/packages/app/i18n/index.d.ts
new file mode 100644
index 0000000..63d9a07
--- /dev/null
+++ b/packages/app/i18n/index.d.ts
@@ -0,0 +1,13 @@
+declare module 'app/i18n' {
+  export interface Locale {
+    code: string;
+    name: string;
+    englishName: string;
+    progress: number;
+    isReleased: boolean;
+  }
+
+  const LANGS: Record<string, Locale>;
+
+  export default LANGS;
+}
diff --git a/packages/app/index.tsx b/packages/app/index.tsx
index 9e71dad..eb15787 100644
--- a/packages/app/index.tsx
+++ b/packages/app/index.tsx
@@ -7,12 +7,13 @@ import { factory as userFactory } from 'app/components/user/factory';
 import authFlow from 'app/services/authFlow';
 import storeFactory from 'app/storeFactory';
 import bsodFactory from 'app/components/ui/bsod/factory';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import logger from 'app/services/logger';
 import font from 'app/services/font';
 import history, { browserHistory } from 'app/services/history';
 import i18n from 'app/services/i18n';
 import { loadScript, debounce } from 'app/functions';
+import { Location as HistoryLocation } from 'history';
 
 import App from './shell/App';
 
@@ -75,7 +76,7 @@ function initAnalytics() {
   }
 }
 
-function _trackPageView(location) {
+function _trackPageView(location: HistoryLocation | Location): void {
   const { ga } = win;
 
   ga('set', 'page', location.pathname + location.search);
diff --git a/packages/app/package.json b/packages/app/package.json
index 6a2e9c4..b4aa347 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -36,9 +36,15 @@
   },
   "devDependencies": {
     "@types/debounce": "^1.2.0",
+    "@types/enzyme": "^3.8.0",
     "@types/intl": "^1.2.0",
+    "@types/promise.prototype.finally": "^2.0.3",
     "@types/raf": "^3.4.0",
+    "@types/react-dom": "^16.9.4",
     "@types/react-helmet": "^5.0.15",
+    "@types/react-motion": "^0.0.29",
+    "@types/react-transition-group": "^4.2.3",
+    "@types/webfontloader": "^1.6.29",
     "@types/webpack-env": "^1.15.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.15.1"
diff --git a/packages/app/pages/404/PageNotFound.tsx b/packages/app/pages/404/PageNotFound.tsx
index d8ad3ab..93a3859 100644
--- a/packages/app/pages/404/PageNotFound.tsx
+++ b/packages/app/pages/404/PageNotFound.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
@@ -8,48 +8,48 @@ import styles from './404.scss';
 import messages from './PageNotFound.intl.json';
 import profileStyles from '../profile/profile.scss';
 
-export default function PageNotFound() {
-  return (
-    <div className={styles.page}>
-      <Message {...messages.title}>
-        {pageTitle => <Helmet title={pageTitle as string} />}
-      </Message>
+const PageNotFound: ComponentType = () => (
+  <div className={styles.page}>
+    <Message {...messages.title}>
+      {pageTitle => <Helmet title={pageTitle as string} />}
+    </Message>
 
-      <div className={styles.loading}>
-        <div className={styles.cube} />
-        <div className={styles.road} />
-        <div className={styles.rocks}>
-          <span className={styles.rockOne} />
-          <span className={styles.rockTwo} />
-          <span className={styles.rockThree} />
-          <span className={styles.rockFour} />
-          <span className={styles.rockFive} />
-        </div>
-        <div className={styles.clouds}>
-          <span className={styles.cloudOne} />
-          <span className={styles.cloudTwo} />
-          <span className={styles.cloudThree} />
-        </div>
+    <div className={styles.loading}>
+      <div className={styles.cube} />
+      <div className={styles.road} />
+      <div className={styles.rocks}>
+        <span className={styles.rockOne} />
+        <span className={styles.rockTwo} />
+        <span className={styles.rockThree} />
+        <span className={styles.rockFour} />
+        <span className={styles.rockFive} />
       </div>
-      <p className={styles.text}>
-        <Message {...messages.nothingHere} />
-      </p>
-      <p className={styles.subText}>
-        <Message
-          {...messages.returnToTheHomePage}
-          values={{
-            link: (
-              <Link to="/">
-                <Message {...messages.homePage} />
-              </Link>
-            ),
-          }}
-        />
-      </p>
-
-      <div className={profileStyles.footer}>
-        <FooterMenu />
+      <div className={styles.clouds}>
+        <span className={styles.cloudOne} />
+        <span className={styles.cloudTwo} />
+        <span className={styles.cloudThree} />
       </div>
     </div>
-  );
-}
+    <p className={styles.text}>
+      <Message {...messages.nothingHere} />
+    </p>
+    <p className={styles.subText}>
+      <Message
+        {...messages.returnToTheHomePage}
+        values={{
+          link: (
+            <Link to="/">
+              <Message {...messages.homePage} />
+            </Link>
+          ),
+        }}
+      />
+    </p>
+
+    <div className={profileStyles.footer}>
+      <FooterMenu />
+    </div>
+  </div>
+);
+
+export default PageNotFound;
diff --git a/packages/app/pages/auth/AuthPage.tsx b/packages/app/pages/auth/AuthPage.tsx
index 3b8cad8..bfaa8b2 100644
--- a/packages/app/pages/auth/AuthPage.tsx
+++ b/packages/app/pages/auth/AuthPage.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
+import React, { ComponentType, ReactNode, useCallback, useState } from 'react';
+import { Route, Switch, Redirect, RouteComponentProps } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
 import AppInfo from 'app/components/auth/appInfo/AppInfo';
 import PanelTransition from 'app/components/auth/PanelTransition';
 import Register from 'app/components/auth/register/Register';
@@ -14,10 +16,9 @@ import ForgotPassword from 'app/components/auth/forgotPassword/ForgotPassword';
 import RecoverPassword from 'app/components/auth/recoverPassword/RecoverPassword';
 import Mfa from 'app/components/auth/mfa/Mfa';
 import Finish from 'app/components/auth/finish/Finish';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+
 import { RootState } from 'app/reducers';
-import { Client } from 'app/components/auth/reducer';
+import { Factory } from 'app/components/auth/factory';
 
 import styles from './auth.scss';
 
@@ -27,88 +28,72 @@ import styles from './auth.scss';
 // so that it persist disregarding remounts
 let isSidebarHiddenCache = false;
 
-interface Props {
-  client: Client | null;
-}
+const AuthPage: ComponentType = () => {
+  const [isSidebarHidden, setIsSidebarHidden] = useState<boolean>(
+    isSidebarHiddenCache,
+  );
+  const client = useSelector((state: RootState) => state.auth.client);
 
-class AuthPage extends React.Component<
-  Props,
-  {
-    isSidebarHidden: boolean;
-  }
-> {
-  state = {
-    isSidebarHidden: isSidebarHiddenCache,
-  };
-
-  render() {
-    const { isSidebarHidden } = this.state;
-    const { client } = this.props;
-
-    return (
-      <div>
-        <div
-          className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}
-        >
-          <AppInfo {...client} onGoToAuth={this.onGoToAuth} />
-        </div>
-
-        <div className={styles.content} data-e2e-content>
-          <Switch>
-            <Route path="/login" render={renderPanelTransition(Login)} />
-            <Route path="/mfa" render={renderPanelTransition(Mfa)} />
-            <Route path="/password" render={renderPanelTransition(Password)} />
-            <Route path="/register" render={renderPanelTransition(Register)} />
-            <Route
-              path="/activation/:key?"
-              render={renderPanelTransition(Activation)}
-            />
-            <Route
-              path="/resend-activation"
-              render={renderPanelTransition(ResendActivation)}
-            />
-            <Route
-              path="/oauth/permissions"
-              render={renderPanelTransition(Permissions)}
-            />
-            <Route
-              path="/choose-account"
-              render={renderPanelTransition(ChooseAccount)}
-            />
-            <Route
-              path="/oauth/choose-account"
-              render={renderPanelTransition(ChooseAccount)}
-            />
-            <Route path="/oauth/finish" component={Finish} />
-            <Route
-              path="/accept-rules"
-              render={renderPanelTransition(AcceptRules)}
-            />
-            <Route
-              path="/forgot-password"
-              render={renderPanelTransition(ForgotPassword)}
-            />
-            <Route
-              path="/recover-password/:key?"
-              render={renderPanelTransition(RecoverPassword)}
-            />
-            <Redirect to="/404" />
-          </Switch>
-        </div>
-      </div>
-    );
-  }
-
-  onGoToAuth = () => {
+  const goToAuth = useCallback(() => {
     isSidebarHiddenCache = true;
+    setIsSidebarHidden(true);
+  }, []);
 
-    this.setState({
-      isSidebarHidden: true,
-    });
-  };
-}
+  return (
+    <div>
+      <div className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}>
+        <AppInfo {...client} onGoToAuth={goToAuth} />
+      </div>
 
-function renderPanelTransition(factory) {
+      <div className={styles.content} data-e2e-content>
+        <Switch>
+          <Route path="/login" render={renderPanelTransition(Login)} />
+          <Route path="/mfa" render={renderPanelTransition(Mfa)} />
+          <Route path="/password" render={renderPanelTransition(Password)} />
+          <Route path="/register" render={renderPanelTransition(Register)} />
+          <Route
+            path="/activation/:key?"
+            render={renderPanelTransition(Activation)}
+          />
+          <Route
+            path="/resend-activation"
+            render={renderPanelTransition(ResendActivation)}
+          />
+          <Route
+            path="/oauth/permissions"
+            render={renderPanelTransition(Permissions)}
+          />
+          <Route
+            path="/choose-account"
+            render={renderPanelTransition(ChooseAccount)}
+          />
+          <Route
+            path="/oauth/choose-account"
+            render={renderPanelTransition(ChooseAccount)}
+          />
+          <Route path="/oauth/finish" component={Finish} />
+          <Route
+            path="/accept-rules"
+            render={renderPanelTransition(AcceptRules)}
+          />
+          <Route
+            path="/forgot-password"
+            render={renderPanelTransition(ForgotPassword)}
+          />
+          <Route
+            path="/recover-password/:key?"
+            render={renderPanelTransition(RecoverPassword)}
+          />
+          <Redirect to="/404" />
+        </Switch>
+      </div>
+    </div>
+  );
+};
+
+function renderPanelTransition(
+  factory: Factory,
+): (props: RouteComponentProps<any>) => ReactNode {
   const { Title, Body, Footer, Links } = factory();
 
   return props => (
@@ -122,8 +107,4 @@ function renderPanelTransition(factory) {
   );
 }
 
-export default withRouter(
-  connect((state: RootState) => ({
-    client: state.auth.client,
-  }))(AuthPage),
-);
+export default AuthPage;
diff --git a/packages/app/pages/auth/SuccessOauthPage.tsx b/packages/app/pages/auth/SuccessOauthPage.tsx
index f392ba1..f235419 100644
--- a/packages/app/pages/auth/SuccessOauthPage.tsx
+++ b/packages/app/pages/auth/SuccessOauthPage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import { Query } from 'app/services/request';
 
 import rootMessages from '../root/RootPage.intl.json';
diff --git a/packages/app/pages/dev/DevPage.tsx b/packages/app/pages/dev/DevPage.tsx
index 9ff5aeb..f10c2a9 100644
--- a/packages/app/pages/dev/DevPage.tsx
+++ b/packages/app/pages/dev/DevPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { FooterMenu } from 'app/components/footerMenu';
 import PrivateRoute from 'app/containers/PrivateRoute';
@@ -8,32 +8,32 @@ import ApplicationsListPage from './ApplicationsListPage';
 import CreateNewApplicationPage from './CreateNewApplicationPage';
 import UpdateApplicationPage from './UpdateApplicationPage';
 
-export default function DevPage() {
-  return (
-    <div className={styles.container}>
-      <div data-e2e-content>
-        <Switch>
-          <Route
-            path="/dev/applications"
-            exact
-            component={ApplicationsListPage}
-          />
-          <PrivateRoute
-            path="/dev/applications/new"
-            exact
-            component={CreateNewApplicationPage}
-          />
-          <PrivateRoute
-            path="/dev/applications/:clientId"
-            component={UpdateApplicationPage}
-          />
-          <Redirect to="/dev/applications" />
-        </Switch>
-      </div>
-
-      <div className={styles.footer}>
-        <FooterMenu />
-      </div>
+const DevPage: ComponentType = () => (
+  <div className={styles.container}>
+    <div data-e2e-content>
+      <Switch>
+        <Route
+          path="/dev/applications"
+          exact
+          component={ApplicationsListPage}
+        />
+        <PrivateRoute
+          path="/dev/applications/new"
+          exact
+          component={CreateNewApplicationPage}
+        />
+        <PrivateRoute
+          path="/dev/applications/:clientId"
+          component={UpdateApplicationPage}
+        />
+        <Redirect to="/dev/applications" />
+      </Switch>
     </div>
-  );
-}
+
+    <div className={styles.footer}>
+      <FooterMenu />
+    </div>
+  </div>
+);
+
+export default DevPage;
diff --git a/packages/app/pages/dev/UpdateApplicationPage.tsx b/packages/app/pages/dev/UpdateApplicationPage.tsx
index d824239..61e5d6f 100644
--- a/packages/app/pages/dev/UpdateApplicationPage.tsx
+++ b/packages/app/pages/dev/UpdateApplicationPage.tsx
@@ -5,7 +5,7 @@ import { RouteComponentProps } from 'react-router';
 import { FormModel } from 'app/components/ui/form';
 import { browserHistory } from 'app/services/history';
 import oauth from 'app/services/api/oauth';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import PageNotFound from 'app/pages/404/PageNotFound';
 import {
   getApp,
diff --git a/packages/app/pages/profile/ChangeEmailPage.tsx b/packages/app/pages/profile/ChangeEmailPage.tsx
index 6804989..4d3c5fa 100644
--- a/packages/app/pages/profile/ChangeEmailPage.tsx
+++ b/packages/app/pages/profile/ChangeEmailPage.tsx
@@ -83,7 +83,9 @@ class ChangeEmailPage extends React.Component<Props> {
   };
 }
 
-function handleErrors(repeatUrl: string | void) {
+function handleErrors(
+  repeatUrl?: string,
+): <T extends { errors: Record<string, any> }>(resp: T) => Promise<T> {
   return resp => {
     if (resp.errors) {
       if (resp.errors.key) {
diff --git a/packages/app/pages/profile/ChangeUsernamePage.tsx b/packages/app/pages/profile/ChangeUsernamePage.tsx
index 723d0c2..59d181d 100644
--- a/packages/app/pages/profile/ChangeUsernamePage.tsx
+++ b/packages/app/pages/profile/ChangeUsernamePage.tsx
@@ -70,6 +70,6 @@ export default connect(
     username: state.user.username,
   }),
   {
-    updateUsername: username => updateUser({ username }),
+    updateUsername: (username: string) => updateUser({ username }),
   },
 )(ChangeUsernamePage);
diff --git a/packages/app/pages/profile/MultiFactorAuthPage.tsx b/packages/app/pages/profile/MultiFactorAuthPage.tsx
index 6fd0b11..9da2816 100644
--- a/packages/app/pages/profile/MultiFactorAuthPage.tsx
+++ b/packages/app/pages/profile/MultiFactorAuthPage.tsx
@@ -60,7 +60,7 @@ class MultiFactorAuthPage extends React.Component<Props> {
     return step;
   }
 
-  onChangeStep = (step: MfaStep) => {
+  onChangeStep = (step: number) => {
     this.props.history.push(`/profile/mfa/step${step + 1}`);
   };
 
diff --git a/packages/app/pages/profile/ProfilePage.tsx b/packages/app/pages/profile/ProfilePage.tsx
index efff313..766a3d2 100644
--- a/packages/app/pages/profile/ProfilePage.tsx
+++ b/packages/app/pages/profile/ProfilePage.tsx
@@ -8,7 +8,7 @@ import logger from 'app/services/logger';
 import { browserHistory } from 'app/services/history';
 import { FooterMenu } from 'app/components/footerMenu';
 import { FormModel } from 'app/components/ui/form';
-import { RootState } from 'app/reducers';
+import { Dispatch, RootState } from 'app/reducers';
 import { Provider } from 'app/components/profile/Context';
 import { ComponentLoader } from 'app/components/ui/loader';
 
@@ -110,7 +110,7 @@ class ProfilePage extends React.Component<Props> {
 
 export default connect(
   (state: RootState) => ({
-    userId: state.user.id,
+    userId: state.user.id!,
   }),
   {
     refreshUserData,
@@ -120,7 +120,7 @@ export default connect(
     }: {
       form: FormModel;
       sendData: () => Promise<any>;
-    }) => dispatch => {
+    }) => (dispatch: Dispatch) => {
       form.beginLoading();
 
       return sendData()
@@ -165,7 +165,7 @@ export default connect(
         })
         .finally(() => form.endLoading());
 
-      function requestPassword(form) {
+      function requestPassword(form: FormModel) {
         return new Promise((resolve, reject) => {
           dispatch(
             createPopup({
diff --git a/packages/app/pages/root/RootPage.tsx b/packages/app/pages/root/RootPage.tsx
index 205490c..2f9c3a4 100644
--- a/packages/app/pages/root/RootPage.tsx
+++ b/packages/app/pages/root/RootPage.tsx
@@ -11,7 +11,7 @@ import PrivateRoute from 'app/containers/PrivateRoute';
 import AuthFlowRoute from 'app/containers/AuthFlowRoute';
 import Userbar from 'app/components/userbar/Userbar';
 import PopupStack from 'app/components/ui/popup/PopupStack';
-import loader from 'app/services/loader';
+import * as loader from 'app/services/loader';
 import { getActiveAccount } from 'app/components/accounts/reducer';
 import { User } from 'app/components/user';
 import { Account } from 'app/components/accounts/reducer';
diff --git a/packages/app/pages/rules/RulesPage.test.tsx b/packages/app/pages/rules/RulesPage.test.tsx
index f361621..98b225b 100644
--- a/packages/app/pages/rules/RulesPage.test.tsx
+++ b/packages/app/pages/rules/RulesPage.test.tsx
@@ -1,17 +1,23 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import sinon from 'sinon';
 import expect from 'app/test/unexpected';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import RulesPage from './RulesPage';
 
+type RulesPageShallowType = ShallowWrapper<
+  ComponentProps<typeof RulesPage>,
+  any,
+  RulesPage
+>;
+
 describe('RulesPage', () => {
   describe('#onRuleClick()', () => {
     const id = 'rule-1-2';
     const pathname = '/foo';
     const search = '?bar';
-    let page;
-    let replace;
+    let page: RulesPageShallowType;
+    let replace: Function;
 
     beforeEach(() => {
       replace = sinon.stub().named('history.replace');
diff --git a/packages/app/polyfills.js b/packages/app/polyfills.ts
similarity index 76%
rename from packages/app/polyfills.js
rename to packages/app/polyfills.ts
index b371459..6a28933 100644
--- a/packages/app/polyfills.js
+++ b/packages/app/polyfills.ts
@@ -2,17 +2,17 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import 'url-search-params-polyfill';
 import 'whatwg-fetch';
-import { shim as shimPromiseFinaly } from 'promise.prototype.finally';
+import { shim as shimPromiseFinally } from 'promise.prototype.finally';
 import { polyfill as rafPolyfill } from 'raf';
 
 rafPolyfill();
-shimPromiseFinaly();
+shimPromiseFinally();
 
 // allow :active styles in mobile Safary
 document.addEventListener('touchstart', () => {}, true);
 
 // disable mobile safary back-forward cache
 // http://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
-window.onpageshow = event => {
+window.onpageshow = (event: PageTransitionEvent) => {
   event.persisted && window.location.reload();
 };
diff --git a/packages/app/services/api/activate.test.ts b/packages/app/services/api/activate.test.ts
index 642b1fb..f242cb6 100644
--- a/packages/app/services/api/activate.test.ts
+++ b/packages/app/services/api/activate.test.ts
@@ -2,7 +2,7 @@ import expect from 'app/test/unexpected';
 import sinon from 'sinon';
 
 import request from 'app/services/request';
-import signup from 'app/services/api/signup';
+import * as signup from 'app/services/api/signup';
 
 describe('signup api', () => {
   describe('#register', () => {
@@ -46,9 +46,7 @@ describe('signup api', () => {
   });
 
   describe('#activate', () => {
-    const params = {
-      key: 'key',
-    };
+    const key = 'key';
 
     beforeEach(() => {
       sinon.stub(request, 'post').named('request.post');
@@ -59,21 +57,21 @@ describe('signup api', () => {
     });
 
     it('should post to confirmation api', () => {
-      signup.activate(params);
+      signup.activate(key);
 
       expect(request.post, 'to have a call satisfying', [
         '/api/signup/confirm',
-        params,
+        { key },
         {},
       ]);
     });
 
     it('should disable any token', () => {
-      signup.activate(params);
+      signup.activate(key);
 
       expect(request.post, 'to have a call satisfying', [
         '/api/signup/confirm',
-        params,
+        { key },
         { token: null },
       ]);
     });
diff --git a/packages/app/services/api/authentication.test.ts b/packages/app/services/api/authentication.test.ts
index 77f4ba2..2ea6baa 100644
--- a/packages/app/services/api/authentication.test.ts
+++ b/packages/app/services/api/authentication.test.ts
@@ -1,28 +1,18 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import expect from 'app/test/unexpected';
-import sinon from 'sinon';
+import sinon, { SinonFakeServer } from 'sinon';
 
 import request from 'app/services/request';
 import * as authentication from 'app/services/api/authentication';
 import * as accounts from 'app/services/api/accounts';
 
 describe('authentication api', () => {
-  let server;
+  let server: SinonFakeServer;
 
   beforeEach(() => {
-    server = sinon.createFakeServer({
+    server = sinon.fakeServer.create({
       autoRespond: true,
     });
-
-    ['get', 'post'].forEach(method => {
-      server[method] = (url, resp = {}, status = 200, headers = {}) => {
-        server.respondWith(method, url, [
-          status,
-          { 'Content-Type': 'application/json', ...headers },
-          JSON.stringify(resp),
-        ]);
-      };
-    });
   });
 
   afterEach(() => {
@@ -156,12 +146,16 @@ describe('authentication api', () => {
       });
 
       it('resolves with new token and user object', async () => {
-        server.post('/api/authentication/refresh-token', {
-          access_token: newToken,
-          refresh_token: validRefreshToken,
-          success: true,
-          expires_in: 50000,
-        });
+        server.respondWith(
+          'POST',
+          '/api/authentication/refresh-token',
+          JSON.stringify({
+            access_token: newToken,
+            refresh_token: validRefreshToken,
+            success: true,
+            expires_in: 50000,
+          }),
+        );
 
         await expect(
           authentication.validateToken(...validateTokenArgs),
@@ -178,7 +172,11 @@ describe('authentication api', () => {
 
       it('rejects if token request failed', () => {
         const error = { error: 'Unexpected error example' };
-        server.post('/api/authentication/refresh-token', error, 500);
+        server.respondWith('POST', '/api/authentication/refresh-token', [
+          500,
+          [],
+          JSON.stringify(error),
+        ]);
 
         return expect(
           authentication.validateToken(...validateTokenArgs),
@@ -205,12 +203,16 @@ describe('authentication api', () => {
       });
 
       it('resolves with new token and user object', async () => {
-        server.post('/api/authentication/refresh-token', {
-          access_token: newToken,
-          refresh_token: validRefreshToken,
-          success: true,
-          expires_in: 50000,
-        });
+        server.respondWith(
+          'POST',
+          '/api/authentication/refresh-token',
+          JSON.stringify({
+            access_token: newToken,
+            refresh_token: validRefreshToken,
+            success: true,
+            expires_in: 50000,
+          }),
+        );
 
         await expect(
           authentication.validateToken(...validateTokenArgs),
@@ -227,7 +229,11 @@ describe('authentication api', () => {
 
       it('rejects if token request failed', () => {
         const error = { error: 'Unexpected error example' };
-        server.post('/api/authentication/refresh-token', error, 500);
+        server.respondWith('POST', '/api/authentication/refresh-token', [
+          500,
+          [],
+          JSON.stringify(error),
+        ]);
 
         return expect(
           authentication.validateToken(...validateTokenArgs),
diff --git a/packages/app/services/api/oauth.ts b/packages/app/services/api/oauth.ts
index ace35da..b0d00f2 100644
--- a/packages/app/services/api/oauth.ts
+++ b/packages/app/services/api/oauth.ts
@@ -8,13 +8,13 @@ export type Scope =
   | 'account_info'
   | 'account_email';
 
-export type Client = {
+export interface Client {
   id: string;
   name: string;
   description: string;
-};
+}
 
-export type OauthAppResponse = {
+export interface OauthAppResponse {
   clientId: string;
   clientSecret: string;
   type: ApplicationType;
@@ -27,9 +27,9 @@ export type OauthAppResponse = {
   redirectUri?: string;
   // fields for 'minecraft-server' type
   minecraftServerIp?: string;
-};
+}
 
-type OauthRequestData = {
+interface OauthRequestData {
   client_id: string;
   redirect_uri: string;
   response_type: string;
@@ -38,37 +38,43 @@ type OauthRequestData = {
   prompt: string;
   login_hint?: string;
   state?: string;
-};
+}
 
-export type OauthData = {
+export interface OauthData {
   clientId: string;
   redirectUrl: string;
   responseType: string;
   description?: string;
   scope: string;
+  // TODO: why prompt is not nullable?
   prompt: string; // comma separated list of 'none' | 'consent' | 'select_account';
   loginHint?: string;
   state?: string;
-};
+}
 
-type FormPayloads = {
+export interface OAuthValidateResponse {
+  session: {
+    scopes: Scope[];
+  };
+  client: Client;
+  oAuth: {}; // TODO: improve typing
+}
+
+interface FormPayloads {
   name?: string;
   description?: string;
   websiteUrl?: string;
   redirectUri?: string;
   minecraftServerIp?: string;
-};
+}
 
 const api = {
   validate(oauthData: OauthData) {
     return request
-      .get<{
-        session: {
-          scopes: Scope[];
-        };
-        client: Client;
-        oAuth: {};
-      }>('/api/oauth2/v1/validate', getOAuthRequest(oauthData))
+      .get<OAuthValidateResponse>(
+        '/api/oauth2/v1/validate',
+        getOAuthRequest(oauthData),
+      )
       .catch(handleOauthParamsValidation);
   },
 
diff --git a/packages/app/services/api/options.test.ts b/packages/app/services/api/options.test.ts
index 4b61038..831ebee 100644
--- a/packages/app/services/api/options.test.ts
+++ b/packages/app/services/api/options.test.ts
@@ -10,7 +10,12 @@ describe('services/api/options', () => {
     sinon
       .stub(request, 'get')
       .named('request.get')
-      .returns(Promise.resolve(expectedResp));
+      .returns(
+        Promise.resolve({
+          originalResponse: new Response(),
+          ...expectedResp,
+        }),
+      );
   });
 
   afterEach(() => {
diff --git a/packages/app/services/api/signup.ts b/packages/app/services/api/signup.ts
index ccf19c7..6595385 100644
--- a/packages/app/services/api/signup.ts
+++ b/packages/app/services/api/signup.ts
@@ -1,33 +1,37 @@
-import request from 'app/services/request';
+import request, { Resp } from 'app/services/request';
 
 import { OAuthResponse } from './authentication';
 
-export default {
-  register({
-    email = '',
-    username = '',
-    password = '',
-    rePassword = '',
-    rulesAgreement = false,
-    lang = '',
-    captcha = '',
-  }) {
-    return request.post(
-      '/api/signup',
-      { email, username, password, rePassword, rulesAgreement, lang, captcha },
-      { token: null },
-    );
-  },
+interface RegisterParams {
+  email?: string;
+  username?: string;
+  password?: string;
+  rePassword?: string;
+  rulesAgreement?: boolean;
+  lang?: string;
+  captcha?: string;
+}
 
-  activate({ key = '' }) {
-    return request.post<OAuthResponse>(
-      '/api/signup/confirm',
-      { key },
-      { token: null },
-    );
-  },
+export function register({
+  email = '',
+  username = '',
+  password = '',
+  rePassword = '',
+  rulesAgreement = false,
+  lang = '',
+  captcha = '',
+}: RegisterParams): Promise<Resp<void>> {
+  return request.post(
+    '/api/signup',
+    { email, username, password, rePassword, rulesAgreement, lang, captcha },
+    { token: null },
+  );
+}
 
-  resendActivation({ email = '', captcha }) {
-    return request.post('/api/signup/repeat-message', { email, captcha });
-  },
-};
+export function activate(key: string = ''): Promise<Resp<OAuthResponse>> {
+  return request.post('/api/signup/confirm', { key }, { token: null });
+}
+
+export function resendActivation(email: string = '', captcha: string = '') {
+  return request.post('/api/signup/repeat-message', { email, captcha });
+}
diff --git a/packages/app/services/authFlow/AbstractState.ts b/packages/app/services/authFlow/AbstractState.ts
index 7d2f210..29bc1fc 100644
--- a/packages/app/services/authFlow/AbstractState.ts
+++ b/packages/app/services/authFlow/AbstractState.ts
@@ -2,11 +2,14 @@
 import { AuthContext } from 'app/services/authFlow';
 
 export default class AbstractState {
-  resolve(context: AuthContext, payload: { [key: string]: any }): any {}
-  goBack(context: AuthContext): any {
+  resolve(
+    context: AuthContext,
+    payload: Record<string, any>,
+  ): Promise<void> | void {}
+  goBack(context: AuthContext): void {
     throw new Error('There is no way back');
   }
-  reject(context: AuthContext, payload: { [key: string]: any }): any {}
-  enter(context: AuthContext): any {}
-  leave(context: AuthContext): any {}
+  reject(context: AuthContext, payload?: Record<string, any>): void {}
+  enter(context: AuthContext): Promise<void> | void {}
+  leave(context: AuthContext): void {}
 }
diff --git a/packages/app/services/authFlow/AcceptRulesState.test.ts b/packages/app/services/authFlow/AcceptRulesState.test.ts
index 69052c5..330f728 100644
--- a/packages/app/services/authFlow/AcceptRulesState.test.ts
+++ b/packages/app/services/authFlow/AcceptRulesState.test.ts
@@ -1,12 +1,19 @@
 import AcceptRulesState from 'app/services/authFlow/AcceptRulesState';
 import CompleteState from 'app/services/authFlow/CompleteState';
+import { SinonMock } from 'sinon';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('AcceptRulesState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: AcceptRulesState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new AcceptRulesState();
diff --git a/packages/app/services/authFlow/AcceptRulesState.ts b/packages/app/services/authFlow/AcceptRulesState.ts
index 543807e..13f74da 100644
--- a/packages/app/services/authFlow/AcceptRulesState.ts
+++ b/packages/app/services/authFlow/AcceptRulesState.ts
@@ -1,10 +1,11 @@
 import logger from 'app/services/logger';
 
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import CompleteState from './CompleteState';
 
 export default class AcceptRulesState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     const { user } = context.getState();
 
     if (user.shouldAcceptRules) {
@@ -14,7 +15,7 @@ export default class AcceptRulesState extends AbstractState {
     }
   }
 
-  resolve(context) {
+  resolve(context: AuthContext): Promise<void> | void {
     context
       .run('acceptRules')
       .then(() => context.setState(new CompleteState()))
@@ -23,7 +24,7 @@ export default class AcceptRulesState extends AbstractState {
       );
   }
 
-  reject(context) {
+  reject(context: AuthContext): void {
     context.run('logout');
   }
 }
diff --git a/packages/app/services/authFlow/ActivationState.test.ts b/packages/app/services/authFlow/ActivationState.test.ts
index 7621b26..b291336 100644
--- a/packages/app/services/authFlow/ActivationState.test.ts
+++ b/packages/app/services/authFlow/ActivationState.test.ts
@@ -1,15 +1,21 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import ActivationState from 'app/services/authFlow/ActivationState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 import ResendActivationState from 'app/services/authFlow/ResendActivationState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('ActivationState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: ActivationState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new ActivationState();
@@ -72,7 +78,7 @@ describe('ActivationState', () => {
       mock.expects('run').returns(promise);
       expectState(mock, CompleteState);
 
-      state.resolve(context);
+      state.resolve(context, {});
 
       return promise;
     });
@@ -83,7 +89,7 @@ describe('ActivationState', () => {
       mock.expects('run').returns(promise);
       mock.expects('setState').never();
 
-      state.resolve(context);
+      state.resolve(context, {});
 
       return promise.catch(mock.verify.bind(mock));
     });
diff --git a/packages/app/services/authFlow/ActivationState.ts b/packages/app/services/authFlow/ActivationState.ts
index 14eee59..f4879e1 100644
--- a/packages/app/services/authFlow/ActivationState.ts
+++ b/packages/app/services/authFlow/ActivationState.ts
@@ -6,14 +6,17 @@ import CompleteState from './CompleteState';
 import ResendActivationState from './ResendActivationState';
 
 export default class ActivationState extends AbstractState {
-  enter(context: AuthContext) {
+  enter(context: AuthContext): Promise<void> | void {
     const url = context.getRequest().path.includes('/activation')
       ? context.getRequest().path
       : '/activation';
     context.navigate(url);
   }
 
-  resolve(context: AuthContext, payload: { [key: string]: any }) {
+  resolve(
+    context: AuthContext,
+    payload: Record<string, any>,
+  ): Promise<void> | void {
     context
       .run('activate', payload)
       .then(() => context.setState(new CompleteState()))
@@ -23,7 +26,7 @@ export default class ActivationState extends AbstractState {
       );
   }
 
-  reject(context: AuthContext) {
+  reject(context: AuthContext): void {
     context.setState(new ResendActivationState());
   }
 }
diff --git a/packages/app/services/authFlow/AuthFlow.functional.test.ts b/packages/app/services/authFlow/AuthFlow.functional.test.ts
index 673139c..785599c 100644
--- a/packages/app/services/authFlow/AuthFlow.functional.test.ts
+++ b/packages/app/services/authFlow/AuthFlow.functional.test.ts
@@ -1,6 +1,8 @@
 import expect from 'app/test/unexpected';
 import sinon from 'sinon';
 
+import { Store } from 'redux';
+
 import AuthFlow from 'app/services/authFlow/AuthFlow';
 
 import RegisterState from 'app/services/authFlow/RegisterState';
@@ -8,20 +10,22 @@ import ActivationState from 'app/services/authFlow/ActivationState';
 import ResendActivationState from 'app/services/authFlow/ResendActivationState';
 
 describe('AuthFlow.functional', () => {
-  let flow;
-  let actions;
-  let store;
-  let state;
-  let navigate;
+  let flow: AuthFlow;
+  let actions: {};
+  let store: Store;
+  let state: { user?: { isGuest: boolean; isActive: boolean } };
+  let navigate: (path: string, extra?: {}) => void;
 
   beforeEach(() => {
     actions = {};
     store = {
       getState: sinon.stub().named('store.getState'),
+      // @ts-ignore
       dispatch: sinon
         .spy(({ type, payload = {} }) => {
           if (type === '@@router/TRANSITION' && payload.method === 'push') {
             // emulate redux-router
+            // @ts-ignore
             navigate(...payload.args);
           }
         })
@@ -30,6 +34,7 @@ describe('AuthFlow.functional', () => {
 
     state = {};
 
+    // @ts-ignore
     flow = new AuthFlow(actions);
     flow.setStore(store);
 
@@ -48,6 +53,7 @@ describe('AuthFlow.functional', () => {
 
     sinon.stub(flow, 'run').named('flow.run');
     sinon.spy(flow, 'navigate').named('flow.navigate');
+    // @ts-ignore
     store.getState.returns(state);
   });
 
@@ -107,9 +113,11 @@ describe('AuthFlow.functional', () => {
         },
       });
 
+      // @ts-ignore
       flow.run.onCall(0).returns({ then: fn => fn() });
+      // @ts-ignore
       flow.run.onCall(1).returns({
-        then: fn =>
+        then: (fn: Function) =>
           fn({
             redirectUri: expectedRedirect,
           }),
diff --git a/packages/app/services/authFlow/AuthFlow.test.ts b/packages/app/services/authFlow/AuthFlow.test.ts
index cf1d1c7..6feb1f9 100644
--- a/packages/app/services/authFlow/AuthFlow.test.ts
+++ b/packages/app/services/authFlow/AuthFlow.test.ts
@@ -1,5 +1,5 @@
 import expect from 'app/test/unexpected';
-import sinon from 'sinon';
+import sinon, { SinonStub } from 'sinon';
 
 import AuthFlow from 'app/services/authFlow/AuthFlow';
 import AbstractState from 'app/services/authFlow/AbstractState';
@@ -14,10 +14,11 @@ import ResendActivationState from 'app/services/authFlow/ResendActivationState';
 import LoginState from 'app/services/authFlow/LoginState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 import ChooseAccountState from 'app/services/authFlow/ChooseAccountState';
+import { Store } from 'redux';
 
 describe('AuthFlow', () => {
-  let flow;
-  let actions;
+  let flow: AuthFlow;
+  let actions: { test: SinonStub };
 
   beforeEach(() => {
     actions = {
@@ -25,6 +26,7 @@ describe('AuthFlow', () => {
     };
     actions.test.returns('passed');
 
+    // @ts-ignore
     flow = new AuthFlow(actions);
   });
 
@@ -39,17 +41,21 @@ describe('AuthFlow', () => {
 
   it('should not allow to mutate actions', () => {
     expect(
+      // @ts-ignore
       () => (flow.actions.foo = 'bar'),
       'to throw',
       /readonly|not extensible/,
     );
+    // @ts-ignore
     expect(() => (flow.actions.test = 'hacked'), 'to throw', /read ?only/);
   });
 
   describe('#setStore', () => {
     it('should create #navigate, #getState, #dispatch', () => {
       flow.setStore({
+        // @ts-ignore
         getState() {},
+        // @ts-ignore
         dispatch() {},
       });
 
@@ -60,7 +66,7 @@ describe('AuthFlow', () => {
   });
 
   describe('#restoreOAuthState', () => {
-    let oauthData;
+    let oauthData: Record<string, string>;
 
     beforeEach(() => {
       oauthData = { foo: 'bar' };
@@ -73,7 +79,8 @@ describe('AuthFlow', () => {
       );
 
       sinon.stub(flow, 'run').named('flow.run');
-      const promiseLike = { then: fn => fn() || promiseLike };
+      const promiseLike = { then: (fn: Function) => fn() || promiseLike };
+      // @ts-ignore
       flow.run.returns(promiseLike);
       sinon.stub(flow, 'setState').named('flow.setState');
     });
@@ -83,15 +90,25 @@ describe('AuthFlow', () => {
     });
 
     it('should call to restoreOAuthState', () => {
+      // @ts-ignore
       sinon.stub(flow, 'restoreOAuthState').named('flow.restoreOAuthState');
 
-      flow.handleRequest({ path: '/' });
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams(''), params: {} },
+        () => {},
+        () => {},
+      );
 
+      // @ts-ignore
       expect(flow.restoreOAuthState, 'was called');
     });
 
     it('should restore oauth state from localStorage', () => {
-      flow.handleRequest({ path: '/' });
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams(''), params: {} },
+        () => {},
+        () => {},
+      );
 
       expect(flow.run, 'to have a call satisfying', [
         'oAuthValidate',
@@ -100,7 +117,11 @@ describe('AuthFlow', () => {
     });
 
     it('should transition to CompleteState', () => {
-      flow.handleRequest({ path: '/' });
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams(''), params: {} },
+        () => {},
+        () => {},
+      );
 
       expect(flow.setState, 'to have a call satisfying', [
         expect.it('to be a', CompleteState),
@@ -108,7 +129,11 @@ describe('AuthFlow', () => {
     });
 
     it('should not handle current request', () => {
-      flow.handleRequest({ path: '/' });
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams(''), params: {} },
+        () => {},
+        () => {},
+      );
 
       expect(flow.setState, 'was called once');
     });
@@ -116,13 +141,22 @@ describe('AuthFlow', () => {
     it('should call onReady after state restoration', () => {
       const onReady = sinon.stub().named('onReady');
 
-      flow.handleRequest({ path: '/login' }, null, onReady);
+      flow.handleRequest(
+        { path: '/login', query: new URLSearchParams(''), params: {} },
+        // @ts-ignore
+        null,
+        onReady,
+      );
 
       expect(onReady, 'was called');
     });
 
     it('should not restore oauth state for /register route', () => {
-      flow.handleRequest({ path: '/register' });
+      flow.handleRequest(
+        { path: '/register', query: new URLSearchParams(''), params: {} },
+        () => {},
+        () => {},
+      );
 
       expect(flow.run, 'was not called'); // this.run('oAuthValidate'...
     });
@@ -136,7 +170,11 @@ describe('AuthFlow', () => {
         }),
       );
 
-      flow.handleRequest({ path: '/' });
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams(''), params: {} },
+        () => {},
+        () => {},
+      );
 
       expect(flow.run, 'was not called');
     });
@@ -189,14 +227,16 @@ describe('AuthFlow', () => {
     });
 
     it('should throw if no state', () => {
+      // @ts-ignore
       expect(() => flow.setState(), 'to throw', 'State is required');
     });
   });
 
   describe('#run', () => {
-    let store;
+    let store: Store;
 
     beforeEach(() => {
+      // @ts-ignore
       store = {
         getState() {},
         dispatch: sinon.stub().named('store.dispatch'),
@@ -206,6 +246,7 @@ describe('AuthFlow', () => {
     });
 
     it('should dispatch an action', () => {
+      // @ts-ignore
       flow.run('test');
 
       expect(store.dispatch, 'was called once');
@@ -213,6 +254,7 @@ describe('AuthFlow', () => {
     });
 
     it('should dispatch an action with payload given', () => {
+      // @ts-ignore
       flow.run('test', 'arg');
 
       expect(actions.test, 'was called once');
@@ -221,12 +263,15 @@ describe('AuthFlow', () => {
 
     it('should resolve to action dispatch result', () => {
       const expected = 'dispatch called';
+      // @ts-ignore
       store.dispatch.returns(expected);
 
+      // @ts-ignore
       return expect(flow.run('test'), 'to be fulfilled with', expected);
     });
 
     it('throws when running unexisted action', () => {
+      // @ts-ignore
       expect(() => flow.run('123'), 'to throw', 'Action 123 does not exists');
     });
   });
@@ -306,7 +351,11 @@ describe('AuthFlow', () => {
       '/resend-activation': ResendActivationState,
     }).forEach(([path, type]) => {
       it(`should transition to ${type.name} if ${path}`, () => {
-        flow.handleRequest({ path });
+        flow.handleRequest(
+          { path, query: new URLSearchParams({}), params: {} },
+          () => {},
+          () => {},
+        );
 
         expect(flow.setState, 'was called once');
         expect(flow.setState, 'to have a call satisfying', [
@@ -318,15 +367,20 @@ describe('AuthFlow', () => {
     it('should call callback', () => {
       const callback = sinon.stub().named('callback');
 
-      flow.handleRequest({ path: '/' }, () => {}, callback);
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams({}), params: {} },
+        () => {},
+        callback,
+      );
 
       expect(callback, 'was called once');
     });
 
     it('should not call callback till returned from #enter() promise will be resolved', () => {
-      let resolve;
-      const promise = {
-        then: cb => {
+      let resolve: Function;
+      const promise: Promise<void> = {
+        // @ts-ignore
+        then: (cb: Function) => {
           resolve = cb;
         },
       };
@@ -337,11 +391,17 @@ describe('AuthFlow', () => {
 
       flow.setState = AuthFlow.prototype.setState.bind(flow, state);
 
-      flow.handleRequest({ path: '/' }, () => {}, callback);
+      flow.handleRequest(
+        { path: '/', query: new URLSearchParams({}), params: {} },
+        () => {},
+        callback,
+      );
 
+      // @ts-ignore
       expect(resolve, 'to be', callback);
 
       expect(callback, 'was not called');
+      // @ts-ignore
       resolve();
       expect(callback, 'was called once');
     });
@@ -350,8 +410,16 @@ describe('AuthFlow', () => {
       const path = '/oauth2';
       const callback = sinon.stub();
 
-      flow.handleRequest({ path }, () => {}, callback);
-      flow.handleRequest({ path }, () => {}, callback);
+      flow.handleRequest(
+        { path, query: new URLSearchParams({}), params: {} },
+        () => {},
+        callback,
+      );
+      flow.handleRequest(
+        { path, query: new URLSearchParams({}), params: {} },
+        () => {},
+        callback,
+      );
 
       expect(flow.setState, 'was called once');
       expect(flow.setState, 'to have a call satisfying', [
@@ -363,7 +431,10 @@ describe('AuthFlow', () => {
     it('throws if unsupported request', () => {
       const replace = sinon.stub().named('replace');
 
-      flow.handleRequest({ path: '/foo/bar' }, replace);
+      flow.handleRequest(
+        { path: '/foo/bar', query: new URLSearchParams({}), params: {} },
+        replace,
+      );
 
       expect(replace, 'to have a call satisfying', ['/404']);
     });
@@ -376,9 +447,13 @@ describe('AuthFlow', () => {
     });
 
     it('should return request with path, query, params', () => {
-      const request = { path: '/' };
+      const request = { path: '/', query: new URLSearchParams({}), params: {} };
 
-      flow.handleRequest(request);
+      flow.handleRequest(
+        request,
+        () => {},
+        () => {},
+      );
 
       expect(flow.getRequest(), 'to satisfy', {
         ...request,
@@ -390,11 +465,15 @@ describe('AuthFlow', () => {
     it('should return a copy of current request', () => {
       const request = {
         path: '/',
-        query: { foo: 'bar' },
+        query: new URLSearchParams({ foo: 'bar' }),
         params: { baz: 'bud' },
       };
 
-      flow.handleRequest(request);
+      flow.handleRequest(
+        request,
+        () => {},
+        () => {},
+      );
 
       expect(flow.getRequest(), 'to equal', request);
       expect(flow.getRequest(), 'not to be', request);
diff --git a/packages/app/services/authFlow/AuthFlow.ts b/packages/app/services/authFlow/AuthFlow.ts
index f9fab91..33e3b5a 100644
--- a/packages/app/services/authFlow/AuthFlow.ts
+++ b/packages/app/services/authFlow/AuthFlow.ts
@@ -1,7 +1,7 @@
 import { browserHistory } from 'app/services/history';
 import logger from 'app/services/logger';
 import localStorage from 'app/services/localStorage';
-import { RootState } from 'app/reducers';
+import { RootState, Store } from 'app/reducers';
 
 import RegisterState from './RegisterState';
 import LoginState from './LoginState';
@@ -17,7 +17,7 @@ import AbstractState from './AbstractState';
 type Request = {
   path: string;
   query: URLSearchParams;
-  params: { [key: string]: any };
+  params: Record<string, any>;
 };
 
 // TODO: temporary added to improve typing without major refactoring
@@ -61,12 +61,13 @@ export interface AuthContext {
   prevState: AbstractState;
 }
 
-export type ActionsDict = {
-  [key: string]: (action: any) => { [key: string]: any };
-};
+export type ActionsDict = Record<
+  ActionId,
+  (action: any) => Record<string, any>
+>;
 
 export default class AuthFlow implements AuthContext {
-  actions: ActionsDict;
+  actions: Readonly<ActionsDict>;
   state: AbstractState;
   prevState: AbstractState;
   /**
@@ -78,33 +79,18 @@ export default class AuthFlow implements AuthContext {
   navigate: (route: string, options: { replace?: boolean }) => void;
   currentRequest: Request;
   oAuthStateRestored = false;
-  dispatch: (action: { [key: string]: any }) => void;
+  dispatch: (action: Record<string, any>) => void;
   getState: () => RootState;
 
   constructor(actions: ActionsDict) {
-    if (typeof actions !== 'object') {
-      throw new Error('AuthFlow requires an actions object');
-    }
-
-    this.actions = actions;
-
-    if (Object.freeze) {
-      Object.freeze(this.actions);
-    }
+    this.actions = Object.freeze(actions);
   }
 
-  setStore(store: {
-    getState: () => { [key: string]: any };
-    dispatch: (
-      action: { [key: string]: any } | ((...args: any[]) => any),
-    ) => void;
-  }) {
-    /**
-     * @param {string} route
-     * @param {object} options
-     * @param {object} options.replace
-     */
-    this.navigate = (route: string, options: { replace?: boolean } = {}) => {
+  setStore(store: Store): void {
+    this.navigate = (
+      route: string,
+      options: { replace?: boolean } = {},
+    ): void => {
       const { path: currentPath } = this.getRequest();
 
       if (currentPath !== route) {
@@ -141,7 +127,7 @@ export default class AuthFlow implements AuthContext {
     this.state.goBack(this);
   }
 
-  run(actionId: ActionId, payload?: { [key: string]: any }): Promise<any> {
+  run(actionId: ActionId, payload?: Record<string, any>): Promise<any> {
     const action = this.actions[actionId];
 
     if (!action) {
@@ -295,7 +281,8 @@ export default class AuthFlow implements AuthContext {
     }
 
     try {
-      const data = JSON.parse(localStorage.getItem('oauthData'));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const data = JSON.parse(localStorage.getItem('oauthData')!);
       const expirationTime = 2 * 60 * 60 * 1000; // 2h
 
       if (Date.now() - data.timestamp < expirationTime) {
diff --git a/packages/app/services/authFlow/ChooseAccountState.test.ts b/packages/app/services/authFlow/ChooseAccountState.test.ts
index 23ed81b..07c17b0 100644
--- a/packages/app/services/authFlow/ChooseAccountState.test.ts
+++ b/packages/app/services/authFlow/ChooseAccountState.test.ts
@@ -1,13 +1,20 @@
 import ChooseAccountState from 'app/services/authFlow/ChooseAccountState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 import LoginState from 'app/services/authFlow/LoginState';
+import { SinonMock } from 'sinon';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('ChooseAccountState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: ChooseAccountState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new ChooseAccountState();
diff --git a/packages/app/services/authFlow/ChooseAccountState.ts b/packages/app/services/authFlow/ChooseAccountState.ts
index 5a07482..fe2990d 100644
--- a/packages/app/services/authFlow/ChooseAccountState.ts
+++ b/packages/app/services/authFlow/ChooseAccountState.ts
@@ -1,9 +1,10 @@
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import LoginState from './LoginState';
 import CompleteState from './CompleteState';
 
 export default class ChooseAccountState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     const { auth } = context.getState();
 
     if (auth.oauth) {
@@ -13,7 +14,10 @@ export default class ChooseAccountState extends AbstractState {
     }
   }
 
-  resolve(context, payload) {
+  resolve(
+    context: AuthContext,
+    payload: Record<string, any>,
+  ): Promise<void> | void {
     if (payload.id) {
       context.setState(new CompleteState());
     } else {
@@ -23,7 +27,7 @@ export default class ChooseAccountState extends AbstractState {
     }
   }
 
-  reject(context) {
+  reject(context: AuthContext): void {
     context.run('logout');
   }
 }
diff --git a/packages/app/services/authFlow/CompleteState.test.ts b/packages/app/services/authFlow/CompleteState.test.ts
index 1a61dde..def85bb 100644
--- a/packages/app/services/authFlow/CompleteState.test.ts
+++ b/packages/app/services/authFlow/CompleteState.test.ts
@@ -1,5 +1,5 @@
 import expect from 'app/test/unexpected';
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import CompleteState from 'app/services/authFlow/CompleteState';
 import LoginState from 'app/services/authFlow/LoginState';
@@ -8,13 +8,21 @@ import AcceptRulesState from 'app/services/authFlow/AcceptRulesState';
 import FinishState from 'app/services/authFlow/FinishState';
 import PermissionsState from 'app/services/authFlow/PermissionsState';
 import ChooseAccountState from 'app/services/authFlow/ChooseAccountState';
+import { Account } from 'app/components/accounts/reducer';
+import AbstractState from './AbstractState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('CompleteState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: CompleteState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new CompleteState();
@@ -289,7 +297,7 @@ describe('CompleteState', () => {
       });
 
       expectRun(mock, 'oAuthComplete', sinon.match.object).returns({
-        then(success, fail) {
+        then(success: Function, fail: Function) {
           expect(success, 'to be a', 'function');
           expect(fail, 'to be a', 'function');
         },
@@ -323,7 +331,12 @@ describe('CompleteState', () => {
       return promise.catch(mock.verify.bind(mock));
     });
 
-    const testOAuth = (type, resp, expectedInstance) => {
+    const testOAuth = (
+      type: 'resolve' | 'reject',
+      resp: Record<string, any>,
+      expectedInstance: typeof AbstractState,
+    ) => {
+      // @ts-ignore
       const promise = Promise[type](resp);
 
       context.getState.returns({
@@ -364,11 +377,13 @@ describe('CompleteState', () => {
       testOAuth('reject', { acceptRequired: true }, PermissionsState));
 
     describe('when loginHint is set', () => {
-      const testSuccessLoginHint = field => {
-        const account = {
+      const testSuccessLoginHint = (field: keyof Account) => {
+        const account: Account = {
           id: 9,
           email: 'some@email.com',
           username: 'thatUsername',
+          token: '',
+          refreshToken: '',
         };
 
         context.getState.returns({
diff --git a/packages/app/services/authFlow/CompleteState.ts b/packages/app/services/authFlow/CompleteState.ts
index ed10f33..2edb232 100644
--- a/packages/app/services/authFlow/CompleteState.ts
+++ b/packages/app/services/authFlow/CompleteState.ts
@@ -24,7 +24,7 @@ export default class CompleteState extends AbstractState {
     this.isPermissionsAccepted = options.accept;
   }
 
-  enter(context: AuthContext) {
+  enter(context: AuthContext): Promise<void> | void {
     const {
       auth: { oauth },
       user,
@@ -43,7 +43,7 @@ export default class CompleteState extends AbstractState {
     }
   }
 
-  processOAuth(context: AuthContext) {
+  processOAuth(context: AuthContext): Promise<void> | void {
     const { auth, accounts } = context.getState();
 
     let { isSwitcherEnabled } = auth;
diff --git a/packages/app/services/authFlow/FinishState.test.ts b/packages/app/services/authFlow/FinishState.test.ts
index 1e6e866..d10caac 100644
--- a/packages/app/services/authFlow/FinishState.test.ts
+++ b/packages/app/services/authFlow/FinishState.test.ts
@@ -1,11 +1,12 @@
 import FinishState from 'app/services/authFlow/FinishState';
+import { SinonMock } from 'sinon';
 
-import { bootstrap, expectNavigate } from './helpers';
+import { bootstrap, expectNavigate, MockedAuthContext } from './helpers';
 
 describe('FinishState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: FinishState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new FinishState();
diff --git a/packages/app/services/authFlow/FinishState.ts b/packages/app/services/authFlow/FinishState.ts
index 2e86f74..4c90e6d 100644
--- a/packages/app/services/authFlow/FinishState.ts
+++ b/packages/app/services/authFlow/FinishState.ts
@@ -1,7 +1,8 @@
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 
 export default class FinishState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     context.navigate('/oauth/finish');
   }
 }
diff --git a/packages/app/services/authFlow/ForgotPasswordState.test.ts b/packages/app/services/authFlow/ForgotPasswordState.test.ts
index a0c4563..0af447c 100644
--- a/packages/app/services/authFlow/ForgotPasswordState.test.ts
+++ b/packages/app/services/authFlow/ForgotPasswordState.test.ts
@@ -1,15 +1,21 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import ForgotPasswordState from 'app/services/authFlow/ForgotPasswordState';
 import RecoverPasswordState from 'app/services/authFlow/RecoverPasswordState';
 import LoginState from 'app/services/authFlow/LoginState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('ForgotPasswordState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: ForgotPasswordState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new ForgotPasswordState();
diff --git a/packages/app/services/authFlow/ForgotPasswordState.ts b/packages/app/services/authFlow/ForgotPasswordState.ts
index 332dc90..da10465 100644
--- a/packages/app/services/authFlow/ForgotPasswordState.ts
+++ b/packages/app/services/authFlow/ForgotPasswordState.ts
@@ -1,20 +1,21 @@
 import logger from 'app/services/logger';
 
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import LoginState from './LoginState';
 import RecoverPasswordState from './RecoverPasswordState';
 
 export default class ForgotPasswordState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     context.navigate('/forgot-password');
   }
 
   resolve(
-    context,
+    context: AuthContext,
     payload: {
       login?: string;
     } = {},
-  ) {
+  ): Promise<void> | void {
     context
       .run('forgotPassword', payload)
       .then(() => {
@@ -28,11 +29,11 @@ export default class ForgotPasswordState extends AbstractState {
       );
   }
 
-  goBack(context) {
+  goBack(context: AuthContext): void {
     context.setState(new LoginState());
   }
 
-  reject(context) {
+  reject(context: AuthContext): void {
     context.setState(new RecoverPasswordState());
   }
 }
diff --git a/packages/app/services/authFlow/LoginState.test.ts b/packages/app/services/authFlow/LoginState.test.ts
index 7823f64..c68fdea 100644
--- a/packages/app/services/authFlow/LoginState.test.ts
+++ b/packages/app/services/authFlow/LoginState.test.ts
@@ -1,15 +1,15 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import LoginState from 'app/services/authFlow/LoginState';
 import PasswordState from 'app/services/authFlow/PasswordState';
 import RegisterState from 'app/services/authFlow/RegisterState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import { bootstrap, expectState, expectNavigate, expectRun, MockedAuthContext } from './helpers';
 
 describe('LoginState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: LoginState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new LoginState();
@@ -53,7 +53,7 @@ describe('LoginState', () => {
 
   describe('#resolve', () => {
     it('should call login with email or username', () => {
-      const payload = {};
+      const payload = { login: 'login' };
 
       expectRun(mock, 'login', sinon.match.same(payload)).returns(
         new Promise(() => {}),
@@ -68,7 +68,7 @@ describe('LoginState', () => {
       mock.expects('run').returns(promise);
       expectState(mock, PasswordState);
 
-      state.resolve(context);
+      state.resolve(context, { login: 'login' });
 
       return promise;
     });
@@ -79,7 +79,7 @@ describe('LoginState', () => {
       mock.expects('run').returns(promise);
       mock.expects('setState').never();
 
-      state.resolve(context);
+      state.resolve(context, { login: 'login' });
 
       return promise.catch(mock.verify.bind(mock));
     });
diff --git a/packages/app/services/authFlow/LoginState.ts b/packages/app/services/authFlow/LoginState.ts
index 03dc7dd..31cebac 100644
--- a/packages/app/services/authFlow/LoginState.ts
+++ b/packages/app/services/authFlow/LoginState.ts
@@ -7,7 +7,7 @@ import RegisterState from './RegisterState';
 import { AuthContext } from './AuthFlow';
 
 export default class LoginState extends AbstractState {
-  enter(context: AuthContext) {
+  enter(context: AuthContext): Promise<void> | void {
     const login = getLogin(context.getState());
     const { user } = context.getState();
 
@@ -30,7 +30,7 @@ export default class LoginState extends AbstractState {
     payload: {
       login: string;
     },
-  ) {
+  ): Promise<void> | void {
     context
       .run('login', payload)
       .then(() => context.setState(new PasswordState()))
@@ -39,11 +39,11 @@ export default class LoginState extends AbstractState {
       );
   }
 
-  reject(context: AuthContext) {
+  reject(context: AuthContext): void {
     context.setState(new RegisterState());
   }
 
-  goBack(context: AuthContext) {
+  goBack(context: AuthContext): void {
     context.run('goBack', {
       fallbackUrl: '/',
     });
diff --git a/packages/app/services/authFlow/MfaState.test.ts b/packages/app/services/authFlow/MfaState.test.ts
index 751b8d5..579a871 100644
--- a/packages/app/services/authFlow/MfaState.test.ts
+++ b/packages/app/services/authFlow/MfaState.test.ts
@@ -1,16 +1,22 @@
 import expect from 'app/test/unexpected';
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import MfaState from './MfaState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 import PasswordState from 'app/services/authFlow/PasswordState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('MfaState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: MfaState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new MfaState();
diff --git a/packages/app/services/authFlow/MfaState.ts b/packages/app/services/authFlow/MfaState.ts
index e74b31c..ee5587c 100644
--- a/packages/app/services/authFlow/MfaState.ts
+++ b/packages/app/services/authFlow/MfaState.ts
@@ -8,7 +8,7 @@ import PasswordState from './PasswordState';
 import { AuthContext } from './AuthFlow';
 
 export default class MfaState extends AbstractState {
-  enter(context: AuthContext) {
+  enter(context: AuthContext): Promise<void> | void {
     const { login, password, isTotpRequired } = getCredentials(
       context.getState(),
     );
@@ -20,7 +20,10 @@ export default class MfaState extends AbstractState {
     }
   }
 
-  resolve(context: AuthContext, { totp }: { totp: string }) {
+  resolve(
+    context: AuthContext,
+    { totp }: { totp: string },
+  ): Promise<void> | void {
     const { login, password, rememberMe } = getCredentials(context.getState());
 
     return context
diff --git a/packages/app/services/authFlow/OAuthState.test.ts b/packages/app/services/authFlow/OAuthState.test.ts
index 23d17e5..30d6e47 100644
--- a/packages/app/services/authFlow/OAuthState.test.ts
+++ b/packages/app/services/authFlow/OAuthState.test.ts
@@ -1,15 +1,20 @@
 /* eslint @typescript-eslint/camelcase: off */
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import OAuthState from 'app/services/authFlow/OAuthState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 
-import { bootstrap, expectState, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('OAuthState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: OAuthState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new OAuthState();
diff --git a/packages/app/services/authFlow/OAuthState.ts b/packages/app/services/authFlow/OAuthState.ts
index a0a142d..a357235 100644
--- a/packages/app/services/authFlow/OAuthState.ts
+++ b/packages/app/services/authFlow/OAuthState.ts
@@ -1,8 +1,9 @@
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import CompleteState from './CompleteState';
 
 export default class OAuthState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     const { query, params } = context.getRequest();
 
     return context
diff --git a/packages/app/services/authFlow/PasswordState.test.ts b/packages/app/services/authFlow/PasswordState.test.ts
index 6e798b0..c8ff415 100644
--- a/packages/app/services/authFlow/PasswordState.test.ts
+++ b/packages/app/services/authFlow/PasswordState.test.ts
@@ -1,5 +1,5 @@
 import expect from 'app/test/unexpected';
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import PasswordState from 'app/services/authFlow/PasswordState';
 import CompleteState from 'app/services/authFlow/CompleteState';
@@ -8,12 +8,18 @@ import LoginState from 'app/services/authFlow/LoginState';
 import ForgotPasswordState from 'app/services/authFlow/ForgotPasswordState';
 import ChooseAccountState from 'app/services/authFlow/ChooseAccountState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('PasswordState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: PasswordState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new PasswordState();
diff --git a/packages/app/services/authFlow/PasswordState.ts b/packages/app/services/authFlow/PasswordState.ts
index 97fe88a..e270e14 100644
--- a/packages/app/services/authFlow/PasswordState.ts
+++ b/packages/app/services/authFlow/PasswordState.ts
@@ -14,7 +14,7 @@ import MfaState from './MfaState';
 import { AuthContext } from './AuthFlow';
 
 export default class PasswordState extends AbstractState {
-  enter(context: AuthContext) {
+  enter(context: AuthContext): Promise<void> | void {
     const { login, isTotpRequired } = getCredentials(context.getState());
 
     if (isTotpRequired) {
@@ -35,7 +35,7 @@ export default class PasswordState extends AbstractState {
       password: string;
       rememberMe: boolean;
     },
-  ) {
+  ): Promise<void> | void {
     const { login, returnUrl } = getCredentials(context.getState());
 
     return context
@@ -62,11 +62,11 @@ export default class PasswordState extends AbstractState {
       .catch((err = {}) => err.errors || logger.warn('Error logging in', err));
   }
 
-  reject(context: AuthContext) {
+  reject(context: AuthContext): void {
     context.setState(new ForgotPasswordState());
   }
 
-  goBack(context: AuthContext) {
+  goBack(context: AuthContext): void {
     const state = context.getState();
     const { isRelogin } = getCredentials(state);
 
diff --git a/packages/app/services/authFlow/PermissionsState.test.ts b/packages/app/services/authFlow/PermissionsState.test.ts
index d5b82a4..5f53231 100644
--- a/packages/app/services/authFlow/PermissionsState.test.ts
+++ b/packages/app/services/authFlow/PermissionsState.test.ts
@@ -1,14 +1,14 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import PermissionsState from 'app/services/authFlow/PermissionsState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 
-import { bootstrap, expectNavigate } from './helpers';
+import { bootstrap, expectNavigate, MockedAuthContext } from './helpers';
 
 describe('PermissionsState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: PermissionsState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new PermissionsState();
diff --git a/packages/app/services/authFlow/PermissionsState.ts b/packages/app/services/authFlow/PermissionsState.ts
index f40c872..fe0f165 100644
--- a/packages/app/services/authFlow/PermissionsState.ts
+++ b/packages/app/services/authFlow/PermissionsState.ts
@@ -1,8 +1,9 @@
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import CompleteState from './CompleteState';
 
 export default class PermissionsState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     context.navigate('/oauth/permissions', {
       // replacing oauth entry point if currently on it
       // to allow user easy go-back action to client's site
@@ -10,15 +11,15 @@ export default class PermissionsState extends AbstractState {
     });
   }
 
-  resolve(context) {
+  resolve(context: AuthContext): Promise<void> | void {
     this.process(context, true);
   }
 
-  reject(context) {
+  reject(context: AuthContext): void {
     this.process(context, false);
   }
 
-  process(context, accept) {
+  process(context: AuthContext, accept: boolean): void {
     context.setState(
       new CompleteState({
         accept,
diff --git a/packages/app/services/authFlow/RecoverPasswordState.test.ts b/packages/app/services/authFlow/RecoverPasswordState.test.ts
index a942c63..3be81c5 100644
--- a/packages/app/services/authFlow/RecoverPasswordState.test.ts
+++ b/packages/app/services/authFlow/RecoverPasswordState.test.ts
@@ -1,15 +1,21 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import RecoverPasswordState from 'app/services/authFlow/RecoverPasswordState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 import LoginState from 'app/services/authFlow/LoginState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('RecoverPasswordState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: RecoverPasswordState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new RecoverPasswordState();
@@ -77,7 +83,7 @@ describe('RecoverPasswordState', () => {
       mock.expects('run').returns(promise);
       mock.expects('setState').never();
 
-      state.resolve(context);
+      state.resolve(context, {});
 
       return promise.catch(mock.verify.bind(mock));
     });
diff --git a/packages/app/services/authFlow/RecoverPasswordState.ts b/packages/app/services/authFlow/RecoverPasswordState.ts
index 0ec0c4b..f0a1abb 100644
--- a/packages/app/services/authFlow/RecoverPasswordState.ts
+++ b/packages/app/services/authFlow/RecoverPasswordState.ts
@@ -1,18 +1,22 @@
 import logger from 'app/services/logger';
 
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import LoginState from './LoginState';
 import CompleteState from './CompleteState';
 
 export default class RecoverPasswordState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     const url = context.getRequest().path.includes('/recover-password')
       ? context.getRequest().path
       : '/recover-password';
     context.navigate(url);
   }
 
-  resolve(context, payload) {
+  resolve(
+    context: AuthContext,
+    payload: Record<string, any>,
+  ): Promise<void> | void {
     context
       .run('recoverPassword', payload)
       .then(() => context.setState(new CompleteState()))
@@ -22,11 +26,11 @@ export default class RecoverPasswordState extends AbstractState {
       );
   }
 
-  goBack(context) {
+  goBack(context: AuthContext): void {
     context.setState(new LoginState());
   }
 
-  reject(context) {
+  reject(context: AuthContext): void {
     context.run('contactUs');
   }
 }
diff --git a/packages/app/services/authFlow/RegisterState.test.ts b/packages/app/services/authFlow/RegisterState.test.ts
index 8ce9729..9179eb8 100644
--- a/packages/app/services/authFlow/RegisterState.test.ts
+++ b/packages/app/services/authFlow/RegisterState.test.ts
@@ -1,16 +1,22 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import RegisterState from 'app/services/authFlow/RegisterState';
 import CompleteState from 'app/services/authFlow/CompleteState';
 import ActivationState from 'app/services/authFlow/ActivationState';
 import ResendActivationState from 'app/services/authFlow/ResendActivationState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('RegisterState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: RegisterState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new RegisterState();
@@ -65,7 +71,7 @@ describe('RegisterState', () => {
       mock.expects('run').returns(promise);
       mock.expects('setState').never();
 
-      state.resolve(context);
+      state.resolve(context, {});
 
       return promise.catch(mock.verify.bind(mock));
     });
diff --git a/packages/app/services/authFlow/RegisterState.ts b/packages/app/services/authFlow/RegisterState.ts
index 503eb40..b34b7ba 100644
--- a/packages/app/services/authFlow/RegisterState.ts
+++ b/packages/app/services/authFlow/RegisterState.ts
@@ -1,23 +1,27 @@
 import logger from 'app/services/logger';
 
 import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 import CompleteState from './CompleteState';
 import ActivationState from './ActivationState';
 import ResendActivationState from './ResendActivationState';
 
 export default class RegisterState extends AbstractState {
-  enter(context) {
+  enter(context: AuthContext): Promise<void> | void {
     context.navigate('/register');
   }
 
-  resolve(context, payload) {
+  resolve(
+    context: AuthContext,
+    payload: Record<string, any>,
+  ): Promise<void> | void {
     context
       .run('register', payload)
       .then(() => context.setState(new CompleteState()))
       .catch((err = {}) => err.errors || logger.warn('Error registering', err));
   }
 
-  reject(context, payload) {
+  reject(context: AuthContext, payload: Record<string, any>): void {
     if (payload.requestEmail) {
       context.setState(new ResendActivationState());
     } else {
diff --git a/packages/app/services/authFlow/ResendActivationState.test.ts b/packages/app/services/authFlow/ResendActivationState.test.ts
index 0eb9cd8..84d01fa 100644
--- a/packages/app/services/authFlow/ResendActivationState.test.ts
+++ b/packages/app/services/authFlow/ResendActivationState.test.ts
@@ -1,15 +1,21 @@
-import sinon from 'sinon';
+import sinon, { SinonMock } from 'sinon';
 
 import ResendActivationState from 'app/services/authFlow/ResendActivationState';
 import ActivationState from 'app/services/authFlow/ActivationState';
 import RegisterState from 'app/services/authFlow/RegisterState';
 
-import { bootstrap, expectState, expectNavigate, expectRun } from './helpers';
+import {
+  bootstrap,
+  expectState,
+  expectNavigate,
+  expectRun,
+  MockedAuthContext,
+} from './helpers';
 
 describe('ResendActivationState', () => {
-  let state;
-  let context;
-  let mock;
+  let state: ResendActivationState;
+  let context: MockedAuthContext;
+  let mock: SinonMock;
 
   beforeEach(() => {
     state = new ResendActivationState();
@@ -67,7 +73,7 @@ describe('ResendActivationState', () => {
       mock.expects('run').returns(promise);
       expectState(mock, ActivationState);
 
-      state.resolve(context);
+      state.resolve(context, {});
 
       return promise;
     });
@@ -78,7 +84,7 @@ describe('ResendActivationState', () => {
       mock.expects('run').returns(promise);
       mock.expects('setState').never();
 
-      state.resolve(context);
+      state.resolve(context, {});
 
       return promise.catch(mock.verify.bind(mock));
     });
diff --git a/packages/app/services/authFlow/ResendActivationState.ts b/packages/app/services/authFlow/ResendActivationState.ts
index 7625172..49e3341 100644
--- a/packages/app/services/authFlow/ResendActivationState.ts
+++ b/packages/app/services/authFlow/ResendActivationState.ts
@@ -6,11 +6,14 @@ import ActivationState from './ActivationState';
 import RegisterState from './RegisterState';
 
 export default class ResendActivationState extends AbstractState {
-  enter(context: AuthContext) {
+  enter(context: AuthContext): Promise<void> | void {
     context.navigate('/resend-activation');
   }
 
-  resolve(context: AuthContext, payload: { [key: string]: any }) {
+  resolve(
+    context: AuthContext,
+    payload: Record<string, any>,
+  ): Promise<void> | void {
     context
       .run('resendActivation', payload)
       .then(() => context.setState(new ActivationState()))
@@ -20,11 +23,11 @@ export default class ResendActivationState extends AbstractState {
       );
   }
 
-  reject(context: AuthContext) {
+  reject(context: AuthContext): void {
     context.setState(new ActivationState());
   }
 
-  goBack(context: AuthContext) {
+  goBack(context: AuthContext): void {
     if (context.prevState instanceof RegisterState) {
       context.setState(new RegisterState());
     } else {
diff --git a/packages/app/services/authFlow/helpers.ts b/packages/app/services/authFlow/helpers.ts
index 2c5f987..1fcf009 100644
--- a/packages/app/services/authFlow/helpers.ts
+++ b/packages/app/services/authFlow/helpers.ts
@@ -2,15 +2,25 @@
  * A helpers for testing states in isolation from AuthFlow
  */
 
-import sinon from 'sinon';
+import sinon, { SinonExpectation, SinonMock, SinonStub } from 'sinon';
+import AbstractState from './AbstractState';
+import { AuthContext } from './AuthFlow';
 
-export function bootstrap() {
-  const context = {
+export interface MockedAuthContext extends AuthContext {
+  getState: SinonStub;
+  getRequest: SinonStub;
+}
+
+export function bootstrap(): { context: MockedAuthContext; mock: SinonMock } {
+  const context: MockedAuthContext = {
     getState: sinon.stub(),
-    run() {},
+    run() {
+      return Promise.resolve();
+    },
     setState() {},
     getRequest: sinon.stub(),
     navigate() {},
+    prevState: new (class State extends AbstractState {})(),
   };
 
   const mock = sinon.mock(context);
@@ -21,7 +31,10 @@ export function bootstrap() {
   return { context, mock };
 }
 
-export function expectState(mock, state) {
+export function expectState(
+  mock: SinonMock,
+  state: typeof AbstractState,
+): SinonExpectation {
   return mock
     .expects('setState')
     .once()
@@ -29,10 +42,10 @@ export function expectState(mock, state) {
 }
 
 export function expectNavigate(
-  mock,
-  route,
-  options: { [key: string]: any } | void,
-) {
+  mock: SinonMock,
+  route: string,
+  options: Record<string, any> | void,
+): SinonExpectation {
   if (options) {
     return mock
       .expects('navigate')
@@ -46,7 +59,10 @@ export function expectNavigate(
     .withExactArgs(route);
 }
 
-export function expectRun(mock, ...args) {
+export function expectRun(
+  mock: SinonMock,
+  ...args: Array<any>
+): SinonExpectation {
   return mock
     .expects('run')
     .once()
diff --git a/packages/app/services/authFlow/index.ts b/packages/app/services/authFlow/index.ts
index 60bc02a..191db79 100644
--- a/packages/app/services/authFlow/index.ts
+++ b/packages/app/services/authFlow/index.ts
@@ -9,7 +9,7 @@ import {
 
 import AuthFlow, { ActionsDict, AuthContext as TAuthContext } from './AuthFlow';
 
-const availableActions = {
+const availableActions: ActionsDict = {
   updateUser,
   authenticate,
   activateAccount,
@@ -42,4 +42,4 @@ const availableActions = {
 };
 
 export type AuthContext = TAuthContext;
-export default new AuthFlow(availableActions as ActionsDict);
+export default new AuthFlow(availableActions);
diff --git a/packages/app/services/errorsDict/errorsDict.js b/packages/app/services/errorsDict/errorsDict.tsx
similarity index 68%
rename from packages/app/services/errorsDict/errorsDict.js
rename to packages/app/services/errorsDict/errorsDict.tsx
index 7034221..4f93ba6 100644
--- a/packages/app/services/errorsDict/errorsDict.js
+++ b/packages/app/services/errorsDict/errorsDict.tsx
@@ -1,37 +1,47 @@
-import React from 'react';
-
-import { FormattedMessage as Message } from 'react-intl';
-import { RelativeTime } from 'app/components/ui';
+import React, { ComponentType, ReactElement, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
+import { FormattedMessage as Message } from 'react-intl';
+
+import { RelativeTime } from 'app/components/ui';
 
 import messages from './errorsDict.intl.json';
 
-/* eslint-disable react/prop-types, react/display-name, react/no-multi-comp, no-use-before-define */
+const SuggestResetPassword: ComponentType = () => (
+  <>
+    <br />
+    <Message
+      {...messages.suggestResetPassword}
+      values={{
+        forgotYourPassword: (
+          <Link to="/forgot-password">
+            <Message {...messages.forgotYourPassword} />
+          </Link>
+        ),
+      }}
+    />
+  </>
+);
 
-export default {
-  resolve(error) {
-    let payload = {};
+const ResendKey: ComponentType<{ url: string }> = ({ url }) => (
+  <>
+    {' '}
+    <Link to={url}>
+      <Message {...messages.doYouWantRequestKey} />
+    </Link>
+  </>
+);
 
-    if (error.type) {
-      payload = error.payload || {};
-      error = error.type;
-    }
-
-    return errorsMap[error] ? errorsMap[error](payload) : error;
-  },
-};
-
-const errorsMap = {
+const errorsMap: Record<string, (props?: Record<string, any>) => ReactElement> = {
   'error.login_required': () => <Message {...messages.loginRequired} />,
   'error.login_not_exist': () => <Message {...messages.loginNotExist} />,
   'error.password_required': () => <Message {...messages.passwordRequired} />,
 
-  'error.password_incorrect': (props = {}) => (
+  'error.password_incorrect': (props ) => (
     // props are handled in validationErrorsHandler in components/auth/actions
-    <span>
+    <>
       <Message {...messages.invalidPassword} />
-      {props.isGuest ? errorsMap.suggestResetPassword() : null}
-    </span>
+      {props && props.isGuest ? <SuggestResetPassword /> : null}
+    </>
   ),
 
   'error.username_required': () => <Message {...messages.usernameRequired} />,
@@ -46,12 +56,12 @@ const errorsMap = {
   'error.email_too_long': () => <Message {...messages.emailToLong} />,
   'error.email_invalid': () => <Message {...messages.emailInvalid} />,
   'error.email_is_tempmail': () => <Message {...messages.emailIsTempmail} />,
-  'error.email_not_available': (props = {}) => (
+  'error.email_not_available': (props) => (
     // props are handled in validationErrorsHandler in components/auth/actions
-    <span>
+    <>
       <Message {...messages.emailNotAvailable} />
-      {props.isGuest ? errorsMap.suggestResetPassword() : null}
-    </span>
+      {props && props.isGuest ? <SuggestResetPassword /> : null}
+    </>
   ),
 
   'error.totp_required': () => <Message {...messages.totpRequired} />,
@@ -72,10 +82,10 @@ const errorsMap = {
   ),
   'error.key_required': () => <Message {...messages.keyRequired} />,
   'error.key_not_exists': props => (
-    <span>
+    <>
       <Message {...messages.keyNotExists} />
-      {props.repeatUrl ? errorsMap.resendKey(props.repeatUrl) : null}
-    </span>
+      {props && props.repeatUrl ? <ResendKey url={props.repeatUrl} /> : null}
+    </>
   ),
   'error.key_expire': props => errorsMap['error.key_not_exists'](props),
 
@@ -96,7 +106,7 @@ const errorsMap = {
       {...messages.emailFrequency}
       values={{
         // for msLeft @see AuthError.jsx
-        time: <RelativeTime timestamp={props.msLeft} />,
+        time: <RelativeTime timestamp={props!.msLeft} />,
       }}
     />
   ),
@@ -107,7 +117,7 @@ const errorsMap = {
   ),
 
   'error.captcha_required': () => <Message {...messages.captchaRequired} />,
-  'error.captcha_invalid': () => errorsMap['error.captcha_required'](),
+  'error.captcha_invalid': props => errorsMap['error.captcha_required'](props),
 
   'error.redirectUri_required': () => (
     <Message {...messages.redirectUriRequired} />
@@ -115,29 +125,22 @@ const errorsMap = {
   'error.redirectUri_invalid': () => (
     <Message {...messages.redirectUriInvalid} />
   ),
-
-  suggestResetPassword: () => (
-    <span>
-      <br />
-      <Message
-        {...messages.suggestResetPassword}
-        values={{
-          forgotYourPassword: (
-            <Link to="/forgot-password">
-              <Message {...messages.forgotYourPassword} />
-            </Link>
-          ),
-        }}
-      />
-    </span>
-  ),
-
-  resendKey: url => (
-    <span>
-      {' '}
-      <Link to={url}>
-        <Message {...messages.doYouWantRequestKey} />
-      </Link>
-    </span>
-  ),
 };
+
+interface ErrorLiteral {
+  type: string;
+  payload?: Record<string, any>;
+}
+
+type Error = string | ErrorLiteral;
+
+export function resolve(error: Error): ReactNode {
+  let payload = {};
+
+  if (typeof error !== 'string') {
+    payload = error.payload || {};
+    error = error.type;
+  }
+
+  return errorsMap[error] ? errorsMap[error](payload) : error;
+}
diff --git a/packages/app/services/errorsDict/index.js b/packages/app/services/errorsDict/index.js
deleted file mode 100644
index 1a042e4..0000000
--- a/packages/app/services/errorsDict/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import errorsDict from './errorsDict';
-
-export default errorsDict;
diff --git a/packages/app/services/errorsDict/index.ts b/packages/app/services/errorsDict/index.ts
new file mode 100644
index 0000000..092dd30
--- /dev/null
+++ b/packages/app/services/errorsDict/index.ts
@@ -0,0 +1 @@
+export { resolve } from './errorsDict';
diff --git a/packages/app/services/history.js b/packages/app/services/history.ts
similarity index 83%
rename from packages/app/services/history.js
rename to packages/app/services/history.ts
index cae2287..caab1c3 100644
--- a/packages/app/services/history.js
+++ b/packages/app/services/history.ts
@@ -2,7 +2,7 @@
  * A helper wrapper service around window.history
  */
 
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, History } from 'history';
 
 export const browserHistory = createBrowserHistory();
 
@@ -10,7 +10,7 @@ browserHistory.listen(() => {
   patchHistory(browserHistory);
 });
 
-function patchHistory(history) {
+function patchHistory(history: History): void {
   Object.assign(history.location, {
     query: new URLSearchParams(history.location.search),
   });
@@ -19,6 +19,8 @@ function patchHistory(history) {
 patchHistory(browserHistory);
 
 export default {
+  initialLength: 0,
+
   init() {
     this.initialLength = window.history.length;
   },
diff --git a/packages/app/services/loader.js b/packages/app/services/loader.js
deleted file mode 100644
index 01b8bca..0000000
--- a/packages/app/services/loader.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// On page initialization loader is already visible, so initial value is 1
-let stack = 1;
-
-export default {
-  show() {
-    if (++stack >= 0) {
-      const loader = document.getElementById('loader');
-
-      if (!loader) {
-        throw new Error('Can not find loader element');
-      }
-
-      loader.classList.add('is-active');
-    }
-  },
-
-  hide() {
-    if (--stack <= 0) {
-      stack = 0;
-      const loader = document.getElementById('loader');
-
-      if (!loader) {
-        throw new Error('Can not find loader element');
-      }
-
-      loader.classList.remove('is-active', 'is-first-launch');
-    }
-  },
-};
diff --git a/packages/app/services/loader.ts b/packages/app/services/loader.ts
new file mode 100644
index 0000000..7b25260
--- /dev/null
+++ b/packages/app/services/loader.ts
@@ -0,0 +1,27 @@
+// On page initialization loader is already visible, so initial value is 1
+let stack = 1;
+
+export function show(): void {
+  if (++stack >= 0) {
+    const loader = document.getElementById('loader');
+
+    if (!loader) {
+      throw new Error('Can not find loader element');
+    }
+
+    loader.classList.add('is-active');
+  }
+}
+
+export function hide(): void {
+  if (--stack <= 0) {
+    stack = 0;
+    const loader = document.getElementById('loader');
+
+    if (!loader) {
+      throw new Error('Can not find loader element');
+    }
+
+    loader.classList.remove('is-active', 'is-first-launch');
+  }
+}
diff --git a/packages/app/services/localStorage.ts b/packages/app/services/localStorage.ts
index faa8a89..c5e1b2a 100644
--- a/packages/app/services/localStorage.ts
+++ b/packages/app/services/localStorage.ts
@@ -13,12 +13,15 @@ try {
   logger.info('No storage available'); // log for statistic purposes
 }
 
-export function hasStorage() {
+export function hasStorage(): boolean {
   return _hasStorage;
 }
 
-// TODO: work on
 class DummyStorage implements Storage {
+  [name: string]: any;
+
+  readonly length: number;
+
   getItem(key: string): string | null {
     return this[key] || null;
   }
@@ -30,6 +33,14 @@ class DummyStorage implements Storage {
   removeItem(key: string): void {
     Reflect.deleteProperty(this, key);
   }
+
+  clear(): void {
+    Object.keys(this).forEach(this.removeItem);
+  }
+
+  key(index: number): string | null {
+    return Object.keys(this)[index] || null;
+  }
 }
 
 export const localStorage = _hasStorage
diff --git a/packages/app/services/logger/abbreviate.js b/packages/app/services/logger/abbreviate.ts
similarity index 78%
rename from packages/app/services/logger/abbreviate.js
rename to packages/app/services/logger/abbreviate.ts
index 98d38b7..ddac1fe 100644
--- a/packages/app/services/logger/abbreviate.js
+++ b/packages/app/services/logger/abbreviate.ts
@@ -1,5 +1,11 @@
 const STRING_MAX_LENGTH = 128 * 1024;
 
+type Filter = (key: string | undefined, value: Record<string, any>) => any;
+
+interface State {
+  sizeLeft: number;
+}
+
 /**
  * Create a copy of any object without non-serializable elements to make result safe for JSON.stringify().
  * Guaranteed to never throw.
@@ -16,14 +22,17 @@ const STRING_MAX_LENGTH = 128 * 1024;
  *
  * @returns {object}
  */
-function abbreviate(obj, options = {}) {
-  const filter =
-    options.filter ||
-    function(key, value) {
-      return value;
-    };
-  const maxDepth = options.depth || 10;
-  const maxSize = options.maxSize || 1 * 1024 * 1024;
+function abbreviate(
+  obj: Record<string, any>,
+  options: {
+    filter?: Filter;
+    depth?: number;
+    maxSize?: number;
+  } = {},
+): string {
+  const filter: Filter = options.filter || ((key, value) => value);
+  const maxDepth: number = options.depth || 10;
+  const maxSize: number = options.maxSize || 1 * 1024 * 1024;
 
   return abbreviateRecursive(
     undefined,
@@ -34,7 +43,7 @@ function abbreviate(obj, options = {}) {
   );
 }
 
-function limitStringLength(str) {
+function limitStringLength(str: string): string {
   if (str.length > STRING_MAX_LENGTH) {
     return `${str.substring(0, STRING_MAX_LENGTH / 2)} … ${str.substring(
       str.length - STRING_MAX_LENGTH / 2,
@@ -44,7 +53,14 @@ function limitStringLength(str) {
   return str;
 }
 
-function abbreviateRecursive(key, obj, filter, state, maxDepth) {
+function abbreviateRecursive(
+  key: string | undefined,
+  obj: any,
+  filter: Filter,
+  state: State,
+  maxDepth: number,
+): any {
+  // TODO: return type
   if (state.sizeLeft < 0) {
     return '**skipped**';
   }
@@ -64,13 +80,16 @@ function abbreviateRecursive(key, obj, filter, state, maxDepth) {
           break; // fall back to stringification
         }
 
-        const newobj = Array.isArray(obj) ? [] : {};
+        const newobj: Record<string, any> | Array<any> = Array.isArray(obj)
+          ? []
+          : {};
 
         for (const i in obj) {
           if (!obj.hasOwnProperty(i)) {
             continue;
           }
 
+          // @ts-ignore
           newobj[i] = abbreviateRecursive(
             i,
             obj[i],
@@ -113,7 +132,7 @@ function abbreviateRecursive(key, obj, filter, state, maxDepth) {
   }
 }
 
-function commonFilter(key, val) {
+function commonFilter(key: any, val: any): any {
   if (typeof val === 'function') {
     return undefined;
   }
@@ -135,6 +154,7 @@ function commonFilter(key, val) {
         continue;
       }
 
+      // @ts-ignore
       err[i] = val[i];
     }
 
@@ -144,7 +164,7 @@ function commonFilter(key, val) {
   return val;
 }
 
-function nodeFilter(key, val) {
+function nodeFilter(key: any, val: any): any {
   // domain objects are huge and have circular references
   if (key === 'domain' && typeof val === 'object' && val._events) {
     return '**domain ignored**';
@@ -161,7 +181,7 @@ function nodeFilter(key, val) {
   return commonFilter(key, val);
 }
 
-function browserFilter(key, val) {
+function browserFilter(key: any, val: any): any {
   if (val === window) {
     return '**window**';
   }
@@ -183,7 +203,7 @@ function browserFilter(key, val) {
 
 export { abbreviate, nodeFilter, browserFilter };
 
-export default function(obj) {
+export default function(obj: any): string {
   return abbreviate(obj, {
     filter: browserFilter,
   });
diff --git a/packages/app/services/logger/logger.ts b/packages/app/services/logger/logger.ts
index 20afddd..8a688c8 100644
--- a/packages/app/services/logger/logger.ts
+++ b/packages/app/services/logger/logger.ts
@@ -86,7 +86,7 @@ class Logger {
 function log(
   level: 'error' | 'warning' | 'info' | 'debug',
   message: string | Error,
-  context?: { [key: string]: any },
+  context?: Record<string, any>,
 ) {
   const method: 'error' | 'warn' | 'info' | 'debug' =
     level === 'warning' ? 'warn' : level;
@@ -120,7 +120,7 @@ function log(
  *
  * @returns {Promise}
  */
-function prepareContext(context: { [key: string]: any }) {
+function prepareContext(context: Record<string, any>): Promise<string> {
   if (context instanceof Response) {
     // TODO: rewrite abbreviate to use promises and recursively find Response
     return context
diff --git a/packages/app/services/request/InternalServerError.ts b/packages/app/services/request/InternalServerError.ts
index 1591526..2d084cd 100644
--- a/packages/app/services/request/InternalServerError.ts
+++ b/packages/app/services/request/InternalServerError.ts
@@ -1,12 +1,12 @@
 import { Resp } from './request';
 
-class InternalServerError extends Error {
-  error: Error | { [key: string]: any };
-  originalResponse: Resp<any>;
+export default class InternalServerError extends Error {
+  public readonly error: Error | Record<string, any>;
+  public readonly originalResponse: Resp<any>;
 
   constructor(
-    error: Error | string | { [key: string]: any },
-    resp?: Response | { [key: string]: any },
+    error: Error | string | Record<string, any>,
+    resp?: Response | Record<string, any>,
   ) {
     super();
 
@@ -32,5 +32,3 @@ class InternalServerError extends Error {
     Object.assign(this, error);
   }
 }
-
-export default InternalServerError;
diff --git a/packages/app/services/request/PromiseMiddlewareLayer.test.ts b/packages/app/services/request/PromiseMiddlewareLayer.test.ts
index 6b64565..20fa4e4 100644
--- a/packages/app/services/request/PromiseMiddlewareLayer.test.ts
+++ b/packages/app/services/request/PromiseMiddlewareLayer.test.ts
@@ -5,23 +5,26 @@ import PromiseMiddlewareLayer from 'app/services/request/PromiseMiddlewareLayer'
 
 describe('PromiseMiddlewareLayer', () => {
   describe('#add()', () => {
-    let layer;
+    let layer: PromiseMiddlewareLayer;
 
     beforeEach(() => {
       layer = new PromiseMiddlewareLayer();
     });
 
     it('should have no middlewares by default', () => {
+      // @ts-ignore
       expect(layer.middlewares, 'to have length', 0);
     });
 
     it('should add middleware into layer', () => {
       layer.add({});
 
+      // @ts-ignore
       expect(layer.middlewares, 'to have length', 1);
     });
 
     it('throws if middleware is not object', () => {
+      // @ts-ignore
       expect(() => layer.add(1), 'to throw', 'A middleware must be an object');
     });
   });
@@ -36,7 +39,7 @@ describe('PromiseMiddlewareLayer', () => {
     testAction('then');
     testAction('catch');
 
-    function testAction(name) {
+    function testAction(name: string) {
       describe(`run('${name}')`, () => {
         it('should run middleware', () => {
           const layer: any = new PromiseMiddlewareLayer();
diff --git a/packages/app/services/request/PromiseMiddlewareLayer.ts b/packages/app/services/request/PromiseMiddlewareLayer.ts
index 1ed2ce4..11301b0 100644
--- a/packages/app/services/request/PromiseMiddlewareLayer.ts
+++ b/packages/app/services/request/PromiseMiddlewareLayer.ts
@@ -2,7 +2,7 @@ import { Options } from './request';
 
 type Action = 'catch' | 'then' | 'before';
 
-interface MiddlewareRequestOptions {
+export interface MiddlewareRequestOptions {
   url: string;
   options: Options;
 }
@@ -71,7 +71,7 @@ class PromiseMiddlewareLayer {
     options: MiddlewareRequestOptions,
     restart: () => Promise<any>,
   ): Promise<any>;
-  run(action: Action, data, ...rest) {
+  run(action: Action, data: any, ...rest: any) {
     const promiseMethod = action === 'catch' ? 'catch' : 'then';
 
     return this.middlewares
@@ -81,18 +81,18 @@ class PromiseMiddlewareLayer {
           invoke(
             promise,
             promiseMethod,
-          )(resp => invoke(middleware, action)(resp, ...rest)),
+          )((resp: any) => invoke(middleware, action)(resp, ...rest)),
         invoke(Promise, action === 'catch' ? 'reject' : 'resolve')(data),
       );
   }
 }
 
-function invoke(instance: { [key: string]: any }, method: string) {
+function invoke(instance: Record<string, any>, method: string) {
   if (typeof instance[method] !== 'function') {
     throw new Error(`Can not invoke ${method} on ${instance}`);
   }
 
-  return (...args) => instance[method](...args);
+  return (...args: any) => instance[method](...args);
 }
 
 export default PromiseMiddlewareLayer;
diff --git a/packages/app/services/request/RequestAbortedError.ts b/packages/app/services/request/RequestAbortedError.ts
index 19414be..e2f3dd7 100644
--- a/packages/app/services/request/RequestAbortedError.ts
+++ b/packages/app/services/request/RequestAbortedError.ts
@@ -1,12 +1,13 @@
-function RequestAbortedError(error: Error | Response) {
-  this.name = 'RequestAbortedError';
-  this.message = 'RequestAbortedError';
-  this.error = error;
-  this.stack = new Error().stack;
+export default class RequestAbortedError extends Error {
+  private error: Error | Response;
+
+  constructor(error: Error | Response) {
+    super();
+
+    this.name = this.constructor.name;
+    this.message = this.constructor.name;
+    this.stack = new Error().stack;
 
-  if (typeof error === 'string') {
-    this.message = error;
-  } else {
     if ('message' in error) {
       this.message = error.message;
     }
@@ -15,8 +16,3 @@ function RequestAbortedError(error: Error | Response) {
     Object.assign(this, error);
   }
 }
-
-RequestAbortedError.prototype = Object.create(Error.prototype);
-RequestAbortedError.prototype.constructor = RequestAbortedError;
-
-export default RequestAbortedError;
diff --git a/packages/app/services/request/request.test.ts b/packages/app/services/request/request.test.ts
index 40684c7..b9d00bd 100644
--- a/packages/app/services/request/request.test.ts
+++ b/packages/app/services/request/request.test.ts
@@ -19,11 +19,13 @@ describe('services/request', () => {
 
       (fetch as any).returns(Promise.resolve(resp));
 
-      return expect(request.get('/foo'), 'to be rejected').then(error => {
-        expect(error, 'to be an', InternalServerError);
-        expect(error.originalResponse, 'to be', resp);
-        expect(error.message, 'to contain', 'Unexpected token');
-      });
+      return expect(request.get('/foo'), 'to be rejected').then(
+        (error: InternalServerError) => {
+          expect(error, 'to be an', InternalServerError);
+          expect(error.originalResponse, 'to be', resp);
+          expect(error.message, 'to contain', 'Unexpected token');
+        },
+      );
     });
 
     it('should wrap 5xx errors', () => {
@@ -31,10 +33,12 @@ describe('services/request', () => {
 
       (fetch as any).returns(Promise.resolve(resp));
 
-      return expect(request.get('/foo'), 'to be rejected').then(error => {
-        expect(error, 'to be an', InternalServerError);
-        expect(error.originalResponse, 'to be', resp);
-      });
+      return expect(request.get('/foo'), 'to be rejected').then(
+        (error: InternalServerError) => {
+          expect(error, 'to be an', InternalServerError);
+          expect(error.originalResponse, 'to be', resp);
+        },
+      );
     });
 
     it('should wrap aborted errors', () => {
@@ -42,10 +46,13 @@ describe('services/request', () => {
 
       (fetch as any).returns(Promise.resolve(resp));
 
-      return expect(request.get('/foo'), 'to be rejected').then(error => {
-        expect(error, 'to be an', RequestAbortedError);
-        expect(error.error, 'to be', resp);
-      });
+      return expect(request.get('/foo'), 'to be rejected').then(
+        (error: RequestAbortedError) => {
+          expect(error, 'to be an', RequestAbortedError);
+          // @ts-ignore
+          expect(error.error, 'to be', resp);
+        },
+      );
     });
 
     it('should wrap "Failed to fetch" errors', () => {
@@ -53,11 +60,14 @@ describe('services/request', () => {
 
       (fetch as any).returns(Promise.resolve(resp));
 
-      return expect(request.get('/foo'), 'to be rejected').then(error => {
-        expect(error, 'to be an', RequestAbortedError);
-        expect(error.message, 'to be', resp.message);
-        expect(error.error, 'to be', resp);
-      });
+      return expect(request.get('/foo'), 'to be rejected').then(
+        (error: RequestAbortedError) => {
+          expect(error, 'to be an', RequestAbortedError);
+          expect(error.message, 'to be', resp.message);
+          // @ts-ignore
+          expect(error.error, 'to be', resp);
+        },
+      );
     });
   });
 
diff --git a/packages/app/services/request/request.ts b/packages/app/services/request/request.ts
index 44d6d0f..4e56668 100644
--- a/packages/app/services/request/request.ts
+++ b/packages/app/services/request/request.ts
@@ -10,7 +10,7 @@ export type Resp<T> = T & {
 
 export interface Options extends RequestInit {
   token?: string | null;
-  headers: { [key: string]: any };
+  headers: Record<string, any>;
 }
 
 const buildOptions = (
@@ -143,16 +143,16 @@ const rejectWithJSON = (resp: Response) =>
 
     throw resp;
   });
-const handleResponseSuccess = resp =>
+const handleResponseSuccess = (resp: { success?: boolean }) =>
   resp.success || typeof resp.success === 'undefined'
     ? Promise.resolve(resp)
     : Promise.reject(resp);
 
-async function doFetch(url: string, options: Options) {
+async function doFetch<T>(url: string, options: Options): Promise<Resp<T>> {
   // NOTE: we are wrapping fetch, because it is returning
   // Promise instance that can not be polyfilled with Promise.prototype.finally
 
-  const headers: { [key: string]: string } = { ...options.headers } as any;
+  const headers: Record<string, string> = { ...options.headers } as any;
   headers.Accept = 'application/json';
 
   options.headers = headers;
diff --git a/packages/app/test/unexpected.js b/packages/app/test/unexpected.ts
similarity index 100%
rename from packages/app/test/unexpected.js
rename to packages/app/test/unexpected.ts
diff --git a/packages/scripts/build-dll.js b/packages/scripts/build-dll.ts
similarity index 69%
rename from packages/scripts/build-dll.js
rename to packages/scripts/build-dll.ts
index 9211f4b..6acc7ce 100644
--- a/packages/scripts/build-dll.js
+++ b/packages/scripts/build-dll.ts
@@ -2,21 +2,22 @@
 /* eslint-env node */
 /* eslint-disable no-console */
 
-const fs = require('fs');
-const webpack = require('webpack');
-const chalk = require('chalk');
+import fs, { Stats } from 'fs';
+import webpack, { MultiCompiler } from 'webpack';
+import chalk from 'chalk';
 
-const webpackConfig = require('../../webpack.dll.config');
+import webpackConfig from './../../webpack.dll.config';
 
-const compiler = webpack(webpackConfig);
+// @ts-ignore
+const compiler: MultiCompiler = webpack(webpackConfig);
 
 Promise.all([
   stat(`${__dirname}/../../yarn.lock`),
   stat(`${__dirname}/../../dll/vendor.json`),
 ])
-  .then(stats => {
-    const lockFile = new Date(stats[0].mtime);
-    const dll = new Date(stats[1].mtime);
+  .then(([lockFileStats, dllFileStats]) => {
+    const lockFile = new Date(lockFileStats.mtime);
+    const dll = new Date(dllFileStats.mtime);
 
     if (dll < lockFile) {
       return Promise.reject({
@@ -41,7 +42,7 @@ Promise.all([
 
         logResult(
           chalk.green('Dll was successfully build in %s ms'),
-          stats.endTime - stats.startTime,
+          stats.endTime! - stats.startTime!,
         );
 
         resolve();
@@ -53,13 +54,13 @@ Promise.all([
     process.exit(1);
   });
 
-function logResult(...args) {
+function logResult(...args: any[]): void {
   console.log('\n');
   console.log(...args);
   console.log('\n');
 }
 
-function stat(path) {
+function stat(path: string): Promise<Stats> {
   return new Promise((resolve, reject) => {
     fs.stat(path, (err, stats) => {
       err ? reject(err) : resolve(stats);
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 3cd128a..51fa1e6 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -21,5 +21,8 @@
     "multi-progress": "^2.0.0",
     "prompt": "^1.0.0",
     "utility-types": "^3.10.0"
+  },
+  "devDependencies": {
+    "@types/webpack": "^4.41.12"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 2e62c2b..fde93e8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,11 +12,13 @@
     "checkJs": true,
     "allowJs": true,
     "strictNullChecks": true,
+    "strictPropertyInitialization": false,
     "isolatedModules": true,
     // we can not enable json modules, because this will disable
     // *.intl.json overrides (@see `webpack-loaders.d.ts`)
     "resolveJsonModule": false,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "strict": true
   },
   "include": ["@types", "packages", "config", ".storybook"]
 }
diff --git a/webpack.dll.config.js b/webpack.dll.config.js
index faacf0b..e0fd2b0 100644
--- a/webpack.dll.config.js
+++ b/webpack.dll.config.js
@@ -29,6 +29,7 @@ const webpackConfig = {
     publicPath: '/',
   },
 
+  // @ts-ignore
   resolve: baseConfig.resolve,
 
   plugins: [
diff --git a/yarn.lock b/yarn.lock
index df18eb9..b50d1de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2749,6 +2749,11 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
 "@types/babel__core@^7.1.0", "@types/babel__core@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
@@ -2782,6 +2787,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/cheerio@*":
+  version "0.22.15"
+  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.15.tgz#69040ffa92c309beeeeb7e92db66ac3f80700c0b"
+  integrity sha512-UGiiVtJK5niCqMKYmLEFz1Wl/3L5zF/u78lu8CwoUywWXRr9LDimeYuOzXVLXBMO758fcTdFtgjvqlztMH90MA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -2792,6 +2804,14 @@
   resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
   integrity sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==
 
+"@types/enzyme@^3.8.0":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.4.tgz#dd4961042381a7c0f6637ce25fec3f773ce489dd"
+  integrity sha512-P5XpxcIt9KK8QUH4al4ttfJfIHg6xmN9ZjyUzRSzAsmDYwRXLI05ng/flZOPXrEXmp8ZYiN8/tEXYK5KSOQk3w==
+  dependencies:
+    "@types/cheerio" "*"
+    "@types/react" "*"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -2884,9 +2904,9 @@
     "@types/node" "*"
 
 "@types/node@*", "@types/node@^12.0.0":
-  version "12.12.24"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.24.tgz#d4606afd8cf6c609036b854360367d1b2c78931f"
-  integrity sha512-1Ciqv9pqwVtW6FsIUKSZNB82E5Cu1I2bBTj1xuIHXLe/1zYLl3956Nbhg2MzSYHVfl9/rmanjbQIb7LibfCnug==
+  version "12.12.39"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.39.tgz#532d25c1e639d89dd6f3aa1d7b3962e3e7fa943d"
+  integrity sha512-pADGfwnDkr6zagDwEiCVE4yQrv7XDkoeVa4OfA9Ju/zRTk6YNDLGtQbkdL4/56mCQQCs4AhNrBIag6jrp7ZuOg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -2900,6 +2920,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/promise.prototype.finally@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/promise.prototype.finally/-/promise.prototype.finally-2.0.3.tgz#e77b4911f4b0564ee9142bd7cb6ba34a5c7dccc3"
+  integrity sha512-hQfmCK9Hw8diRIa3KoIDY4aimdxckamHUcmaZeB9tBMyb/Shi1yCBIPfry+nqN4jILNVThY1tnTwdMhQeMjqrw==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -2923,6 +2948,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-dom@^16.9.4":
+  version "16.9.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
+  integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-helmet@^5.0.15":
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.15.tgz#af0370617307e9f062c6aee0f1f5588224ce646e"
@@ -2930,6 +2962,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-motion@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/react-motion/-/react-motion-0.0.29.tgz#1a22e11bc1452150e8aa58463f72dd921ff10721"
+  integrity sha512-MD1DbdcDKruR0zz5Z0XIlrkPdjDMgYx0AHhbaoTBpDirUTt8Bd7x6OFE458nEINZxfPW0EcEOw2O8S/WwGNLsA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.6":
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.6.tgz#9a2097d1c74cfd7b4ec3d1c4e30fe806c2058da2"
@@ -2971,6 +3010,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.2.3":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470"
+  integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.17":
   version "16.9.17"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
@@ -2984,21 +3030,69 @@
   resolved "https://registry.yarnpkg.com/@types/schema-utils/-/schema-utils-1.0.0.tgz#295d36f01e2cb8bc3207ca1d9a68e210db6b40cb"
   integrity sha512-YesPanU1+WCigC/Aj1Mga8UCOjHIfMNHZ3zzDsUY7lI8GlKnh/Kv2QwJOQ+jNQ36Ru7IfzSedlG14hppYaN13A==
 
+"@types/sinon@^7.5.1":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-7.5.2.tgz#5e2f1d120f07b9cda07e5dedd4f3bf8888fccdb9"
+  integrity sha512-T+m89VdXj/eidZyejvmoP9jivXgBDdkOSBVQjU9kF349NEx10QdPNGxHeZUaj1IlJ32/ewdyXJjnJxyxJroYwg==
+
 "@types/sizzle@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
   integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
 
+"@types/source-list-map@*":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
+  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/tapable@*":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
+  integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
+
+"@types/uglify-js@*":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.0.tgz#4490a140ca82aa855ad68093829e7fd6ae94ea87"
+  integrity sha512-3ZcoyPYHVOCcLpnfZwD47KFLr8W/mpUcgjpf1M4Q78TMJIw7KMAHSjiCLJp1z3ZrBR9pTLbe191O0TldFK5zcw==
+  dependencies:
+    source-map "^0.6.1"
+
+"@types/webfontloader@^1.6.29":
+  version "1.6.29"
+  resolved "https://registry.yarnpkg.com/@types/webfontloader/-/webfontloader-1.6.29.tgz#c6b5f6eb8ca31d0aae6b02b6c1300349dd93ea8e"
+  integrity sha512-wobuM+LvpkzU296NsFVRGDAFWw3X2XEhrLHuvV+VGSbok6aOxQcymmopUFwNB69qy5oudHt9lYC0JF+z+DxFLw==
+
 "@types/webpack-env@^1.15.0":
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.0.tgz#bd9956d5044b1fb43e869a9ba9148862ff98d9fd"
   integrity sha512-TfcyNecCz8Z9/s90gBOBniyzZrTru8u2Vp0VZODq4KEBaQu8bfXvu7o/KUOecMpzjbFPUA7aqgSq628Iue5BQg==
 
+"@types/webpack-sources@*":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.7.tgz#0a330a9456113410c74a5d64180af0cbca007141"
+  integrity sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==
+  dependencies:
+    "@types/node" "*"
+    "@types/source-list-map" "*"
+    source-map "^0.6.1"
+
+"@types/webpack@^4.41.12":
+  version "4.41.12"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.12.tgz#0386ee2a2814368e2f2397abb036c0bf173ff6c3"
+  integrity sha512-BpCtM4NnBen6W+KEhrL9jKuZCXVtiH6+0b6cxdvNt2EwU949Al334PjQSl2BeAyvAX9mgoNNG21wvjP3xZJJ5w==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
+
 "@types/yargs-parser@*":
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"