web/satellite: fix lint issues

After migrating to eslint some errors were disabled to make it easier to
migrate.

This enables all the lint rules and treats all warnings as a build
failure. Similarly, CI won't automatically try to fix mistakes.

Change-Id: I80f808af026fc51bed90421b3b24737994a52094

Jenkinsfile.public

@@ -269,7 +269,7 @@ pipeline {
                 stage('web/satellite') {
                     steps {
                         dir("web/satellite") {
-                            sh 'npm run lint'
+                            sh 'npm run lint-ci'
                             sh script: 'npm audit', returnStatus: true
                             sh 'npm run test'
                         }

web/multinode/.eslintrc.js

@@ -18,10 +18,10 @@ module.exports = {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 
-        "indent": ["error", 4],
+        "indent": ["warn", 4],
 
         "@typescript-eslint/no-unused-vars": [
-            "error", {
+            "warn", {
                 "vars": "all",
                 "args": "all",
                 "argsIgnorePattern": "^_"

web/multinode/.stylelintrc.js

@@ -23,7 +23,7 @@ module.exports = {
         "selector-attribute-brackets-space-inside": "never",
         "declaration-block-trailing-semicolon": "always",
         "declaration-colon-space-before": "never",
-        "declaration-colon-space-after": "always",
+        "declaration-colon-space-after": "always-single-line",
         "number-leading-zero": "always",
         "function-url-quotes": "always",
         "font-family-name-quotes": "always-unless-keyword",
@@ -40,6 +40,12 @@ module.exports = {
         "media-feature-range-operator-space-after": "always",
         "media-feature-parentheses-space-inside": "never",
         "media-feature-colon-space-before": "never",
-        "media-feature-colon-space-after": "always"
+        "media-feature-colon-space-after": "always",
+        "selector-pseudo-element-no-unknown": [
+            true,
+            {
+                "ignorePseudoElements": ["v-deep"]
+            }
+        ]
     }
 }

web/satellite/.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     env: {
         node: true
     },
-    'extends': [
+    extends: [
         'plugin:vue/essential',
         'eslint:recommended',
         '@vue/typescript/recommended',
@@ -17,11 +17,19 @@ module.exports = {
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-        "@typescript-eslint/ban-ts-comment": "off",
-        "@typescript-eslint/no-empty-function": "off",
-        '@typescript-eslint/no-var-requires': 0,
-        "vue/require-v-for-key": "off",
 
-        "indent": ["error", 4],
+        "indent": ["warn", 4],
+
+        "@typescript-eslint/no-unused-vars": [
+            "warn", {
+                "vars": "all",
+                "args": "all",
+                "argsIgnorePattern": "^_"
+            }],
+
+        '@typescript-eslint/no-empty-function': "off",
+        '@typescript-eslint/no-var-requires': "off",
+
+        '@typescript-eslint/no-explicit-any': "off" // TODO: not everything has been fixed yet
     },
 }

web/satellite/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "lint": "vue-cli-service lint --fix && stylelint --max-warnings 100 \"**/*.{vue,css,sss,less,scss,sass}\" --fix",
+    "lint": "vue-cli-service lint --max-warnings 0 && stylelint --max-warnings 0 \"**/*.{vue,css,sss,less,scss,sass}\" --fix",
+    "lint-ci": "vue-cli-service lint --max-warnings 0 --no-fix && stylelint --max-warnings 0 --no-fix \"**/*.{vue,css,sss,less,scss,sass}\"",
     "build": "vue-cli-service build",
     "wasm": "chmod +x ./scripts/build-wasm.sh && ./scripts/build-wasm.sh",
     "dev": "vue-cli-service build --mode development --watch",

web/satellite/src/api/projects.ts

@@ -129,7 +129,7 @@ export class ProjectsApiGql extends BaseGql implements ProjectsApi {
      * @param projectId- project ID
      * throws Error
      */
-    public async getLimits(projectId): Promise<ProjectLimits> {
+    public async getLimits(projectId: string): Promise<ProjectLimits> {
         const path = `${this.ROOT_PATH}/${projectId}/usage-limits`;
         const response = await this.http.get(path);
 

web/satellite/src/components/accessGrants/AccessGrants.vue

@@ -72,9 +72,7 @@ import { SortDirection } from '@/types/common';
 const {
     FETCH,
     TOGGLE_SELECTION,
-    CLEAR,
     CLEAR_SELECTION,
-    SET_SEARCH_QUERY,
     SET_SORT_BY,
     SET_SORT_DIRECTION,
 } = ACCESS_GRANTS_ACTIONS;
@@ -216,7 +214,7 @@ export default class AccessGrants extends Vue {
     /**
      * Returns AccessGrant item component.
      */
-    public get itemComponent() {
+    public get itemComponent(): typeof AccessGrantsItem {
         return AccessGrantsItem;
     }
 

web/satellite/src/components/accessGrants/steps/NameStep.vue

@@ -42,12 +42,8 @@ import VButton from '@/components/common/VButton.vue';
 
 import { RouteConfig } from '@/router';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
-import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { AccessGrant } from '@/types/accessGrants';
-import { ProjectFields } from '@/types/projects';
-import { PM_ACTIONS } from '@/utils/constants/actionNames';
 
 @Component({
     components: {

web/satellite/src/components/account/SettingsArea.vue

@@ -105,7 +105,6 @@ import EditIcon from '@/../static/images/common/edit.svg';
 import { USER_ACTIONS } from '@/store/modules/users';
 import { User } from '@/types/users';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-import { MetaUtils } from '@/utils/meta';
 
 @Component({
     components: {

web/satellite/src/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue

@@ -39,7 +39,7 @@ export default class PaymentsHistoryItemDate extends Vue {
 
     private readonly expirationTimeInSeconds: number;
     private nowInSeconds = Math.trunc(new Date().getTime() / 1000);
-    private intervalID: number;
+    private intervalID: ReturnType<typeof setInterval>;
 
     /**
      * indicates if billing item is expired.
@@ -98,7 +98,7 @@ export default class PaymentsHistoryItemDate extends Vue {
      * Starts expiration timer if item is not expired.
      */
     private ready(): void {
-        this.intervalID = window.setInterval(() => {
+        this.intervalID = setInterval(() => {
             if ((this.expirationTimeInSeconds - this.nowInSeconds) < 0 || this.isTransactionCompleted) {
                 this.isExpired = true;
                 clearInterval(this.intervalID);

web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue

@@ -37,6 +37,7 @@ import ExpandIcon from '@/../static/images/common/BlueExpand.svg';
 import HideIcon from '@/../static/images/common/BlueHide.svg';
 
 import { RouteConfig } from '@/router';
+import { Route } from 'vue-router';
 import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
@@ -63,7 +64,7 @@ export default class PeriodSelection extends Vue {
      * @param from
      * @param next
      */
-    public async beforeRouteLeave(to, from, next): Promise<void> {
+    public async beforeRouteLeave(_to: Route, _from: Route, next: () => void): Promise<void> {
         try {
             await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
         } catch (error) {

web/satellite/src/components/account/billing/paidTier/AddPaymentMethodModal.vue

@@ -206,7 +206,7 @@ export default class AddPaymentMethodModal extends Vue {
      *
      * @param token from Stripe
      */
-    public async addCardToDB(token: string) {
+    public async addCardToDB(token: string): Promise<void> {
         try {
             await this.$store.dispatch(PAYMENTS_ACTIONS.ADD_CREDIT_CARD, token);
 

web/satellite/src/components/account/billing/paymentMethods/AddCardForm.vue

@@ -46,7 +46,7 @@ export default class AddCardForm extends Vue {
      *
      * @param token from Stripe
      */
-    public async addCard(token: string) {
+    public async addCard(token: string): Promise<void> {
         this.$emit('toggleIsLoading');
 
         try {

web/satellite/src/components/account/billing/paymentMethods/CardComponent.vue

@@ -78,7 +78,7 @@ export default class CardComponent extends Vue {
     /**
      * Returns card logo depends of brand.
      */
-    public get cardIcon() {
+    public get cardIcon(): Vue {
         switch (this.creditCard.brand) {
         case 'jcb':
             return JCBIcon;

web/satellite/src/components/account/billing/paymentMethods/StripeCardInput.vue

@@ -17,11 +17,21 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import { MetaUtils } from '@/utils/meta';
 
+interface StripeResponse {
+    error: string
+    token: {
+        id: unknown
+        card: {
+            funding : string
+        }
+    }
+}
+
 // StripeCardInput encapsulates Stripe add card addition logic
 @Component
 export default class StripeCardInput extends Vue {
     @Prop({default: () => console.error('onStripeResponse is not reinitialized')})
-    private readonly onStripeResponseCallback: (result: any) => void;
+    private readonly onStripeResponseCallback: (tokenId: unknown) => void;
 
     private isLoading = false;
 
@@ -88,7 +98,7 @@ export default class StripeCardInput extends Vue {
      *
      * @param result stripe response
      */
-    public async onStripeResponse(result: any): Promise<void> {
+    public async onStripeResponse(result: StripeResponse): Promise<void> {
         if (result.error) {
             return;
         }
@@ -106,7 +116,7 @@ export default class StripeCardInput extends Vue {
     /**
      * Clears listeners.
      */
-    public beforeDestroy() {
+    public beforeDestroy(): void {
         this.cardElement.removeEventListener('change');
     }
 

web/satellite/src/components/common/AddCouponCodeInput.vue

@@ -97,7 +97,7 @@ export default class AddCouponCodeInput extends Vue {
     /**
      * Check if coupon code is valid
      */
-    public async onApplyClick() {
+    public async onApplyClick(): Promise<void> {
         try {
             await this.$store.dispatch(APPLY_COUPON_CODE, this.couponCode);
         } catch (error) {

web/satellite/src/components/common/HeaderlessInput.vue

@@ -130,7 +130,8 @@ export default class HeaderlessInput extends Vue {
     /**
      * triggers on input.
      */
-    public onInput({ target }): void {
+    public onInput(event: Event): void {
+        const target = event.target as HTMLInputElement;
         if (target.value.length > this.maxSymbols) {
             this.value = target.value.slice(0, this.maxSymbols);
         } else {

web/satellite/src/components/common/RegistrationSuccess.vue

@@ -59,7 +59,7 @@ import { LocalData } from '@/utils/localData';
 export default class RegistrationSuccess extends Vue {
     private isResendEmailButtonDisabled = true;
     private timeToEnableResendEmailButton = '00:30';
-    private intervalID: any = null;
+    private intervalID: ReturnType<typeof setInterval>;
 
     private readonly auth: AuthHttpApi = new AuthHttpApi();
 

web/satellite/src/components/common/SelectInput.vue

@@ -62,7 +62,8 @@ export default class SelectInput extends Vue {
     /**
      * triggers on input.
      */
-    public onInput({ target }): void {
+    public onInput(event: Event): void {
+        const target = event.target as HTMLSelectElement;
         this.$emit('setData', target.value);
     }
 

web/satellite/src/components/common/VHeader.vue

@@ -39,7 +39,7 @@ export default class VHeader extends Vue {
         search: VSearch & ClearSearch;
     };
 
-    public clearSearch() {
+    public clearSearch(): void {
         this.$refs.search.clearSearch();
     }
 }

web/satellite/src/components/common/VPagination.vue

@@ -65,7 +65,7 @@ export default class VPagination extends Vue {
     /**
      * Component initialization.
      */
-    public mounted() {
+    public mounted(): void {
         this.populatePagesArray();
     }
 
@@ -109,7 +109,7 @@ export default class VPagination extends Vue {
      * Method after total page count change.
      */
     @Watch('totalPageCount')
-    public onPageCountChange(val: number, oldVal: number) {
+    public onPageCountChange(_val: number, _oldVal: number): void {
         this.resetPageIndex();
     }
 

web/satellite/src/components/common/VSearch.vue

@@ -68,13 +68,13 @@ export default class VSearch extends Vue {
     /**
      * Clears search query and collapses input.
      */
-    public clearSearch() {
+    public clearSearch(): void {
         this.searchQuery = '';
         this.processSearchQuery();
         this.inputWidth = '56px';
     }
 
-    public async processSearchQuery() {
+    public async processSearchQuery(): Promise<void> {
         await this.search(this.searchQuery);
     }
 }

web/satellite/src/components/notifications/NotificationItem.vue

@@ -58,7 +58,7 @@ export default class NotificationItem extends Vue {
     /**
      * Uses for class change for animation.
      */
-    public mounted() {
+    public mounted(): void {
         setTimeout(() => {
             this.isClassActive = true;
         }, 100);

web/satellite/src/components/objects/EnterPassphrase.vue

@@ -98,8 +98,9 @@ export default class EnterPassphrase extends Vue {
      * Changes passphrase data from input value.
      * @param event
      */
-    public onChangePassphrase(event): void {
+    public onChangePassphrase(event: Event): void {
-        this.passphrase = event.target.value.trim();
+        const target = event.target as HTMLTextAreaElement;
+        this.passphrase = target.value.trim();
         this.resetErrors();
     }
 

web/satellite/src/components/objects/ObjectsArea.vue

@@ -30,7 +30,7 @@ export default class ObjectsArea extends Vue {
      * Lifecycle hook before component destroying.
      * Clears objects VUEX state.
      */
-    public beforeDestroy() {
+    public beforeDestroy(): void {
         this.$store.dispatch(OBJECTS_ACTIONS.CLEAR);
     }
 }

web/satellite/src/components/onboardingTour/steps/OverviewStep.vue

@@ -100,12 +100,7 @@ import GatewayIcon from '@/../static/images/onboardingTour/s3-gateway.svg';
 
 import { AnalyticsHttpApi } from '@/api/analytics';
 import { RouteConfig } from '@/router';
-import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
-import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
-import { ProjectFields } from '@/types/projects';
-import { PM_ACTIONS } from '@/utils/constants/actionNames';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 
 @Component({

web/satellite/src/components/project/EditProjectDetails.vue

@@ -110,10 +110,10 @@ export default class EditProjectDetails extends Vue {
     /**
      * Triggers on name input.
      */
-    public onNameInput({ target }): void {
+    public onNameInput(event: Event): void {
+        const target = event.target as HTMLInputElement;
         if (target.value.length < MAX_NAME_LENGTH) {
             this.nameValue = target.value;
-
             return;
         }
 
@@ -123,10 +123,10 @@ export default class EditProjectDetails extends Vue {
     /**
      * Triggers on description input.
      */
-    public onDescriptionInput({ target }): void {
+    public onDescriptionInput(event: Event): void {
+        const target = event.target as HTMLInputElement;
         if (target.value.length < MAX_DESCRIPTION_LENGTH) {
             this.descriptionValue = target.value;
-
             return;
         }
 

web/satellite/src/components/project/ProjectDashboard.vue

@@ -30,8 +30,7 @@ import ProjectUsage from '@/components/project/usage/ProjectUsage.vue';
 import { RouteConfig } from '@/router';
 import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
-import { PAYMENTS_ACTIONS, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
+import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
-import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { PM_ACTIONS } from '@/utils/constants/actionNames';
 import { MetaUtils } from '@/utils/meta';
 

web/satellite/src/components/project/buckets/BucketArea.vue

@@ -48,11 +48,7 @@ import SortingHeader from '@/components/project/buckets/SortingHeader.vue';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { Bucket } from '@/types/buckets';
 
-const {
+const {FETCH, SET_SEARCH} = BUCKET_ACTIONS;
-    FETCH,
-    SET_SEARCH,
-    CLEAR,
-} = BUCKET_ACTIONS;
 
 @Component({
     components: {
@@ -96,7 +92,7 @@ export default class BucketArea extends Vue {
     /**
      * Returns BucketItem for common list.
      */
-    public get itemComponent() {
+    public get itemComponent(): typeof BucketItem {
         return BucketItem;
     }
 

web/satellite/src/components/projectsList/ProjectsList.vue

@@ -103,7 +103,7 @@ export default class Projects extends Vue {
     /**
      * Returns ProjectsList item component.
      */
-    public get itemComponent() {
+    public get itemComponent(): typeof ProjectsListItem {
         return ProjectsListItem;
     }
 

web/satellite/src/components/team/AddUserPopup.vue

@@ -153,11 +153,12 @@ export default class AddUserPopup extends Vue {
         this.inputs = newInputsArray;
 
         if (length > 3) {
-            const scrollableDiv: any = document.querySelector('.add-user__form-container__inputs-group');
+            const scrollableDiv = document.querySelector('.add-user__form-container__inputs-group');
-
             if (scrollableDiv) {
-                const scrollableDivHeight = scrollableDiv.offsetHeight;
+                const scrollableDivHeight = scrollableDiv.getAttribute('offsetHeight');
-                scrollableDiv.scroll(0, -scrollableDivHeight);
+                if(scrollableDivHeight) {
+                    scrollableDiv.scroll(0, -scrollableDivHeight);
+                }
             }
         }
 
@@ -211,7 +212,7 @@ export default class AddUserPopup extends Vue {
      * Deletes selected email input from list.
      * @param index
      */
-    public deleteInput(index): void {
+    public deleteInput(index: number): void {
         if (this.inputs.length === 1) return;
 
         this.resetFormErrors(index);

web/satellite/src/components/team/ProjectMembersArea.vue

@@ -56,10 +56,7 @@ import { PM_ACTIONS } from '@/utils/constants/actionNames';
 
 const {
     FETCH,
-    DELETE,
     TOGGLE_SELECTION,
-    CLEAR,
-    SET_SEARCH_QUERY,
     SET_SORT_BY,
     SET_SORT_DIRECTION,
 } = PM_ACTIONS;
@@ -126,7 +123,7 @@ export default class ProjectMembersArea extends Vue {
         return projectMembersToReturn;
     }
 
-    public get getItemComponent() {
+    public get getItemComponent(): typeof ProjectMemberListItem {
         return ProjectMemberListItem;
     }
 

web/satellite/src/router/index.ts

@@ -410,7 +410,7 @@ router.beforeEach(async (to, from, next) => {
     next();
 });
 
-router.afterEach(({ name }, from) => {
+router.afterEach(({ name }, _from) => {
     if (!name) {
         return;
     }

web/satellite/src/store/index.ts

@@ -40,15 +40,16 @@ const projectMembersApi = new ProjectMembersApiGql();
 const projectsApi = new ProjectsApiGql();
 const paymentsApi = new PaymentsHttpApi();
 
-class ModulesState {
+export interface ModulesState {
-    public notificationsModule: NotificationsState;
+    notificationsModule: NotificationsState;
-    public accessGrantsModule: AccessGrantsState;
+    accessGrantsModule: AccessGrantsState;
-    public appStateModule;
+    appStateModule: typeof appStateModule.state;
-    public projectMembersModule: ProjectMembersState;
+    projectMembersModule: ProjectMembersState;
-    public paymentsModule: PaymentsState;
+    paymentsModule: PaymentsState;
-    public usersModule: User;
+    usersModule: User;
-    public projectsModule: ProjectsState;
+    projectsModule: ProjectsState;
-    public objectsModule: ObjectsState;
+    objectsModule: ObjectsState;
+    files: typeof files.state;
 }
 
 // Satellite store (vuex)

web/satellite/src/store/modules/accessGrants.ts

@@ -75,6 +75,12 @@ export class AccessGrantsState {
     public isAccessGrantsWebWorkerReady = false;
 }
 
+interface AccessGrantsContext {
+    state: AccessGrantsState
+    commit: any
+    rootGetters: any
+}
+
 /**
  * creates access grants module with all dependencies
  *
@@ -188,10 +194,10 @@ export function makeAccessGrantsModule(api: AccessGrantsApi): StoreModule<Access
             },
         },
         actions: {
-            setAccessGrantsWebWorker: function({commit}: any): void {
+            setAccessGrantsWebWorker: function({commit}: AccessGrantsContext): void {
                 commit(SET_ACCESS_GRANTS_WEB_WORKER);
             },
-            stopAccessGrantsWebWorker: function({commit}: any): void {
+            stopAccessGrantsWebWorker: function({commit}: AccessGrantsContext): void {
                 commit(STOP_ACCESS_GRANTS_WEB_WORKER);
             },
             fetchAccessGrants: async function ({commit, rootGetters, state}, pageNumber: number): Promise<AccessGrantsPage> {
@@ -203,46 +209,46 @@ export function makeAccessGrantsModule(api: AccessGrantsApi): StoreModule<Access
 
                 return accessGrantsPage;
             },
-            createAccessGrant: async function ({commit, rootGetters}: any, name: string): Promise<AccessGrant> {
+            createAccessGrant: async function ({rootGetters}: AccessGrantsContext, name: string): Promise<AccessGrant> {
                 const accessGrant = await api.create(rootGetters.selectedProject.id, name);
 
                 return accessGrant;
             },
-            deleteAccessGrants: async function({state}: any): Promise<void> {
+            deleteAccessGrants: async function({state}: AccessGrantsContext): Promise<void> {
                 await api.delete(state.selectedAccessGrantsIds);
             },
-            deleteAccessGrantsByNameAndProjectID: async function({state, rootGetters}: any, name: string): Promise<void> {
+            deleteAccessGrantsByNameAndProjectID: async function({rootGetters}: AccessGrantsContext, name: string): Promise<void> {
                 await api.deleteByNameAndProjectID(name, rootGetters.selectedProject.id);
             },
-            getGatewayCredentials: async function({commit}: any, payload): Promise<GatewayCredentials> {
+            getGatewayCredentials: async function({commit}: AccessGrantsContext, payload): Promise<GatewayCredentials> {
                 const credentials: GatewayCredentials = await api.getGatewayCredentials(payload.accessGrant, payload.optionalURL, payload.isPublic);
 
                 commit(SET_GATEWAY_CREDENTIALS, credentials);
 
                 return credentials;
             },
-            setAccessGrantsSearchQuery: function ({commit}, search: string) {
+            setAccessGrantsSearchQuery: function ({commit}: AccessGrantsContext, search: string) {
                 commit(SET_SEARCH_QUERY, search);
             },
-            setAccessGrantsSortingBy: function ({commit}, order: AccessGrantsOrderBy) {
+            setAccessGrantsSortingBy: function ({commit}: AccessGrantsContext, order: AccessGrantsOrderBy) {
                 commit(CHANGE_SORT_ORDER, order);
             },
-            setAccessGrantsSortingDirection: function ({commit}, direction: SortDirection) {
+            setAccessGrantsSortingDirection: function ({commit}: AccessGrantsContext, direction: SortDirection) {
                 commit(CHANGE_SORT_ORDER_DIRECTION, direction);
             },
-            setAccessGrantsDurationPermission: function ({commit}, permission: DurationPermission) {
+            setAccessGrantsDurationPermission: function ({commit}: AccessGrantsContext, permission: DurationPermission) {
                 commit(SET_DURATION_PERMISSION, permission);
             },
-            toggleAccessGrantsSelection: function ({commit}, accessGrant: AccessGrant): void {
+            toggleAccessGrantsSelection: function ({commit}: AccessGrantsContext, accessGrant: AccessGrant): void {
                 commit(TOGGLE_SELECTION, accessGrant);
             },
-            toggleBucketSelection: function ({commit}, bucketName: string): void {
+            toggleBucketSelection: function ({commit}: AccessGrantsContext, bucketName: string): void {
                 commit(TOGGLE_BUCKET_SELECTION, bucketName);
             },
-            clearAccessGrantsSelection: function ({commit}): void {
+            clearAccessGrantsSelection: function ({commit}: AccessGrantsContext): void {
                 commit(CLEAR_SELECTION);
             },
-            clearAccessGrants: function ({commit}): void {
+            clearAccessGrants: function ({commit}: AccessGrantsContext): void {
                 commit(CLEAR);
                 commit(CLEAR_SELECTION);
             },

web/satellite/src/store/modules/appState.ts

@@ -1,106 +1,122 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { PartneredSatellite } from '@/types/common.ts';
+import { PartneredSatellite } from '@/types/common';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { AppState } from '@/utils/constants/appStateEnum';
 
 import { APP_STATE_MUTATIONS } from '../mutationConstants';
 
+// Object that contains all states of views
+class ViewsState {
+    constructor(
+        public fetchState = AppState.LOADING,
+        public isAddTeamMembersPopupShown = false,
+        public isAccountDropdownShown = false,
+        public isSelectProjectDropdownShown = false,
+        public isResourcesDropdownShown = false,
+        public isSettingsDropdownShown = false,
+        public isEditProjectDropdownShown = false,
+        public isFreeCreditsDropdownShown = false,
+        public isAvailableBalanceDropdownShown = false,
+        public isPeriodsDropdownShown = false,
+        public isDeleteProjectPopupShown = false,
+        public isDeleteAccountPopupShown = false,
+        public isSuccessfulRegistrationShown = false,
+        public isEditProfilePopupShown = false,
+        public isChangePasswordPopupShown = false,
+        public isPaymentSelectionShown = false,
+        public isUploadCancelPopupVisible = false,
+
+        public setDefaultPaymentMethodID: string = "",
+        public deletePaymentMethodID: string = "",
+    ) {}
+}
+
+class State {
+    constructor(
+        public appState: ViewsState = new ViewsState(),
+        public satelliteName = '',
+        public partneredSatellites = new Array<PartneredSatellite>(),
+        public isBetaSatellite = false,
+        public couponCodeBillingUIEnabled = false,
+        public couponCodeSignupUIEnabled = false,
+    ){}
+}
+
+interface AppContext {
+    state: State;
+    commit: any;
+}
+
 export const appStateModule = {
-    state: {
+    state: new State(),
-        // Object that contains all states of views
-        appState: {
-            fetchState: AppState.LOADING,
-            isAddTeamMembersPopupShown: false,
-            isAccountDropdownShown: false,
-            isSelectProjectDropdownShown: false,
-            isResourcesDropdownShown: false,
-            isSettingsDropdownShown: false,
-            isEditProjectDropdownShown: false,
-            isFreeCreditsDropdownShown: false,
-            isAvailableBalanceDropdownShown: false,
-            isPeriodsDropdownShown: false,
-            isDeleteProjectPopupShown: false,
-            isDeleteAccountPopupShown: false,
-            isSuccessfulRegistrationShown: false,
-            isEditProfilePopupShown: false,
-            isChangePasswordPopupShown: false,
-            isPaymentSelectionShown: false,
-            isUploadCancelPopupVisible: false,
-        },
-        satelliteName: '',
-        partneredSatellites: new Array<PartneredSatellite>(),
-        isBetaSatellite: false,
-        couponCodeBillingUIEnabled: false,
-        couponCodeSignupUIEnabled: false,
-    },
     mutations: {
         // Mutation changing add projectMembers members popup visibility
-        [APP_STATE_MUTATIONS.TOGGLE_ADD_TEAMMEMBER_POPUP](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_ADD_TEAMMEMBER_POPUP](state: State): void {
             state.appState.isAddTeamMembersPopupShown = !state.appState.isAddTeamMembersPopupShown;
         },
         // Mutation changing account dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN](state: State): void {
             state.appState.isAccountDropdownShown = !state.appState.isAccountDropdownShown;
         },
         // Mutation changing select project dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN](state: State): void {
             state.appState.isSelectProjectDropdownShown = !state.appState.isSelectProjectDropdownShown;
         },
         // Mutation changing resources dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN](state: State): void {
             state.appState.isResourcesDropdownShown = !state.appState.isResourcesDropdownShown;
         },
         // Mutation changing settings dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN](state: State): void {
             state.appState.isSettingsDropdownShown = !state.appState.isSettingsDropdownShown;
         },
         // Mutation changing edit project dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN](state: State): void {
             state.appState.isEditProjectDropdownShown = !state.appState.isEditProjectDropdownShown;
         },
         // Mutation changing free credits dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN](state: State): void {
             state.appState.isFreeCreditsDropdownShown = !state.appState.isFreeCreditsDropdownShown;
         },
         // Mutation changing available balance dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN](state: State): void {
             state.appState.isAvailableBalanceDropdownShown = !state.appState.isAvailableBalanceDropdownShown;
         },
         // Mutation changing periods dropdown visibility
-        [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
             state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
         },
         // Mutation changing delete project popup visibility
-        [APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN](state: State): void {
             state.appState.isDeleteProjectPopupShown = !state.appState.isDeleteProjectPopupShown;
         },
         // Mutation changing delete account popup visibility
-        [APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN](state: State): void {
             state.appState.isDeleteAccountPopupShown = !state.appState.isDeleteAccountPopupShown;
         },
         // Mutation changing 'successful registration' area visibility.
-        [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: State): void {
             state.appState.isSuccessfulRegistrationShown = !state.appState.isSuccessfulRegistrationShown;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_POPUP](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_POPUP](state: State): void {
             state.appState.isChangePasswordPopupShown = !state.appState.isChangePasswordPopupShown;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_POPUP](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_POPUP](state: State): void {
             state.appState.isEditProfilePopupShown = !state.appState.isEditProfilePopupShown;
         },
-        [APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP](state: any): void {
+        [APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP](state: State): void {
             state.appState.isUploadCancelPopupVisible = !state.appState.isUploadCancelPopupVisible;
         },
-        [APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP](state: any, id: string): void {
+        [APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP](state: State, id: string): void {
             state.appState.setDefaultPaymentMethodID = id;
         },
-        [APP_STATE_MUTATIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP](state: any, id: string): void {
+        [APP_STATE_MUTATIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP](state: State, id: string): void {
             state.appState.deletePaymentMethodID = id;
         },
         // Mutation that closes each popup/dropdown
-        [APP_STATE_MUTATIONS.CLOSE_ALL](state: any): void {
+        [APP_STATE_MUTATIONS.CLOSE_ALL](state: State): void {
             state.appState.isAccountDropdownShown = false;
             state.appState.isSelectProjectDropdownShown = false;
             state.appState.isResourcesDropdownShown = false;
@@ -111,164 +127,164 @@ export const appStateModule = {
             state.appState.isPeriodsDropdownShown = false;
             state.appState.isPaymentSelectionShown = false;
         },
-        [APP_STATE_MUTATIONS.CHANGE_STATE](state: any, newFetchState: AppState): void {
+        [APP_STATE_MUTATIONS.CHANGE_STATE](state: State, newFetchState: AppState): void {
             state.appState.fetchState = newFetchState;
         },
         // Mutation changing payment selection visibility
-        [APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: any, value: boolean): void {
+        [APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION](state: State, value: boolean): void {
             state.appState.isPaymentSelectionShown = value;
         },
-        [APP_STATE_MUTATIONS.SET_SATELLITE_NAME](state: any, satelliteName: string): void {
+        [APP_STATE_MUTATIONS.SET_SATELLITE_NAME](state: State, satelliteName: string): void {
             state.satelliteName = satelliteName;
         },
-        [APP_STATE_MUTATIONS.SET_PARTNERED_SATELLITES](state: any, partneredSatellites: PartneredSatellite[]): void {
+        [APP_STATE_MUTATIONS.SET_PARTNERED_SATELLITES](state: State, partneredSatellites: PartneredSatellite[]): void {
             state.partneredSatellites = partneredSatellites;
         },
-        [APP_STATE_MUTATIONS.SET_SATELLITE_STATUS](state: any, isBetaSatellite: boolean): void {
+        [APP_STATE_MUTATIONS.SET_SATELLITE_STATUS](state: State, isBetaSatellite: boolean): void {
             state.isBetaSatellite = isBetaSatellite;
         },
-        [APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS](state: any, couponCodeBillingUIEnabled: boolean): void {
+        [APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS](state: State, couponCodeBillingUIEnabled: boolean): void {
             state.couponCodeBillingUIEnabled = couponCodeBillingUIEnabled;
         },
-        [APP_STATE_MUTATIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS](state: any, couponCodeSignupUIEnabled: boolean): void {
+        [APP_STATE_MUTATIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS](state: State, couponCodeSignupUIEnabled: boolean): void {
             state.couponCodeSignupUIEnabled = couponCodeSignupUIEnabled;
         },
     },
     actions: {
         // Commits mutation for changing app popups and dropdowns visibility state
-        [APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_TEAM_MEMBERS]: function ({commit, state}: AppContext): void {
             if (!state.appState.isAddTeamMembersPopupShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_ADD_TEAMMEMBER_POPUP);
         },
-        [APP_STATE_ACTIONS.TOGGLE_ACCOUNT]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_ACCOUNT]: function ({commit, state}: AppContext): void {
             if (!state.appState.isAccountDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_ACCOUNT_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_SELECT_PROJECT_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isSelectProjectDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_SELECT_PROJECT_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_RESOURCES_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isResourcesDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_RESOURCES_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_SETTINGS_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_SETTINGS_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isSettingsDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_SETTINGS_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_EDIT_PROJECT_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_EDIT_PROJECT_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isEditProjectDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROJECT_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_FREE_CREDITS_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_FREE_CREDITS_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isFreeCreditsDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_FREE_CREDITS_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isAvailableBalanceDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_AVAILABLE_BALANCE_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_PERIODS_DROPDOWN]: function ({commit, state}: AppContext): void {
             if (!state.appState.isPeriodsDropdownShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({commit, state}: any, value: boolean): void {
+        [APP_STATE_ACTIONS.TOGGLE_PAYMENT_SELECTION]: function ({commit, state}: AppContext, value: boolean): void {
             if (!state.appState.isPaymentSelectionShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
         },
-        [APP_STATE_ACTIONS.TOGGLE_DEL_PROJ]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_DEL_PROJ]: function ({commit, state}: AppContext): void {
             if (!state.appState.isDeleteProjectPopupShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_PROJECT_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_DEL_ACCOUNT]: function ({commit, state}: AppContext): void {
             if (!state.appState.isDeleteAccountPopupShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_DELETE_ACCOUNT_DROPDOWN);
         },
-        [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION]: function ({commit, state}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION]: function ({commit, state}: AppContext): void {
             if (!state.appState.isSuccessfulRegistrationShown) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION);
         },
-        [APP_STATE_ACTIONS.TOGGLE_CHANGE_PASSWORD_POPUP]: function ({commit}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_CHANGE_PASSWORD_POPUP]: function ({commit}: AppContext): void {
             commit(APP_STATE_MUTATIONS.TOGGLE_CHANGE_PASSWORD_POPUP);
         },
-        [APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP]: function ({commit}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_UPLOAD_CANCEL_POPUP]: function ({commit}: AppContext): void {
             commit(APP_STATE_MUTATIONS.TOGGLE_UPLOAD_CANCEL_POPUP);
         },
-        [APP_STATE_ACTIONS.TOGGLE_EDIT_PROFILE_POPUP]: function ({commit}: any): void {
+        [APP_STATE_ACTIONS.TOGGLE_EDIT_PROFILE_POPUP]: function ({commit}: AppContext): void {
             commit(APP_STATE_MUTATIONS.TOGGLE_EDIT_PROFILE_POPUP);
         },
-        [APP_STATE_ACTIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP]: function ({commit, state}: any, methodID: string): void {
+        [APP_STATE_ACTIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP]: function ({commit, state}: AppContext, methodID: string): void {
             if (!state.appState.setDefaultPaymentMethodID) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.SHOW_SET_DEFAULT_PAYMENT_METHOD_POPUP, methodID);
         },
-        [APP_STATE_ACTIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP]: function ({commit, state}: any, methodID: string): void {
+        [APP_STATE_ACTIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP]: function ({commit, state}: AppContext, methodID: string): void {
             if (!state.appState.deletePaymentMethodID) {
                 commit(APP_STATE_MUTATIONS.CLOSE_ALL);
             }
 
             commit(APP_STATE_MUTATIONS.SHOW_DELETE_PAYMENT_METHOD_POPUP, methodID);
         },
-        [APP_STATE_ACTIONS.CLOSE_POPUPS]: function ({commit}: any): void {
+        [APP_STATE_ACTIONS.CLOSE_POPUPS]: function ({commit}: AppContext): void {
             commit(APP_STATE_MUTATIONS.CLOSE_ALL);
         },
-        [APP_STATE_ACTIONS.CHANGE_STATE]: function ({commit}: any, newFetchState: AppState): void {
+        [APP_STATE_ACTIONS.CHANGE_STATE]: function ({commit}: AppContext, newFetchState: AppState): void {
             commit(APP_STATE_MUTATIONS.CHANGE_STATE, newFetchState);
         },
-        [APP_STATE_ACTIONS.SET_SATELLITE_NAME]: function ({commit}: any, satelliteName: string): void {
+        [APP_STATE_ACTIONS.SET_SATELLITE_NAME]: function ({commit}: AppContext, satelliteName: string): void {
             commit(APP_STATE_MUTATIONS.SET_SATELLITE_NAME, satelliteName);
         },
-        [APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES]: function ({commit}: any, partneredSatellites: PartneredSatellite[]): void {
+        [APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES]: function ({commit}: AppContext, partneredSatellites: PartneredSatellite[]): void {
             commit(APP_STATE_MUTATIONS.SET_PARTNERED_SATELLITES, partneredSatellites);
         },
-        [APP_STATE_ACTIONS.SET_SATELLITE_STATUS]: function ({commit}: any, isBetaSatellite: boolean): void {
+        [APP_STATE_ACTIONS.SET_SATELLITE_STATUS]: function ({commit}: AppContext, isBetaSatellite: boolean): void {
             commit(APP_STATE_MUTATIONS.SET_SATELLITE_STATUS, isBetaSatellite);
         },
-        [APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS]: function ({commit}: any, couponCodeBillingUIEnabled: boolean): void {
+        [APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS]: function ({commit}: AppContext, couponCodeBillingUIEnabled: boolean): void {
             commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled);
         },
-        [APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS]: function ({commit}: any, couponCodeSignupUIEnabled: boolean): void {
+        [APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS]: function ({commit}: AppContext, couponCodeSignupUIEnabled: boolean): void {
             commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled);
         },
     },

web/satellite/src/store/modules/buckets.ts

@@ -39,6 +39,12 @@ export class BucketsState {
     public page: BucketPage = { buckets: new Array<Bucket>(), currentPage: 1, pageCount: 1, offset: 0, limit: bucketPageLimit, search: '', totalCount: 0 };
 }
 
+interface BucketsContext {
+    state: BucketsState
+    commit: any
+    rootGetters: any
+}
+
 /**
  * creates buckets module with all dependencies
  *
@@ -68,7 +74,7 @@ export function makeBucketsModule(api: BucketsApi): StoreModule<BucketsState> {
             },
         },
         actions: {
-            [FETCH]: async function({commit, rootGetters, state}: any, page: number): Promise<BucketPage> {
+            [FETCH]: async function({commit, rootGetters, state}: BucketsContext, page: number): Promise<BucketPage> {
                 const projectID = rootGetters.selectedProject.id;
                 const before = new Date();
                 state.cursor.page = page;
@@ -81,17 +87,17 @@ export function makeBucketsModule(api: BucketsApi): StoreModule<BucketsState> {
 
                 return result;
             },
-            [FETCH_ALL_BUCKET_NAMES]: async function({commit, rootGetters}: any): Promise<string[]> {
+            [FETCH_ALL_BUCKET_NAMES]: async function({commit, rootGetters}: BucketsContext): Promise<string[]> {
                 const result: string[] = await api.getAllBucketNames(rootGetters.selectedProject.id);
 
                 commit(SET_ALL_BUCKET_NAMES, result);
 
                 return result;
             },
-            [BUCKET_ACTIONS.SET_SEARCH]: function({commit}, search: string) {
+            [BUCKET_ACTIONS.SET_SEARCH]: function({commit}: BucketsContext, search: string) {
                 commit(SET_SEARCH, search);
             },
-            [BUCKET_ACTIONS.CLEAR]: function({commit}) {
+            [BUCKET_ACTIONS.CLEAR]: function({commit}: BucketsContext) {
                 commit(CLEAR);
             },
         },

web/satellite/src/store/modules/notifications.ts

@@ -12,16 +12,21 @@ export class NotificationsState {
     public notificationQueue: DelayedNotification[] = [];
 }
 
+interface NotificationsContext {
+    state: NotificationsState
+    commit: any
+}
+
 export function makeNotificationsModule(): StoreModule<NotificationsState> {
     return {
         state: new NotificationsState(),
         mutations: {
             // Mutation for adding notification to queue
-            [NOTIFICATION_MUTATIONS.ADD](state: any, notification: DelayedNotification): void {
+            [NOTIFICATION_MUTATIONS.ADD](state: NotificationsState, notification: DelayedNotification): void {
                 state.notificationQueue.push(notification);
             },
             // Mutation for deleting notification to queue
-            [NOTIFICATION_MUTATIONS.DELETE](state: any, id: string): void {
+            [NOTIFICATION_MUTATIONS.DELETE](state: NotificationsState, id: string): void {
                 if (state.notificationQueue.length < 1) {
                     return;
                 }
@@ -32,25 +37,25 @@ export function makeNotificationsModule(): StoreModule<NotificationsState> {
                     state.notificationQueue.splice(state.notificationQueue.indexOf(selectedNotification), 1);
                 }
             },
-            [NOTIFICATION_MUTATIONS.PAUSE](state: any, id: string): void {
+            [NOTIFICATION_MUTATIONS.PAUSE](state: NotificationsState, id: string): void {
                 const selectedNotification =  getNotificationById(state.notificationQueue, id);
                 if (selectedNotification) {
                     selectedNotification.pause();
                 }
             },
-            [NOTIFICATION_MUTATIONS.RESUME](state: any, id: string): void {
+            [NOTIFICATION_MUTATIONS.RESUME](state: NotificationsState, id: string): void {
                 const selectedNotification =  getNotificationById(state.notificationQueue, id);
                 if (selectedNotification) {
                     selectedNotification.start();
                 }
             },
-            [NOTIFICATION_MUTATIONS.CLEAR](state: any): void {
+            [NOTIFICATION_MUTATIONS.CLEAR](state: NotificationsState): void {
                 state.notificationQueue = [];
             },
         },
         actions: {
             // Commits mutation for adding success notification
-            [NOTIFICATION_ACTIONS.SUCCESS]: function ({commit}: any, message: string): void {
+            [NOTIFICATION_ACTIONS.SUCCESS]: function ({commit}: NotificationsContext, message: string): void {
                 const notification = new DelayedNotification(
                     () => commit(NOTIFICATION_MUTATIONS.DELETE, notification.id),
                     NOTIFICATION_TYPES.SUCCESS,
@@ -60,7 +65,7 @@ export function makeNotificationsModule(): StoreModule<NotificationsState> {
                 commit(NOTIFICATION_MUTATIONS.ADD, notification);
             },
             // Commits mutation for adding info notification
-            [NOTIFICATION_ACTIONS.NOTIFY]: function ({commit}: any, message: string): void {
+            [NOTIFICATION_ACTIONS.NOTIFY]: function ({commit}: NotificationsContext, message: string): void {
 
                 const notification = new DelayedNotification(
                     () => commit(NOTIFICATION_MUTATIONS.DELETE, notification.id),
@@ -71,7 +76,7 @@ export function makeNotificationsModule(): StoreModule<NotificationsState> {
                 commit(NOTIFICATION_MUTATIONS.ADD, notification);
             },
             // Commits mutation for adding error notification
-            [NOTIFICATION_ACTIONS.ERROR]: function ({commit}: any, message: string): void {
+            [NOTIFICATION_ACTIONS.ERROR]: function ({commit}: NotificationsContext, message: string): void {
                 const notification = new DelayedNotification(
                     () => commit(NOTIFICATION_MUTATIONS.DELETE, notification.id),
                     NOTIFICATION_TYPES.ERROR,
@@ -81,7 +86,7 @@ export function makeNotificationsModule(): StoreModule<NotificationsState> {
                 commit(NOTIFICATION_MUTATIONS.ADD, notification);
             },
             // Commits mutation for adding error notification
-            [NOTIFICATION_ACTIONS.WARNING]: function ({commit}: any, message: string): void {
+            [NOTIFICATION_ACTIONS.WARNING]: function ({commit}: NotificationsContext, message: string): void {
                 const notification = new DelayedNotification(
                     () => commit(NOTIFICATION_MUTATIONS.DELETE, notification.id),
                     NOTIFICATION_TYPES.WARNING,
@@ -90,13 +95,13 @@ export function makeNotificationsModule(): StoreModule<NotificationsState> {
 
                 commit(NOTIFICATION_MUTATIONS.ADD, notification);
             },
-            [NOTIFICATION_ACTIONS.DELETE]: function ({commit}: any, id: string): void {
+            [NOTIFICATION_ACTIONS.DELETE]: function ({commit}: NotificationsContext, id: string): void {
                 commit(NOTIFICATION_MUTATIONS.DELETE, id);
             },
-            [NOTIFICATION_ACTIONS.PAUSE]: function ({commit}: any, id: string): void {
+            [NOTIFICATION_ACTIONS.PAUSE]: function ({commit}: NotificationsContext, id: string): void {
                 commit(NOTIFICATION_MUTATIONS.PAUSE, id);
             },
-            [NOTIFICATION_ACTIONS.RESUME]: function ({commit}: any, id: string): void {
+            [NOTIFICATION_ACTIONS.RESUME]: function ({commit}: NotificationsContext, id: string): void {
                 commit(NOTIFICATION_MUTATIONS.RESUME, id);
             },
             [NOTIFICATION_ACTIONS.CLEAR]: function ({commit}): void {

web/satellite/src/store/modules/objects.ts

@@ -56,6 +56,13 @@ export class ObjectsState {
     public leaveRoute = '';
 }
 
+interface ObjectsContext {
+    state: ObjectsState
+    commit: any
+    dispatch: any
+    rootState: any
+}
+
 /**
  * Creates objects module with all dependencies.
  */
@@ -104,22 +111,22 @@ export function makeObjectsModule(): StoreModule<ObjectsState> {
             },
         },
         actions: {
-            setApiKey: function({commit}: any, apiKey: string): void {
+            setApiKey: function({commit}: ObjectsContext, apiKey: string): void {
                 commit(SET_API_KEY, apiKey);
             },
-            setAccessGrant: function({commit}: any, accessGrant: string): void {
+            setAccessGrant: function({commit}: ObjectsContext, accessGrant: string): void {
                 commit(SET_ACCESS_GRANT, accessGrant);
             },
-            setGatewayCredentials: function({commit}: any, credentials: GatewayCredentials): void {
+            setGatewayCredentials: function({commit}: ObjectsContext, credentials: GatewayCredentials): void {
                 commit(SET_GATEWAY_CREDENTIALS, credentials);
             },
-            setS3Client: function({commit}: any): void {
+            setS3Client: function({commit}: ObjectsContext): void {
                 commit(SET_S3_CLIENT);
             },
-            setPassphrase: function({commit}: any, passphrase: string): void {
+            setPassphrase: function({commit}: ObjectsContext, passphrase: string): void {
                 commit(SET_PASSPHRASE, passphrase);
             },
-            setFileComponentBucketName: function({commit}: any, bucketName: string): void {
+            setFileComponentBucketName: function({commit}: ObjectsContext, bucketName: string): void {
                 commit(SET_FILE_COMPONENT_BUCKET_NAME, bucketName);
             },
             fetchBuckets: async function(ctx): Promise<void> {
@@ -137,10 +144,10 @@ export function makeObjectsModule(): StoreModule<ObjectsState> {
                     Bucket: name,
                 }).promise();
             },
-            clearObjects: function({commit}: any): void {
+            clearObjects: function({commit}: ObjectsContext): void {
                 commit(CLEAR);
             },
-            checkOngoingUploads: function({commit, dispatch, rootState}: any, leaveRoute: string): boolean {
+            checkOngoingUploads: function({commit, dispatch, rootState}: ObjectsContext, leaveRoute: string): boolean {
                 if (!rootState.files.uploading.length) {
                     return false;
                 }

web/satellite/src/store/modules/payments.ts

@@ -94,6 +94,12 @@ export class PaymentsState {
     public isAddPMModalShown = false;
 }
 
+interface PaymentsContext {
+    state: PaymentsState
+    commit: any
+    rootGetters: any
+}
+
 /**
  * creates payments module with all dependencies
  *
@@ -184,7 +190,7 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
             },
         },
         actions: {
-            [GET_BALANCE]: async function({commit}: any): Promise<AccountBalance> {
+            [GET_BALANCE]: async function({commit}: PaymentsContext): Promise<AccountBalance> {
                 const balance: AccountBalance = await api.getBalance();
 
                 commit(SET_BALANCE, balance);
@@ -194,44 +200,44 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
             [SETUP_ACCOUNT]: async function(): Promise<void> {
                 await api.setupAccount();
             },
-            [GET_CREDIT_CARDS]: async function({commit}: any): Promise<CreditCard[]> {
+            [GET_CREDIT_CARDS]: async function({commit}: PaymentsContext): Promise<CreditCard[]> {
                 const creditCards = await api.listCreditCards();
 
                 commit(SET_CREDIT_CARDS, creditCards);
 
                 return creditCards;
             },
-            [ADD_CREDIT_CARD]: async function({commit}: any, token: string): Promise<void> {
+            [ADD_CREDIT_CARD]: async function(_context: PaymentsContext, token: string): Promise<void> {
                 await api.addCreditCard(token);
             },
-            [TOGGLE_CARD_SELECTION]: function({commit}: any, id: string): void {
+            [TOGGLE_CARD_SELECTION]: function({commit}: PaymentsContext, id: string): void {
                 commit(UPDATE_CARDS_SELECTION, id);
             },
-            [CLEAR_CARDS_SELECTION]: function({commit}: any): void {
+            [CLEAR_CARDS_SELECTION]: function({commit}: PaymentsContext): void {
                 commit(UPDATE_CARDS_SELECTION, null);
             },
-            [MAKE_CARD_DEFAULT]: async function({commit}: any, id: string): Promise<void> {
+            [MAKE_CARD_DEFAULT]: async function({commit}: PaymentsContext, id: string): Promise<void> {
                 await api.makeCreditCardDefault(id);
 
                 commit(UPDATE_CARDS_DEFAULT, id);
             },
-            [REMOVE_CARD]: async function({commit, state}: any, cardId: string): Promise<void> {
+            [REMOVE_CARD]: async function({commit, state}: PaymentsContext, cardId: string): Promise<void> {
                 await api.removeCreditCard(cardId);
 
                 commit(SET_CREDIT_CARDS, state.creditCards.filter(card => card.id !== cardId));
             },
-            [CLEAR_PAYMENT_INFO]: function({commit}: any): void {
+            [CLEAR_PAYMENT_INFO]: function({commit}: PaymentsContext): void {
                 commit(CLEAR);
             },
-            [GET_PAYMENTS_HISTORY]: async function({commit}: any): Promise<void> {
+            [GET_PAYMENTS_HISTORY]: async function({commit}: PaymentsContext): Promise<void> {
                 const paymentsHistory: PaymentsHistoryItem[] = await api.paymentsHistory();
 
                 commit(SET_PAYMENTS_HISTORY, paymentsHistory);
             },
-            [MAKE_TOKEN_DEPOSIT]: async function({commit}: any, amount: number): Promise<TokenDeposit> {
+            [MAKE_TOKEN_DEPOSIT]: async function(_context: PaymentsContext, amount: number): Promise<TokenDeposit> {
                 return await api.makeTokenDeposit(amount);
             },
-            [GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP]: async function({commit, rootGetters}: any): Promise<void> {
+            [GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP]: async function({commit, rootGetters}: PaymentsContext): Promise<void> {
                 const now = new Date();
                 const endUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes()));
                 const startUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1, 0, 0));
@@ -243,7 +249,7 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
                 commit(SET_PRICE_SUMMARY, usageAndCharges);
                 commit(SET_PRICE_SUMMARY_FOR_SELECTED_PROJECT, rootGetters.selectedProject.id);
             },
-            [GET_PROJECT_USAGE_AND_CHARGES_PREVIOUS_ROLLUP]: async function({commit}: any): Promise<void> {
+            [GET_PROJECT_USAGE_AND_CHARGES_PREVIOUS_ROLLUP]: async function({commit}: PaymentsContext): Promise<void> {
                 const now = new Date();
                 const startUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - 1, 1, 0, 0));
                 const endUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 0, 23, 59, 59));
@@ -254,7 +260,7 @@ export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState>
                 commit(SET_PROJECT_USAGE_AND_CHARGES, usageAndCharges);
                 commit(SET_PRICE_SUMMARY, usageAndCharges);
             },
-            [APPLY_COUPON_CODE]: async function({commit}: any, code: string): Promise<void> {
+            [APPLY_COUPON_CODE]: async function(_context: PaymentsContext, code: string): Promise<void> {
                 await api.applyCouponCode(code);
             },
         },

web/satellite/src/store/modules/projectMembers.ts

@@ -39,6 +39,12 @@ export class ProjectMembersState {
     public selectedProjectMembersEmails: string[] = [];
 }
 
+interface ProjectsContext {
+    state: ProjectMembersState
+    commit: any
+    rootGetters: any
+}
+
 export function makeProjectMembersModule(api: ProjectMembersApi): StoreModule<ProjectMembersState> {
     return {
         state: new ProjectMembersState(),
@@ -93,19 +99,19 @@ export function makeProjectMembersModule(api: ProjectMembersApi): StoreModule<Pr
             },
         },
         actions: {
-            addProjectMembers: async function ({rootGetters}: any, emails: string[]): Promise<void> {
+            addProjectMembers: async function ({rootGetters}: ProjectsContext, emails: string[]): Promise<void> {
                 const projectId = rootGetters.selectedProject.id;
 
                 await api.add(projectId, emails);
             },
-            deleteProjectMembers: async function ({rootGetters, state, commit}: any): Promise<void> {
+            deleteProjectMembers: async function ({rootGetters, state, commit}: ProjectsContext): Promise<void> {
                 const projectId = rootGetters.selectedProject.id;
 
                 await api.delete(projectId, state.selectedProjectMembersEmails);
 
                 commit(CLEAR_SELECTION);
             },
-            fetchProjectMembers: async function ({commit, rootGetters, state}: any, page: number): Promise<ProjectMembersPage> {
+            fetchProjectMembers: async function ({commit, rootGetters, state}: ProjectsContext, page: number): Promise<ProjectMembersPage> {
                 const projectID = rootGetters.selectedProject.id;
 
                 commit(SET_PAGE, page);
@@ -116,23 +122,23 @@ export function makeProjectMembersModule(api: ProjectMembersApi): StoreModule<Pr
 
                 return projectMembersPage;
             },
-            setProjectMembersSearchQuery: function ({commit}, search: string) {
+            setProjectMembersSearchQuery: function ({commit}: ProjectsContext, search: string) {
                 commit(SET_SEARCH_QUERY, search);
             },
-            setProjectMembersSortingBy: function ({commit}, order: ProjectMemberOrderBy) {
+            setProjectMembersSortingBy: function ({commit}: ProjectsContext, order: ProjectMemberOrderBy) {
                 commit(CHANGE_SORT_ORDER, order);
             },
-            setProjectMembersSortingDirection: function ({commit}, direction: SortDirection) {
+            setProjectMembersSortingDirection: function ({commit}: ProjectsContext, direction: SortDirection) {
                 commit(CHANGE_SORT_ORDER_DIRECTION, direction);
             },
-            clearProjectMembers: function ({commit}) {
+            clearProjectMembers: function ({commit}: ProjectsContext) {
                 commit(CLEAR);
                 commit(CLEAR_SELECTION);
             },
-            toggleProjectMemberSelection: function ({commit}: any, projectMember: ProjectMember) {
+            toggleProjectMemberSelection: function ({commit}: ProjectsContext, projectMember: ProjectMember) {
                 commit(TOGGLE_SELECTION, projectMember);
             },
-            clearProjectMemberSelection: function ({commit}: any) {
+            clearProjectMemberSelection: function ({commit}: ProjectsContext) {
                 commit(CLEAR_SELECTION);
             },
         },

web/satellite/src/store/modules/projects.ts

@@ -50,6 +50,13 @@ export class ProjectsState {
     public page: ProjectsPage = new ProjectsPage();
 }
 
+interface ProjectsContext {
+    state: ProjectsState
+    commit: any
+    rootGetters: any
+    dispatch: any
+}
+
 const {
     FETCH,
     CREATE,
@@ -151,14 +158,14 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState>
             },
         },
         actions: {
-            [FETCH]: async function ({commit}: any): Promise<Project[]> {
+            [FETCH]: async function ({commit}: ProjectsContext): Promise<Project[]> {
                 const projects = await api.get();
 
                 commit(SET_PROJECTS, projects);
 
                 return projects;
             },
-            [FETCH_OWNED]: async function ({commit, state}, pageNumber: number): Promise<ProjectsPage> {
+            [FETCH_OWNED]: async function ({commit, state}: ProjectsContext, pageNumber: number): Promise<ProjectsPage> {
                 commit(SET_PAGE_NUMBER, pageNumber);
 
                 const projectsPage: ProjectsPage = await api.getOwnedProjects(state.cursor);
@@ -166,14 +173,14 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState>
 
                 return projectsPage;
             },
-            [CREATE]: async function ({commit}: any, createProjectFields: ProjectFields): Promise<Project> {
+            [CREATE]: async function ({commit}: ProjectsContext, createProjectFields: ProjectFields): Promise<Project> {
                 const project = await api.create(createProjectFields);
 
                 commit(ADD, project);
 
                 return project;
             },
-            [CREATE_DEFAULT_PROJECT]: async function ({rootGetters, dispatch}: any): Promise<void> {
+            [CREATE_DEFAULT_PROJECT]: async function ({rootGetters, dispatch}: ProjectsContext): Promise<void> {
                 const UNTITLED_PROJECT_NAME = 'My First Project';
                 const UNTITLED_PROJECT_DESCRIPTION = '___';
                 const project = new ProjectFields(
@@ -185,39 +192,39 @@ export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState>
 
                 await dispatch(SELECT, createdProject.id);
             },
-            [SELECT]: function ({commit}: any, projectID: string): void {
+            [SELECT]: function ({commit}: ProjectsContext, projectID: string): void {
                 commit(SELECT_PROJECT, projectID);
             },
-            [UPDATE_NAME]: async function ({commit, state}: any, fieldsToUpdate: ProjectFields): Promise<void> {
+            [UPDATE_NAME]: async function ({commit, state}: ProjectsContext, fieldsToUpdate: ProjectFields): Promise<void> {
                 await api.update(state.selectedProject.id, fieldsToUpdate.name, state.selectedProject.description);
 
                 commit(UPDATE_PROJECT_NAME, fieldsToUpdate);
             },
-            [UPDATE_DESCRIPTION]: async function ({commit, state}: any, fieldsToUpdate: ProjectFields): Promise<void> {
+            [UPDATE_DESCRIPTION]: async function ({commit, state}: ProjectsContext, fieldsToUpdate: ProjectFields): Promise<void> {
                 await api.update(state.selectedProject.id, state.selectedProject.name, fieldsToUpdate.description);
 
                 commit(UPDATE_PROJECT_DESCRIPTION, fieldsToUpdate);
             },
-            [DELETE]: async function ({commit}: any, projectID: string): Promise<void> {
+            [DELETE]: async function ({commit}: ProjectsContext, projectID: string): Promise<void> {
                 await api.delete(projectID);
 
                 commit(REMOVE, projectID);
             },
-            [GET_LIMITS]: async function ({commit}: any, projectID: string): Promise<ProjectLimits> {
+            [GET_LIMITS]: async function ({commit}: ProjectsContext, projectID: string): Promise<ProjectLimits> {
                 const limits = await api.getLimits(projectID);
 
                 commit(SET_LIMITS, limits);
 
                 return limits;
             },
-            [GET_TOTAL_LIMITS]: async function ({commit}: any): Promise<ProjectLimits> {
+            [GET_TOTAL_LIMITS]: async function ({commit}: ProjectsContext): Promise<ProjectLimits> {
                 const limits = await api.getTotalLimits();
 
                 commit(SET_TOTAL_LIMITS, limits);
 
                 return limits;
             },
-            [CLEAR]: function({commit}: any): void {
+            [CLEAR]: function({commit}: ProjectsContext): void {
                 commit(CLEAR_PROJECTS);
             },
         },

web/satellite/src/store/modules/users.ts

@@ -46,6 +46,11 @@ const {
     CLEAR,
 } = USER_MUTATIONS;
 
+interface UsersContext {
+    state: UsersState
+    commit: any
+}
+
 /**
  * creates users module with all dependencies
  *
@@ -86,12 +91,12 @@ export function makeUsersModule(api: UsersApi): StoreModule<UsersState> {
         },
 
         actions: {
-            [UPDATE]: async function ({commit}: any, userInfo: UpdatedUser): Promise<void> {
+            [UPDATE]: async function ({commit}: UsersContext, userInfo: UpdatedUser): Promise<void> {
                 await api.update(userInfo);
 
                 commit(UPDATE_USER, userInfo);
             },
-            [GET]: async function ({commit}: any): Promise<User> {
+            [GET]: async function ({commit}: UsersContext): Promise<User> {
                 const user = await api.get();
 
                 commit(SET_USER, user);
@@ -104,17 +109,17 @@ export function makeUsersModule(api: UsersApi): StoreModule<UsersState> {
             [ENABLE_USER_MFA]: async function (_, passcode: string): Promise<void> {
                 await api.enableUserMFA(passcode);
             },
-            [GENERATE_USER_MFA_SECRET]: async function ({commit}: any): Promise<void> {
+            [GENERATE_USER_MFA_SECRET]: async function ({commit}: UsersContext): Promise<void> {
                 const secret = await api.generateUserMFASecret();
 
                 commit(SET_USER_MFA_SECRET, secret);
             },
-            [GENERATE_USER_MFA_RECOVERY_CODES]: async function ({commit}: any): Promise<void> {
+            [GENERATE_USER_MFA_RECOVERY_CODES]: async function ({commit}: UsersContext): Promise<void> {
                 const codes = await api.generateUserMFARecoveryCodes();
 
                 commit(SET_USER_MFA_RECOVERY_CODES, codes);
             },
-            [CLEAR]: function({commit}: any) {
+            [CLEAR]: function({commit}: UsersContext) {
                 commit(CLEAR);
             },
         },

web/satellite/src/types/DelayedNotification.ts

@@ -18,7 +18,7 @@ export class DelayedNotification {
 
     public readonly type: string;
     public readonly message: string;
-    public readonly style: any;
+    public readonly style: { backgroundColor: string };
     public readonly imgSource: string;
 
     constructor(callback: () => void, type: string, message: string) {

web/satellite/src/types/EmailInput.ts

@@ -10,7 +10,7 @@ export class EmailInput {
         this.error = false;
     }
 
-    public setError(error: boolean) {
+    public setError(error: boolean): void {
         this.error = error;
     }
 }

web/satellite/src/types/pagination.ts

@@ -16,7 +16,7 @@ export class Page {
         this.onClick = callback;
     }
 
-    public get index() {
+    public get index(): number {
         return this.pageIndex;
     }
 

web/satellite/src/types/plugins.ts

@@ -1,8 +1,6 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import Vue from 'vue';
-
 import { Notificator } from '@/utils/plugins/notificator';
 
 declare module 'vue/types/vue' {

web/satellite/src/types/users.ts

@@ -81,11 +81,11 @@ export class UpdatedUser {
         public shortName: string = '',
     ) {}
 
-    public setFullName(value: string) {
+    public setFullName(value: string): void {
         this.fullName = value.trim();
     }
 
-    public setShortName(value: string) {
+    public setShortName(value: string): void {
         this.shortName = value.trim();
     }
 

web/satellite/src/utils/avatarColorManager.ts

@@ -5,7 +5,7 @@
  * Returns color string depends on first symbol of first name.
  * @param symbol
  */
-export function getColor(symbol): string {
+export function getColor(symbol: string): string {
     switch (symbol) {
     case 'A':
     case 'I':

web/satellite/src/utils/plugins/notificator.ts

@@ -1,28 +1,32 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { store } from '@/store';
+import { store as globalStore } from '@/store';
 import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
 
+interface Dispatcher {
+    dispatch(key:string, message:string)
+}
+
 /**
  * Exposes UI notifications functionality.
  */
 export class Notificator {
-    public constructor(private store) {}
+    public constructor(private store: Dispatcher) {}
 
-    public async success(message: string) {
+    public async success(message: string): Promise<void> {
         await this.store.dispatch(NOTIFICATION_ACTIONS.SUCCESS, message);
     }
 
-    public async error(message: string) {
+    public async error(message: string): Promise<void> {
         await this.store.dispatch(NOTIFICATION_ACTIONS.ERROR, message);
     }
 
-    public async notify(message: string) {
+    public async notify(message: string): Promise<void> {
         await this.store.dispatch(NOTIFICATION_ACTIONS.NOTIFY, message);
     }
 
-    public async warning(message: string) {
+    public async warning(message: string): Promise<void> {
         await this.store.dispatch(NOTIFICATION_ACTIONS.WARNING, message);
     }
 }
@@ -31,7 +35,7 @@ export class Notificator {
  * Registers plugin in Vue instance.
  */
 export class NotificatorPlugin {
-    public install(Vue) {
+    public install(localVue: { prototype: { $notify: Notificator } }): void {
-        Vue.prototype.$notify = new Notificator(store);
+        localVue.prototype.$notify = new Notificator(globalStore);
     }
 }

web/satellite/src/views/DashboardArea.vue

@@ -53,7 +53,6 @@ import { MetaUtils } from '@/utils/meta';
 
 const {
     SETUP_ACCOUNT,
-    GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP,
     GET_CREDIT_CARDS,
 } = PAYMENTS_ACTIONS;
 

web/satellite/src/views/ForgotPassword.vue

@@ -18,7 +18,7 @@
                                 <SelectedCheckIcon />
                                 <span class="forgot-area__expand__dropdown__item__name">{{ satelliteName }}</span>
                             </div>
-                            <a v-for="sat in partneredSatellites" class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
+                            <a v-for="sat in partneredSatellites" :key="sat.id" class="forgot-area__expand__dropdown__item" :href="sat.address + '/forgot-password'">
                                 {{ sat.name }}
                             </a>
                         </div>

web/satellite/src/views/LoginArea.vue

@@ -26,7 +26,7 @@
                                     <SelectedCheckIcon />
                                     <span class="login-area__expand__dropdown__item__name">{{ satelliteName }}</span>
                                 </div>
-                                <a v-for="sat in partneredSatellites" class="login-area__expand__dropdown__item" :href="sat.address + '/login'">
+                                <a v-for="sat in partneredSatellites" :key="sat.id" class="login-area__expand__dropdown__item" :href="sat.address + '/login'">
                                     {{ sat.name }}
                                 </a>
                             </div>
@@ -155,7 +155,7 @@ export default class Login extends Vue {
     /**
      * Clears confirm MFA input.
      */
-    public clearConfirmMFAInput() {
+    public clearConfirmMFAInput(): void {
         this.$refs.mfaInput.clearInput();
     }
 

web/satellite/src/views/RegisterArea.vue

@@ -39,7 +39,7 @@
                                     <SelectedCheckIcon />
                                     <span class="register-area__input-area__expand__dropdown__item__name">{{ satelliteName }}</span>
                                 </div>
-                                <a v-for="sat in partneredSatellites" class="register-area__input-area__expand__dropdown__item" :href="sat.address + '/signup'">
+                                <a v-for="sat in partneredSatellites" :key="sat.id" class="register-area__input-area__expand__dropdown__item" :href="sat.address + '/signup'">
                                     {{ sat.name }}
                                 </a>
                             </div>

web/satellite/tests/unit/account/billing/freeCredits/CreditsHistory.spec.ts

@@ -1,7 +1,6 @@
 // Copyright (C) 2020 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import sinon from 'sinon';
 import Vuex from 'vuex';
 
 import CreditsHistory from '@/components/account/billing/freeCredits/CreditsHistory.vue';

web/satellite/tests/unit/account/billing/paymentMethods/AddStorjForm.spec.ts

@@ -32,7 +32,14 @@ const usersModule = makeUsersModule(usersApi);
 const projectsApi = new ProjectsApiMock();
 const projectsModule = makeProjectsModule(projectsApi);
 const notificationsModule = makeNotificationsModule();
-const store = new Vuex.Store({ modules: { usersModule, paymentsModule, projectsModule, appStateModule, notificationsModule }});
+
+const store = new Vuex.Store<{
+    usersModule: typeof usersModule.state,
+    paymentsModule: typeof paymentsModule.state,
+    projectsModule: typeof projectsModule.state,
+    appStateModule: typeof appStateModule.state,
+    notificationsModule: typeof notificationsModule.state,
+}>({ modules: { usersModule, paymentsModule, projectsModule, appStateModule, notificationsModule }});
 store.commit(USER_MUTATIONS.SET_USER, new User('id', 'name', 'short', 'test@test.test', 'partner', 'pass'));
 
 class NotificatorPlugin {
@@ -63,12 +70,12 @@ describe('AddStorjForm', () => {
         wrapper.vm.$data.tokenDepositValue = 5;
         await wrapper.vm.onConfirmAddSTORJ();
 
-        expect((store.state as any).notificationsModule.notificationQueue[0].message).toMatch('First deposit amount must be more than $10 and less than $1000000');
+        expect(store.state.notificationsModule.notificationQueue[0].message).toMatch('First deposit amount must be more than $10 and less than $1000000');
 
         wrapper.vm.$data.tokenDepositValue = 1000000;
         await wrapper.vm.onConfirmAddSTORJ();
 
-        expect((store.state as any).notificationsModule.notificationQueue[1].message).toMatch('First deposit amount must be more than $10 and less than $1000000');
+        expect(store.state.notificationsModule.notificationQueue[1].message).toMatch('First deposit amount must be more than $10 and less than $1000000');
     });
 
     it('user is able to add less than 10$ after coupon is applied', async () => {
@@ -87,7 +94,7 @@ describe('AddStorjForm', () => {
         wrapper.vm.$data.tokenDepositValue = 5;
         await wrapper.vm.onConfirmAddSTORJ();
 
-        expect((store.state as any).notificationsModule.notificationQueue[0].type).toMatch('SUCCESS');
+        expect(store.state.notificationsModule.notificationQueue[0].type).toMatch('SUCCESS');
     });
 
     it('renders correctly after continue To Coin Payments click', () => {

web/satellite/tests/unit/common/PagesBlock.spec.ts

@@ -6,7 +6,7 @@ import * as sinon from 'sinon';
 import PagesBlock from '@/components/common/PagesBlock.vue';
 
 import { Page } from '@/types/pagination';
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 describe('Pagination.vue', () => {
     it('renders correctly without props', () => {

web/satellite/tests/unit/components/header/AccountDropdown.spec.ts

@@ -6,7 +6,7 @@ import Vuex from 'vuex';
 
 import AccountDropdown from '@/components/header/accountDropdown/AccountDropdown.vue';
 
-import { RouteConfig, router } from '@/router';
+import { router } from '@/router';
 import { appStateModule } from '@/store/modules/appState';
 import { createLocalVue, mount } from '@vue/test-utils';
 

web/satellite/tests/unit/mock/api/accessGrants.ts

@@ -20,23 +20,23 @@ export class AccessGrantsMock implements AccessGrantsApi {
         this.mockAccessGrantsPage = mockAccessGrantsPage;
     }
 
-    get(projectId: string, cursor: AccessGrantCursor): Promise<AccessGrantsPage> {
+    get(_projectId: string, _cursor: AccessGrantCursor): Promise<AccessGrantsPage> {
         return Promise.resolve(this.mockAccessGrantsPage);
     }
 
-    create(projectId: string, name: string): Promise<AccessGrant> {
+    create(_projectId: string, _name: string): Promise<AccessGrant> {
         return Promise.resolve(new AccessGrant('testId', 'testName', this.date, 'testKey'));
     }
 
-    delete(ids: string[]): Promise<void> {
+    delete(_ids: string[]): Promise<void> {
         return Promise.resolve();
     }
 
-    deleteByNameAndProjectID(name: string, projectID: string): Promise<void> {
+    deleteByNameAndProjectID(_name: string, _projectID: string): Promise<void> {
         return Promise.resolve();
     }
 
-    getGatewayCredentials(accessGrant: string, optionalURL?: string): Promise<GatewayCredentials> {
+    getGatewayCredentials(_accessGrant: string, _optionalURL?: string): Promise<GatewayCredentials> {
         return Promise.resolve(new GatewayCredentials('testCredId', new Date(), 'testAccessKeyId', 'testSecret', 'testEndpoint'));
     }
 }

web/satellite/tests/unit/mock/api/buckets.ts

@@ -7,11 +7,11 @@ import { BucketCursor, BucketPage, BucketsApi } from '@/types/buckets';
  * Mock for BucketsApi
  */
 export class BucketsMock implements BucketsApi {
-    get(projectId: string, before: Date, cursor: BucketCursor): Promise<BucketPage> {
+    get(_projectId: string, _before: Date, _cursor: BucketCursor): Promise<BucketPage> {
         return Promise.resolve(new BucketPage());
     }
 
-    getAllBucketNames(projectId: string): Promise<string[]> {
+    getAllBucketNames(_projectId: string): Promise<string[]> {
         return Promise.resolve(['test']);
     }
 }

web/satellite/tests/unit/mock/api/payments.ts

@@ -26,11 +26,11 @@ export class PaymentsMock implements PaymentsApi {
         return Promise.resolve([]);
     }
 
-    addCreditCard(token: string): Promise<void> {
+    addCreditCard(_token: string): Promise<void> {
         throw new Error('Method not implemented');
     }
 
-    removeCreditCard(cardId: string): Promise<void> {
+    removeCreditCard(_cardId: string): Promise<void> {
         throw new Error('Method not implemented');
     }
 
@@ -38,7 +38,7 @@ export class PaymentsMock implements PaymentsApi {
         return Promise.resolve([]);
     }
 
-    makeCreditCardDefault(cardId: string): Promise<void> {
+    makeCreditCardDefault(_cardId: string): Promise<void> {
         throw new Error('Method not implemented');
     }
 
@@ -50,7 +50,7 @@ export class PaymentsMock implements PaymentsApi {
         return Promise.resolve(new TokenDeposit(amount, 'testAddress', 'testLink'));
     }
 
-    applyCouponCode(code: string): Promise<void> {
+    applyCouponCode(_code: string): Promise<void> {
         throw new Error('Method not implemented');
     }
 }

web/satellite/tests/unit/mock/api/projectMembers.ts

@@ -14,15 +14,15 @@ export class ProjectMembersApiMock implements ProjectMembersApi {
         this.page = page;
     }
 
-    add(projectId: string, emails: string[]): Promise<void> {
+    add(_projectId: string, _emails: string[]): Promise<void> {
         throw new Error('not implemented');
     }
 
-    delete(projectId: string, emails: string[]): Promise<void> {
+    delete(_projectId: string, _emails: string[]): Promise<void> {
         throw new Error('not implemented');
     }
 
-    get(projectId: string, cursor: ProjectMemberCursor): Promise<ProjectMembersPage> {
+    get(_projectId: string, _cursor: ProjectMemberCursor): Promise<ProjectMembersPage> {
         return Promise.resolve(this.page);
     }
 }

web/satellite/tests/unit/mock/api/projects.ts

@@ -19,11 +19,11 @@ export class ProjectsApiMock implements ProjectsApi {
         this.mockLimits = mockLimits;
     }
 
-    create(createProjectFields: ProjectFields): Promise<Project> {
+    create(_createProjectFields: ProjectFields): Promise<Project> {
         throw new Error('not implemented');
     }
 
-    delete(projectId: string): Promise<void> {
+    delete(_projectId: string): Promise<void> {
         throw new Error('not implemented');
     }
 
@@ -31,15 +31,15 @@ export class ProjectsApiMock implements ProjectsApi {
         return Promise.resolve(this.mockProjects);
     }
 
-    getOwnedProjects(cursor: ProjectsCursor): Promise<ProjectsPage> {
+    getOwnedProjects(_cursor: ProjectsCursor): Promise<ProjectsPage> {
         return Promise.resolve(this.mockProjectsPage);
     }
 
-    update(projectId: string, name: string, description: string): Promise<void> {
+    update(_projectId: string, _name: string, _description: string): Promise<void> {
         return Promise.resolve();
     }
 
-    getLimits(projectId: string): Promise<ProjectLimits> {
+    getLimits(_projectId: string): Promise<ProjectLimits> {
         return Promise.resolve(this.mockLimits);
     }
 

web/satellite/tests/unit/mock/api/users.ts

@@ -17,7 +17,7 @@ export class UsersApiMock implements UsersApi {
         return Promise.resolve(this.mockUser);
     }
 
-    public update(user: UpdatedUser): Promise<void> {
+    public update(_user: UpdatedUser): Promise<void> {
         throw new Error('not implemented');
     }
 

web/satellite/tests/unit/mock/components/TestList.vue

@@ -31,7 +31,7 @@ export default class TestList extends Vue {
 
     private items: string[] = ['1', '2', '3'];
 
-    public get getItemComponent() {
+    public get getItemComponent(): typeof TestListItem {
         return TestListItem;
     }
 

web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts

@@ -94,11 +94,11 @@ describe('NavigationArea', () => {
             router,
         });
 
-        const navigationLinks = (wrapper.vm as any).navigation;
+        const navigationLinks = wrapper.vm.navigation;
 
         expect(navigationLinks.length).toBe(expectedLinks.length);
 
-        expectedLinks.forEach((link, i) => {
+        expectedLinks.forEach((_link: NavigationLink, i: number) => {
             expect(navigationLinks[i].name).toBe(expectedLinks[i].name);
             expect(navigationLinks[i].path).toBe(expectedLinks[i].path);
         });

web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts

@@ -7,7 +7,7 @@ import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
 
 import { PaymentsHttpApi } from '@/api/payments';
 import { router } from '@/router';
-import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
+import { makePaymentsModule } from '@/store/modules/payments';
 import { makeProjectsModule } from '@/store/modules/projects';
 import { createLocalVue, mount } from '@vue/test-utils';
 

web/satellite/tests/unit/store/buckets.spec.ts

@@ -24,8 +24,11 @@ projectsModule.state.selectedProject = selectedProject;
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store({modules: { projectsModule, bucketsModule } });
+const store = new Vuex.Store<{
-const state = (store.state as any).bucketsModule;
+    projectsModule: typeof projectsModule.state,
+    bucketsModule: typeof bucketsModule.state,
+}>({modules: { projectsModule, bucketsModule } });
+const state = store.state.bucketsModule;
 const bucket = new Bucket('test', 10, 10, 1, new Date(), new Date());
 const page: BucketPage = { buckets: [bucket], currentPage: 1, pageCount: 1, offset: 0, limit: 7, search: 'test', totalCount: 1 };
 

web/satellite/tests/unit/store/projectMembers.spec.ts

@@ -29,8 +29,11 @@ const projectMembersModule = makeProjectMembersModule(pmApi);
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store({modules: { projectsModule, projectMembersModule }});
+const store = new Vuex.Store<{
-const state = (store.state as any).projectMembersModule;
+    projectsModule: typeof projectsModule.state,
+    projectMembersModule: typeof projectMembersModule.state,
+}>({modules: { projectsModule, projectMembersModule }});
+const state = store.state.projectMembersModule;
 const date = new Date(0);
 const projectMember1 = new ProjectMember('testFullName1', 'testShortName1', 'test1@example.com', date, '1');
 const projectMember2 = new ProjectMember('testFullName2', 'testShortName2', 'test2@example.com', date, '2');

web/satellite/tests/unit/store/projects.spec.ts

@@ -37,9 +37,11 @@ projectsModule.state.selectedProject = selectedProject;
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store({ modules: { projectsModule } });
+const store = new Vuex.Store<{
+    projectsModule: typeof projectsModule.state,
+}>({ modules: { projectsModule } });
 
-const state = (store.state as any).projectsModule;
+const state = store.state.projectsModule;
 
 const projects = [
     new Project(
@@ -102,7 +104,9 @@ describe('mutations', () => {
 
         store.commit(UPDATE_PROJECT_NAME, { id: '11', name: newName });
 
-        expect(state.projects.find((pr: Project) => pr.id === '11').name).toBe(newName);
+        const project = state.projects.find((pr: Project) => pr.id === '11');
+        expect(project).toBeDefined();
+        if(project) expect(project.name).toBe(newName);
     });
 
     it('update project description', () => {
@@ -112,7 +116,9 @@ describe('mutations', () => {
 
         store.commit(UPDATE_PROJECT_DESCRIPTION, { id: '11', description: newDescription });
 
-        expect(state.projects.find((pr: Project) => pr.id === '11').description).toBe(newDescription);
+        const project = state.projects.find((pr: Project) => pr.id === '11');
+        expect(project).toBeDefined();
+        if(project) expect(project.description).toBe(newDescription);
     });
 
     it('remove project', () => {
@@ -241,7 +247,9 @@ describe('actions', () => {
 
         await store.dispatch(UPDATE_NAME, fieldsToUpdate);
 
-        expect(state.projects.find((pr: Project) => pr.id === '1').name).toBe(newName);
+        const project = state.projects.find((pr: Project) => pr.id === '1');
+        expect(project).toBeDefined();
+        if(project) expect(project.name).toBe(newName);
     });
 
     it('success update project description', async () => {
@@ -255,7 +263,9 @@ describe('actions', () => {
 
         await store.dispatch(UPDATE_DESCRIPTION, fieldsToUpdate);
 
-        expect(state.projects.find((pr: Project) => pr.id === '1').description).toBe(newDescription);
+        const project = state.projects.find((pr: Project) => pr.id === '1');
+        expect(project).toBeDefined();
+        if(project) expect(project.description).toBe(newDescription);
     });
 
     it('update throws an error when api call fails', async () => {
@@ -269,7 +279,9 @@ describe('actions', () => {
             await store.dispatch(UPDATE_DESCRIPTION, fieldsToUpdate);
             expect(true).toBe(false);
         } catch (error) {
-            expect(state.projects.find((pr: Project) => pr.id === '1').description).toBe('newDescription1');
+            const project = state.projects.find((pr: Project) => pr.id === '1');
+            expect(project).toBeDefined();
+            if(project) expect(project.description).toBe('newDescription1');
         }
     });
 

web/satellite/tests/unit/store/users.spec.ts

@@ -15,7 +15,7 @@ const { UPDATE, GET, CLEAR } = USER_ACTIONS;
 
 Vue.use(Vuex);
 
-const store = new Vuex.Store(usersModule);
+const store = new Vuex.Store<typeof usersModule.state>(usersModule);
 
 describe('mutations', () => {
     beforeEach(() => {